[CL-695] Combine display of CL and autofill storybooks

.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' }}

.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;

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"
   }
 }

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