@baishuyun/chat-sdk 0.0.1-alpha.1

package/src/stories/FormInfoEditor.stories.tsx

@@ -0,0 +1,183 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+
+import {
+  FormInfoEditor,
+  FormIconOption,
+  FORM_ICON_OPTIONS,
+} from "@/components/bs-ui/form-info-editor";
+
+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={() => {
+        console.log("Confirmed:", { name, selectedIcon });
+        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/GenerateAnimation.stories.ts

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { GenerateAnimation } from "@/components/bs-ui/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,26 @@
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { IconBtn } from "@/components/bs-ui/icon-btn";
+import { DockIcon } from "@/components/bs-ui/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 />
+  },
+};

package/src/stories/IconLib.tsx

@@ -0,0 +1,47 @@
+import * as Icons from '@/components/bs-ui/bs-icons';
+
+import { IconBtn } from '@/components/bs-ui/icon-btn';
+import { copyTextToClipboard } from '@/lib/utils';
+
+// 在 Icon.stories.jsx 中添加
+export const IconLibrary = () => {
+  // 定义所有图标列表
+  const icons = Object.entries(Icons).map(([name, IconComp]) => ({
+    name,
+    icon: IconComp,
+  }));
+
+  console.log('icons', icons);
+
+  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/LineChecker.stories.tsx

@@ -0,0 +1,134 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { LineChecker } from "@/components/bs-ui/line-checker";
+import {  TextIcon as FileTextIcon } from "@/components/bs-ui/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>
+    )
+  },
+};

package/src/stories/LinearGradientBorderBtn.stories.tsx

@@ -0,0 +1,86 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { LinearGradientBorderBtn } from "@/components/bs-ui/linear-gradient-border-btn";
+import { LetterAIcon } from "@/components/bs-ui/bs-icons";
+
+const meta = {
+  title: "Example/Button/LinearGradientBorderBtn",
+  component: LinearGradientBorderBtn,
+  // 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 LinearGradientBorderBtn>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: "搭建供应商评估表",
+  },
+};
+
+export const ShortText: Story = {
+  args: {
+    children: "确认",
+  },
+};
+
+export const LongText: Story = {
+  args: {
+    children: "创建新的供应商管理表单并提交审核",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    children: "搭建供应商评估表",
+    disabled: true,
+  },
+};
+
+export const WithClickHandler: Story = {
+  args: {
+    children: "点击我",
+    onClick: () => alert("按钮被点击了！"),
+  },
+};
+
+export const CustomClassName: Story = {
+  args: {
+    children: "自定义样式",
+    className: "w-[200px]",
+  },
+};
+
+export const MultipleButtons: Story = {
+  render: () => (
+    <div className="flex gap-2">
+      <LinearGradientBorderBtn>取消</LinearGradientBorderBtn>
+      <LinearGradientBorderBtn>确定</LinearGradientBorderBtn>
+      <LinearGradientBorderBtn>提交</LinearGradientBorderBtn>
+    </div>
+  ),
+};
+
+export const WithIcon: Story = {
+  args: {
+    children: (
+      <div className="flex items-center gap-1">
+        <LetterAIcon />
+        <span>添加表单</span>
+      </div>
+    ),
+  },
+};
+
+export const FixedWidth: Story = {
+  args: {
+    children: "固定宽度按钮",
+    className: "w-[160px]",
+  },
+};

package/src/stories/LinearGradientColorBgAnimation.stories.tsx

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { LinearGradientColorBgAnimation } from "@/components/bs-ui/linear-gradient-color-bg-animation";
+
+const meta = {
+  title: "Example/Animation/LinearGradientColorBgAnimation",
+  component: LinearGradientColorBgAnimation,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+  args: {},
+} satisfies Meta<typeof LinearGradientColorBgAnimation>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    width: '976px',
+    height: '52px',
+  },
+};
+
+export const WithContent: Story = {
+  args: {
+    width: '100vw',
+    height: '400px',
+  },
+  render: (args) => (
+    <LinearGradientColorBgAnimation {...args}>
+      <div style={{ 
+        display: 'flex', 
+        alignItems: 'center', 
+        justifyContent: 'center', 
+        height: '100%',
+        color: '#333',
+      }}>
+        <div style={{ textAlign: 'center' }}>
+          <h1 style={{ margin: '0 0 16px 0', fontSize: '48px' }}>Flowing Gradient</h1>
+          <p style={{ margin: 0, fontSize: '20px' }}>Natural animated background</p>
+        </div>
+      </div>
+    </LinearGradientColorBgAnimation>
+  ),
+};
+
+export const FixedSize: Story = {
+  args: {
+    width: '800px',
+    height: '300px',
+  },
+};
+
+export const TallSize: Story = {
+  args: {
+    width: '600px',
+    height: '600px',
+  },
+};

package/src/stories/OptionItem.stories.tsx

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { OptionItem } from "@/components/bs-ui/option-item";
+
+const meta = {
+  title: "Example/Chat/OptionItem",
+  component: OptionItem,
+  // 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 OptionItem>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    label: "选项",
+  },
+};
+
+export const WithBgColor: Story = {
+  args: {
+    label: "单行文本",
+    bgColor: "#E8F4FF",
+    color: "#0265FF",
+  },
+};
+
+export const RedVariant: Story = {
+  args: {
+    label: "错误",
+    bgColor: "#FFEBEE",
+    color: "#D32F2F",
+  },
+};
+
+export const GreenVariant: Story = {
+  args: {
+    label: "成功",
+    bgColor: "#E8F5E9",
+    color: "#388E3C",
+  },
+};
+
+export const WithChildren: Story = {
+  args: {
+    children: <span>使用children</span>,
+    bgColor: "#F3E5F5",
+    color: "#7B1FA2",
+  },
+};
+
+export const WithIcon: Story = {
+  args: {
+    label: (
+      <div className="flex items-center gap-1">
+        <span>✓</span>
+        <span>已选择</span>
+      </div>
+    ),
+    bgColor: "#E8F5E9",
+    color: "#388E3C",
+  },
+};
+
+export const CustomColor: Story = {
+  args: {
+    label: "自定义颜色",
+    bgColor: "#FFF8DC",
+    color: "#8B4513",
+  },
+};

package/src/stories/PreviewerHeader.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { PreviewerHeader } from "@/components/bs-ui/previewer-header";
+
+const meta: Meta<typeof PreviewerHeader> = {
+  title: "Example/Chat/PreviewerHeader",
+  component: PreviewerHeader,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    title: "编辑表单",
+    onSave: () => alert("保存点击"),
+    onCancel: () => alert("取消点击"),
+    style: { width: 700 },
+  },
+};
+
+
+export const ActiveMode: Story = {
+  args: {
+    title: "编辑表单",
+    onSave: () => alert("保存点击"),
+    onCancel: () => alert("取消点击"),
+    style: { width: 700 },
+    active: true,
+  },
+};
+
+
+export const WithTips: Story = {
+  args: {
+    title: "编辑表单",
+    onSave: () => alert("保存点击"),
+    onCancel: () => alert("取消点击"),
+    style: { width: 700 },
+    active: true,
+    tips: "AI生成内容可能不准确，请谨慎使用"
+  },
+};