fix same name tokens collision once they are added to TOKEN_COLUMNS

Localitos · Sep 18, 2024 · 8738fb2 · 8738fb2
1 parent e3f392c
commit 8738fb2
Show file tree

Hide file tree

Showing 8 changed files with 146 additions and 102 deletions.
diff --git a/packages/design-tokens/docs/borders.mdx b/packages/design-tokens/docs/borders.mdx
@@ -11,12 +11,12 @@ import { TokensTable } from "./components/TokensTable";
 
 ## Border Styles
 
-<TokensTable data={borderStyleTokens} />
+<TokensTable data={borderStyleTokens} name="borderStyle" />
 
 ## Border Widths
 
-<TokensTable data={borderWidthTokens} />
+<TokensTable data={borderWidthTokens} name="borderWidth" />
 
 ## Border Radii
 
-<TokensTable data={borderRadiiTokens} />
+<TokensTable data={borderRadiiTokens} name="borderRadius" />
diff --git a/packages/design-tokens/docs/colors.mdx b/packages/design-tokens/docs/colors.mdx
@@ -7,4 +7,4 @@ import { TokensTable } from "./components/TokensTable";
 
 <br />
 
-<TokensTable data={colorTokens} />
+<TokensTable data={colorTokens} name="color" />
diff --git a/packages/design-tokens/docs/components/TokensTable.tsx b/packages/design-tokens/docs/components/TokensTable.tsx
@@ -18,15 +18,17 @@ import { TokenName } from "./TokenName";
 
 export const TokensTable = ({
   data,
+  name,
 }: {
   data: Record<string, Record<string, Token>>;
+  name: string;
 }): JSX.Element => {
   const tokenNames: Array<string> = filter(
     keys(data),
     (item) => item !== "default",
   );
   const columnGroups = map(tokenNames, (token) => {
-    return TOKEN_COLUMNS[token];
+    return TOKEN_COLUMNS[name][token];
   });
   const rowGroups: TokenRow[][] = map(columnGroups, (columns, index) => {
     const token = tokenNames[index];

diff --git a/packages/design-tokens/docs/components/constants.tsx b/packages/design-tokens/docs/components/constants.tsx
@@ -24,7 +24,7 @@ import {
   hexToRgb,
   hexToHsla,
 } from "../utils";
-import { Box } from "../../../components/src/primitives/Box";
+import { Box, BoxProps } from "../../../components/src/primitives/Box";
 import { Text } from "../../../components/src/primitives/Text";
 import { TokenColumn } from "../types/TokenColumn";
 import { Token } from "../types/Token";
@@ -35,7 +35,9 @@ const TEXT_PREVIEW = (
 );
 
 type TokenColumnsProps = {
-  [key: string]: Array<TokenColumn>;
+  [category: string]: {
+    [key: string]: Array<TokenColumn>;
+  };
 };
 
 const getTokenFromVariable = (tokens: unknown, token: Token): string => {
@@ -99,6 +101,37 @@ const COLORS = reduce(
 
 const FONT_SIZE = reduce(
   filter(keys(fontSizeTokens), (item) => item !== "default"),
+  (acc, prefix) => {
+    const columns = [
+      {
+        name: "Name",
+        transform: getTokenNameFromTuple(prefix),
+      },
+      { name: "Weight", transform: getTokenValue },
+      { name: "Rems", transform: getTokenValue },
+      {
+        name: "Preview",
+        transform: createPreview({
+          prefix,
+          attribute: "fontSize",
+          children: TEXT_PREVIEW,
+          componentProps: {
+            lineHeight: "1" as BoxProps["lineHeight"],
+          },
+        }),
+      },
+    ];
+
+    return {
+      ...acc,
+      [prefix]: columns,
+    };
+  },
+  {},
+);
+
+const FONT_WEIGHT = reduce(
+  filter(keys(fontWeightTokens), (item) => item !== "default"),
   (acc, prefix) => {
     const columns = [
       {
@@ -165,97 +198,106 @@ const SPACE = reduce(
 );
 
 export const TOKEN_COLUMNS: TokenColumnsProps = {
-  [getTokenKey(borderRadiiTokens)]: [
-    {
-      name: "Name",
-      transform: getTokenName(borderRadiiTokens),
-    },
-    { name: "Pixels", transform: getTokenValue },
-    {
-      name: "Preview",
-      transform: createPreview({
-        prefix: getTokenKey(borderRadiiTokens),
-        attribute: "borderRadius",
-        componentProps: {
-          borderStyle: "borderStyleSolid",
-          w: "50px",
-          h: "50px",
-        },
-        overrideProps: {
-          pill: {
-            h: "30px",
+  borderRadius: {
+    [getTokenKey(borderRadiiTokens)]: [
+      {
+        name: "Name",
+        transform: getTokenName(borderRadiiTokens),
+      },
+      { name: "Pixels", transform: getTokenValue },
+      {
+        name: "Preview",
+        transform: createPreview({
+          prefix: getTokenKey(borderRadiiTokens),
+          attribute: "borderRadius",
+          componentProps: {
+            borderStyle: "borderStyleSolid",
+            w: "50px",
+            h: "50px",
+          },
+          overrideProps: {
+            pill: {
+              h: "30px",
+            },
           },
-        },
-      }),
-    },
-  ],
-  [getTokenKey(borderWidthTokens)]: [
-    {
-      name: "Name",
-      transform: getTokenName(borderWidthTokens),
-    },
-    { name: "Pixels", transform: getTokenValue },
-    {
-      name: "Preview",
-      transform: createPreview({
-        prefix: getTokenKey(borderWidthTokens),
-        attribute: "borderWidth",
-        componentProps: {
-          borderStyle: "borderStyleSolid",
-          w: "50px",
-          h: "50px",
-        },
-      }),
-    },
-  ],
-  [getTokenKey(borderStyleTokens)]: [
-    {
-      name: "Name",
-      transform: getTokenName(borderStyleTokens),
-    },
-    { name: "Style", transform: getTokenValue },
-    {
-      name: "Preview",
-      transform: createPreview({
-        prefix: getTokenKey(borderStyleTokens),
-        attribute: "borderStyle",
-        componentProps: {
-          w: "50px",
-          h: "50px",
-        },
-      }),
-    },
-  ],
+        }),
+      },
+    ],
+  },
 
-  [getTokenKey(iconSizeTokens)]: [
-    {
-      name: "Name",
-      transform: getTokenName(iconSizeTokens),
-    },
-    { name: "Pixels", transform: getTokenComment },
-    { name: "Rems", transform: getTokenValue },
-    {
-      name: "Preview",
-      transform: createPreview({
-        prefix: getTokenKey(iconSizeTokens),
-        component: Icon,
-        componentProps: {
-          decorative: true,
-          display: "flex",
-          icon: "book-open",
-        },
-        attribute: "size",
-        children: (
-          <Box.div
-            backgroundColor="colorBackgroundPrimaryWeakest"
-            h="50px"
-            w="50px"
-          />
-        ),
-      }),
-    },
-  ],
-  ...SPACE,
-  ...FONT_SIZE,
-  ...COLORS,
+  borderWidth: {
+    [getTokenKey(borderWidthTokens)]: [
+      {
+        name: "Name",
+        transform: getTokenName(borderWidthTokens),
+      },
+      { name: "Pixels", transform: getTokenValue },
+      {
+        name: "Preview",
+        transform: createPreview({
+          prefix: getTokenKey(borderWidthTokens),
+          attribute: "borderWidth",
+          componentProps: {
+            borderStyle: "borderStyleSolid",
+            w: "50px",
+            h: "50px",
+          },
+        }),
+      },
+    ],
+  },
+  borderStyle: {
+    [getTokenKey(borderStyleTokens)]: [
+      {
+        name: "Name",
+        transform: getTokenName(borderStyleTokens),
+      },
+      { name: "Style", transform: getTokenValue },
+      {
+        name: "Preview",
+        transform: createPreview({
+          prefix: getTokenKey(borderStyleTokens),
+          attribute: "borderStyle",
+          componentProps: {
+            w: "50px",
+            h: "50px",
+          },
+        }),
+      },
+    ],
+  },
+  iconSize: {
+    [getTokenKey(iconSizeTokens)]: [
+      {
+        name: "Name",
+        transform: getTokenName(iconSizeTokens),
+      },
+      { name: "Pixels", transform: getTokenComment },
+      { name: "Rems", transform: getTokenValue },
+      {
+        name: "Preview",
+        transform: createPreview({
+          prefix: getTokenKey(iconSizeTokens),
+          component: Icon,
+          componentProps: {
+            decorative: true,
+            display: "flex",
+            icon: "book-open",
+          },
+          attribute: "size",
+          children: (
+            <Box.div
+              backgroundColor="colorBackgroundPrimaryWeakest"
+              h="50px"
+              w="50px"
+            />
+          ),
+        }),
+      },
+    ],
+  },
+  space: { ...SPACE },
+  fontSize: { ...FONT_SIZE },
+  fontWeight: { ...FONT_WEIGHT },
+  color: { ...COLORS },
 };
diff --git a/packages/design-tokens/docs/font-sizes.mdx b/packages/design-tokens/docs/font-sizes.mdx
@@ -7,4 +7,4 @@ import * as fontSizeTokens from "../src/tokens/font-size.tokens.json";
 
 <br />
 
-<TokensTable data={fontSizeTokens} />
+<TokensTable data={fontSizeTokens} name="fontSize" />
diff --git a/packages/design-tokens/docs/font-weights.mdx b/packages/design-tokens/docs/font-weights.mdx
@@ -7,4 +7,4 @@ import * as fontWeightTokens from "../src/tokens/font-weight.tokens.json";
 
 <br />
 
-<TokensTable data={fontWeightTokens} />
+<TokensTable data={fontWeightTokens} name="fontWeight" />
diff --git a/packages/design-tokens/docs/icon-sizes.mdx b/packages/design-tokens/docs/icon-sizes.mdx
@@ -7,4 +7,4 @@ import * as iconSizeTokens from "../src/tokens/size.tokens.json";
 
 <br />
 
-<TokensTable data={iconSizeTokens} />
+<TokensTable data={iconSizeTokens} name="iconSize" />
diff --git a/packages/design-tokens/docs/spacing.mdx b/packages/design-tokens/docs/spacing.mdx
@@ -7,4 +7,4 @@ import * as spaceTokens from "../src/tokens/space.tokens.json";
 
 <br />
 
-<TokensTable data={spaceTokens} />
+<TokensTable data={spaceTokens} name="space" />