From df8fddddd3d3dcacd3d6d9015ea84f1c469985c8 Mon Sep 17 00:00:00 2001 From: Jan Six Date: Sun, 31 Oct 2021 22:50:53 +0100 Subject: [PATCH] Git Sync, URL Sync & Polish (#226) * add initial url sync * add new provider type * add form * add basic functionality * add working pull * add push dialog, working state * added checks for commit message * add tests * rework confirm message * add dirty state * add test * fix jsonbin * remove legacy code * wip * fix pullTokens * add tests * add first draft of cli script * fix tests * add pkg * working cli tool with github actions * remove console log * Add robustness * bump token-transformer * prettify ui * bump release * add custom branch input to pushDialog * added loading screen, fixed jsonbin add * add excludes to token transformer * add readme to token-transformer * fix transformer when no excludes are present * remove token context * add url sync * allow users to resize window by dragging corner * fix url sync * ignore tokens from style creation that start with _ * fix tooltip render error * fix tooltip in list mode * fix resize pointer * fix #266 * fix colors button row * fixes #274 * fix / replacement * fixes #142 * add check for alias * add token preview in edit * fix undefined pr state if no file existed * add editProhibited based on user role * fix alias value of 0 * add new defaults * remove spellcheck from inputs * adds json5 support, fixes #270, fixes #283 * add unique check to names * fix color opacity values not matching when using 0.5 * fixes #166, fixes #209 * add type to new token creation * fixes #276 * fixes unique name check * fix unique name check * capitalize description in edit form * introduce new merging function * fix aliasing of rgba colors * add new resize icon * fix capitalization of input labels * fix name of form * fix async fn * correctly saves whole context obj except secret * add placeholder for value * fix spec * fix test * remove console.log * fix when no tokens file was present * integrate style name ignore for updating nodes * fix ignore part when applying * fix modal padding except for edit token form * fix token-transformer * bump token transformer --- cypress/integration/tokens.spec.js | 13 +- file.json | 709 ++++++++++++++ package.json | 8 +- src/app/components/App.tsx | 8 +- .../components/BrokenReferenceIndicator.tsx | 33 + src/app/components/EditTokenForm.tsx | 66 +- src/app/components/EditTokenFormModal.tsx | 12 +- src/app/components/Input.tsx | 6 +- src/app/components/JSONEditor.tsx | 7 +- src/app/components/Modal.tsx | 82 +- src/app/components/MoreButton.tsx | 13 +- src/app/components/Navbar.tsx | 35 +- src/app/components/NewGroupForm.tsx | 55 -- src/app/components/PushDialog.tsx | 102 ++ src/app/components/Settings.tsx | 42 +- src/app/components/StorageItem.tsx | 8 +- src/app/components/StorageItemForm.tsx | 89 +- .../components/StorageItemForm/GitHubForm.tsx | 61 ++ .../StorageItemForm/JSONBinForm.tsx | 43 + .../components/StorageItemForm/URLForm.tsx | 27 + src/app/components/SyncSettings.tsx | 99 +- src/app/components/Textarea.tsx | 1 + src/app/components/ToggleEmptyButton.tsx | 9 +- src/app/components/TokenButton.tsx | 18 +- src/app/components/TokenListing.tsx | 11 +- src/app/components/TokenTooltip.tsx | 8 +- src/app/components/TokenTree.tsx | 28 +- src/app/components/Tokens.tsx | 6 +- src/app/components/Tooltip.tsx | 2 +- src/app/components/WindowResizer.tsx | 36 + src/app/components/icons/IconBrokenLink.tsx | 14 + src/app/components/icons/IconResizeWindow.tsx | 14 + .../modals/CreateStorageItemModal.tsx | 10 + src/app/components/utils.test.ts | 8 +- src/app/components/utils.tsx | 2 +- src/app/hooks/usePushDialog.tsx | 38 + src/app/index.tsx | 5 +- src/app/store/TokenContext.tsx | 111 --- src/app/store/models/settings.tsx | 11 +- src/app/store/models/tokenState.tsx | 73 +- src/app/store/models/uiState.tsx | 35 +- src/app/store/providers/arcade.tsx | 278 ------ src/app/store/providers/github.tsx | 269 ++++++ src/app/store/providers/jsonbin.tsx | 11 +- src/app/store/providers/url.tsx | 74 ++ src/app/store/remoteTokens.tsx | 46 +- src/app/store/updateSources.tsx | 7 +- src/app/store/useManageTokens.tsx | 10 +- src/app/store/useTokens.tsx | 16 +- src/app/styles/tailwind.css | 32 +- src/config/default.json | 900 ++++++++++++++---- src/plugin/compareProviders.test.ts | 2 +- src/plugin/controller.ts | 18 +- src/plugin/figmaTransforms/colors.test.ts | 32 + src/plugin/figmaTransforms/colors.ts | 9 +- src/plugin/node.ts | 18 +- src/plugin/tokenHelpers.test.ts | 44 + src/plugin/tokenHelpers.ts | 29 +- src/plugin/updateNode.ts | 4 +- src/stitches.config.ts | 2 + src/utils/aliases.test.ts | 82 ++ src/utils/aliases.tsx | 12 +- src/utils/checkIfAlias.test.ts | 4 +- src/utils/checkIfContainsAlias.tsx | 7 + src/utils/checkIfValueToken.test.ts | 3 + src/utils/checkIfValueToken.ts | 2 +- src/utils/convertTokens.tsx | 5 + src/utils/convertTokensObjectToResolved.ts | 4 +- src/utils/convertTokensToGroupedObject.ts | 5 +- src/utils/credentials.test.ts | 53 +- src/utils/credentials.ts | 27 +- src/utils/isJSONString.ts | 8 + src/utils/parseJson.test.ts | 11 + src/utils/parseJson.ts | 5 + src/utils/parseTokenValues.ts | 1 - src/utils/transform.ts | 4 +- src/utils/uiSettings.ts | 4 +- tailwind.js | 5 + tests/config/setupTest.tsx | 3 +- token-transformer/README.md | 17 + token-transformer/file.json | 697 ++++++++++++++ token-transformer/index.js | 12 +- token-transformer/input.json | 727 ++++++++++++++ token-transformer/package-lock.json | 5 + token-transformer/package.json | 23 +- types/api.tsx | 5 +- types/messages.tsx | 1 + types/state.tsx | 2 - types/tokens.tsx | 22 +- webpack.config.js | 1 + yarn.lock | 170 +++- 91 files changed, 4632 insertions(+), 1054 deletions(-) create mode 100644 file.json create mode 100644 src/app/components/BrokenReferenceIndicator.tsx delete mode 100644 src/app/components/NewGroupForm.tsx create mode 100644 src/app/components/PushDialog.tsx create mode 100644 src/app/components/StorageItemForm/GitHubForm.tsx create mode 100644 src/app/components/StorageItemForm/JSONBinForm.tsx create mode 100644 src/app/components/StorageItemForm/URLForm.tsx create mode 100644 src/app/components/WindowResizer.tsx create mode 100644 src/app/components/icons/IconBrokenLink.tsx create mode 100644 src/app/components/icons/IconResizeWindow.tsx create mode 100644 src/app/hooks/usePushDialog.tsx delete mode 100644 src/app/store/TokenContext.tsx delete mode 100644 src/app/store/providers/arcade.tsx create mode 100644 src/app/store/providers/github.tsx create mode 100644 src/app/store/providers/url.tsx create mode 100644 src/plugin/tokenHelpers.test.ts create mode 100644 src/utils/aliases.test.ts create mode 100644 src/utils/checkIfContainsAlias.tsx create mode 100644 src/utils/isJSONString.ts create mode 100644 src/utils/parseJson.test.ts create mode 100644 src/utils/parseJson.ts create mode 100644 token-transformer/README.md create mode 100644 token-transformer/file.json create mode 100644 token-transformer/input.json create mode 100644 token-transformer/package-lock.json diff --git a/cypress/integration/tokens.spec.js b/cypress/integration/tokens.spec.js index 765859d9f..41e27572b 100644 --- a/cypress/integration/tokens.spec.js +++ b/cypress/integration/tokens.spec.js @@ -38,26 +38,21 @@ describe('TokenListing', () => { cy.receiveTokenValues({ version: '5', values: { - options: [ - { - name: 'sizing.xs', - value: 4, - }, - ], + options: [], }, }); cy.receiveStorageTypeLocal(); cy.get('[data-cy=tokenlisting-sizing] [data-cy=button-add-new-token]').click({timeout: 1000}); fillTokenForm({ - name: 'sizing.xs', + name: 'sizing.sm', value: '4', }); cy.get('@postMessage').should('be.calledTwice'); receiveRemoteComponents(); cy.get('[data-cy=tokenlisting-sizing] [data-cy=button-add-new-token]').click({timeout: 1000}); fillTokenForm({ - name: 'sizing.sm', - value: '$sizing.xs * 2', + name: 'sizing.md', + value: '$sizing.sm * 2', }); }); diff --git a/file.json b/file.json new file mode 100644 index 000000000..82bf92378 --- /dev/null +++ b/file.json @@ -0,0 +1,709 @@ +{ + "sizing": { + "base": { + "value": 4, + "description": "Alias value", + "type": "sizing" + }, + "default": { + "value": 8, + "description": "Math value", + "type": "sizing" + } + }, + "Light-Theme-Colorscale": { + "Gray": { + "00": { + "value": "#FAFBFC", + "description": "Gray 00", + "type": "color" + }, + "01": { + "value": "#EAEEF2", + "description": "Gray 01", + "type": "color" + }, + "02": { + "value": "#D4DAE0", + "description": "Gray 02", + "type": "color" + }, + "03": { + "value": "#B7BFC7", + "description": "Gray 03", + "type": "color" + }, + "04": { + "value": "#949DA7", + "description": "Gray 04", + "type": "color" + }, + "05": { + "value": "#707A84", + "description": "Gray 05", + "type": "color" + }, + "06": { + "value": "#57606A", + "description": "Gray 06", + "type": "color" + }, + "07": { + "value": "#424A53", + "description": "Gray 07", + "type": "color" + }, + "08": { + "value": "#32383F", + "description": "Gray 08", + "type": "color" + }, + "09": { + "value": "#24292F", + "description": "Gray 09", + "type": "color" + }, + "Black": { + "value": "#1B1F24", + "description": "Gray 10 or Black", + "type": "color" + } + }, + "Coral": { + "00": { + "value": "#FFF0EB", + "description": "Coral 00", + "type": "color" + }, + "01": { + "value": "#FFD6CC", + "description": "Coral 01", + "type": "color" + }, + "02": { + "value": "#FFB4A1", + "description": "Coral 02", + "type": "color" + }, + "03": { + "value": "#FD8C73", + "description": "Coral 03", + "type": "color" + }, + "04": { + "value": "#EC6547", + "description": "Coral 04", + "type": "color" + }, + "05": { + "value": "#C4432B", + "description": "Coral 05", + "type": "color" + }, + "06": { + "value": "#9E2F1C", + "description": "Coral 06", + "type": "color" + }, + "07": { + "value": "#801F0F", + "description": "Coral 07", + "type": "color" + }, + "08": { + "value": "#691105", + "description": "Coral 08", + "type": "color" + }, + "09": { + "value": "#510901", + "description": "Coral 09", + "type": "color" + } + }, + "Blue": { + "00": { + "value": "#E4F6FF", + "description": "Blue 00", + "type": "color" + }, + "01": { + "value": "#BCE5FF", + "description": "Blue 01", + "type": "color" + }, + "02": { + "value": "#89CDFF", + "description": "Blue 02", + "type": "color" + }, + "03": { + "value": "#58B1FF", + "description": "Blue 03", + "type": "color" + }, + "04": { + "value": "#298FFF", + "description": "Blue 04", + "type": "color" + }, + "05": { + "value": "#096BDE", + "description": "Blue 05", + "type": "color" + }, + "06": { + "value": "#0552B2", + "description": "Blue 06", + "type": "color" + }, + "07": { + "value": "#033F8F", + "description": "Blue 07", + "type": "color" + }, + "08": { + "value": "#0B326D", + "description": "Blue 08", + "type": "color" + }, + "09": { + "value": "#052455", + "description": "Blue 09", + "type": "color" + } + }, + "Pink": { + "00": { + "value": "#FFEFF7", + "description": "Pink 00", + "type": "color" + }, + "01": { + "value": "#FFD3EB", + "description": "Pink 01", + "type": "color" + }, + "02": { + "value": "#FFADDA", + "description": "Pink 02", + "type": "color" + }, + "03": { + "value": "#FF80C8", + "description": "Pink 03", + "type": "color" + }, + "04": { + "value": "#E85AAD", + "description": "Pink 04", + "type": "color" + }, + "05": { + "value": "#BF3989", + "description": "Pink 05", + "type": "color" + }, + "06": { + "value": "#99286E", + "description": "Pink 06", + "type": "color" + }, + "07": { + "value": "#772057", + "description": "Pink 07", + "type": "color" + }, + "08": { + "value": "#611347", + "description": "Pink 08", + "type": "color" + }, + "09": { + "value": "#4D0336", + "description": "Pink 09", + "type": "color" + } + }, + "Orange": { + "00": { + "value": "#FFF1E5", + "description": "Orange 00", + "type": "color" + }, + "01": { + "value": "#FFD8B5", + "description": "Orange 01", + "type": "color" + }, + "02": { + "value": "#FFB77C", + "description": "Orange 2", + "type": "color" + }, + "03": { + "value": "#FB8F44", + "description": "Orange 03", + "type": "color" + }, + "04": { + "value": "#E16F24", + "description": "Orange 04", + "type": "color" + }, + "05": { + "value": "#BC4C00", + "description": "Orange 05", + "type": "color" + }, + "06": { + "value": "#953800", + "description": "Orange 06", + "type": "color" + }, + "07": { + "value": "#762C00", + "description": "Orange 07", + "type": "color" + }, + "08": { + "value": "#5C2200", + "description": "Orange 08", + "type": "color" + }, + "09": { + "value": "#471700", + "description": "Orange 09", + "type": "color" + } + }, + "Red": { + "00": { + "value": "#FFEFEE", + "description": "Red 00", + "type": "color" + }, + "01": { + "value": "#FFD5D3", + "description": "Red 01", + "type": "color" + }, + "02": { + "value": "#FFB2B0", + "description": "Red 02", + "type": "color" + }, + "03": { + "value": "#FF8987", + "description": "Red 03", + "type": "color" + }, + "04": { + "value": "#FB5254", + "description": "Red 04", + "type": "color" + }, + "05": { + "value": "#D42A32", + "description": "Red 05", + "type": "color" + }, + "06": { + "value": "#A81C26", + "description": "Red 06", + "type": "color" + }, + "07": { + "value": "#84161F", + "description": "Red 07", + "type": "color" + }, + "08": { + "value": "#691019", + "description": "Red 08", + "type": "color" + }, + "09": { + "value": "#52040F", + "description": "Red 09", + "type": "color" + } + }, + "Indigo": { + "00": { + "value": "#EFF2FF", + "description": "Indigo 00", + "type": "color" + }, + "01": { + "value": "#D7DDFF", + "description": "Indigo 01", + "type": "color" + }, + "02": { + "value": "#B9C2FF", + "description": "Indigo 02", + "type": "color" + }, + "03": { + "value": "#9AA4FF", + "description": "Indigo 03", + "type": "color" + }, + "04": { + "value": "#7683FF", + "description": "Indigo 04", + "type": "color" + }, + "05": { + "value": "#545DF0", + "description": "Indigo 05", + "type": "color" + }, + "06": { + "value": "#3C42D0", + "description": "Indigo 06", + "type": "color" + }, + "07": { + "value": "#2C33A5", + "description": "Indigo 07", + "type": "color" + }, + "08": { + "value": "#22297F", + "description": "Indigo 08", + "type": "color" + }, + "09": { + "value": "#191F5C", + "description": "Indigo 09", + "type": "color" + } + }, + "Purple": { + "00": { + "value": "#FBEFFF", + "description": "Purple 00", + "type": "color" + }, + "01": { + "value": "#ECD8FF", + "description": "Purple 01", + "type": "color" + }, + "02": { + "value": "#D8B9FF", + "description": "Purple 02", + "type": "color" + }, + "03": { + "value": "#C297FF", + "description": "Purple 03", + "type": "color" + }, + "04": { + "value": "#A475F9", + "description": "Purple 04", + "type": "color" + }, + "05": { + "value": "#8250DF", + "description": "Purple 05", + "type": "color" + }, + "06": { + "value": "#6639BA", + "description": "Purple 06", + "type": "color" + }, + "07": { + "value": "#512A97", + "description": "Purple 07", + "type": "color" + }, + "08": { + "value": "#3E1F79", + "description": "Purple 08", + "type": "color" + }, + "09": { + "value": "#2E1461", + "description": "Purple 09", + "type": "color" + } + }, + "Green": { + "00": { + "value": "#DAFBE1", + "description": "Green 00", + "type": "color" + }, + "01": { + "value": "#ACEEBB", + "description": "Green 01", + "type": "color" + }, + "02": { + "value": "#6FDD8B", + "description": "Green 02", + "type": "color" + }, + "03": { + "value": "#4AC26B", + "description": "Green 03", + "type": "color" + }, + "04": { + "value": "#2DA44E", + "description": "Green 04", + "type": "color" + }, + "05": { + "value": "#1A7F37", + "description": "Green 05", + "type": "color" + }, + "06": { + "value": "#116329", + "description": "Green 06", + "type": "color" + }, + "07": { + "value": "#044F1E", + "description": "Green 07", + "type": "color" + }, + "08": { + "value": "#003D16", + "description": "Green 08", + "type": "color" + }, + "09": { + "value": "#002D11", + "description": "Green 09", + "type": "color" + } + }, + "Yellow": { + "00": { + "value": "#FCF4CA", + "description": "Yellow 00", + "type": "color" + }, + "01": { + "value": "#F6DE7C", + "description": "Yellow 01", + "type": "color" + }, + "02": { + "value": "#E6C24A", + "description": "Yellow 02", + "type": "color" + }, + "03": { + "value": "#D2A52D", + "description": "Yellow 03", + "type": "color" + }, + "04": { + "value": "#BB8400", + "description": "Yellow 04", + "type": "color" + }, + "05": { + "value": "#976500", + "description": "Yellow 05", + "type": "color" + }, + "06": { + "value": "#7A4C00", + "description": "Yellow 06", + "type": "color" + }, + "07": { + "value": "#613B01", + "description": "Yellow 07", + "type": "color" + }, + "08": { + "value": "#4D2D00", + "description": "Yellow 08", + "type": "color" + }, + "09": { + "value": "#382103", + "description": "Yellow 09", + "type": "color" + } + }, + "Lemon": { + "00": { + "value": "#FDF5B3", + "description": "Lemon 00", + "type": "color" + }, + "01": { + "value": "#F4E162", + "description": "Lemon 01", + "type": "color" + }, + "02": { + "value": "#DEC741", + "description": "Lemon 02", + "type": "color" + }, + "03": { + "value": "#C5AA20", + "description": "Lemon 03", + "type": "color" + }, + "04": { + "value": "#A88D02", + "description": "Lemon 04", + "type": "color" + }, + "05": { + "value": "#866D00", + "description": "Lemon 05", + "type": "color" + }, + "06": { + "value": "#685400", + "description": "Lemon 06", + "type": "color" + }, + "07": { + "value": "#534100", + "description": "Lemon 07", + "type": "color" + }, + "08": { + "value": "#413200", + "description": "Lemon 08", + "type": "color" + }, + "09": { + "value": "#322400", + "description": "Lemon 09", + "type": "color" + } + }, + "Lime": { + "00": { + "value": "#EAFABA", + "description": "Lime 00", + "type": "color" + }, + "01": { + "value": "#CDEC78", + "description": "Lime 01", + "type": "color" + }, + "02": { + "value": "#B1D353", + "description": "Lime 02", + "type": "color" + }, + "03": { + "value": "#94B83B", + "description": "Lime 03", + "type": "color" + }, + "04": { + "value": "#799A2A", + "description": "Lime 04", + "type": "color" + }, + "05": { + "value": "#5A791B", + "description": "Lime 05", + "type": "color" + }, + "06": { + "value": "#425E13", + "description": "Lime 06", + "type": "color" + }, + "07": { + "value": "#2F4A06", + "description": "Lime 07", + "type": "color" + }, + "08": { + "value": "#233B03", + "description": "Lime 08", + "type": "color" + }, + "09": { + "value": "#182C01", + "description": "Lime 09", + "type": "color" + } + }, + "Teal": { + "00": { + "value": "#DAF9F5", + "description": "Teal 00", + "type": "color" + }, + "01": { + "value": "#B0EAE3", + "description": "Teal 01", + "type": "color" + }, + "02": { + "value": "#6BD6D0", + "description": "Teal 02", + "type": "color" + }, + "03": { + "value": "#49BCB7", + "description": "Teal 03", + "type": "color" + }, + "04": { + "value": "#339D9B", + "description": "Teal 04", + "type": "color" + }, + "05": { + "value": "#197B7B", + "description": "Teal 05", + "type": "color" + }, + "06": { + "value": "#136061", + "description": "Teal 06", + "type": "color" + }, + "07": { + "value": "#024B4D", + "description": "Teal 07", + "type": "color" + }, + "08": { + "value": "#063A3C", + "description": "Teal 08", + "type": "color" + }, + "09": { + "value": "#052B2C", + "description": "Teal 09", + "type": "color" + } + } + }, + "colors": { + "Background": { + "value": "#FAFBFC", + "description": "Alias value", + "type": "color" + }, + "Background50": { + "value": "#fafbfc80", + "description": "Nested color value", + "type": "color" + } + } +} \ No newline at end of file diff --git a/package.json b/package.json index ea877781c..63e3e47a3 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "figma-tokens", "version": "1.0.0", - "plugin_version": "66", + "plugin_version": "66.1", "description": "Figma Tokens", "license": "ISC", "scripts": { @@ -21,7 +21,8 @@ "serve": "serve dist" }, "dependencies": { - "@figma-plugin/helpers": "^0.13.2", + "@figma-plugin/helpers": "^0.15.2", + "@octokit/rest": "^18.9.0", "@radix-ui/react-checkbox": "^0.0.16", "@radix-ui/react-context-menu": "^0.0.23", "@radix-ui/react-dropdown-menu": "^0.0.19", @@ -34,6 +35,7 @@ "@stitches/react": "^0.1.9", "autoprefixer": "^10.2.5", "axios": "^0.21.2", + "color2k": "^1.2.4", "core-js": "^3.9.1", "cypress-react-selector": "^2.3.6", "dnd-core": "^12.0.1", @@ -43,9 +45,11 @@ "figma-plugin-ds": "^0.1.8", "file-loader": "^6.2.0", "ignore-styles": "^5.0.1", + "json5": "^2.2.0", "lodash.isequal": "^4.5.0", "mixpanel-figma": "^2.0.1", "object-path": "^0.11.8", + "octokit-commit-multiple-files": "^3.2.1", "postcss": "^8.2.10", "react": "17.0.0", "react-dnd": "^13.1.1", diff --git a/src/app/components/App.tsx b/src/app/components/App.tsx index 3cfadfb69..61b6804b1 100644 --- a/src/app/components/App.tsx +++ b/src/app/components/App.tsx @@ -14,12 +14,14 @@ import Changelog from './Changelog'; import ImportedTokensDialog from './ImportedTokensDialog'; import {RootState} from '../store'; import ConfirmDialog from './ConfirmDialog'; +import PushDialog from './PushDialog'; +import WindowResizer from './WindowResizer'; const App = () => { const activeTab = useSelector((state: RootState) => state.uiState.activeTab); return ( - <> +
@@ -36,8 +38,10 @@ const App = () => { + +
- +
); }; diff --git a/src/app/components/BrokenReferenceIndicator.tsx b/src/app/components/BrokenReferenceIndicator.tsx new file mode 100644 index 000000000..4e573887c --- /dev/null +++ b/src/app/components/BrokenReferenceIndicator.tsx @@ -0,0 +1,33 @@ +import React from 'react'; + +import {styled} from '@/stitches.config'; +import IconBrokenLink from './icons/IconBrokenLink'; + +const StyledIndicator = styled('div', { + position: 'absolute', + top: '3px', + right: '3px', + borderRadius: '100%', + border: '1px solid $white', + background: '$dangerFg', + width: '6px', + height: '6px', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', +}); + +export default function BrokenReferenceIndicator({token, resolvedTokens}) { + const failedToResolve = React.useMemo(() => { + return resolvedTokens.find((t) => t.name === token.name).failedToResolve; + }, [token, resolvedTokens]); + + if (failedToResolve) { + return ( + + + + ); + } + return null; +} diff --git a/src/app/components/EditTokenForm.tsx b/src/app/components/EditTokenForm.tsx index 69b946a0c..ecf062d13 100644 --- a/src/app/components/EditTokenForm.tsx +++ b/src/app/components/EditTokenForm.tsx @@ -1,20 +1,35 @@ +import getAliasValue from '@/utils/aliases'; import {track} from '@/utils/analytics'; +import checkIfContainsAlias from '@/utils/checkIfContainsAlias'; import * as React from 'react'; import {useDispatch, useSelector} from 'react-redux'; import {Dispatch, RootState} from '../store'; import useManageTokens from '../store/useManageTokens'; import Input from './Input'; -const EditTokenForm = () => { +const EditTokenForm = ({resolvedTokens}) => { const {activeTokenSet} = useSelector((state: RootState) => state.tokenState); const {editSingleToken, createSingleToken} = useManageTokens(); const {editToken} = useSelector((state: RootState) => state.uiState); const dispatch = useDispatch(); const [currentEditToken, setCurrentEditToken] = React.useState(editToken); + const [error, setError] = React.useState(null); - const isValid = currentEditToken.value && currentEditToken.name.match(/^\S*$/); + const isValid = currentEditToken.value && currentEditToken.name.match(/^\S*$/) && !error; + + const hasNameThatExistsAlready = resolvedTokens + .filter((t) => t.internal__Parent === activeTokenSet) + .find((t) => t.name === currentEditToken.name); + const nameWasChanged = currentEditToken?.initialName !== currentEditToken.name; + + React.useEffect(() => { + if ((currentEditToken.isPristine || nameWasChanged) && hasNameThatExistsAlready) { + setError('Token names must be unique'); + } + }, [currentEditToken, hasNameThatExistsAlready, nameWasChanged]); const handleChange = (e) => { + setError(null); e.persist(); setCurrentEditToken({...currentEditToken, [e.target.name]: e.target.value}); }; @@ -84,6 +99,12 @@ const EditTokenForm = () => { }, 50); }, []); + const resolvedValue = React.useMemo(() => { + return typeof currentEditToken.value === 'object' + ? null + : getAliasValue(currentEditToken.value, resolvedTokens); + }, [currentEditToken, resolvedTokens]); + return (
{ type="text" name="name" inputRef={firstInput} + error={error} + placeholder="Unique name" /> {typeof currentEditToken.schema === 'object' ? ( Object.entries(currentEditToken.schema).map(([key, schemaValue]: [string, string]) => ( @@ -111,16 +134,34 @@ const EditTokenForm = () => { /> )) ) : ( - +
+ + {checkIfContainsAlias(currentEditToken.value) && ( +
+ {currentEditToken.type === 'color' ? ( +
+ ) : null} + {resolvedValue} +
+ )} +
)} {currentEditToken.explainer && (
{currentEditToken.explainer}
@@ -136,6 +177,7 @@ const EditTokenForm = () => { type="text" name={key} custom={schemaValue} + capitalize /> )) : null} diff --git a/src/app/components/EditTokenFormModal.tsx b/src/app/components/EditTokenFormModal.tsx index 2b98e5655..8d98bfcdf 100644 --- a/src/app/components/EditTokenFormModal.tsx +++ b/src/app/components/EditTokenFormModal.tsx @@ -4,7 +4,7 @@ import {Dispatch, RootState} from '../store'; import EditTokenForm from './EditTokenForm'; import Modal from './Modal'; -const EditTokenFormModal = () => { +const EditTokenFormModal = ({resolvedTokens}) => { const {editToken} = useSelector((state: RootState) => state.uiState); const dispatch = useDispatch(); @@ -13,8 +13,14 @@ const EditTokenFormModal = () => { }; return ( - - + + ); }; diff --git a/src/app/components/Input.tsx b/src/app/components/Input.tsx index fcdfaaca5..98b765407 100644 --- a/src/app/components/Input.tsx +++ b/src/app/components/Input.tsx @@ -13,14 +13,16 @@ const Input = ({ custom = '', inputRef = null, placeholder = '', + capitalize = false, }) => { return (