@suphark/ui 0.1.0 → 0.2.0

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

@@ -0,0 +1,166 @@
+"use client";
+
+import { DeleteButton } from "@suphark/ui/components/shared/button/delete-button";
+import {
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@suphark/ui/components/ui/alert-dialog";
+import { Button } from "@suphark/ui/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@suphark/ui/components/ui/dropdown-menu";
+import type { Row } from "@tanstack/react-table";
+import { Ellipsis, Pen, Trash } from "lucide-react";
+import { useState, useTransition } from "react";
+import { toast } from "sonner";
+
+interface ActionState<T> {
+  error?: string;
+  data?: T;
+  success?: string;
+}
+
+interface DataTableRowActionsProps<TData> {
+  row: Row<TData>;
+  /**
+   * Optional custom menu items to display before the standard Edit/Delete actions.
+   */
+  children?: React.ReactNode;
+  /**
+   * Optional component to render for the edit dialog.
+   * If not provided, the "Edit" action will not be shown.
+   */
+  EditDialog?: React.ComponentType<{
+    initialData?: TData;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children?: React.ReactNode;
+  }>;
+  /**
+   * Optional server action to call for deletion.
+   * If not provided, the "Delete" action will not be shown.
+   */
+  deleteAction?: (id: string) => Promise<ActionState<unknown>>;
+  /**
+   * The name of the resource to display in toast messages (e.g. "User Status").
+   */
+  resourceName: string;
+  /**
+   * The key to access the name/title of the item for display. Defaults to "name".
+   */
+  nameKey?: keyof TData;
+  /**
+   * The key to access the unique ID of the item. Defaults to "id".
+   */
+  idKey?: keyof TData;
+}
+
+export function DataTableRowActions<TData>({
+  row,
+  children,
+  EditDialog,
+  deleteAction,
+  resourceName,
+  nameKey = "name" as keyof TData,
+  idKey = "id" as keyof TData,
+}: DataTableRowActionsProps<TData>) {
+  const item = row.original;
+  const itemRecord = item as Record<string, unknown>;
+  const itemName = String(
+    itemRecord[nameKey as string] ?? itemRecord.nameThai ?? itemRecord.name ?? "",
+  );
+  const [isPending, startTransition] = useTransition();
+  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+
+  const handleDelete = () => {
+    if (!deleteAction) return;
+
+    startTransition(() => {
+      const promise = deleteAction(String(itemRecord[idKey as string])).then((result) => {
+        if (result.error) throw new Error(result.error);
+        setIsDeleteDialogOpen(false);
+        return result;
+      });
+
+      toast.promise(promise, {
+        loading: `Deleting ${resourceName.toLowerCase()} "${itemName}"...`,
+        success: `${resourceName} "${itemName}" deleted successfully.`,
+        error: (err: Error) => err.message,
+      });
+    });
+  };
+
+  return (
+    <div className="flex justify-end">
+      <DropdownMenu>
+        <DropdownMenuTrigger
+          render={
+            <Button variant="ghost" className="flex h-8 w-8 p-0 data-[state=open]:bg-muted" />
+          }
+        >
+          <Ellipsis className="h-4 w-4" />
+          <span className="sr-only">Open menu</span>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-[160px]">
+          {children}
+          {children && (EditDialog || deleteAction) && <DropdownMenuSeparator />}
+
+          <DropdownMenuGroup>
+            {EditDialog && (
+              <DropdownMenuItem onClick={() => setIsEditDialogOpen(true)}>
+                <Pen className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
+                Edit
+              </DropdownMenuItem>
+            )}
+
+            {EditDialog && deleteAction && <DropdownMenuSeparator />}
+
+            {deleteAction && (
+              <DropdownMenuItem
+                className="text-destructive focus:text-destructive"
+                onClick={() => setIsDeleteDialogOpen(true)}
+              >
+                <Trash className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
+                Delete
+              </DropdownMenuItem>
+            )}
+          </DropdownMenuGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      {EditDialog && (
+        <EditDialog initialData={item} open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen} />
+      )}
+
+      {deleteAction && (
+        <AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+              <AlertDialogDescription>
+                This action cannot be undone. This will permanently delete the{" "}
+                {resourceName.toLowerCase()} &ldquo;{itemName}&rdquo; and remove it from our
+                servers.
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel>Cancel</AlertDialogCancel>
+              <DeleteButton onClick={handleDelete} isLoading={isPending} />
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,207 @@
+"use client";
+
+import { Badge } from "@suphark/ui/components/ui/badge";
+import { Button } from "@suphark/ui/components/ui/button";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@suphark/ui/components/ui/input-group";
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@suphark/ui/components/ui/sheet";
+import type { Table } from "@tanstack/react-table";
+import { Search, SlidersHorizontal, X } from "lucide-react";
+import type React from "react";
+import type { FacetedFilterConfig } from ".";
+import { DataTableFacetedFilter } from "./data-table-faceted-filter";
+import { DataTableViewOptions } from "./data-table-view-option";
+
+interface DataTableToolbarProps<TData> {
+  table: Table<TData>;
+  facetedFilters?: FacetedFilterConfig[];
+  actionsComponent?: React.ReactNode;
+  globalFilterPlaceholder?: string;
+  toolbarFilters?: React.ReactNode;
+  preservedFilterIds?: string[];
+}
+
+export function DataTableToolbar<TData>({
+  table,
+  facetedFilters,
+  actionsComponent,
+  globalFilterPlaceholder,
+  toolbarFilters,
+  preservedFilterIds = [],
+}: DataTableToolbarProps<TData>) {
+  const globalFilter = table.getState().globalFilter;
+  const preservedFilterIdSet = new Set(preservedFilterIds);
+  const userColumnFilters = table
+    .getState()
+    .columnFilters.filter((filter) => !preservedFilterIdSet.has(filter.id));
+  const activeFilterCount = userColumnFilters.length + (globalFilter ? 1 : 0);
+
+  const isFiltered = activeFilterCount > 0;
+
+  const resetUserFilters = () => {
+    table.setColumnFilters((filters) =>
+      filters.filter((filter) => preservedFilterIdSet.has(filter.id)),
+    );
+    table.setGlobalFilter("");
+  };
+
+  const renderFilterControls = (fullWidth = false) =>
+    facetedFilters?.map((filter: FacetedFilterConfig) => {
+      const column = table.getColumn(filter.columnId);
+      if (!column) return null;
+
+      return (
+        <DataTableFacetedFilter
+          key={filter.columnId}
+          column={column}
+          title={filter.title}
+          options={filter.options}
+          compact={filter.compact}
+          fullWidth={fullWidth}
+        />
+      );
+    });
+
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <div className="flex min-w-0 flex-1 flex-wrap items-center gap-2">
+        {globalFilterPlaceholder && (
+          <InputGroup className="h-8 w-full sm:w-[240px] lg:w-[320px]">
+            <InputGroupAddon align="inline-start">
+              <Search aria-hidden="true" className="size-4" />
+            </InputGroupAddon>
+            <InputGroupInput
+              aria-label="ค้นหาข้อมูลในตาราง"
+              name="table-search"
+              autoComplete="off"
+              placeholder={globalFilterPlaceholder}
+              value={(globalFilter as string) ?? ""}
+              onChange={(event) => table.setGlobalFilter(String(event.target.value))}
+            />
+            {!!globalFilter && (
+              <InputGroupAddon align="inline-end">
+                <InputGroupButton
+                  variant="ghost"
+                  aria-label="ล้างคำค้นหา"
+                  onClick={() => table.setGlobalFilter("")}
+                >
+                  <X aria-hidden="true" className="size-4" />
+                </InputGroupButton>
+              </InputGroupAddon>
+            )}
+          </InputGroup>
+        )}
+
+        <div className="hidden xl:contents">
+          {renderFilterControls()}
+          {toolbarFilters}
+        </div>
+
+        <Sheet>
+          <SheetTrigger render={<Button variant="outline" size="sm" className="xl:hidden" />}>
+            <SlidersHorizontal />
+            ตัวกรอง
+            {activeFilterCount > 0 && (
+              <Badge variant="secondary" className="ml-1 px-1.5 tabular-nums">
+                {activeFilterCount}
+              </Badge>
+            )}
+          </SheetTrigger>
+          <SheetContent
+            side="right"
+            showCloseButton={false}
+            className="w-[min(24rem,calc(100vw-1rem))] sm:max-w-md"
+          >
+            <SheetHeader className="border-b pr-12">
+              <SheetTitle>ตัวกรองข้อมูล</SheetTitle>
+              <SheetDescription>เลือกได้หลายเงื่อนไข ผลลัพธ์จะอัปเดตทันที</SheetDescription>
+              <SheetClose
+                render={
+                  <Button variant="ghost" size="icon-sm" className="absolute top-3 right-3" />
+                }
+              >
+                <X />
+                <span className="sr-only">ปิดตัวกรอง</span>
+              </SheetClose>
+            </SheetHeader>
+            <div className="flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto px-4">
+              {renderFilterControls(true)}
+              {toolbarFilters}
+            </div>
+            {isFiltered && (
+              <SheetFooter className="border-t">
+                <Button variant="secondary" onClick={resetUserFilters}>
+                  <X />
+                  ล้างตัวกรองทั้งหมด
+                </Button>
+              </SheetFooter>
+            )}
+          </SheetContent>
+        </Sheet>
+
+        {isFiltered && (
+          <Button variant="secondary" size="sm" onClick={resetUserFilters}>
+            ล้างตัวกรอง
+            <X />
+          </Button>
+        )}
+      </div>
+
+      <div className="ml-auto flex flex-wrap items-center justify-end gap-2 self-start">
+        {actionsComponent}
+        <DataTableViewOptions table={table} />
+      </div>
+
+      {isFiltered && (
+        <div className="flex w-full flex-wrap gap-2 pt-1">
+          {userColumnFilters.map((filter) => {
+            const config = facetedFilters?.find((f) => f.columnId === filter.id);
+            if (!config) return null;
+
+            const values = Array.isArray(filter.value) ? filter.value : [filter.value];
+            const labels = values
+              .map((val) => {
+                const option = config.options.find((opt) => String(opt.value) === String(val));
+                return option ? option.label : String(val);
+              })
+              .join(", ");
+            const displayedLabels =
+              config.compact && values.length > 1 ? `${values.length} รายการ` : labels;
+
+            return (
+              <Badge
+                key={filter.id}
+                variant="secondary"
+                className="flex items-center gap-1.5 rounded-md px-2 py-1 font-normal"
+              >
+                <span className="text-muted-foreground">{config.title}:</span>
+                <span className="font-medium">{displayedLabels}</span>
+                <button
+                  type="button"
+                  aria-label={`ล้างตัวกรอง ${config.title}: ${displayedLabels}`}
+                  onClick={() => table.getColumn(filter.id)?.setFilterValue(undefined)}
+                  className="ml-1 rounded-full outline-none hover:bg-muted-foreground/20"
+                >
+                  <X className="size-3" />
+                </button>
+              </Badge>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,59 @@
+"use client";
+
+import { Button } from "@suphark/ui/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@suphark/ui/components/ui/dropdown-menu";
+import type { Table } from "@tanstack/react-table";
+import { Settings2 } from "lucide-react";
+
+interface DataTableViewOptionsProps<TData> {
+  table: Table<TData>;
+}
+
+export function DataTableViewOptions<TData>({ table }: DataTableViewOptionsProps<TData>) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={<Button variant="outline" size="sm" className="ml-auto hidden h-8 lg:flex" />}
+      >
+        <Settings2 className="mr-2 h-4 w-4" />
+        View
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-[150px]">
+        <DropdownMenuGroup>
+          <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        {table
+          .getAllColumns()
+          .filter(
+            (column) =>
+              typeof column.accessorFn !== "undefined" &&
+              column.getCanHide() &&
+              column.columnDef.enableHiding !== false,
+          )
+          .map((column) => {
+            return (
+              <DropdownMenuCheckboxItem
+                key={column.id}
+                className="capitalize"
+                checked={column.getIsVisible()}
+                onCheckedChange={(value) => column.toggleVisibility(!!value)}
+                // Base UI ปิดเมนูหลังคลิกเป็นค่าเริ่มต้น — ติ๊กเลือกคอลัมน์ต้องเปิดค้างไว้
+                closeOnClick={false}
+              >
+                {column.id.replace(/([A-Z])/g, " $1")}
+              </DropdownMenuCheckboxItem>
+            );
+          })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}