@baishuyun/ai-design 2.0.38 → 2.1.0-alpha.0

package/src/stories/ConditionGroup.stories.tsx

@@ -1,216 +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: [],
-    },
-  },
-};
+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: [],
+    },
+  },
+};