feat: 增加 storybook

packages/web/.storybook/main.js

@@ -0,0 +1,36 @@
+const { mergeConfig } = require('vite')
+const { join } = require('path')
+const { createSvgIconsPlugin } = require('vite-plugin-svg-icons')
+console.log(join(__dirname, '../assets/icons'))
+
+module.exports = {
+  stories: [
+    '../components/**/*.stories.mdx',
+    '../components/**/*.stories.@(js|jsx|ts|tsx)',
+  ],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-postcss',
+    '@storybook/addon-viewport',
+    'storybook-tailwind-dark-mode',
+  ],
+  framework: '@storybook/react',
+  core: {
+    builder: '@storybook/builder-vite',
+  },
+  viteFinal(config) {
+    return mergeConfig(config, {
+      plugins: [
+        /**
+         * @see https://github.com/vbenjs/vite-plugin-svg-icons
+         */
+        createSvgIconsPlugin({
+          iconDirs: [join(__dirname, '../assets/icons')],
+          symbolId: 'icon-[name]',
+        }),
+      ],
+    })
+  },
+}

packages/web/.storybook/preview-head.html

@@ -0,0 +1,3 @@
+<script>
+  window.global = window;
+</script>

packages/web/.storybook/preview.js

@@ -0,0 +1,17 @@
+import 'virtual:svg-icons-register'
+import '../styles/global.scss'
+import '../styles/accentColor.scss'
+import viewports from './viewports'
+
+export const parameters = {
+  viewport: {
+    viewports,
+  },
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

packages/web/.storybook/viewports.js

@@ -0,0 +1,130 @@
+export default {
+  iphone5: {
+    name: 'iPhone 5',
+    styles: {
+      height: '568px',
+      width: '320px',
+    },
+    type: 'mobile',
+  },
+  iphone6: {
+    name: 'iPhone 6 / iPhone SE 2',
+    styles: {
+      height: '667px',
+      width: '375px',
+    },
+    type: 'mobile',
+  },
+  iphone8p: {
+    name: 'iPhone 8 Plus',
+    styles: {
+      height: '736px',
+      width: '414px',
+    },
+    type: 'mobile',
+  },
+  iphonex: {
+    name: 'iPhone X / iPhone 12 mini',
+    styles: {
+      height: '812px',
+      width: '375px',
+    },
+    type: 'mobile',
+  },
+  iphonexr: {
+    name: 'iPhone XR / iPhone XS Max',
+    styles: {
+      height: '896px',
+      width: '414px',
+    },
+    type: 'mobile',
+  },
+  iphone12: {
+    name: 'iPhone 12',
+    styles: {
+      height: '844px',
+      width: '390px',
+    },
+    type: 'mobile',
+  },
+  iphone12promax: {
+    name: 'iPhone 12 Pro Max',
+    styles: {
+      height: '926px',
+      width: '428px',
+    },
+    type: 'mobile',
+  },
+  ipad: {
+    name: 'iPad',
+    styles: {
+      height: '1024px',
+      width: '768px',
+    },
+    type: 'tablet',
+  },
+  ipad10p: {
+    name: 'iPad Pro 10.5-in',
+    styles: {
+      height: '1112px',
+      width: '834px',
+    },
+    type: 'tablet',
+  },
+  ipad12p: {
+    name: 'iPad Pro 12.9-in',
+    styles: {
+      height: '1366px',
+      width: '1024px',
+    },
+    type: 'tablet',
+  },
+  galaxys5: {
+    name: 'Galaxy S5',
+    styles: {
+      height: '640px',
+      width: '360px',
+    },
+    type: 'mobile',
+  },
+  galaxys9: {
+    name: 'Galaxy S9',
+    styles: {
+      height: '740px',
+      width: '360px',
+    },
+    type: 'mobile',
+  },
+  nexus5x: {
+    name: 'Nexus 5X',
+    styles: {
+      height: '660px',
+      width: '412px',
+    },
+    type: 'mobile',
+  },
+  nexus6p: {
+    name: 'Nexus 6P',
+    styles: {
+      height: '732px',
+      width: '412px',
+    },
+    type: 'mobile',
+  },
+  pixel: {
+    name: 'Pixel',
+    styles: {
+      height: '960px',
+      width: '540px',
+    },
+    type: 'mobile',
+  },
+  pixelxl: {
+    name: 'Pixel XL',
+    styles: {
+      height: '1280px',
+      width: '720px',
+    },
+    type: 'mobile',
+  },
+}