Release 111

package.json

@@ -1,7 +1,7 @@
 {
   "name": "figma-tokens",
   "version": "1.0.0",
-  "plugin_version": "110",
+  "plugin_version": "111",
   "description": "Figma Tokens",
   "license": "MIT",
   "scripts": {

src/app/components/DownshiftInput/DownShiftInput.test.tsx

@@ -0,0 +1,33 @@
+describe('DownShiftInput', () => {
+  it('filteredValue should only replace {} or $ and remain all letters', () => {
+    const dataStore = [
+      {
+        input: '{opacity.10}',
+        output: 'opacity.10',
+      },
+      {
+        input: '{トランスペアレント.10',
+        output: 'トランスペアレント.10',
+      },
+      {
+        input: '$不透 明度.10',
+        output: '不透 明度.10',
+      },
+      {
+        input: '$불투명.10',
+        output: '불투명.10',
+      },
+      {
+        input: '{अस्पष्टता.10}',
+        output: 'अस्पष्टता.10',
+      },
+      {
+        input: 'թափանցիկ.10',
+        output: 'թափանցիկ.10',
+      },
+    ];
+    dataStore.forEach((data) => {
+      expect(data.input.replace(/[{}$]/g, '')).toBe(data.output);
+    });
+  });
+});

src/app/components/DownshiftInput/DownshiftInput.tsx

@@ -113,7 +113,7 @@ export const DownshiftInput: React.FunctionComponent<DownShiftProps> = ({
   const [showAutoSuggest, setShowAutoSuggest] = React.useState<boolean>(false);
   const [isFirstLoading, setisFirstLoading] = React.useState<boolean>(true);
 
-  const filteredValue = useMemo(() => ((showAutoSuggest || typeof value !== 'string') ? '' : value?.replace(/[^a-zA-Z0-9.]/g, '')), [
+  const filteredValue = useMemo(() => ((showAutoSuggest || typeof value !== 'string') ? '' : value?.replace(/[{}$]/g, '')), [
     showAutoSuggest,
     value,
   ]); // removing non-alphanumberic except . from the input value

src/app/components/ManageThemesModal/CreateOrEditThemeForm.tsx

@@ -5,7 +5,7 @@ import Input from '../Input';
 import { allTokenSetsSelector, usedTokenSetSelector } from '@/selectors';
 import { StyledNameInputBox } from './StyledNameInputBox';
 import { tokenSetListToTree, tokenSetListToList, TreeItem } from '@/utils/tokenset';
-import { useIsGithubMultiFileEnabled } from '@/app/hooks/useIsGithubMultiFileEnabled';
+import { useIsGitMultiFileEnabled } from '@/app/hooks/useIsGitMultiFileEnabled';
 import { TokenSetListOrTree } from '../TokenSetListOrTree';
 import { TokenSetThemeItem } from './TokenSetThemeItem';
 import { StyledForm } from './StyledForm';
@@ -25,7 +25,7 @@ type Props = {
 
 export const CreateOrEditThemeForm: React.FC<Props> = ({ defaultValues, onSubmit }) => {
   const store = useStore();
-  const githubMfsEnabled = useIsGithubMultiFileEnabled();
+  const githubMfsEnabled = useIsGitMultiFileEnabled();
   const selectedTokenSets = useMemo(() => (
     usedTokenSetSelector(store.getState())
   ), [store]);

src/app/components/TokenSetSelector.tsx

@@ -16,7 +16,7 @@ import {
   editProhibitedSelector, tokensSelector,
 } from '@/selectors';
 import Stack from './Stack';
-import { useIsGithubMultiFileEnabled } from '../hooks/useIsGithubMultiFileEnabled';
+import { useIsGitMultiFileEnabled } from '../hooks/useIsGitMultiFileEnabled';
 
 const StyledButton = styled('button', {
   flexShrink: 0,
@@ -37,7 +37,7 @@ const StyledButton = styled('button', {
 export default function TokenSetSelector() {
   const tokens = useSelector(tokensSelector);
   const editProhibited = useSelector(editProhibitedSelector);
-  const mfsEnabled = useIsGithubMultiFileEnabled();
+  const mfsEnabled = useIsGitMultiFileEnabled();
   const dispatch = useDispatch<Dispatch>();
   const { confirm } = useConfirm();
 
@@ -54,7 +54,7 @@ export default function TokenSetSelector() {
 
   React.useEffect(() => {
     setShowNewTokenSetFields(false);
-    handleNewTokenSetNameChange('');
+    handleNewTokenSetNameChange(tokenSetMarkedForChange);
   }, [tokens]);
 
   const handleNewTokenSetSubmit = React.useCallback((e: React.FormEvent<HTMLFormElement>) => {

src/app/hooks/useIsGithubMultiFileEnabled.ts → src/app/hooks/useIsGitMultiFileEnabled.ts

@@ -4,14 +4,14 @@ import { useFlags } from 'launchdarkly-react-client-sdk';
 import { apiSelector } from '@/selectors';
 import { StorageProviderType } from '@/constants/StorageProviderType';
 
-export function useIsGithubMultiFileEnabled() {
+export function useIsGitMultiFileEnabled() {
   const api = useSelector(apiSelector);
   const { multiFileSync } = useFlags();
 
   return useMemo(() => (
     Boolean(
       multiFileSync
-      && (api?.provider === StorageProviderType.GITHUB || api?.provider === StorageProviderType.GITLAB)
+      && (api?.provider === StorageProviderType.GITHUB || api?.provider === StorageProviderType.GITLAB || api?.provider === StorageProviderType.ADO)
       && !api?.filePath?.endsWith('.json'),
     )
   ), [api, multiFileSync]);

src/app/store/models/tokenState.tsx

@@ -137,7 +137,8 @@ export const tokenState = createModel<RootModel>()({
       }
 
       const newName = `${name}_Copy`;
-      return updateTokenSetsInState(state, null, [newName]);
+
+      return updateTokenSetsInState(state, null, [newName, state.tokens[name]]);
     },
     deleteTokenSet: (state, name: string) => updateTokenSetsInState(
       state,

src/app/store/providers/ado/ado.tsx

@@ -45,8 +45,7 @@ export const useADO = () => {
       text: 'Pull from Ado?',
       description: 'Your repo already contains tokens, do you want to pull these now?',
     });
-    if (confirmResult === false) return false;
-    return confirmResult.result;
+    return confirmResult
   }, [confirm]);
 
   const pushTokensToADO = React.useCallback(async (context: AdoCredentials) => {

src/app/store/providers/github/github.tsx

@@ -48,14 +48,12 @@ export function useGitHub() {
       text: 'Pull from GitHub?',
       description: 'Your repo already contains tokens, do you want to pull these now?',
     });
-    if (confirmResult === false) return false;
-    return confirmResult.result;
+    return confirmResult;
   }, [confirm]);
 
   const pushTokensToGitHub = useCallback(async (context: GithubCredentials): Promise<RemoteTokenStorageData<GitStorageMetadata> | null> => {
     const storage = storageClientFactory(context);
     const content = await storage.retrieve();
-
     if (content) {
       if (
         content
@@ -136,6 +134,7 @@ export function useGitHub() {
 
     try {
       const content = await storage.retrieve();
+
       if (content) {
         return content;
       }
@@ -162,6 +161,7 @@ export function useGitHub() {
       await checkAndSetAccess({ context, owner, repo });
 
       const content = await storage.retrieve();
+
       if (content) {
         if (
           !isEqual(content.tokens, tokens)

src/app/store/providers/gitlab/gitlab.tsx

@@ -49,8 +49,7 @@ export function useGitLab() {
       text: 'Pull from GitLab?',
       description: 'Your repo already contains tokens, do you want to pull these now?',
     });
-    if (confirmResult === false) return false;
-    return confirmResult.result;
+    return confirmResult;
   }, [confirm]);
 
   const pushTokensToGitLab = useCallback(async (context: GitlabCredentials) => {
@@ -91,7 +90,6 @@ export function useGitLab() {
           usedTokenSet,
           activeTheme,
         });
-
         pushDialog('success');
         return {
           tokens,

src/app/store/providers/jsonbin.tsx

@@ -98,7 +98,6 @@ export function useJSONbin() {
       id, secret, name, internalId,
     } = context;
     if (!id || !secret) return null;
-
     try {
       const storage = new JSONBinTokenStorage(id, secret);
       const data = await storage.retrieve();