feat: add link to DS Pro dashboard (#77)

Design-System-Pro · Dec 16, 2024 · cdf5e16 · cdf5e16
1 parent 1e78fde
commit cdf5e16
Show file tree

Hide file tree

Showing 10 changed files with 25 additions and 10 deletions.
diff --git a/packages/figma-widget/src/ui/config.ts b/packages/figma-widget/src/ui/config.ts
@@ -3,7 +3,7 @@ const featureFlags = {
 } as Record<string, boolean>;
 
 export const config = {
-  API_HOST: import.meta.env.VITE_API_HOST,
+  HOST_URL: import.meta.env.VITE_HOST_URL,
   API_KEY_READ_INTERVAL: 2 * 1000, // 2 seconds
   CREDENTIALS_KEY: 'ds-pro__credentials',
   PROJECT_ID_KEY: 'ds-pro__id',

diff --git a/packages/figma-widget/src/ui/modules/providers/api-provider.tsx b/packages/figma-widget/src/ui/modules/providers/api-provider.tsx
@@ -9,7 +9,7 @@ export function ApiProvider({ children }: { children: React.ReactNode }) {
     <TRPCReactProvider
       accessToken={credentials?.apiKey}
       source="figma"
-      baseUrl={config.API_HOST}
+      baseUrl={config.HOST_URL}
     >
       {children}
     </TRPCReactProvider>

diff --git a/packages/figma-widget/src/ui/modules/providers/auth-provider.tsx b/packages/figma-widget/src/ui/modules/providers/auth-provider.tsx
@@ -85,7 +85,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
     setState('authorizing');
     setShouldUpdatePlugin(true);
 
-    const startResponse = await fetch(`${config.API_HOST}/api/auth/start`, {
+    const startResponse = await fetch(`${config.HOST_URL}/api/auth/start`, {
       method: 'POST',
     });
 
@@ -97,13 +97,13 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
     const { writeKey, readKey } =
       (await startResponse.json()) as AuthStartResponse;
 
-    window.open(`${config.API_HOST}/auth/sign-in?figma_key=${writeKey}`);
+    window.open(`${config.HOST_URL}/auth/sign-in?figma_key=${writeKey}`);
 
     return new Promise((resolve, reject) => {
       // eslint-disable-next-line @typescript-eslint/no-misused-promises -- we want to use async function with interval
       const interval = setInterval(async () => {
         const exchangeResponse = await fetch(
-          `${config.API_HOST}/api/auth/exchange`,
+          `${config.HOST_URL}/api/auth/exchange`,
           {
             method: 'POST',
             body: JSON.stringify({ readKey }),

diff --git a/packages/figma-widget/src/ui/vite-env.d.ts b/packages/figma-widget/src/ui/vite-env.d.ts
@@ -1,7 +1,7 @@
 /// <reference types="vite/client" />
 
 interface ImportMetaEnv {
-  readonly VITE_API_HOST: string;
+  readonly VITE_HOST_URL: string;
 }
 
 interface ImportMeta {

diff --git a/packages/figma-widget/src/widget/components/container.tsx b/packages/figma-widget/src/widget/components/container.tsx
@@ -1,3 +1,4 @@
+import { config } from '../config';
 import { AutoLayout, Text } from '../lib/widget';
 import { ConnectButton } from '../modules/auth/connect-button';
 import { Divider } from './divider';
@@ -33,7 +34,9 @@ export const Container = ({ children, ...props }: ContainerProps) => {
           spacing={4}
           verticalAlignItems="center"
         >
-          <Text fontWeight="bold">DS Pro</Text>
+          <Text href={config.HOST_URL} fontWeight="bold">
+            DS Pro
+          </Text>
         </AutoLayout>
 
         <AutoLayout width="fill-parent" height={1} />
@@ -62,6 +65,7 @@ export const Container = ({ children, ...props }: ContainerProps) => {
       >
         <Link href="https://ds-project.supahub.com">Feedback</Link>
         <AutoLayout width="fill-parent" height={1} />
+        <Link href={`${config.HOST_URL}/app`}>Configure</Link>
       </AutoLayout>
     </AutoLayout>
   );

diff --git a/packages/figma-widget/src/widget/components/variables.tsx b/packages/figma-widget/src/widget/components/variables.tsx
@@ -30,7 +30,7 @@ export function Variables({
     >
       <AutoLayout direction="vertical" verticalAlignItems="center" spacing={8}>
         <Text fontSize={16} fontWeight="bold">
-          🧩 Local variables
+          🧩 Local styles & variables
         </Text>
 
         <Text fontSize={14} fill="#808080">

diff --git a/packages/figma-widget/src/widget/config.ts b/packages/figma-widget/src/widget/config.ts
@@ -1,3 +1,4 @@
 export const config = {
+  HOST_URL: import.meta.env.VITE_HOST_URL,
   extensionPluginKey: 'pro.getds.figma',
 } as const;
diff --git a/packages/figma-widget/src/widget/tsconfig.json b/packages/figma-widget/src/widget/tsconfig.json
@@ -13,5 +13,6 @@
     "sourceMap": true,
     "esModuleInterop": true,
     "skipLibCheck": true
-  }
+  },
+  "include": ["./**/*.ts", "./**/*.tsx"]
 }
diff --git a/packages/figma-widget/src/widget/vite-env.d.ts b/packages/figma-widget/src/widget/vite-env.d.ts
@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_HOST_URL: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
diff --git a/turbo.json b/turbo.json
@@ -19,7 +19,7 @@
     "SEND_EMAIL_HOOK_SECRET",
     "SUPABASE_ANON_KEY",
     "SUPABASE_URL",
-    "VITE_API_HOST"
+    "VITE_HOST_URL"
   ],
   "tasks": {
     "topo": {