@meta-1/design 0.0.159

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

@@ -0,0 +1,491 @@
+import { useContext, useEffect, useMemo, useState } from "react";
+import { DotsHorizontalIcon } from "@radix-ui/react-icons";
+import {
+  type ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  type Row,
+  type SortingState,
+  useReactTable,
+  type VisibilityState,
+} from "@tanstack/react-table";
+import isArray from "lodash/isArray";
+import isFunction from "lodash/isFunction";
+import isString from "lodash/isString";
+import isUndefined from "lodash/isUndefined";
+
+import {
+  Action,
+  Checkbox,
+  cn,
+  Dropdown,
+  type DropdownMenuItemProps,
+  Filters,
+  type FiltersProps,
+  generateColumnStorageKey,
+  Pagination,
+  type PaginationProps,
+  Spin,
+} from "@meta-1/design";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../ui/table";
+import "./style.css";
+
+import { LayoutIcon } from "@radix-ui/react-icons";
+import classNames from "classnames";
+import get from "lodash/get";
+
+import { UIXContext } from "@meta-1/design/components/uix/config-provider";
+import { type Formatters, type FunctionMap, formatValue } from "@meta-1/design/components/uix/value-formatter";
+
+export interface StickyColumnProps {
+  key: string;
+  position: "left" | "right";
+  size: number;
+}
+
+export type DataTableColumn<TData> = ColumnDef<TData, unknown> & {
+  className?: string;
+  formatters?: Formatters;
+};
+
+export interface DataTableProps<TData> {
+  autoHidePagination?: boolean;
+  inCard?: boolean;
+  columns: DataTableColumn<TData>[];
+  data: TData[];
+  showColumnVisibility?: boolean;
+  stickyColumns?: StickyColumnProps[];
+  checkbox?: boolean;
+  rowActions?: DropdownMenuItemProps[] | ((cell: TData) => DropdownMenuItemProps[]);
+  onRowActionClick?: (item: DropdownMenuItemProps, row: Row<TData>) => void;
+  loading?: boolean;
+  load?: (params?: unknown) => Promise<unknown> | unknown;
+  filter?: FiltersProps;
+  pagination?: PaginationProps | boolean;
+  cellHandles?: FunctionMap;
+  empty?: string;
+  showHeader?: boolean;
+  onRowClick?: (row: Row<TData>) => void;
+}
+
+// 本地存储相关函数
+const LOCAL_STORAGE_PREFIX = "datatable_columns_";
+
+const saveColumnVisibility = (storageKey: string, visibility: VisibilityState) => {
+  try {
+    localStorage.setItem(`${LOCAL_STORAGE_PREFIX}${storageKey}`, JSON.stringify(visibility));
+  } catch (_error) {
+    // console.warn('Failed to save column visibility to localStorage:', error)
+  }
+};
+
+const loadColumnVisibility = (storageKey: string): VisibilityState => {
+  try {
+    const stored = localStorage.getItem(`${LOCAL_STORAGE_PREFIX}${storageKey}`);
+    return stored ? JSON.parse(stored) : {};
+  } catch (_error) {
+    // console.warn('Failed to load column visibility from localStorage:', error)
+    return {};
+  }
+};
+
+export const getSticky = (
+  id: string,
+  leftStickyColumns: StickyColumnProps[],
+  rightStickyColumns: StickyColumnProps[],
+) => {
+  const inLeft = !!leftStickyColumns.find(({ key }) => key === id);
+  if (inLeft) {
+    let offset = 0;
+    let width = 0;
+    let index = 0;
+    for (const col of leftStickyColumns) {
+      index++;
+      if (col.key === id) {
+        width = col.size;
+        break;
+      }
+      offset += col.size;
+    }
+    return {
+      width,
+      offset,
+      enable: true,
+      position: "left",
+      last: index === leftStickyColumns.length,
+      first: false,
+    };
+  }
+  const inRight = !!rightStickyColumns.find(({ key }) => key === id);
+  if (inRight) {
+    let offset = 0;
+    let width = 0;
+    let i = 0;
+    for (let index = rightStickyColumns.length - 1; index >= 0; index--) {
+      i++;
+      const col = rightStickyColumns[index];
+      if (col.key === id) {
+        width = col.size;
+        break;
+      }
+      offset += col.size;
+    }
+    return {
+      width,
+      offset,
+      enable: true,
+      position: "right",
+      last: false,
+      first: i === rightStickyColumns.length,
+    };
+  }
+  return { enable: false };
+};
+
+// biome-ignore lint/suspicious/noExplicitAny: <hasActions>
+const hasActions = (rowActions: DropdownMenuItemProps[] | ((cell: any) => DropdownMenuItemProps[])) => {
+  if (isFunction(rowActions)) {
+    return true;
+  }
+  if (isArray(rowActions)) {
+    return !!rowActions.length;
+  }
+  return false;
+};
+
+export function DataTable<TData>(props: DataTableProps<TData>) {
+  const {
+    data,
+    columns,
+    showColumnVisibility = true,
+    rowActions,
+    checkbox = false,
+    stickyColumns = [],
+    onRowActionClick,
+    filter,
+    loading,
+    pagination,
+    load,
+    cellHandles,
+    showHeader = true,
+    autoHidePagination = true,
+    inCard = false,
+  } = props;
+
+  const config = useContext(UIXContext);
+  const empty = props.empty || get(config.locale, "DataTable.empty");
+  // 生成存储key
+  const storageKey = useMemo(() => {
+    return generateColumnStorageKey(columns);
+  }, [columns]);
+  const [sorting, setSorting] = useState<SortingState>([]);
+  // 初始化时不从本地存储读取，避免 SSR 水合错误
+  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
+  const [rowSelection, setRowSelection] = useState({});
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    // 只在客户端挂载后才读取本地存储的列可见性
+    setColumnVisibility(loadColumnVisibility(storageKey));
+    setMounted(true);
+  }, [storageKey]);
+
+  // 当列可见性改变时，保存到本地存储（但跳过初始的空状态）
+  useEffect(() => {
+    if (mounted) {
+      saveColumnVisibility(storageKey, columnVisibility);
+    }
+  }, [columnVisibility, storageKey, mounted]);
+
+  // 当columns改变时，重新加载存储的状态
+  useEffect(() => {
+    if (mounted) {
+      const newStorageKey = generateColumnStorageKey(columns);
+      const storedVisibility = loadColumnVisibility(newStorageKey);
+      setColumnVisibility(storedVisibility);
+    }
+  }, [columns, mounted]);
+
+  const tableColumns = useMemo<ColumnDef<TData, unknown>[]>(() => {
+    const newColumns: ColumnDef<TData, unknown>[] = [];
+    if (checkbox) {
+      newColumns.push({
+        id: "select",
+        enableSorting: false,
+        enableHiding: false,
+        // biome-ignore lint/suspicious/noExplicitAny: <header>
+        header: ({ table }: { table: any }) => (
+          <div className="flex items-center justify-center pr-2">
+            <Checkbox
+              aria-label="Select all"
+              checked={table.getIsAllPageRowsSelected()}
+              onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+            />
+          </div>
+        ),
+        // biome-ignore lint/suspicious/noExplicitAny: <cell>
+        cell: ({ row }: { row: any }) => (
+          <div className="flex items-center justify-center pr-2">
+            <Checkbox
+              aria-label="Select row"
+              checked={row.getIsSelected()}
+              onCheckedChange={(value) => row.toggleSelected(!!value)}
+            />
+          </div>
+        ),
+      });
+    }
+    newColumns.push(...columns);
+    if (hasActions(rowActions!)) {
+      newColumns.push({
+        id: "actions",
+        enableHiding: false,
+        size: 50,
+        enableResizing: false,
+        // biome-ignore lint/suspicious/noExplicitAny: <cell>
+        cell: ({ row }: { row: any }) => {
+          let items = rowActions;
+          if (isFunction(rowActions)) {
+            items = rowActions(row.original);
+          }
+          return (
+            <div className="flex w-full justify-end" onClick={(e) => e.stopPropagation()}>
+              <Dropdown
+                align="end"
+                asChild={true}
+                items={items as DropdownMenuItemProps[]}
+                onItemClick={(item) => onRowActionClick?.(item, row)}
+              >
+                <Action className="!p-0 h-6 w-6">
+                  <DotsHorizontalIcon />
+                </Action>
+              </Dropdown>
+            </div>
+          );
+        },
+      });
+    }
+    return newColumns;
+  }, [columns, checkbox, rowActions, onRowActionClick]);
+
+  const table = useReactTable({
+    data,
+    columns: tableColumns,
+    getCoreRowModel: getCoreRowModel(),
+    onSortingChange: setSorting,
+    getSortedRowModel: getSortedRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    state: {
+      sorting,
+      columnVisibility,
+      rowSelection,
+    },
+  });
+
+  const leftStickyColumns = useMemo<StickyColumnProps[]>(() => {
+    const columns: StickyColumnProps[] = [];
+    if (checkbox) {
+      columns.push({
+        key: "select",
+        position: "left",
+        size: 40,
+      });
+    }
+    columns.push(...stickyColumns.filter(({ position }) => position === "left"));
+    return columns;
+  }, [stickyColumns, checkbox]);
+
+  const rightStickyColumns = useMemo<StickyColumnProps[]>(() => {
+    const columns: StickyColumnProps[] = [];
+    columns.push(...stickyColumns.filter(({ position }) => position === "right"));
+    if (hasActions(rowActions!)) {
+      columns.push({
+        key: "actions",
+        position: "right",
+        size: 40,
+      });
+    }
+    return columns;
+  }, [stickyColumns, rowActions]);
+
+  const columnSettings = useMemo<DropdownMenuItemProps[]>(() => {
+    return table
+      .getAllColumns()
+      .filter((column) => column.getCanHide())
+      .map((column) => {
+        // biome-ignore lint/suspicious/noExplicitAny: <column>
+        const item = columns.find((col: any) => {
+          const key = col.id || col.accessorKey;
+          return key.replace(/\./g, "_") === column.id;
+        });
+        let label = column.id;
+        if (item) {
+          if (isFunction(item.header)) {
+            label = item.header({ table, column, header: table.getFlatHeaders().find((col) => col.id === column.id)! });
+          } else if (isString(item.header)) {
+            label = item.header;
+          }
+        }
+        const checked = columnVisibility[column.id];
+        return {
+          id: column.id,
+          label,
+          type: "checkbox",
+          checked: isUndefined(checked) ? column.getIsVisible() : checked,
+          onCheckedChange: (_item, value) => column.toggleVisibility(value),
+        };
+      });
+  }, [table, columns, columnVisibility]);
+
+  const showVisibilityControl = useMemo(
+    () => showColumnVisibility && columnSettings.length,
+    [showColumnVisibility, columnSettings],
+  );
+
+  const showToolbar = useMemo(() => filter || showVisibilityControl, [filter, showVisibilityControl]);
+
+  const showPagination = useMemo(() => {
+    if (autoHidePagination) {
+      return pagination && (pagination as PaginationProps).total > (pagination as PaginationProps).size;
+    }
+    return pagination;
+  }, [pagination, autoHidePagination]);
+
+  return (
+    <>
+      {showToolbar ? (
+        <div
+          className={cn(
+            "border-0 border-secondary border-b border-solid pb-2",
+            "flex items-end",
+            filter ? "justify-between" : "justify-end",
+          )}
+        >
+          {filter ? <Filters {...filter} load={load} loading={loading} /> : null}
+          {showVisibilityControl ? (
+            <Dropdown align="end" asChild={true} items={columnSettings}>
+              <Action className="!p-0 h-9 w-9">
+                <LayoutIcon className="h-[18px] w-[18px]" />
+              </Action>
+            </Dropdown>
+          ) : null}
+        </div>
+      ) : null}
+      <div className={cn("relative")}>
+        <Table className={classNames("data-table", inCard ? "in-card" : null, !mounted && "invisible")}>
+          <TableHeader className={cn(!showHeader && "hidden")}>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  // 在未挂载时禁用粘性列功能，避免 SSR 水合错误
+                  const sticky = mounted
+                    ? getSticky(header.column.id, leftStickyColumns, rightStickyColumns)
+                    : { enable: false };
+                  const content = header.isPlaceholder
+                    ? null
+                    : flexRender(header.column.columnDef.header, header.getContext());
+                  return (
+                    <TableHead
+                      className={cn(
+                        sticky.enable ? "table-sticky-col sticky" : null,
+                        sticky.last ? "table-sticky-col-last" : null,
+                        sticky.first ? "table-sticky-col-first" : null,
+                        // biome-ignore lint/suspicious/noExplicitAny: <className>
+                        (header.column.columnDef as any).className,
+                      )}
+                      key={header.id}
+                      style={
+                        sticky.enable
+                          ? {
+                              zIndex: 10,
+                              minWidth: sticky.width,
+                              [sticky.position as string]: sticky.offset,
+                            }
+                          : undefined
+                      }
+                    >
+                      {sticky.enable ? <div className="inner flex h-10 items-center px-2">{content}</div> : content}
+                    </TableHead>
+                  );
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow
+                  data-state={row.getIsSelected() && "selected"}
+                  key={row.id}
+                  onClick={() => props.onRowClick?.(row)}
+                >
+                  {row.getVisibleCells().map((cell) => {
+                    // 在未挂载时禁用粘性列功能，避免 SSR 水合错误
+                    const sticky = mounted
+                      ? getSticky(cell.column.id, leftStickyColumns, rightStickyColumns)
+                      : { enable: false };
+                    const ctx = cell.getContext();
+                    const render = ctx.renderValue;
+                    // biome-ignore lint/suspicious/noExplicitAny: <formatters>
+                    const formatters = (cell.column.columnDef as any).formatters || [];
+                    ctx.renderValue = () => {
+                      return formatValue(render(), formatters, cellHandles);
+                    };
+                    const content = flexRender(cell.column.columnDef.cell, ctx);
+                    return (
+                      <TableCell
+                        className={cn(
+                          sticky.enable ? "table-sticky-col sticky" : null,
+                          sticky.last ? "table-sticky-col-last" : null,
+                          sticky.first ? "table-sticky-col-first" : null,
+                        )}
+                        key={cell.id}
+                        style={
+                          sticky.enable
+                            ? {
+                                zIndex: 10,
+                                minWidth: sticky.width,
+                                [sticky.position as string]: sticky.offset,
+                              }
+                            : undefined
+                        }
+                      >
+                        {sticky.enable ? <div className="inner flex h-10 items-center px-2">{content}</div> : content}
+                      </TableCell>
+                    );
+                  })}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell className="h-24 text-center" colSpan={tableColumns.length}>
+                  {empty}
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+        <div className={cn("py-4", !mounted && "invisible")}>
+          {showPagination && (
+            <Pagination
+              {...(pagination as PaginationProps)}
+              onChange={(page: number) => {
+                load?.({ page });
+              }}
+              onSizeChange={(size: number) => {
+                load?.({ size, page: 1 });
+              }}
+            />
+          )}
+        </div>
+        {loading || !mounted ? (
+          <div className="dark:!bg-black/5 absolute top-0 right-0 bottom-0 left-0 z-50 flex items-center justify-center bg-white/50">
+            <Spin />
+          </div>
+        ) : null}
+      </div>
+    </>
+  );
+}

package/src/components/uix/data-table/style.css

@@ -0,0 +1,40 @@
+@import "../../../assets/style/theme.css";
+
+.data-table {
+  --sticky-row-hover-color: rgba(250, 250, 250, 1);
+}
+
+.dark .data-table {
+  --sticky-row-hover-color: #1c1c1c;
+}
+.dark .data-table.in-card {
+  --sticky-row-hover-color: #181818;
+}
+
+.data-table tr {
+  @apply transition-none;
+}
+
+.data-table tr th.table-sticky-col,
+.data-table tr td.table-sticky-col {
+  @apply p-0;
+}
+
+.data-table tr th.table-sticky-col .inner,
+.data-table tr td.table-sticky-col .inner {
+  @apply bg-background;
+}
+
+.data-table.in-card tr th.table-sticky-col .inner,
+.data-table.in-card tr td.table-sticky-col .inner {
+  @apply bg-card;
+}
+
+.data-table tr:hover th.table-sticky-col .inner,
+.data-table tr:hover td.table-sticky-col .inner {
+  @apply bg-[var(--sticky-row-hover-color)];
+}
+
+.data-table tr[data-state="selected"] td.table-sticky-col .inner {
+  @apply bg-[hsl(var(--muted))];
+}

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

@@ -0,0 +1,88 @@
+import { forwardRef, useContext, useState } from "react";
+import { Cross2Icon } from "@radix-ui/react-icons";
+import { addDays, format } from "date-fns";
+import get from "lodash/get";
+import { Calendar as CalendarIcon } from "lucide-react";
+
+import { Button, Calendar, cn, Popover, PopoverContent, PopoverTrigger, Select } from "@meta-1/design";
+import { UIXContext } from "@meta-1/design/components/uix/config-provider";
+
+export type DatePickerProps = {
+  placeholder?: string;
+  format?: string;
+  preset?: boolean;
+  className?: string;
+  allowClear?: boolean;
+};
+
+export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>((props, _ref) => {
+  const { preset = false, allowClear = false } = props;
+  const [date, setDate] = useState<Date>();
+  const [presetValue, setPresetValue] = useState<string>("");
+
+  const config = useContext(UIXContext);
+  const locale = get(config.locale, "DatePicker.locale");
+  const formatConfig = props.format || get(config.locale, "DatePicker.format") || "yyyy-MM-dd";
+  const options = get(config.locale, "DatePicker.options");
+
+  const calendar = (
+    <Calendar
+      locale={locale}
+      mode="single"
+      onSelect={(v) => {
+        setDate(v);
+        setPresetValue("");
+      }}
+      selected={date}
+    />
+  );
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          className={cn(
+            "group w-full justify-start space-x-1 text-left font-normal",
+            !date && "text-muted-foreground",
+            props.className,
+          )}
+          variant="outline"
+        >
+          <CalendarIcon className="mr-2 h-4 w-4" />
+          <span className="flex-1">{date ? format(date, formatConfig) : props.placeholder}</span>
+          {allowClear && date ? (
+            <Cross2Icon
+              className="hidden group-hover:block"
+              onClick={(e) => {
+                setDate(undefined);
+                setPresetValue("");
+                e.stopPropagation();
+              }}
+            />
+          ) : null}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent align="start" className={cn("flex w-fit", preset ? "flex-col space-y-2 p-2" : "p-0")}>
+        {preset ? (
+          <>
+            <Select
+              className="w-full"
+              onChange={(value) => {
+                setDate(addDays(new Date(), Number.parseInt(value, 10)));
+                setPresetValue(value);
+              }}
+              options={options || []}
+              placeholder="请选择"
+              value={presetValue}
+            />
+            <div className="rounded-md border">{calendar}</div>
+          </>
+        ) : (
+          calendar
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+});
+
+DatePicker.displayName = "DatePicker";

package/src/components/uix/date-range-picker/index.tsx

@@ -0,0 +1,71 @@
+import { forwardRef, type HTMLAttributes, useContext, useState } from "react";
+import { format } from "date-fns";
+import get from "lodash/get";
+import { Calendar as CalendarIcon } from "lucide-react";
+import type { DateRange } from "react-day-picker";
+
+import { Button, Calendar, Popover, PopoverContent, PopoverTrigger } from "@meta-1/design";
+import { UIXContext } from "@meta-1/design/components/uix/config-provider";
+import { cn } from "@meta-1/design/lib";
+
+export type DateRangePickerProps = {
+  value?: DateRange;
+  onChange?: (value: DateRange) => void;
+  placeholder?: string;
+  format?: string;
+} & HTMLAttributes<HTMLDivElement>;
+
+export const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>((props, forwardedRef) => {
+  const { className, value, onChange } = props;
+  const elementRef = forwardedRef;
+
+  const config = useContext(UIXContext);
+  const locale = get(config.locale, "DateRangePicker.locale");
+  const formatConfig = props.format || get(config.locale, "DateRangePicker.format") || "yyyy-MM-dd";
+
+  const [date, setDate] = useState<DateRange | undefined>(value);
+
+  return (
+    <div className={cn("grid gap-2", className)} ref={elementRef}>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button
+            className={cn("justify-start text-left font-normal", !date && "text-muted-foreground")}
+            id="date"
+            type="button"
+            variant="outline"
+          >
+            <CalendarIcon className="mr-2 h-4 w-4" />
+            {date?.from ? (
+              date.to ? (
+                <>
+                  {format(date.from, formatConfig)} - {format(date.to, formatConfig)}
+                </>
+              ) : (
+                format(date.from, formatConfig)
+              )
+            ) : (
+              <span>{props.placeholder}</span>
+            )}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent align="start" className="w-auto p-0">
+          <Calendar
+            defaultMonth={date?.from}
+            initialFocus
+            locale={locale}
+            mode="range"
+            numberOfMonths={2}
+            onSelect={(v) => {
+              setDate(v);
+              onChange?.(v!);
+            }}
+            selected={date}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+});
+
+DateRangePicker.displayName = "DateRangePicker";