integrations categories and coming soon integrations (#40)

apps/dashboard/README.md

@@ -14,7 +14,7 @@ pnpm dev
 bun dev
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+Open [https://localhost:3000](https://localhost:3000) with your browser to see the result.
 
 You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
 

apps/dashboard/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

apps/dashboard/package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "build": "next build",
-    "dev": "next dev",
+    "dev": "next dev --experimental-https",
     "format": "prettier --check . --ignore-path ../../.gitignore --ignore-path ../../.prettierignore",
     "lint": "eslint",
     "start": "next start",
@@ -21,7 +21,7 @@
     "@octokit/app": "^15.1.0",
     "@octokit/auth-oauth-app": "^8.1.1",
     "@octokit/core": "^6.1.2",
-    "@sentry/nextjs": "^8",
+    "@sentry/nextjs": "^8.30.0",
     "@supabase/ssr": "^0.4.0",
     "@supabase/supabase-js": "^2.45.0",
     "@t3-oss/env-core": "^0.11.0",

apps/dashboard/src/app/app/integrations/@tabs/default.tsx

@@ -0,0 +1,3 @@
+import DefaultPage from './inputs/page';
+
+export default DefaultPage;

apps/dashboard/src/app/app/integrations/@tabs/inputs/default.tsx

@@ -0,0 +1,3 @@
+import DefaultPage from './page';
+
+export default DefaultPage;

apps/dashboard/src/app/app/integrations/@tabs/inputs/figma/_components/figma-card.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import { IntegrationCard } from '@/components';
+import { Button, Icons } from '@ds-project/components';
+import { IntegrationLogo } from '@/components/integration-logo/integration-logo';
+import Link from 'next/link';
+import { config } from '@/config';
+
+export function FigmaCard() {
+  return (
+    <IntegrationCard
+      logo={<IntegrationLogo icon={Icons.FigmaLogoIcon} />}
+      description="Install DS Pro widget in your Figma file to synchronize Figma Variables."
+      name="Figma"
+    >
+      <Button asChild>
+        <Link href={config.figmaWidgetUrl}>Install Widget</Link>
+      </Button>
+    </IntegrationCard>
+  );
+}

apps/dashboard/src/app/app/integrations/@tabs/inputs/figma/_rsc/figma.tsx

@@ -0,0 +1,4 @@
+import { FigmaCard } from '../_components/figma-card';
+export function Figma() {
+  return <FigmaCard />;
+}

apps/dashboard/src/app/app/integrations/@tabs/inputs/page.tsx

@@ -0,0 +1,14 @@
+import { getMetadata } from '@/lib/metadata';
+import { Figma } from './figma/_rsc/figma';
+import { Penpot } from './penpot/_rsc/penpot';
+
+export const metadata = getMetadata({ title: 'Inputs' });
+
+export default function Page() {
+  return (
+    <section className="flex flex-wrap gap-2">
+      <Figma />
+      <Penpot />
+    </section>
+  );
+}

apps/dashboard/src/app/app/integrations/@tabs/inputs/penpot/_components/penpot-card.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import { IntegrationCard } from '@/components';
+import { Button, PenpotLogo } from '@ds-project/components';
+import { IntegrationLogo } from '@/components/integration-logo/integration-logo';
+
+export function PenpotCard() {
+  return (
+    <IntegrationCard
+      disabled={true}
+      logo={<IntegrationLogo icon={PenpotLogo} />}
+      description="Syncronize your assets directly from Penpot files."
+      name="Penpot"
+    >
+      <Button disabled={true}>Coming soon</Button>
+    </IntegrationCard>
+  );
+}

apps/dashboard/src/app/app/integrations/@tabs/inputs/penpot/_rsc/penpot.tsx

@@ -0,0 +1,4 @@
+import { PenpotCard } from '../_components/penpot-card';
+export function Penpot() {
+  return <PenpotCard />;
+}

apps/dashboard/src/app/app/integrations/@tabs/notifications/default.tsx

@@ -0,0 +1,3 @@
+import DefaultPage from './page';
+
+export default DefaultPage;

apps/dashboard/src/app/app/integrations/@tabs/notifications/discord/_components/discord-card.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import { IntegrationCard } from '@/components';
+import { Button, Icons } from '@ds-project/components';
+import { IntegrationLogo } from '@/components/integration-logo/integration-logo';
+
+export function DiscordCard() {
+  return (
+    <IntegrationCard
+      disabled={true}
+      logo={<IntegrationLogo icon={Icons.DiscordLogoIcon} />}
+      description="Send notifications about changes, releases or issues with your configuration."
+      name="Discord"
+    >
+      <Button disabled={true}>Coming soon</Button>
+    </IntegrationCard>
+  );
+}

apps/dashboard/src/app/app/integrations/@tabs/notifications/discord/_rsc/discord.tsx

@@ -0,0 +1,4 @@
+import { DiscordCard } from '../_components/discord-card';
+export function Discord() {
+  return <DiscordCard />;
+}

apps/dashboard/src/app/app/integrations/@tabs/notifications/page.tsx

@@ -0,0 +1,14 @@
+import { getMetadata } from '@/lib/metadata';
+import { Discord } from './discord/_rsc/discord';
+import { Slack } from './slack/_rsc/slack';
+
+export const metadata = getMetadata({ title: 'Notifications' });
+
+export default function Page() {
+  return (
+    <section className="flex flex-wrap gap-2">
+      <Discord />
+      <Slack />
+    </section>
+  );
+}

apps/dashboard/src/app/app/integrations/@tabs/notifications/slack/_components/slack-card.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import { IntegrationCard } from '@/components';
+import { Button, Icons, LucideIcons } from '@ds-project/components';
+import { IntegrationLogo } from '@/components/integration-logo/integration-logo';
+
+export function SlackCard() {
+  return (
+    <IntegrationCard
+      disabled={true}
+      logo={<IntegrationLogo icon={LucideIcons.SlackIcon} />}
+      description="Send notifications about changes, releases or issues with your configuration."
+      name="Slack"
+    >
+      <Button disabled={true}>Coming soon</Button>
+    </IntegrationCard>
+  );
+}

apps/dashboard/src/app/app/integrations/@tabs/notifications/slack/_rsc/slack.tsx

@@ -0,0 +1,4 @@
+import { SlackCard } from '../_components/slack-card';
+export function Slack() {
+  return <SlackCard />;
+}

apps/dashboard/src/app/app/integrations/@tabs/outputs/default.tsx

@@ -0,0 +1,3 @@
+import DefaultPage from './page';
+
+export default DefaultPage;

apps/dashboard/src/app/app/integrations/@tabs/outputs/github/_actions/disable-integration.action.tsx

@@ -0,0 +1,24 @@
+'use server';
+
+import { and, eq } from 'drizzle-orm';
+
+import { Integrations, integrationType } from '@ds-project/database/schema';
+import { authorizedAction } from '@/lib/safe-action';
+import { z } from 'zod';
+import { revalidatePath } from 'next/cache';
+
+export const disableIntegration = authorizedAction
+  .metadata({ actionName: 'disableIntegration' })
+  .outputSchema(
+    z.object({
+      success: z.literal(true),
+    })
+  )
+  .action(async ({ ctx }) => {
+    await ctx.database
+      .delete(Integrations)
+      .where(and(eq(Integrations.type, integrationType.Enum.github)));
+
+    revalidatePath('/app/integrations/outputs');
+    return { success: true };
+  });

apps/dashboard/src/app/app/integrations/@tabs/outputs/github/_actions/select-repository.action.ts

@@ -0,0 +1,46 @@
+'use server';
+
+import { eq } from 'drizzle-orm';
+
+import {
+  githubIntegrationSchema,
+  Integrations,
+  integrationType,
+} from '@ds-project/database/schema';
+import { database } from '@ds-project/database/client';
+import { authorizedAction } from '@/lib/safe-action';
+import { z } from 'zod';
+
+export const selectRepository = authorizedAction
+  .metadata({ actionName: 'selectRepository' })
+  .schema(
+    z.object({
+      installationId: z.number(),
+      repositoryId: z.number(),
+      tokensPath: z.string().optional(),
+    })
+  )
+  .outputSchema(
+    z.object({
+      success: z.literal(true),
+    })
+  )
+  .action(
+    async ({ parsedInput: { installationId, repositoryId, tokensPath } }) => {
+      const validatedData = await githubIntegrationSchema.parseAsync({
+        type: integrationType.enum.github,
+        installationId,
+        repositoryId,
+        tokensPath,
+      });
+
+      await database
+        .update(Integrations)
+        .set({
+          data: validatedData,
+        })
+        .where(eq(Integrations.type, integrationType.Enum.github));
+
+      return { success: true };
+    }
+  );

apps/dashboard/src/app/app/integrations/@tabs/outputs/github/_components/github-card.tsx

@@ -0,0 +1,92 @@
+'use client';
+
+import { IntegrationCard } from '@/components';
+import { Icons, Text, useToast } from '@ds-project/components';
+import { useCallback, useState } from 'react';
+import { SettingsForm } from './settings-form';
+import { disableIntegration } from '../_actions/disable-integration.action';
+import { useRouter } from 'next/navigation';
+import { IntegrationLogo } from '@/components/integration-logo/integration-logo';
+import { IntegrationSettings } from '@/components/integration-settings/integration-settings';
+
+interface GithubCardProps {
+  isEnabled: boolean;
+  enableUrl: string;
+  installationId?: number;
+  selectedRepositoryId?: number;
+  repositories?: { id: number; name: string }[];
+}
+export function GithubCard({
+  isEnabled,
+  installationId,
+  repositories,
+  selectedRepositoryId,
+  enableUrl,
+}: GithubCardProps) {
+  const router = useRouter();
+  const { toast } = useToast();
+  const [isOpen, setIsOpen] = useState(false);
+
+  const onEnabledChange = useCallback(
+    async (_isEnabled: boolean) => {
+      if (!isEnabled && _isEnabled) {
+        router.push(enableUrl);
+        return;
+      }
+
+      const result = await disableIntegration();
+
+      if (result?.serverError) {
+        toast({
+          title: 'Error',
+          description: result.serverError,
+          variant: 'destructive',
+        });
+      }
+
+      if (result?.data?.success) {
+        toast({
+          title: 'Removed',
+          description: 'GitHub integration has been removed.',
+          variant: 'default',
+        });
+      }
+    },
+    [enableUrl, isEnabled, router, toast]
+  );
+
+  const closeHandler = useCallback(() => {
+    setIsOpen(false);
+  }, []);
+
+  return (
+    <IntegrationCard
+      logo={<IntegrationLogo icon={Icons.GitHubLogoIcon} />}
+      description="Synchronize design tokens to your codebase in GitHub."
+      name="GitHub"
+    >
+      <IntegrationSettings
+        integrationLogo={<IntegrationLogo icon={Icons.GitHubLogoIcon} />}
+        isEnabled={isEnabled}
+        name="GitHub"
+        onEnabledChange={onEnabledChange}
+        isOpen={isOpen}
+        onOpenChange={setIsOpen}
+      >
+        {installationId ? (
+          <SettingsForm
+            installationId={installationId}
+            repositories={repositories}
+            selectedRepositoryId={selectedRepositoryId}
+            onSuccess={closeHandler}
+            onCancel={closeHandler}
+          />
+        ) : (
+          <Text>
+            <p>Enable the integration to configure it.</p>
+          </Text>
+        )}
+      </IntegrationSettings>
+    </IntegrationCard>
+  );
+}