Merge pull request #3 from Design-System-Project/feature/tfr2-102-fig…

…ma-variables-to-style-dictionary draft of figma converter
Design-System-Pro · Aug 23, 2024 · 9be0fa8 · 9be0fa8
2 parents c1dd688 + 3f963cf
commit 9be0fa8
Show file tree

Hide file tree

Showing 57 changed files with 1,611 additions and 556 deletions.
diff --git a/apps/dashboard/package.json b/apps/dashboard/package.json
@@ -15,6 +15,7 @@
   "dependencies": {
     "@ds-project/api": "workspace:*",
     "@ds-project/auth": "workspace:*",
+    "@ds-project/types": "workspace:*",
     "@ds-project/components": "workspace:*",
     "@ds-project/database": "workspace:*",
     "@hookform/resolvers": "^3.9.0",

diff --git a/apps/dashboard/src/app/(dashboard)/tokens/_actions/fetch-release-tokens.action.ts b/apps/dashboard/src/app/(dashboard)/tokens/_actions/fetch-release-tokens.action.ts
@@ -21,6 +21,7 @@ async function searchFileSha({
   path: string[];
   index?: number;
 }) {
+  // TODO: Explore recursive approach instead https://arc.net/l/quote/wmwrxkfr
   const { data: treeData } = await octokit.request(
     'GET /repos/{owner}/{repo}/git/trees/{tree_sha}',
     {

diff --git a/apps/dashboard/src/components/navigation/navigation.tsx b/apps/dashboard/src/components/navigation/navigation.tsx
@@ -1,4 +1,5 @@
 import {
+  Button,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -24,48 +25,63 @@ export function Navigation({ className, projects }: NavigationProps) {
   return (
     <nav
       className={cn(
-        'flex w-full justify-start gap-2 border-b border-slate-200 bg-white pb-2',
+        'flex w-full justify-between gap-2 border-b border-slate-200 bg-white pb-2',
         className
       )}
     >
-      <HomeButton />
-      <DropdownMenu>
-        <DropdownMenuTrigger className="flex items-center gap-2 rounded-md border border-[hsl(var(--input))] p-2">
-          <Icons.FrameIcon /> {projects?.[0].name} <Icons.ChevronDownIcon />
-        </DropdownMenuTrigger>
-        <DropdownMenuContent>
-          {projects?.map((project) => (
-            <DropdownMenuItem key={project.id}>
-              <Icons.FrameIcon className="mr-2" /> {project.name}
+      <div className="flex w-full gap-2">
+        <HomeButton />
+        <DropdownMenu>
+          <DropdownMenuTrigger className="flex items-center gap-2 rounded-md border border-[hsl(var(--input))] p-2">
+            <Icons.FrameIcon /> {projects?.[0].name} <Icons.ChevronDownIcon />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            {projects?.map((project) => (
+              <DropdownMenuItem key={project.id}>
+                <Icons.FrameIcon className="mr-2" /> {project.name}
+              </DropdownMenuItem>
+            ))}
+            <DropdownMenuItem
+              aria-label="Soon you will be able to add new projects"
+              disabled
+              title="Coming Soon"
+            >
+              <Icons.PlusIcon className="mr-2" /> New Project
             </DropdownMenuItem>
-          ))}
-          <DropdownMenuItem
-            aria-label="Soon you will be able to add new projects"
-            disabled
-            title="Coming Soon"
-          >
-            <Icons.PlusIcon className="mr-2" /> New Project
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <NavigationMenu>
-        <NavigationMenuList>
-          <NavigationMenuItem>
-            <Link href="/tokens" legacyBehavior passHref>
-              <NavigationMenuLink className={navigationMenuTriggerStyle()}>
-                Tokens
-              </NavigationMenuLink>
-            </Link>
-          </NavigationMenuItem>
-          <NavigationMenuItem>
-            <Link href="/integrations" legacyBehavior passHref>
-              <NavigationMenuLink className={navigationMenuTriggerStyle()}>
-                Integrations
-              </NavigationMenuLink>
-            </Link>
-          </NavigationMenuItem>
-        </NavigationMenuList>
-      </NavigationMenu>
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <NavigationMenu>
+          <NavigationMenuList>
+            <NavigationMenuItem>
+              <Link href="/tokens" legacyBehavior passHref>
+                <NavigationMenuLink className={navigationMenuTriggerStyle()}>
+                  Tokens
+                </NavigationMenuLink>
+              </Link>
+            </NavigationMenuItem>
+            <NavigationMenuItem>
+              <Link href="/integrations" legacyBehavior passHref>
+                <NavigationMenuLink className={navigationMenuTriggerStyle()}>
+                  Integrations
+                </NavigationMenuLink>
+              </Link>
+            </NavigationMenuItem>
+          </NavigationMenuList>
+        </NavigationMenu>
+      </div>
+
+      <div className="flex gap-2">
+        <Button variant="ghost" size="icon" title="GitHub">
+          <Link href="https://github.com/Design-System-Project" target="_blank">
+            <Icons.GitHubLogoIcon />
+          </Link>
+        </Button>
+        <Button variant="ghost" size="icon" title="Discord">
+          <Link href="https://discord.gg/AKza6Mqr" target="_blank">
+            <Icons.DiscordLogoIcon />
+          </Link>
+        </Button>
+      </div>
     </nav>
   );
 }
diff --git a/apps/dashboard/src/lib/middleware/figma/middleware.ts b/apps/dashboard/src/lib/middleware/figma/middleware.ts
@@ -83,8 +83,8 @@ export const figmaMiddleware: MiddlewareFactory =
     console.log('🔐 Figma: Figma key detected. Finishing authentication...');
 
     const supabase = createMiddlewareClient(request, response, {
-      supabaseAnonKey: config.supabaseUrl,
-      supabaseUrl: config.supabaseAnonKey,
+      supabaseAnonKey: config.supabaseAnonKey,
+      supabaseUrl: config.supabaseUrl,
     });
     const {
       data: { session },

diff --git a/apps/dashboard/src/types/kv-types.ts b/apps/dashboard/src/types/kv-types.ts
@@ -5,7 +5,6 @@ export interface KVCredentialsRead {
 export interface KVCredentials {
   accessToken: string;
   refreshToken: string;
-
   expiresAt: number;
 }
 

diff --git a/package.json b/package.json
@@ -21,5 +21,11 @@
   "packageManager": "[email protected]",
   "engines": {
     "node": "^20"
+  },
+  "pnpm": {
+    "overrides": {
+      "@trpc/client": "11.0.0-rc.482",
+      "@trpc/server": "11.0.0-rc.482"
+    }
   }
 }
diff --git a/packages/api/package.json b/packages/api/package.json
@@ -26,16 +26,16 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "style-dictionary": "catalog:",
-    "@ds-project/services": "workspace:*",
     "@ds-project/auth": "workspace:*",
     "@ds-project/database": "workspace:*",
+    "@ds-project/services": "workspace:*",
     "@tanstack/react-query": "^5.51.24",
     "@trpc/client": "catalog:",
     "@trpc/react-query": "catalog:",
     "@trpc/server": "catalog:",
     "next": "catalog:",
     "react": "catalog:",
+    "style-dictionary": "catalog:",
     "superjson": "^2.2.1",
     "zod": "catalog:"
   },

diff --git a/packages/api/src/operations/release.ts b/packages/api/src/operations/release.ts
@@ -0,0 +1,47 @@
+import { getInstallationOctokit, pushFile } from '@ds-project/services/github';
+import { selectGithubIntegration } from '../queries/integrations';
+import type { DSContext } from '../types/context';
+import type { DesignTokensModel } from '@ds-project/database/schema';
+
+export async function release({
+  ctx,
+  designTokens,
+}: {
+  ctx: DSContext;
+  designTokens: DesignTokensModel | null;
+}) {
+  const githubIntegration = await selectGithubIntegration({ ctx });
+
+  if (!githubIntegration) {
+    console.log('No GitHub integration found. Skipping release.');
+    return;
+  }
+
+  const octokit = await getInstallationOctokit(
+    githubIntegration.data.installationId
+  );
+
+  const repositories = await octokit.request('GET /installation/repositories');
+  const repository = repositories.data.repositories.find(
+    (_repository) => _repository.id === githubIntegration.data.repositoryId
+  );
+
+  if (!repository) {
+    console.log('No repository found. Skipping release.');
+    return;
+  }
+
+  const content = btoa(JSON.stringify(designTokens, null, 2));
+
+  await pushFile({
+    file: {
+      content,
+      encoding: 'base64',
+      name: 'tokens.json',
+      path: 'packages/generator/tokens',
+    },
+    installationId: githubIntegration.data.installationId,
+    owner: repository.owner.login,
+    repo: repository.name,
+  });
+}
diff --git a/packages/api/src/query-client.ts b/packages/api/src/query-client.ts
@@ -10,7 +10,7 @@ export const createQueryClient = () =>
       queries: {
         // With SSR, we usually want to set some default staleTime
         // above 0 to avoid refetching immediately on the client
-        staleTime: 30 * 1000,
+        staleTime: 30 * 1000, // 30 seconds
       },
       dehydrate: {
         serializeData: SuperJSON.serialize,

diff --git a/packages/api/src/react.tsx b/packages/api/src/react.tsx
@@ -1,14 +1,15 @@
 'use client';
 
 import type { QueryClient } from '@tanstack/react-query';
-import { useState } from 'react';
 import { QueryClientProvider } from '@tanstack/react-query';
+import type { TRPCLink } from '@trpc/client';
 import { loggerLink, unstable_httpBatchStreamLink } from '@trpc/client';
 import { createTRPCReact } from '@trpc/react-query';
 import SuperJSON from 'superjson';
 
 import { createQueryClient } from './query-client';
 import type { AppRouter } from './app-router';
+import { useMemo } from 'react';
 
 let clientQueryClientSingleton: QueryClient | undefined = undefined;
 const getQueryClient = () => {
@@ -23,33 +24,40 @@ const getQueryClient = () => {
 
 export const api = createTRPCReact<AppRouter>();
 
-export function TRPCReactProvider(props: { children: React.ReactNode }) {
+export function TRPCReactProvider(props: {
+  children: React.ReactNode;
+  source: string;
+  accessToken?: string;
+  trpcLinks?: TRPCLink<AppRouter>[];
+}) {
   const queryClient = getQueryClient();
 
-  const [trpcClient] = useState(() =>
-    api.createClient({
-      links: [
-        loggerLink({
-          enabled: (op) =>
-            // eslint-disable-next-line turbo/no-undeclared-env-vars
-            process.env.NODE_ENV === 'development' ||
-            (op.direction === 'down' && op.result instanceof Error),
-        }),
-        unstable_httpBatchStreamLink({
-          transformer: SuperJSON,
-          url: getBaseUrl() + '/api/trpc',
-          headers() {
-            const headerObject: Record<string, string> = {};
-            const headers = new Headers();
-            headers.set('x-trpc-source', 'nextjs-react');
-            headers.forEach((header, value) => {
-              headerObject[header] = value;
-            });
-            return headerObject;
-          },
-        }),
-      ],
-    })
+  const trpcClient = useMemo(
+    () =>
+      api.createClient({
+        links: [
+          ...(props.trpcLinks ?? []),
+          loggerLink({
+            enabled: (op) =>
+              // eslint-disable-next-line turbo/no-undeclared-env-vars
+              process.env.NODE_ENV === 'development' ||
+              (op.direction === 'down' && op.result instanceof Error),
+          }),
+          unstable_httpBatchStreamLink({
+            transformer: SuperJSON,
+            url: getBaseUrl() + '/api/v1',
+            headers() {
+              return {
+                'x-trpc-source': props.source,
+                ...(props.accessToken
+                  ? { Authorization: `Bearer ${props.accessToken}` }
+                  : {}),
+              };
+            },
+          }),
+        ],
+      }),
+    [props.accessToken, props.source, props.trpcLinks]
   );
 
   return (
@@ -62,10 +70,10 @@ export function TRPCReactProvider(props: { children: React.ReactNode }) {
 }
 
 const getBaseUrl = () => {
-  if (typeof window !== 'undefined') return window.location.origin;
+  // if (typeof window !== 'undefined') return window.location.origin;
   // eslint-disable-next-line turbo/no-undeclared-env-vars
   if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`;
 
   // eslint-disable-next-line turbo/no-undeclared-env-vars
-  return `http://localhost:${process.env.PORT ?? 3000}`;
+  return `https://localhost:${process.env.PORT ?? 3000}`;
 };