From 0a7fcd40c196ab72606aa58a50777f7bff7d6294 Mon Sep 17 00:00:00 2001
From: Shadi <TheSisb@users.noreply.github.com>
Date: Wed, 8 Jun 2022 09:32:05 -0500
Subject: [PATCH] fix(token-contrast-checker): fixing the build, also adding it
 to CI (#2453)

* fix(token-contrast-checker): fix build errors on eslint

* chore: add a command to build token-contrast-checker from root

* chore: update codesandbox ci with 2 more environments and fix warns

* fix: codesandbox ci.json now auto-generates correctly

* chore: eslint fixes
---
 .codesandbox/ci.json                                        | 5 +++--
 .storybook/main.js                                          | 1 +
 package.json                                                | 1 +
 packages/paste-core/core-bundle/tools/constants.ts          | 4 ++--
 packages/paste-token-contrast-checker/.eslintrc.json        | 4 ++++
 packages/paste-token-contrast-checker/src/App.tsx           | 1 -
 .../paste-token-contrast-checker/src/components/SideBar.tsx | 2 ++
 .../src/components/ThemeSelector.tsx                        | 6 +++++-
 .../paste-token-contrast-checker/src/reportWebVitals.ts     | 1 -
 9 files changed, 18 insertions(+), 7 deletions(-)
 create mode 100644 packages/paste-token-contrast-checker/.eslintrc.json

diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
index 57901080c6..a89a9de051 100644
--- a/.codesandbox/ci.json
+++ b/.codesandbox/ci.json
@@ -1,6 +1,6 @@
 {
   "buildCommand": "build",
-  "node": "12",
+  "node": "16",
   "packages": [
     "/packages/paste-icons",
     "/packages/paste-core/core-bundle",
@@ -77,6 +77,7 @@
     "/packages/paste-utils"
   ],
   "sandboxes": [
-    "/packages/paste-nextjs-template"
+    "/packages/paste-nextjs-template",
+    "/packages/paste-token-contrast-checker"
   ]
 }
\ No newline at end of file
diff --git a/.storybook/main.js b/.storybook/main.js
index 058459ecf0..9851d8b008 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -38,6 +38,7 @@ module.exports = {
             'packages/paste-nextjs-template/**/*',
             'packages/paste-website/**/*',
             'packages/paste-cra-template/template/**/*',
+            'packages/paste-token-contrast-checker/**/*',
             '**/__tests__/**',
           ],
         },
diff --git a/package.json b/package.json
index 62b27701b6..10d8e1f89f 100644
--- a/package.json
+++ b/package.json
@@ -55,6 +55,7 @@
     "build:website": "yarn workspace @twilio-paste/website build",
     "build:theme-designer": "yarn workspace @twilio-paste/theme-designer build",
     "build:nextjs-template": "yarn workspace @twilio-paste/nextjs-template build",
+    "build:contrast-checking": "yarn workspace @twilio-paste/token-contrast-checker build",
     "build:props": "lerna run build:props --ignore @twilio-paste/website --concurrency 2",
     "pre-push": "concurrently \"yarn:lint\" \"yarn:test\" \"yarn:prettier\" \"yarn:type-check\"",
     "prerelease": "yarn build && yarn lint && yarn test",
diff --git a/packages/paste-core/core-bundle/tools/constants.ts b/packages/paste-core/core-bundle/tools/constants.ts
index b5059f187a..e09db761ba 100644
--- a/packages/paste-core/core-bundle/tools/constants.ts
+++ b/packages/paste-core/core-bundle/tools/constants.ts
@@ -14,9 +14,9 @@ const BLOCKLIST = [
 
 const BASE_CODESANDBOX_CI = {
   buildCommand: 'build',
-  node: '12',
+  node: '16',
   packages: ['/packages/paste-icons', '/packages/paste-core/core-bundle'],
-  sandboxes: ['/packages/paste-nextjs-template'],
+  sandboxes: ['/packages/paste-nextjs-template', '/packages/paste-token-contrast-checker'],
 };
 
 const PACKAGES_ROOT_PATH = join(__dirname, '../../../..');
diff --git a/packages/paste-token-contrast-checker/.eslintrc.json b/packages/paste-token-contrast-checker/.eslintrc.json
new file mode 100644
index 0000000000..9acc25aa10
--- /dev/null
+++ b/packages/paste-token-contrast-checker/.eslintrc.json
@@ -0,0 +1,4 @@
+{
+  "root": true,
+  "parser": "@typescript-eslint/parser"
+}
diff --git a/packages/paste-token-contrast-checker/src/App.tsx b/packages/paste-token-contrast-checker/src/App.tsx
index 13d7f6f24a..0b178bd80d 100644
--- a/packages/paste-token-contrast-checker/src/App.tsx
+++ b/packages/paste-token-contrast-checker/src/App.tsx
@@ -27,5 +27,4 @@ const App: React.FC = ({children}) => {
   );
 };
 
-// eslint-disable-next-line import/no-default-export
 export default App;
diff --git a/packages/paste-token-contrast-checker/src/components/SideBar.tsx b/packages/paste-token-contrast-checker/src/components/SideBar.tsx
index 5d645683e6..ee383d80e7 100644
--- a/packages/paste-token-contrast-checker/src/components/SideBar.tsx
+++ b/packages/paste-token-contrast-checker/src/components/SideBar.tsx
@@ -60,6 +60,7 @@ export const SideBar: React.FC = () => {
       {textContrastRating.map((rating) => {
         return (
           <TokenPairRating
+            key={`text-${rating.background}-${rating.foreground}`}
             contrast={rating.contrast}
             background={rating.background}
             foreground={rating.foreground}
@@ -78,6 +79,7 @@ export const SideBar: React.FC = () => {
       {uiControlContrastRating.map((rating) => {
         return (
           <TokenPairRating
+            key={`control-${rating.background}-${rating.foreground}`}
             contrast={rating.contrast}
             background={rating.background}
             foreground={rating.foreground}
diff --git a/packages/paste-token-contrast-checker/src/components/ThemeSelector.tsx b/packages/paste-token-contrast-checker/src/components/ThemeSelector.tsx
index 4860ec31a3..bb57c28dcb 100644
--- a/packages/paste-token-contrast-checker/src/components/ThemeSelector.tsx
+++ b/packages/paste-token-contrast-checker/src/components/ThemeSelector.tsx
@@ -15,7 +15,11 @@ export const ThemeSelector: React.FC<ThemeSelectorProps> = ({onChange, themes, v
       <Label htmlFor={selectID}>Selected Theme</Label>
       <Select id={selectID} value={value} onChange={onChange}>
         {themes.map((themeName) => {
-          return <Option value={ThemeVariants[themeName]}>{ThemeVariants[themeName]}</Option>;
+          return (
+            <Option key={themeName} value={ThemeVariants[themeName]}>
+              {ThemeVariants[themeName]}
+            </Option>
+          );
         })}
       </Select>
     </>
diff --git a/packages/paste-token-contrast-checker/src/reportWebVitals.ts b/packages/paste-token-contrast-checker/src/reportWebVitals.ts
index 5a929d4168..2364639bcc 100644
--- a/packages/paste-token-contrast-checker/src/reportWebVitals.ts
+++ b/packages/paste-token-contrast-checker/src/reportWebVitals.ts
@@ -15,5 +15,4 @@ const reportWebVitals = (onPerfEntry?: ReportHandler): void => {
   }
 };
 
-// eslint-disable-next-line import/no-default-export
 export default reportWebVitals;