Deep equality check on imported typography styles (#292)

tokens-studio · Oct 31, 2021 · 21b7361 · 21b7361
1 parent 5c49f65
commit 21b7361
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -43,6 +43,7 @@
 		"figma-plugin-ds": "^0.1.8",
 		"file-loader": "^6.2.0",
 		"ignore-styles": "^5.0.1",
+		"lodash.isequal": "^4.5.0",
 		"mixpanel-figma": "^2.0.1",
 		"object-path": "^0.11.8",
 		"postcss": "^8.2.10",
@@ -71,6 +72,7 @@
 		"@testing-library/jest-dom": "^5.11.9",
 		"@testing-library/react": "^11.2.5",
 		"@types/jest": "^26.0.20",
+		"@types/lodash.isequal": "^4.5.5",
 		"@types/react": "^16.8.24",
 		"@types/react-dom": "^16.8.5",
 		"babel-jest": "^26.6.3",

diff --git a/src/app/store/models/tokenState.test.ts b/src/app/store/models/tokenState.test.ts
@@ -26,6 +26,14 @@ describe('editToken', () => {
                                     name: 'alias50',
                                     value: '$primary50',
                                 },
+                                {
+                                    name: 'header 1',
+                                    type: 'typography',
+                                    value: {
+                                        fontWeight: '400',
+                                        fontSize: '16',
+                                    },
+                                },
                             ],
                             options: [
                                 {
@@ -35,6 +43,11 @@ describe('editToken', () => {
                             ],
                         },
                         usedTokenSet: ['global'],
+                        importedTokens: {
+                            newTokens: [],
+                            updatedTokens: [],
+                        },
+                        activeTokenSet: 'global',
                     },
                 },
             },
@@ -78,4 +91,60 @@ describe('editToken', () => {
         const {tokens} = store.getState().tokenState;
         expect(tokens.options[0].value).toEqual('{secondary}');
     });
+
+    it('does a deep equality check on object values', async () => {
+        await store.dispatch.tokenState.setTokensFromStyles({
+            colors: [
+                {
+                    name: 'primary',
+                    value: '2',
+                },
+                {
+                    name: 'secondary',
+                    value: '3',
+                },
+            ],
+            typography: [
+                {
+                    name: 'header 1',
+                    type: 'typography',
+                    value: {
+                        fontWeight: '400',
+                        fontSize: '16',
+                    },
+                },
+                {
+                    name: 'header 2',
+                    type: 'typography',
+                    value: {
+                        fontWeight: '400',
+                        fontSize: '14',
+                    },
+                },
+            ],
+        });
+
+        const {importedTokens} = store.getState().tokenState;
+        expect(importedTokens.newTokens).toEqual([
+            {
+                name: 'secondary',
+                value: '3',
+            },
+            {
+                name: 'header 2',
+                type: 'typography',
+                value: {
+                    fontWeight: '400',
+                    fontSize: '14',
+                },
+            },
+        ]);
+        expect(importedTokens.updatedTokens).toEqual([
+            {
+                name: 'primary',
+                oldValue: '1',
+                value: '2',
+            },
+        ]);
+    });
 });
diff --git a/src/app/store/models/tokenState.tsx b/src/app/store/models/tokenState.tsx
@@ -3,6 +3,7 @@ import {createModel} from '@rematch/core';
 import {SingleTokenObject, TokenGroup, SingleToken, TokenProps} from '@types/tokens';
 import {StorageProviderType} from '@types/api';
 import defaultJSON from '@/config/default.json';
+import isEqual from 'lodash.isequal';
 
 import parseTokenValues from '@/utils/parseTokenValues';
 import {notifyToUI} from '@/plugin/notifiers';
@@ -189,11 +190,7 @@ export const tokenState = createModel<RootModel>()({
                 values.map((token: TokenGroup) => {
                     const oldValue = state.tokens[state.activeTokenSet].find((t) => t.name === token.name);
                     if (oldValue) {
-                        if (
-                            typeof oldValue.value === 'string' &&
-                            typeof token.value === 'string' &&
-                            oldValue.value?.toUpperCase() === token.value.toUpperCase()
-                        ) {
+                        if (isEqual(oldValue.value, token.value)) {
                             if (
                                 oldValue.description === token.description ||
                                 (typeof token.description === 'undefined' && oldValue.description === '')

diff --git a/yarn.lock b/yarn.lock
@@ -2125,6 +2125,18 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=
 
+"@types/lodash.isequal@^4.5.5":
+  version "4.5.5"
+  resolved "https://registry.yarnpkg.com/@types/lodash.isequal/-/lodash.isequal-4.5.5.tgz#4fed1b1b00bef79e305de0352d797e9bb816c8ff"
+  integrity sha512-4IKbinG7MGP131wRfceK6W4E/Qt3qssEFLF30LnJbjYiSfHGGRU/Io8YxXrZX109ir+iDETC8hw8QsDijukUVg==
+  dependencies:
+    "@types/lodash" "*"
+
+"@types/lodash@*":
+  version "4.14.176"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.176.tgz#641150fc1cda36fbfa329de603bbb175d7ee20c0"
+  integrity sha512-xZmuPTa3rlZoIbtDUyJKZQimJV3bxCmzMIO2c9Pz9afyDro6kr7R79GwcB6mRhuoPmV2p1Vb66WOJH7F886WKQ==
+
 "@types/minimatch@*":
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
@@ -7039,6 +7051,11 @@ lodash.groupby@^4.6.0:
   resolved "https://registry.yarnpkg.com/lodash.groupby/-/lodash.groupby-4.6.0.tgz#0b08a1dcf68397c397855c3239783832df7403d1"
   integrity sha1-Cwih3PaDl8OXhVwyOXg4Mt90A9E=
 
+lodash.isequal@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
+  integrity sha1-QVxEePK8wwEgwizhDtMib30+GOA=
+
 lodash.isplainobject@^4.0.6:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"