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

package/src/stories/FormActionTriggerSelect.stories.tsx

@@ -1,80 +1,80 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { useState } from 'react';
-
-import { FormActionTriggerSelect } from '../components/agent-helper/form-action-trigger-select';
-import type { FormActionType } from '@baishuyun/types';
-
-const meta = {
-  title: 'Agent Helper/FormActionTriggerSelect',
-  component: FormActionTriggerSelect,
-  tags: ['autodocs'],
-  parameters: { layout: 'padded' },
-  args: {},
-} satisfies Meta<typeof FormActionTriggerSelect>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {},
-};
-
-export const WithSelection: Story = {
-  args: {
-    value: 'submit',
-  },
-};
-
-const InteractiveComponent = () => {
-  const [value, setValue] = useState<FormActionType | undefined>();
-
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
-      <FormActionTriggerSelect
-        value={value}
-        onChange={(v) => setValue(v as FormActionType)}
-      />
-      {value && (
-        <p style={{ fontSize: 14, color: '#666' }}>
-          当前选中: {value}
-        </p>
-      )}
-    </div>
-  );
-};
-
-export const Interactive: Story = {
-  args: {} as any,
-  render: () => <InteractiveComponent />,
-};
-
-export const MultiSelect: Story = {
-  args: {
-    multiple: true,
-    value: ['submit', 'edit'],
-  },
-};
-
-const MultiSelectInteractiveComponent = () => {
-  const [value, setValue] = useState<FormActionType[]>([]);
-
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
-      <FormActionTriggerSelect
-        multiple
-        value={value}
-        onChange={(v) => setValue(v as FormActionType[])}
-      />
-      {value.length > 0 && (
-        <p style={{ fontSize: 14, color: '#666' }}>
-          当前选中: {value.join(', ')}
-        </p>
-      )}
-    </div>
-  );
-};
-
-export const MultiSelectInteractive: Story = {
-  args: {} as any,
-  render: () => <MultiSelectInteractiveComponent />,
-};
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+
+import { FormActionTriggerSelect } from '../components/agent-helper/form-action-trigger-select';
+import type { FormActionType } from '@baishuyun/types';
+
+const meta = {
+  title: 'Agent Helper/FormActionTriggerSelect',
+  component: FormActionTriggerSelect,
+  tags: ['autodocs'],
+  parameters: { layout: 'padded' },
+  args: {},
+} satisfies Meta<typeof FormActionTriggerSelect>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const WithSelection: Story = {
+  args: {
+    value: 'submit',
+  },
+};
+
+const InteractiveComponent = () => {
+  const [value, setValue] = useState<FormActionType | undefined>();
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      <FormActionTriggerSelect
+        value={value}
+        onChange={(v) => setValue(v as FormActionType)}
+      />
+      {value && (
+        <p style={{ fontSize: 14, color: '#666' }}>
+          当前选中: {value}
+        </p>
+      )}
+    </div>
+  );
+};
+
+export const Interactive: Story = {
+  args: {} as any,
+  render: () => <InteractiveComponent />,
+};
+
+export const MultiSelect: Story = {
+  args: {
+    multiple: true,
+    value: ['submit', 'edit'],
+  },
+};
+
+const MultiSelectInteractiveComponent = () => {
+  const [value, setValue] = useState<FormActionType[]>([]);
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      <FormActionTriggerSelect
+        multiple
+        value={value}
+        onChange={(v) => setValue(v as FormActionType[])}
+      />
+      {value.length > 0 && (
+        <p style={{ fontSize: 14, color: '#666' }}>
+          当前选中: {value.join(', ')}
+        </p>
+      )}
+    </div>
+  );
+};
+
+export const MultiSelectInteractive: Story = {
+  args: {} as any,
+  render: () => <MultiSelectInteractiveComponent />,
+};

package/src/stories/FormDivider.stories.tsx

@@ -1,31 +1,31 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { FormDivider } from '../components/agent-helper/form-divider';
-
-const meta = {
-  title: 'Agent Helper/FormDivider',
-  component: FormDivider,
-  tags: ['autodocs'],
-  parameters: { layout: 'padded' },
-  args: {},
-} satisfies Meta<typeof FormDivider>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    children: '表单动作触发配置',
-  },
-};
-
-export const WithoutText: Story = {
-  args: {},
-};
-
-export const CustomClassName: Story = {
-  args: {
-    children: '自定义样式',
-    className: 'py-[20px]',
-  },
-};
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { FormDivider } from '../components/agent-helper/form-divider';
+
+const meta = {
+  title: 'Agent Helper/FormDivider',
+  component: FormDivider,
+  tags: ['autodocs'],
+  parameters: { layout: 'padded' },
+  args: {},
+} satisfies Meta<typeof FormDivider>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: '表单动作触发配置',
+  },
+};
+
+export const WithoutText: Story = {
+  args: {},
+};
+
+export const CustomClassName: Story = {
+  args: {
+    children: '自定义样式',
+    className: 'py-[20px]',
+  },
+};

package/src/stories/FormInfoEditor.stories.tsx

@@ -1,173 +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>
-    ),
-  ],
-};
+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>
+    ),
+  ],
+};