Merge branch 'main' into fix/2331-custom-angle-linear-gradients

tokens-studio · Dec 9, 2024 · adddb20 · adddb20
2 parents 5589616 + 01ccff2
commit adddb20
Show file tree

Hide file tree

Showing 101 changed files with 1,808 additions and 469 deletions.
diff --git a/.changeset/healthy-rabbits-fetch.md b/.changeset/healthy-rabbits-fetch.md
diff --git a/.changeset/old-pots-yell.md b/.changeset/old-pots-yell.md
diff --git a/.changeset/seven-keys-tease.md b/.changeset/seven-keys-tease.md
@@ -0,0 +1,5 @@
+---
+"@tokens-studio/figma-plugin": patch
+---
+
+Fixes an issue when updating a token's value from a reference to a hard value, the check we introduced in the last release caused those to not be updated (and only worked when changing to another reference).
diff --git a/.github/workflows/eslint.yml b/.github/workflows/eslint.yml
@@ -11,16 +11,16 @@ name: ESLint
 
 on:
   push:
-    branches: [ "main", "release-*" ]
+    branches: ["main", "release-*"]
   pull_request:
     # The branches below must be a subset of the branches above
-    branches: [ "main" ]
+    branches: ["main"]
   schedule:
-    - cron: '18 6 * * 0'
+    - cron: "18 6 * * 0"
 
 jobs:
   eslint:
-    name: Run eslint scanning
+    name: ESLint
     runs-on: ubuntu-latest
     permissions:
       contents: read
@@ -30,21 +30,15 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v4
 
-      - name: Install ESLint
-        run: |
-          npm install [email protected]
-          npm install @microsoft/[email protected]
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v3
+        with:
+          node-version: "18.x"
+          cache: yarn
+          cache-dependency-path: "**/yarn.lock"
 
-      - name: Run ESLint
-        run: npx eslint .
-          --config ./packages/tokens-studio-for-figma/.eslintrc.js
-          --ext .js,.jsx,.ts,.tsx
-          --format @microsoft/eslint-formatter-sarif
-          --output-file eslint-results.sarif
-        continue-on-error: true
+      - name: Install dependencies
+        run: yarn --immutable
 
-      - name: Upload analysis results to GitHub
-        uses: github/codeql-action/upload-sarif@v3
-        with:
-          sarif_file: eslint-results.sarif
-          wait-for-processing: true
+      - name: Run ESLint
+        run: yarn lint
diff --git a/packages/tokens-studio-for-figma/.eslintrc.js b/packages/tokens-studio-for-figma/.eslintrc.js
@@ -1,9 +1,9 @@
 module.exports = {
   extends: ['airbnb', 'airbnb-typescript', 'plugin:react-hooks/recommended'],
-  plugins: ["validate-jsx-nesting"],
+  plugins: ['validate-jsx-nesting'],
   parserOptions: {
     // Extending tsconfig for tests, the `*.mock.d.ts` files were not being recognized
-    project: ['./tsconfig.json', './tsconfig.test.json'],
+    project: ['./tsconfig.json'],
     tsconfigRootDir: __dirname,
   },
   ignorePatterns: ['**/*.js'],
@@ -17,43 +17,61 @@ module.exports = {
     jest: 'readable',
   },
   rules: {
-    "import/prefer-default-export": 0,
-    "import/extensions": 0,
-    "no-await-in-loop": 0,
-    "no-param-reassign": 0,
-    "class-methods-use-this": 0,
-    "no-restricted-globals": 0,
-    "max-len": 0,
-    "react/function-component-definition": 0,
-    "react/require-default-props": 0,
-    "react/jsx-props-no-spreading": 0,
-    "no-prototype-builtins": 0,
-    "no-async-promise-executor": 0,
-    "@typescript-eslint/return-await":0,
-    "no-restricted-syntax": ["error", "ForInStatement", "LabeledStatement", "WithStatement"],
-    "@typescript-eslint/ban-types": [2, {
-      "types": {
-        "object": {
-          "message": "The `Object` type actually means \"any non-nullish value\", so it is marginally better than `unknown`.\n- If you want a type meaning \"any object\", you probably want `Record<string, unknown>` instead.\n- If you want a type meaning \"any value\", you probably want `unknown` instead."
-        }
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      {
+        argsIgnorePattern: '^_',
+        destructuredArrayIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+        ignoreRestSiblings: true,
       },
-      "extendDefaults": true
-    }],
-    "react/jsx-no-bind": [2, {
-      ignoreDOMComponents: false,
-      ignoreRefs: false,
-      allowArrowFunctions: false,
-      allowFunctions: false,
-      allowBind: false,
-    }],
-    "@typescript-eslint/no-shadow": 1,
-    "validate-jsx-nesting/no-invalid-jsx-nesting": 2
+    ],
+    'import/no-cycle': 0,
+    'import/prefer-default-export': 0,
+    'import/extensions': 0,
+    'no-await-in-loop': 0,
+    'no-param-reassign': 0,
+    'class-methods-use-this': 0,
+    'no-restricted-globals': 0,
+    'max-len': 0,
+    'react/function-component-definition': 0,
+    'react/require-default-props': 0,
+    'react/jsx-props-no-spreading': 0,
+    'no-prototype-builtins': 0,
+    'no-async-promise-executor': 0,
+    '@typescript-eslint/return-await': 0,
+    'no-restricted-syntax': ['error', 'ForInStatement', 'LabeledStatement', 'WithStatement'],
+    '@typescript-eslint/ban-types': [
+      2,
+      {
+        types: {
+          object: {
+            message:
+              'The `Object` type actually means "any non-nullish value", so it is marginally better than `unknown`.\n- If you want a type meaning "any object", you probably want `Record<string, unknown>` instead.\n- If you want a type meaning "any value", you probably want `unknown` instead.',
+          },
+        },
+        extendDefaults: true,
+      },
+    ],
+    'react/jsx-no-bind': [
+      2,
+      {
+        ignoreDOMComponents: false,
+        ignoreRefs: false,
+        allowArrowFunctions: false,
+        allowFunctions: false,
+        allowBind: false,
+      },
+    ],
+    '@typescript-eslint/no-shadow': 1,
+    'validate-jsx-nesting/no-invalid-jsx-nesting': 2,
   },
-  overrides: [{
-    "files": ['**/benchmark/**', "**/mocks/**"],
-    "rules": {
-      "import/no-extraneous-dependencies": 0,
-    }
-  }
-],
+  overrides: [
+    {
+      files: ['**/benchmark/**', '**/mocks/**', 'cypress.config.ts'],
+      rules: {
+        'import/no-extraneous-dependencies': 0,
+      },
+    },
+  ],
 };
diff --git a/packages/tokens-studio-for-figma/CHANGELOG.md b/packages/tokens-studio-for-figma/CHANGELOG.md
@@ -1,5 +1,22 @@
 # @tokens-studio/figma-plugin
 
+## 2.2.2
+
+### Patch Changes
+
+- 23caccde: Fixes sync with Bitbucket provider:
+
+  - Pull when the option is to sync with a single file was not working
+  - Push was removing all other .json files in the selected folder (either root of the chosen folder)
+
+## 2.2.1
+
+### Patch Changes
+
+- 1af628f1: fixed an issue with pulling token sets from Bitbucket when multi-file sync is enabled, wherein all the token sets were not being pulled.
+- fdfc7be2: Disable cache for Bitbucket
+- 04f3fa67: When updating variables we now properly check if the variable needs to be updated, which fixes an issue where Figma was showing library updates even though the values were the same
+
 ## 2.2.0
 
 ### Minor Changes

diff --git a/packages/tokens-studio-for-figma/cypress.config.ts b/packages/tokens-studio-for-figma/cypress.config.ts
@@ -1,4 +1,4 @@
-import { defineConfig } from 'cypress'
+import { defineConfig } from 'cypress';
 
 export default defineConfig({
   chromeWebSecurity: false,
@@ -11,8 +11,11 @@ export default defineConfig({
     // We've imported your old cypress plugins here.
     // You may want to clean this up later by importing these.
     setupNodeEvents(on, config) {
-      return require('./cypress/plugins/index.js')(on, config)
+      // Figure out if we can use ESM file for this or remove it
+      // since we don't actually use any plugins in this plugins entry file
+      // eslint-disable-next-line global-require
+      return require('./cypress/plugins/index.js')(on, config);
     },
     baseUrl: 'http://localhost:58630',
   },
-})
+});
diff --git a/packages/tokens-studio-for-figma/package.json b/packages/tokens-studio-for-figma/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tokens-studio/figma-plugin",
-  "version": "2.2.0",
+  "version": "2.2.2",
   "description": "Tokens Studio plugin for Figma",
   "license": "MIT",
   "private": true,
@@ -82,6 +82,7 @@
     "colorjs.io": "^0.4.3",
     "copy-to-clipboard": "^3.3.3",
     "dnd-core": "^12.0.1",
+    "deepmerge-ts": "^5.1.0",
     "dot-object": "^2.1.3",
     "downshift": "^6.1.7",
     "eventemitter3": "^4.0.7",
@@ -194,7 +195,6 @@
     "cypress": "^13.5.1",
     "cypress-react-selector": "^3.0.0",
     "deep-set-in": "^2.1.3",
-    "deepmerge-ts": "^5.1.0",
     "dot-prop": "^8.0.0",
     "dotenv": "^16.3.1",
     "dotenv-webpack": "^8.0.1",

diff --git a/packages/tokens-studio-for-figma/src/app/asyncMessageHandlers/startup.tsx b/packages/tokens-studio-for-figma/src/app/asyncMessageHandlers/startup.tsx
@@ -53,7 +53,7 @@ const StartupApp = () => {
   ) : appContainer;
 };
 
-export default async () => {
+export const startup = async () => {
   const container = document.getElementById('app');
 
   // Side effect from first load

diff --git a/packages/tokens-studio-for-figma/src/app/components/AddLicenseKey/AddLicenseKey.tsx b/packages/tokens-studio-for-figma/src/app/components/AddLicenseKey/AddLicenseKey.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/label-has-associated-control */
 import React, {
-  useCallback, useEffect, useState, useRef,
+  useCallback, useEffect, useState,
 } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useLDClient } from 'launchdarkly-react-client-sdk';
@@ -23,7 +23,6 @@ import { ErrorMessage } from '../ErrorMessage';
 import { addLicenseKey } from '@/utils/addLicenseKey';
 
 export default function AddLicenseKey() {
-  const inputEl = useRef<HTMLInputElement | null>(null);
   const dispatch = useDispatch<Dispatch>();
   const existingKey = useSelector(licenseKeySelector);
   const licenseDetails = useSelector(licenseDetailsSelector);
@@ -109,7 +108,7 @@ export default function AddLicenseKey() {
       <Stack direction="row" gap={2} align="center" justify="between">
         <Heading size="medium">{t('licenseKey')}</Heading>
         <Stack direction="row" gap={2} align="center">
-          <ProBadge link="https://tokens.studio/plugin?ref=add-license-key" />
+          <ProBadge campaign="add-license-key" />
           {existingKey && !licenseKeyError && (
             <ManageSubscriptionLink href="https://account.tokens.studio" target="_blank">
               {t('manageSubscription')}

diff --git a/packages/tokens-studio-for-figma/src/app/components/AuthModal/index.tsx b/packages/tokens-studio-for-figma/src/app/components/AuthModal/index.tsx
@@ -1,7 +1,7 @@
 import React, { ChangeEvent, useCallback, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import {
-  Box, Button, Label, Stack, TextInput, Link, Text, Heading,
+  Box, Button, Label, Stack, TextInput, Link, Text,
 } from '@tokens-studio/ui';
 import { ChevronLeftIcon } from '@radix-ui/react-icons';
 import { useAuth } from '@/context/AuthContext';

diff --git a/packages/tokens-studio-for-figma/src/app/components/BorderTokenDownShiftInput.tsx b/packages/tokens-studio-for-figma/src/app/components/BorderTokenDownShiftInput.tsx
@@ -3,7 +3,6 @@ import { useTranslation } from 'react-i18next';
 import { ResolveTokenValuesResult } from '@/utils/tokenHelpers';
 import DownshiftInput from './DownshiftInput';
 import { getLabelForProperty } from '@/utils/getLabelForProperty';
-import { styled } from '@/stitches.config';
 import { getAliasValue } from '@/utils/alias';
 import { ColorPickerTrigger } from './ColorPickerTrigger';
 

diff --git a/packages/tokens-studio-for-figma/src/app/components/BorderTokenForm.tsx b/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>

diff --git a/packages/tokens-studio-for-figma/src/app/components/BranchSelector.tsx b/packages/tokens-studio-for-figma/src/app/components/BranchSelector.tsx
@@ -208,7 +208,7 @@ export default function BranchSelector() {
               <>
                 <DropdownMenu.Item css={{ display: 'flex', justifyContent: 'space-between' }}>
                   <span>{t('upgradeToPro', { ns: 'licence' })}</span>
-                  <ProBadge link="https://tokens.studio/plugin?ref=branch-selector" compact />
+                  <ProBadge campaign="branch-selector" compact />
                 </DropdownMenu.Item>
                 <DropdownMenu.Separator />
               </>

diff --git a/packages/tokens-studio-for-figma/src/app/components/ChangeStateListingHeading.tsx b/packages/tokens-studio-for-figma/src/app/components/ChangeStateListingHeading.tsx
@@ -1,10 +1,8 @@
 import React from 'react';
-import { useTranslation } from 'react-i18next';
 import { Heading } from '@tokens-studio/ui';
 import {
   IconCollapseArrow, IconExpandArrow,
 } from '@/icons';
-import Tooltip from './Tooltip';
 import Box from './Box';
 import Stack from './Stack';
 import { Count } from './Count';
@@ -49,8 +47,6 @@ export default function ChangeStateListingHeading({
     onCollapse(e, label);
   }, [onCollapse, label]);
 
-  const { t } = useTranslation(['tokens']);
-
   return (
     <Stack direction="row" align="center" justify="between" gap={4} css={{ position: 'relative' }}>
       <StyledChangedStateGroupHeadingButton

diff --git a/packages/tokens-studio-for-figma/src/app/components/ColorPickerTrigger.tsx b/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}
+  />
+);
diff --git a/packages/tokens-studio-for-figma/src/app/components/ColorTokenForm.tsx b/packages/tokens-studio-for-figma/src/app/components/ColorTokenForm.tsx
@@ -48,8 +48,6 @@ export default function ColorTokenForm({
   const { t } = useTranslation(['tokens']);
   const [inputHelperOpen, setInputHelperOpen] = React.useState(false);
   const [inputMixHelperOpen, setInputMixHelperOpen] = React.useState(false);
-  const [operationMenuOpened, setOperationMenuOpened] = React.useState(false);
-  const [colorSpaceMenuOpened, setColorSpaceMenuOpened] = React.useState(false);
   const [modifyVisible, setModifyVisible] = React.useState(false);
   const isProUser = useIsProUser();
 
@@ -140,14 +138,6 @@ export default function ColorTokenForm({
     handleRemoveColorModify();
   }, [handleRemoveColorModify]);
 
-  const handleOperationToggleMenu = useCallback(() => {
-    setOperationMenuOpened(!operationMenuOpened);
-  }, [operationMenuOpened]);
-
-  const handleColorSpaceToggleMenu = useCallback(() => {
-    setColorSpaceMenuOpened(!colorSpaceMenuOpened);
-  }, [colorSpaceMenuOpened]);
-
   const onOperationSelected = useCallback((operation: string) => {
     if (internalEditToken?.$extensions?.['studio.tokens']?.modify) {
       handleModifyChange({
@@ -227,7 +217,7 @@ export default function ColorTokenForm({
       <Box css={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
         <Box css={{ display: 'flex', gap: '$3', alignItems: 'center' }}>
           <Heading size="small">{t('modify')}</Heading>
-          <ProBadge link="https://tokens.studio/plugin?ref=modifiers" compact />
+          <ProBadge campaign="modify-color" compact />
         </Box>
         {
           !modifyVisible ? (