Update sdk to v2

packages/tokens-studio-for-figma/package.json

@@ -61,7 +61,7 @@
     "@supabase/supabase-js": "^2.0.5",
     "@supernovaio/supernova-sdk": "^1.9.3",
     "@tokens-studio/graph-engine": "^0.17.5",
-    "@tokens-studio/sdk": "^1.2.1",
+    "@tokens-studio/sdk": "^2.0.0-alpha.0",
     "@tokens-studio/tokens": "0.2.5",
     "@tokens-studio/types": "0.5.1",
     "@tokens-studio/ui": "0.9.0",
@@ -92,6 +92,7 @@
     "i18next": "^23.2.3",
     "iconoir-react": "^7.3.0",
     "ignore-styles": "^5.0.1",
+    "is-plain-obj": "^4.1.0",
     "js-yaml": "^4.1.0",
     "json5": "^2.2.3",
     "jszip": "^3.10.0",
@@ -138,6 +139,7 @@
     "rooks": "^6.4.2",
     "set-value": "^3.0.3",
     "storyblok-js-client": "^3.3.1",
+    "style-dictionary": "^4.2.0",
     "use-debounce": "^6.0.1",
     "uuid": "^9.0.0",
     "zod": "^3.22.3"

packages/tokens-studio-for-figma/src/app/components/StorageItemForm/TokensStudioForm.tsx

@@ -1,17 +1,29 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import zod from 'zod';
 import {
-  Box, Button, FormField, Heading, IconButton, Label, Link, Stack, Text, TextInput,
+  Box,
+  Button,
+  FormField,
+  Heading,
+  IconButton,
+  Label,
+  Link,
+  Select,
+  Stack,
+  Text,
+  TextInput,
 } from '@tokens-studio/ui';
 import { EyeClosedIcon, EyeOpenIcon } from '@radix-ui/react-icons';
 import { useTranslation } from 'react-i18next';
+import { create, Organization } from '@tokens-studio/sdk';
 import { StorageProviderType } from '@/constants/StorageProviderType';
 import { StorageTypeFormValues } from '@/types/StorageType';
 import { generateId } from '@/utils/generateId';
 import { ChangeEventHandler } from './types';
 import { ErrorMessage } from '../ErrorMessage';
 import TokensStudioWord from '@/icons/tokensstudio-word.svg';
 import { styled } from '@/stitches.config';
+import { GET_ORGS_QUERY } from '@/storage/tokensStudio/graphql';
 
 const StyledTokensStudioWord = styled(TokensStudioWord, {
   width: '200px',
@@ -28,10 +40,10 @@
   errorMessage?: string;
 };
 
-export default function TokensStudioForm({
-  onChange, onSubmit, onCancel, values, hasErrored, errorMessage,
-}: Props) {
+export default function TokensStudioForm({ onChange, onSubmit, onCancel, values, hasErrored, errorMessage }: Props) {
   const { t } = useTranslation(['storage']);
+  const [fetchOrgsError, setFetchOrgsError] = React.useState<string | null>(null);
+  const [orgData, setOrgData] = React.useState<Organization[]>([]);
   const syncGuideUrl = 'tokens-studio';
   const [isMasked, setIsMasked] = React.useState(true);
   const [showTeaser, setShowTeaser] = React.useState(true);
@@ -50,6 +62,7 @@
         id: zod.string(),
         secret: zod.string(),
         internalId: zod.string().optional(),
+        orgId: zod.string(),
       });
       const validationResult = zodSchema.safeParse(values);
       if (validationResult.success) {
@@ -73,20 +86,87 @@
     setShowTeaser(false);
   }, []);
 
-    return showTeaser ? (
-      <Stack direction="column" align="start" gap={5}>
-        <StyledTokensStudioWord />
-        <Stack direction="column" gap={3}>
-          <Heading size="large">A dedicated design tokens management platform</Heading>
-          <Box>We are working a dedicated design tokens management platform built on our powerful node-based graph engine including plug and play token transformation - suitable for enterprises! Still in early access, sign up for the waitlist!</Box>
-          <Link href="https://tokens.studio/studio" target="_blank" rel="noreferrer">Learn more</Link>
-        </Stack>
-        <Button onClick={handleDismissTeaser}>Already got access?</Button>
+  useEffect(() => {
+    if (values.secret) {
+      fetchOrgData();
+    }
+  }, [values.secret]);
+
+  const fetchOrgData = React.useCallback(async () => {
+    try {
+      const client = create({
+        host: process.env.API_HOST || 'localhost:4200',
+        secure: process.env.NODE_ENV !== 'development',
+        auth: `Bearer ${values.secret}`,
+      });
+      const result = await client.query({
+        query: GET_ORGS_QUERY,
+      });
+      if (result.data?.organizations) {
+        setOrgData(result.data.organizations.data as Organization[]);
+      }
+    } catch (error) {
+      setFetchOrgsError('Error fetching organization data. Please check your PAT.');
+    }
+  }, [values.secret]);
+
+  const orgOptions = React.useMemo(
+    () =>
+      orgData?.map((org) => ({
+        label: org.name,
+        value: org.id,
+      })),
+    [orgData],
+  );
+
+  const onOrgChange = React.useCallback(
+    (value: string) => {
+      onChange({ target: { name: 'orgId', value } });
+    },
+    [onChange],
+  );
+
+  const projectOptions = React.useMemo(() => {
+    if (!orgData) return [];
+    const org = orgData.find((org) => org.id === values.orgId);
+    if (!org) return [];
+    return org.projects.data.map((project) => ({
+      label: project.name,
+      value: project.id,
+    }));
+  }, [orgData, values.orgId]);
+
+  const selectedOrg = orgOptions?.find((org) => org.value === values.orgId);
+
+  const selectedProject = projectOptions?.find((project) => project.value === values.id);
+
+  const onProjectChange = React.useCallback(
+    (value: string) => {
+      onChange({ target: { name: 'id', value } });
+    },
+    [onChange],
+  );
+
+  return showTeaser ? (
+    <Stack direction="column" align="start" gap={5}>
+      <StyledTokensStudioWord />
+      <Stack direction="column" gap={3}>
+        <Heading size="large">A dedicated design tokens management platform</Heading>
+        <Box>
+          We are working a dedicated design tokens management platform built on our powerful node-based graph engine
+          including plug and play token transformation - suitable for enterprises! Still in early access, sign up for
+          the waitlist!
+        </Box>
+        <Link href="https://tokens.studio/studio" target="_blank" rel="noreferrer">
+          Learn more
+        </Link>
       </Stack>
-    ):(
+      <Button onClick={handleDismissTeaser}>Already got access?</Button>
+    </Stack>
+  ) : (
     <form onSubmit={handleSubmit}>
       <Stack direction="column" gap={5}>
-      <Text muted>
+        <Text muted>
           {t('providers.tokensstudio.descriptionFirstPart')}{' '}
           <Link
             href="https://q2gsw2tok1e.typeform.com/to/pJCwLVh2?typeform-source=tokens.studio"
@@ -118,22 +198,55 @@
             onChange={onChange}
             name="secret"
             id="secret"
+            onBlur={fetchOrgData}
             required
             type={isMasked ? 'password' : 'text'}
-            trailingAction={(
+            trailingAction={
               <IconButton
                 variant="invisible"
                 size="small"
                 onClick={toggleMask}
                 icon={isMasked ? <EyeClosedIcon /> : <EyeOpenIcon />}
               />
-            )}
+            }
           />
+          {fetchOrgsError && <Text muted>{fetchOrgsError}</Text>}
         </FormField>
-        <FormField>
-          <Label htmlFor="id">{t('providers.tokensstudio.id')}</Label>
-          <TextInput value={values.id || ''} onChange={onChange} type="text" name="id" id="id" required />
-        </FormField>
+        {orgOptions?.length > 0 && (
+          <Stack direction="column" gap={2}>
+            <Label htmlFor="org">{t('providers.tokensstudio.selectOrgLabel')}</Label>
+            <div>
+              <Select value={values.orgId ?? ''} onValueChange={onOrgChange} name="org">
+                <Select.Trigger value={selectedOrg?.label || 'Choose an organization'} />
+                <Select.Content>
+                  {orgOptions?.map((option) => (
+                    <Select.Item key={option.value} value={option.value}>
+                      {option.label}
+                    </Select.Item>
+                  ))}
+                </Select.Content>
+              </Select>
+            </div>
+          </Stack>
+        )}
+
+        {projectOptions?.length > 0 && (
+          <Stack direction="column" gap={2}>
+            <Label htmlFor="org">{t('providers.tokensstudio.selectProjectLabel')}</Label>
+            <div>
+              <Select value={values.id ?? ''} onValueChange={onProjectChange} name="id">
+                <Select.Trigger value={selectedProject?.label || 'Choose a project'} />
+                <Select.Content>
+                  {projectOptions?.map((option) => (
+                    <Select.Item key={option.value} value={option.value}>
+                      {option.label}
+                    </Select.Item>
+                  ))}
+                </Select.Content>
+              </Select>
+            </div>
+          </Stack>
+        )}
         <Stack direction="row" justify="end" gap={4}>
           <Button variant="secondary" onClick={onCancel}>
             {t('cancel')}