@teamix-evo/ui 0.2.0 → 0.3.0

package/src/components/time-picker/time-picker.stories.tsx

@@ -1,34 +1,34 @@
 import * as React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { TimePicker } from './time-picker';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { TimePicker, TimeRangePicker } from './time-picker';
 
 const meta: Meta<typeof TimePicker> = {
-  title: '表单与输入 · Form/TimePicker',
+  title: '数据录入 · Data Entry/TimePicker',
   component: TimePicker,
   tags: ['autodocs'],
   parameters: {
     docs: {
       description: {
         component:
-          '时间选择 — 基于原生 input[type=time] 样式封装（零 JS、移动端友好、SSR safe）。图标在右侧（suffix 位置，对齐 antd），有值时可清除。等价 antd `TimePicker` 基础能力，复杂禁用规则需自实现。',
+          'TimePicker 时间选择 —— 选择一个时间点或一段时间区间。Radix Popover 容器 + 自研 TimeColumn 滚动列(对齐 antd `TimePicker` / `TimePicker.RangePicker`,shadcn 未提供原子,本组件做并集补足):关键 prop 包括 `format` / `hourStep` / `minuteStep` / `secondStep` / `disabledHours` / `disabledMinutes` / `disabledSeconds` / `hasClear` / `size` / `error`。视觉走 OpenTrek semantic tokens,所有样式来自 `@teamix-evo/tokens`,无 mock。',
       },
     },
   },
   argTypes: {
-    size: { control: 'inline-radio', options: ['sm', 'default', 'lg'] },
-    showSeconds: { control: 'boolean' },
+    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    format: { control: 'text' },
     disabled: { control: 'boolean' },
-    allowClear: { control: 'boolean' },
-    status: {
-      control: 'inline-radio',
-      options: [undefined, 'error', 'warning'],
-    },
+    hasClear: { control: 'boolean' },
+    error: { control: 'boolean' },
+    placeholder: { control: 'text' },
   },
   args: {
-    size: 'default',
-    showSeconds: true,
+    size: 'md',
+    format: 'HH:mm:ss',
     disabled: false,
-    allowClear: true,
+    hasClear: true,
+    error: false,
+    placeholder: '请选择时间',
   },
 };
 
@@ -45,7 +45,7 @@ export const Controlled: Story = {
     const [t, setT] = React.useState('09:30:00');
     return (
       <div className="flex items-center gap-3">
-        <TimePicker value={t} onChange={setT} showSeconds allowClear />
+        <TimePicker value={t} onChange={setT} />
         <span className="text-sm text-muted-foreground tabular-nums">
           {t || '(空)'}
         </span>
@@ -54,10 +54,31 @@ export const Controlled: Story = {
   },
 };
 
-export const QuarterHourStep: Story = {
+export const HourMinute: Story = {
+  name: '只显示时:分',
+  parameters: { controls: { disable: true } },
+  render: () => <TimePicker format="HH:mm" defaultValue="09:30" />,
+};
+
+export const StepFiveMinutes: Story = {
+  name: '5 分钟一档',
   parameters: { controls: { disable: true } },
   render: () => (
-    <TimePicker showSeconds step={15 * 60} defaultValue="10:00:00" />
+    <TimePicker minuteStep={5} secondStep={10} defaultValue="10:00:00" />
+  ),
+};
+
+export const DisabledHours: Story = {
+  name: '禁用工作时间外',
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <TimePicker
+      defaultValue="09:00:00"
+      disabledHours={() => [
+        ...Array.from({ length: 9 }, (_, i) => i), // 0-8
+        ...Array.from({ length: 5 }, (_, i) => 19 + i), // 19-23
+      ]}
+    />
   ),
 };
 
@@ -65,33 +86,44 @@ export const Sizes: Story = {
   parameters: { controls: { disable: true } },
   render: () => (
     <div className="flex items-center gap-3">
-      <TimePicker size="sm" defaultValue="09:00" />
-      <TimePicker size="default" defaultValue="09:00" />
-      <TimePicker size="lg" defaultValue="09:00" />
+      <TimePicker size="sm" defaultValue="09:00:00" />
+      <TimePicker size="md" defaultValue="09:00:00" />
+      <TimePicker size="lg" defaultValue="09:00:00" />
     </div>
   ),
 };
 
-export const AllowClear: Story = {
+export const Disabled: Story = {
   parameters: { controls: { disable: true } },
-  render: () => {
-    const [t, setT] = React.useState('14:30');
-    return <TimePicker value={t} onChange={setT} allowClear />;
-  },
+  render: () => <TimePicker disabled defaultValue="09:00:00" />,
 };
 
-export const MinMax: Story = {
-  name: 'Min / Max 限制',
+export const ErrorState: Story = {
+  name: '错误态',
   parameters: { controls: { disable: true } },
-  render: () => <TimePicker defaultValue="09:00" min="09:00" max="18:00" />,
+  render: () => <TimePicker error defaultValue="09:00:00" />,
 };
 
-export const Status: Story = {
+export const RangePlayground: StoryObj<typeof TimeRangePicker> = {
+  name: 'Range / 范围选择',
+  parameters: { controls: { disable: true } },
+  render: () => {
+    const [r, setR] = React.useState<[string, string]>(['', '']);
+    return (
+      <div className="flex flex-col gap-3">
+        <TimeRangePicker value={r} onChange={setR} />
+        <span className="text-sm text-muted-foreground tabular-nums">
+          {r[0] && r[1] ? `${r[0]} ~ ${r[1]}` : '(未选)'}
+        </span>
+      </div>
+    );
+  },
+};
+
+export const RangeHourMinute: StoryObj<typeof TimeRangePicker> = {
+  name: 'Range · 时:分',
   parameters: { controls: { disable: true } },
   render: () => (
-    <div className="flex flex-col gap-3">
-      <TimePicker defaultValue="09:00" status="error" />
-      <TimePicker defaultValue="09:00" status="warning" />
-    </div>
+    <TimeRangePicker defaultValue={['09:00', '18:00']} format="HH:mm" />
   ),
 };