@baishuyun/ai-design 1.0.3 → 1.0.4

package/src/stories/Label.stories.tsx

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Label } from '../components/ui/label';
+import { Input } from '../components/ui/input';
+
+const meta = {
+  title: 'AI Office/Label',
+  component: Label,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+  args: {},
+} satisfies Meta<typeof Label>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: '名称',
+  },
+};
+
+export const Required: Story = {
+  args: {
+    children: '应用范围',
+    required: true,
+  },
+};
+
+export const WithInput: Story = {
+  args: {
+    htmlFor: 'demo-input',
+  },
+  render: (args) => (
+    <div className="flex flex-col gap-[6px]">
+      <Label {...args}>名称</Label>
+      <Input id={args.htmlFor} placeholder="请输入名称" />
+    </div>
+  ),
+};
+
+export const RequiredWithInput: Story = {
+  args: {
+    htmlFor: 'demo-required-input',
+  },
+  render: (args) => (
+    <div className="flex flex-col gap-[6px]">
+      <Label {...args} required>
+        应用范围
+      </Label>
+      <Input id={args.htmlFor} placeholder="请选择应用范围" />
+    </div>
+  ),
+};
+
+export const DisabledWithInput: Story = {
+  args: {
+    htmlFor: 'disabled-input',
+  },
+  render: (args) => (
+    <div className="flex flex-col gap-[6px]">
+      <Label {...args}>名称</Label>
+      <Input id={args.htmlFor} defaultValue="不可编辑" disabled />
+    </div>
+  ),
+};

package/src/stories/MonthdaysSelect.stories.tsx

@@ -0,0 +1,78 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { MonthdaysSelect, MonthdaysOptions } from '../components/agent-helper/monthdays-select';
+import type { repeatByMonthDetail } from '@baishuyun/types';
+
+const meta: Meta<typeof MonthdaysSelect> = {
+  title: 'Agent Helper/MonthdaysSelect',
+  component: MonthdaysSelect,
+  tags: ['autodocs'],
+  parameters: { layout: 'padded' },
+  decorators: [
+    (Story) => (
+      <div style={{ padding: 20, maxWidth: 400 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithSpecificDays: Story = {
+  args: {
+    value: [1, 15, 28],
+  },
+};
+
+export const WithLastDay: Story = {
+  args: {
+    value: ['last'],
+  },
+};
+
+export const WithMixedSelection: Story = {
+  args: {
+    value: [1, 5, 15, 20, 'last'],
+  },
+};
+
+export const AllDaysSelected: Story = {
+  args: {
+    value: MonthdaysOptions.map((o) => o.value),
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    value: [1, 15],
+    disabled: true,
+  },
+};
+
+export const CustomPlaceholder: Story = {
+  args: {
+    placeholder: '选择每月重复的日期',
+  },
+};
+
+export const Interactive: Story = {
+  render: (args) => {
+    const [val, setVal] = useState<repeatByMonthDetail[]>([]);
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+        <MonthdaysSelect {...args} value={val} onChange={setVal} />
+        <div style={{ padding: 12, background: '#F5F7FA', borderRadius: 8, fontSize: 14 }}>
+          <strong>当前值:</strong>
+          <span style={{ marginLeft: 8 }}>
+            {val.length > 0 ? val.join(', ') : '(未选择)'}
+          </span>
+        </div>
+      </div>
+    );
+  },
+};

package/src/stories/OffsetPreferenceSelect.stories.tsx

@@ -0,0 +1,118 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { OffsetPreferenceSelect } from '../components/agent-helper/offset-preference-select';
+import type { IOffsetPreference, DateFieldType } from '@baishuyun/types';
+
+const meta: Meta<typeof OffsetPreferenceSelect> = {
+  title: 'Agent Helper/OffsetPreferenceSelect',
+  component: OffsetPreferenceSelect,
+  tags: ['autodocs'],
+  parameters: { layout: 'padded' },
+  decorators: [
+    (Story) => (
+      <div style={{ padding: 20 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    dateFieldType: 'date',
+  },
+};
+
+export const DateTimeType: Story = {
+  args: {
+    dateFieldType: 'datetime',
+    value: {
+      dateFieldType: 'datetime',
+      offsetType: 'time',
+      offsetValue: 0,
+      offsetUnit: 'minute',
+    },
+  },
+};
+
+export const WithBeforeOffset: Story = {
+  args: {
+    dateFieldType: 'date',
+    value: {
+      dateFieldType: 'date',
+      offsetType: 'before',
+      offsetValue: 1950,
+      offsetUnit: 'minute',
+    },
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    dateFieldType: 'date',
+    value: {
+      dateFieldType: 'date',
+      offsetType: 'before',
+      offsetValue: 1950,
+      offsetUnit: 'minute',
+    },
+    disabled: true,
+  },
+};
+
+export const Interactive: Story = {
+  render: () => {
+    const [dateFieldType, setDateFieldType] = useState<DateFieldType>('date');
+    const [val, setVal] = useState<IOffsetPreference | undefined>();
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
+        <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
+          <span style={{ fontSize: 14, fontWeight: 500 }}>dateFieldType:</span>
+          <label style={{ fontSize: 14, cursor: 'pointer' }}>
+            <input
+              type="radio"
+              name="dft"
+              value="date"
+              checked={dateFieldType === 'date'}
+              onChange={() => setDateFieldType('date')}
+            />{' '}
+            date
+          </label>
+          <label style={{ fontSize: 14, cursor: 'pointer' }}>
+            <input
+              type="radio"
+              name="dft"
+              value="datetime"
+              checked={dateFieldType === 'datetime'}
+              onChange={() => setDateFieldType('datetime')}
+            />{' '}
+            datetime
+          </label>
+        </div>
+        <OffsetPreferenceSelect
+          dateFieldType={dateFieldType}
+          value={val}
+          onChange={setVal}
+        />
+        <div
+          style={{
+            padding: 12,
+            background: '#F5F7FA',
+            borderRadius: 8,
+            fontSize: 14,
+            fontFamily: 'monospace',
+          }}
+        >
+          <strong>IOffsetPreference:</strong>
+          <pre style={{ marginTop: 8, whiteSpace: 'pre-wrap' }}>
+            {val ? JSON.stringify(val, null, 2) : '(undefined)'}
+          </pre>
+        </div>
+      </div>
+    );
+  },
+};

package/src/stories/OffsetTypeSelect.stories.tsx

@@ -0,0 +1,75 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { OffsetTypeSelect } from '../components/agent-helper/offset-type-select';
+import type { offsetType } from '@baishuyun/types';
+
+const meta: Meta<typeof OffsetTypeSelect> = {
+  title: 'Agent Helper/OffsetTypeSelect',
+  component: OffsetTypeSelect,
+  tags: ['autodocs'],
+  parameters: { layout: 'padded' },
+  decorators: [
+    (Story) => (
+      <div style={{ padding: 20 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    dateFieldType: 'date',
+  },
+};
+
+export const DateTimeField: Story = {
+  args: {
+    dateFieldType: 'datetime',
+    value: 'time',
+  },
+};
+
+export const WithInitialValue: Story = {
+  args: {
+    dateFieldType: 'date',
+    value: 'before',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    dateFieldType: 'date',
+    value: 'day',
+    disabled: true,
+  },
+};
+
+export const CustomPlaceholder: Story = {
+  args: {
+    dateFieldType: 'datetime',
+    placeholder: '选择偏移类型',
+  },
+};
+
+export const Interactive: Story = {
+  render: (args) => {
+    const [val, setVal] = useState<offsetType | undefined>();
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+        <OffsetTypeSelect {...args} value={val} onChange={setVal} />
+        <div style={{ padding: 12, background: '#F5F7FA', borderRadius: 8, fontSize: 14 }}>
+          <strong>当前值:</strong>
+          <span style={{ marginLeft: 8 }}>{val ?? '(未选择)'}</span>
+        </div>
+      </div>
+    );
+  },
+  args: {
+    dateFieldType: 'date',
+  },
+};

package/src/stories/OffsetUnitSelect.stories.tsx

@@ -0,0 +1,61 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { OffsetUnitSelect } from '../components/agent-helper/offset-unit-select';
+import type { offsetUnit } from '@baishuyun/types';
+
+const meta: Meta<typeof OffsetUnitSelect> = {
+  title: 'Agent Helper/OffsetUnitSelect',
+  component: OffsetUnitSelect,
+  tags: ['autodocs'],
+  parameters: { layout: 'padded' },
+  decorators: [
+    (Story) => (
+      <div style={{ padding: 20 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const WithInitialValue: Story = {
+  args: {
+    value: 'minute',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    value: 'day',
+    disabled: true,
+  },
+};
+
+export const CustomPlaceholder: Story = {
+  args: {
+    placeholder: '选择偏移单位',
+  },
+};
+
+export const Interactive: Story = {
+  render: (args) => {
+    const [val, setVal] = useState<offsetUnit | undefined>();
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+        <OffsetUnitSelect {...args} value={val} onChange={setVal} />
+        <div style={{ padding: 12, background: '#F5F7FA', borderRadius: 8, fontSize: 14 }}>
+          <strong>当前值:</strong>
+          <span style={{ marginLeft: 8 }}>{val ?? '(未选择)'}</span>
+        </div>
+      </div>
+    );
+  },
+  args: {},
+};

package/src/stories/OutputConfigEditor.stories.tsx

@@ -0,0 +1,76 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { OutputParam } from '@baishuyun/types';
+import { OutputConfigEditor } from '../components/output-config-editor';
+import type { OutputFieldOption } from '../components/output-config-editor';
+
+const meta: Meta<typeof OutputConfigEditor> = {
+  title: 'Agent Helper/OutputConfigEditor',
+  component: OutputConfigEditor,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 680, minHeight: 200 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const availableFields: OutputFieldOption[] = [
+  { fieldName: 'class', fieldDesc: '班级', type: 'text' },
+  { fieldName: 'count', fieldDesc: '人数', type: 'number' },
+  { fieldName: 'name', fieldDesc: '姓名', type: 'text' },
+  { fieldName: 'age', fieldDesc: '年龄', type: 'number' },
+  { fieldName: 'birthday', fieldDesc: '出生日期', type: 'datetime' },
+  {
+    fieldName: 'studentInfo',
+    fieldDesc: '学生信息',
+    type: 'subform',
+    children: [
+      { fieldName: 'studentName', fieldDesc: '学生姓名', type: 'text' },
+      { fieldName: 'studentAge', fieldDesc: '学生年龄', type: 'number' },
+    ],
+  },
+];
+
+export const Empty: Story = {
+  args: {
+    value: [],
+    availableFields,
+  },
+};
+
+const sampleParams: OutputParam[] = [
+  { name: '班级', type: 'text', description: '' },
+  { name: '人数', type: 'number', description: '' },
+];
+
+export const WithItems: Story = {
+  args: {
+    value: sampleParams,
+    availableFields,
+  },
+};
+
+export const Interactive: Story = {
+  args: {
+    value: [] as OutputParam[],
+    availableFields,
+  },
+  render: (args) => {
+    const [value, setValue] = useState<OutputParam[]>(args.value);
+
+    return (
+      <div style={{ width: 680 }}>
+        <OutputConfigEditor value={value} onChange={setValue} availableFields={args.availableFields} />
+      </div>
+    );
+  },
+};

package/src/stories/PlaceholderCard.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { PlaceholderCard } from '../components/agent-helper/placeholder-card';
+
+const meta = {
+  title: 'Agent Helper/PlaceholderCard',
+  component: PlaceholderCard,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+  },
+  args: {
+    description: '智能体助手可以对表单数据进行XXX，并在表单中再次调用。',
+    detailAddress: 'https://example.com/learn-more',
+    btnLabel: '新建智能体助手',
+    onCreateClick: () => alert('创建智能体助手'),
+  },
+} satisfies Meta<typeof PlaceholderCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const CustomButtonLabel: Story = {
+  args: {
+    btnLabel: '添加助手',
+  },
+};
+
+export const NoButtonLabel: Story = {
+  args: {
+    btnLabel: undefined,
+  },
+};