fix(token-contrast-checker): fixing the build, also adding it to CI

.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"
   ]
 }

.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__/**',
           ],
         },

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",

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, '../../../..');

packages/paste-token-contrast-checker/.eslintrc.json

@@ -0,0 +1,4 @@
+{
+  "root": true,
+  "parser": "@typescript-eslint/parser"
+}

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;

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}

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>
     </>

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;