storybookのメジャーバージョンアップデート

apps/app-frontend-server/.storybook/main.ts

@@ -1,22 +1,17 @@
 import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
 import tsconfigPathsPlugin from 'vite-tsconfig-paths';
 
-import type { StorybookConfig } from '@storybook/experimental-nextjs-vite';
+import type { StorybookConfig } from '@storybook/nextjs-vite';
 
 const config: StorybookConfig = {
   stories: ['../src/**/stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
-    {
-      name: '@storybook/addon-essentials',
-      options: { docs: false },
-    },
-    '@storybook/addon-actions',
-    'storycap',
+    'storycapture',
   ],
   typescript: {
     reactDocgen: 'react-docgen',
   },
-  framework: '@storybook/experimental-nextjs-vite',
+  framework: '@storybook/nextjs-vite',
   staticDirs: ['./public'],
   viteFinal: config => ({
     ...config,

apps/app-frontend-server/.storybook/preview.tsx

@@ -3,10 +3,10 @@ import { connectDatabase } from '@trastocker/drizzle-helper/sql-js';
 import ms from 'ms';
 import { initialize, mswLoader } from 'msw-storybook-addon';
 import { ToastContainer } from 'react-toastify';
-import { withScreenshot } from 'storycap';
+import { withScreenshot } from 'storycapture';
 import { Provider } from 'urql';
 
-import type { Preview } from '@storybook/react';
+import type { Preview } from '@storybook/react-vite';
 
 import useUrql from '@hooks/useUrql';
 import { setupHandlers } from '@mocks/index';

apps/app-frontend-server/package.json

@@ -18,7 +18,7 @@
     "pages:build": "pnpm next-on-pages",
     "preview": "pnpm pages:build && wrangler pages dev",
     "storybook:build": "storybook build --test",
-    "storybook:screenshot": "storycap http://localhost:6007 --serverCmd 'http-server storybook-static --port 6007'",
+    "storybook:screenshot": "storycapture http://localhost:6007 --serverCmd 'http-server storybook-static --port 6007'",
     "test": "vitest run",
     "test:watch": "vitest run --watch",
     "generate:mock-database": "tsx scripts/generate-mock-database.ts"
@@ -58,12 +58,8 @@
     "@huuyafwww/eslint-config-storybook": "^1.2.0",
     "@huuyafwww/tsconfig-common": "^1.1.2",
     "@huuyafwww/tsconfig-next": "^1.2.1",
-    "@storybook/addon-actions": "^8.6.12",
-    "@storybook/addon-essentials": "^8.6.12",
-    "@storybook/blocks": "^8.6.12",
-    "@storybook/experimental-nextjs-vite": "^8.6.12",
-    "@storybook/react": "^8.6.12",
-    "@storybook/test": "^8.6.12",
+    "@storybook/nextjs-vite": "^9.0.12",
+    "@storybook/react-vite": "^9.0.12",
     "@tailwindcss/postcss": "^4.1.10",
     "@tailwindcss/vite": "^4.1.6",
     "@testing-library/react": "^16.3.0",
@@ -92,8 +88,8 @@
     "reg-publish-s3-plugin": "^0.14.4",
     "reg-suit": "^0.14.4",
     "sql.js": "1.12.0",
-    "storybook": "^8.6.12",
-    "storycap": "^5.0.1",
+    "storybook": "^9.0.12",
+    "storycapture": "^9.0.0",
     "tailwindcss": "^4.1.10",
     "tsx": "^4.19.3",
     "typescript": "^5.8.3",

apps/app-frontend-server/src/components/decorators/ReactHookFormDecorator/index.tsx

@@ -1,5 +1,5 @@
-import { action } from '@storybook/addon-actions';
 import { useForm, FormProvider } from 'react-hook-form';
+import { action } from 'storybook/actions';
 
 import type { FieldValues } from 'react-hook-form';
 

apps/app-frontend-server/src/components/domains/UserLoginForm/stories.tsx

@@ -1,6 +1,6 @@
 import UserLoginForm from '.';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 const meta = {
   title: 'Domain/UserLoginForm',

apps/app-frontend-server/src/components/domains/UserRegisterForm/stories.tsx

@@ -1,6 +1,6 @@
 import UserRegisterForm from '.';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 const meta = {
   title: 'Domain/UserRegisterForm',

apps/app-frontend-server/src/components/domains/UserVerifyErrorMessage/stories.tsx

@@ -1,6 +1,6 @@
 import UserVerifyErrorMessage from '.';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 const meta = {
   title: 'Domain/UserVerifyErrorMessage',

apps/app-frontend-server/src/components/domains/UserVerifySuccessMessage/stories.tsx

@@ -1,6 +1,6 @@
 import UserVerifySuccessMessage from '.';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 const meta = {
   title: 'Domain/UserVerifySuccessMessage',

apps/app-frontend-server/src/components/domains/WorkspaceCreateForm/stories.tsx

@@ -1,6 +1,6 @@
 import WorkspaceCreateForm from '.';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 const meta = {
   title: 'Domain/WorkspaceCreateForm',

apps/app-frontend-server/src/components/domains/WorkspaceJoinForm/stories.tsx

@@ -1,6 +1,6 @@
 import WorkspaceJoinForm from '.';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 const meta = {
   title: 'Domain/WorkspaceJoinForm',

apps/app-frontend-server/src/components/pages/UserLoginPage/stories.tsx

@@ -1,6 +1,6 @@
 import UserLoginPage from '.';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import AuthLayout from '@layouts/AuthLayout';
 

apps/app-frontend-server/src/components/pages/UserRegisterPage/stories.tsx

@@ -1,6 +1,6 @@
 import UserRegisterPage from '.';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import AuthLayout from '@layouts/AuthLayout';
 

apps/app-frontend-server/src/components/pages/UserVerifyPage/stories.tsx

@@ -4,7 +4,7 @@ import { and, isNull, isNotNull } from 'drizzle-orm';
 
 import UserVerifyPage from '.';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import AuthLayout from '@layouts/AuthLayout';
 

apps/app-frontend-server/src/components/pages/WorkspaceCreatePage/stories.tsx

@@ -1,6 +1,6 @@
 import WorkspaceCreatePage from '.';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import AuthLayout from '@layouts/AuthLayout';
 

apps/app-frontend-server/src/components/shared/InputControl/stories.tsx

@@ -1,6 +1,6 @@
 import InputControl from './';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import ReactHookFormDecorator from '@components/decorators/ReactHookFormDecorator';
 

apps/app-frontend-server/src/components/shared/Trans/stories.tsx

@@ -1,6 +1,6 @@
 import Trans from '.';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 const meta = {
   title: 'Shared/Trans',

apps/app-frontend-server/src/layouts/AuthLayout/stories.tsx

@@ -1,6 +1,6 @@
 import AuthLayout from './';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 const meta = {
   title: 'Layouts/AuthLayout',

apps/app-frontend-server/src/layouts/HomeLayout/stories.tsx

@@ -1,6 +1,6 @@
 import HomeLayout from './';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 const meta = {
   title: 'Layouts/HomeLayout',

libraries/ui-elements/.storybook/main.ts

@@ -4,12 +4,7 @@ import type { StorybookConfig } from '@storybook/react-vite';
 
 const config: StorybookConfig = {
   stories: ['../src/**/stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: [
-    {
-      name: '@storybook/addon-essentials',
-      options: { docs: false },
-    },
-  ],
+  addons: [],
   typescript: {
     reactDocgen: 'react-docgen-typescript',
   },

libraries/ui-elements/.storybook/preview.tsx

@@ -1,8 +1,8 @@
 import '@styles/tailwind.css';
 import '@styles/globals.css';
-import { withScreenshot } from 'storycap';
+import { withScreenshot } from 'storycapture';
 
-import type { Preview } from '@storybook/react';
+import type { Preview } from '@storybook/react-vite';
 
 const options: {
   serviceWorker?: {

libraries/ui-elements/package.json

@@ -28,7 +28,7 @@
     "lint:code": "eslint . --cache",
     "lint:type": "tsc --pretty --noEmit",
     "storybook:build": "storybook build --test",
-    "storybook:screenshot": "storycap http://localhost:6007 --serverCmd 'http-server storybook-static --port 6007'"
+    "storybook:screenshot": "storycapture http://localhost:6007 --serverCmd 'http-server storybook-static --port 6007'"
   },
   "dependencies": {
     "@tailwindcss/cli": "^4.1.10",
@@ -49,26 +49,21 @@
     "@huuyafwww/eslint-config-storybook": "^1.2.0",
     "@huuyafwww/tsconfig-common": "^1.1.2",
     "@huuyafwww/tsconfig-react": "^1.0.0",
-    "@storybook/addon-actions": "^8.6.12",
-    "@storybook/addon-essentials": "^8.6.12",
-    "@storybook/blocks": "^8.6.12",
-    "@storybook/react": "^8.6.12",
-    "@storybook/react-vite": "^8.6.12",
-    "@storybook/test": "^8.6.12",
+    "@storybook/react-vite": "^9.0.12",
+    "@tailwindcss/postcss": "^4.1.10",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
     "@vanilla-extract/esbuild-plugin": "^2.3.15",
     "@vanilla-extract/vite-plugin": "^5.0.1",
     "http-server": "^14.1.1",
     "npm-run-all2": "^7.0.2",
     "postcss": "^8.5.6",
-    "@tailwindcss/postcss": "^4.1.10",
     "reg-keygen-git-hash-plugin": "^0.14.3",
     "reg-notify-github-plugin": "^0.14.4",
     "reg-publish-s3-plugin": "^0.14.4",
     "reg-suit": "^0.14.4",
-    "storybook": "^8.6.12",
-    "storycap": "^5.0.1",
+    "storybook": "^9.0.12",
+    "storycapture": "^9.0.0",
     "tsup": "^8.4.0",
     "typescript": "^5.8.3",
     "vite-tsconfig-paths": "^5.1.4"

libraries/ui-elements/src/components/Box/stories.tsx

@@ -2,7 +2,7 @@ import { defaultVariant } from './styles.css';
 
 import Box from '.';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 const meta = {
   title: 'Box',

libraries/ui-elements/src/components/Button/stories.tsx

@@ -1,18 +1,18 @@
-import { fn } from '@storybook/test';
+import { action } from 'storybook/actions';
 
 import { defaultVariant } from './styles.css';
 
 import Button from '.';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 const meta = {
   title: 'Button',
   component: Button,
   args: {
     as: 'button',
     children: 'Button',
-    onPress: fn(),
+    onPress: action('onPress'),
     variant: defaultVariant,
   },
   argTypes: {},

libraries/ui-elements/src/components/Divider/stories.tsx

@@ -1,6 +1,6 @@
 import Divider from '.';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 const meta = {
   title: 'Divider',

libraries/ui-elements/src/components/ErrorMessage/stories.tsx

@@ -1,6 +1,6 @@
 import ErrorMessage from '.';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 const meta = {
   title: 'ErrorMessage',

libraries/ui-elements/src/components/IconBars/stories.tsx

@@ -1,6 +1,6 @@
 import IconBars from './';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 const meta = {
   title: 'Icon/Bars',

libraries/ui-elements/src/components/IconCheckCircle/stories.tsx

@@ -1,6 +1,6 @@
 import IconCheckCircle from './';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 const meta = {
   title: 'Icon/CheckCircle',

libraries/ui-elements/src/components/IconEllipsisHorizontal/stories.tsx

@@ -1,6 +1,6 @@
 import IconEllipsisHorizontal from './';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 const meta = {
   title: 'Icon/EllipsisHorizontal',

libraries/ui-elements/src/components/IconEmail/stories.tsx

@@ -1,6 +1,6 @@
 import IconEmail from './';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 const meta = {
   title: 'Icon/Email',

libraries/ui-elements/src/components/IconExclamationCircle/stories.tsx

@@ -1,6 +1,6 @@
 import IconExclamationCircle from './';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 const meta = {
   title: 'Icon/ExclamationCircle',

libraries/ui-elements/src/components/IconEye/stories.tsx

@@ -1,6 +1,6 @@
 import IconEye from '.';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 const meta = {
   title: 'Icon/Eye',

libraries/ui-elements/src/components/IconEyeOff/stories.tsx

@@ -1,6 +1,6 @@
 import IconEyeOff from '.';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 const meta = {
   title: 'Icon/EyeOff',

libraries/ui-elements/src/components/IconKey/stories.tsx

@@ -1,6 +1,6 @@
 import IconKey from '.';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 const meta = {
   title: 'Icon/Key',

libraries/ui-elements/src/components/IconTriangleAlert/stories.tsx

@@ -1,6 +1,6 @@
 import IconTriangleAlert from '.';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 const meta = {
   title: 'Icon/TriangleAlert',

libraries/ui-elements/src/components/Input/stories.tsx

@@ -2,7 +2,7 @@ import { defaultVariant } from './styles.css';
 
 import Input from '.';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 const meta = {
   title: 'Input',

libraries/ui-elements/src/components/LogoTrastocker/stories.tsx

@@ -1,6 +1,6 @@
 import LogoTrastocker from '.';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 const meta = {
   title: 'LogoTrastocker',