chore: upgrade Storybook to version 8

.storybook/main.ts

@@ -2,7 +2,7 @@ import type { StorybookConfig } from '@storybook/react-vite';
 
 const config: StorybookConfig = {
   stories: [
-    '../stories/**/*.stories.mdx',
+    '../stories/**/*.mdx',
     '../stories/**/*.stories.@(js|jsx|ts|tsx)',
     '../components/**/*.stories.@(js|jsx|ts|tsx)',
   ],
@@ -27,8 +27,8 @@ const config: StorybookConfig = {
     options: {},
   },
 
-  docs: {
-    autodocs: true,
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
   },
 };
 

.storybook/preview.jsx

@@ -1,14 +1,16 @@
-import React from 'react';
-import { FaencyProvider } from '../components/FaencyProvider';
 import { DocsContainer } from '@storybook/addon-docs';
+import { addons } from '@storybook/preview-api';
+import { themes } from '@storybook/theming';
+import React from 'react';
+import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';
+
 import { globalCss } from '../';
+import { FaencyProvider } from '../components/FaencyProvider';
 import { darkTheme, lightTheme } from '../stitches.config';
-import { useEffect } from 'react';
-import { themes } from '@storybook/theming';
-import { useDarkMode } from 'storybook-dark-mode';
+
+const channel = addons.getChannel();
 
 export const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {
     matchers: {
       color: /(background|color)$/i,
@@ -20,7 +22,12 @@ export const parameters = {
   },
   docs: {
     container: (context) => {
-      const isDark = useDarkMode();
+      const [isDark, setDark] = React.useState();
+
+      React.useEffect(() => {
+        channel.on(DARK_MODE_EVENT_NAME, setDark);
+        return () => channel.removeListener(DARK_MODE_EVENT_NAME, setDark);
+      }, [channel, setDark]);
 
       const props = {
         ...context,
@@ -40,7 +47,7 @@ const globalStyle = globalCss({
 
 export const decorators = [
   (renderStory) => {
-    useEffect(() => {
+    React.useEffect(() => {
       darkTheme('neon').toString();
       lightTheme('neon').toString();
     }, []);
@@ -53,3 +60,5 @@ export const decorators = [
     );
   },
 ];
+
+export const tags = ['autodocs'];

components/Avatar/Avatar.stories.tsx

@@ -63,7 +63,7 @@ Fallback.argTypes = {
     options: ['gray', 'red', 'purple', 'blue', 'green', 'orange'],
   },
   fallback: {
-    control: 'string',
+    control: 'text',
   },
 };
 

components/Bubble/Bubble.stories.tsx

@@ -38,9 +38,6 @@ Colors.argTypes = {
     control: 'inline-radio',
     options: ['x-small', 'small', 'medium', 'large', 'x-large'],
   },
-  variant: {
-    control: true,
-  },
 };
 
 export const Sizes: StoryFn<typeof BubbleForStory> = (args) => (

package.json

@@ -88,23 +88,23 @@
     "@semantic-release/npm": "^9.0.0",
     "@semantic-release/release-notes-generator": "^10.0.3",
     "@stitches/react": "1.2.7",
-    "@storybook/addon-actions": "^7.6.17",
-    "@storybook/addon-docs": "^7.6.17",
-    "@storybook/addon-essentials": "^7.6.17",
-    "@storybook/addon-links": "^7.6.17",
-    "@storybook/builder-vite": "^7.6.17",
-    "@storybook/client-api": "^7.6.17",
-    "@storybook/mdx2-csf": "^0.0.3",
-    "@storybook/react": "^7.6.17",
-    "@storybook/react-vite": "^7.6.17",
-    "@storybook/theming": "^7.6.17",
+    "@storybook/addon-actions": "^8.2.2",
+    "@storybook/addon-docs": "^8.2.2",
+    "@storybook/addon-essentials": "^8.2.2",
+    "@storybook/addon-links": "^8.2.2",
+    "@storybook/builder-vite": "^8.2.2",
+    "@storybook/preview-api": "^8.2.2",
+    "@storybook/react": "^8.2.2",
+    "@storybook/react-vite": "^8.2.2",
+    "@storybook/theming": "^8.2.2",
     "@types/jest": "^27.4.1",
     "@types/jest-axe": "^3.5.3",
     "@types/lodash.merge": "^4.6.6",
     "@types/node": "^20.10.0",
     "@types/react": "18.2.0",
     "@types/react-dom": "18.2.0",
     "@types/tinycolor2": "^1.4.3",
+    "@vitejs/plugin-react": "^4.3.1",
     "babel-loader": "^8.2.2",
     "conventional-changelog-conventionalcommits": "^4.6.3",
     "cross-env": "^7.0.3",
@@ -119,15 +119,15 @@
     "rollup": "^2.70.1",
     "rollup-plugin-typescript2": "^0.36.0",
     "semantic-release": "^19.0.2",
-    "storybook": "^7.6.17",
-    "storybook-dark-mode": "^3.0.3",
+    "storybook": "^8.2.2",
+    "storybook-dark-mode": "^4.0.2",
     "tinycolor2": "^1.4.2",
     "typescript": "5.4.5",
     "use-debounce": "9.0.2",
     "vite": "^5.1.5"
   },
   "devDependencies": {
-    "@storybook/types": "^8.1.3",
+    "@storybook/types": "^8.2.2",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "babel-jest": "^27.5.1",
@@ -165,5 +165,6 @@
   },
   "engines": {
     "node": ">=18.12.1"
-  }
+  },
+  "packageManager": "[email protected]+sha1.1959a18351b811cdeedbd484a8f86c3cc3bbaf72"
 }

vite.config.ts

@@ -0,0 +1,6 @@
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [react()],
+});