From 80e161073069e94a4893533eea57ddc42ce7c39c Mon Sep 17 00:00:00 2001 From: Vicki League Date: Fri, 9 Jan 2026 12:53:58 -0500 Subject: [PATCH] [CL-695] Combine display of CL and autofill storybooks --- .github/workflows/chromatic.yml | 39 ++++++++++++++----- .storybook/main.ts | 16 ++++++++ .../autofill/content/components/package.json | 4 +- package.json | 5 ++- 4 files changed, 52 insertions(+), 12 deletions(-) diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml index c7d80b82baa..2c9cdb2f8b3 100644 --- a/.github/workflows/chromatic.yml +++ b/.github/workflows/chromatic.yml @@ -37,8 +37,8 @@ jobs: fetch-depth: 0 persist-credentials: false - - name: Get changed files - id: get-changed-files-for-chromatic + - name: Get changed files for CL project + id: get-changed-files-for-chromatic-cl uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 # v3.0.2 with: filters: | @@ -49,9 +49,17 @@ jobs: - "package.json" - ".storybook/**" + - name: Get changed files for autofill project + id: get-changed-files-for-chromatic-autofill + uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 # v3.0.2 + with: + filters: | + storyFiles: + - "apps/browser/src/autofill/content/components/**" + - name: Get Node version id: retrieve-node-version - if: steps.get-changed-files-for-chromatic.outputs.storyFiles == 'true' + if: steps.get-changed-files-for-chromatic-cl.outputs.storyFiles == 'true' || steps.get-changed-files-for-chromatic-autofill == 'true' run: | NODE_NVMRC=$(cat .nvmrc) NODE_VERSION=${NODE_NVMRC/v/''} @@ -61,7 +69,7 @@ jobs: uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0 with: node-version: ${{ steps.retrieve-node-version.outputs.node_version }} - if: steps.get-changed-files-for-chromatic.outputs.storyFiles == 'true' + if: steps.get-changed-files-for-chromatic-cl.outputs.storyFiles == 'true' || steps.get-changed-files-for-chromatic-autofill == 'true' - name: Cache NPM id: npm-cache @@ -69,15 +77,15 @@ jobs: with: path: "~/.npm" key: ${{ runner.os }}-npm-chromatic-${{ hashFiles('**/package-lock.json') }} - if: steps.get-changed-files-for-chromatic.outputs.storyFiles == 'true' + if: steps.get-changed-files-for-chromatic-cl.outputs.storyFiles == 'true' || steps.get-changed-files-for-chromatic-autofill == 'true' - name: Install Node dependencies - if: steps.get-changed-files-for-chromatic.outputs.storyFiles == 'true' + if: steps.get-changed-files-for-chromatic-cl.outputs.storyFiles == 'true' || steps.get-changed-files-for-chromatic-autofill == 'true' run: npm ci # Manually build the Storybook to resolve a bug related to TurboSnap - name: Build Storybook - if: steps.get-changed-files-for-chromatic.outputs.storyFiles == 'true' + if: steps.get-changed-files-for-chromatic-cl.outputs.storyFiles == 'true' || steps.get-changed-files-for-chromatic-autofill == 'true' run: npm run build-storybook:ci - name: Log in to Azure @@ -92,12 +100,12 @@ jobs: uses: bitwarden/gh-actions/get-keyvault-secrets@main with: keyvault: gh-clients - secrets: "CHROMATIC-PROJECT-TOKEN" + secrets: "CHROMATIC-PROJECT-TOKEN,CHROMATIC-PROJECT-TOKEN-AUTOFILL" - name: Log out from Azure uses: bitwarden/gh-actions/azure-logout@main - - name: Publish to Chromatic + - name: Publish to Chromatic for CL uses: chromaui/action@ac86f2ff0a458ffbce7b40698abd44c0fa34d4b6 # v13.3.3 with: token: ${{ secrets.GITHUB_TOKEN }} @@ -110,4 +118,15 @@ jobs: libs/components/**/*.css libs/components/tailwind.config*.js # Rather than use an `if` check on the whole publish step, we need to tell Chromatic to skip so that any Chromatic-spawned actions are properly skipped - skip: ${{ steps.get-changed-files-for-chromatic.outputs.storyFiles == 'false' }} + skip: ${{ steps.get-changed-files-for-chromatic-cl.outputs.storyFiles == 'false' }} + + - name: Publish to Chromatic for Autofill + uses: chromaui/action@ac86f2ff0a458ffbce7b40698abd44c0fa34d4b6 # v13.3.3 + with: + token: ${{ secrets.GITHUB_TOKEN }} + projectToken: ${{ steps.get-kv-secrets.outputs.CHROMATIC-PROJECT-TOKEN-AUTOFILL }} + storybookBuildDir: ./apps/browser/src/autofill/content/components/storybook-static + exitOnceUploaded: true + onlyChanged: true + # Rather than use an `if` check on the whole publish step, we need to tell Chromatic to skip so that any Chromatic-spawned actions are properly skipped + skip: ${{ steps.get-changed-files-for-chromatic-autofill.outputs.storyFiles == 'false' }} \ No newline at end of file diff --git a/.storybook/main.ts b/.storybook/main.ts index 353d959a6b9..b12b3edc37f 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -69,6 +69,22 @@ const config: StorybookConfig = { }, docs: {}, staticDirs: ["../apps/web/src/images"], + refs: (config, { configType }) => { + if (configType === "DEVELOPMENT") { + return { + autofill: { + title: "Autofill Components", + url: "http://localhost:6007", + }, + }; + } + return { + autofill: { + title: "Autofill Components", + url: "https://main--695ffc4bef53d3a5ae4c8067.chromatic.com", + }, + }; + }, }; export default config; diff --git a/apps/browser/src/autofill/content/components/package.json b/apps/browser/src/autofill/content/components/package.json index 8dbe9e7f516..eb9ff08844d 100644 --- a/apps/browser/src/autofill/content/components/package.json +++ b/apps/browser/src/autofill/content/components/package.json @@ -2,6 +2,8 @@ "name": "@bitwarden/lit-components", "version": "2025.1.1", "scripts": { - "storybook:lit": "storybook dev -p 6006 -c ./.lit-storybook" + "storybook:lit": "storybook dev -p 6006 -c ./.lit-storybook", + "storybook:lit:combined": "storybook dev -p 6007 -c ./.lit-storybook --no-open", + "storybook:build-lit:ci": "storybook build -c ./.lit-storybook --webpack-stats-json" } } diff --git a/package.json b/package.json index 1cfddb16c42..5a187885dea 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,10 @@ "lint:dep-ownership": "tsc --project ./scripts/tsconfig.json && node ./scripts/dist/dep-ownership.js", "lint:sdk-internal-versions": "tsc --project ./scripts/tsconfig.json && node ./scripts/dist/sdk-internal-versions.js", "docs:json": "compodoc -p ./tsconfig.json -e json -d . --disableRoutesGraph", - "storybook": "ng run components:storybook", + "storybook": "concurrently \"npm run storybook-cl\" \"npm run storybook-autofill\"", + "storybook-cl": "ng run components:storybook", + "storybook-autofill": "cd apps/browser/src/autofill/content/components && npm run storybook:lit:combined", + "storybook-autofill-build:ci": "cd apps/browser/src/autofill/content/components && npm run storybook:build-lit:ci", "build-storybook": "ng run components:build-storybook", "build-storybook:ci": "ng run components:build-storybook --webpack-stats-json", "test-stories": "test-storybook --url http://localhost:6006",