chore: npx storybook automigrate (#1967)

.storybook/main.ts

@@ -3,13 +3,17 @@ import type { StorybookConfig } from '@storybook/react-vite'
 const config: StorybookConfig = {
   staticDirs: ['./public'],
   stories: ['./stories/**/*.stories.{ts,tsx}'],
-  addons: ['@storybook/addon-essentials'],
+  addons: ['@storybook/addon-essentials', '@chromatic-com/storybook'],
+
   framework: {
     name: '@storybook/react-vite',
     options: {},
   },
-  docs: {
-    autodocs: true,
+
+  docs: {},
+
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
   },
 }
 

.storybook/manager.ts

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

.storybook/preview.tsx

@@ -7,12 +7,15 @@ const preview: Preview = {
   parameters: {
     layout: 'fullscreen',
   },
+
   decorators: [
     (Story) => (
       <React.Suspense fallback={null}>
         <Story />
       </React.Suspense>
     ),
   ],
+
+  tags: ['autodocs'],
 }
 export default preview

.storybook/stories/Svg.stories.tsx

@@ -1,5 +1,4 @@
-import { useEffect } from '@storybook/addons'
-import { useArgs } from '@storybook/client-api'
+import { useEffect, useArgs } from '@storybook/preview-api'
 import { ComponentMeta } from '@storybook/react'
 import * as React from 'react'
 import { ComponentProps, FC, Suspense } from 'react'

package.json

@@ -83,32 +83,34 @@
   "devDependencies": {
     "@babel/core": "^7.14.3",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
     "@babel/plugin-transform-modules-commonjs": "^7.14.0",
     "@babel/plugin-transform-runtime": "^7.14.3",
     "@babel/preset-env": "^7.21.5",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.5",
+    "@chromatic-com/storybook": "^1",
     "@commitlint/cli": "^12.0.1",
     "@commitlint/config-conventional": "^12.0.1",
     "@react-three/fiber": "^8.0.8",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^19.0.0",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
-    "@storybook/addon-actions": "^7.0.12",
-    "@storybook/addon-controls": "^7.0.12",
-    "@storybook/addon-essentials": "^7.0.12",
-    "@storybook/addons": "^7.0.12",
-    "@storybook/preset-typescript": "^3.0.0",
-    "@storybook/react": "^7.0.12",
-    "@storybook/react-vite": "^7.0.12",
-    "@storybook/theming": "^7.0.12",
+    "@storybook/addon-actions": "^8.1.5",
+    "@storybook/addon-controls": "^8.1.5",
+    "@storybook/addon-essentials": "^8.1.5",
+    "@storybook/preview-api": "^8.1.5",
+    "@storybook/react": "^8.1.5",
+    "@storybook/react-vite": "^8.1.5",
+    "@storybook/theming": "^8.1.5",
     "@types/jest": "^26.0.10",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@types/three": "^0.151.0",
     "@typescript-eslint/eslint-plugin": "^5.4.0",
     "@typescript-eslint/parser": "^5.4.0",
+    "@vitejs/plugin-react": "^4.3.0",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.1.0",
     "copyfiles": "^2.4.1",
@@ -135,7 +137,7 @@
     "rollup-plugin-terser": "^7.0.2",
     "semantic-release": "^21.0.6",
     "serve": "^14.2.0",
-    "storybook": "^7.0.12",
+    "storybook": "^8.1.5",
     "three": "^0.151.0",
     "ts-node": "^10.9.1",
     "typescript": "^4.7.4",

vite.config.ts

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