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",

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

@@ -132,11 +132,11 @@ export default function BorderTokenForm({
             onSubmit={onSubmit}
           />
 
-          {isAliasMode &&
-            typeof internalEditToken.value === 'string' &&
-            checkIfContainsAlias(internalEditToken.value) && (
+          {isAliasMode
+            && typeof internalEditToken.value === 'string'
+            && checkIfContainsAlias(internalEditToken.value) && (
               <ResolvedTokenDisplay alias={alias} selectedToken={selectedToken} />
-            )}
+          )}
         </Stack>
       )}
     </Stack>

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

@@ -17,12 +17,10 @@ type Props = {
 
 export const ColorPickerTrigger: React.FC<React.PropsWithChildren<React.PropsWithChildren<Props>>> = ({
   onClick, background,
-}) => {
-  return (
-    <TriggerButton
-      type="button"
-      css={{ background }}
-      onClick={onClick}
-    />
-  )
-};
+}) => (
+  <TriggerButton
+    type="button"
+    css={{ background }}
+    onClick={onClick}
+  />
+);

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

@@ -140,9 +140,9 @@ const StyledPrefix = styled('div', {
     },
     isComposition: {
       true: {
-        padding: '0'
-      }
-    }
+        padding: '0',
+      },
+    },
   },
 });
 

packages/tokens-studio-for-figma/src/app/components/ManageThemesModal/CreateOrEditThemeForm.tsx

@@ -101,7 +101,10 @@ export const CreateOrEditThemeForm: React.FC<React.PropsWithChildren<React.Props
 
   return (
     <StyledForm id="form-create-or-edit-theme" onSubmit={handleSubmit(onSubmit)}>
-      <StyledNameInputBox css={{ width: '100%', position: 'sticky', top: 0, zIndex: 2 }}>
+      <StyledNameInputBox css={{
+        width: '100%', position: 'sticky', top: 0, zIndex: 2,
+      }}
+      >
         <StyledCreateOrEditThemeFormHeaderFlex>
           <IconButton
             tooltip={t('returnToOverview')}

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

@@ -51,7 +51,7 @@ export const ManageThemesModal: React.FC<React.PropsWithChildren<React.PropsWith
   const treeItems = themeListToTree(themes);
   const { t } = useTranslation(['tokens']);
 
-  const themeEditorDefaultValues = useMemo(() => {
+  const themeEditorDefaultValues: Partial<ThemeObject> = useMemo(() => {
     const themeObject = themes.find(({ id }) => id === themeEditorOpen);
     if (themeObject) {
       return {
@@ -94,7 +94,7 @@ export const ManageThemesModal: React.FC<React.PropsWithChildren<React.PropsWith
         setThemeEditorOpen(false);
       }
     }
-  }, [confirm, dispatch.tokenState, themeEditorOpen]);
+  }, [confirm, dispatch.tokenState, t, themeEditorOpen]);
 
   const handleCancelEdit = useCallback(() => {
     setThemeEditorOpen(false);
@@ -112,9 +112,13 @@ export const ManageThemesModal: React.FC<React.PropsWithChildren<React.PropsWith
       name: values.name,
       selectedTokenSets: values.tokenSets,
       ...(values?.group ? { group: values.group } : {}),
+      meta: {
+        oldName: themeEditorDefaultValues?.name,
+        oldGroup: themeEditorDefaultValues?.group,
+      },
     });
     setThemeEditorOpen(false);
-  }, [themeEditorOpen, dispatch]);
+  }, [themeEditorOpen, dispatch.tokenState, themeEditorDefaultValues]);
 
   const handleReorder = React.useCallback((reorderedItems: TreeItem[]) => {
     let currentGroup = '';

packages/tokens-studio-for-figma/src/app/components/ManageThemesModal/ThemeListGroupHeader.tsx

@@ -3,6 +3,7 @@ import React, {
 } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { IconButton } from '@tokens-studio/ui';
+import { Xmark, Check } from 'iconoir-react';
 import { editProhibitedSelector } from '@/selectors';
 import { DragControlsContext } from '@/context';
 import { StyledDragButton } from '../StyledDragger/StyledDragButton';
@@ -13,7 +14,6 @@ import Input from '../Input';
 import IconPencil from '@/icons/pencil.svg';
 import { Dispatch } from '@/app/store';
 import { INTERNAL_THEMES_NO_GROUP } from '@/constants/InternalTokenGroup';
-import { Xmark, Check } from 'iconoir-react';
 
 type Props = React.PropsWithChildren<{
   groupName: string

packages/tokens-studio-for-figma/src/app/components/ManageThemesModal/TokenSetThemeItem.tsx

@@ -3,10 +3,10 @@ import {
   Box, Stack, ToggleGroup,
 } from '@tokens-studio/ui';
 import { Check, Xmark, CodeBrackets } from 'iconoir-react';
+import { useTranslation } from 'react-i18next';
 import { TreeItem } from '@/utils/tokenset';
 import { StyledThemeLabel } from './StyledThemeLabel';
 import { TokenSetStatus } from '@/constants/TokenSetStatus';
-import { useTranslation } from 'react-i18next';
 
 type Props = {
   item: TreeItem
@@ -98,4 +98,4 @@ export const TokenSetThemeItem: React.FC<React.PropsWithChildren<React.PropsWith
       </Stack>
     )
   );
-};
+};

packages/tokens-studio-for-figma/src/app/components/PresetProvider/DefaultPreset.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { useDispatch } from 'react-redux';
-import { Button, Heading, Stack, Text } from '@tokens-studio/ui';
+import {
+  Button, Heading, Stack, Text,
+} from '@tokens-studio/ui';
 import { Dispatch } from '@/app/store';
 import { track } from '@/utils/analytics';
 

packages/tokens-studio-for-figma/src/app/components/PresetProvider/FilePreset.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
-import { Button, Heading, Stack, Text } from '@tokens-studio/ui';
+import {
+  Button, Heading, Stack, Text,
+} from '@tokens-studio/ui';
 import { DeepTokensMap, ThemeObjectsList } from '@/types';
 import { SingleToken } from '@/types/tokens';
 import {

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

@@ -52,8 +52,8 @@ export default function SingleBoxShadowDownShiftInput({
       setInputValue={handleBoxshadowDownShiftInputChange}
       placeholder={name === 'color' ? t('colorOrAlias') : t('valueOrAlias')}
       prefix={
-        name === 'color' &&
-        resolvedColor && (
+        name === 'color'
+        && resolvedColor && (
           <ColorPickerTrigger background={resolvedColor} onClick={handleToggleInputHelper}>
             {value}
           </ColorPickerTrigger>

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',
@@ -32,6 +44,8 @@
   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 +64,7 @@
         id: zod.string(),
         secret: zod.string(),
         internalId: zod.string().optional(),
+        orgId: zod.string(),
       });
       const validationResult = zodSchema.safeParse(values);
       if (validationResult.success) {
@@ -73,21 +88,88 @@
     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>
+  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]);
+
+  useEffect(() => {
+    if (values.secret) {
+      fetchOrgData();
+    }
+  }, [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 selectedOrgData = orgData.find((org) => org.id === values.orgId);
+    if (!selectedOrgData) return [];
+    return selectedOrgData.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>
-          {t('providers.tokensstudio.descriptionFirstPart')}{' '}
+        <Text muted>
+          {t('providers.tokensstudio.descriptionFirstPart')}
+          {' '}
           <Link
             href="https://q2gsw2tok1e.typeform.com/to/pJCwLVh2?typeform-source=tokens.studio"
             target="_blank"
@@ -118,6 +200,7 @@
             onChange={onChange}
             name="secret"
             id="secret"
+            onBlur={fetchOrgData}
             required
             type={isMasked ? 'password' : 'text'}
             trailingAction={(
@@ -129,11 +212,43 @@
               />
             )}
           />
+          {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')}