@baishuyun/ai-design 1.0.0

package/src/stories/AttachmentsPreviewer.stories.tsx

@@ -0,0 +1,306 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { AttachmentsPreviewer, AttachmentItem } from '../components/attachments-previewer';
+
+const sampleImages: AttachmentItem[] = [
+  {
+    id: '1',
+    url: 'https://images.unsplash.com/photo-1509042239860-f550ce710b93?w=200&h=200&fit=crop',
+    alt: 'Coffee',
+    contentType: 'image/jpeg',
+  },
+  {
+    id: '2',
+    url: 'https://images.unsplash.com/photo-1543466835-00a7907e9de1?w=200&h=200&fit=crop',
+    alt: 'Dog',
+    contentType: 'image/jpeg',
+  },
+  {
+    id: '3',
+    url: 'https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?w=200&h=200&fit=crop',
+    alt: 'Cat',
+    contentType: 'image/jpeg',
+  },
+  {
+    id: '4',
+    url: 'https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?w=200&h=200&fit=crop',
+    alt: 'Coffee cup',
+    contentType: 'image/jpeg',
+  },
+  {
+    id: '5',
+    url: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=200&h=200&fit=crop',
+    alt: 'Portrait',
+    contentType: 'image/jpeg',
+  },
+];
+
+const manyImages: AttachmentItem[] = [
+  ...sampleImages,
+  {
+    id: '6',
+    url: 'https://images.unsplash.com/photo-1518770660439-4636190af475?w=200&h=200&fit=crop',
+    alt: 'Tech',
+    contentType: 'image/jpeg',
+  },
+  {
+    id: '7',
+    url: 'https://images.unsplash.com/photo-1493976040374-85c8e12f0c0e?w=200&h=200&fit=crop',
+    alt: 'Japan',
+    contentType: 'image/jpeg',
+  },
+  {
+    id: '8',
+    url: 'https://images.unsplash.com/photo-1501854140801-50d01698950b?w=200&h=200&fit=crop',
+    alt: 'Nature',
+    contentType: 'image/jpeg',
+  },
+  {
+    id: '9',
+    url: 'https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=200&h=200&fit=crop',
+    alt: 'Fog',
+    contentType: 'image/jpeg',
+  },
+  {
+    id: '10',
+    url: 'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=200&h=200&fit=crop',
+    alt: 'Forest',
+    contentType: 'image/jpeg',
+  },
+];
+
+const sampleFiles: AttachmentItem[] = [
+  {
+    id: 'file-xlsx',
+    url: '',
+    alt: 'report.xlsx',
+    contentType: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+  },
+  {
+    id: 'file-csv',
+    url: '',
+    alt: 'data.csv',
+    contentType: 'text/csv',
+  },
+  {
+    id: 'file-txt',
+    url: '',
+    alt: 'notes.txt',
+    contentType: 'text/plain',
+  },
+  {
+    id: 'file-unknown',
+    url: '',
+    alt: 'archive.bin',
+    contentType: 'application/x-unknown',
+  },
+];
+
+const meta: Meta<typeof AttachmentsPreviewer> = {
+  title: 'Example/Chat/AttachmentsPreviewer',
+  component: AttachmentsPreviewer,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  args: {},
+  decorators: [
+    (Story) => (
+      <div style={{ width: 308 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Base: Story = {
+  args: {
+    attachments: sampleImages,
+  },
+};
+
+export const FewImages: Story = {
+  args: {
+    attachments: sampleImages.slice(0, 3),
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 220 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const ManyImages: Story = {
+  args: {
+    attachments: manyImages,
+    onImageRemove: (attachment, index) => {
+      alert(`Remove image ${index + 1}: ${attachment.alt}`);
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 350 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const WithClickHandler: Story = {
+  args: {
+    attachments: sampleImages,
+    onImageClick: (attachment, index) => {
+      alert(`Clicked image ${index + 1}: ${attachment.alt}`);
+    },
+  },
+};
+
+export const WithRemoveHandler: Story = {
+  args: {
+    attachments: sampleImages,
+    onImageRemove: (attachment, index) => {
+      alert(`Remove image ${index + 1}: ${attachment.alt}`);
+    },
+  },
+};
+
+export const CustomSize: Story = {
+  args: {
+    attachments: sampleImages,
+    imageSize: 80,
+    gap: 12,
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 400 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const SmallSize: Story = {
+  args: {
+    attachments: sampleImages,
+    imageSize: 40,
+    gap: 8,
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 250 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const SingleImage: Story = {
+  args: {
+    attachments: sampleImages.slice(0, 1),
+  },
+};
+
+export const TwoImages: Story = {
+  args: {
+    attachments: sampleImages.slice(0, 2),
+  },
+};
+
+export const FullWidth: Story = {
+  args: {
+    attachments: manyImages,
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 600 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const WithLoadingItems: Story = {
+  args: {
+    attachments: [
+      ...sampleImages.slice(0, 2),
+      {
+        id: 'loading-1',
+        url: '',
+        alt: 'Uploading file 1',
+        isLoading: true,
+        contentType: 'application/vnd.ms-excel',
+      },
+      {
+        id: 'loading-2',
+        url: '',
+        alt: 'Uploading file 2',
+        isLoading: true,
+        contentType: 'text/csv',
+      },
+    ],
+    onImageRemove: (attachment, index) => {
+      alert(`Remove image ${index + 1}: ${attachment.alt}`);
+    },
+  },
+};
+
+export const MixedLoadingAndLoaded: Story = {
+  args: {
+    attachments: [
+      sampleImages[0],
+      {
+        id: 'loading-1',
+        url: '',
+        alt: 'Uploading...',
+        isLoading: true,
+        contentType: 'image/png',
+      },
+      sampleImages[1],
+      sampleImages[2],
+      {
+        id: 'loading-2',
+        url: '',
+        alt: 'Uploading...',
+        isLoading: true,
+        contentType: 'text/plain',
+      },
+    ],
+    onImageRemove: (attachment, index) => {
+      alert(`Remove image ${index + 1}: ${attachment.alt}`);
+    },
+  },
+};
+
+export const NonImageFiles: Story = {
+  args: {
+    attachments: sampleFiles,
+    onImageRemove: (attachment, index) => {
+      alert(`Remove file ${index + 1}: ${attachment.alt}`);
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 260 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const MixedFilesAndImages: Story = {
+  args: {
+    attachments: [...sampleImages.slice(0, 2), ...sampleFiles],
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 360 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};

package/src/stories/BaseButton.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { BaseButton } from '../components/base-button';
+import { ColorfulEditIcon, DockIcon } from '../components/bs-icons';
+
+const meta = {
+  title: 'Example/Button/BaseButton',
+  component: BaseButton,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    children: 'AI填报示例数据',
+    icon: <DockIcon />,
+  },
+} satisfies Meta<typeof BaseButton>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Base: Story = {
+  args: {
+    icon: <ColorfulEditIcon />,
+  },
+};
+
+export const Hover: Story = {
+  parameters: {
+    pseudo: { hover: true },
+  },
+};

package/src/stories/BorderAnimation.stories.tsx

@@ -0,0 +1,116 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { BorderAnimation } from '../components/border-animation';
+
+const meta = {
+  title: 'Animation/BorderAnimation',
+  component: BorderAnimation,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  args: {},
+} satisfies Meta<typeof BorderAnimation>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <div className="flex items-center gap-[6px] bg-white px-[10px] py-[4px] rounded-[4px]">
+        <span className="text-[#999] text-[14px]">
+          数据生成中，可点击下方按钮暂停
+        </span>
+      </div>
+    ),
+  },
+};
+
+export const WithCustomContent: Story = {
+  args: {
+    children: (
+      <div className="bg-white px-4 py-3 rounded-[4px]">
+        <h3 className="text-[16px] font-medium text-[#333]">标题内容</h3>
+        <p className="text-[14px] text-[#666] mt-1">
+          这是一段描述文字，展示边框动画效果。
+        </p>
+      </div>
+    ),
+  },
+};
+
+export const LargerRadius: Story = {
+  args: {
+    borderRadius: 12,
+    children: (
+      <div className="bg-white px-4 py-3 rounded-[12px]">
+        <p className="text-[14px] text-[#666]">圆角 12px 的边框动画</p>
+      </div>
+    ),
+  },
+};
+
+export const SlowAnimation: Story = {
+  args: {
+    duration: 5,
+    children: (
+      <div className="bg-white px-4 py-3 rounded-[4px]">
+        <p className="text-[14px] text-[#666]">慢速动画（5秒一圈）</p>
+      </div>
+    ),
+  },
+};
+
+export const FastAnimation: Story = {
+  args: {
+    duration: 1,
+    children: (
+      <div className="bg-white px-4 py-3 rounded-[4px]">
+        <p className="text-[14px] text-[#666]">快速动画（1秒一圈）</p>
+      </div>
+    ),
+  },
+};
+
+export const CustomGradient: Story = {
+  args: {
+    gradient:
+      'linear-gradient(180deg, #FF84B4 0%, #FF0265 50%, #FFB1FA 100%)',
+    children: (
+      <div className="bg-white px-4 py-3 rounded-[4px]">
+        <p className="text-[14px] text-[#666]">自定义渐变色（粉色系）</p>
+      </div>
+    ),
+  },
+};
+
+export const CustomClassName: Story = {
+  args: {
+    className: 'w-[300px]',
+    children: (
+      <div className="bg-white px-4 py-3 rounded-[4px]">
+        <p className="text-[14px] text-[#666]">自定义宽度 300px</p>
+      </div>
+    ),
+  },
+};
+
+export const FullWidth: Story = {
+  decorators: [
+    (Story) => (
+      <div style={{ width: '500px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    children: (
+      <div className="bg-white px-4 py-3 rounded-[4px]">
+        <p className="text-[14px] text-[#666]">
+          宽度 100%，自动填满父容器
+        </p>
+      </div>
+    ),
+  },
+};

package/src/stories/BorderColorAnimation.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { BorderColorAnimation } from '../components/border-color-animation';
+
+const meta = {
+  title: 'Example/Animation/BorderColorAnimation',
+  component: BorderColorAnimation,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  args: {},
+} satisfies Meta<typeof BorderColorAnimation>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    width: '600px',
+    height: '400px',
+  },
+};
+
+export const WithContent: Story = {
+  args: {
+    width: '600px',
+    height: '400px',
+  },
+  render: (args) => (
+    <BorderColorAnimation {...args}>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          height: '100%',
+          color: '#333',
+        }}
+      >
+        <div style={{ textAlign: 'center' }}>
+          <h2 style={{ margin: '0 0 12px 0' }}>Animated Border</h2>
+          <p style={{ margin: 0 }}>Content inside the animated border frame</p>
+        </div>
+      </div>
+    </BorderColorAnimation>
+  ),
+};
+
+export const SmallSize: Story = {
+  args: {
+    width: '300px',
+    height: '200px',
+  },
+};
+
+export const SquareSize: Story = {
+  args: {
+    width: '400px',
+    height: '400px',
+  },
+};

package/src/stories/BotAvatarAndName.stories.ts

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { BotAvatarAndName } from "../components/bot-avatar-name";
+
+const meta = {
+  title: "Example/Chat/Bot Avatar And Name",
+  component: BotAvatarAndName,
+  // 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 BotAvatarAndName>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Base: Story = {
+  args: {
+    name: "AI表单搭建",
+  },
+};

package/src/stories/BotIcon.stories.ts

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { BotIcon } from "../components/bot-icon";
+
+const meta = {
+  title: "Example/Icons/BotIcon",
+  component: BotIcon,
+  // 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 BotIcon>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Base: Story = {
+  args: {},
+};