upgrade to storybook 9

Author: carylwyatt

.github/workflows/chromatic.yml

@@ -1,13 +1,13 @@
 # .github/workflows/chromatic.yml
 
-name: "Chromatic"
+name: 'Chromatic'
 
-on: 
+on:
   push:
     branches-ignore:
       - deployment
     tags-ignore:
-      - v0.*
+      - '**'
 
 jobs:
   chromatic:
@@ -21,7 +21,8 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
-      - name: Publish to Chromatic
+      - name: Build storybook and run chromatic
         uses: chromaui/action@latest
         with:
-          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          onlyChanged: true

.storybook/main.js

@@ -1,41 +1,62 @@
 /** @type { import('@storybook/svelte-vite').StorybookConfig } */
+process.env.CHROMATIC_DISABLE = 'true';
+
 const config = {
+  framework: '@storybook/svelte-vite',
   stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
   addons: [
     '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
-    '@storybook/addon-designs',
+    '@storybook/addon-docs',
+    '@storybook/addon-vitest',
+    '@chromatic-com/storybook',
+    '@storybook/addon-a11y',
   ],
-  framework: {
-    name: '@storybook/svelte-vite',
-    options: {},
-  },
   features: {
-    interactionsDebugger: true,
+    interactions: true,
   },
   docs: {},
   staticDirs: ['../src/public'],
   async viteFinal(config, { configType }) {
     const { mergeConfig } = await import('vite');
- 
-    if (configType === 'DEVELOPMENT') {
-      // Your development configuration goes here
-    }
+
     if (configType === 'PRODUCTION') {
-      // Your production configuration goes here.
-      config.plugins = config.plugins.filter(plugin => {
-        return plugin.name != 'postbuild-commands'
-      })
+      config.plugins = config.plugins.filter((plugin) => {
+        return plugin.name != 'postbuild-commands';
+      });
     }
     return mergeConfig(config, {
-      // Your environment configuration here
+      //this plugin is a (hopefully) temporary workaround for storybook not picking up our local styles
+      //we use an alias to reference bootstrap styles and they weren't getting picked up by storybook at all during prod build
+      //if we only used storybook for dev, I would've never seen this issue, but chromatic builds for prod for our snapshots
+      plugins: [
+        {
+          name: 'inject-preview-css',
+          enforce: 'post',
+          generateBundle(options, bundle) {
+            //find the style.css chunk
+            const cssChunk = Object.values(bundle).find(
+              (chunk) => chunk.type === 'asset' && chunk.name === 'style.css'
+            );
+
+            if (cssChunk) {
+              const iframeHtml = Object.values(bundle).find(
+                (chunk) => chunk.type === 'asset' && chunk.fileName === 'iframe.html'
+              );
+
+              if (iframeHtml) {
+                iframeHtml.source = iframeHtml.source.replace(
+                  '</head>',
+                  `  <link rel="stylesheet" href="/${cssChunk.fileName}">\n</head>`
+                );
+              }
+            }
+          },
+        },
+      ],
       build: {
+        cssCodeSplit: false,
         rollupOptions: {
-          external: [
-            /^..\/fonts/,
-            /^\/common\/firebird/
-          ]
+          external: [/^..\/fonts/, /^\/common\/firebird/],
         },
       },
     });

.storybook/manager.js

@@ -1,4 +1,4 @@
-import { addons } from "@storybook/manager-api";
+import { addons } from "storybook/manager-api";
 
 addons.setConfig({
   panelPosition: 'right'

.storybook/preview.js

@@ -1,6 +1,5 @@
 import '../src/scss/styles.scss';
 import * as bootstrap from 'bootstrap';
-// import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 
 const BOOTSTRAP_VIEWPORTS = {
   bsXs: {
@@ -49,18 +48,24 @@ const BOOTSTRAP_VIEWPORTS = {
 
 const preview = {
   parameters: {
-    backgrounds: {
-      default: 'light',
-    },
-    actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
       matchers: {
         color: /(background|color)$/i,
         date: /Date$/,
       },
     },
     viewport: {
-      viewports: BOOTSTRAP_VIEWPORTS,
+      options: BOOTSTRAP_VIEWPORTS, // Keep as 'options' in Storybook 9
+    },
+  },
+
+  initialGlobals: {
+    backgrounds: {
+      value: 'light',
+    },
+    viewport: {
+      value: 'bsXl', // Optional: set a default viewport
+      isRotated: false,
     },
   },
 };

.storybook/vitest.setup.js

@@ -0,0 +1,6 @@
+import { setProjectAnnotations } from '@storybook/svelte-vite';
+import * as projectAnnotations from './preview';
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+setProjectAnnotations([projectAnnotations]);

chromatic.config.json

@@ -0,0 +1,5 @@
+{
+  "onlyChanged": true,
+  "projectId": "Project:656a2bfa011def621f569319",
+  "zip": true
+}