feat(storybook): add tokens documentation viewer

.eslintrc.json

@@ -1,45 +1,57 @@
 {
-    "extends": [
-      "react-app"
+  "extends": [
+    "react-app"
+  ],
+  "rules": {
+    "import/no-anonymous-default-export": 0,
+    "no-console": "error",
+    "no-debugger": "error",
+    "array-bracket-newline": "error",
+    "array-bracket-spacing": "error",
+    "array-callback-return": "error",
+    "arrow-body-style": "error",
+    "arrow-spacing": "error",
+    "block-scoped-var": "error",
+    "block-spacing": "error",
+    "brace-style": "error",
+    "callback-return": "error",
+    "camelcase": "error",
+    "no-dupe-else-if": "error",
+    "no-dupe-keys": "error",
+    "no-duplicate-case": "error",
+    "no-duplicate-imports": "error",
+    "no-unneeded-ternary": "error",
+    "no-unreachable": "error",
+    "no-unsafe-finally": "error",
+    "no-unsafe-negation": "error",
+    "no-unused-expressions": "error",
+    "no-unused-labels": "error",
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "error"
     ],
-    "rules": {
-      "no-console": "error",
-      "no-debugger": "error",
-      "array-bracket-newline": "error",
-      "array-bracket-spacing": "error",
-      "array-callback-return": "error",
-      "arrow-body-style": "error",
-      "arrow-spacing": "error",
-      "block-scoped-var": "error",
-      "block-spacing": "error",
-      "brace-style": "error",
-      "callback-return": "error",
-      "camelcase": "error",
-      "no-dupe-else-if": "error",
-      "no-dupe-keys": "error",
-      "no-duplicate-case": "error",
-      "no-duplicate-imports": "error",
-      "no-unneeded-ternary": "error",
-      "no-unreachable": "error",
-      "no-unsafe-finally": "error",
-      "no-unsafe-negation": "error",
-      "no-unused-expressions": "error",
-      "no-unused-labels": "error",
-      "no-unused-vars": "off",
-      "@typescript-eslint/no-unused-vars": ["error"],
-      "no-use-before-define": "off",
-      "no-useless-call": "error",
-      "no-useless-catch": "error",
-      "no-useless-computed-key": "error",
-      "no-useless-concat": "error",
-      "no-useless-constructor": "error",
-      "no-useless-escape": "error",
-      "no-useless-rename": "error",
-      "no-useless-return": "error",
-      "no-var": "error",
-      "quotes": [2, "single", { "avoidEscape": true }],
-      "semi": [2, "always"],
-      // turning off the following
-      "react-hooks/exhaustive-deps": "off"
-    }
-  }
+    "no-use-before-define": "off",
+    "no-useless-call": "error",
+    "no-useless-catch": "error",
+    "no-useless-computed-key": "error",
+    "no-useless-concat": "error",
+    "no-useless-constructor": "error",
+    "no-useless-escape": "error",
+    "no-useless-rename": "error",
+    "no-useless-return": "error",
+    "no-var": "error",
+    "quotes": [
+      2,
+      "single",
+      {
+        "avoidEscape": true
+      }
+    ],
+    "semi": [
+      2,
+      "always"
+    ],
+    // turning off the following
+    "react-hooks/exhaustive-deps": "off"
+  }
+}

core/storybook/TokensDecorator.css

@@ -0,0 +1,33 @@
+._tokens-button {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  font-size: 0.7rem;
+  box-sizing: border-box;
+  background: lightblue;
+  border: 1px solid;
+  padding: 0.6rem;
+  z-index: 3;
+}
+
+._tokens-table {
+  position: fixed;
+  z-index: 2;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: white;
+  text-align: left;
+  overflow: auto;
+}
+
+._tokens-table td,
+._tokens-table th {
+  box-sizing: border-box;
+  padding: 0.3rem 0.7rem;
+}
+
+._tokens-table td {
+  border-top: 1px solid #e2e2e2;
+}

core/storybook/TokensDecorator.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import './TokensDecorator.css';
+import '../../dist/design-system/index.css';
+
+const TokensDecorator = (props) => {
+  const tokenRegex = /var\(--dcx-[-_#:,\w\s]*\)/gm;
+  const matches = String(props.style).match(tokenRegex);
+  const pairs = matches.map(match => {
+    const parsedMatch = match.replace(/^var\(/, '').replace(/\)$/, '');
+    const parts = parsedMatch.split(',');
+    const [key, ...defaultValue] = parts;
+    return [key, defaultValue.join(',')];
+  });
+
+  const [isTokensVisible, setIsTokensVisible] = React.useState(false);
+
+  return (
+    <div>
+      {isTokensVisible && (
+        <div className='_tokens-table'>
+          <table className='foo'>
+            <tr>
+              <th>Token</th>
+              <th>Default Value</th>
+            </tr>
+            {pairs.map(pair => (
+              <tr>
+                <td>{pair[0]}</td>
+                <td>{pair[1]}</td>
+              </tr>
+            ))}
+          </table>
+        </div>
+      )}
+      <button
+        className='_tokens-button'
+        onClick={() => setIsTokensVisible(!isTokensVisible)}
+      >
+        Toggle Available Tokens
+      </button>
+      {props.children}
+    </div>
+  );
+};
+
+export default TokensDecorator;

src/design-system/tokens.json

@@ -104,6 +104,12 @@
   "font-formcontrol_label-line-height-floating": "16px",
   "font-formcontrol_label-size": "16px",
   "font-formcontrol_label-size-floating": "14px",
+  "font-size-body": "16px",
+  "font-size-formcontrol_label": "16px",
+  "font-size-paragraph": "12px",
+  "font-weight-body": "normal",
+  "font-weight-formcontrol_label": "normal",
+  "font-weight-paragraph": "bold",
   "spacing-x-action": "8px",
   "spacing-x-action_label": "6px",
   "spacing-x-formcontrol": "15px",

stories/Button/design-system/AccessibleTheme.stories.js

@@ -1,8 +1,9 @@
+/* eslint-disable import/no-webpack-loader-syntax */
 import { Button } from '../../../src/button';
 import style from '!raw-loader!../../themes/accessible.theme.css';
 import { LiveProvider, LiveEditor } from 'react-live';
-import { getRootStylesByClass } from '../../Utils/getRootStylesByClass';
 import { SVG_EXAMPLE } from '../helpers/svg.example';
+import { StorybookUtils } from '../../../core/storybook/StorybookUtils';
 
 /**
  * This a theme aimed at easing the vizualization of the different elements of the component in order to improve the experience for people that have visual impairments.
@@ -36,7 +37,7 @@ export const ShowCase = {
   },
   render: () => (
     <LiveProvider
-      code={getRootStylesByClass(style, '.dcx-button')}
+      code={StorybookUtils.getThemeCode('dcx-button', style)}
       disabled={true}
       language="css"
     >

stories/Button/design-system/DarkTheme.stories.js

@@ -1,8 +1,9 @@
+/* eslint-disable import/no-webpack-loader-syntax */
 import { Button } from '../../../src/button';
 import style from '!raw-loader!../../themes/dark.theme.css';
 import { LiveProvider, LiveEditor } from 'react-live';
-import { getRootStylesByClass } from '../../Utils/getRootStylesByClass';
 import { SVG_EXAMPLE } from '../helpers/svg.example';
+import { StorybookUtils } from '../../../core/storybook/StorybookUtils';
 
 /**
  * This a theme showcases how to customize the component so it can be used on dark backgrounds.
@@ -36,7 +37,7 @@ export const ShowCase = {
   },
   render: () => (
     <LiveProvider
-      code={getRootStylesByClass(style, '.dcx-button')}
+      code={StorybookUtils.getThemeCode('dcx-button', style)}
       disabled={true}
       language="css"
     >

stories/Button/design-system/MaterialTheme.stories.js

@@ -1,8 +1,9 @@
+/* eslint-disable import/no-webpack-loader-syntax */
 import { Button } from '../../../src/button';
 import { LiveProvider, LiveEditor } from 'react-live';
 import style from '!raw-loader!../../themes/material.theme.css';
-import { getRootStylesByClass } from '../../Utils/getRootStylesByClass';
 import { SVG_EXAMPLE } from '../helpers/svg.example';
+import { StorybookUtils } from '../../../core/storybook/StorybookUtils';
 
 /**
  * This a theme showcases an appearance similar to Material UI can be achieved.
@@ -37,7 +38,7 @@ export const ShowCase = {
   },
   render: () => (
     <LiveProvider
-      code={getRootStylesByClass(style, '.dcx-button')}
+      code={StorybookUtils.getThemeCode('dcx-button', style)}
       disabled={true}
       language="css"
     >

stories/Button/design-system/Playground.stories.js

@@ -1,13 +1,17 @@
+/* eslint-disable import/no-webpack-loader-syntax */
+import style from '!raw-loader!../../../dist/design-system/button.css';
+import TokensDecorator from '../../../core/storybook/TokensDecorator';
 import { Button } from '../../../src/button';
 
 export default {
   title: 'DCXLibrary/Form/Button/Design system',
   component: Button,
   decorators: [
-    getStory => {
-      require('../../../dist/design-system/index.css');
-      return getStory();
-    },
+    getStory => (
+      <TokensDecorator style={style}>
+        {getStory()}
+      </TokensDecorator>
+    ),
   ],
   parameters: {
     options: { showPanel: true },

stories/FormSelect/design-system/Playground.stories.js

@@ -1,26 +1,30 @@
+/* eslint-disable import/no-webpack-loader-syntax */
+import style from '!raw-loader!../../../dist/design-system/formselect.css';
+import TokensDecorator from '../../../core/storybook/TokensDecorator';
 import { FormSelect } from '../../../src/formSelect/FormSelect';
 
 export default {
-  title:"DCXLibrary/Form/Select/Design system",
-  component:FormSelect,
-  decorators:[
-    (getStory) => {
-      require('../../../dist/design-system/index.css');
-      return getStory();
-    }
+  title: 'DCXLibrary/Form/Select/Design system',
+  component: FormSelect,
+  decorators: [
+    (getStory) => (
+      <TokensDecorator style={style}>
+        {getStory()}
+      </TokensDecorator>
+    )
   ],
-  parameters:{
+  parameters: {
     options: { showPanel: true },
     actions: { disable: true },
   }
-}
+};
 
 
 export const Playground = {
   name: 'Playground',
   args: {
-    label:"My label",
-    options:['Option 1', 'Option 2'],
-    nullOption:"Select an option..."
+    label: 'My label',
+    options: ['Option 1', 'Option 2'],
+    nullOption: 'Select an option...'
   },
 };

stories/Heading/design-system/Playground.stories.js

@@ -1,14 +1,17 @@
-/* eslint-disable import/no-anonymous-default-export */
+/* eslint-disable import/no-webpack-loader-syntax */
+import style from '!raw-loader!../../../dist/design-system/heading.css';
+import TokensDecorator from '../../../core/storybook/TokensDecorator';
 import { Heading } from '../../../src/heading/Heading';
 
 export default {
   title: 'DCXLibrary/Typography/Heading/Design system',
   component: Heading,
   decorators: [
-    (getStory) => {
-      require('../../../dist/design-system/index.css');
-      return getStory();
-    }
+    (getStory) => (
+      <TokensDecorator style={style}>
+        {getStory()}
+      </TokensDecorator>
+    )
   ],
   parameters: {
     options: { showPanel: true },

stories/InsertText/design-system/Playground.stories.js

@@ -1,13 +1,17 @@
+/* eslint-disable import/no-webpack-loader-syntax */
 import { InsertText } from '../../../src/insertText/InsertText';
+import style from '!raw-loader!../../../dist/design-system/insert-text.css';
+import TokensDecorator from '../../../core/storybook/TokensDecorator';
 
 export default {
   title: 'DCXLibrary/Typography/InsertText/Design system',
   component: InsertText,
   decorators: [
-    (getStory) => {
-      require('../../../dist/design-system/index.css');
-      return getStory();
-    },
+    (getStory) => (
+      <TokensDecorator style={style}>
+        {getStory()}
+      </TokensDecorator>
+    )
   ],
   parameters: {
     options: { showPanel: true },

stories/Label/design-system/Playground.stories.js

@@ -1,13 +1,17 @@
+/* eslint-disable import/no-webpack-loader-syntax */
 import { Label } from '../../../src/label/Label';
+import style from '!raw-loader!../../../dist/design-system/label.css';
+import TokensDecorator from '../../../core/storybook/TokensDecorator';
 
 export default {
   title: 'DCXLibrary/Typography/Label/Design system',
   component: Label,
   decorators: [
-    (getStory) => {
-      require('../../../dist/design-system/index.css');
-      return getStory();
-    },
+    (getStory) => (
+      <TokensDecorator style={style}>
+        {getStory()}
+      </TokensDecorator>
+    )
   ],
   parameters: {
     options: { showPanel: true },