@teamix-evo/ui 0.1.1

package/src/components/data-table/data-table.stories.tsx

@@ -0,0 +1,125 @@
+import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ArrowUpDown } from 'lucide-react';
+import { DataTable, type ColumnDef } from './data-table';
+import { Button } from '@/components/button/button';
+import { Checkbox } from '@/components/checkbox/checkbox';
+import { Badge } from '@/components/badge/badge';
+
+interface User {
+  id: string;
+  name: string;
+  email: string;
+  status: 'active' | 'invited' | 'disabled';
+  amount: number;
+}
+
+const data: User[] = Array.from({ length: 35 }).map((_, i) => ({
+  id: `u-${i + 1}`,
+  name: ['Alice', 'Bob', 'Carol', 'David', 'Eve'][i % 5] + ' ' + (i + 1),
+  email: `user${i + 1}@example.com`,
+  status:
+    (['active', 'invited', 'disabled'] as const)[i % 3] ??
+    ('active' as const),
+  amount: Math.round(Math.random() * 1000),
+}));
+
+const columns: ColumnDef<User>[] = [
+  {
+    id: 'select',
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected()
+            ? true
+            : table.getIsSomePageRowsSelected()
+              ? 'indeterminate'
+              : false
+        }
+        onCheckedChange={(v) => table.toggleAllPageRowsSelected(!!v)}
+        aria-label="全选"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(v) => row.toggleSelected(!!v)}
+        aria-label="选中行"
+      />
+    ),
+  },
+  { accessorKey: 'name', header: '姓名' },
+  {
+    accessorKey: 'email',
+    header: ({ column }) => (
+      <Button
+        variant="ghost"
+        size="sm"
+        onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+      >
+        邮箱
+        <ArrowUpDown className="ml-1" />
+      </Button>
+    ),
+  },
+  {
+    accessorKey: 'status',
+    header: '状态',
+    cell: ({ row }) => {
+      const s = row.original.status;
+      return s === 'active' ? (
+        <Badge variant="success">活跃</Badge>
+      ) : s === 'invited' ? (
+        <Badge>已邀请</Badge>
+      ) : (
+        <Badge variant="destructive">已禁用</Badge>
+      );
+    },
+  },
+  {
+    accessorKey: 'amount',
+    header: ({ column }) => (
+      <Button
+        variant="ghost"
+        size="sm"
+        onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+        className="float-right"
+      >
+        金额
+        <ArrowUpDown className="ml-1" />
+      </Button>
+    ),
+    cell: ({ row }) => (
+      <div className="text-right tabular-nums">¥{row.original.amount}</div>
+    ),
+  },
+];
+
+const meta: Meta<typeof DataTable<User, unknown>> = {
+  title: '数据展示 · Data Display/DataTable',
+  component: DataTable,
+  tags: ['autodocs'],
+  parameters: { layout: 'fullscreen' },
+};
+
+export default meta;
+type Story = StoryObj<typeof DataTable<User, unknown>>;
+
+export const Default: Story = {
+  render: () => {
+    const [selected, setSelected] = React.useState<User[]>([]);
+    return (
+      <div className="p-6">
+        <DataTable
+          columns={columns}
+          data={data}
+          pagination={{ pageSize: 8 }}
+          onRowSelectionChange={setSelected}
+        />
+        <p className="mt-3 text-sm text-muted-foreground">
+          已选 {selected.length} 行
+        </p>
+      </div>
+    );
+  },
+};

package/src/components/data-table/data-table.tsx

@@ -0,0 +1,185 @@
+import * as React from 'react';
+import {
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+  type ColumnDef,
+  type ColumnFiltersState,
+  type RowSelectionState,
+  type SortingState,
+  type Table as ReactTable,
+  type Updater,
+  type VisibilityState,
+} from '@tanstack/react-table';
+
+import { cn } from '@/utils/cn';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/table/table';
+import { SimplePagination } from '@/components/pagination/pagination';
+
+export interface DataTableProps<TData, TValue> {
+  /** 列定义(TanStack ColumnDef)。 */
+  columns: ColumnDef<TData, TValue>[];
+  /** 行数据。 */
+  data: TData[];
+  /**
+   * 是否启用分页(antd `pagination` 并集)。
+   * 传 `true` 用默认配置;传对象自定义 pageSize / siblingCount。
+   * @default true
+   */
+  pagination?: boolean | { pageSize?: number; siblingCount?: number };
+  /**
+   * 是否启用排序(列定义里的 `enableSorting` 也要打开;默认列已开)。
+   * @default true
+   */
+  sorting?: boolean;
+  /**
+   * 是否启用列过滤(每列 `header` 配 input 单独使用;此 flag 控制 columnFilters 状态)。
+   * @default true
+   */
+  filtering?: boolean;
+  /**
+   * 行选择回调(antd `rowSelection.onChange` 并集)。传入即启用 selection。
+   * Selected rows 的原始 data 通过 `getRowId(row)` 推断,默认是 row.index。
+   */
+  onRowSelectionChange?: (selectedRows: TData[]) => void;
+  /** 空数据时显示的内容。 */
+  emptyText?: React.ReactNode;
+  /** 容器 className。 */
+  className?: string;
+}
+
+/**
+ * 高阶数据表 — 在基础 Table 之上叠加 TanStack 的 sorting / filtering / pagination /
+ * rowSelection 能力,等价 antd `Table` 的核心交互合集。
+ *
+ * 业务方需要更细粒度时(可控 state、virtualizer、column resizing 等),直接用
+ * `useReactTable` + 基础 Table primitives 自行拼装。
+ */
+function DataTable<TData, TValue>({
+  columns,
+  data,
+  pagination = true,
+  sorting: enableSorting = true,
+  filtering: enableFiltering = true,
+  onRowSelectionChange,
+  emptyText = '暂无数据',
+  className,
+}: DataTableProps<TData, TValue>) {
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    [],
+  );
+  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});
+  const [columnVisibility] = React.useState<VisibilityState>({});
+
+  const handleSelectionChange = (updater: Updater<RowSelectionState>) => {
+    setRowSelection(updater);
+  };
+
+  const pageCfg =
+    typeof pagination === 'object' ? pagination : { pageSize: 10 };
+  const pageSize = pageCfg.pageSize ?? 10;
+
+  const table = useReactTable({
+    data,
+    columns,
+    state: { sorting, columnFilters, columnVisibility, rowSelection },
+    onSortingChange: enableSorting ? setSorting : undefined,
+    onColumnFiltersChange: enableFiltering ? setColumnFilters : undefined,
+    onRowSelectionChange: onRowSelectionChange
+      ? handleSelectionChange
+      : undefined,
+    enableRowSelection: !!onRowSelectionChange,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: enableSorting ? getSortedRowModel() : undefined,
+    getFilteredRowModel: enableFiltering ? getFilteredRowModel() : undefined,
+    getPaginationRowModel: pagination ? getPaginationRowModel() : undefined,
+    initialState: pagination ? { pagination: { pageSize } } : undefined,
+  });
+
+  // Surface selected raw rows whenever rowSelection changes
+  React.useEffect(() => {
+    if (!onRowSelectionChange) return;
+    const selectedRows = table
+      .getSelectedRowModel()
+      .rows.map((r) => r.original);
+    onRowSelectionChange(selectedRows);
+  }, [rowSelection]);
+
+  const total = table.getFilteredRowModel().rows.length;
+
+  return (
+    <div className={cn('space-y-3', className)}>
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
+                  <TableHead key={header.id}>
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext(),
+                        )}
+                  </TableHead>
+                ))}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows.length > 0 ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow
+                  key={row.id}
+                  data-state={row.getIsSelected() && 'selected'}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={columns.length}
+                  className="h-24 text-center text-muted-foreground"
+                >
+                  {emptyText}
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+      {pagination ? (
+        <SimplePagination
+          total={total}
+          pageSize={pageSize}
+          siblingCount={pageCfg.siblingCount}
+          current={table.getState().pagination.pageIndex + 1}
+          onChange={(p) => table.setPageIndex(p - 1)}
+        />
+      ) : null}
+    </div>
+  );
+}
+
+export { DataTable };
+export type { ColumnDef, ReactTable };

package/src/components/date-picker/date-picker.meta.md

@@ -0,0 +1,106 @@
+---
+id: date-picker
+name: DatePicker
+type: component
+category: form
+since: 0.1.0
+package: "@teamix-evo/ui"
+---
+
+# DatePicker
+
+日期选择器 — `Calendar + Popover` 复合,提供两种形态:
+- `<DatePicker />` — 单日(对应 antd `DatePicker`)
+- `<DateRangePicker />` — 范围(对应 antd `DatePicker.RangePicker`)
+
+格式化用 `date-fns`(轻量、模块化、tree-shake 友好)。
+
+## When to use
+
+- 表单中的单日 / 范围选择
+- 报表 / 数据筛选的时间维度
+- 预约 / 计划 / 日程
+
+## When NOT to use
+
+- 仅显示日期(只读)→ `<time>{format(d, '...')}</time>`
+- 内联日历 → 直接用 `Calendar`
+- 时间选择(含时分秒)→ 配 `Input type="time"` 或 v0.x TimePicker
+
+## Props
+
+> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。
+
+<!-- auto:props:begin -->
+| 名称 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `value` | `Date` | – | – | 受控值 — 当前选中日期。 |
+| `onChange` | `(value: Date \| undefined) => void` | – | – | 选中日期变化回调。 |
+| `placeholder` | `string` | `"选择日期"` | – | 占位文本(未选时)。 |
+| `format` | `string` | `"yyyy-MM-dd"` | – | date-fns format 字符串。 |
+| `size` | `'sm' \| 'default' \| 'lg'` | – | – | 触发器尺寸。 |
+| `className` | `string` | – | – | 触发器 className(传给底层 Button)。 |
+| `disabled` | `boolean` | – | – | 触发器是否禁用。 |
+| `disabledDates` | `(date: Date) => boolean` | – | – | 不可选日期 predicate(透传到 Calendar `disabled`)。 |
+<!-- auto:props:end -->
+
+## 依赖
+
+> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
+
+<!-- auto:deps:begin -->
+### 同库依赖
+
+> `teamix-evo ui add date-picker` 时,以下 entry 会被自动连带安装(无需手动 add)。
+
+| Entry | 类型 | 描述 |
+| --- | --- | --- |
+| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
+| `button` | component | 通用按钮 — shadcn 实现 + antd 功能扩展(loading / icon / shape / block / dashed variant) |
+| `calendar` | component | 日期选择面板 — react-day-picker,mode=single|multiple|range,与 design tokens 对齐 |
+| `popover` | component | 可交互浮层 — Radix Popover + antd arrow 并集 |
+
+### npm 依赖
+
+> 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
+
+```bash
+pnpm add date-fns@^3.0.0 react-day-picker@^9.0.0 lucide-react@^0.460.0
+```
+<!-- auto:deps:end -->
+
+> `DateRangePicker` 的 props 详见 [`date-picker.tsx`](./date-picker.tsx) 的 `DateRangePickerProps` interface。
+
+## AI 生成纪律
+
+- **`format` 用 date-fns 字符串**:`yyyy-MM-dd` / `yyyy 年 M 月 d 日` 等;**不要**用旧 moment 写法(`YYYY-MM-DD` 大写在 date-fns 是年的"week year",非"calendar year")
+- **`disabledDates` 而非外部过滤**:把禁用判断 push 给 Calendar,避免选完再被刷掉的尴尬
+- **范围选择默认 2 个月**:`numberOfMonths={2}` 是行业惯例(antd / shadcn / Material 都是)
+- **小尺寸的范围选择需要更宽容器**:`<DateRangePicker />` 默认 w-72,不够的话 className 加宽
+- **空态文案**:`placeholder` 简短,**不要**写 "请选择 / Please select" 之类无信息词;直接 "选择日期" / "下单时间"
+
+## Examples
+
+```tsx
+import { DatePicker, DateRangePicker } from '@/components/ui/date-picker';
+import * as React from 'react';
+
+// 单日
+const [d, setD] = React.useState<Date>();
+<DatePicker value={d} onChange={setD} placeholder="选择日期" />
+
+// 自定义格式
+<DatePicker value={d} onChange={setD} format="yyyy 年 M 月 d 日" />
+
+// 禁用过去
+import { startOfDay } from 'date-fns';
+<DatePicker
+  value={d}
+  onChange={setD}
+  disabledDates={(date) => date < startOfDay(new Date())}
+/>
+
+// 范围
+const [r, setR] = React.useState<{ from?: Date; to?: Date }>();
+<DateRangePicker value={r} onChange={setR} placeholder="选择范围" />
+```

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

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import type { DateRange } from 'react-day-picker';
+import { DatePicker, DateRangePicker } from './date-picker';
+
+const meta: Meta<typeof DatePicker> = {
+  title: '表单与输入 · Form/DatePicker',
+  component: DatePicker,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '日期选择器 — 输入框式触发器 + 弹层日历的组合，支持单日(`DatePicker`)和范围(`DateRangePicker`)两种模式。Popover + Calendar(react-day-picker v9)封装，日期格式由 `format` 控制(date-fns 语法)，`size` 三档对齐 Input。能力对齐 antd DatePicker，视觉走 OpenTrek semantic tokens，所有样式来自 `@teamix-evo/design`，无 mock。',
+      },
+    },
+  },
+  argTypes: {
+    placeholder: { control: 'text' },
+    format: { control: 'text' },
+    size: { control: 'inline-radio', options: ['sm', 'default', 'lg'] },
+    disabled: { control: 'boolean' },
+  },
+  args: { placeholder: '选择日期', format: 'yyyy-MM-dd', size: 'default' },
+};
+
+export default meta;
+type Story = StoryObj<typeof DatePicker>;
+
+export const Single: Story = {
+  render: (args) => {
+    const [d, setD] = React.useState<Date | undefined>();
+    return <DatePicker {...args} value={d} onChange={setD} />;
+  },
+};
+
+export const ChineseFormat: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => {
+    const [d, setD] = React.useState<Date | undefined>(new Date());
+    return (
+      <DatePicker
+        value={d}
+        onChange={setD}
+        format="yyyy 年 M 月 d 日"
+        placeholder="预约日期"
+      />
+    );
+  },
+};
+
+export const Range: StoryObj<typeof DateRangePicker> = {
+  parameters: { controls: { disable: true } },
+  render: () => {
+    const [r, setR] = React.useState<DateRange | undefined>();
+    return <DateRangePicker value={r} onChange={setR} />;
+  },
+};

package/src/components/date-picker/date-picker.tsx

@@ -0,0 +1,156 @@
+import * as React from 'react';
+import { format } from 'date-fns';
+import { Calendar as CalendarIcon } from 'lucide-react';
+import type { DateRange } from 'react-day-picker';
+
+import { cn } from '@/utils/cn';
+import { Button } from '@/components/button/button';
+import { Calendar } from '@/components/calendar/calendar';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/popover/popover';
+
+export interface DatePickerProps {
+  /** 受控值 — 当前选中日期。 */
+  value?: Date;
+  /** 选中日期变化回调。 */
+  onChange?: (value: Date | undefined) => void;
+  /** 占位文本(未选时)。 @default "选择日期" */
+  placeholder?: string;
+  /** date-fns format 字符串。 @default "yyyy-MM-dd" */
+  format?: string;
+  /** 触发器尺寸。 */
+  size?: 'sm' | 'default' | 'lg';
+  /** 触发器 className(传给底层 Button)。 */
+  className?: string;
+  /** 触发器是否禁用。 */
+  disabled?: boolean;
+  /** 不可选日期 predicate(透传到 Calendar `disabled`)。 */
+  disabledDates?: (date: Date) => boolean;
+}
+
+const DatePicker = React.forwardRef<HTMLButtonElement, DatePickerProps>(
+  (
+    {
+      value,
+      onChange,
+      placeholder = '选择日期',
+      format: fmt = 'yyyy-MM-dd',
+      size = 'default',
+      className,
+      disabled,
+      disabledDates,
+    },
+    ref,
+  ) => (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          ref={ref}
+          variant="outline"
+          size={size}
+          disabled={disabled}
+          className={cn(
+            'w-60 justify-start text-left font-normal',
+            !value && 'text-muted-foreground',
+            className,
+          )}
+          icon={<CalendarIcon />}
+        >
+          {value ? format(value, fmt) : placeholder}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0">
+        <Calendar
+          mode="single"
+          selected={value}
+          onSelect={onChange}
+          disabled={disabledDates}
+          initialFocus
+        />
+      </PopoverContent>
+    </Popover>
+  ),
+);
+DatePicker.displayName = 'DatePicker';
+
+// ─── DateRangePicker(antd RangePicker 并集)───────────────────────────────
+
+export interface DateRangePickerProps {
+  /** 受控值 — 当前选中范围。 */
+  value?: DateRange;
+  /** 范围变化回调。 */
+  onChange?: (value: DateRange | undefined) => void;
+  /** 占位文本。 @default "选择日期范围" */
+  placeholder?: string;
+  /** date-fns format 字符串。 @default "yyyy-MM-dd" */
+  format?: string;
+  /** 触发器尺寸。 */
+  size?: 'sm' | 'default' | 'lg';
+  /** 触发器 className。 */
+  className?: string;
+  /** 是否禁用。 */
+  disabled?: boolean;
+  /** 不可选日期 predicate。 */
+  disabledDates?: (date: Date) => boolean;
+  /** 同时显示几个月历。 @default 2 */
+  numberOfMonths?: number;
+}
+
+const DateRangePicker = React.forwardRef<
+  HTMLButtonElement,
+  DateRangePickerProps
+>(
+  (
+    {
+      value,
+      onChange,
+      placeholder = '选择日期范围',
+      format: fmt = 'yyyy-MM-dd',
+      size = 'default',
+      className,
+      disabled,
+      disabledDates,
+      numberOfMonths = 2,
+    },
+    ref,
+  ) => (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          ref={ref}
+          variant="outline"
+          size={size}
+          disabled={disabled}
+          className={cn(
+            'w-72 justify-start text-left font-normal',
+            !value?.from && 'text-muted-foreground',
+            className,
+          )}
+          icon={<CalendarIcon />}
+        >
+          {value?.from
+            ? value.to
+              ? `${format(value.from, fmt)} ~ ${format(value.to, fmt)}`
+              : format(value.from, fmt)
+            : placeholder}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0">
+        <Calendar
+          mode="range"
+          selected={value}
+          onSelect={onChange}
+          disabled={disabledDates}
+          numberOfMonths={numberOfMonths}
+          initialFocus
+        />
+      </PopoverContent>
+    </Popover>
+  ),
+);
+DateRangePicker.displayName = 'DateRangePicker';
+
+export { DatePicker, DateRangePicker };