Merge branch 'main' into ISSUE-48

.github/workflows/merge.yml

@@ -0,0 +1,52 @@
+name: Merge
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  merge:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0 # Used for conventional commit ranges
+
+      - name: Install
+        shell: bash
+        run: yarn install
+      # - uses: Workday/canvas-kit-actions/install@v1
+      #   with:
+      #     node_version: 18.x
+
+      - name: Build Tokens
+        shell: bash
+        run: yarn build:tokens --no-cache
+
+      # Build Storybook and extract component stories for Storybook aggregation. This will be used
+      # for Chromatic rebaselining and publishing to GH Pages.
+      - name: Build Storybook
+        shell: bash
+        run: yarn build-storybook --no-cache
+
+      - name: Publish Storybook
+        uses: JamesIves/[email protected]
+        with:
+          branch: gh-pages
+          folder: docs/storybook/@workday/canvas-tokens-docs/
+
+      ## Create a Chromatic baseline auto-accepting changes. Chromatic changes are already accepted
+      ## in PRs, so we don't need to manually approve them here again. This new baseline will be
+      ## used for future PRs. New PRs may show extra Chromatic changes until the "Update Branch"
+      ## button is used in PRs which will pull this new baseline.
+      - name: Update Chromatic Baseline
+        uses: chromaui/action@main
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          projectToken: chpt_a9e354687a28e6e
+          storybookBuildDir: docs/storybook/@workday/canvas-tokens-docs/
+          exitOnceUploaded: true
+          exitZeroOnChanges: true
+          autoAcceptChanges: true

.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 --no-cache
+
+      - name: Build Storybook
+        run: yarn build-storybook --no-cache
+
+      - 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
 
@@ -29,10 +53,40 @@ jobs:
         shell: bash
         run: yarn lint
 
+      - name: Build Tokens
+        run: yarn build:tokens --no-cache
+
       - name: Type Check
         shell: bash
         run: yarn typecheck
 
       - 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: chpt_a9e354687a28e6e
+          storybookBuildDir: docs/storybook/@workday/canvas-tokens-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

MAINTAINING.md

@@ -14,17 +14,28 @@ yarn install
 All tokens are built from the `@workday/canvas-tokens` package. To build tokens, run:
 
 ```sh
-npx nx build @workday/canvas-tokens
+yarn build:tokens
 ```
 
 ## Storybook
 
+> To ensure you're seeing the latest token updates, run `yarn build:tokens` first.
+
 Our token documentation and visual tests are rendered in Storybook. To start Storybook locally, run:
 
 ```sh
 yarn storybook
 ```
 
+Building and serving a static Storybook locally can be useful to debug issues. To do so, run:
+
+```sh
+# build static Storybook
+yarn build-storybook
+# serve locally
+yarn serve-storybook
+```
+
 ## Syncing with Tokens Studio
 
 Our Tokens Studio config currently lives in
@@ -85,4 +96,8 @@ tests locally:
 yarn test
 ```
 
+### Visual Regression Tests
+
+We use [Chromatic](https://www.chromatic.com/builds?appId=64fb84ee156f858ef9126097) for visual regression tests. Chromatic runs automatically on every pull request and requires changes to be verified before merging. When branch is merged to `main`, the baseline is updated.
+
 ## Publishing

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,32 @@
     "lint": "eslint -c ./.eslintrc.js --ext=ts .",
     "precommit": "lint-staged",
     "prepare": "husky install",
+    "storybook": "nx storybook @workday/canvas-tokens-docs",
+    "build-storybook": "nx build-storybook @workday/canvas-tokens-docs",
+    "serve-storybook": "npx http-server docs/storybook/@workday/canvas-tokens-docs",
     "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 +52,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 +70,5 @@
     "commitizen": {
       "path": "./node_modules/cz-conventional-changelog"
     }
-  },
-  "dependencies": {
-    "@changesets/cli": "^2.26.2"
   }
 }

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

@@ -0,0 +1,26 @@
+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()],
+      optimizeDeps: {
+        include: ['@workday/canvas-tokens-web'],
+      },
+    }),
+};
+
+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-docs/.storybook/preview-head.html

@@ -0,0 +1,13 @@
+<script>
+  document.title = 'Canvas Tokens Storybook';
+</script>
+
+<style type="text/css">
+  * {
+    box-sizing: border-box;
+  }
+</style>
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Noto+Sans&family=Roboto+Mono&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">

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

@@ -0,0 +1,17 @@
+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: {
+    chromatic: {disableSnapshot: false},
+    options: {
+      storySort: {
+        order: ['Docs', ['Getting Started'], 'Visual Tests'],
+      },
+    },
+  },
+};
+
+export default preview;

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

@@ -0,0 +1,25 @@
+{
+  "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",
+    "*.tsx",
+    "*.js"
+  ]
+}