chore: Add Storybook and Chromatic

.github/workflows/pull-request.yml

@@ -13,10 +13,34 @@ jobs:
         with:
           node_version: 18.x
 
-  check:
+  build:
     runs-on: ubuntu-latest
     needs: 'install'
 
+    steps:
+      - uses: actions/checkout@v3
+
+      - uses: Workday/canvas-kit-actions/install@v1
+        with:
+          node_version: 18.x
+
+      - name: Build Tokens
+        run: yarn build:tokens
+
+      - name: Build Storybook
+        run: yarn build-storybook --quiet
+
+      - name: Cache Build
+        id: build-cache
+        uses: actions/cache@v3
+        with:
+          path: docs
+          key: ${{ runner.os }}-build-${{ github.sha }}
+
+  check:
+    runs-on: ubuntu-latest
+    needs: ['install', 'build']
+
     steps:
       - uses: actions/checkout@v3
 
@@ -36,3 +60,30 @@ jobs:
       - name: Run Unit Tests
         shell: bash
         run: yarn test
+
+  visual-test:
+    runs-on: ubuntu-latest
+    needs: 'build'
+
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0 # Required to retrieve git history
+
+      - uses: Workday/canvas-kit-actions/install@v1
+        with:
+          node_version: 18.x
+
+      - name: Restore Build
+        uses: actions/cache@v3
+        with:
+          path: docs
+          key: ${{ runner.os }}-build-${{ github.sha }}
+
+      - uses: chromaui/action@main
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          projectToken: ${{ secrets.CHROMATIC_APP_CODE }}
+          storybookBuildDir: docs
+          exitOnceUploaded: false
+          exitZeroOnChanges: true

.gitignore

@@ -2,6 +2,7 @@
 
 # compiled output
 dist
+docs
 tmp
 /out-tsc
 *.tsbuildinfo
@@ -31,3 +32,6 @@ testem.log
 
 # Keys
 .env
+
+# Storybook
+build-storybook.log

nx.json

@@ -1,12 +1,12 @@
 {
-  "extends": "nx/presets/npm.json",
-  "$schema": "./node_modules/nx/schemas/nx-schema.json",
   "tasksRunnerOptions": {
     "default": {
       "runner": "nx/tasks-runners/default",
       "options": {
-        "cacheableOperations": ["build", "lint", "test", "e2e"]
+        "cacheableOperations": ["build", "lint", "test", "e2e", "build-storybook"]
       }
     }
-  }
+  },
+  "extends": "nx/presets/npm.json",
+  "$schema": "./node_modules/nx/schemas/nx-schema.json"
 }

package.json

@@ -16,20 +16,31 @@
     "lint": "eslint -c ./.eslintrc.js --ext=ts .",
     "precommit": "lint-staged",
     "prepare": "husky install",
+    "storybook": "nx storybook @workday/canvas-tokens-web",
+    "build-storybook": "nx build-storybook @workday/canvas-tokens-web",
     "test": "jest -c jest.config.ts",
     "tokens-config": "ts-node scripts/tokens-config",
     "typecheck": "tsc -p . --noEmit",
     "release": "yarn build:tokens && changeset publish --tags latest"
   },
   "devDependencies": {
+    "@changesets/cli": "^2.26.2",
     "@commitlint/cli": "^17.6.3",
     "@commitlint/config-conventional": "^17.6.3",
+    "@nx/js": "16.7.4",
+    "@nx/react": "^16.7.4",
+    "@nx/storybook": "^16.7.4",
+    "@nx/vite": "16.7.4",
     "@octokit/openapi-types": "^18.0.0",
     "@octokit/rest": "^18.12.0",
     "@types/node": "^18.18.0",
+    "@storybook/addon-essentials": "7.4.0",
+    "@storybook/core-server": "7.4.0",
+    "@storybook/react-vite": "7.4.0",
     "@types/jest": "^29.5.2",
     "@typescript-eslint/eslint-plugin": "^5.59.5",
     "@typescript-eslint/parser": "^5.59.5",
+    "chromatic": "^7.2.0",
     "commander": "^11.0.0",
     "cz-conventional-changelog": "^3.3.0",
     "dotenv": "^16.3.1",
@@ -40,9 +51,12 @@
     "lint-staged": "^13.2.2",
     "nx": "16.1.2",
     "prettier": "^2.8.8",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "ts-jest": "^29.1.0",
     "ts-node": "10.9.1",
-    "typescript": "^5.0.4"
+    "typescript": "^5.0.4",
+    "vite": "~4.3.9"
   },
   "workspaces": [
     "packages/*"
@@ -55,8 +69,5 @@
     "commitizen": {
       "path": "./node_modules/cz-conventional-changelog"
     }
-  },
-  "dependencies": {
-    "@changesets/cli": "^2.26.2"
   }
 }

packages/canvas-tokens-web/.storybook/main.ts

@@ -0,0 +1,24 @@
+import type {StorybookConfig} from '@storybook/react-vite';
+
+import {nxViteTsPaths} from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import {mergeConfig} from 'vite';
+
+const config: StorybookConfig = {
+  stories: ['../**/*.stories.@(mdx|tsx)', '../stories/*.mdx'],
+  addons: ['@storybook/addon-essentials'],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+
+  viteFinal: async config =>
+    mergeConfig(config, {
+      plugins: [nxViteTsPaths()],
+    }),
+};
+
+export default config;
+
+// To customize your Vite configuration you can use the viteFinal field.
+// Check https://storybook.js.org/docs/react/builders/vite#configuration
+// and https://nx.dev/packages/storybook/documents/custom-builder-configs

packages/canvas-tokens-web/.storybook/preview.ts

@@ -0,0 +1,16 @@
+import {Preview} from '@storybook/react';
+import '@workday/canvas-tokens-web/dist/css/base/_variables.css';
+import '@workday/canvas-tokens-web/dist/css/brand/_variables.css';
+import '@workday/canvas-tokens-web/dist/css/system/_variables.css';
+
+const preview: Preview = {
+  parameters: {
+    options: {
+      storySort: {
+        order: ['Docs', ['Getting Started'], 'Visual Tests'],
+      },
+    },
+  },
+};
+
+export default preview;

packages/canvas-tokens-web/.storybook/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "composite": true,
+    "outDir": ""
+  },
+  "files": [
+    "../../../node_modules/@nx/react/typings/styled-jsx.d.ts",
+    "../../../node_modules/@nx/react/typings/cssmodule.d.ts",
+    "../../../node_modules/@nx/react/typings/image.d.ts"
+  ],
+  "exclude": ["../**/*.spec.ts", "../**/*.spec.js", "../**/*.spec.tsx", "../**/*.spec.jsx"],
+  "include": [
+    "../src/**/*.stories.ts",
+    "../src/**/*.stories.js",
+    "../src/**/*.stories.jsx",
+    "../src/**/*.stories.tsx",
+    "../src/**/*.stories.mdx",
+    "*.ts",
+    "*.js"
+  ]
+}

packages/canvas-tokens-web/components/ColorGrid.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import {TokenGrid} from './TokenGrid';
+
+export interface ColorSwatch {
+  value: string;
+  varName: string;
+}
+
+/** builds color swatch objects for ColorGrid */
+export function buildColorSwatch(varName: string): ColorSwatch {
+  // Get the CSS var's value from the :root element
+  const value = getComputedStyle(document.documentElement).getPropertyValue(varName);
+  return {
+    value,
+    varName,
+  };
+}
+
+interface ColorGridProps {
+  name: string;
+  palette: ColorSwatch[];
+}
+
+/** transform 'camelCase' names into 'spaced case' */
+function formatName(name: string) {
+  return name
+    .split(/(?=[A-Z])/)
+    .join(' ')
+    .toLowerCase();
+}
+
+/** A configuration of TokenGrid to quickly build tables for colors */
+export function ColorGrid(props: ColorGridProps) {
+  return (
+    <TokenGrid
+      caption={formatName(props.name)}
+      headings={['Swatch', 'CSS Variable', 'Value']}
+      rows={props.palette}
+    >
+      {token => (
+        <>
+          <TokenGrid.RowItem>
+            <TokenGrid.Swatch style={{backgroundColor: `var(${token.varName})`}} />
+          </TokenGrid.RowItem>
+          <TokenGrid.RowItem>
+            <TokenGrid.MonospaceLabel>{token.varName}</TokenGrid.MonospaceLabel>
+          </TokenGrid.RowItem>
+          <TokenGrid.RowItem>
+            <TokenGrid.MonospaceLabel>{token.value}</TokenGrid.MonospaceLabel>
+          </TokenGrid.RowItem>
+        </>
+      )}
+    </TokenGrid>
+  );
+}

packages/canvas-tokens-web/components/Stack/index.css

@@ -0,0 +1,4 @@
+.stack {
+  display: grid;
+  gap: 2rem;
+}

packages/canvas-tokens-web/components/Stack/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import './index.css';
+
+interface StackProps {
+  children: React.ReactNode;
+}
+
+export function Stack({children}: StackProps) {
+  return <div className="stack">{children}</div>;
+}

packages/canvas-tokens-web/components/TokenGrid/index.css

@@ -0,0 +1,82 @@
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&family=Roboto+Mono&family=Roboto:wght@300;400;500;700&display=swap');
+
+* {
+  box-sizing: border-box;
+  font-family: Roboto;
+}
+
+.token-grid {
+  border: solid 1px var(--cnvs-base-palette-soap-500);
+  border-radius: 0.5rem;
+  display: grid;
+  min-width: 48rem;
+  max-width: 64rem;
+  overflow-x: auto;
+}
+
+.token-grid__caption {
+  border-bottom: solid 0.0625rem var(--cnvs-base-palette-soap-500);
+  display: flex;
+  padding: 0.5rem 1rem;
+  text-transform: capitalize;
+}
+
+.token-grid__head {
+  background-color: var(--cnvs-base-palette-soap-100);
+  display: grid;
+}
+
+.token-grid__head-item {
+  display: grid;
+  color: var(--cnvs-base-palette-black-pepper-300);
+  align-items: center;
+  justify-content: start;
+  font-weight: var(--cnvs-base-font-weight-700);
+}
+
+.token-grid__row {
+  align-items: center;
+  border-bottom: solid 0.0625rem var(--cnvs-base-palette-soap-500);
+  display: grid;
+  gap: 1rem;
+  grid-auto-flow: column;
+  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
+  min-height: 4rem;
+  padding: 1rem;
+  justify-content: start;
+}
+
+.token-grid__body .token-grid__row:last-of-type {
+  border-bottom: none;
+}
+
+.token-grid__row-item {
+  align-items: start;
+  display: grid;
+  gap: 0.25rem;
+  justify-self: start;
+}
+
+.token-grid__swatch {
+  display: grid;
+  grid-template-columns: minmax(2rem, 8rem);
+  height: 2rem;
+  padding: 0.5rem;
+  border: 0.0625rem solid var(--cnvs-base-palette-soap-500);
+}
+
+.token-grid__sample {
+  background-color: var(--cnvs-base-palette-french-vanilla-100);;
+  display: grid;
+  grid-template-columns: minmax(2rem, 8rem);
+  height: 2rem;
+  width: 2rem;
+}
+
+.token-grid__monospace-label {
+  background-color: var(--cnvs-base-palette-soap-200);
+  font-family: 'Roboto Mono';
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+  min-height: 1rem;
+}