chore: Migrate Stroybook to v7 (#214)

Author: taigakiyokawa

.storybook/main.js

@@ -0,0 +1,21 @@
+import { StorybookConfig } from '@storybook/nextjs'
+const path = require('path')
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.tsx'],
+  framework: { name: '@storybook/nextjs', options: {} },
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
+  staticDirs: ['../public'],
+  webpackFinal(config) {
+    if (config.resolve && config.resolve.alias) {
+      config.resolve.modules = [...(config.resolve.modules || []), path.resolve(__dirname, '..')]
+
+      delete config.resolve.alias['emotion-theming']
+      delete config.resolve.alias['@emotion/styled']
+      delete config.resolve.alias['@emotion/core']
+    }
+    return config
+  }
+}
+
+export default config

.storybook/main.ts

@@ -0,0 +1,37 @@
+import React from 'react'
+import { Preview } from '@storybook/react'
+import { theme } from '../src/styles/theme'
+import { ThemeProvider } from '@mui/material/styles'
+import '../src/styles/globals.css'
+import { Colors } from '../src/styles/color'
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/
+      }
+    },
+    backgrounds: {
+      default: 'primary',
+      values: [
+        { name: 'primary', value: Colors.background.primary },
+        { name: 'secondary', value: Colors.background.secondary },
+        { name: 'brand color', value: Colors.background.brand_color }
+      ]
+    }
+  },
+  decorators: [
+    Story => {
+      return (
+        <ThemeProvider theme={theme}>
+          <Story />
+        </ThemeProvider>
+      )
+    }
+  ]
+}
+
+export default preview

.storybook/preview.js

@@ -9,8 +9,8 @@
     "lint": "next lint",
     "format": "prettier --ignore-path .gitignore --write \"**/*.{ts,tsx}\"",
     "prepare": "husky install",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@emotion/react": "11.10.0",
@@ -30,27 +30,23 @@
   "devDependencies": {
     "@babel/core": "7.19.3",
     "@faker-js/faker": "7.6.0",
-    "@storybook/addon-actions": "6.5.12",
-    "@storybook/addon-essentials": "6.5.12",
-    "@storybook/addon-interactions": "6.5.12",
-    "@storybook/addon-links": "6.5.12",
-    "@storybook/builder-webpack5": "6.5.12",
-    "@storybook/manager-webpack5": "6.5.12",
-    "@storybook/react": "6.5.12",
-    "@storybook/testing-library": "0.0.13",
+    "@storybook/addon-essentials": "7.0.12",
+    "@storybook/addon-interactions": "7.0.12",
+    "@storybook/addon-links": "7.0.12",
+    "@storybook/nextjs": "7.0.12",
+    "@storybook/react": "7.0.12",
     "@types/node": "18.7.13",
     "@types/react": "18.0.21",
     "@types/react-dom": "18.0.6",
     "babel-loader": "8.2.5",
     "eslint": "8.28.0",
     "eslint-config-next": "13.4.1",
     "eslint-config-prettier": "8.5.0",
-    "eslint-plugin-storybook": "0.6.7",
+    "eslint-plugin-storybook": "0.6.12",
     "husky": "8.0.1",
     "lint-staged": "13.0.3",
     "prettier": "2.7.1",
-    "storybook-addon-material-ui5": "1.0.0",
-    "storybook-addon-next": "1.6.9",
+    "storybook": "7.0.12",
     "typescript": "4.8.2"
   },
   "lint-staged": {

.storybook/preview.tsx

@@ -1,15 +1,13 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 import { Button } from '.'
 
-const meta: ComponentMeta<typeof Button> = {
+const meta: Meta<typeof Button> = {
   component: Button
 }
 export default meta
 
-const Template: ComponentStory<typeof Button> = args => <Button {...args} />
-
-export const Default = Template.bind({})
-// TODO: Switch languages by using react-i18next (taigakiyokawa)
-Default.args = {
-  text: 'スピーカーに応募する'
+export const Default: StoryObj<typeof Button> = {
+  args: {
+    text: 'スピーカーに応募する'
+  }
 }

package.json

@@ -1,11 +1,9 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 import { IconTwitter } from '.'
 
-const meta: ComponentMeta<typeof IconTwitter> = {
+const meta: Meta<typeof IconTwitter> = {
   component: IconTwitter
 }
 export default meta
 
-const Template: ComponentStory<typeof IconTwitter> = () => <IconTwitter />
-
-export const Default = Template.bind({})
+export const Default: StoryObj<typeof IconTwitter> = {}

src/components/atoms/Button/Button.stories.tsx

@@ -1,20 +1,20 @@
-import { ComponentMeta, ComponentStoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react'
 import { SessionLabel } from '.'
 
-const meta: ComponentMeta<typeof SessionLabel> = {
+const meta: Meta<typeof SessionLabel> = {
   component: SessionLabel
 }
 export default meta
 
-export const RoomA: ComponentStoryObj<typeof SessionLabel> = {
+export const RoomA: StoryObj<typeof SessionLabel> = {
   args: {
     roomName: 'Room A',
     sessionId: 'A1-1',
     isRoomNameDisplayed: true
   }
 }
 
-export const RoomB: ComponentStoryObj<typeof SessionLabel> = {
+export const RoomB: StoryObj<typeof SessionLabel> = {
   args: {
     roomName: 'Room B',
     sessionId: 'B1-1',

src/components/atoms/IconTwitter/IconTwitter.stories.tsx

@@ -1,13 +1,13 @@
-import type { ComponentMeta, ComponentStoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 import { SpeakerIcon } from '.'
 import { faker } from '@faker-js/faker'
 
-const meta: ComponentMeta<typeof SpeakerIcon> = {
+const meta: Meta<typeof SpeakerIcon> = {
   component: SpeakerIcon
 }
 export default meta
 
-export const Default: ComponentStoryObj<typeof SpeakerIcon> = {
+export const Default: StoryObj<typeof SpeakerIcon> = {
   args: {
     iconUrl: faker.image.avatar(),
     name: 'sample',

src/components/atoms/SessionLabel/SessionLabel.stories.tsx

@@ -1,19 +1,13 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 import { PlenumCard } from '.'
-import { Box } from '@mui/material'
 
-const meta: ComponentMeta<typeof PlenumCard> = {
+const meta: Meta<typeof PlenumCard> = {
   component: PlenumCard
 }
 export default meta
 
-const Template: ComponentStory<typeof PlenumCard> = args => (
-  <Box width="300px">
-    <PlenumCard {...args} />
-  </Box>
-)
-
-export const Default = Template.bind({})
-Default.args = {
-  title: 'Break'
+export const Default: StoryObj<typeof PlenumCard> = {
+  args: {
+    title: 'Break'
+  }
 }