@suphark/ui 0.1.1 → 0.2.0

package/src/components/data-table/types.ts

@@ -0,0 +1,106 @@
+import type {
+  ColumnDef,
+  ColumnFiltersState,
+  FilterFn,
+  OnChangeFn,
+  PaginationState,
+  Row,
+  SortingState,
+  Table,
+  TableState,
+  VisibilityState,
+} from "@tanstack/react-table";
+import type React from "react";
+
+export type FacetedFilterConfig = {
+  columnId: string;
+  title: string;
+  compact?: boolean;
+  options: {
+    label: string;
+    value: string | number | boolean;
+    icon?: React.ComponentType<{ className?: string }>;
+  }[];
+};
+
+export interface DataTableProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[];
+  data: TData[];
+
+  // Styling Hooks
+  className?: string; // Appended to table wrap
+  containerClassName?: string; // Appended to outer wrapper
+  /**
+   * Appended to the scrollable box that wraps the table itself.
+   *
+   * Needed for `stickyHeader`: the box already scrolls horizontally, and CSS
+   * forces the vertical axis to `auto` alongside it, so it — not the page — is
+   * what a sticky header anchors to. Give it a height (e.g. `max-h-[70vh]`) or
+   * the header has nothing to stick within and scrolls away with the page.
+   */
+  tableContainerClassName?: string;
+  /** ตรึงแถบเปลี่ยนหน้าไว้ล่างสุดของจอเสมอ ใช้คู่กับ `stickyHeader` */
+  stickyPagination?: boolean;
+
+  // Accessibility & UI
+  stickyHeader?: boolean;
+  stickyEdgeColumns?: boolean;
+  emptyStateComponent?: React.ReactNode;
+
+  // Filters & Toolbar
+  facetedFilters?: FacetedFilterConfig[];
+  actionsComponent?: (table: Table<TData>) => React.ReactNode;
+  globalFilterKeys?: string[];
+  globalFilterFn?: FilterFn<TData>;
+  globalFilterPlaceholder?: string;
+  toolbarFilters?: (table: Table<TData>) => React.ReactNode;
+  preservedFilterIds?: string[];
+
+  // State & Visibility
+  initialVisibility?: VisibilityState;
+  initialColumnFilters?: ColumnFiltersState;
+  columnFilters?: ColumnFiltersState;
+  initialState?: Partial<TableState>;
+
+  // Pagination & Sorting (Server-side support)
+  pageCount?: number;
+  rowCount?: number;
+  /**
+   * ควบคุม pagination จากภายนอก (ใช้คู่กับ manualPagination)
+   * จำเป็นเมื่อ state จริงอยู่ที่อื่น เช่นใน URL — ไม่งั้นเลขหน้าใน UI จะไม่ตรงกับข้อมูลที่ server ส่งมา
+   */
+  pagination?: PaginationState;
+  /** ควบคุม sorting จากภายนอก (ใช้คู่กับ manualSorting) */
+  sorting?: SortingState;
+  /** ควบคุมคำค้นจากภายนอก (ใช้คู่กับ manualFiltering) */
+  globalFilter?: string;
+  /**
+   * เรียกเมื่อผู้ใช้พิมพ์ในช่องค้นหา
+   * ต้องส่งมาด้วยเมื่อเปิด manualFiltering ไม่งั้นช่องค้นหาจะไม่ทำอะไรเลย
+   * เพราะ TanStack ถูกสั่งไม่ให้กรองเองแล้ว
+   */
+  onGlobalFilterChange?: (value: string) => void;
+  manualPagination?: boolean;
+  manualSorting?: boolean;
+  manualFiltering?: boolean;
+  onPaginationChange?: OnChangeFn<PaginationState>;
+  onPageSizeChange?: (pageSize: number) => void;
+  onSortingChange?: OnChangeFn<SortingState>;
+  onColumnFiltersChange?: OnChangeFn<ColumnFiltersState>;
+
+  // Customization
+  getRowClassName?: (row: Row<TData>) => string;
+  getSubRows?: (originalRow: TData) => TData[] | undefined;
+  getRowId?: (originalRow: TData) => string;
+  initialPageSize?: number;
+  meta?: Record<string, unknown>;
+  isLoading?: boolean;
+
+  // Advanced
+  enableColumnResizing?: boolean;
+  enableRowSelection?: boolean | ((row: Row<TData>) => boolean);
+  getFacetedUniqueValues?: (table: Table<TData>, columnId: string) => () => Map<unknown, number>;
+  pageSizeOptions?: number[];
+  onReorder?: (newData: TData[]) => void;
+  renderCustomView?: (table: Table<TData>) => React.ReactNode;
+}

package/src/components/data-table/use-data-table.ts

@@ -0,0 +1,229 @@
+"use client";
+
+import {
+  type ColumnFiltersState,
+  type FilterFn,
+  getCoreRowModel,
+  getExpandedRowModel,
+  getFacetedRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  type PaginationState,
+  type SortingState,
+  useReactTable,
+  type VisibilityState,
+} from "@tanstack/react-table";
+import * as React from "react";
+
+import type { DataTableProps } from "./types";
+
+function getNestedValue<TData>(obj: TData, path: string): unknown {
+  let current: unknown = obj;
+  for (const key of path.split(".")) {
+    if (current && typeof current === "object" && key in current) {
+      current = (current as Record<string, unknown>)[key];
+    } else {
+      return undefined;
+    }
+  }
+  return current;
+}
+
+export function useDataTable<TData, TValue>({
+  columns,
+  data,
+  initialVisibility = {},
+  globalFilterFn,
+  globalFilterKeys,
+  getFacetedUniqueValues: getFacetedUniqueValuesProp,
+  initialColumnFilters = [],
+  columnFilters: columnFiltersProp,
+  getSubRows,
+  getRowId,
+  initialPageSize = 25,
+  meta,
+  initialState,
+  pageCount,
+  rowCount,
+  pagination: paginationProp,
+  sorting: sortingProp,
+  globalFilter: globalFilterProp,
+  onGlobalFilterChange,
+  manualPagination,
+  manualSorting,
+  manualFiltering,
+  onPaginationChange,
+  onSortingChange,
+  onColumnFiltersChange,
+  enableColumnResizing = false,
+  enableRowSelection = true,
+}: DataTableProps<TData, TValue>) {
+  const [rowSelection, setRowSelection] = React.useState({});
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>(initialVisibility);
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    columnFiltersProp ?? initialColumnFilters,
+  );
+
+  // Sync with prop if provided
+  React.useEffect(() => {
+    if (columnFiltersProp !== undefined) {
+      setColumnFilters(columnFiltersProp);
+    }
+  }, [columnFiltersProp]);
+  const [sorting, setSorting] = React.useState<SortingState>(
+    () => sortingProp ?? (initialState?.sorting as SortingState | undefined) ?? [],
+  );
+
+  // Sync with prop if provided — เทียบด้วยค่าเหมือน pagination ด้วยเหตุผลเดียวกัน
+  const sortingKey = sortingProp ? JSON.stringify(sortingProp) : undefined;
+  React.useEffect(() => {
+    if (sortingKey === undefined) return;
+    setSorting((current) =>
+      JSON.stringify(current) === sortingKey ? current : JSON.parse(sortingKey),
+    );
+  }, [sortingKey]);
+  const [globalFilter, setGlobalFilter] = React.useState(
+    globalFilterProp ?? (initialState?.globalFilter as string) ?? "",
+  );
+
+  // Sync with prop if provided
+  React.useEffect(() => {
+    if (globalFilterProp !== undefined) {
+      setGlobalFilter(globalFilterProp);
+    }
+  }, [globalFilterProp]);
+  const [pagination, setPagination] = React.useState<PaginationState>(
+    paginationProp ?? { pageIndex: 0, pageSize: initialPageSize },
+  );
+
+  // Sync with prop if provided — กันเลขหน้าใน UI หลุดจาก state จริงที่อยู่ใน URL
+  //
+  // ต้องเทียบด้วยค่า ไม่ใช่ตัวอ้างอิง เพราะผู้เรียกมักส่ง object literal ใหม่ทุก render
+  // ถ้าผูก effect ไว้กับตัว object มันจะรันทุกครั้งแล้วรีเซ็ต state ทับ
+  // การกดเปลี่ยนหน้าที่เพิ่งเกิดขึ้นทิ้งไปก่อนที่ค่าใหม่จะกลับมาจาก server
+  const pageIndexProp = paginationProp?.pageIndex;
+  const pageSizeProp = paginationProp?.pageSize;
+  React.useEffect(() => {
+    if (pageIndexProp === undefined || pageSizeProp === undefined) return;
+    setPagination((current) =>
+      current.pageIndex === pageIndexProp && current.pageSize === pageSizeProp
+        ? current
+        : { pageIndex: pageIndexProp, pageSize: pageSizeProp },
+    );
+  }, [pageIndexProp, pageSizeProp]);
+
+  // Sync initialPageSize when it loads asynchronously (e.g. from user preferences)
+  React.useEffect(() => {
+    setPagination((prev) => {
+      // Only update if the size actually changed
+      if (prev.pageSize !== initialPageSize) {
+        return { ...prev, pageSize: initialPageSize };
+      }
+      return prev;
+    });
+  }, [initialPageSize]);
+
+  const finalGlobalFilterFn = React.useMemo(() => {
+    if (globalFilterFn) {
+      return globalFilterFn;
+    }
+
+    if (globalFilterKeys && globalFilterKeys.length > 0) {
+      const generatedFn: FilterFn<TData> = (row, _columnId, filterValue) => {
+        const search = String(filterValue).toLowerCase();
+        for (const key of globalFilterKeys) {
+          const value = getNestedValue(row.original, key as string);
+
+          if (value !== null && value !== undefined) {
+            const valueAsString = String(value).toLowerCase();
+            if (valueAsString.includes(search)) {
+              return true;
+            }
+          }
+        }
+        return false;
+      };
+      return generatedFn;
+    }
+
+    return undefined;
+  }, [globalFilterFn, globalFilterKeys]);
+
+  const memoizedData = React.useMemo(() => data, [data]);
+  const memoizedColumns = React.useMemo(() => columns, [columns]);
+
+  const table = useReactTable({
+    data: memoizedData,
+    columns: memoizedColumns,
+    pageCount: pageCount ?? (manualPagination ? -1 : undefined),
+    rowCount,
+    manualPagination,
+    manualSorting,
+    manualFiltering,
+    state: {
+      sorting,
+      columnVisibility,
+      rowSelection,
+      columnFilters,
+      globalFilter,
+      pagination,
+    },
+    enableColumnResizing,
+    columnResizeMode: "onChange",
+    defaultColumn: {
+      minSize: 50,
+      maxSize: 800,
+    },
+    initialState: {
+      pagination: {
+        pageSize: initialPageSize,
+      },
+      columnFilters: initialColumnFilters,
+      ...initialState,
+    },
+    meta,
+    getSubRows: getSubRows,
+    getRowId: getRowId,
+    getExpandedRowModel: getExpandedRowModel(),
+    filterFromLeafRows: true,
+    enableRowSelection,
+    onRowSelectionChange: setRowSelection,
+    onSortingChange: (updater) => {
+      setSorting(updater);
+      if (onSortingChange) onSortingChange(updater);
+    },
+    onColumnFiltersChange: (updater) => {
+      setColumnFilters(updater);
+      if (onColumnFiltersChange) onColumnFiltersChange(updater);
+    },
+    onColumnVisibilityChange: setColumnVisibility,
+    onGlobalFilterChange: (updater) => {
+      setGlobalFilter(updater);
+      if (onGlobalFilterChange) {
+        const next = typeof updater === "function" ? updater(globalFilter) : updater;
+        onGlobalFilterChange((next as string) ?? "");
+      }
+    },
+    onPaginationChange: (updater) => {
+      setPagination(updater);
+      if (onPaginationChange) onPaginationChange(updater);
+    },
+    // Correction: To use `onPaginationChange`, we usually need to control state.
+    // Let's create local pagination state to be robust.
+    globalFilterFn: finalGlobalFilterFn,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFacetedRowModel: getFacetedRowModel(),
+    getFacetedUniqueValues: getFacetedUniqueValuesProp,
+  });
+
+  // NOTE: If manualPagination is true, getPaginationRowModel might not be needed?
+  // TanStack docs say: if manualPagination is true, you don't need getPaginationRowModel IF you only provide the current page data.
+  // But usage of getPaginationRowModel is safe even with manualPagination as it just slices.
+
+  return { table, initialColumnFilters };
+}

package/src/components/design-system/sections/showcase-data-display.tsx

@@ -57,6 +57,8 @@ import {
   TableHeader,
   TableRow,
 } from "@suphark/ui/components/ui/table";
+import { DataTable, DataTableColumnHeader } from "@suphark/ui/data-table";
+import type { ColumnDef } from "@tanstack/react-table";
 import {
   AlertTriangle,
   Download,
@@ -125,6 +127,43 @@ export function ShowcaseDataDisplay() {
     },
   ];
 
+  type PackageRow = (typeof tableRows)[number];
+  const packageColumns: ColumnDef<PackageRow>[] = [
+    {
+      accessorKey: "code",
+      header: ({ column }) => <DataTableColumnHeader column={column} title="รหัส" />,
+      cell: ({ row }) => <span className="font-mono text-xs">{row.original.code}</span>,
+    },
+    {
+      accessorKey: "name",
+      header: ({ column }) => <DataTableColumnHeader column={column} title="รายการ" />,
+      cell: ({ row }) => (
+        <PrimarySecondaryText primary={row.original.name} secondary={row.original.category} />
+      ),
+    },
+    {
+      accessorKey: "vendor",
+      header: ({ column }) => <DataTableColumnHeader column={column} title="คู่ค้า" />,
+    },
+    {
+      accessorKey: "status",
+      header: ({ column }) => <DataTableColumnHeader column={column} title="สถานะ" />,
+      cell: ({ row }) => <Badge variant="outline">{row.original.status}</Badge>,
+      filterFn: (row, id, value: string[]) => value.includes(row.getValue(id)),
+    },
+    {
+      accessorKey: "totalAmount",
+      header: ({ column }) => (
+        <DataTableColumnHeader column={column} title="มูลค่ารวม (THB)" className="justify-end" />
+      ),
+      cell: ({ row }) => (
+        <div className="text-right">
+          <FormattedNumber value={row.original.totalAmount} />
+        </div>
+      ),
+    },
+  ];
+
   return (
     <div className="flex flex-col gap-8">
       {/* Section Header */}
@@ -310,6 +349,38 @@ export function ShowcaseDataDisplay() {
         </CardContent>
       </Card>
 
+      {/* DataTable (@suphark/ui/data-table) */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">DataTable (tanstack) — @suphark/ui/data-table</CardTitle>
+          <CardDescription className="text-xs">
+            ตารางมาตรฐานพร้อม global search, faceted filter, เรียงคอลัมน์, ซ่อน/แสดงคอลัมน์ และ pagination
+            — import แยกจาก <code>@suphark/ui/data-table</code> (ต้องมี peer{" "}
+            <code>@tanstack/react-table</code>)
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <DataTable
+            columns={packageColumns}
+            data={tableRows}
+            globalFilterKeys={["code", "name", "vendor"]}
+            globalFilterPlaceholder="ค้นหารหัส / รายการ / คู่ค้า…"
+            facetedFilters={[
+              {
+                columnId: "status",
+                title: "สถานะ",
+                options: [
+                  { label: "Approved", value: "Approved" },
+                  { label: "Under Review", value: "Under Review" },
+                  { label: "Draft", value: "Draft" },
+                ],
+              },
+            ]}
+            initialPageSize={5}
+          />
+        </CardContent>
+      </Card>
+
       {/* Item & Attachment Primitives */}
       <div className="grid gap-6 lg:grid-cols-2">
         {/* Item Primitive */}

package/src/components/design-system/sections/showcase-guidelines-recipes.tsx

@@ -91,9 +91,9 @@ export function ShowcaseGuidelinesRecipes() {
   ];
 
   const recipe1 = `// 1. PageShell + Toolbar + DataTable Pattern
-import { PageShell } from "@suphark/ui/components/shared/layout/page-shell";
-import { AddNewButton } from "@suphark/ui/components/shared/button";
-import { DataTable } from "@suphark/ui/components/shared/data-table/data-table";
+import { PageShell } from "@suphark/ui/next";
+import { AddNewButton } from "@suphark/ui";
+import { DataTable } from "@suphark/ui/data-table";
 
 export default function PackageListPage() {
   return (
@@ -117,8 +117,8 @@ export default function PackageListPage() {
 }`;
 
   const recipe2 = `// 2. FieldGroup + InputGroup + Server Action Validation
-import { FieldGroup, Field, FieldLabel, FieldDescription, FieldError } from "@suphark/ui/components/ui/field";
-import { InputGroup, InputGroupAddon, InputGroupInput } from "@suphark/ui/components/ui/input-group";
+import { FieldGroup, Field, FieldLabel, FieldDescription, FieldError } from "@suphark/ui";
+import { InputGroup, InputGroupAddon, InputGroupInput } from "@suphark/ui";
 import { DollarSign } from "lucide-react";
 
 export function BudgetField({ state }: { state?: ActionResponse }) {
@@ -161,7 +161,7 @@ import {
   AlertDialogTitle,
   AlertDialogTrigger,
 } from "@suphark/ui/components/ui/alert-dialog";
-import { Button } from "@suphark/ui/components/ui/button";
+import { Button } from "@suphark/ui";
 
 export function DeletePackageDialog({ packageId }: { packageId: string }) {
   return (
@@ -191,8 +191,8 @@ export function DeletePackageDialog({ packageId }: { packageId: string }) {
 "use client";
 
 import { useTransition } from "react";
-import { Button } from "@suphark/ui/components/ui/button";
-import { Spinner } from "@suphark/ui/components/ui/spinner";
+import { Button } from "@suphark/ui";
+import { Spinner } from "@suphark/ui";
 import { toast } from "sonner";
 import { approvePackageAction } from "../actions/approve-package";
 

package/src/components/shared/button/delete-many-button.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import { DeleteButton } from "@suphark/ui/components/shared/button/delete-button";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@suphark/ui/components/ui/alert-dialog";
+import { buttonVariants } from "@suphark/ui/components/ui/button";
+import type { Table } from "@tanstack/react-table";
+import { Loader2 } from "lucide-react";
+import { useTransition } from "react";
+import { toast } from "sonner";
+
+interface DeleteManyButtonProps<TData> {
+  table: Table<TData>;
+  deleteAction: (data: { ids: string[] }) => Promise<unknown>;
+  onSuccess?: () => void;
+  itemDescription?: string;
+  responsive?: boolean;
+}
+
+export function DeleteManyButton<TData>({
+  table,
+  deleteAction,
+  onSuccess,
+  itemDescription = "items",
+  responsive = false,
+}: DeleteManyButtonProps<TData>) {
+  const [isPending, startTransition] = useTransition();
+  const selectedRows = table.getFilteredSelectedRowModel().rows;
+
+  if (selectedRows.length === 0) {
+    return null;
+  }
+
+  function handleDelete() {
+    startTransition(async () => {
+      const ids = selectedRows.map((row) => (row.original as { id: string }).id);
+      try {
+        const result = (await deleteAction({ ids })) as any;
+        if (result?.error) {
+          throw new Error(result.error);
+        }
+        toast.success(`${ids.length} ${itemDescription} deleted successfully.`);
+        onSuccess?.();
+      } catch (err: any) {
+        toast.error(err.message);
+      }
+    });
+  }
+
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger render={<DeleteButton isLoading={isPending} responsive={responsive} />}>
+        Delete ({selectedRows.length})
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This will permanently delete the selected {itemDescription}.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction
+            onClick={handleDelete}
+            disabled={isPending}
+            className={buttonVariants({ variant: "destructive" })}
+          >
+            {isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+            Delete
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}