fix(docs): change TOKEN_COLUMNS to avoid conflicting tokens with the same name

.changeset/weak-moons-call.md

@@ -0,0 +1,6 @@
+---
+"@localyze-pluto/design-tokens": patch
+"@localyze-pluto/components": patch
+---
+
+Fix storybook pages by avoiding wrong parsed token names and name conflict

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

packages/design-tokens/docs/colors.mdx

@@ -7,4 +7,4 @@ import { TokensTable } from "./components/TokensTable";
 
 <br />
 
-<TokensTable data={colorTokens} />
+<TokensTable data={colorTokens} name="color" />

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];
@@ -53,7 +55,7 @@ export const TokensTable = ({
             return (
               <Tr key={tokenName}>
                 {map(row, (cell, index) => {
-                  const column = columnGroups[0][index].name;
+                  const column = columnGroups[0][index]?.name;
                   return (
                     <Td key={`${tokenName}${column}`}>
                       {index === 0 ? (

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 => {
@@ -105,7 +107,7 @@ const FONT_SIZE = reduce(
         name: "Name",
         transform: getTokenNameFromTuple(prefix),
       },
-      { name: "Pixels", transform: getTokenComment },
+      { name: "Weight", transform: getTokenValue },
       { name: "Rems", transform: getTokenValue },
       {
         name: "Preview",
@@ -114,11 +116,7 @@ const FONT_SIZE = reduce(
           attribute: "fontSize",
           children: TEXT_PREVIEW,
           componentProps: {
-            p: "space40",
-            textOverflow: "ellipsis",
-            whiteSpace: "nowrap",
-            overflow: "hidden",
-            maxWidth: "600px",
+            lineHeight: "1" as BoxProps["lineHeight"],
           },
         }),
       },
@@ -132,6 +130,34 @@ const FONT_SIZE = reduce(
   {},
 );
 
+const FONT_WEIGHT = reduce(
+  filter(keys(fontWeightTokens), (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: getTokenKey(fontWeightTokens),
+          attribute: "fontWeight",
+          children: TEXT_PREVIEW,
+        }),
+      },
+    ];
+
+    return {
+      ...acc,
+      [prefix]: columns,
+    };
+  },
+  {},
+);
+
 const SPACE = reduce(
   filter(keys(spaceTokens), (item) => item !== "default"),
   (acc, prefix) => {
@@ -172,112 +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"
-          />
-        ),
-      }),
-    },
-  ],
-  [getTokenKey(fontWeightTokens)]: [
-    {
-      name: "Name",
-      transform: getTokenName(fontWeightTokens),
-    },
-    { name: "Weight", transform: getTokenValue },
-    {
-      name: "Preview",
-      transform: createPreview({
-        prefix: getTokenKey(fontWeightTokens),
-        attribute: "fontWeight",
-        children: TEXT_PREVIEW,
-      }),
-    },
-  ],
-  ...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 },
 };

packages/design-tokens/docs/components/createPreview.tsx

@@ -29,7 +29,7 @@ export const createPreview =
   ([tokenName, token]: TokenTuple): JSX.Element => {
     const tokenProps = overrideProps[token.value];
     const normalizedSuffix = replace(
-      upperFirst(replace(tokenName, "-", "")),
+      upperFirst(replace(camelCase(tokenName), "-", "")),
       "Negative",
       "",
     );

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

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

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

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

packages/design-tokens/docs/utils/getTokenNameFromTuple.ts

@@ -8,5 +8,5 @@ type TransformFn = (tuple: TokenTuple) => string;
 export const getTokenNameFromTuple =
   (prefix: string): TransformFn =>
   ([tokenName]: TokenTuple) => {
-    return `${camelCase(prefix)}${upperFirst(replace(tokenName, "-", ""))}`;
+    return `${camelCase(prefix)}${upperFirst(replace(camelCase(tokenName), "-", ""))}`;
   };