Better typescript support added (#398)

decipher-cs · web-flow · commit fcc8b72f0011 · 2024-08-19T14:41:16.000+05:30
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -42,7 +42,7 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "build-css": "parcel build styles/themes/default.scss --out-dir dist/themes/",
-    "generate-tokens": "node ./scripts/tokenGen/index.js",
+    "generate-tokens": "tsx ./scripts/tokenGen/index.js",
     "bundle-tokens": "rollup --config rollup-tokens.config.js",
     "build-components": "rollup -c --bundleConfigAsCjs --max-old-space-size=8076",
     "copy-components": "mkdirp ./dist/components && cp -r ./dist/temp-cleanup/*js ./dist/components && rimraf dist/temp-cleanup",
@@ -84,14 +84,15 @@
     "@storybook/testing-library": "0.2.2",
     "@testing-library/jest-dom": "6.4.2",
     "@testing-library/react": "14.2.1",
+    "@types/react": "^18.3.1",
     "@typescript-eslint/eslint-plugin": "7.0.0",
     "@typescript-eslint/parser": "6.21.0",
     "autoprefixer": "10.4.15",
     "babel-plugin-module-resolver": "5.0.2",
     "eslint": "8.56.0",
     "eslint-config-google": "0.14.0",
+    "eslint-config-love": "^62.0.0",
     "eslint-config-standard": "17.1.0",
-    "eslint-config-standard-with-typescript": "43.0.1",
     "eslint-plugin-import": "2.29.1",
     "eslint-plugin-n": "16.6.2",
     "eslint-plugin-promise": "6.4.0",
@@ -107,12 +108,13 @@
     "rimraf": "5.0.5",
     "rollup": "4.9.4",
     "rollup-plugin-banner2": "1.2.2",
+    "sass": "^1.77.2",
     "sass-loader": "14.1.1",
     "storybook": "7.4.0",
     "tailwindcss": "3.4.1",
     "ts-jest": "29.1.1",
-    "typescript": "5.4.5",
-    "sass": "^1.77.2"
+    "tsx": "^4.17.0",
+    "typescript": "5.4.5"
   },
   "dependencies": {
     "@floating-ui/react": "^0.26.20",
diff --git a/src/colors/amber.ts b/src/colors/amber.ts
@@ -31,6 +31,6 @@ const amber = {
         1000: '#ffe7b3',
 
     },
-};
+} as const;
 
 export default amber;
diff --git a/src/colors/blue.ts b/src/colors/blue.ts
@@ -30,6 +30,6 @@ const blue = {
         950: '#70b8ff',
         1000: '#c2e6ff',
     },
-};
+} as const;
 
 export default blue;
diff --git a/src/colors/bronze.ts b/src/colors/bronze.ts
@@ -30,6 +30,6 @@ const bronze = {
         1000: '#ede0d9',
 
     },
-};
+} as const;
 
 export default bronze;
diff --git a/src/colors/brown.ts b/src/colors/brown.ts
@@ -31,6 +31,6 @@ const brown = {
         950: '#dbb594',
         1000: '#f2e1ca',
     },
-};
+} as const;
 
 export default brown;
diff --git a/src/colors/crimson.ts b/src/colors/crimson.ts
@@ -27,6 +27,6 @@ const crimson = {
         950: 'hsl(341, 100%, 76.0%)',
         1000: 'hsl(330, 90.0%, 91.0%)',
     },
-};
+} as const;
 
 export default crimson;
diff --git a/src/colors/cyan.ts b/src/colors/cyan.ts
@@ -28,6 +28,6 @@ const cyan = {
         950: '#4ccce6',
         1000: '#b6ecf7',
     },
-};
+} as const;
 
 export default cyan;
diff --git a/src/colors/gold.ts b/src/colors/gold.ts
@@ -29,6 +29,6 @@ const gold = {
         950: '#cbb99f',
         1000: '#e8e2d9',
     },
-};
+} as const;
 
 export default gold;
diff --git a/src/colors/grass.ts b/src/colors/grass.ts
@@ -31,6 +31,6 @@ const grass = {
         1000: '#c2f0c2',
 
     },
-};
+} as const;
 
 export default grass;
diff --git a/src/colors/gray.ts b/src/colors/gray.ts
@@ -27,6 +27,6 @@ const gray = {
         950: 'hsl(0, 0%, 69.5%)',
         1000: 'hsl(0, 0%, 93.5%)',
     },
-};
+} as const;
 
 export default gray;
diff --git a/src/colors/green.ts b/src/colors/green.ts
@@ -29,6 +29,6 @@ const green = {
         950: '#3dd68c',
         1000: '#b1f1cb',
     },
-};
+} as const;
 
 export default green;
diff --git a/src/colors/index.js b/src/colors/index.js
diff --git a/src/colors/index.ts b/src/colors/index.ts
@@ -0,0 +1,68 @@
+import gray from './gray';
+import mauve from './mauve';
+import slate from './slate';
+import sage from './sage';
+import olive from './olive';
+import sand from './sand';
+import tomato from './tomato';
+import red from './red';
+import ruby from './ruby';
+import crimson from './crimson';
+import pink from './pink';
+import plum from './plum';
+import purple from './purple';
+import violet from './violet';
+import iris from './iris';
+import indigo from './indigo';
+import blue from './blue';
+import cyan from './cyan';
+import teal from './teal';
+import jade from './jade';
+import green from './green';
+import grass from './grass';
+import brown from './brown';
+import bronze from './bronze';
+import gold from './gold';
+import sky from './sky';
+import mint from './mint';
+import lime from './lime';
+import yellow from './yellow';
+import amber from './amber';
+import orange from './orange';
+
+const colors = {
+    gray: gray,
+    mauve: mauve,
+    slate: slate,
+    sage: sage,
+    olive: olive,
+    sand: sand,
+    tomato: tomato,
+    red: red,
+    ruby: ruby,
+    crimson: crimson,
+    pink: pink,
+    plum: plum,
+    purple: purple,
+    violet: violet,
+    iris: iris,
+    indigo: indigo,
+    blue: blue,
+    cyan: cyan,
+    teal: teal,
+    jade: jade,
+    green: green,
+    grass: grass,
+    brown: brown,
+    bronze: bronze,
+    gold: gold,
+    sky: sky,
+    mint: mint,
+    lime: lime,
+    yellow: yellow,
+    amber: amber,
+    orange: orange,
+
+} as const;
+
+export default colors;
diff --git a/src/colors/indigo.ts b/src/colors/indigo.ts
@@ -27,6 +27,6 @@ const indigo = {
         950: '#9eb1ff',
         1000: '#d6e1ff',
     },
-};
+} as const;
 
 export default indigo;
diff --git a/src/colors/iris.ts b/src/colors/iris.ts
@@ -28,6 +28,6 @@ const iris = {
         950: '#b1a9ff',
         1000: '#e0dffe',
     },
-};
+} as const;
 
 export default iris;
diff --git a/src/colors/jade.ts b/src/colors/jade.ts
@@ -29,6 +29,6 @@ const jade = {
         950: '#1fd8a4',
         1000: '#adf0d4',
     },
-};
+} as const;
 
 export default jade;
diff --git a/src/colors/lime.ts b/src/colors/lime.ts
@@ -30,6 +30,6 @@ const lime = {
         950: '#bde56c',
         1000: '#e3f7ba',
     },
-};
+} as const;
 
 export default lime;
diff --git a/src/colors/mauve.ts b/src/colors/mauve.ts
@@ -28,6 +28,6 @@ const mauve = {
         950: 'hsl(250, 6.0%, 70.5%)',
         1000: 'hsl(240, 7.0%, 93.8%)',
     },
-};
+} as const;
 
 export default mauve;
diff --git a/src/colors/mint.ts b/src/colors/mint.ts
@@ -30,6 +30,6 @@ const mint = {
         950: '#58d5ba',
         1000: '#c4f5e1',
     },
-};
+} as const;
 
 export default mint;
diff --git a/src/colors/olive.ts b/src/colors/olive.ts
@@ -27,6 +27,6 @@ const olive = {
         950: 'hsl(110, 5.0%, 68.8%)',
         1000: 'hsl(110, 7.0%, 93.0%)',
     },
-};
+} as const;
 
 export default olive;
diff --git a/src/colors/orange.ts b/src/colors/orange.ts
@@ -30,6 +30,6 @@ const orange = {
         950: '#ffa057',
         1000: '#ffe0c2',
     },
-};
+} as const;
 
 export default orange;
diff --git a/src/colors/pink.ts b/src/colors/pink.ts
@@ -28,6 +28,6 @@ const pink = {
         950: 'hsl(318, 90.0%, 75.0%)',
         1000: 'hsl(318, 90.0%, 90.5%)',
     },
-};
+} as const;
 
 export default pink;
diff --git a/src/colors/plum.ts b/src/colors/plum.ts
@@ -27,6 +27,6 @@ const plum = {
         950: 'hsl(290, 70.0%, 74.0%)',
         1000: 'hsl(300, 60.0%, 89.5%)',
     },
-};
+} as const;
 
 export default plum;
diff --git a/src/colors/purple.ts b/src/colors/purple.ts
@@ -27,6 +27,6 @@ const purple = {
         950: 'hsl(270, 90.0%, 78.0%)',
         1000: 'hsl(275, 75.0%, 91.5%)',
     },
-};
+} as const;
 
 export default purple;
diff --git a/src/colors/red.ts b/src/colors/red.ts
@@ -28,6 +28,6 @@ const red = {
         1000: 'hsl(350, 100%, 91.0%)',
 
     },
-};
+} as const;
 
 export default red;
diff --git a/src/colors/ruby.ts b/src/colors/ruby.ts
@@ -27,6 +27,6 @@ const ruby = {
         950: 'hsl(348, 100%, 76.0%)',
         1000: 'hsl(340, 95.0%, 91.0%)',
     },
-};
+} as const;
 
 export default ruby;
diff --git a/src/colors/sage.ts b/src/colors/sage.ts
@@ -27,6 +27,6 @@ const sage = {
         950: 'hsl(155, 5.0%, 68.3%)',
         1000: 'hsl(155, 7.0%, 93.0%)',
     },
-};
+} as const;
 
 export default sage;
diff --git a/src/colors/sand.ts b/src/colors/sand.ts
@@ -27,6 +27,6 @@ const sand = {
         950: 'hsl(60, 5.0%, 68.8%)',
         1000: 'hsl(60, 7.0%, 93.0%)',
     },
-};
+} as const;
 
 export default sand;
diff --git a/src/colors/sky.ts b/src/colors/sky.ts
@@ -29,6 +29,6 @@ const sky = {
         950: '#75c7f0',
         1000: '#c2f3ff',
     },
-};
+} as const;
 
 export default sky;
diff --git a/src/colors/slate.ts b/src/colors/slate.ts
@@ -29,6 +29,6 @@ const slate = {
 
     },
 
-};
+} as const;
 
 export default slate;
diff --git a/src/colors/teal.ts b/src/colors/teal.ts
diff --git a/src/colors/tomato.ts b/src/colors/tomato.ts
diff --git a/src/colors/violet.ts b/src/colors/violet.ts
diff --git a/src/colors/yellow.ts b/src/colors/yellow.ts
diff --git a/src/components/tools/SandboxEditor/SandboxEditor.tsx b/src/components/tools/SandboxEditor/SandboxEditor.tsx
