From ba64e737179c50cc7dd84aa61a4509664862ca5b Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Mon, 15 Sep 2025 20:38:20 +0100 Subject: [PATCH 1/7] Restrict Chromatic to only build BUI Signed-off-by: Charles de Dreuille --- .github/workflows/verify_storybook.yml | 6 +++--- .gitignore | 3 ++- .storybook/main.ts | 28 +++++++++++++++----------- package.json | 7 ++++--- 4 files changed, 25 insertions(+), 19 deletions(-) diff --git a/.github/workflows/verify_storybook.yml b/.github/workflows/verify_storybook.yml index 5a71caba85..1230d09168 100644 --- a/.github/workflows/verify_storybook.yml +++ b/.github/workflows/verify_storybook.yml @@ -49,8 +49,8 @@ jobs: with: cache-prefix: ${{ runner.os }}-v${{ matrix.node-version }} - - name: Build Storybook - run: yarn build-storybook + - name: Build Storybook for Chromatic + run: yarn build-storybook:chromatic - name: Deploy Storybook to Chromatic uses: chromaui/action@1cfa065cbdab28f6ca3afaeb3d761383076a35aa # v11 @@ -59,4 +59,4 @@ jobs: # 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 + storybookBuildDir: dist-storybook-chromatic diff --git a/.gitignore b/.gitignore index aaf05b51cd..a4a3ec321b 100644 --- a/.gitignore +++ b/.gitignore @@ -186,4 +186,5 @@ docs.json tsconfig.typedoc.tmp.json # Storybook -dist-storybook/ \ No newline at end of file +dist-storybook/ +dist-storybook-chromatic/ \ No newline at end of file diff --git a/.storybook/main.ts b/.storybook/main.ts index 1b9e4e2bde..4be06af7fc 100644 --- a/.storybook/main.ts +++ b/.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), ]); diff --git a/package.json b/package.json index 4b74eda8a9..34fc4fdf0a 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ }, "scripts": { "build-storybook": "storybook build --output-dir dist-storybook", + "build-storybook:chromatic": "STORYBOOK_STORY_SET=chromatic storybook build --output-dir dist-storybook-chromatic", "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:^", From 9320b11e331aae4e923aca0f3743b17232fa0032 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Mon, 15 Sep 2025 21:01:53 +0100 Subject: [PATCH 2/7] Update report-alpha.api.md Signed-off-by: Charles de Dreuille --- plugins/catalog-react/report-alpha.api.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/plugins/catalog-react/report-alpha.api.md b/plugins/catalog-react/report-alpha.api.md index 30cdd91704..cf28d80c11 100644 --- a/plugins/catalog-react/report-alpha.api.md +++ b/plugins/catalog-react/report-alpha.api.md @@ -92,12 +92,12 @@ export const catalogReactTranslationRef: TranslationRef< readonly 'entityTableColumnTitle.title': 'Title'; readonly 'entityTableColumnTitle.description': 'Description'; readonly 'entityTableColumnTitle.domain': 'Domain'; + readonly 'entityTableColumnTitle.system': 'System'; + readonly 'entityTableColumnTitle.tags': 'Tags'; readonly 'entityTableColumnTitle.namespace': 'Namespace'; readonly 'entityTableColumnTitle.lifecycle': 'Lifecycle'; readonly 'entityTableColumnTitle.owner': 'Owner'; - readonly 'entityTableColumnTitle.system': 'System'; readonly 'entityTableColumnTitle.targets': 'Targets'; - readonly 'entityTableColumnTitle.tags': 'Tags'; } >; @@ -533,8 +533,8 @@ export const EntityTableColumnTitle: ({ translationKey, }: EntityTableColumnTitleProps) => | 'Title' - | 'Domain' | 'System' + | 'Domain' | 'Lifecycle' | 'Namespace' | 'Owner' From 15de5ccd86d41242de71d1f683087b52a8ef19cc Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Mon, 15 Sep 2025 21:26:08 +0100 Subject: [PATCH 3/7] Add modes + a11y Signed-off-by: Charles de Dreuille --- .storybook/main.ts | 1 + .storybook/modes.ts | 18 ++++++++++++++++++ .storybook/preview.tsx | 10 ++++++++++ package.json | 1 + yarn.lock | 21 +++++++++++++++++---- 5 files changed, 47 insertions(+), 4 deletions(-) create mode 100644 .storybook/modes.ts diff --git a/.storybook/main.ts b/.storybook/main.ts index 4be06af7fc..788df83ba9 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -41,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'), diff --git a/.storybook/modes.ts b/.storybook/modes.ts new file mode 100644 index 0000000000..7087fa35eb --- /dev/null +++ b/.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; diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index d934412521..6547950705 100644 --- a/.storybook/preview.tsx +++ b/.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,15 @@ const preview: Preview = { docs: { codePanel: true, }, + + chromatic: { + modes: { + 'light backstage': allModes['light backstage'], + 'dark backstage': allModes['dark backstage'], + 'light spotify': allModes['light spotify'], + 'dark spotify': allModes['dark spotify'], + }, + }, }, decorators: [ Story => { diff --git a/package.json b/package.json index 34fc4fdf0a..99a6192653 100644 --- a/package.json +++ b/package.json @@ -135,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", diff --git a/yarn.lock b/yarn.lock index 3a5aa9ac30..0403d23ed1 100644 --- a/yarn.lock +++ b/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" From 794adf81d77017db224819ec9764495d29dcd386 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Mon, 15 Sep 2025 21:52:29 +0100 Subject: [PATCH 4/7] Update preview.tsx Signed-off-by: Charles de Dreuille --- .storybook/preview.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 6547950705..8f987ebab1 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -95,9 +95,10 @@ const preview: Preview = { chromatic: { modes: { 'light backstage': allModes['light backstage'], - 'dark backstage': allModes['dark backstage'], - 'light spotify': allModes['light spotify'], - 'dark spotify': allModes['dark spotify'], + // 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'], }, }, }, From 0a447c8c9ba4ecca1ad2c632936c6bee8fb516b8 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Mon, 15 Sep 2025 22:04:57 +0100 Subject: [PATCH 5/7] Enable TurboSnaps Signed-off-by: Charles de Dreuille --- .github/workflows/verify_storybook.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/verify_storybook.yml b/.github/workflows/verify_storybook.yml index 1230d09168..540a6a3f9a 100644 --- a/.github/workflows/verify_storybook.yml +++ b/.github/workflows/verify_storybook.yml @@ -60,3 +60,4 @@ jobs: # https://www.chromatic.com/docs/custom-ci-provider#run-chromatic-on-external-forks-of-open-source-projects projectToken: chpt_dab72dc0f97d55b storybookBuildDir: dist-storybook-chromatic + onlyChanged: true From 4a5830f8fd8d11b7497ab6b7652fbdaf1f422dff Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Mon, 15 Sep 2025 22:32:51 +0100 Subject: [PATCH 6/7] Fix Chromatic Signed-off-by: Charles de Dreuille --- .github/workflows/verify_storybook.yml | 6 +++--- package.json | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/.github/workflows/verify_storybook.yml b/.github/workflows/verify_storybook.yml index 540a6a3f9a..7c88a8f82e 100644 --- a/.github/workflows/verify_storybook.yml +++ b/.github/workflows/verify_storybook.yml @@ -49,11 +49,11 @@ jobs: with: cache-prefix: ${{ runner.os }}-v${{ matrix.node-version }} - - name: Build Storybook for Chromatic + - name: 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 diff --git a/package.json b/package.json index 99a6192653..a048db1c60 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ }, "scripts": { "build-storybook": "storybook build --output-dir dist-storybook", - "build-storybook:chromatic": "STORYBOOK_STORY_SET=chromatic storybook build --output-dir dist-storybook-chromatic", + "build-storybook:chromatic": "STORYBOOK_STORY_SET=chromatic storybook build --stats-json --output-dir dist-storybook-chromatic", "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", From 976fa7015cecbf0f545afd86d3ef11df023810aa Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Tue, 16 Sep 2025 16:12:40 +0100 Subject: [PATCH 7/7] Cleanup Signed-off-by: Charles de Dreuille --- ...erify_storybook-noop.yml => verify_chromatic-noop.yml} | 6 +++--- .../{verify_storybook.yml => verify_chromatic.yml} | 8 ++++---- .gitignore | 3 +-- package.json | 2 +- 4 files changed, 9 insertions(+), 10 deletions(-) rename .github/workflows/{verify_storybook-noop.yml => verify_chromatic-noop.yml} (90%) rename .github/workflows/{verify_storybook.yml => verify_chromatic.yml} (93%) diff --git a/.github/workflows/verify_storybook-noop.yml b/.github/workflows/verify_chromatic-noop.yml similarity index 90% rename from .github/workflows/verify_storybook-noop.yml rename to .github/workflows/verify_chromatic-noop.yml index 98ce6b26a1..600e8f9bdb 100644 --- a/.github/workflows/verify_storybook-noop.yml +++ b/.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 diff --git a/.github/workflows/verify_storybook.yml b/.github/workflows/verify_chromatic.yml similarity index 93% rename from .github/workflows/verify_storybook.yml rename to .github/workflows/verify_chromatic.yml index 7c88a8f82e..86dbe6477c 100644 --- a/.github/workflows/verify_storybook.yml +++ b/.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 @@ -59,5 +59,5 @@ jobs: # 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-chromatic + storybookBuildDir: dist-storybook onlyChanged: true diff --git a/.gitignore b/.gitignore index a4a3ec321b..aaf05b51cd 100644 --- a/.gitignore +++ b/.gitignore @@ -186,5 +186,4 @@ docs.json tsconfig.typedoc.tmp.json # Storybook -dist-storybook/ -dist-storybook-chromatic/ \ No newline at end of file +dist-storybook/ \ No newline at end of file diff --git a/package.json b/package.json index a048db1c60..0f1d16ce41 100644 --- a/package.json +++ b/package.json @@ -24,7 +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-chromatic", + "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",