Merge pull request #3243 from tokens-studio/fix-ts-theme-metadata

Fix ts theme metadata
tokens-studio · Jan 17, 2025 · 03237ae · 03237ae
2 parents daba40f + 67d052e
commit 03237ae
Show file tree

Hide file tree

Showing 9 changed files with 109 additions and 82 deletions.
diff --git a/.changeset/large-foxes-reply.md b/.changeset/large-foxes-reply.md
@@ -0,0 +1,5 @@
+---
+"@tokens-studio/figma-plugin": patch
+---
+
+Fix Tokens Studio sync missing theme metadata
diff --git a/packages/tokens-studio-for-figma/package.json b/packages/tokens-studio-for-figma/package.json
@@ -62,7 +62,7 @@
     "@supabase/supabase-js": "^2.0.5",
     "@supernovaio/supernova-sdk": "^1.9.3",
     "@tokens-studio/graph-engine": "^0.17.5",
-    "@tokens-studio/sdk": "^2.0.0-alpha.0",
+    "@tokens-studio/sdk": "^1.4.2",
     "@tokens-studio/tokens": "0.2.5",
     "@tokens-studio/types": "0.5.1",
     "@tokens-studio/ui": "0.9.0",

diff --git a/...ages/tokens-studio-for-figma/src/app/store/models/reducers/__tests__/tokensStudio.test.ts b/...ages/tokens-studio-for-figma/src/app/store/models/reducers/__tests__/tokensStudio.test.ts
@@ -6,12 +6,20 @@ import { TokenSetStatus } from '@/constants/TokenSetStatus';
 import { models } from '../../index';
 import { TokenTypes } from '@/constants/TokenTypes';
 import {
-  CREATE_THEME_GROUP_MUTATION, CREATE_TOKEN_SET_MUTATION, DELETE_THEME_GROUP_MUTATION, DELETE_TOKEN_SET_MUTATION, UPDATE_THEME_GROUP_MUTATION, UPDATE_TOKEN_SET_MUTATION, UPDATE_TOKEN_SET_ORDER_MUTATION,
+  CREATE_THEME_GROUP_MUTATION,
+  CREATE_TOKEN_SET_MUTATION,
+  DELETE_THEME_GROUP_MUTATION,
+  DELETE_TOKEN_SET_MUTATION,
+  UPDATE_THEME_GROUP_MUTATION,
+  UPDATE_TOKEN_SET_MUTATION,
+  UPDATE_TOKEN_SET_ORDER_MUTATION,
 } from '@/storage/tokensStudio/graphql';
 import { DeleteTokenPayload, UpdateTokenPayload } from '@/types/payloads';
 import * as notifiers from '@/plugin/notifiers';
 import { middlewares } from '@/app/store/middlewares';
 
+const DEFAULT_BRANCH = 'main';
+
 type Store = RematchStore<RootModel, Record<string, never>>;
 
 const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(jest.fn());
@@ -149,7 +157,9 @@ const initialRawTokensDTCG = {
 };
 
 function delay(ms = 0) {
-  return new Promise((resolve) => { setTimeout(resolve, ms); });
+  return new Promise((resolve) => {
+    setTimeout(resolve, ms);
+  });
 }
 
 const mockQuery = jest.fn();
@@ -247,12 +257,14 @@ describe('Tokens Studio sync', () => {
       parent: 'global',
       name: 'newBoxShadow',
       description: 'newBoxShadow description',
-      value: [{
-        color: '#e63d3d',
-        type: 'innerShadow',
-        x: '2px',
-        y: '2px',
-      }],
+      value: [
+        {
+          color: '#e63d3d',
+          type: 'innerShadow',
+          x: '2px',
+          y: '2px',
+        },
+      ],
       type: TokenTypes.BOX_SHADOW,
     },
     {
@@ -447,7 +459,7 @@ describe('Tokens Studio sync', () => {
         project: 'projectId',
         organization: 'orgId',
         path: 'global',
-        branch: 'master',
+        branch: DEFAULT_BRANCH,
       },
     });
 
@@ -521,15 +533,17 @@ describe('Tokens Studio sync', () => {
         variables: {
           project: 'projectId',
           organization: 'orgId',
-          branch: 'master',
+          branch: DEFAULT_BRANCH,
           input: {
             name: themeData.group,
-            options: [{
-              name: themeData.name,
-              selectedTokenSets: themeData.selectedTokenSets,
-              figmaStyleReferences: {},
-              figmaVariableReferences: undefined,
-            }],
+            options: [
+              {
+                name: themeData.name,
+                selectedTokenSets: themeData.selectedTokenSets,
+                figmaStyleReferences: {},
+                figmaVariableReferences: undefined,
+              },
+            ],
           },
         },
       });
@@ -619,12 +633,14 @@ describe('Tokens Studio sync', () => {
           organization: 'orgId',
           input: {
             name: updatedThemeData.group,
-            options: [{
-              name: updatedThemeData.name,
-              selectedTokenSets: updatedThemeData.selectedTokenSets,
-              figmaStyleReferences: {},
-              figmaVariableReferences: undefined,
-            }],
+            options: [
+              {
+                name: updatedThemeData.name,
+                selectedTokenSets: updatedThemeData.selectedTokenSets,
+                figmaStyleReferences: {},
+                figmaVariableReferences: undefined,
+              },
+            ],
           },
         },
       });
@@ -657,14 +673,16 @@ describe('Tokens Studio sync', () => {
         variables: {
           project: 'projectId',
           organization: 'orgId',
-          branch: 'master',
+          branch: DEFAULT_BRANCH,
           input: {
             name: updatedThemeData.group,
-            options: [{
-              name: updatedThemeData.name,
-              selectedTokenSets: updatedThemeData.selectedTokenSets,
-              figmaStyleReferences: {},
-            }],
+            options: [
+              {
+                name: updatedThemeData.name,
+                selectedTokenSets: updatedThemeData.selectedTokenSets,
+                figmaStyleReferences: {},
+              },
+            ],
           },
         },
       });
@@ -676,7 +694,7 @@ describe('Tokens Studio sync', () => {
         variables: {
           project: 'projectId',
           organization: 'orgId',
-          branch: 'master',
+          branch: DEFAULT_BRANCH,
           themeGroupName: existingTheme.group,
         },
       });
@@ -698,7 +716,7 @@ describe('Tokens Studio sync', () => {
         variables: {
           project: 'projectId',
           organization: 'orgId',
-          branch: 'master',
+          branch: DEFAULT_BRANCH,
           themeGroupName: existingTheme.group,
         },
       });
@@ -722,14 +740,17 @@ describe('Tokens Studio sync', () => {
             ...storeInitialState.redux.initialState,
             tokenState: {
               ...storeInitialState.redux.initialState.tokenState,
-              themes: [existingTheme, {
-                id: 'themeId2',
-                name: 'themeName2',
-                group: 'themeGroup',
-                selectedTokenSets: { options: TokenSetStatus.ENABLED },
-                figmaVariableReferences: undefined,
-                figmaStyleReferences: undefined,
-              }],
+              themes: [
+                existingTheme,
+                {
+                  id: 'themeId2',
+                  name: 'themeName2',
+                  group: 'themeGroup',
+                  selectedTokenSets: { options: TokenSetStatus.ENABLED },
+                  figmaVariableReferences: undefined,
+                  figmaStyleReferences: undefined,
+                },
+              ],
             },
           },
         },

diff --git a/packages/tokens-studio-for-figma/src/storage/TokensStudioTokenStorage.ts b/packages/tokens-studio-for-figma/src/storage/TokensStudioTokenStorage.ts
@@ -1,6 +1,4 @@
-import {
-  ThemeGroup, TokenSetType, TokensSet, create,
-} from '@tokens-studio/sdk';
+import { ThemeGroup, TokenSetType, TokensSet, create } from '@tokens-studio/sdk';
 import * as Sentry from '@sentry/react';
 import { AnyTokenSet } from '@/types/tokens';
 import { notifyToUI } from '@/plugin/notifiers';
@@ -26,11 +24,14 @@ import { track } from '@/utils/analytics';
 import { ThemeObjectsList } from '@/types';
 import { TokensStudioAction } from '@/app/store/providers/tokens-studio';
 
-const makeClient = (secret: string) => create({
-  host: process.env.TOKENS_STUDIO_API_HOST || 'localhost:4200',
-  secure: process.env.NODE_ENV !== 'development',
-  auth: `Bearer ${secret}`,
-});
+const DEFAULT_BRANCH = 'main';
+
+const makeClient = (secret: string) =>
+  create({
+    host: process.env.TOKENS_STUDIO_API_HOST || 'localhost:4200',
+    secure: process.env.NODE_ENV !== 'development',
+    auth: `Bearer ${secret}`,
+  });
 
 export type TokensStudioSaveOptions = {
   commitMessage?: string;
@@ -52,7 +53,7 @@ async function getProjectData(id: string, orgId: string, client: any): Promise<P
       variables: {
         projectId: id,
         organization: orgId,
-        name: 'master',
+        name: DEFAULT_BRANCH,
       },
     });
 
@@ -106,6 +107,8 @@ async function getProjectData(id: string, orgId: string, client: any): Promise<P
               selectedTokenSets,
               $figmaStyleReferences: theme?.figmaStyleReferences,
               $figmaVariableReferences: theme?.figmaVariableReferences,
+              $figmaCollectionId: theme?.figmaCollectionId ?? undefined,
+              $figmaModeId: theme?.figmaModeId ?? undefined,
             };
           });
 
@@ -317,7 +320,7 @@ export class TokensStudioTokenStorage extends RemoteTokenStorage<TokensStudioSav
       const responseData = await this.client.mutate({
         mutation: DELETE_TOKEN_SET_MUTATION,
         variables: {
-          branch: 'master',
+          branch: DEFAULT_BRANCH,
           path: data.name,
           project: this.id,
           organization: this.orgId,
@@ -374,7 +377,7 @@ export class TokensStudioTokenStorage extends RemoteTokenStorage<TokensStudioSav
           },
           project: this.id,
           organization: this.orgId,
-          branch: 'master',
+          branch: DEFAULT_BRANCH,
         },
       });
 
@@ -426,7 +429,7 @@ export class TokensStudioTokenStorage extends RemoteTokenStorage<TokensStudioSav
       const responseData = await this.client.mutate({
         mutation: DELETE_THEME_GROUP_MUTATION,
         variables: {
-          branch: 'master',
+          branch: DEFAULT_BRANCH,
           themeGroupName: data.name,
           project: this.id,
           organization: this.orgId,

diff --git a/...ages/tokens-studio-for-figma/src/storage/tokensStudio/graphql/createThemeGroupMutation.ts b/...ages/tokens-studio-for-figma/src/storage/tokensStudio/graphql/createThemeGroupMutation.ts
@@ -9,6 +9,8 @@ export const CREATE_THEME_GROUP_MUTATION = gql`
         figmaStyleReferences
         figmaVariableReferences
         selectedTokenSets
+        figmaCollectionId
+        figmaModeId
       }
     }
   }

diff --git a/packages/tokens-studio-for-figma/src/storage/tokensStudio/graphql/getProjectDataQuery.ts b/packages/tokens-studio-for-figma/src/storage/tokensStudio/graphql/getProjectDataQuery.ts
@@ -26,6 +26,8 @@ export const GET_PROJECT_DATA_QUERY = gql`
               figmaStyleReferences
               figmaVariableReferences
               selectedTokenSets
+              figmaCollectionId
+              figmaModeId
             }
           }
         }

diff --git a/...ages/tokens-studio-for-figma/src/storage/tokensStudio/graphql/updateThemeGroupMutation.ts b/...ages/tokens-studio-for-figma/src/storage/tokensStudio/graphql/updateThemeGroupMutation.ts
@@ -1,15 +1,17 @@
 import { gql } from '@tokens-studio/sdk';
 
 export const UPDATE_THEME_GROUP_MUTATION = gql`
-mutation UpdateThemeGroup($input: ThemeGroupUpdateInput!, $project: String!, $organization: String!) {
-  updateThemeGroup(input: $input, project: $project, organization: $organization) {
-    name
-    options {
+  mutation UpdateThemeGroup($input: ThemeGroupUpdateInput!, $project: String!, $organization: String!) {
+    updateThemeGroup(input: $input, project: $project, organization: $organization) {
       name
-      selectedTokenSets
-      figmaStyleReferences
-      figmaVariableReferences
+      options {
+        name
+        selectedTokenSets
+        figmaStyleReferences
+        figmaVariableReferences
+        figmaCollectionId
+        figmaModeId
+      }
     }
   }
-}
 `;
diff --git a/...tokens-studio-for-figma/src/storage/tokensStudio/updateThemeGroupsInTokensStudio/index.ts b/...tokens-studio-for-figma/src/storage/tokensStudio/updateThemeGroupsInTokensStudio/index.ts
@@ -76,6 +76,8 @@ export async function updateThemeGroupsInTokensStudio({
         selectedTokenSets: theme.selectedTokenSets,
         figmaStyleReferences: theme.$figmaStyleReferences,
         figmaVariableReferences: theme.$figmaVariableReferences,
+        figmaCollectionId: theme.$figmaCollectionId,
+        figmaModeId: theme.$figmaModeId,
       })),
     };
 
@@ -102,6 +104,8 @@ export async function updateThemeGroupsInTokensStudio({
           selectedTokenSets: themeToCreate.selectedTokenSets,
           figmaStyleReferences: themeToCreate.$figmaStyleReferences,
           figmaVariableReferences: themeToCreate.$figmaVariableReferences,
+          figmaCollectionId: themeToCreate.$figmaCollectionId,
+          figmaModeId: themeToCreate.$figmaModeId,
         }],
       },
     });

diff --git a/yarn.lock b/yarn.lock
@@ -3415,19 +3415,7 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
-"@radix-ui/[email protected]":
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.4.tgz#883a48f5f938fa679427aa17fcba70c5494c6978"
-  integrity sha512-7UpBa/RKMoHJYjie1gkF1DlK8l1fdU/VKDpoS3rCCo8YBJR294GwcEHyxHw72yvphJ7ld0AXEcSLAzY2F/WyCg==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/primitive" "1.0.1"
-    "@radix-ui/react-compose-refs" "1.0.1"
-    "@radix-ui/react-primitive" "1.0.3"
-    "@radix-ui/react-use-callback-ref" "1.0.1"
-    "@radix-ui/react-use-escape-keydown" "1.0.3"
-
-"@radix-ui/[email protected]":
+"@radix-ui/[email protected]", "@radix-ui/[email protected]":
   version "1.0.5"
   resolved "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.5.tgz"
   integrity sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==
@@ -5564,13 +5552,13 @@
     semver-compare "^1.0.0"
     token-transformer "^0.0.33"
 
-"@tokens-studio/sdk@^2.0.0-alpha.0":
-  version "2.0.0-alpha.0"
-  resolved "https://registry.yarnpkg.com/@tokens-studio/sdk/-/sdk-2.0.0-alpha.0.tgz#89c1be0f7b202a1300b13be32560a7bba4dabbb2"
-  integrity sha512-yFehaanRscRNxY1JuoXHBVLKgIAJIJd/J2b0S/6goLzOaflu4R2HwgM2OEeI1k+ouBjOVDO6pdF5laqJyFluzA==
+"@tokens-studio/sdk@^1.4.2":
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/@tokens-studio/sdk/-/sdk-1.4.2.tgz#f246ba9d09e07468d6591b81d21b82e6163f65ce"
+  integrity sha512-wyWtpaXAxofGWExujZKOgZThUGV8oz1WSbonToNqdWKIKc5mYkDmFUIyT0mqWPx09JSwCOMNK3d87Y33hqq2Cw==
   dependencies:
     "@apollo/client" "^3.11.4"
-    "@tokens-studio/types" "^0.3.0"
+    "@tokens-studio/types" "^0.5.2"
     commander "^12.1.0"
     graphql-tag "^2.12.6"
     graphql-ws "^5.16.0"
@@ -5593,10 +5581,10 @@
   resolved "https://registry.yarnpkg.com/@tokens-studio/types/-/types-0.2.5.tgz#fbddad1d0040f1316ee74dbd42a389f2f3d2fcbc"
   integrity sha512-pJ0zWxGnEjca4dznFIHC9/oXuovu3DKHUhLDNJVzTRZEVXhWkIRIUbjDwIRihxBr39c776W+3thYvWMgChT0Rw==
 
-"@tokens-studio/types@^0.3.0":
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/@tokens-studio/types/-/types-0.3.0.tgz#ac0579df362b6b9e47c8893e3ca110d3831f7f26"
-  integrity sha512-MgGe1HFH2R/advBxpETgB1VGnCmh3j08igsPmc/1xvm/m2A5fYPmnzqjX6SFlHiajIJ5DEwYbHDzUAO4POn0tw==
+"@tokens-studio/types@^0.5.2":
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/@tokens-studio/types/-/types-0.5.2.tgz#cac9bce7a27dda7254664d7acab7b088e2aefe33"
+  integrity sha512-rzMcZP0bj2E5jaa7Fj0LGgYHysoCrbrxILVbT0ohsCUH5uCHY/u6J7Qw/TE0n6gR9Js/c9ZO9T8mOoz0HdLMbA==
 
 "@tokens-studio/[email protected]":
   version "0.9.0"
@@ -18573,7 +18561,7 @@ react-window@^1.8.8:
     "@babel/runtime" "^7.0.0"
     memoize-one ">=3.1.1 <6"
 
-react@^18.2.0:
+react@^18, react@^18.2.0:
   version "18.3.1"
   resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"
   integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==