Merge branch 'main' into six7/add-filter-to-search-global

.changeset/calm-parrots-develop.md

@@ -0,0 +1,5 @@
+---
+"@tokens-studio/figma-plugin": patch
+---
+
+Raise limit for tokens in Tokens Studio sync to 3000 tokens per set

.changeset/cyan-fireants-sparkle.md

@@ -0,0 +1,5 @@
+---
+"@tokens-studio/figma-plugin": patch
+---
+
+Add missing padding to list of token sets in Export Token Sets Tab

.changeset/hip-coats-raise.md

@@ -0,0 +1,5 @@
+---
+"@tokens-studio/figma-plugin": patch
+---
+
+Prevents falsy errors from displaying when pushing to GitLab and ADO

.changeset/orange-donkeys-chew.md

@@ -0,0 +1,5 @@
+---
+"@tokens-studio/figma-plugin": minor
+---
+
+Fixes issue where styles are not applied in Figma, when user exports Token Sets as Styles

.deepsource.toml

@@ -0,0 +1,15 @@
+version = 1
+
+[[analyzers]]
+name = "shell"
+
+[[analyzers]]
+name = "javascript"
+
+  [analyzers.meta]
+  plugins = ["react"]
+  environment = [
+    "jest",
+    "nodejs",
+    "cypress"
+  ]

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

@@ -1,6 +1,6 @@
 import { FileDirectoryIcon } from '@primer/octicons-react';
 import {
-  Tabs, Stack, Heading, Button, Link,
+  Tabs, Stack, Heading, Button,
 } from '@tokens-studio/ui';
 import React, { useMemo } from 'react';
 import { useDispatch, useSelector, useStore } from 'react-redux';
@@ -145,6 +145,7 @@ export default function ExportSetsTab({ selectedSets, setSelectedSets }: { selec
       <Modal
         size="fullscreen"
         full
+        compact
         isOpen={showChangeSets}
         close={handleCancelChangeSets}
         backArrow
@@ -160,10 +161,13 @@ export default function ExportSetsTab({ selectedSets, setSelectedSets }: { selec
           </Stack>
           )}
       >
-        <Heading>{t('exportSetsTab.changeSetsHeading')}</Heading>
+        <Heading>
+          {t('exportSetsTab.changeSetsHeading')}
+        </Heading>
         {/* Commenting until we have docs <Link target="_blank" href={docsLinks.sets}>{`${t('generic.learnMore')} – ${t('docs.referenceOnlyMode')}`}</Link> */}
         <Stack
           direction="column"
+          gap={1}
           css={{
             marginBlockStart: '$4',
           }}

packages/tokens-studio-for-figma/src/app/store/providers/ado/ado.tsx

@@ -117,9 +117,8 @@ export const useADO = () => {
     }
 
     return {
-      status: 'success',
-      tokens: {},
-      themes: [],
+      status: 'failure',
+      errorMessage: 'Push to remote cancelled!',
     };
   }, [
     dispatch,
@@ -255,16 +254,6 @@ export const useADO = () => {
       }
       const data = await syncTokensWithADO(context);
 
-      // User cancelled pushing to the remote
-      if (data.status === 'success' && data.themes.length === 0) {
-        dispatch.uiState.setLocalApiState({ ...context, branch: previousBranch, filePath: previousFilePath });
-
-        return {
-          status: 'failure',
-          errorMessage: 'Push to remote cancelled!',
-        };
-      }
-
       if (data.status === 'success') {
         AsyncMessageChannel.ReactInstance.message({
           type: AsyncMessageTypes.CREDENTIALS,
@@ -274,6 +263,8 @@ export const useADO = () => {
           notifyToUI('No tokens stored on remote');
         }
       } else {
+        // Go back to the previous setup if the user cancelled pushing to the remote or there was an error
+        dispatch.uiState.setLocalApiState({ ...context, branch: previousBranch, filePath: previousFilePath });
         return {
           status: 'failure',
           errorMessage: data.errorMessage,

packages/tokens-studio-for-figma/src/app/store/providers/gitlab/gitlab.tsx

@@ -127,10 +127,8 @@ export function useGitLab() {
       }
     }
     return {
-      status: 'success',
-      tokens: {},
-      themes: [],
-      metadata: {},
+      status: 'failure',
+      errorMessage: 'Push to remote cancelled!',
     };
   }, [
     dispatch,
@@ -276,15 +274,6 @@ export function useGitLab() {
     }
     const data = await syncTokensWithGitLab(context);
 
-    // User cancelled pushing to the remote
-    if (data.status === 'success' && data.themes.length === 0) {
-      dispatch.uiState.setLocalApiState({ ...context, branch: previousBranch, filePath: previousFilePath });
-
-      return {
-        status: 'failure',
-        errorMessage: 'Push to remote cancelled!',
-      };
-    }
 
     if (data.status === 'success') {
       AsyncMessageChannel.ReactInstance.message({
@@ -295,6 +284,8 @@ export function useGitLab() {
         notifyToUI('No tokens stored on remote');
       }
     } else {
+      // Go back to the previous setup if the user cancelled pushing to the remote or there was an error
+      dispatch.uiState.setLocalApiState({ ...context, branch: previousBranch, filePath: previousFilePath });
       return {
         status: 'failure',
         errorMessage: data.errorMessage,

packages/tokens-studio-for-figma/src/app/store/remoteTokens.test.ts

@@ -792,20 +792,11 @@ describe('remoteTokens', () => {
           Promise.resolve(true)
         ));
         await waitFor(() => { result.current.addNewProviderItem(context as StorageTypeCredentials); });
-        if (context !== adoContext && context !== gitLabContext) {
           expect(notifyToUI).toBeCalledTimes(2);
           expect(notifyToUI).toBeCalledWith('No tokens stored on remote');
           expect(await result.current.addNewProviderItem(context as StorageTypeCredentials)).toEqual({
             status: 'success',
           });
-        } else {
-          expect(notifyToUI).toBeCalledTimes(1);
-          expect(notifyToUI).toBeCalledWith(`Pulled tokens from ${contextName}`);
-          expect(await result.current.addNewProviderItem(context as StorageTypeCredentials)).toEqual({
-            status: 'failure',
-            errorMessage: 'Push to remote cancelled!',
-          });
-        }
       });
     } else {
       it(`Add newProviderItem to ${context.provider}, should pull tokens and return error message if there is no tokens on remote`, async () => {

packages/tokens-studio-for-figma/src/plugin/TokenValueRetriever.ts

@@ -19,10 +19,15 @@ export class TokenValueRetriever {
 
   public createStylesWithVariableReferences;
 
-  private getAdjustedTokenName(tokenName: string): string {
-    const withPrefix = [this.stylePathPrefix, tokenName].filter((n) => n).join('.');
+  private getAdjustedTokenName(tokenName: string): [string, string] {
+    const withIgnoredFirstPart = this.ignoreFirstPartForStyles && tokenName.split('.').length > 1
+      ? tokenName.split('.').slice(1).join('.')
+      : tokenName;
 
-    return withPrefix;
+    const adjustedTokenName = [this.stylePathPrefix, tokenName].filter((n) => n).join('.');
+    const adjustedTokenNameWithIgnoreFirstPart = [this.stylePathPrefix, withIgnoredFirstPart].filter((n) => n).join('.');
+
+    return [adjustedTokenName, adjustedTokenNameWithIgnoreFirstPart];
   }
 
   public initiate({
@@ -53,10 +58,16 @@ export class TokenValueRetriever {
     this.tokens = new Map<string, any>(tokens.map((token) => {
       const variableId = variableReferences?.get(token.name);
       // For styles, we need to ignore the first part of the token name as well as consider theme prefix
-      const adjustedTokenName = this.getAdjustedTokenName(token.name);
-      const styleId = styleReferences?.get(token.name);
+      const [adjustedTokenName, adjustedTokenNameWithIgnoreFirstPart] = this.getAdjustedTokenName(token.name);
+
+      const styleId = styleReferences?.get(adjustedTokenName) || styleReferences?.get(adjustedTokenNameWithIgnoreFirstPart);
+      const finalAdjustedTokenName = styleReferences?.has(adjustedTokenName) ? adjustedTokenName : adjustedTokenNameWithIgnoreFirstPart;
+
       return [token.name, {
-        ...token, variableId, styleId, adjustedTokenName,
+        ...token,
+        variableId,
+        styleId,
+        adjustedTokenName: styleId ? finalAdjustedTokenName : adjustedTokenName,
       }];
     }));
   }

packages/tokens-studio-for-figma/src/plugin/__tests__/setValuesOnNode.test.ts

@@ -333,8 +333,8 @@ describe('Can set values on node', () => {
         },
       },
     );
-    expect(setTextValuesOnTargetSpy).toHaveBeenCalled();
-    expect(textNodeMock).toEqual({ ...textNodeMock });
+    expect(setTextValuesOnTargetSpy).not.toHaveBeenCalled();
+    expect(textNodeMock).toEqual({ ...textNodeMock, textStyleId: '456' });
   });
 
   it('sets effectStyle if matching Style is found', async () => {
@@ -453,8 +453,8 @@ describe('Can set values on node', () => {
         },
       },
     );
-    expect(setEffectValuesOnTargetSpy).toHaveBeenCalled();
-    expect(solidNodeMock).toEqual({ ...solidNodeMock, effectStyleId: '' });
+    expect(setEffectValuesOnTargetSpy).not.toHaveBeenCalled();
+    expect(solidNodeMock).toEqual({ ...solidNodeMock, effectStyleId: '123' });
   });
 
   it('sets fillStyle if matching Style', async () => {

packages/tokens-studio-for-figma/src/storage/tokensStudio/graphql/getProjectDataQuery.ts

@@ -10,7 +10,7 @@ query Project($urn: String!) {
       projectUrn
       generatorUrn
       orderIndex
-      tokens(limit: 400) {
+      tokens(limit: 3000) {
         ${TOKEN_FRAGMENT}
       }
     }