@baishuyun/ai-design 1.0.0

package/src/stories/FakeBotMsg.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { FakeBotMessage } from "../components/fake-bot-msg";
+
+const meta = {
+  title: "Example/Chat/FakeBotMessage",
+  component: FakeBotMessage,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+  args: {},
+} satisfies Meta<typeof FakeBotMessage>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: "这是一条模拟的 AI 助手回复消息",
+  },
+};
+
+export const Headless: Story = {
+  args: {
+    headless: true,
+    children: "无头像模式的 AI 助手回复消息",
+  },
+};
+
+export const WithLongContent: Story = {
+  args: {
+    children:
+      "这是一条比较长的模拟 AI 助手回复消息，用于测试组件在长文本场景下的显示效果。AI 助手可能会返回较长的文本内容，需要确保排版和换行都正确显示。",
+  },
+};

package/src/stories/FormInfoEditor.stories.tsx

@@ -0,0 +1,173 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+
+import { FormInfoEditor, FormIconOption } from '../components/form-info-editor';
+import { FORM_ICON_OPTIONS } from '../const/ui';
+
+const meta: Meta<typeof FormInfoEditor> = {
+  title: 'Example/Chat/FormInfoEditor',
+  component: FormInfoEditor,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    name: '供应商管理表',
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[328px]">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default collapsed state
+export const Default: Story = {
+  args: {
+    name: '供应商管理表',
+    selectedIcon: FORM_ICON_OPTIONS[0],
+  },
+};
+
+// Expanded edit state
+export const Expanded: Story = {
+  args: {
+    name: '供应商管理表',
+    expanded: true,
+    selectedIcon: FORM_ICON_OPTIONS[0],
+  },
+};
+
+// With icon options in expanded state (using all 36 form icons)
+export const WithIconOptions: Story = {
+  args: {
+    name: '供应商管理表',
+    expanded: true,
+    iconOptions: FORM_ICON_OPTIONS,
+    selectedIcon: FORM_ICON_OPTIONS[20],
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[360px]">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+// Interactive example with state management
+const InteractiveTemplate = () => {
+  const [name, setName] = useState('供应商管理表');
+  const [expanded, setExpanded] = useState(false);
+  const [selectedIcon, setSelectedIcon] = useState<FormIconOption>(FORM_ICON_OPTIONS[0]);
+
+  return (
+    <FormInfoEditor
+      name={name}
+      onNameChange={setName}
+      expanded={expanded}
+      onExpandedChange={setExpanded}
+      iconOptions={FORM_ICON_OPTIONS}
+      selectedIcon={selectedIcon}
+      onIconChange={setSelectedIcon}
+      onConfirm={() => {
+        alert(`表单名称: ${name}\n图标: ${selectedIcon.label}`);
+      }}
+    />
+  );
+};
+
+export const Interactive: Story = {
+  render: () => <InteractiveTemplate />,
+  decorators: [
+    (Story) => (
+      <div className="w-[360px]">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+// Long form name - test ellipsis
+export const LongName: Story = {
+  args: {
+    name: '这是一个很长的表单名称用于测试文本溢出情况显示省略号',
+    selectedIcon: FORM_ICON_OPTIONS[5],
+  },
+};
+
+// Custom width
+export const CustomWidth: Story = {
+  args: {
+    name: '供应商管理表',
+    className: 'w-[400px]',
+    selectedIcon: FORM_ICON_OPTIONS[0],
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[420px]">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+// Expanded with long name
+export const ExpandedLongName: Story = {
+  args: {
+    name: '这是一个很长的表单名称用于测试文本溢出情况',
+    expanded: true,
+    iconOptions: FORM_ICON_OPTIONS.slice(0, 18), // Show 18 icons (3 rows)
+    selectedIcon: FORM_ICON_OPTIONS[0],
+  },
+};
+
+// Empty name
+export const EmptyName: Story = {
+  args: {
+    name: '',
+    expanded: true,
+    selectedIcon: FORM_ICON_OPTIONS[0],
+  },
+};
+
+// Side by side comparison
+export const SideBySide: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 w-[328px]">
+      <div>
+        <p className="text-sm text-gray-500 mb-2">默认状态 (收起)</p>
+        <FormInfoEditor name="供应商管理表" expanded={false} selectedIcon={FORM_ICON_OPTIONS[0]} />
+      </div>
+      <div>
+        <p className="text-sm text-gray-500 mb-2">长名称 (带省略号)</p>
+        <FormInfoEditor
+          name="这是一个超长的表单名称用于测试省略号效果"
+          expanded={false}
+          selectedIcon={FORM_ICON_OPTIONS[10]}
+        />
+      </div>
+      <div>
+        <p className="text-sm text-gray-500 mb-2">展开状态 (编辑)</p>
+        <FormInfoEditor
+          name="供应商管理表"
+          expanded={true}
+          iconOptions={FORM_ICON_OPTIONS}
+          selectedIcon={FORM_ICON_OPTIONS[5]}
+        />
+      </div>
+    </div>
+  ),
+  decorators: [
+    (Story) => (
+      <div className="w-[380px]">
+        <Story />
+      </div>
+    ),
+  ],
+};

package/src/stories/FormulaTag.stories.tsx

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { FormulaTag } from '../components/formula-tag';
+import { type FormulaOp, FORMULA_OP_LABEL } from '@baishuyun/types';
+
+const meta = {
+  title: 'Example/Chat/FormulaTag',
+  component: FormulaTag,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    type: {
+      control: 'select',
+      options: Object.keys(FORMULA_OP_LABEL) as FormulaOp[],
+      description: '统计方式',
+    },
+  },
+  args: {
+    type: 'sum',
+  },
+} satisfies Meta<typeof FormulaTag>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/** 求和 – #3767F1 */
+export const Sum: Story = {
+  args: { type: 'sum' },
+};
+
+/** 最大值 – #F06648 */
+export const Max: Story = {
+  args: { type: 'max' },
+};
+
+/** 最小值 – #4ACC8C */
+export const Min: Story = {
+  args: { type: 'min' },
+};
+
+/** 平均 – #4AC0EC */
+export const Average: Story = {
+  args: { type: 'average' },
+};
+
+/** 计数 – #9362CE */
+export const Count: Story = {
+  args: { type: 'count' },
+};
+
+/** 去重计数 – #F168B6 */
+export const CountDistinct: Story = {
+  args: { type: 'countDistinct' },
+};
+
+/** 所有统计方式一览 */
+export const AllTypes: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-2">
+      {(Object.keys(FORMULA_OP_LABEL) as FormulaOp[]).map((op) => (
+        <FormulaTag key={op} type={op} />
+      ))}
+    </div>
+  ),
+};

package/src/stories/GenerateAnimation.stories.ts

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { GenerateAnimation } from "../components/generate-animation";
+
+const meta = {
+  title: "Example/Animation/GenerateAnimation",
+  component: GenerateAnimation,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+  args: {},
+} satisfies Meta<typeof GenerateAnimation>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};

package/src/stories/IconBtn.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { IconBtn } from '../components/icon-btn';
+import { DockIcon } from '../components/bs-icons';
+
+const meta = {
+  title: 'Example/Button/IconBtn',
+  component: IconBtn,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  args: {},
+} satisfies Meta<typeof IconBtn>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Base: Story = {
+  args: {
+    icon: <DockIcon />,
+  },
+};
+
+export const Rounded: Story = {
+  args: {
+    icon: <DockIcon />,
+    rounded: true,
+  },
+};

package/src/stories/IconLib.tsx

@@ -0,0 +1,45 @@
+import * as Icons from '../components/bs-icons';
+
+import { IconBtn } from '../components/icon-btn';
+import { copyTextToClipboard } from '../lib/utils';
+
+// 在 Icon.stories.jsx 中添加
+export const IconLibrary = () => {
+  // 定义所有图标列表
+  const icons = Object.entries(Icons).map(([name, IconComp]) => ({
+    name,
+    icon: IconComp,
+  }));
+
+  return (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(20, 20px)',
+        gridTemplateRows: 'repeat(20, 20px)',
+        gap: '10px',
+        padding: '10px',
+      }}
+    >
+      {icons.map((item) => {
+        const Icon = item.icon;
+        return (
+          <IconBtn
+            icon={<Icon />}
+            onClick={async () => {
+              await copyTextToClipboard(`<${item.name} />`);
+            }}
+          />
+        );
+      })}
+    </div>
+  );
+};
+IconLibrary.storyName = '图标库';
+IconLibrary.parameters = {
+  docs: {
+    description: {
+      story: '展示所有可用的 SVG 图标，方便查阅和使用',
+    },
+  },
+};

package/src/stories/Icons.stories.ts

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { IconLibrary } from './IconLib';
+
+const meta = {
+  title: 'Example/Icons/BsIcon Library',
+  component: IconLibrary,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  args: {},
+} satisfies Meta<typeof IconLibrary>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Base: Story = {
+  args: {},
+};

package/src/stories/ImgMsgPart.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { ImgMsgPart } from '../components/img-part';
+
+const meta = {
+  title: 'Example/Chat/ImgMsgPart',
+  component: ImgMsgPart,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    url: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400',
+    alt: 'Mountain landscape',
+  },
+} satisfies Meta<typeof ImgMsgPart>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const Large: Story = {
+  args: {
+    size: 200,
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 64,
+  },
+};
+
+export const WithCustomClassName: Story = {
+  args: {
+    className: 'shadow-lg',
+  },
+};

package/src/stories/LegacySlot.stories.tsx

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { LegacySlot } from '../components/legacy-slot';
+
+const meta = {
+  title: 'AI Office/LegacySlot',
+  component: LegacySlot,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof LegacySlot>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    renderLegacy: (container: HTMLElement, props: Record<string, any>) => {
+      container.innerHTML = `<div style="padding:16px;border:1px solid #ccc;border-radius:8px;">Hello from legacy renderer. Props: ${JSON.stringify(props)}</div>`;
+      return () => {
+        container.innerHTML = '';
+      };
+    },
+    props: { message: 'Hello World' },
+    shadow: false,
+  },
+};
+
+export const WithShadow: Story = {
+  args: {
+    renderLegacy: (container: HTMLElement) => {
+      container.innerHTML = '<div style="padding:16px;background:#f0f0f0;border-radius:8px;">Rendered inside Shadow DOM</div>';
+      return () => {
+        container.innerHTML = '';
+      };
+    },
+    props: {},
+    shadow: true,
+    withHostStyles: true,
+  },
+};
+
+export const WithInjectedStyles: Story = {
+  args: {
+    renderLegacy: (container: HTMLElement) => {
+      container.innerHTML = '<div class="legacy-content">Styled via injected CSS</div>';
+      return () => {
+        container.innerHTML = '';
+      };
+    },
+    props: {},
+    shadow: true,
+    injectedStyles: '.legacy-content { color: #2563eb; font-size: 18px; font-weight: bold; padding: 16px; }',
+  },
+};

package/src/stories/LineChecker.stories.tsx

@@ -0,0 +1,134 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { LineChecker } from "../components/line-checker";
+import {  TextIcon as FileTextIcon } from "../components/bs-icons";
+
+const meta = {
+  title: "Example/Chat/LineChecker",
+  component: LineChecker,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ["autodocs"],
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+    layout: "centered",
+  },
+  args: {},
+} satisfies Meta<typeof LineChecker>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    title: "供应商名称",
+    style: {
+        width: '400px',
+    },
+    shortDesc: "单行文本",
+  },
+};
+
+export const WithIcon: Story = {
+  args: {
+    title: "供应商名称",
+    shortDesc: "单行文本",
+    icon: <FileTextIcon />,
+    style: {
+        width: '400px',
+    },
+  },
+};
+
+export const LongTitle: Story = {
+  args: {
+    title: "供应商名称活动结束回复具体时间空间环境这是一个很长的标题会被截断",
+    shortDesc: "单行文本",
+    style: {
+        width: '400px',
+    },
+    icon: <FileTextIcon />,
+  },
+};
+
+export const Checked: Story = {
+  args: {
+    title: "供应商名称",
+    shortDesc: "单行文本",
+    icon: <FileTextIcon />,
+    defaultChecked: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    title: "供应商名称",
+    shortDesc: "单行文本",
+    icon: <FileTextIcon />,
+    disabled: true,
+    style: {
+        width: '400px',
+    },
+  },
+};
+
+export const DisabledChecked: Story = {
+  args: {
+    title: "供应商名称",
+    shortDesc: "单行文本",
+    icon: <FileTextIcon />,
+    defaultChecked: true,
+    disabled: true,
+    style: {
+        width: '400px',
+    },
+  },
+};
+
+export const NoShortDesc: Story = {
+  args: {
+    title: "供应商名称",
+    icon: <FileTextIcon />,
+    style: {
+        width: '400px',
+    },
+  },
+};
+
+export const NoIcon: Story = {
+  args: {
+    title: "供应商名称",
+    shortDesc: "单行文本",
+    style: {
+        width: '400px',
+    },
+  },
+};
+
+export const MinimalVariant: Story = {
+  args: {
+    title: "简单选项",
+  },
+};
+
+
+export const WithExtraNodes: Story = {
+  args: {
+    title: "供应商名称",
+    shortDesc: "单行文本",
+    icon: <FileTextIcon />,
+    style: {
+        width: '400px',
+    },
+    extra: (
+        <div>
+            HELLO WORLD
+            HELLO WORLD
+            HELLO WORLD
+            HELLO WORLD
+            HELLO WORLD
+            HELLO WORLD
+            HELLO WORLD
+        </div>
+    )
+  },
+};