Storybookのアップデート

.eslintignore

@@ -18,3 +18,4 @@
 .vercel
 
 !.*.js
+!/.storybook

.storybook/main.ts

@@ -0,0 +1,25 @@
+import { StorybookConfig } from '@storybook/nextjs';
+import { VanillaExtractPlugin } from '@vanilla-extract/webpack-plugin';
+import { merge } from 'webpack-merge';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-a11y'],
+  framework: {
+    name: '@storybook/nextjs',
+    options: {},
+  },
+  docs: {
+    autodocs: true,
+  },
+  staticDirs: ['../public'],
+  core: {
+    builder: '@storybook/builder-webpack5',
+  },
+  webpackFinal: async (config) =>
+    merge(config, {
+      plugins: [new VanillaExtractPlugin()],
+    }),
+};
+
+export default config;

.storybook/preview.tsx

@@ -1,11 +1,12 @@
 import { ArgsTable, Title } from '@storybook/addon-docs';
 import 'modern-css-reset/dist/reset.min.css';
+import { Parameters } from '@storybook/react';
 import React from 'react';
 
 import '../src/styles/globals.css';
 import { colors } from '../src/styles/themes.css';
 
-export const parameters = {
+export const parameters: Parameters = {
   controls: {
     hideNoControlsWarning: true,
   },

next.config.js

@@ -3,9 +3,6 @@ const withVanillaExtract = createVanillaExtractPlugin();
 
 const nextConfig = {
   reactStrictMode: true,
-  eslint: {
-    dirs: ['src', 'public', '.storybook'],
-  },
 };
 
 module.exports = withVanillaExtract(nextConfig);

package.json

@@ -13,8 +13,8 @@
     "fix:prettier": "prettier --write . --ignore-path .prettierignore --cache --cache-strategy content",
     "lint-staged": "lint-staged",
     "prepare": "husky install",
-    "storybook": "start-storybook -p 6006 -s ./public",
-    "build-storybook": "build-storybook -s public",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "pathpida": "pathpida --enableStatic --ignorePath .pathpidaignore --output src/utils/ && prettier --write 'src/utils/$path.ts'",
     "icons": "svgr -d src/components/base/Icons src/assets/icons",
     "images": "node src/scripts/generateImages.js",
@@ -28,34 +28,31 @@
     "next": "13.2.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-hook-form": "^7.43.7",
+    "react-hook-form": "7.43.7",
     "zod": "^3.21.4"
   },
   "devDependencies": {
-    "@babel/core": "^7.16.7",
     "@ls-lint/ls-lint": "^2.0.0",
-    "@storybook/addon-a11y": "^6.5.15",
-    "@storybook/addon-actions": "^6.5.15",
-    "@storybook/addon-essentials": "^6.5.15",
-    "@storybook/addon-links": "^6.5.15",
-    "@storybook/builder-webpack5": "^6.5.15",
-    "@storybook/manager-webpack5": "^6.5.15",
-    "@storybook/react": "^6.5.15",
+    "@storybook/addon-a11y": "^7.0.26",
+    "@storybook/addon-actions": "^7.0.26",
+    "@storybook/addon-essentials": "^7.0.26",
+    "@storybook/addon-links": "^7.0.26",
+    "@storybook/nextjs": "^7.0.26",
+    "@storybook/react": "^7.0.26",
     "@svgr/cli": "^6.5.1",
     "@types/node": "18.15.0",
     "@types/react": "18.0.28",
     "@types/react-dom": "18.0.11",
-    "@vanilla-extract/babel-plugin": "^1.1.4",
-    "@vanilla-extract/css": "^1.6.8",
-    "@vanilla-extract/next-plugin": "^2.0.1",
-    "@vanilla-extract/recipes": "^0.3.0",
-    "@vanilla-extract/sprinkles": "^1.5.1",
-    "babel-loader": "^8.2.3",
+    "@vanilla-extract/css": "^1.12.0",
+    "@vanilla-extract/next-plugin": "^2.1.3",
+    "@vanilla-extract/recipes": "^0.4.0",
+    "@vanilla-extract/sprinkles": "^1.6.1",
+    "@vanilla-extract/webpack-plugin": "^2.2.0",
     "chromatic": "^6.4.3",
     "eslint": "^8.32.0",
     "eslint-config-next": "13.2.4",
     "eslint-config-prettier": "^8.6.0",
-    "eslint-plugin-storybook": "^0.6.10",
+    "eslint-plugin-storybook": "^0.6.12",
     "git-cz": "^4.9.0",
     "husky": "^7.0.0",
     "lighthouse": "^10.3.0",
@@ -65,8 +62,9 @@
     "pathpida": "^0.20.1",
     "prettier": "^2.8.3",
     "sharp": "^0.32.1",
-    "storybook-addon-next": "^1.7.1",
-    "typescript": "4.9.5"
+    "storybook": "^7.0.26",
+    "typescript": "4.9.5",
+    "webpack-merge": "^5.9.0"
   },
   "engines": {
     "node": "18.15.0"

src/components/base/Badge/index.stories.tsx

@@ -1,19 +1,21 @@
-import { ComponentMeta, Story } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 
 import { Badge as BaseBadge } from '.';
 
-export default {
+const meta: Meta<typeof BaseBadge> = {
   title: 'Base/Badge',
   component: BaseBadge,
-} as ComponentMeta<typeof BaseBadge>;
+};
+export default meta;
 
-export const Badge: Story = () => {
-  return (
+type Story = StoryObj<typeof BaseBadge>;
+export const Badge: Story = {
+  render: () => (
     <dl>
       <dt style={{ marginBottom: '8px' }}>color=&quot;blue&quot;</dt>
       <dd style={{ marginBottom: '24px' }}>
         <BaseBadge color="blue">Badge</BaseBadge>
       </dd>
     </dl>
-  );
+  ),
 };

src/components/base/Button/index.stories.tsx

@@ -1,17 +1,19 @@
 import { action } from '@storybook/addon-actions';
-import { ComponentMeta, Story } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 
 import { CloseIcon } from '@/components/base/Icons';
 
 import { Button as BaseButton } from '.';
 
-export default {
+const meta: Meta<typeof BaseButton> = {
   title: 'Base/Button',
   component: BaseButton,
-} as ComponentMeta<typeof BaseButton>;
+};
+export default meta;
 
-export const Button: Story = () => {
-  return (
+type Story = StoryObj<typeof BaseButton>;
+export const Button: Story = {
+  render: () => (
     <dl>
       <dt style={{ marginBottom: '8px' }}>Default</dt>
       <dd style={{ marginBottom: '24px' }}>
@@ -30,5 +32,5 @@ export const Button: Story = () => {
         <CloseIcon fill="white" />
       </BaseButton>
     </dl>
-  );
+  ),
 };

src/components/base/Heading/index.stories.tsx

@@ -1,17 +1,19 @@
-import { ComponentMeta, Story } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 
 import { Heading as BaseHeading } from '.';
 
-export default {
+const meta: Meta<typeof BaseHeading> = {
   title: 'Base/Heading',
   component: BaseHeading,
-} as ComponentMeta<typeof BaseHeading>;
+};
+export default meta;
 
-export const Heading: Story = () => {
-  return (
+type Story = StoryObj<typeof BaseHeading>;
+export const Heading: Story = {
+  render: () => (
     <div>
       <BaseHeading>Heading level 1</BaseHeading>
       <BaseHeading tag="h2">Heading level 2</BaseHeading>
     </div>
-  );
+  ),
 };

src/components/base/Icons/index.stories.tsx

@@ -1,4 +1,4 @@
-import { ComponentMeta, Story } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 
 import * as Icons from '.';
 
@@ -15,9 +15,13 @@ const IconList = () => {
   );
 };
 
-export default {
+const meta: Meta<typeof IconList> = {
   title: 'Base/Icon',
   component: IconList,
-} as ComponentMeta<typeof IconList>;
+};
+export default meta;
 
-export const Icon: Story = () => <IconList />;
+type Story = StoryObj<typeof IconList>;
+export const Icon: Story = {
+  render: () => <IconList />,
+};

src/components/base/Image/index.stories.tsx

@@ -1,14 +1,16 @@
-import { ComponentMeta, Story } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 
 import { sprinkles } from '@/styles/sprinkles.css';
 
 import { Image as BaseImage, ImageSize, ImageSource } from '.';
 
-export default {
+const meta: Meta<typeof BaseImage> = {
   title: 'Base/Image',
   component: BaseImage,
-} as ComponentMeta<typeof BaseImage>;
+};
+export default meta;
 
+type Story = StoryObj<typeof BaseImage>;
 const sources: ImageSource[] = [
   {
     srcset: './images/zeus/zeus.avif',
@@ -53,8 +55,8 @@ const style = sprinkles({
   backgroundColor: 'lightBlue',
 });
 
-export const Image: Story = () => {
-  return (
+export const Image: Story = {
+  render: () => (
     <dl>
       <dt>isLazy=true</dt>
       <dd style={{ marginBottom: '16px' }}>
@@ -76,5 +78,5 @@ export const Image: Story = () => {
         />
       </dd>
     </dl>
-  );
+  ),
 };

src/components/base/Label/index.stories.tsx

@@ -1,14 +1,16 @@
-import { ComponentMeta, Story } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 
 import { Label as BaseLabel } from '.';
 
-export default {
+const meta: Meta<typeof BaseLabel> = {
   title: 'Base/Label',
   component: BaseLabel,
-} as ComponentMeta<typeof BaseLabel>;
+};
+export default meta;
 
-export const Label: Story = () => {
-  return (
+type Story = StoryObj<typeof BaseLabel>;
+export const Label: Story = {
+  render: () => (
     <dl>
       <dt style={{ marginBottom: '8px' }}>Default</dt>
       <dd style={{ marginBottom: '24px' }}>
@@ -19,5 +21,5 @@ export const Label: Story = () => {
         <BaseLabel isRequired={false}>Not required label</BaseLabel>
       </dd>
     </dl>
-  );
+  ),
 };