@teamix-evo/ui 0.4.0 → 0.5.0

package/src/components/select/select.stories.tsx

@@ -1,275 +0,0 @@
-import * as React from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Select } from './select';
-
-const cityOptions = [
-  { value: 'bj', label: '北京' },
-  { value: 'sh', label: '上海' },
-  { value: 'hz', label: '杭州' },
-  { value: 'sz', label: '深圳' },
-];
-
-const tzGroups = [
-  {
-    label: '亚洲',
-    options: [
-      { value: 'cn', label: '北京时间 (UTC+8)' },
-      { value: 'jp', label: '东京时间 (UTC+9)' },
-      { value: 'sg', label: '新加坡时间 (UTC+8)' },
-    ],
-  },
-  {
-    label: '欧洲',
-    options: [
-      { value: 'uk', label: '伦敦时间 (UTC+0)' },
-      { value: 'de', label: '柏林时间 (UTC+1)' },
-    ],
-  },
-];
-
-const meta: Meta<typeof Select> = {
-  title: '数据录入 · Data Entry/Select',
-  component: Select,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          '下拉选择 — 单组件覆盖 cd `Select` 全部模式:**单选 / 多选 / 搜索 / 标签创建(creatable)/ 远程异步 / 虚拟滚动**。基于 Popover + cmdk Command;触发器 `size` 三档与 Button / Input 同档(24/32/36)。原 `Combobox` 已合并入此组件。',
-      },
-    },
-  },
-  argTypes: {
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
-    multiple: { control: 'boolean' },
-    searchable: { control: 'boolean' },
-    creatable: { control: 'boolean' },
-    clearable: { control: 'boolean' },
-    disabled: { control: 'boolean' },
-    error: { control: 'boolean' },
-    placeholder: { control: 'text' },
-  },
-  args: {
-    size: 'md',
-    multiple: false,
-    searchable: false,
-    creatable: false,
-    clearable: false,
-    disabled: false,
-    error: false,
-    placeholder: '请选择...',
-  },
-  decorators: [
-    (Story) => (
-      <div className="w-64">
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export default meta;
-type Story = StoryObj<typeof Select>;
-
-export const Playground: Story = {
-  render: (args) => <Select {...args} options={cityOptions} />,
-};
-
-export const Sizes: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex flex-col gap-3">
-      {(['sm', 'md', 'lg'] as const).map((s) => (
-        <Select
-          key={s}
-          size={s}
-          options={cityOptions}
-          placeholder={`size = ${s} (h-${s === 'sm' ? '6' : s === 'md' ? '8' : '9'})`}
-        />
-      ))}
-    </div>
-  ),
-};
-
-export const Grouped: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => <Select groups={tzGroups} placeholder="选择时区" />,
-};
-
-export const Searchable: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <Select
-      searchable
-      options={cityOptions}
-      placeholder="可搜索的城市"
-      searchPlaceholder="输入城市名..."
-    />
-  ),
-};
-
-export const Multiple: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <Select
-      multiple
-      options={cityOptions}
-      placeholder="选择多个城市"
-      defaultValue={['bj', 'hz']}
-    />
-  ),
-};
-
-export const MultipleWithMaxTagCount: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <Select
-      multiple
-      maxTagCount={2}
-      options={cityOptions}
-      placeholder="最多展示 2 个 Tag,其余折叠 +N"
-      defaultValue={['bj', 'sh', 'hz', 'sz']}
-    />
-  ),
-};
-
-/**
- * Creatable / Tag 模式 — 等价 cd `Select mode="tag"`。
- * 输入未匹配 options 的内容时,顶部显示"创建 'xxx'"项,Enter 即创建并选中。
- * 配合 `multiple` 是经典 Tag 输入器(自由标签创建 + 已选标签 chip 展示)。
- */
-export const CreatableTags: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => {
-    const [opts, setOpts] = React.useState([
-      { value: 'react', label: 'React' },
-      { value: 'vue', label: 'Vue' },
-      { value: 'angular', label: 'Angular' },
-    ]);
-    return (
-      <Select
-        multiple
-        creatable
-        searchable
-        options={opts}
-        placeholder="选择 / 创建技术栈"
-        searchPlaceholder="输入并按 Enter 创建..."
-        onCreate={(val) => setOpts((prev) => [...prev, { value: val, label: val }])}
-      />
-    );
-  },
-};
-
-/**
- * 远程异步搜索 — 等价 cd `Select showSearch onSearch`。
- * `onSearch` 在输入变化时触发(本 demo 模拟接口延迟),消费方据 `query` 拉接口
- * 刷新 `options`;同时本地 filter 默认关闭(已由服务端过滤)。
- */
-export const AsyncRemoteSearch: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => {
-    const [opts, setOpts] = React.useState<{ value: string; label: string }[]>(
-      [],
-    );
-    const [loading, setLoading] = React.useState(false);
-
-    const handleSearch = React.useCallback(async (q: string) => {
-      if (!q.trim()) {
-        setOpts([]);
-        return;
-      }
-      setLoading(true);
-      // 模拟接口请求
-      await new Promise((r) => setTimeout(r, 300));
-      setOpts([
-        { value: `${q}-1`, label: `${q} 远程结果 1` },
-        { value: `${q}-2`, label: `${q} 远程结果 2` },
-        { value: `${q}-3`, label: `${q} 远程结果 3` },
-      ]);
-      setLoading(false);
-    }, []);
-
-    return (
-      <Select
-        searchable
-        options={opts}
-        onSearch={handleSearch}
-        placeholder="远程搜索"
-        searchPlaceholder="输入查询关键字..."
-        emptyText={loading ? '加载中...' : '输入关键字开始搜索'}
-      />
-    );
-  },
-};
-
-/**
- * 虚拟滚动 — 选项数 ≥ `threshold`(默认 100)时启用 `@tanstack/react-virtual`,
- * 大数据集首次渲染显著提速。本 demo 渲染 5000 项。
- */
-export const Virtual: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => {
-    const opts = React.useMemo(
-      () =>
-        Array.from({ length: 5000 }, (_, i) => ({
-          value: `item-${i}`,
-          label: `选项 #${i.toString().padStart(4, '0')}`,
-        })),
-      [],
-    );
-    return (
-      <Select
-        searchable
-        virtual
-        options={opts}
-        placeholder="5000 项 — 虚拟滚动"
-        searchPlaceholder="搜索 5000 个选项..."
-      />
-    );
-  },
-};
-
-export const Clearable: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <Select
-      clearable
-      options={cityOptions}
-      defaultValue="bj"
-      placeholder="可清除"
-    />
-  ),
-};
-
-export const Disabled: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => <Select disabled options={cityOptions} placeholder="已禁用" />,
-};
-
-export const Error: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex flex-col gap-1">
-      <Select error options={cityOptions} placeholder="请选择(必填)" />
-      <span className="text-xs text-destructive">该字段为必填项</span>
-    </div>
-  ),
-};
-
-export const Controlled: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => {
-    const [v, setV] = React.useState<string>('');
-    return (
-      <div className="flex flex-col gap-2">
-        <Select
-          options={cityOptions}
-          value={v}
-          onChange={(next: string | string[]) => setV(next as string)}
-          placeholder="受控单选"
-        />
-        <span className="text-xs text-muted-foreground">当前值: {v || '(未选)'}</span>
-      </div>
-    );
-  },
-};