build: use dotenvx to customise storybook setup depending on runtime …

…environment

.env

@@ -0,0 +1,5 @@
+STORYBOOK_BUILD=true
+USE_DEBUG_THEME=true
+USE_VERSION_PICKER=false
+IGNORE_TESTS=false
+STORYBOOK_VIEW_MODE=docs

.env.chromatic

@@ -0,0 +1,5 @@
+STORYBOOK_BUILD=true
+USE_DEBUG_THEME=false
+USE_VERSION_PICKER=false
+IGNORE_TESTS=false
+STORYBOOK_VIEW_MODE=docs

.env.production

@@ -0,0 +1,5 @@
+STORYBOOK_BUILD=true
+USE_DEBUG_THEME=false
+USE_VERSION_PICKER=true
+IGNORE_TESTS=true
+STORYBOOK_VIEW_MODE=docs

.github/workflows/chromatic-push.yml

@@ -25,5 +25,6 @@ jobs:
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          buildScriptName: build-storybook:chromatic
           onlyChanged: true
           exitOnceUploaded: true # We don't want it to fail CI, we'll be using the GitHub Check

.github/workflows/chromatic.yml

@@ -49,4 +49,9 @@ jobs:
         run: npm ci
 
       - name: Run chromatic on branch
-        run: npx chromatic@latest --project-token ${{ secrets.CHROMATIC_PROJECT_TOKEN }} --exit-once-uploaded --branch-name="${{ needs.check.outputs.branch_name }}" --only-changed true
+        run: npx chromatic@latest \
+         --project-token ${{ secrets.CHROMATIC_PROJECT_TOKEN }} \
+         --buildScriptName build-storybook:chromatic \
+         --exit-once-uploaded \
+         --branch-name "${{ needs.check.outputs.branch_name }}" \
+         --only-changed true

.github/workflows/semantic-release.yml

@@ -56,7 +56,7 @@ jobs:
       - run: npm ci
       - name: Generate metadata file
         run: npm run generate-metadata
-      - run: NODE_ENV=production IGNORE_TESTS=true STORYBOOK_VIEW_MODE=docs npm run build-storybook
+      - run: npm run build-storybook:prod
       - uses: aws-actions/configure-aws-credentials@v1
         with:
           aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}

.github/workflows/storybook.yml

@@ -14,7 +14,7 @@ jobs:
         with:
           node-version: ">=20.9.0 20"
       - run: npm ci
-      - run: NODE_ENV=production IGNORE_TESTS=true STORYBOOK_VIEW_MODE=docs npm run build-storybook
+      - run: npm run build-storybook:prod
       - uses: aws-actions/configure-aws-credentials@v2
         with:
           aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}

.storybook/manager.ts

@@ -4,7 +4,9 @@ import { ADDON_ID, TOOL_ID } from "./version-picker/constants";
 import { VersionPicker } from "./version-picker";
 import { API_PreparedIndexEntry, API_StatusObject } from "@storybook/types";
 
-if (process.env.NODE_ENV === "production") {
+const useVersionPicker = process.env.USE_VERSION_PICKER === "true";
+
+if (useVersionPicker) {
   addons.register(ADDON_ID, () => {
     addons.add(TOOL_ID, {
       type: types.TOOL,
@@ -23,7 +25,7 @@ addons.setConfig({
       patterns: (
         item: API_PreparedIndexEntry & {
           status: Record<string, API_StatusObject | null>;
-        }
+        },
       ): boolean => {
         return !(item.tags ?? []).includes("hideInSidebar");
       },

.storybook/withThemeProvider.js

@@ -12,7 +12,8 @@ const themes = [noTheme, sageTheme].reduce((themesObject, theme) => {
   return themesObject;
 }, {});
 
-if (process.env.STORYBOOK_DEBUG_THEME === "true") {
+const useDebugTheme = process.env.USE_DEBUG_THEME === "true";
+if (useDebugTheme) {
   themes["sage-debug"] = sageDebugTheme;
 }