Merge pull request #31151 from backstage/chromatic

Restrict Chromatic to only build BUI

.github/workflows/verify_chromatic-noop.yml

@@ -1,11 +1,11 @@
 # NO-OP placeholder that always passes for other paths
 # This is here so that we're able to set the status check as required
 
-name: Storybook Void
+name: Chromatic Void
 on:
   pull_request:
     paths-ignore:
-      - '.github/workflows/verify_storybook.yml'
+      - '.github/workflows/verify_chromatic.yml'
       - 'storybook/**'
       - 'packages/config/src/**'
       - 'packages/theme/src/**'
@@ -25,7 +25,7 @@ jobs:
   noop:
     runs-on: ubuntu-latest
 
-    name: Storybook
+    name: Chromatic
     steps:
       - name: Harden Runner
         uses: step-security/harden-runner@ec9f2d5744a09debf3a187a3f4f675c53b671911 # v2.13.0

.github/workflows/verify_chromatic.yml

@@ -1,9 +1,9 @@
-name: Storybook
+name: Chromatic
 on:
   # NOTE: If you change these you must update verify_storybook-noop.yml as well
   pull_request:
     paths:
-      - '.github/workflows/verify_storybook.yml'
+      - '.github/workflows/verify_chromatic.yml'
       - '.storybook/**'
       - 'packages/ui/src/**'
       - 'packages/config/src/**'
@@ -26,7 +26,7 @@ jobs:
         os: [ubuntu-latest]
         node-version: [20.x]
 
-    name: Storybook
+    name: Chromatic
     steps:
       - name: Harden Runner
         uses: step-security/harden-runner@ec9f2d5744a09debf3a187a3f4f675c53b671911 # v2.13.0
@@ -50,13 +50,14 @@ jobs:
           cache-prefix: ${{ runner.os }}-v${{ matrix.node-version }}
 
       - name: Build Storybook
-        run: yarn build-storybook
+        run: yarn build-storybook:chromatic
 
-      - name: Deploy Storybook to Chromatic
-        uses: chromaui/action@1cfa065cbdab28f6ca3afaeb3d761383076a35aa # v11
+      - name: Run Chromatic
+        uses: chromaui/action@latest
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           # projectToken intentionally shared to allow collaborators to run Chromatic on forks
           # https://www.chromatic.com/docs/custom-ci-provider#run-chromatic-on-external-forks-of-open-source-projects
           projectToken: chpt_dab72dc0f97d55b
           storybookBuildDir: dist-storybook
+          onlyChanged: true

.storybook/main.ts

@@ -2,17 +2,21 @@ import type { StorybookConfig } from '@storybook/react-vite';
 
 import { join, dirname, posix } from 'path';
 
-// This set of stories are the ones that we publish to backstage.io.
-const backstageCoreStories = [
-  'packages/ui',
-  'packages/core-components',
-  'packages/app',
-  'plugins/org',
-  'plugins/search',
-  'plugins/search-react',
-  'plugins/home',
-  'plugins/catalog-react',
-];
+const isChromatic = process.env.STORYBOOK_STORY_SET === 'chromatic';
+
+// All stories for full development
+const allStories = isChromatic
+  ? ['packages/ui']
+  : [
+      'packages/ui',
+      'packages/core-components',
+      'packages/app',
+      'plugins/org',
+      'plugins/search',
+      'plugins/search-react',
+      'plugins/home',
+      'plugins/catalog-react',
+    ];
 
 const rootPath = '../';
 const storiesSrcMdx = 'src/**/*.mdx';
@@ -21,7 +25,7 @@ const storiesSrcGlob = 'src/**/*.stories.@(js|jsx|mjs|ts|tsx)';
 const getStoriesPath = (element: string, pattern: string) =>
   posix.join(rootPath, element, pattern);
 
-const stories = backstageCoreStories.flatMap(element => [
+const stories = allStories.flatMap(element => [
   getStoriesPath(element, storiesSrcMdx),
   getStoriesPath(element, storiesSrcGlob),
 ]);
@@ -37,6 +41,7 @@ const config: StorybookConfig = {
     getAbsolutePath('@storybook/addon-links'),
     getAbsolutePath('@storybook/addon-themes'),
     getAbsolutePath('@storybook/addon-docs'),
+    getAbsolutePath('@storybook/addon-a11y'),
   ],
   framework: {
     name: getAbsolutePath('@storybook/react-vite'),

.storybook/modes.ts

@@ -0,0 +1,18 @@
+export const allModes = {
+  'light backstage': {
+    themeMode: 'light',
+    themeName: 'backstage',
+  },
+  'dark backstage': {
+    themeMode: 'dark',
+    themeName: 'backstage',
+  },
+  'light spotify': {
+    themeMode: 'light',
+    themeName: 'spotify',
+  },
+  'dark spotify': {
+    themeMode: 'dark',
+    themeName: 'spotify',
+  },
+} as const;

.storybook/preview.tsx

@@ -5,6 +5,7 @@ import { apis } from './support/apis';
 import type { Decorator, Preview } from '@storybook/react-vite';
 import { useGlobals } from 'storybook/preview-api';
 import { UnifiedThemeProvider, themes } from '@backstage/theme';
+import { allModes } from './modes';
 
 // Default Backstage theme CSS (from packages/ui)
 import '../packages/ui/src/css/styles.css';
@@ -90,6 +91,16 @@ const preview: Preview = {
     docs: {
       codePanel: true,
     },
+
+    chromatic: {
+      modes: {
+        'light backstage': allModes['light backstage'],
+        // TODO: Enable these modes when we have more Chromatic snapshots.
+        // 'dark backstage': allModes['dark backstage'],
+        // 'light spotify': allModes['light spotify'],
+        // 'dark spotify': allModes['dark spotify'],
+      },
+    },
   },
   decorators: [
     Story => {

package.json

@@ -24,6 +24,7 @@
   },
   "scripts": {
     "build-storybook": "storybook build --output-dir dist-storybook",
+    "build-storybook:chromatic": "STORYBOOK_STORY_SET=chromatic storybook build --stats-json --output-dir dist-storybook",
     "build:all": "backstage-cli repo build --all",
     "build:api-docs": "LANG=en_EN yarn build:api-reports --docs --exclude 'plugins/@(api-docs|api-docs-module-protoc-gen-doc|app-visualizer|catalog-graph|catalog-import|catalog-unprocessed-entities|config-schema|example-todo-list|example-todo-list-backend)'",
     "build:api-reports": "yarn build:api-reports:only --tsc",
@@ -101,20 +102,20 @@
     "@changesets/assemble-release-plan@^6.0.0": "patch:@changesets/assemble-release-plan@npm%3A6.0.0#./.yarn/patches/@changesets-assemble-release-plan-npm-6.0.0-f7b3005037.patch",
     "@material-ui/pickers@^3.2.10": "patch:@material-ui/pickers@npm%3A3.3.11#./.yarn/patches/@material-ui-pickers-npm-3.3.11-1c8f68ea20.patch",
     "@material-ui/pickers@^3.3.10": "patch:@material-ui/pickers@npm%3A3.3.11#./.yarn/patches/@material-ui-pickers-npm-3.3.11-1c8f68ea20.patch",
+    "@storybook/react@npm:9.1.5": "patch:@storybook/react@npm%3A9.1.5#~/.yarn/patches/@storybook-react-npm-9.1.5-2331f18b6b.patch",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@yarnpkg/plugin-npm@npm:^3.1.0": "patch:@yarnpkg/plugin-npm@npm%3A3.1.0#~/.yarn/patches/@yarnpkg-plugin-npm-npm-3.1.0-6533d0f5a1.patch",
     "ast-types@0.14.2": "patch:ast-types@npm%3A0.14.2#./.yarn/patches/ast-types-npm-0.14.2-43c4ac4b0d.patch",
     "ast-types@^0.14.1": "patch:ast-types@npm%3A0.14.2#./.yarn/patches/ast-types-npm-0.14.2-43c4ac4b0d.patch",
-    "ast-types@npm:^0.13.4": "patch:ast-types@npm%3A0.16.1#./.yarn/patches/ast-types-npm-0.16.1-43c4ac4b0d.patch",
     "ast-types@npm:0.14.2": "patch:ast-types@npm%3A0.16.1#./.yarn/patches/ast-types-npm-0.16.1-43c4ac4b0d.patch",
+    "ast-types@npm:^0.13.4": "patch:ast-types@npm%3A0.16.1#./.yarn/patches/ast-types-npm-0.16.1-43c4ac4b0d.patch",
     "ast-types@npm:^0.16.1": "patch:ast-types@npm%3A0.16.1#./.yarn/patches/ast-types-npm-0.16.1-43c4ac4b0d.patch",
     "csstype@npm:^3.0.2": "3.0.9",
     "csstype@npm:^3.1.2": "3.0.9",
     "csstype@npm:^3.1.3": "3.0.9",
     "jest-haste-map@^29.7.0": "patch:jest-haste-map@npm%3A29.7.0#./.yarn/patches/jest-haste-map-npm-29.7.0-e3be419eff.patch",
-    "recast@npm:0.23.9>ast-types": "patch:ast-types@npm%3A0.16.1#./.yarn/patches/ast-types-npm-0.16.1-43c4ac4b0d.patch",
-    "@storybook/react@npm:9.1.5": "patch:@storybook/react@npm%3A9.1.5#~/.yarn/patches/@storybook-react-npm-9.1.5-2331f18b6b.patch"
+    "recast@npm:0.23.9>ast-types": "patch:ast-types@npm%3A0.16.1#./.yarn/patches/ast-types-npm-0.16.1-43c4ac4b0d.patch"
   },
   "dependencies": {
     "@backstage/errors": "workspace:^",
@@ -134,6 +135,7 @@
     "@octokit/rest": "^19.0.3",
     "@playwright/test": "^1.32.3",
     "@spotify/eslint-plugin": "^15.0.0",
+    "@storybook/addon-a11y": "^9.1.5",
     "@storybook/addon-docs": "^9.1.5",
     "@storybook/addon-links": "^9.1.5",
     "@storybook/addon-themes": "^9.1.5",

yarn.lock

@@ -18321,6 +18321,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/addon-a11y@npm:^9.1.5":
+  version: 9.1.6
+  resolution: "@storybook/addon-a11y@npm:9.1.6"
+  dependencies:
+    "@storybook/global": "npm:^5.0.0"
+    axe-core: "npm:^4.2.0"
+  peerDependencies:
+    storybook: ^9.1.6
+  checksum: 10/345c44673ccede4073e7415eb7c73f7817cb64b24b75d6f2edae73a0a6e50cc91e098a48dfd55996188aeb04d308c147b6d660bcdd4e5449d601271a83d4f178
+  languageName: node
+  linkType: hard
+
 "@storybook/addon-docs@npm:^9.1.5":
   version: 9.1.5
   resolution: "@storybook/addon-docs@npm:9.1.5"
@@ -24098,10 +24110,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"axe-core@npm:^4.10.0":
-  version: 4.10.0
-  resolution: "axe-core@npm:4.10.0"
-  checksum: 10/6158489a7a704edc98bd30ed56243b8280c5203c60e095a2feb5bff95d9bf2ef10becfe359b1cbc8601338418999c26cf4eee704181dedbcb487f4d63a06d8d5
+"axe-core@npm:^4.10.0, axe-core@npm:^4.2.0":
+  version: 4.10.3
+  resolution: "axe-core@npm:4.10.3"
+  checksum: 10/9ff51ad0fd0fdec5c0247ea74e8ace5990b54c7f01f8fa3e5cd8ba98b0db24d8ebd7bab4a9bd4d75c28c4edcd1eac455b44c8c6c258c6a98f3d2f88bc60af4cc
   languageName: node
   linkType: hard
 
@@ -44141,6 +44153,7 @@ __metadata:
     "@octokit/rest": "npm:^19.0.3"
     "@playwright/test": "npm:^1.32.3"
     "@spotify/eslint-plugin": "npm:^15.0.0"
+    "@storybook/addon-a11y": "npm:^9.1.5"
     "@storybook/addon-docs": "npm:^9.1.5"
     "@storybook/addon-links": "npm:^9.1.5"
     "@storybook/addon-themes": "npm:^9.1.5"