Merge pull request #7109 from Sage/dotenvx

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

.env

@@ -1,2 +1,4 @@
-STORYBOOK_DEBUG_THEME="true"
-STORYBOOK_BUILD="true"
+STORYBOOK_BUILD=true
+USE_VERSION_PICKER=false
+IGNORE_TESTS=false
+STORYBOOK_VIEW_MODE=docs

.env.production

@@ -0,0 +1,4 @@
+STORYBOOK_BUILD=true
+USE_VERSION_PICKER=true
+IGNORE_TESTS=true
+STORYBOOK_VIEW_MODE=docs

.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/main.ts

@@ -46,8 +46,8 @@ const config: StorybookConfig = {
     },
     "@storybook/addon-toolbars",
     "@storybook/addon-viewport",
-    "@storybook/addon-webpack5-compiler-swc",
     "@chromatic-com/storybook",
+    "@storybook/addon-webpack5-compiler-babel",
   ],
 
   staticDirs: ["../.assets", "../logo"],

.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

@@ -3,7 +3,6 @@ import isChromatic from "./isChromatic";
 import React from "react";
 import styled from "styled-components";
 import CarbonProvider from "../src/components/carbon-provider";
-import sageDebugTheme from "../src/style/design-tokens/debug-theme.util";
 import { noTheme, sageTheme } from "../src/style/themes";
 import { config } from "react-transition-group";
 
@@ -12,10 +11,6 @@ const themes = [noTheme, sageTheme].reduce((themesObject, theme) => {
   return themesObject;
 }, {});
 
-if (!isChromatic() && process.env.STORYBOOK_DEBUG_THEME === "true") {
-  themes["sage-debug"] = sageDebugTheme;
-}
-
 const render = (
   Story,
   themeName,