@suphark/ui 0.1.1 → 0.3.0

package/src/components/shared/resource-property-filter.tsx

@@ -0,0 +1,399 @@
+"use client";
+
+import { Badge } from "@suphark/ui/components/ui/badge";
+import { Button } from "@suphark/ui/components/ui/button";
+import { Checkbox } from "@suphark/ui/components/ui/checkbox";
+import { Empty, EmptyHeader, EmptyTitle } from "@suphark/ui/components/ui/empty";
+import { Field, FieldGroup, FieldLabel } from "@suphark/ui/components/ui/field";
+import { Input } from "@suphark/ui/components/ui/input";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@suphark/ui/components/ui/input-group";
+import {
+  Popover,
+  PopoverContent,
+  PopoverDescription,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger,
+} from "@suphark/ui/components/ui/popover";
+import { ScrollArea } from "@suphark/ui/components/ui/scroll-area";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@suphark/ui/components/ui/select";
+import { cn } from "@suphark/ui/lib/utils";
+import { ListFilter, RotateCcw, Search, X } from "lucide-react";
+import { useDeferredValue, useId, useState } from "react";
+
+export type ResourcePropertyFilterValue =
+  | { dataType: "DROPDOWN"; values: string[] }
+  | { dataType: "NUMBER"; min: string; max: string; unitId: string | null }
+  | { dataType: "TEXT"; query: string };
+
+export type ResourcePropertyFilterState = Record<string, ResourcePropertyFilterValue>;
+
+export interface ResourcePropertyFilterDefinition {
+  propertyTemplateId: string;
+  propertyName: string;
+  dataType: "TEXT" | "NUMBER" | "DROPDOWN" | "DATABASE";
+  workItemName: string;
+  options: Array<{ value: string; label: string }>;
+  units: Array<{ id: string; label: string; factor: number }>;
+  defaultUnitId: string | null;
+}
+
+interface ResourcePropertyFilterProps {
+  definitions: ResourcePropertyFilterDefinition[];
+  filters: ResourcePropertyFilterState;
+  onChange: (filters: ResourcePropertyFilterState) => void;
+  showWorkItemName?: boolean;
+  triggerLabel?: string;
+  triggerClassName?: string;
+}
+
+export function isResourcePropertyFilterActive(
+  filter: ResourcePropertyFilterValue | undefined,
+): boolean {
+  if (!filter) return false;
+  if (filter.dataType === "DROPDOWN") return filter.values.length > 0;
+  if (filter.dataType === "TEXT") return filter.query.trim().length > 0;
+  return isFiniteInput(filter.min) || isFiniteInput(filter.max);
+}
+
+export function countActiveResourcePropertyFilters(filters: ResourcePropertyFilterState): number {
+  return Object.values(filters).filter(isResourcePropertyFilterActive).length;
+}
+
+export function filterResourcePropertyDefinitions(
+  definitions: ResourcePropertyFilterDefinition[],
+  search: string,
+): ResourcePropertyFilterDefinition[] {
+  const normalizedSearch = search.trim().toLocaleLowerCase("th");
+  if (!normalizedSearch) return definitions;
+
+  return definitions.filter((definition) =>
+    `${definition.propertyName} ${definition.workItemName}`
+      .toLocaleLowerCase("th")
+      .includes(normalizedSearch),
+  );
+}
+
+export function ResourcePropertyFilter({
+  definitions,
+  filters,
+  onChange,
+  showWorkItemName = false,
+  triggerLabel = "คุณสมบัติ Resource",
+  triggerClassName,
+}: ResourcePropertyFilterProps) {
+  const idPrefix = useId();
+  const [propertySearch, setPropertySearch] = useState("");
+  const deferredPropertySearch = useDeferredValue(propertySearch);
+  const activeCount = countActiveResourcePropertyFilters(filters);
+  const visibleDefinitions = filterResourcePropertyDefinitions(definitions, deferredPropertySearch);
+
+  const updateFilter = (propertyTemplateId: string, filter: ResourcePropertyFilterValue) => {
+    onChange({ ...filters, [propertyTemplateId]: filter });
+  };
+
+  const clearFilter = (propertyTemplateId: string) => {
+    const nextFilters = { ...filters };
+    delete nextFilters[propertyTemplateId];
+    onChange(nextFilters);
+  };
+
+  return (
+    <div className="flex flex-col gap-2">
+      <Popover>
+        <PopoverTrigger
+          render={
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              className={cn("w-full justify-start border-dashed sm:w-auto", triggerClassName)}
+              disabled={definitions.length === 0}
+            />
+          }
+        >
+          <ListFilter data-icon="inline-start" />
+          {triggerLabel}
+          {activeCount > 0 ? (
+            <Badge variant="secondary" className="ml-auto sm:ml-1">
+              {activeCount}
+            </Badge>
+          ) : null}
+        </PopoverTrigger>
+        <PopoverContent align="start" className="w-[min(24rem,calc(100vw-2rem))] p-0">
+          <PopoverHeader className="border-b p-4">
+            <div className="flex items-start justify-between gap-3">
+              <div className="flex flex-col gap-1">
+                <PopoverTitle>กรองตามคุณสมบัติ</PopoverTitle>
+                <PopoverDescription>ค่าในคุณสมบัติเดียวกันเป็น OR และคนละคุณสมบัติเป็น AND</PopoverDescription>
+              </div>
+              {activeCount > 0 ? (
+                <Button type="button" variant="ghost" size="xs" onClick={() => onChange({})}>
+                  <RotateCcw data-icon="inline-start" />
+                  ล้าง
+                </Button>
+              ) : null}
+            </div>
+          </PopoverHeader>
+          <div className="border-b p-3">
+            <InputGroup>
+              <InputGroupAddon align="inline-start">
+                <Search aria-hidden="true" />
+              </InputGroupAddon>
+              <InputGroupInput
+                value={propertySearch}
+                onChange={(event) => setPropertySearch(event.target.value)}
+                placeholder="ค้นหาชื่อ Property..."
+                aria-label="ค้นหาคุณสมบัติ"
+              />
+              {propertySearch ? (
+                <InputGroupAddon align="inline-end">
+                  <InputGroupButton
+                    size="icon-xs"
+                    onClick={() => setPropertySearch("")}
+                    aria-label="ล้างคำค้นหา"
+                  >
+                    <X />
+                  </InputGroupButton>
+                </InputGroupAddon>
+              ) : null}
+            </InputGroup>
+          </div>
+          <ScrollArea className="h-[min(60vh,520px)]">
+            {visibleDefinitions.length > 0 ? (
+              <FieldGroup className="gap-4 p-4">
+                {visibleDefinitions.map((definition) => {
+                  const filter = filters[definition.propertyTemplateId];
+
+                  return (
+                    <Field
+                      key={definition.propertyTemplateId}
+                      className="gap-2 rounded-md border p-3"
+                    >
+                      <div className="flex items-start justify-between gap-2">
+                        <div className="flex min-w-0 flex-col gap-0.5">
+                          <FieldLabel className="font-medium">{definition.propertyName}</FieldLabel>
+                          {showWorkItemName ? (
+                            <span className="truncate text-muted-foreground text-xs">
+                              {definition.workItemName}
+                            </span>
+                          ) : null}
+                        </div>
+                        {isResourcePropertyFilterActive(filter) ? (
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="icon-xs"
+                            onClick={() => clearFilter(definition.propertyTemplateId)}
+                            aria-label={`ล้างตัวกรอง ${definition.propertyName}`}
+                          >
+                            <X />
+                          </Button>
+                        ) : null}
+                      </div>
+
+                      {definition.dataType === "DROPDOWN" || definition.dataType === "DATABASE" ? (
+                        <DropdownPropertyField
+                          idPrefix={idPrefix}
+                          definition={definition}
+                          filter={filter?.dataType === "DROPDOWN" ? filter : undefined}
+                          onChange={(nextFilter) =>
+                            updateFilter(definition.propertyTemplateId, nextFilter)
+                          }
+                        />
+                      ) : definition.dataType === "NUMBER" ? (
+                        <NumberPropertyField
+                          definition={definition}
+                          filter={filter?.dataType === "NUMBER" ? filter : undefined}
+                          onChange={(nextFilter) =>
+                            updateFilter(definition.propertyTemplateId, nextFilter)
+                          }
+                        />
+                      ) : (
+                        <Input
+                          value={filter?.dataType === "TEXT" ? filter.query : ""}
+                          onChange={(event) =>
+                            updateFilter(definition.propertyTemplateId, {
+                              dataType: "TEXT",
+                              query: event.target.value,
+                            })
+                          }
+                          placeholder="ค้นหาข้อความ..."
+                          aria-label={`กรอง ${definition.propertyName}`}
+                        />
+                      )}
+                    </Field>
+                  );
+                })}
+              </FieldGroup>
+            ) : (
+              <Empty className="min-h-40 rounded-none border-0">
+                <EmptyHeader>
+                  <EmptyTitle>ไม่พบคุณสมบัติ</EmptyTitle>
+                </EmptyHeader>
+              </Empty>
+            )}
+          </ScrollArea>
+        </PopoverContent>
+      </Popover>
+
+      {activeCount > 0 ? (
+        <fieldset className="flex flex-wrap gap-1 border-0 p-0" aria-label="ตัวกรองคุณสมบัติที่ใช้งาน">
+          {definitions.map((definition) => {
+            const filter = filters[definition.propertyTemplateId];
+            if (!isResourcePropertyFilterActive(filter)) return null;
+
+            return (
+              <Badge key={definition.propertyTemplateId} variant="secondary" className="gap-1 pr-0">
+                <span className="max-w-56 truncate">
+                  {definition.propertyName}: {describeFilter(definition, filter)}
+                </span>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon-xs"
+                  onClick={() => clearFilter(definition.propertyTemplateId)}
+                  aria-label={`ล้างตัวกรอง ${definition.propertyName}`}
+                >
+                  <X />
+                </Button>
+              </Badge>
+            );
+          })}
+        </fieldset>
+      ) : null}
+    </div>
+  );
+}
+
+function DropdownPropertyField({
+  idPrefix,
+  definition,
+  filter,
+  onChange,
+}: {
+  idPrefix: string;
+  definition: ResourcePropertyFilterDefinition;
+  filter?: Extract<ResourcePropertyFilterValue, { dataType: "DROPDOWN" }>;
+  onChange: (filter: Extract<ResourcePropertyFilterValue, { dataType: "DROPDOWN" }>) => void;
+}) {
+  const selectedValues = new Set(filter?.values ?? []);
+
+  return (
+    <FieldGroup data-slot="checkbox-group" className="gap-2">
+      {definition.options.map((option) => {
+        const id = `${idPrefix}-resource-property-${definition.propertyTemplateId}-${option.value}`;
+
+        return (
+          <Field key={option.value} orientation="horizontal" className="gap-2">
+            <Checkbox
+              id={id}
+              checked={selectedValues.has(option.value)}
+              onCheckedChange={(checked) => {
+                const nextValues = new Set(selectedValues);
+                if (checked === true) nextValues.add(option.value);
+                else nextValues.delete(option.value);
+                onChange({ dataType: "DROPDOWN", values: Array.from(nextValues) });
+              }}
+            />
+            <FieldLabel htmlFor={id} className="cursor-pointer font-normal">
+              {option.label}
+            </FieldLabel>
+          </Field>
+        );
+      })}
+    </FieldGroup>
+  );
+}
+
+function NumberPropertyField({
+  definition,
+  filter,
+  onChange,
+}: {
+  definition: ResourcePropertyFilterDefinition;
+  filter?: Extract<ResourcePropertyFilterValue, { dataType: "NUMBER" }>;
+  onChange: (filter: Extract<ResourcePropertyFilterValue, { dataType: "NUMBER" }>) => void;
+}) {
+  const currentFilter = filter ?? {
+    dataType: "NUMBER" as const,
+    min: "",
+    max: "",
+    unitId: definition.defaultUnitId,
+  };
+
+  return (
+    <div className="grid grid-cols-2 gap-2">
+      <Input
+        type="number"
+        inputMode="decimal"
+        step="any"
+        value={currentFilter.min}
+        onChange={(event) => onChange({ ...currentFilter, min: event.target.value })}
+        placeholder="ต่ำสุด"
+        aria-label={`${definition.propertyName} ต่ำสุด`}
+      />
+      <Input
+        type="number"
+        inputMode="decimal"
+        step="any"
+        value={currentFilter.max}
+        onChange={(event) => onChange({ ...currentFilter, max: event.target.value })}
+        placeholder="สูงสุด"
+        aria-label={`${definition.propertyName} สูงสุด`}
+      />
+      {definition.units.length > 0 ? (
+        <Select
+          value={currentFilter.unitId ?? undefined}
+          onValueChange={(unitId) => onChange({ ...currentFilter, unitId })}
+        >
+          <SelectTrigger className="col-span-2 w-full">
+            <SelectValue placeholder="เลือกหน่วย" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              {definition.units.map((unit) => (
+                <SelectItem key={unit.id} value={unit.id}>
+                  {unit.label}
+                </SelectItem>
+              ))}
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+      ) : null}
+    </div>
+  );
+}
+
+function describeFilter(
+  definition: ResourcePropertyFilterDefinition,
+  filter: ResourcePropertyFilterValue | undefined,
+): string {
+  if (!filter) return "";
+  if (filter.dataType === "TEXT") return filter.query.trim();
+  if (filter.dataType === "DROPDOWN") {
+    const labels = new Map(definition.options.map((option) => [option.value, option.label]));
+    return filter.values.map((value) => labels.get(value) ?? value).join(" หรือ ");
+  }
+
+  const unitLabel = definition.units.find((unit) => unit.id === filter.unitId)?.label ?? "";
+  if (filter.min && filter.max) return `${filter.min}–${filter.max} ${unitLabel}`.trim();
+  if (filter.min) return `≥ ${filter.min} ${unitLabel}`.trim();
+  return `≤ ${filter.max} ${unitLabel}`.trim();
+}
+
+function isFiniteInput(value: string): boolean {
+  return value.trim() !== "" && Number.isFinite(Number(value));
+}

package/src/data-table.ts

@@ -0,0 +1,21 @@
+/**
+ * @suphark/ui/data-table — ตารางข้อมูลบน @tanstack/react-table (ยกจาก supplychain `components/data-table`)
+ * แยก entry เพราะต้องมี peer `@tanstack/react-table` — แอปที่ไม่ใช้ตารางไม่ต้องติดตั้ง
+ *
+ * ```ts
+ * import { DataTable, DataTableColumnHeader, useDataTable } from "@suphark/ui/data-table";
+ * ```
+ * state ของตารางใน URL (`useTableSearchParams`) ต้องใช้ next/navigation → อยู่ที่ `@suphark/ui/next`
+ */
+export * from "./components/data-table";
+export { DataTableRowActions } from "./components/data-table/data-table-row-actions";
+export { DeleteManyButton } from "./components/shared/button/delete-many-button";
+export {
+  countActiveResourcePropertyFilters,
+  filterResourcePropertyDefinitions,
+  isResourcePropertyFilterActive,
+  ResourcePropertyFilter,
+  type ResourcePropertyFilterDefinition,
+  type ResourcePropertyFilterState,
+  type ResourcePropertyFilterValue,
+} from "./components/shared/resource-property-filter";

package/src/hooks/use-table-search-params.ts

@@ -0,0 +1,147 @@
+"use client";
+
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useCallback, useMemo, useTransition } from "react";
+
+/**
+ * เก็บ state ของตาราง (หน้า, ขนาดหน้า, การเรียง, คำค้น, ตัวกรอง) ไว้ใน URL
+ *
+ * เก็บใน URL ไม่ใช่ useState เพราะ:
+ *  - server component อ่าน searchParams แล้ว query เฉพาะหน้าที่ขอได้
+ *  - ก๊อป URL ส่งต่อ หรือ refresh แล้วเห็นตารางหน้าเดิม
+ *
+ * ใช้ router.replace ไม่ใช่ push โดยตั้งใจ — การกดตัวกรองทีละครั้งไม่ควรถมประวัติ
+ * เบราว์เซอร์จนกดย้อนกลับออกจากหน้าไม่ได้ ผลคือปุ่ม back จะพาออกจากหน้านี้เลย
+ * ไม่ได้ย้อนทีละสถานะของตาราง
+ *
+ * ทุกการเปลี่ยนค่าห่อด้วย startTransition เพื่อให้ React แสดงข้อมูลเดิมค้างไว้
+ * ระหว่างรอ server ตอบ แทนที่จะกระพริบเป็นหน้าว่าง
+ */
+
+export const TABLE_PARAM = {
+  page: "page",
+  pageSize: "pageSize",
+  sort: "sort",
+  order: "order",
+  search: "q",
+} as const;
+
+/** ชื่อ param ที่สงวนไว้ ที่เหลือถือเป็น faceted filter */
+const RESERVED = new Set<string>(Object.values(TABLE_PARAM));
+
+export type TableSearchState = {
+  page: number;
+  pageSize: number;
+  sort: string | null;
+  order: "asc" | "desc";
+  search: string;
+  filters: Record<string, string[]>;
+};
+
+export function useTableSearchParams(defaults?: { pageSize?: number }) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const [isPending, startTransition] = useTransition();
+
+  const state = useMemo<TableSearchState>(() => {
+    const filters: Record<string, string[]> = {};
+    for (const key of new Set(searchParams.keys())) {
+      if (RESERVED.has(key)) continue;
+      const values = searchParams
+        .getAll(key)
+        .flatMap((v) => v.split(","))
+        .filter(Boolean);
+      if (values.length > 0) filters[key] = values;
+    }
+
+    const page = Number.parseInt(searchParams.get(TABLE_PARAM.page) ?? "1", 10);
+    const pageSize = Number.parseInt(
+      searchParams.get(TABLE_PARAM.pageSize) ?? String(defaults?.pageSize ?? 50),
+      10,
+    );
+
+    return {
+      page: Number.isFinite(page) && page > 0 ? page : 1,
+      pageSize: Number.isFinite(pageSize) && pageSize > 0 ? pageSize : (defaults?.pageSize ?? 50),
+      sort: searchParams.get(TABLE_PARAM.sort),
+      order: searchParams.get(TABLE_PARAM.order) === "asc" ? "asc" : "desc",
+      search: searchParams.get(TABLE_PARAM.search) ?? "",
+      filters,
+    };
+  }, [searchParams, defaults?.pageSize]);
+
+  const push = useCallback(
+    (mutate: (params: URLSearchParams) => void) => {
+      const params = new URLSearchParams(searchParams.toString());
+      mutate(params);
+      startTransition(() => {
+        router.replace(`${pathname}?${params.toString()}`, { scroll: false });
+      });
+    },
+    [router, pathname, searchParams],
+  );
+
+  /** ตั้งค่าแล้วลบ param ทิ้งเมื่อค่าว่าง เพื่อไม่ให้ URL รก */
+  const setParam = useCallback((params: URLSearchParams, key: string, value: string | null) => {
+    if (value === null || value === "") params.delete(key);
+    else params.set(key, value);
+  }, []);
+
+  const setPage = useCallback(
+    (page: number) => push((p) => setParam(p, TABLE_PARAM.page, page > 1 ? String(page) : null)),
+    [push, setParam],
+  );
+
+  const setPageSize = useCallback(
+    (pageSize: number) =>
+      push((p) => {
+        setParam(p, TABLE_PARAM.pageSize, String(pageSize));
+        // เปลี่ยนขนาดหน้าแล้วหน้าเดิมอาจไม่มีอยู่จริง กลับไปหน้าแรกเสมอ
+        p.delete(TABLE_PARAM.page);
+      }),
+    [push, setParam],
+  );
+
+  const setSort = useCallback(
+    (field: string | null, order: "asc" | "desc" = "desc") =>
+      push((p) => {
+        setParam(p, TABLE_PARAM.sort, field);
+        setParam(p, TABLE_PARAM.order, field ? order : null);
+        p.delete(TABLE_PARAM.page);
+      }),
+    [push, setParam],
+  );
+
+  const setSearch = useCallback(
+    (search: string) =>
+      push((p) => {
+        setParam(p, TABLE_PARAM.search, search.trim());
+        p.delete(TABLE_PARAM.page);
+      }),
+    [push, setParam],
+  );
+
+  const setFilter = useCallback(
+    (key: string, values: string[]) =>
+      push((p) => {
+        setParam(p, key, values.length > 0 ? values.join(",") : null);
+        p.delete(TABLE_PARAM.page);
+      }),
+    [push, setParam],
+  );
+
+  const resetFilters = useCallback(
+    () =>
+      push((p) => {
+        for (const key of [...p.keys()]) {
+          if (!RESERVED.has(key)) p.delete(key);
+        }
+        p.delete(TABLE_PARAM.search);
+        p.delete(TABLE_PARAM.page);
+      }),
+    [push],
+  );
+
+  return { state, isPending, setPage, setPageSize, setSort, setSearch, setFilter, resetFilters };
+}

package/src/index.ts

@@ -9,6 +9,8 @@
  * `chart` (recharts) ไม่อยู่ใน barrel: import ตรง `@suphark/ui/components/ui/chart` เมื่อแอปติดตั้ง recharts เอง
  */
 
+// sonner: `toast()` คู่กับ <Toaster /> — แอปไม่ต้องติดตั้ง sonner เอง
+export { toast } from "sonner";
 export * from "./components/shared/button";
 export { ClientRedirect } from "./components/shared/client-redirect";
 export { Combobox } from "./components/shared/combobox";
@@ -131,7 +133,6 @@ export * from "./components/ui/textarea";
 export * from "./components/ui/toggle";
 export * from "./components/ui/toggle-group";
 export * from "./components/ui/tooltip";
-
 // ---------- lib / hooks ----------
 export { useCopyToClipboard } from "./hooks/use-copy-to-clipboard";
 export { useIsMobile } from "./hooks/use-mobile";

package/src/next.ts

@@ -2,6 +2,9 @@
  * @suphark/ui/next — component ที่ต้องรันใน Next.js (ใช้ next/navigation หรือ next/link)
  * แยกจาก barrel หลักเพื่อให้ `@suphark/ui` ใช้ได้ในสภาพแวดล้อมที่ไม่มี next (vitest, Vite, Storybook)
  */
+
+// ---------- app shell (sidebar + header + เนื้อหา) ----------
+export * from "./components/app-shell";
 export { LinkButton, type LinkButtonProps } from "./components/shared/button/base/link-button";
 export { RefreshButton } from "./components/shared/button/refresh-button";
 export { FormDialog } from "./components/shared/form-dialog";
@@ -13,3 +16,8 @@ export {
 } from "./components/shared/navigation/page-breadcrumb";
 export { type RowAction, RowActions } from "./components/shared/row-actions";
 export { RowMenu, type RowMenuDialog, type RowMenuItem } from "./components/shared/row-menu";
+export {
+  TABLE_PARAM,
+  type TableSearchState,
+  useTableSearchParams,
+} from "./hooks/use-table-search-params";