feat(storybook): automate component design tokens (#140)

nl-design-system · Jul 5, 2024 · 8822635 · 8822635
1 parent 101b5c0
commit 8822635
Show file tree

Hide file tree

Showing 15 changed files with 741 additions and 76 deletions.
diff --git a/packages/storybook/package.json b/packages/storybook/package.json
@@ -58,6 +58,7 @@
     "vite": "5.2.12"
   },
   "dependencies": {
+    "@nl-design-system-unstable/theme-toolkit": "1.0.0-alpha.21",
     "@storybook/addon-controls": "8.1.5",
     "@storybook/blocks": "8.1.5"
   },

diff --git a/packages/storybook/src/utils/createDesignTokensStory.tsx b/packages/storybook/src/utils/createDesignTokensStory.tsx
@@ -0,0 +1,45 @@
+// @ts-expect-error no definition file
+import { ComponentTokensSection } from '@nl-design-system-unstable/theme-toolkit';
+import type { StoryObj } from '@storybook/react';
+
+type DesignToken = {
+  comment?: string;
+  name?: string;
+  path?: string;
+  value: string | number;
+};
+
+type Props = {
+  component: string;
+  definition: DesignTokenTree;
+  tokens: string | number;
+};
+
+interface DesignTokenTree {
+  [index: string]: DesignToken | DesignTokenTree;
+}
+
+export const createDesignTokensStory = (meta: any): StoryObj => {
+  const designTokenStory: StoryObj<Props> = {
+    args: {
+      tokens: meta.parameters.tokens,
+      definition: meta.parameters.tokensDefinition,
+      component: meta.parameters.tokensPrefix,
+    },
+    parameters: {
+      chromatic: {
+        disableSnapShot: true,
+      },
+      docs: {
+        source: {
+          code: '',
+        },
+      },
+    },
+    render: (({ tokens, definition, component }: Props) => {
+      return <ComponentTokensSection tokens={tokens} definition={definition} component={component} />;
+    }) as any,
+  };
+
+  return designTokenStory;
+};
diff --git a/packages/storybook/src/utils/index.ts b/packages/storybook/src/utils/index.ts
@@ -0,0 +1,2 @@
+export * from './createDesignTokensStory';
+export * from './createVisualRegressionStory';
diff --git a/packages/storybook/src/web-components/button-login/button-login.stories.tsx b/packages/storybook/src/web-components/button-login/button-login.stories.tsx
@@ -1,19 +1,26 @@
 /* @license CC0-1.0 */
 
+import tokens from '@lux/design-tokens/dist/index.json';
 import { LuxButtonLogin as ButtonLogin } from '@lux/web-components-react';
 import type { JSX } from '@lux/web-components-stencil';
 import type { Meta, StoryObj } from '@storybook/react';
-import { PropsWithoutRef } from 'react';
+import { type PropsWithoutRef } from 'react';
+import tokensDefinition from './tokens.json';
 import { VisualAgents } from './visual/Agents';
 import { VisualStates } from './visual/States';
-import { createVisualRegressionStory, VisualRegressionWrapper } from '../../utils/createVisualRegressionStory';
+import { createDesignTokensStory, createVisualRegressionStory, VisualRegressionWrapper } from '../../utils/';
 
 const LuxButtonLogin = (props: PropsWithoutRef<JSX.LuxButtonLogin>) => <ButtonLogin {...props} />;
 
 const meta = {
   title: 'Web Components/Button login',
   id: 'web-components-button-login',
   component: LuxButtonLogin,
+  parameters: {
+    tokens,
+    tokensPrefix: 'lux-button-login',
+    tokensDefinition,
+  },
   argTypes: {
     label: {
       type: 'string',
@@ -76,6 +83,8 @@ export const DarkTheme: Story = {
   },
 };
 
+export const DesignTokens = createDesignTokensStory(meta);
+
 export const Visual = createVisualRegressionStory(() => (
   <>
     <h4 className="lux-heading-3">Light</h4>

diff --git a/packages/storybook/src/web-components/button-login/tokens.json b/packages/storybook/src/web-components/button-login/tokens.json
@@ -0,0 +1,164 @@
+{
+  "lux": {
+    "button-login": {
+      "active": {
+        "background-color": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<color>",
+              "inherits": true
+            }
+          }
+        },
+        "border-color": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<color>",
+              "inherits": true
+            }
+          }
+        },
+        "color": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<color>",
+              "inherits": true
+            }
+          }
+        }
+      },
+      "background-color": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<color>",
+            "inherits": true
+          }
+        }
+      },
+      "border-color": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<color>",
+            "inherits": true
+          }
+        }
+      },
+      "border-radius": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          }
+        }
+      },
+      "border-width": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          }
+        }
+      },
+      "color": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<color>",
+            "inherits": true
+          }
+        }
+      },
+      "hover": {
+        "background-color": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<color>",
+              "inherits": true
+            }
+          }
+        },
+        "border-color": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<color>",
+              "inherits": true
+            }
+          }
+        },
+        "color": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<color>",
+              "inherits": true
+            }
+          }
+        }
+      },
+      "icon": {
+        "size": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<length>",
+              "inherits": true
+            }
+          }
+        }
+      },
+      "margin-inline": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          }
+        }
+      },
+      "min-block-size": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          }
+        }
+      },
+      "min-inline-size": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          }
+        }
+      },
+      "padding-block-end": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          }
+        }
+      },
+      "padding-block-start": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          }
+        }
+      },
+      "padding-inline-end": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          }
+        }
+      },
+      "padding-inline-start": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/storybook/tsconfig.json b/packages/storybook/tsconfig.json
@@ -2,6 +2,7 @@
   "compilerOptions": {
     "jsx": "react-jsx",
     "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
     "skipLibCheck": true
   },
   "extends": "../../tsconfig.json",