feat: 增加storybook

packages/design/.storybook/main.js

@@ -0,0 +1,12 @@
+module.exports = {
+  stories: [
+    '../components/**/*.stories.mdx',
+    '../components/**/*.stories.@(js|jsx|ts|tsx)',
+  ],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+  ],
+  framework: '@storybook/react',
+};

packages/design/.storybook/preview.js

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

packages/design/components/DelayTip/index.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { DelayTip } from '.';
+
+export default {
+  title: 'Tailchat/DelayTip',
+  component: DelayTip,
+  argTypes: {},
+} as ComponentMeta<typeof DelayTip>;
+
+const Template: ComponentStory<typeof DelayTip> = (args) => (
+  <DelayTip {...args}>鼠标移动到这里等待1s</DelayTip>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  title: 'Hello World',
+};

packages/design/components/Image/index.stories.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Image } from '.';
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Tailchat/Image',
+  component: Image,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {},
+} as ComponentMeta<typeof Image>;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template: ComponentStory<typeof Image> = (args) => (
+  <>
+    <Image
+      src={'https://source.unsplash.com/collection/94734566/1920x1080'}
+      {...args}
+    />
+    <div>一个简单的图片, 自带Fallback机制</div>
+  </>
+);
+
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Default.args = {
+  preview: true,
+  width: 640,
+  height: 360,
+};
+
+export const Fallback = Template.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Fallback.args = {
+  src: '',
+};

packages/design/components/Introduction.stories.mdx

@@ -0,0 +1,5 @@
+<Meta title="Tailchat/Introduction" />
+
+# Tailchat Design
+
+Tailchat Design 是 msgbyte 专为 Tailchat 打造的一套设计样式，基于 `antd` 之上做了一层封装

packages/design/package.json

@@ -3,7 +3,9 @@
   "version": "1.0.0",
   "description": "Tailchat 的前端组件",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "repository": {
     "type": "git",
@@ -22,9 +24,17 @@
   "dependencies": {
     "@iconify/react": "^3.2.1",
     "antd": "^4.19.5",
-    "meta-form": "workspace:^1.0.0"
+    "meta-form": "^1.0.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.17.9",
+    "@storybook/addon-actions": "^6.4.22",
+    "@storybook/addon-essentials": "^6.4.22",
+    "@storybook/addon-interactions": "^6.4.22",
+    "@storybook/addon-links": "^6.4.22",
+    "@storybook/react": "^6.4.22",
+    "@storybook/testing-library": "^0.0.11",
+    "babel-loader": "^8.2.5",
     "react": "17.0.2",
     "react-dom": "17.0.2"
   },