Fix Storybook 10 build: complete v7→v10 migration (#3007)

* Initial plan

* Initial plan for fixing storybook build failures

Co-authored-by: llastflowers <55068883+llastflowers@users.noreply.github.com>

* Fix Storybook 10 build: update packages, add SCSS/Babel/docs support, fix compat shims

Co-authored-by: llastflowers <55068883+llastflowers@users.noreply.github.com>

* Address code review: remove unused assert dep, rename config var, clean up shim script

Co-authored-by: llastflowers <55068883+llastflowers@users.noreply.github.com>

* Fix docs npm install failure due to storybook peer dependency conflicts (#3008)

* Initial plan

* fix: resolve storybook peer dependency conflicts in docs install

- Update @geometricpanda/storybook-addon-badges to ^2.0.5 which supports @storybook/blocks@^8.3.0 (v2.0.0 only supported ^7.0.0)
- Add docs/.npmrc with legacy-peer-deps=true to handle the intentional mixed storybook 8/10 package setup used by shims and webpack aliases

Co-authored-by: llastflowers <55068883+llastflowers@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: llastflowers <55068883+llastflowers@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: llastflowers <55068883+llastflowers@users.noreply.github.com>

Author: Copilot

docs/.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

docs/.storybook/main.js

@@ -1,23 +1,17 @@
 import sass from 'sass'
+import {createRequire} from 'module'
+import {fileURLToPath} from 'url'
+
+const require = createRequire(import.meta.url)
 
 /** @type { import('@storybook/react-webpack5').StorybookConfig } */
 const config = {
   stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
+    '@storybook/addon-webpack5-compiler-babel',
+    '@storybook/addon-docs',
     'storybook-addon-pseudo-states',
-    '@storybook/addon-storysource',
     '@geometricpanda/storybook-addon-badges',
-    {
-      name: '@storybook/addon-styling',
-      options: {
-        sass: {
-          implementation: sass,
-        },
-      },
-    },
   ],
   framework: {
     name: '@storybook/react-webpack5',
@@ -27,5 +21,30 @@ const config = {
     autodocs: 'tag',
   },
   staticDirs: ['../stories/static'],
+  async webpackFinal(webpackConfig) {
+    // Alias @storybook/blocks to the v10-compatible addon-docs/blocks
+    webpackConfig.resolve = webpackConfig.resolve || {}
+    webpackConfig.resolve.alias = {
+      ...webpackConfig.resolve.alias,
+      '@storybook/blocks': fileURLToPath(import.meta.resolve('@storybook/addon-docs/blocks')),
+    }
+
+    // Add SCSS support using sass-loader
+    webpackConfig.module.rules.push({
+      test: /\.s[ac]ss$/,
+      use: [
+        require.resolve('style-loader'),
+        require.resolve('css-loader'),
+        {
+          loader: require.resolve('sass-loader'),
+          options: {
+            implementation: sass,
+          },
+        },
+      ],
+      sideEffects: true,
+    })
+    return webpackConfig
+  },
 }
 export default config

docs/.storybook/manager.js

@@ -1,4 +1,4 @@
-import {addons} from '@storybook/manager-api'
+import {addons} from 'storybook/manager-api'
 import theme from './theme'
 
 addons.setConfig({