@baishuyun/ai-design 1.0.2 → 1.0.4

package/src/stories/CheckCard.stories.tsx

@@ -0,0 +1,114 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+
+import { CheckCard } from '../components/check-card';
+
+const meta = {
+  title: 'AI Office/CheckCard',
+  component: CheckCard,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+  args: {},
+} satisfies Meta<typeof CheckCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    title: '表单提交数据',
+  },
+};
+
+export const WithDescription: Story = {
+  args: {
+    title: '表单提交数据',
+    description: '提交表单中的所有数据到服务器',
+  },
+};
+
+export const Checked: Story = {
+  args: {
+    title: '表单提交数据',
+    description: '提交表单中的所有数据到服务器',
+    defaultChecked: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    title: '表单提交数据',
+    description: '提交表单中的所有数据到服务器',
+    disabled: true,
+  },
+};
+
+export const DisabledChecked: Story = {
+  args: {
+    title: '表单提交数据',
+    description: '提交表单中的所有数据到服务器',
+    disabled: true,
+    defaultChecked: true,
+  },
+};
+
+const ControlledComponent = () => {
+  const [checked, setChecked] = useState(false);
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12, alignItems: 'center' }}>
+      <CheckCard
+        title="表单提交数据"
+        description="提交表单中的所有数据到服务器"
+        checked={checked}
+        onCheckedChange={(v) => setChecked(!!v)}
+      />
+      <button onClick={() => setChecked(!checked)}>
+        Toggle from outside (current: {checked ? 'checked' : 'unchecked'})
+      </button>
+    </div>
+  );
+};
+
+export const Controlled: Story = {
+  args: {} as any,
+  render: () => <ControlledComponent />,
+};
+
+const MultipleOptionsComponent = () => {
+  const [selected, setSelected] = useState<string[]>(['dialog']);
+  const toggle = (key: string) => {
+    setSelected((prev) =>
+      prev.includes(key) ? prev.filter((k) => k !== key) : [...prev, key]
+    );
+  };
+  return (
+    <div style={{ display: 'flex', gap: 8 }}>
+      <CheckCard
+        className="shrink-0 grow w-[30%]"
+        title="支持对话框模式"
+        description="应用将以对话框形式弹出"
+        checked={selected.includes('dialog')}
+        onCheckedChange={() => toggle('dialog')}
+      />
+      <CheckCard
+        className="shrink-0 grow w-[30%]"
+        title="支持侧边栏模式"
+        description="应用将以侧边栏形式展示"
+        checked={selected.includes('sidebar')}
+        onCheckedChange={() => toggle('sidebar')}
+      />
+      <CheckCard
+        className="shrink-0 grow w-[30%]"
+        title="支持全屏模式"
+        description="应用将全屏展示"
+        checked={selected.includes('fullscreen')}
+        onCheckedChange={() => toggle('fullscreen')}
+      />
+    </div>
+  );
+};
+
+export const MultipleOptions: Story = {
+  args: {} as any,
+  render: () => <MultipleOptionsComponent />,
+};

package/src/stories/ConditionGroup.stories.tsx

@@ -0,0 +1,216 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState, useCallback } from 'react';
+import { ConditionGroup } from '../components/agent-helper/condition-group';
+import type { IField, ICondition } from '@baishuyun/types';
+
+const mockFields: IField[] = [
+  {
+    label: '姓名',
+    description: '请输入姓名',
+    widget: { type: 'text', widgetName: 'text', value: '' },
+  },
+  {
+    label: '年龄',
+    description: '请输入年龄',
+    widget: { type: 'number', widgetName: 'number', value: '' },
+  },
+  {
+    label: '出生日期',
+    description: '请选择出生日期',
+    widget: { type: 'datetime', widgetName: 'datetime', value: '' },
+  },
+  {
+    label: '备注',
+    description: '请输入备注',
+    widget: { type: 'textarea', widgetName: 'textarea', value: '' },
+  },
+  {
+    label: '性别',
+    widget: {
+      type: 'radiogroup',
+      widgetName: 'radiogroup',
+      value: '',
+      items: [
+        { label: '男', value: 'male' },
+        { label: '女', value: 'female' },
+      ],
+    },
+  },
+  {
+    label: '所在城市',
+    widget: {
+      type: 'combo',
+      widgetName: 'combo',
+      value: '',
+      items: [
+        { label: '北京', value: 'beijing' },
+        { label: '上海', value: 'shanghai' },
+        { label: '广州', value: 'guangzhou' },
+      ],
+    },
+  },
+  {
+    label: '兴趣爱好',
+    widget: {
+      type: 'checkboxgroup',
+      widgetName: 'checkboxgroup',
+      value: [],
+      items: [
+        { label: '阅读', value: 'reading' },
+        { label: '运动', value: 'sports' },
+        { label: '音乐', value: 'music' },
+      ],
+    },
+  },
+  {
+    label: '附件上传',
+    widget: { type: 'upload', widgetName: 'upload', value: '' },
+  },
+];
+
+const meta: Meta<typeof ConditionGroup> = {
+  title: 'Agent Helper/ConditionGroup',
+  component: ConditionGroup,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    fields: mockFields,
+    disabled: false,
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: '960px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    fields: mockFields,
+    value: {
+      targetName: '',
+      quantifier: 'all',
+      items: [
+        {
+          id: 'item-1',
+          field: mockFields[0],
+          operator: 'contains',
+          value: '张三',
+        },
+        {
+          id: 'item-2',
+          field: mockFields[1],
+          operator: 'gte',
+          value: 18,
+        },
+        {
+          id: 'item-3',
+          field: mockFields[5],
+          operator: 'in',
+          value: ['beijing', 'shanghai'],
+        },
+      ],
+    },
+  },
+};
+
+export const SingleCondition: Story = {
+  args: {
+    fields: mockFields,
+    value: {
+      targetName: '',
+      quantifier: 'all',
+      items: [
+        {
+          id: 'item-1',
+          field: mockFields[0],
+          operator: 'contains',
+          value: '张三',
+        },
+      ],
+    },
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    fields: mockFields,
+    disabled: true,
+    value: {
+      targetName: '',
+      quantifier: 'all',
+      items: [
+        {
+          id: 'item-1',
+          field: mockFields[0],
+          operator: 'contains',
+          value: '张三',
+        },
+        {
+          id: 'item-2',
+          field: mockFields[1],
+          operator: 'gte',
+          value: 18,
+        },
+      ],
+    },
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [condition, setCondition] = useState<ICondition>({
+      targetName: '',
+      quantifier: 'all',
+      items: [
+        {
+          id: 'item-1',
+          field: mockFields[0],
+          operator: 'contains',
+          value: '张三',
+        },
+        {
+          id: 'item-2',
+          field: mockFields[1],
+          operator: 'gte',
+          value: 18,
+        },
+      ],
+    });
+
+    const handleChange = useCallback((newCondition: ICondition) => {
+      setCondition(newCondition);
+    }, []);
+
+    return (
+      <div className="flex flex-col gap-[16px]">
+        <ConditionGroup
+          fields={mockFields}
+          value={condition}
+          onChange={handleChange}
+        />
+        <div className="text-[12px] text-[#666666] bg-[#F5F5F5] rounded-[4px] p-[8px] font-mono">
+          <pre>{JSON.stringify(condition, null, 2)}</pre>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    fields: mockFields,
+    value: {
+      targetName: '',
+      quantifier: 'all',
+      items: [],
+    },
+  },
+};