feat: implement components with storybook v6 (#702)

Author: shoota

.storybook/addons.js

@@ -0,0 +1,19 @@
+module.exports = {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  framework: '@storybook/react',
+  webpackFinal: async (config) => {
+    config.module.rules.push({
+      test: /\.less$/,
+      use: [
+        'style-loader',
+        'css-loader',
+        {
+          loader: 'less-loader',
+          options: { javascriptEnabled: true },
+        },
+      ],
+    })
+    return config
+  },
+}

.storybook/config.js

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

.storybook/main.js

@@ -10,9 +10,4 @@ module.exports = {
     '@babel/typescript',
     '@babel/react',
   ],
-  plugins: [
-    '@babel/plugin-proposal-optional-chaining',
-    '@babel/proposal-class-properties',
-    '@babel/proposal-object-rest-spread',
-  ],
 }

.storybook/preview.js

@@ -15,32 +15,29 @@
   "main": "index.js",
   "scripts": {
     "build": "webpack --mode=production",
-    "build-storybook": "build-storybook",
     "codegen": "graphql-codegen --config codegen.yml",
     "lint": "eslint 'src/**/*.ts{,x}' --cache",
     "start": "webpack-dev-server",
+    "test": "tsc -p ./tsconfig.json",
     "storybook": "start-storybook -p 6006",
-    "test": "tsc -p ./tsconfig.json"
+    "build-storybook": "build-storybook"
   },
   "resolutions": {
     "@types/react": "16.14.20",
     "@types/react-dom": "16.9.10"
   },
   "dependencies": {
+    "@ant-design/icons": "4.7.0",
     "@apollo/client": "3.3.21",
     "antd": "4.11.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "react-hot-loader": "4.13.0",
     "react-router": "5.1.2",
     "react-router-dom": "5.1.2",
     "styled-components": "5.1.0"
   },
   "devDependencies": {
     "@babel/core": "7.14.6",
-    "@babel/plugin-proposal-class-properties": "7.14.5",
-    "@babel/plugin-proposal-object-rest-spread": "7.14.7",
-    "@babel/plugin-proposal-optional-chaining": "7.14.5",
     "@babel/preset-env": "7.14.7",
     "@babel/preset-react": "7.14.5",
     "@babel/preset-typescript": "7.14.5",
@@ -51,12 +48,10 @@
     "@graphql-codegen/typescript-operations": "1.18.4",
     "@graphql-codegen/typescript-react-apollo": "2.3.1",
     "@hot-loader/react-dom": "16.13.0",
-    "@storybook/addon-actions": "5.3.18",
-    "@storybook/addon-knobs": "5.3.18",
-    "@storybook/addon-links": "5.3.18",
-    "@storybook/addons": "5.3.18",
-    "@storybook/cli": "5.3.18",
-    "@storybook/react": "5.3.18",
+    "@storybook/addon-actions": "^6.4.5",
+    "@storybook/addon-essentials": "^6.4.5",
+    "@storybook/addon-links": "^6.4.5",
+    "@storybook/react": "^6.4.5",
     "@types/clean-webpack-plugin": "0.1.3",
     "@types/html-webpack-plugin": "3.2.4",
     "@types/jest": "25.2.3",

.storybook/webpack.config.js

@@ -1,6 +1,5 @@
 import React from 'react'
-import { hot } from 'react-hot-loader/root'
 
 import { Routes } from './routes'
 
-export const App = hot(() => <Routes />)
+export const App = () => <Routes />

babel.config.js

@@ -0,0 +1,37 @@
+import React from 'react'
+import { List, Typography, Space } from 'antd'
+import { CheckCircleTwoTone } from '@ant-design/icons'
+
+type Todo = {
+  id: number
+  contents: string
+  finished: boolean
+}
+
+type Props = {
+  isLoading?: boolean
+  todos: Todo[]
+}
+
+export const Todos: React.VFC<Props> = ({ todos, isLoading }) => {
+  return (
+    <List
+      size="large"
+      loading={isLoading}
+      dataSource={todos}
+      renderItem={({ id, contents, finished }) => (
+        <List.Item key={id}>
+          <Typography.Title>
+            <Space>
+              <CheckCircleTwoTone
+                twoToneColor={finished ? '#52c41a' : '#e3e3e3'}
+              />
+              {contents}
+            </Space>
+          </Typography.Title>
+          {/* <Typography.Title level={5}>{contents}</Typography.Title> */}
+        </List.Item>
+      )}
+    />
+  )
+}

package.json

@@ -1,19 +1,31 @@
-import { text } from '@storybook/addon-knobs'
-import { storiesOf } from '@storybook/react'
-import { Button } from 'antd'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
 import * as React from 'react'
 
-import { MarginCard, Wrapper } from '../common'
+import { Todos } from '../Todos'
 
-storiesOf('story/usage', module).add('default', () => {
-  return (
-    <Wrapper>
-      <MarginCard title="First">
-        <Button>{text('first', '1st')}</Button>
-      </MarginCard>
-      <MarginCard title="Second">
-        <Button>{text('second', '2nd')}</Button>
-      </MarginCard>
-    </Wrapper>
-  )
-})
+const todos = [
+  {
+    id: 1,
+    contents: 'should do',
+    finished: false,
+  },
+  {
+    id: 2,
+    contents: 'done is better',
+    finished: true,
+  },
+]
+
+const meta: ComponentMeta<typeof Todos> = {
+  title: 'Example/Todos',
+  component: Todos,
+  args: {
+    todos,
+  },
+}
+
+export default meta
+
+const Template: ComponentStory<typeof Todos> = (args) => <Todos {...args} />
+
+export const Main = Template.bind({})