refactor(storybook): #ENABLING-684 update storybook to v9

apps/docs/.storybook/main.ts

@@ -1,26 +1,26 @@
 import type { StorybookConfig } from '@storybook/react-vite';
 import { dirname, join, 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" />

apps/docs/src/stories/colors/Neo.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/Neo" />

apps/docs/src/stories/colors/One.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/One" />

apps/docs/src/stories/icons/Icons-apps.mdx

@@ -1,5 +1,5 @@
 import * as icons from '@edifice.io/react/icons/apps';
-import { Meta, Story } from '@storybook/blocks';
+import { Meta, Story } from '@storybook/addon-docs/blocks';
 import { Icons } from '../../components/Icons';
 
 <Meta title="Design System/Icons/Apps and Connectors" />

apps/docs/src/stories/icons/Icons.Audience.mdx

@@ -1,5 +1,5 @@
 import * as icons from "@edifice.io/react/icons/audience";
-import { Meta, Story } from "@storybook/blocks";
+import { Meta, Story } from "@storybook/addon-docs/blocks";
 import { Icons } from "../../components/Icons";
 
 <Meta title="Design System/Icons/Audience Icons" />

apps/docs/src/stories/icons/Icons.Nav.mdx

@@ -1,5 +1,5 @@
 import * as icons from "@edifice.io/react/icons/nav";
-import { Meta, Story } from "@storybook/blocks";
+import { Meta, Story } from "@storybook/addon-docs/blocks";
 import { Icons } from "../../components/Icons";
 
 <Meta title="Design System/Icons/Nav Icons" />

apps/docs/src/stories/icons/Icons.mdx

@@ -1,5 +1,5 @@
 import * as icons from "@edifice.io/react/icons";
-import { Meta, Story } from "@storybook/blocks";
+import { Meta, Story } from "@storybook/addon-docs/blocks";
 import { Icons } from "../../components/Icons";
 
 <Meta title="Design System/Icons/Common Icons" />

apps/docs/src/stories/introduction/01-introduction.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/blocks';
+import { Meta, Story } from "@storybook/addon-docs/blocks";
 
 <Meta title="Introduction/Welcome" />
 

apps/docs/src/stories/introduction/02-getting-started.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story } from "@storybook/blocks";
+import { Meta, Story } from "@storybook/addon-docs/blocks";
 
 <Meta title="Introduction/Getting Started" />
 

apps/docs/src/stories/introduction/03-theming.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story } from "@storybook/blocks";
+import { Meta, Story } from "@storybook/addon-docs/blocks";
 
 <Meta title="Introduction/Theming" />
 

apps/docs/src/stories/introduction/04-contributing.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story } from "@storybook/blocks";
+import { Meta, Story } from "@storybook/addon-docs/blocks";
 
 <Meta title="Introduction/Contributing" />
 

apps/docs/src/stories/introduction/05-code-convention.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story } from "@storybook/blocks";
+import { Meta, Story } from "@storybook/addon-docs/blocks";
 
 <Meta title="Introduction/Code Convention" />
 

package.json

@@ -38,19 +38,15 @@
     "test:client": "turbo run test --filter=./packages/client"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "3.2.7",
+    "@chromatic-com/storybook": "4.1.3",
+    "react": "catalog:",
+    "react-dom": "catalog:",
     "@eslint/js": "catalog:",
     "@skypack/package-check": "0.2.2",
-    "@storybook/addon-a11y": "8.4.5",
-    "@storybook/addon-essentials": "8.4.5",
-    "@storybook/addon-interactions": "8.4.5",
-    "@storybook/addon-links": "8.4.5",
-    "@storybook/blocks": "8.4.5",
-    "@storybook/manager-api": "8.4.5",
-    "@storybook/react": "8.4.5",
-    "@storybook/react-vite": "8.4.5",
-    "@storybook/test": "8.4.5",
-    "@storybook/theming": "8.4.5",
+    "@storybook/addon-a11y": "9.1.17",
+    "@storybook/addon-docs": "9.1.17",
+    "@storybook/addon-links": "9.1.17",
+    "@storybook/react-vite": "9.1.17",
     "@testing-library/jest-dom": "6.5.0",
     "@testing-library/react": "16.0.1",
     "@testing-library/user-event": "14.5.2",
@@ -73,7 +69,7 @@
     "prettier": "catalog:",
     "rollup-plugin-pure": "catalog:",
     "rollup-plugin-visualizer": "5.12.0",
-    "storybook": "8.4.5",
+    "storybook": "9.1.17",
     "turbo": "catalog:",
     "typescript": "catalog:",
     "typescript-eslint": "catalog:",

packages/bootstrap/src/components/_media-library.scss

@@ -21,7 +21,7 @@
     }
 
     &:hover {
-      background-color: rgb(var(--#{$prefix}secondary, 0.1));
+      background-color: rgb(var(--#{$prefix}secondary) / 10%);
 
       .figure-caption {
         color: var(--#{$prefix}secondary);

packages/react/package.json

@@ -94,7 +94,6 @@
     "@edifice.io/utilities": "workspace:*",
     "@floating-ui/react": "0.26.0",
     "@pixi/mixin-get-child-by-name": "7.4.2",
-    "@pixi/react": "7.1.2",
     "@popperjs/core": "2.11.8",
     "@tiptap/core": "2.11.0",
     "@tiptap/extension-blockquote": "2.11.0",
@@ -142,7 +141,7 @@
     "html-react-parser": "4.2.1",
     "ohash": "1.1.3",
     "pako": "2.1.0",
-    "pixi.js": "7.4.2",
+    "pixi.js": "8.15.0",
     "react-hot-toast": "2.6.0",
     "react-intersection-observer": "9.5.3",
     "react-pdf": "10.3.0",

packages/react/src/components/ActionBar/ActionBar.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-vite';
 
 import { Button } from '../Button';
 import ActionBar, { ActionBarProps } from './ActionBar';

packages/react/src/components/AddAttachments/AddAttachments.stories.tsx

@@ -1,6 +1,6 @@
-import { StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
+import { StoryObj } from '@storybook/react-vite';
 import { useState } from 'react';
+import { fn } from 'storybook/test';
 import { Grid } from '../Grid';
 import { AddAttachments } from './AddAttachments';
 import { Attachment } from './models/attachment';

packages/react/src/components/AddAttachments/components/SingleAttachment.tsx

@@ -1,7 +1,4 @@
-import {
-  Attachment as AttachmentComponent,
-  IconButton,
-} from '../../..';
+import { Attachment as AttachmentComponent, IconButton } from '../../..';
 import {
   IconDelete,
   IconDownload,

packages/react/src/components/Alert/Alert.stories.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useRef, useState } from 'react';
 
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-vite';
 
 import { Button } from '../Button';
 import Alert, { AlertRef } from './Alert';

packages/react/src/components/AppHeader/AppHeader.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-vite';
 import Breadcrumb from '../Breadcrumb/Breadcrumb';
 import { Button } from '../Button';
 import AppHeader from './AppHeader';

packages/react/src/components/AppIcon/AppIcon.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-vite';
 import AppIcon, { AppIconProps } from './AppIcon';
 
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export

packages/react/src/components/Attachment/Attachment.stories.tsx

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 
 import { IconDelete, IconDownload } from '../../modules/icons/components';
 import { IconButton } from '../Button';

packages/react/src/components/Avatar/Avatar.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-vite';
 
 import noAvatar from '@edifice.io/bootstrap/dist/images/avatar/no-avatar.svg';
 import Avatar from './Avatar';

packages/react/src/components/AvatarGroup/AvatarGroup.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { IconOptions } from '../../modules/icons/components';
 import AvatarGroup from './AvatarGroup';
 

packages/react/src/components/Badge/Badge.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-vite';
 
 import { IconHourglass } from '../../modules/icons/components';
 import Badge, { BadgeProps } from './Badge';

packages/react/src/components/Breadcrumb/Breadcrumb.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-vite';
 import Breadcrumb from './Breadcrumb';
 
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export

packages/react/src/components/Button/stories/Button.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-vite';
 
 import {
   IconAddUser,

packages/react/src/components/Button/stories/IconButton.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-vite';
 
 import {
   IconAddUser,

packages/react/src/components/Button/stories/SearchButton.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-vite';
 
 import { IconSearch, IconUserSearch } from '../../../modules/icons/components';
 import SearchButton from '../SearchButton';

packages/react/src/components/Card/Card.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-vite';
 
 import { useState } from 'react';
 import { IconPaperclip, IconUsers } from '../../modules/icons/components';

packages/react/src/components/Checkbox/Checkbox.stories.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-vite';
 
 import Checkbox from './Checkbox';
 

packages/react/src/components/ColorPicker/stories/ColorPicker.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-vite';
 
 import { useState } from 'react';
 import { ColorPaletteItem, DefaultPalette } from '../ColorPalette';

packages/react/src/components/Combobox/Combobox.stories.tsx

@@ -7,7 +7,7 @@ import {
   useState,
 } from 'react';
 
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-vite';
 import { IconBookmark, IconClose } from '../../modules/icons/components';
 import { IconButton } from '../Button';
 import { Dropdown } from '../Dropdown';