feat(storybook): #ENABLING-684 update storybook to v9 (#440)

chore: fix rushstack crash version

Author: pascalsaussier-edifice

apps/docs/.storybook/main.ts

@@ -1,26 +1,26 @@
 import type { StorybookConfig } from '@storybook/react-vite';
-import { dirname, join, resolve } from 'path';
+import { dirname, resolve } from 'path';
+import { fileURLToPath } from 'url';
 
 const config: StorybookConfig = {
   stories: [
-    '../../../packages/**/src/**/*.stories.@(js|jsx|ts|tsx)',
-    '../../../packages/**/src/**/*.mdx',
+    '../../../packages/react/src/**/*.stories.@(js|jsx|ts|tsx)',
+    '../../../packages/react/src/**/*.mdx',
     '../src/stories/**/*.stories.@(js|jsx|ts|tsx)',
     '../src/stories/**/*.mdx',
   ],
   staticDirs: ['../public'],
   addons: [
-    getAbsolutePath('@storybook/addon-a11y'),
-    getAbsolutePath('@storybook/addon-links'),
-    getAbsolutePath('@storybook/addon-essentials'),
-    getAbsolutePath('@storybook/addon-interactions'),
-    getAbsolutePath('@chromatic-com/storybook'),
+    '@storybook/addon-a11y',
+    '@storybook/addon-links',
+    '@storybook/addon-docs',
+    '@chromatic-com/storybook',
   ],
   typescript: {
     reactDocgen: 'react-docgen',
   },
   framework: {
-    name: getAbsolutePath('@storybook/react-vite'),
+    name: '@storybook/react-vite',
     options: { strictMode: false },
   },
   docs: {},
@@ -29,20 +29,33 @@ const config: StorybookConfig = {
     const { mergeConfig } = await import('vite');
 
     return mergeConfig(config, {
+      esbuild: {
+        jsx: 'automatic',
+      },
       // Add dependencies to pre-optimization
       resolve: {
         alias: {
           '@images': resolve(
-            __dirname,
-            'node_modules/@edifice.io/bootstrap/dist/images',
+            dirname(fileURLToPath(import.meta.url)),
+            '../node_modules/@edifice.io/bootstrap/dist/images',
           ),
         },
       },
+      optimizeDeps: {
+        include: [
+          'react',
+          'react-dom',
+          'react/jsx-runtime',
+          'react-i18next',
+          'i18next',
+          '@tanstack/react-query',
+          'msw-storybook-addon',
+        ],
+        esbuildOptions: {
+          sourcemap: false,
+        },
+      },
     });
   },
 };
 export default config;
-
-function getAbsolutePath(value: string): any {
-  return dirname(require.resolve(join(value, 'package.json')));
-}

apps/docs/.storybook/manager.ts

@@ -1,6 +1,6 @@
 // .storybook/manager
 
-import { addons } from "@storybook/manager-api";
+import { addons } from "storybook/manager-api";
 import theme from "./theme";
 
 addons.setConfig({

apps/docs/.storybook/preview.tsx

@@ -1,4 +1,4 @@
-import { Preview } from '@storybook/react';
+import { Preview } from '@storybook/react-vite';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { initialize, mswLoader } from 'msw-storybook-addon';
 import { I18nextProvider } from 'react-i18next';
@@ -8,7 +8,6 @@ import {
   EdificeThemeProvider,
 } from '../../../packages/react/src/providers';
 
-import React from 'react';
 import i18n from '../i18n';
 
 import {

apps/docs/.storybook/theme.ts

@@ -1,6 +1,6 @@
 // .storybook/theme
 
-import { create } from "@storybook/theming/create";
+import { create } from "storybook/theming/create";
 
 export default create({
   base: "light",

apps/docs/package.json

@@ -39,4 +39,4 @@
     "@edifice.io/config": "workspace:*",
     "vite": "catalog:"
   }
-}
+}

apps/docs/src/stories/Radius.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story } from "@storybook/blocks";
+import { Meta, Story } from "@storybook/addon-docs/blocks";
 import { Card } from "../components/Card";
 
 <Meta title="Design System/Tokens/Radius" />

apps/docs/src/stories/Shadows.mdx

@@ -1,5 +1,5 @@
-import { Meta } from '@storybook/blocks';
-import { Card } from '../components/Card';
+import { Meta } from "@storybook/addon-docs/blocks";
+import { Card } from "../components/Card";
 
 <Meta title="Design System/Tokens/Shadows" />
 

apps/docs/src/stories/Spacings.mdx

@@ -1,5 +1,5 @@
-import { Meta, Story } from '@storybook/blocks';
-import { Card } from '../components/Card';
+import { Meta, Story } from "@storybook/addon-docs/blocks";
+import { Card } from "../components/Card";
 
 <Meta title="Design System/Tokens/Spacings" />
 

apps/docs/src/stories/Typography.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/blocks';
+import { Meta, Story } from '@storybook/addon-docs/blocks';
 import { Card } from '../components/Card';
 
 <Meta title="Design System/Tokens/Typography" />

apps/docs/src/stories/colors/Common.mdx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs/blocks";
 import { Colors } from "../../components/Colors";
 
 <Meta title="Design System/Colors/Common" />