feat: storybook (langgenius#9324)

web/.eslintrc.json

@@ -1,7 +1,8 @@
 {
   "extends": [
     "next",
-    "@antfu"
+    "@antfu",
+    "plugin:storybook/recommended"
   ],
   "rules": {
     "@typescript-eslint/consistent-type-definitions": [

web/.gitignore

@@ -49,4 +49,5 @@ package-lock.json
 # pmpm
 pnpm-lock.yaml
 
-.favorites.json
+.favorites.json
+*storybook.log

web/.storybook/main.ts

@@ -0,0 +1,19 @@
+import type { StorybookConfig } from '@storybook/nextjs'
+
+const config: StorybookConfig = {
+    // stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+    stories: ['../app/components/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+    addons: [
+        '@storybook/addon-onboarding',
+        '@storybook/addon-links',
+        '@storybook/addon-essentials',
+        '@chromatic-com/storybook',
+        '@storybook/addon-interactions',
+    ],
+    framework: {
+        name: '@storybook/nextjs',
+        options: {},
+    },
+    staticDirs: ['../public'],
+}
+export default config

web/.storybook/preview.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import type { Preview } from '@storybook/react'
+import { withThemeByDataAttribute } from '@storybook/addon-themes';
+import I18nServer from '../app/components/i18n-server'
+
+import '../app/styles/globals.css'
+import '../app/styles/markdown.scss'
+import './storybook.css'
+
+export const decorators = [
+    withThemeByDataAttribute({
+      themes: {
+        light: 'light',
+        dark: 'dark',
+      },
+      defaultTheme: 'light',
+      attributeName: 'data-theme',
+    }),
+    Story => {
+      return <I18nServer>
+        <Story />
+      </I18nServer>
+    }
+  ];
+
+const preview: Preview = {
+  parameters: {
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i,
+            },
+        },
+    },
+}
+
+export default preview

web/.storybook/storybook.css

@@ -0,0 +1,6 @@
+html,
+body {
+  max-width: unset;
+  overflow: auto;
+  user-select: text;
+}

web/README.md

@@ -74,6 +74,18 @@ If you want to customize the host and port:
 npm run start --port=3001 --host=0.0.0.0
 ```
 
+## Storybook
+
+This project uses [Storybook](https://storybook.js.org/) for UI component development.
+
+To start the storybook server, run:
+
+```bash
+yarn storybook
+```
+
+Open [http://localhost:6006](http://localhost:6006) with your browser to see the result.
+
 ## Lint Code
 
 If your IDE is VSCode, rename `web/.vscode/settings.example.json` to `web/.vscode/settings.json` for lint code setting.

web/app/components/base/button/index.stories.tsx

@@ -0,0 +1,107 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { fn } from '@storybook/test'
+
+import { RocketLaunchIcon } from '@heroicons/react/20/solid'
+import { Button } from '.'
+
+const meta = {
+  title: 'Base/Button',
+  component: Button,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    loading: { control: 'boolean' },
+    variant: {
+      control: 'select',
+      options: ['primary', 'warning', 'secondary', 'secondary-accent', 'ghost', 'ghost-accent', 'tertiary'],
+    },
+  },
+  args: {
+    variant: 'ghost',
+    onClick: fn(),
+    children: 'adsf',
+  },
+} satisfies Meta<typeof Button>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    variant: 'primary',
+    loading: false,
+    children: 'Primary Button',
+  },
+}
+
+export const Secondary: Story = {
+  args: {
+    variant: 'secondary',
+    children: 'Secondary Button',
+  },
+}
+
+export const SecondaryAccent: Story = {
+  args: {
+    variant: 'secondary-accent',
+    children: 'Secondary Accent Button',
+  },
+}
+
+export const Ghost: Story = {
+  args: {
+    variant: 'ghost',
+    children: 'Ghost Button',
+  },
+}
+
+export const GhostAccent: Story = {
+  args: {
+    variant: 'ghost-accent',
+    children: 'Ghost Accent Button',
+  },
+}
+
+export const Tertiary: Story = {
+  args: {
+    variant: 'tertiary',
+    children: 'Tertiary Button',
+  },
+}
+
+export const Warning: Story = {
+  args: {
+    variant: 'warning',
+    children: 'Warning Button',
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    variant: 'primary',
+    disabled: true,
+    children: 'Disabled Button',
+  },
+}
+
+export const Loading: Story = {
+  args: {
+    variant: 'primary',
+    loading: true,
+    children: 'Loading Button',
+  },
+}
+
+export const WithIcon: Story = {
+  args: {
+    variant: 'primary',
+    children: (
+      <>
+        <RocketLaunchIcon className="h-4 w-4 mr-1.5 stroke-[1.8px]" />
+        Launch
+      </>
+    ),
+  },
+}

web/app/components/base/chat/chat/answer/__mocks__/markdownContent.ts

@@ -0,0 +1,61 @@
+export const markdownContent = `
+# Heading 1
+
+## Heading 2
+
+### Heading 3
+
+#### Heading 4
+
+##### Heading 5
+
+###### Heading 6
+
+# Basic markdown content.
+
+Should support **bold**, *italic*, and ~~strikethrough~~.
+Should support [links](https://www.google.com).
+Should support inline \`code\` blocks.
+
+# Number list
+
+1. First item
+2. Second item
+3. Third item
+
+# Bullet list
+
+- First item
+- Second item
+- Third item
+
+# Link
+
+[Google](https://www.google.com)
+
+# Image
+
+![Alt text](https://picsum.photos/200/300)
+
+# Table
+
+| Column 1 | Column 2 | Column 3 |
+| -------- | -------- | -------- |
+| Cell 1   | Cell 2   | Cell 3   |
+| Cell 4   | Cell 5   | Cell 6   |
+| Cell 7   | Cell 8   | Cell 9   |
+
+# Code
+
+\`\`\`JavaScript
+const code = "code"
+\`\`\`
+
+# Blockquote
+
+> This is a blockquote.
+
+# Horizontal rule
+
+---
+`

web/app/components/base/chat/chat/answer/__mocks__/markdownContentSVG.ts

@@ -0,0 +1,27 @@
+export const markdownContentSVG = `
+\`\`\`svg
+<svg width="400" height="600" xmlns="http://www.w3.org/2000/svg">
+  <rect width="100%" height="100%" fill="#F0F8FF"/>
+  
+  <text x="50%" y="60" font-family="楷体" font-size="32" fill="#4682B4" text-anchor="middle">创意Logo设计</text>
+  
+  <line x1="50" y1="80" x2="350" y2="80" stroke="#B0C4DE" stroke-width="2"/>
+  
+  <text x="50%" y="120" font-family="Arial" font-size="24" fill="#708090" text-anchor="middle">科研</text>
+  <text x="50%" y="150" font-family="MS Mincho" font-size="20" fill="#778899" text-anchor="middle">科学研究</text>
+  
+  <text x="50%" y="200" font-family="汇文明朝体" font-size="18" fill="#696969" text-anchor="middle">
+    <tspan x="50%" dy="25">探索未知的灯塔，</tspan>
+    <tspan x="50%" dy="25">照亮人类前进的道路。</tspan>
+    <tspan x="50%" dy="25">科研，是永不熄灭的好奇心，</tspan>
+    <tspan x="50%" dy="25">也是推动世界进步的引擎。</tspan>
+  </text>
+  
+  <circle cx="200" cy="400" r="80" fill="none" stroke="#4169E1" stroke-width="3"/>
+  <line x1="200" y1="320" x2="200" y2="480" stroke="#4169E1" stroke-width="3"/>
+  <line x1="120" y1="400" x2="280" y2="400" stroke="#4169E1" stroke-width="3"/>
+  
+  <text x="50%" y="550" font-family="微软雅黑" font-size="16" fill="#1E90FF" text-anchor="middle">探索 • 创新 • 进步</text>
+</svg>
+\`\`\`
+`