Merge pull request #18 from taigakiyokawa/add_storybook

[feat] Add Storybook

Author: taigakiyokawa

.eslintrc.json

@@ -1,3 +1,3 @@
 {
-  "extends": ["next/core-web-vitals", "prettier"]
+  "extends": ["next/core-web-vitals", "prettier", "plugin:storybook/recommended"]
 }

.gitignore

@@ -49,3 +49,6 @@ next-env.d.ts
 
 # Built Visual Studio Code Extensions
 *.vsix
+
+# build-storybook
+/storybook-static/

.storybook/main.js

@@ -0,0 +1,18 @@
+const path = require('path')
+
+module.exports = {
+  stories: ['../src/**/*.stories.tsx'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
+  framework: '@storybook/react',
+  core: {
+    builder: '@storybook/builder-webpack5'
+  },
+  webpackFinal(config) {
+    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
+  }
+}

.storybook/preview.js

@@ -0,0 +1,9 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

package.json

@@ -8,7 +8,9 @@
     "start": "next start",
     "lint": "next lint",
     "format": "prettier --ignore-path .gitignore --write \"**/*.{ts,tsx}\"",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "dependencies": {
     "@emotion/react": "11.10.0",
@@ -21,12 +23,23 @@
     "react-i18next": "11.18.6"
   },
   "devDependencies": {
+    "@babel/core": "^7.19.3",
+    "@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",
     "@types/node": "18.7.13",
     "@types/react": "18.0.17",
     "@types/react-dom": "18.0.6",
+    "babel-loader": "^8.2.5",
     "eslint": "8.23.0",
     "eslint-config-next": "12.3.1",
     "eslint-config-prettier": "8.5.0",
+    "eslint-plugin-storybook": "^0.6.4",
     "husky": "8.0.1",
     "lint-staged": "13.0.3",
     "prettier": "2.7.1",

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

@@ -0,0 +1,15 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react'
+import { Button } from '.'
+
+const meta: ComponentMeta<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: 'スピーカーに応募する'
+}

src/components/organisms/Footer/Footer.stories.tsx

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

src/components/organisms/Header/Header.stories.tsx

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