chore(tools): convert color-system to TypeScript (#44970)

* Change file extension

* Move the files to their own folder

* Fix typecheck

tools/ui-components/src/color-system/color-system.tsx

@@ -1,19 +1,26 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 
-import colorList from './colors.css';
+import colorList from '../colors.css';
+import { Color, ColorList, PaletteProps } from './types';
 
 // ---------------------------------------------------------- //
 //                      HELPER FUNCTIONS                      //
 // ---------------------------------------------------------- //
-// Transform colorList from an object to an array of objects
-const transformedColorList = Object.keys(colorList).map(colorName => ({
-  label: colorName.replace('--', ''),
-  value: colorList[colorName]
-}));
+/**
+ * Transform colorList from an object to an array of objects
+ * @example
+ * Input: { '--blue10': 'var(--blue10)' }
+ * Output: [{ label: 'blue10', value: 'var(--blue10)' }]
+ */
+const transformedColorList = Object.keys(colorList as ColorList).map(
+  colorName => ({
+    label: colorName.replace('--', ''),
+    value: (colorList as ColorList)[colorName]
+  })
+);
 
 // Get the background and text color values of each palette item
-const getPaletteItemStyle = color => {
+const getPaletteItemStyle = (color: Color) => {
   const itemTextColor = color.label.substring(color.label.length - 2);
 
   return {
@@ -24,13 +31,13 @@ const getPaletteItemStyle = color => {
   };
 };
 
-const getPaletteByColorName = name =>
+const getPaletteByColorName = (name: string) =>
   transformedColorList.filter(color => color.label.includes(name));
 
 // ---------------------------------------------------------- //
 //                         COMPONENTS                         //
 // ---------------------------------------------------------- //
-const Palette = ({ colors }) => {
+const Palette = ({ colors }: PaletteProps) => {
   return (
     <div className='inline-flex flex-col m-4 w-3/12'>
       {colors.map(color => (
@@ -46,15 +53,6 @@ const Palette = ({ colors }) => {
   );
 };
 
-Palette.propTypes = {
-  colors: PropTypes.arrayOf(
-    PropTypes.shape({
-      label: PropTypes.string,
-      value: PropTypes.string
-    })
-  )
-};
-
 export const AllPalettes = () => {
   return (
     <>

tools/ui-components/src/color-system/types.ts

@@ -0,0 +1,10 @@
+export interface Color {
+  label: string;
+  value: string;
+}
+
+export interface PaletteProps {
+  colors: Color[];
+}
+
+export type ColorList = Record<string, string>;

tools/ui-components/src/colors.css

@@ -43,6 +43,42 @@
   --red90: #850000;
 }
 
+/* Export the variables in order to use them on the Color System Storybook page */
+:export {
+  --gray00: var(--gray00);
+  --gray05: var(--gray05);
+  --gray10: var(--gray10);
+  --gray15: var(--gray15);
+  --gray45: var(--gray45);
+  --gray75: var(--gray75);
+  --gray80: var(--gray80);
+  --gray85: var(--gray85);
+  --gray90: var(--gray90);
+
+  --purple10: var(--purple10);
+  --purple50: var(--purple50);
+  --purple90: var(--purple90);
+
+  --yellow10: var(--yellow10);
+  --yellow20: var(--yellow20);
+  --yellow50: var(--yellow50);
+  --yellow90: var(--yellow90);
+
+  --blue10: var(--blue10);
+  --blue20: var(--blue20);
+  --blue30: var(--blue30);
+  --blue50: var(--blue50);
+  --blue90: var(--blue90);
+
+  --green10: var(--green10);
+  --green90: var(--green90);
+
+  --red10: var(--red10);
+  --red20: var(--red20);
+  --red80: var(--red80);
+  --red90: var(--red90);
+}
+
 html,
 div.light {
   --default-foreground-primary: var(--gray90);

tools/ui-components/src/declarations.d.ts

@@ -0,0 +1 @@
+declare module '*.css';