Import Storybook

.eslintrc.js

@@ -1,129 +1,129 @@
-module.exports = {
-  root: true,
-  extends: ['airbnb', 'plugin:prettier/recommended'],
-  parser: '@typescript-eslint/parser',
-  plugins: ['@typescript-eslint', 'react-hooks', 'unused-imports'],
-  globals: {
-    State: 'true',
-    CustomRouter: 'true',
-    echarts: 'true',
-  },
-  rules: {
-    'prettier/prettier': [
-      2,
-      {
-        printWidth: 120,
-      },
-    ],
-    semi: [2, 'never'],
-    'comma-dangle': [
-      2,
-      {
-        arrays: 'always-multiline',
-        objects: 'always-multiline',
-        imports: 'always-multiline',
-        exports: 'always-multiline',
-        functions: 'ignore',
-      },
-    ],
-    'import/no-extraneous-dependencies': [
-      2,
-      {
-        devDependencies: true,
-      },
-    ],
-    'no-unused-vars': 'off',
-    'unused-imports/no-unused-imports': 'error',
-    'unused-imports/no-unused-vars': 'error',
-    'no-undef': 'off',
-    'implicit-arrow-linebreak': 'off',
-    'operator-linebreak': [0, 'none'],
-    'arrow-parens': [2, 'as-needed'],
-    'max-len': [
-      2,
-      {
-        code: 120,
-        ignoreComments: true,
-        ignoreTrailingComments: true,
-        ignoreUrls: true,
-        ignoreStrings: true,
-        ignoreTemplateLiterals: true,
-        ignoreRegExpLiterals: true,
-      },
-    ],
-    'no-plusplus': [0],
-    'react/jsx-filename-extension': [
-      1,
-      {
-        extensions: ['.ts', '.tsx'],
-      },
-    ],
-    'import/extensions': [
-      'error',
-      'ignorePackages',
-      {
-        ts: 'never',
-        tsx: 'never',
-      },
-    ],
-    'react/jsx-props-no-spreading': [
-      'error',
-      {
-        html: 'ignore',
-        custom: 'ignore',
-        exceptions: [''],
-      },
-    ],
-    'react/require-default-props': [0],
-    'no-shadow': 'off',
-    'react/prop-types': [0],
-    'react/react-in-jsx-scope': 'off',
-    'react/jsx-wrap-multilines': [
-      'error',
-      {
-        prop: 'ignore',
-      },
-    ],
-    'no-console': ['error', { allow: ['error'] }],
-    'react-hooks/rules-of-hooks': 'error',
-    'react-hooks/exhaustive-deps': 'warn',
-    'import/prefer-default-export': 'off',
-    'no-use-before-define': 'off',
-    'consistent-return': 'off',
-    'no-continue': 'off',
-    'no-restricted-syntax': 'off',
-    camelcase: [
-      'error',
-      {
-        properties: 'never',
-        ignoreDestructuring: true,
-        allow: ['^.*_'],
-      },
-    ],
-    // The service layer uses the singleton pattern, so there will be many methods that do not use this.
-    'class-methods-use-this': 'off',
-    // TODO: Perhaps @typescript-eslint/recommended should be used.
-    '@typescript-eslint/array-type': 'error',
-    'no-dupe-class-members': 'off',
-    '@typescript-eslint/no-dupe-class-members': 'error',
-    'lines-between-class-members': 'off',
-    // It looks like this rule has a bug, and it seems that typescript-eslint missed this rule when supporting eslint v8.
-    '@typescript-eslint/lines-between-class-members': 'off',
-  },
-  env: {
-    jest: true,
-    browser: true,
-    node: true,
-  },
-  settings: {
-    react: {
-      version: 'detect',
-    },
-    'import/resolver': {
-      node: {
-        paths: ['src'],
-        extensions: ['.js', '.jsx', '.ts', '.tsx'],
-      },
-    },
-  },
-}
+module.exports = {
+  root: true,
+  extends: ['airbnb', 'plugin:prettier/recommended', 'plugin:storybook/recommended'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint', 'react-hooks', 'unused-imports'],
+  globals: {
+    State: 'true',
+    CustomRouter: 'true',
+    echarts: 'true',
+  },
+  rules: {
+    'prettier/prettier': [
+      2,
+      {
+        printWidth: 120,
+      },
+    ],
+    semi: [2, 'never'],
+    'comma-dangle': [
+      2,
+      {
+        arrays: 'always-multiline',
+        objects: 'always-multiline',
+        imports: 'always-multiline',
+        exports: 'always-multiline',
+        functions: 'ignore',
+      },
+    ],
+    'import/no-extraneous-dependencies': [
+      2,
+      {
+        devDependencies: true,
+      },
+    ],
+    'no-unused-vars': 'off',
+    'unused-imports/no-unused-imports': 'error',
+    'unused-imports/no-unused-vars': 'error',
+    'no-undef': 'off',
+    'implicit-arrow-linebreak': 'off',
+    'operator-linebreak': [0, 'none'],
+    'arrow-parens': [2, 'as-needed'],
+    'max-len': [
+      2,
+      {
+        code: 120,
+        ignoreComments: true,
+        ignoreTrailingComments: true,
+        ignoreUrls: true,
+        ignoreStrings: true,
+        ignoreTemplateLiterals: true,
+        ignoreRegExpLiterals: true,
+      },
+    ],
+    'no-plusplus': [0],
+    'react/jsx-filename-extension': [
+      1,
+      {
+        extensions: ['.ts', '.tsx'],
+      },
+    ],
+    'import/extensions': [
+      'error',
+      'ignorePackages',
+      {
+        ts: 'never',
+        tsx: 'never',
+      },
+    ],
+    'react/jsx-props-no-spreading': [
+      'error',
+      {
+        html: 'ignore',
+        custom: 'ignore',
+        exceptions: [''],
+      },
+    ],
+    'react/require-default-props': [0],
+    'no-shadow': 'off',
+    'react/prop-types': [0],
+    'react/react-in-jsx-scope': 'off',
+    'react/jsx-wrap-multilines': [
+      'error',
+      {
+        prop: 'ignore',
+      },
+    ],
+    'no-console': ['error', { allow: ['error'] }],
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'warn',
+    'import/prefer-default-export': 'off',
+    'no-use-before-define': 'off',
+    'consistent-return': 'off',
+    'no-continue': 'off',
+    'no-restricted-syntax': 'off',
+    camelcase: [
+      'error',
+      {
+        properties: 'never',
+        ignoreDestructuring: true,
+        allow: ['^.*_'],
+      },
+    ],
+    // The service layer uses the singleton pattern, so there will be many methods that do not use this.
+    'class-methods-use-this': 'off',
+    // TODO: Perhaps @typescript-eslint/recommended should be used.
+    '@typescript-eslint/array-type': 'error',
+    'no-dupe-class-members': 'off',
+    '@typescript-eslint/no-dupe-class-members': 'error',
+    'lines-between-class-members': 'off',
+    // It looks like this rule has a bug, and it seems that typescript-eslint missed this rule when supporting eslint v8.
+    '@typescript-eslint/lines-between-class-members': 'off',
+  },
+  env: {
+    jest: true,
+    browser: true,
+    node: true,
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+    'import/resolver': {
+      node: {
+        paths: ['src'],
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      },
+    },
+  },
+}

.storybook/main.ts

@@ -0,0 +1,22 @@
+import type { StorybookConfig } from '@storybook/react-webpack5'
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/preset-create-react-app',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-interactions',
+    '@storybook/addon-storysource',
+  ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+  docs: {
+    autodocs: true,
+  },
+  staticDirs: ['../public'],
+}
+export default config

.storybook/preview.ts

@@ -0,0 +1,23 @@
+import 'antd/dist/antd.css'
+// This should be after all third-party library styles so that it can override them.
+import '../src/index.css'
+import '../src/utils/i18n'
+import type { Preview } from '@storybook/react'
+import { MINIMAL_VIEWPORTS, INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
+
+const preview: Preview = {
+  parameters: {
+    viewport: {
+      viewports: { ...MINIMAL_VIEWPORTS, ...INITIAL_VIEWPORTS },
+    },
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+}
+
+export default preview

package.json

@@ -8,6 +8,7 @@
     "@sentry/react": "7.65.0",
     "@sentry/tracing": "7.65.0",
     "@spore-sdk/core": "^0.1.0-beta.10",
+    "@tanstack/react-query": "4.0.5",
     "antd": "4.24.5",
     "axios": "0.21.4",
     "bignumber.js": "9.1.2",
@@ -28,7 +29,6 @@
     "react-dom": "17.0.2",
     "react-i18next": "11.18.6",
     "react-outside-click-handler": "^1.3.0",
-    "@tanstack/react-query": "4.0.5",
     "react-resize-detector": "7.1.2",
     "react-router": "5.3.4",
     "react-router-dom": "5.3.4",
@@ -38,6 +38,16 @@
   },
   "devDependencies": {
     "@sentry/webpack-plugin": "2.7.1",
+    "@storybook/addon-essentials": "7.5.3",
+    "@storybook/addon-interactions": "7.5.3",
+    "@storybook/addon-links": "7.5.3",
+    "@storybook/addon-onboarding": "1.0.8",
+    "@storybook/addon-storysource": "^7.5.3",
+    "@storybook/blocks": "7.5.3",
+    "@storybook/preset-create-react-app": "7.5.3",
+    "@storybook/react": "7.5.3",
+    "@storybook/react-webpack5": "7.5.3",
+    "@storybook/testing-library": "0.2.2",
     "@testing-library/react": "12.1.5",
     "@types/echarts": "4.9.19",
     "@types/eslint": "8.44.6",
@@ -52,6 +62,7 @@
     "@typescript-eslint/eslint-plugin": "^6.9.1",
     "@typescript-eslint/parser": "6.9.1",
     "antd-dayjs-webpack-plugin": "^1.0.6",
+    "babel-plugin-named-exports-order": "0.0.2",
     "create-react-app": "^5.0.0",
     "eslint": "8.52.0",
     "eslint-config-airbnb": "18.2.1",
@@ -61,16 +72,19 @@
     "eslint-plugin-prettier": "3.4.1",
     "eslint-plugin-react": "7.31.11",
     "eslint-plugin-react-hooks": "4.6.0",
+    "eslint-plugin-storybook": "^0.6.15",
     "eslint-plugin-unused-imports": "^3.0.0",
     "husky": "^7.0.1",
     "jest-styled-components": "^7.0.5",
     "mockdate": "^2.0.5",
     "postcss-scss": "4.0.8",
     "postcss-styled-syntax": "^0.4.0",
     "prettier": "^2.8.8",
+    "prop-types": "15.8.1",
     "react-app-rewired": "2.2.1",
     "react-test-renderer": "^17.0.2",
     "rxjs": "7.8.1",
+    "storybook": "7.5.3",
     "stylelint": "^15.10.1",
     "stylelint-config-standard": "^34.0.0",
     "stylelint-config-standard-scss": "^11.0.0",
@@ -79,15 +93,18 @@
     "stylelint-processor-styled-components": "^1.10.0",
     "timezone-mock": "^1.1.4",
     "ts-jest": "27.1.5",
-    "typescript": "4.9.5"
+    "typescript": "4.9.5",
+    "webpack": "5.89.0"
   },
   "scripts": {
     "start": "react-app-rewired start",
     "build": "react-app-rewired build",
     "test": "react-app-rewired test --watchAll=false",
     "eject": "react-app-rewired eject",
     "husky:init": "husky install",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "storybook": "storybook dev -p 3000",
+    "build-storybook": "storybook build"
   },
   "jest": {
     "displayName": "Unit Test"