refactor: move component into a single package (#898)

packages/component/.storybook/main.js

@@ -0,0 +1,44 @@
+const path = require('node:path');
+
+module.exports = {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  staticDirs: ['../../app/public'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  core: {
+    builder: '@storybook/builder-webpack5',
+  },
+  webpackFinal: config => {
+    const transpile = config.module.rules.find(x =>
+      x.test.toString().includes('tsx')
+    ).use;
+    transpile.push({
+      loader: require.resolve('swc-loader'),
+      options: {
+        parseMap: true,
+        jsc: {
+          parser: {
+            syntax: 'typescript',
+            dynamicImport: true,
+            tsx: true,
+          },
+          target: 'es2022',
+          transform: {
+            react: {
+              runtime: 'automatic',
+            },
+          },
+        },
+      },
+    });
+
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      '@': path.resolve(__dirname, '..', 'src'),
+      '@affine/i18n': path.resolve(__dirname, '..', '..', 'i18n', 'src'),
+    };
+    return config;
+  },
+  reactOptions: {
+    fastRefresh: true,
+  },
+};

packages/component/.storybook/preview.js

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