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:^",