@suphark/ui 0.1.1 → 0.3.0

package/CHANGELOG.md

@@ -2,6 +2,28 @@
 
 รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
 
+## [0.3.0] — 2026-09-18
+
+### Added
+
+- **AppShell** (`@suphark/ui/next`) — โครงแอปกลางแทน ConsoleShell ของ Pi Auth และ main layout ของ supplychain: shadcn Sidebar (ยุบเป็นไอคอน/offcanvas/none, Sheet บนมือถือ, ⌘B, cookie `sidebar_state`), โลโก้ `AppBrand` (name/logo/subtitle/version), ค้นหาเมนู, เมนู 2 ชั้น `AppNav` (ไฮไลต์ตาม pathname, กางอัตโนมัติเมื่อลูก active, dropdown เมื่อยุบ, badge, labs, pin ผ่าน `pin` prop), slot `sidebarHeader`/`sidebarFooter`, header (SidebarTrigger + `HeaderBreadcrumbs` อัตโนมัติ + `center`/`actions`/`banner`), `brandColor` ต่อ tenant, `contentMaxWidth`
+- `UserMenu` (variant `sidebar` | `header`): หัวผู้ใช้ + children (ใส่ DropdownMenuItem/ThemeMenuItems เอง) + `onSignOut`
+- `HeaderBreadcrumbs` (labels/skip/hideIds/homeHref), `NavLink` (จาก Pi Auth)
+- โมเดลเมนู `AppNavGroup`/`AppNavItem` (icon เป็น ReactNode — ประกาศใน server component ได้) + helpers `filterNav` (ตัดตามสิทธิ์ทุกชั้น), `searchNav`, `flattenNav`, `isNavActive` (+tests รวม 40)
+- barrel หลัก export `toast` จาก sonner (แอปไม่ต้องติดตั้ง sonner เอง)
+- showcase: `/shell` ตัวอย่าง layout ที่ใช้ AppShell + UserMenu + ThemeMenuItems + filterNav + cookie defaultOpen
+
+## [0.2.0] — 2026-09-18
+
+### Added
+
+- entry **`@suphark/ui/data-table`** (ยกจาก supplychain `components/data-table`): `DataTable`, `DataTableColumnHeader`, `DataTableToolbar`, `DataTablePagination`, `DataTableFacetedFilter`, `DataTableDateRangeFilter`, `DataTableViewOptions`, `DataTableRowActions`, `useDataTable`, types (`DataTableProps`, `FacetedFilterConfig`) + `DeleteManyButton`, `ResourcePropertyFilter` (+helpers) — ต้องมี peer `@tanstack/react-table` (optional; แอปที่ไม่ใช้ตารางไม่ต้องติดตั้ง); ลากเรียงแถวใช้ `@dnd-kit/*` เป็น dependency ของแพ็กเกจ
+- `useTableSearchParams` / `TABLE_PARAM` (state ตารางใน URL) ที่ `@suphark/ui/next`
+- tests: data-table, data-table-faceted-filter, resource-property-filter (รวม 34)
+- exports `./package.json`, `./components/data-table`
+- showcase: การ์ด DataTable จริงในแท็บ Data Display; code recipe ใช้ import path ของแพ็กเกจ
+- `apps/showcase/vercel.json` + `docs/ops/deploy-vercel.md`
+
 ## [0.1.1] — 2026-09-18
 
 ### Added

package/README.md

@@ -10,7 +10,7 @@ Design system กลางของ Suphark apps (Pi Auth, DueBell, Pi PDF, supp
 pnpm add @suphark/ui @base-ui/react lucide-react react-hook-form
 ```
 
-peer ที่ต้องมีอยู่แล้ว: `react`/`react-dom` ≥19, `tailwindcss` ^4, `next` ≥15 (เฉพาะ `@suphark/ui/next`), `recharts` (เฉพาะ `components/ui/chart`)
+peer ที่ต้องมีอยู่แล้ว: `react`/`react-dom` ≥19, `tailwindcss` ^4, `next` ≥15 (เฉพาะ `@suphark/ui/next`), `@tanstack/react-table` (เฉพาะ `@suphark/ui/data-table`), `recharts` (เฉพาะ `components/ui/chart`)
 
 ### 1. next.config.ts
 
@@ -55,8 +55,11 @@ import { ThemeProvider, Toaster } from "@suphark/ui";
 // ทุกอย่างที่ไม่พึ่ง Next — primitives, shared, theme, hooks, cn
 import { Button, Card, FormFieldInput, StatusBadge, ThemeToggle, cn } from "@suphark/ui";
 
-// ของที่ใช้ next/navigation หรือ next/link
-import { FormDialog, RowActions, LinkButton, RefreshButton, PageShell } from "@suphark/ui/next";
+// ของที่ใช้ next/navigation หรือ next/link + โครงแอป
+import { AppShell, UserMenu, filterNav, FormDialog, RowActions, LinkButton, RefreshButton, PageShell } from "@suphark/ui/next";
+
+// ตารางข้อมูล (ต้องติดตั้ง @tanstack/react-table เอง)
+import { DataTable, DataTableColumnHeader, useDataTable } from "@suphark/ui/data-table";
 
 // import ตรงรายไฟล์ก็ได้ (เช่น chart ที่ต้องมี recharts)
 import { ChartContainer } from "@suphark/ui/components/ui/chart";
@@ -68,11 +71,50 @@ import { ChartContainer } from "@suphark/ui/components/ui/chart";
 |---|---|---|
 | `src/components/ui/*` | shadcn/ui ต้นฉบับ 59 ตัว (+ `__tests__`) | **ห้ามแก้มือ** — เพิ่ม/อัปเดตด้วย `pnpm dlx shadcn@latest add <name>` ใน `packages/ui` (`components.json` ตั้ง alias ไว้แล้ว) |
 | `src/components/shared/*` | ของที่เราประกอบเอง: ปุ่มมาตรฐาน (`button/`), form-field บน react-hook-form (`form/`), layout, theme, combobox, และชุดจาก Pi Auth (FormDialog, NameIdFields, StatusBadge, RowMenu, …) | แก้ได้ แต่คง props เดิมให้มากที่สุด (minor = เพิ่ม, major = เปลี่ยน) |
+| `src/components/data-table/*` | DataTable บน tanstack (toolbar, faceted filter, pagination, view options, row actions, ลากเรียงแถว) | entry `@suphark/ui/data-table` |
+| `src/components/app-shell/*` | AppShell (sidebar + header + เนื้อหา), AppNav, AppBrand, UserMenu, HeaderBreadcrumbs, NavLink, filterNav/searchNav | export ผ่าน `@suphark/ui/next` (ใช้ next/link, next/navigation) |
 | `src/components/design-system/*` | หน้า showcase (render ใน `apps/showcase`) | ไม่อยู่ใน barrel |
 | `src/lib/*`, `src/hooks/*` | `cn`, formatter วันที่ไทย, สีสถานะ, permission context, `useIsMobile`, `useCopyToClipboard` | |
 | `src/styles.css` | token (slate + success/warning/sidebar/chart), radius, ฟอนต์, scrollbar, dark variant | |
 | `scripts/*.mjs` | audit บังคับ: Base UI props (`default*`/`onSelect`), typography scale | แอปปลายทางรันได้จาก `node_modules/@suphark/ui/scripts` |
 
+### โครงแอป (AppShell)
+
+```tsx
+// app/(app)/layout.tsx — server component ได้ (icon เป็น element)
+import { ThemeMenuItems } from "@suphark/ui";
+import { AppShell, type AppNavGroup, filterNav, UserMenu } from "@suphark/ui/next";
+import { cookies } from "next/headers";
+
+const NAV: AppNavGroup[] = [
+  { title: "งาน", items: [
+    { title: "แดชบอร์ด", href: "/", icon: <LayoutDashboard />, exact: true },
+    { title: "จัดซื้อ", icon: <ShoppingCart />, items: [{ title: "แพ็กเกจ", href: "/packages", permission: "package:read" }] },
+  ]},
+];
+
+export default async function Layout({ children }) {
+  const defaultOpen = (await cookies()).get("sidebar_state")?.value !== "false";
+  return (
+    <AppShell
+      brand={{ name: "Pi Auth", subtitle: tenant.name, version: "v1.2.0", versionHref: "/change-log" }}
+      nav={filterNav(NAV, can)}
+      searchable
+      defaultOpen={defaultOpen}
+      brandColor={tenant.primaryColor}
+      header={{ breadcrumbs: { skip: ["console"] }, actions: <NotificationBell /> }}
+      sidebarFooter={<UserMenu user={{ name, email, image }} onSignOut={signOut}><ThemeMenuItems /></UserMenu>}
+    >
+      {children}
+    </AppShell>
+  );
+}
+```
+
+- `header={false}` ไม่มี header · `collapsible="offcanvas"` ซ่อนทั้งแผง (supplychain) · `contentMaxWidth="max-w-5xl"` จำกัดความกว้าง (Pi Auth)
+- `pin={{ pinnedHrefs, onTogglePin }}` เปิดปุ่มปักหมุดเมนู (แอปเก็บ state เอง) · `header.center` วาง pinned menus
+- ตัวอย่างรันได้ที่ `apps/showcase/src/app/shell`
+
 ### สีแบรนด์ต่อ tenant/แอป (`--brand`)
 
 ตั้ง `--brand` / `--brand-foreground` inline บน wrapper (หรือใส่ `data-brand`) แล้ว `primary`/`ring`/`sidebar-primary` ข้างในตามไปด้วย — ค่าเริ่มต้นไม่ตั้ง `--brand` (primary = slate) ดูตัวอย่างที่ `apps/showcase/src/app/brand`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suphark/ui",
-  "version": "0.1.1",
+  "version": "0.3.0",
   "private": false,
   "type": "module",
   "description": "Design system กลางของ Suphark apps: shadcn/ui (base-nova, Base UI, Tailwind v4) + shared components + token/ฟอนต์ Noto Sans Thai Looped — ส่งเป็น source ให้แอป Next transpile เอง",
@@ -38,14 +38,21 @@
   "exports": {
     ".": "./src/index.ts",
     "./next": "./src/next.ts",
+    "./data-table": "./src/data-table.ts",
     "./styles.css": "./src/styles.css",
     "./components/shared/button": "./src/components/shared/button/index.ts",
     "./components/shared/theme": "./src/components/shared/theme/index.ts",
+    "./components/data-table": "./src/components/data-table/index.ts",
+    "./components/app-shell": "./src/components/app-shell/index.ts",
     "./components/*": "./src/components/*.tsx",
     "./lib/*": "./src/lib/*.ts",
-    "./hooks/*": "./src/hooks/*.ts"
+    "./hooks/*": "./src/hooks/*.ts",
+    "./package.json": "./package.json"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@fontsource/noto-sans-thai-looped": "^5.3.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -64,6 +71,7 @@
   },
   "peerDependencies": {
     "@base-ui/react": ">=1.7.0",
+    "@tanstack/react-table": ">=8.20.0",
     "lucide-react": ">=1.30.0",
     "next": ">=15",
     "react": ">=19",
@@ -78,10 +86,14 @@
     },
     "recharts": {
       "optional": true
+    },
+    "@tanstack/react-table": {
+      "optional": true
     }
   },
   "devDependencies": {
     "@base-ui/react": "^1.8.0",
+    "@tanstack/react-table": "^8.21.3",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",

package/src/components/app-shell/app-brand.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@suphark/ui/components/ui/sidebar";
+import { cn } from "@suphark/ui/lib/utils";
+import Link from "next/link";
+import type { ReactNode } from "react";
+
+export interface AppBrandProps {
+  /** ชื่อแอป/องค์กร */
+  name: ReactNode;
+  /** โลโก้ (ไอคอน lucide, <img>, หรือตัวอักษร) — ถ้าไม่ส่งจะใช้ตัวอักษรแรกของ name */
+  logo?: ReactNode;
+  /** ข้อความบรรทัดล่าง เช่น ชื่อ tenant / แผน */
+  subtitle?: ReactNode;
+  /** ลิงก์เมื่อกดโลโก้ (ค่าเริ่มต้น "/") */
+  href?: string;
+  /** ป้ายเล็กด้านขวา เช่น เวอร์ชัน `v1.4.0` — กดแล้วไป `versionHref` (เช่น /change-log) */
+  version?: ReactNode;
+  versionHref?: string;
+  className?: string;
+}
+
+/**
+ * โลโก้ + ชื่อแอปมุมบน sidebar (ยกจาก supplychain NavLogo + Pi Auth ConsoleShell header)
+ * ยุบเป็นไอคอนแล้วเหลือแค่โลโก้
+ */
+export function AppBrand({
+  name,
+  logo,
+  subtitle,
+  href = "/",
+  version,
+  versionHref,
+  className,
+}: AppBrandProps) {
+  const { setOpenMobile } = useSidebar();
+  const closeMobile = () => setOpenMobile(false);
+  const mark = (
+    <div className="flex aspect-square size-8 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-sidebar-primary font-bold text-sidebar-primary-foreground text-sm [&_img]:size-full [&_img]:object-contain [&_svg]:size-4">
+      {logo ?? (typeof name === "string" ? name.charAt(0).toUpperCase() : "•")}
+    </div>
+  );
+  const versionNode =
+    version !== undefined &&
+    (versionHref ? (
+      <Link
+        href={versionHref}
+        onClick={closeMobile}
+        className="shrink-0 rounded-md px-2 py-1 text-muted-foreground text-xs no-underline transition-colors hover:bg-sidebar-accent hover:text-primary group-data-[collapsible=icon]:hidden"
+      >
+        {version}
+      </Link>
+    ) : (
+      <span className="shrink-0 px-2 text-muted-foreground text-xs group-data-[collapsible=icon]:hidden">
+        {version}
+      </span>
+    ));
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem className={cn("flex items-center", className)}>
+        <SidebarMenuButton
+          size="lg"
+          className="min-w-0 flex-1 group-data-[collapsible=icon]:p-0!"
+          render={<Link href={href} onClick={closeMobile} />}
+        >
+          {mark}
+          <div className="grid flex-1 overflow-hidden text-left text-sm leading-tight group-data-[collapsible=icon]:hidden">
+            <span className="truncate font-medium text-sidebar-foreground">{name}</span>
+            {subtitle && <span className="truncate text-muted-foreground text-xs">{subtitle}</span>}
+          </div>
+        </SidebarMenuButton>
+        {versionNode}
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+}

package/src/components/app-shell/app-nav.tsx

@@ -0,0 +1,260 @@
+"use client";
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@suphark/ui/components/ui/collapsible";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@suphark/ui/components/ui/dropdown-menu";
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  useSidebar,
+} from "@suphark/ui/components/ui/sidebar";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@suphark/ui/components/ui/tooltip";
+import { cn } from "@suphark/ui/lib/utils";
+import { ChevronRight, FlaskConical, Pin } from "lucide-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { type AppNavGroup, type AppNavItem, isNavActive } from "./types";
+
+/** ปุ่ม pin — แสดงเมื่อแอปส่ง `pinnedHrefs` + `onTogglePin` (supplychain เก็บใน user preferences) */
+export interface AppNavPinProps {
+  pinnedHrefs?: string[];
+  onTogglePin?: (href: string) => void;
+  pinLabel?: string;
+  unpinLabel?: string;
+}
+
+function MenuTitle({ title, isLabs }: { title: string; isLabs?: boolean }) {
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        render={<span className="flex w-full items-center gap-1.5 overflow-hidden" />}
+      >
+        <span
+          className={cn("truncate", isLabs && "font-medium text-amber-600 dark:text-amber-500")}
+        >
+          {title}
+        </span>
+        {isLabs && <FlaskConical className="h-3 w-3 shrink-0 text-amber-600 dark:text-amber-500" />}
+      </TooltipTrigger>
+      <TooltipContent side="right" align="center" className="max-w-xs break-words">
+        {title}
+      </TooltipContent>
+    </Tooltip>
+  );
+}
+
+function PinAction({
+  href,
+  pin,
+  className,
+}: {
+  href: string;
+  pin: AppNavPinProps;
+  className?: string;
+}) {
+  if (!pin.onTogglePin) return null;
+  const isPinned = pin.pinnedHrefs?.includes(href) ?? false;
+  const label = isPinned ? (pin.unpinLabel ?? "เลิกปักหมุด") : (pin.pinLabel ?? "ปักหมุดที่ header");
+  return (
+    <SidebarMenuAction
+      showOnHover
+      onClick={() => pin.onTogglePin?.(href)}
+      title={label}
+      className={className}
+    >
+      <Pin className={cn("size-3.5", isPinned && "fill-current")} />
+      <span className="sr-only">{label}</span>
+    </SidebarMenuAction>
+  );
+}
+
+/**
+ * กลุ่มเมนูใน sidebar (ยกจาก supplychain NavMain): 2 ชั้น, กางได้, ยุบเป็นไอคอนแล้วเป็น dropdown,
+ * ไฮไลต์ตาม pathname (prefix match), ป้าย badge, ฟีเจอร์ labs, และ pin (ถ้าแอปส่งมา)
+ */
+export function AppNavGroupMenu({
+  group,
+  pin = {},
+  forceOpen = false,
+}: {
+  group: AppNavGroup;
+  pin?: AppNavPinProps;
+  /** กางทุกกลุ่มย่อย (ใช้ตอนค้นหาเมนู) */
+  forceOpen?: boolean;
+}) {
+  const { state, isMobile, setOpenMobile } = useSidebar();
+  const pathname = usePathname();
+  const isCollapsed = state === "collapsed" && !isMobile;
+  // บนมือถือ sidebar เป็น Sheet — กดลิงก์แล้วปิดให้
+  const closeMobile = () => setOpenMobile(false);
+
+  const renderLeaf = (item: AppNavItem & { href: string }) => {
+    const active = isNavActive(pathname, item.href, item.exact);
+    return (
+      <SidebarMenuItem key={item.href}>
+        <SidebarMenuButton
+          isActive={active}
+          tooltip={item.title}
+          render={<Link href={item.href} onClick={closeMobile} />}
+        >
+          {item.icon}
+          <MenuTitle title={item.title} isLabs={item.isLabs} />
+        </SidebarMenuButton>
+        {item.badge !== undefined && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}
+        <PinAction href={item.href} pin={pin} />
+      </SidebarMenuItem>
+    );
+  };
+
+  return (
+    <SidebarGroup>
+      {group.title && <SidebarGroupLabel>{group.title}</SidebarGroupLabel>}
+      <SidebarMenu>
+        {group.items.map((item) => {
+          const children = item.items ?? [];
+          const hasChildren = children.length > 0;
+
+          // ใบ (ไม่มีลูก)
+          if (!hasChildren) {
+            if (!item.href) return null;
+            return renderLeaf({ ...item, href: item.href });
+          }
+
+          const childActive = children.some((c) => isNavActive(pathname, c.href, c.exact));
+
+          // ยุบเป็นไอคอน + มีลูก → dropdown ด้านขวา
+          if (isCollapsed) {
+            return (
+              <SidebarMenuItem key={item.title}>
+                <DropdownMenu>
+                  <DropdownMenuTrigger
+                    render={<SidebarMenuButton tooltip={item.title} isActive={childActive} />}
+                  >
+                    {item.icon}
+                    <MenuTitle title={item.title} isLabs={item.isLabs} />
+                    <ChevronRight className="ml-auto" />
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent side="right" align="start" sideOffset={4}>
+                    <DropdownMenuGroup>
+                      <DropdownMenuLabel>{item.title}</DropdownMenuLabel>
+                      <DropdownMenuSeparator />
+                      {children.map((sub) => (
+                        <DropdownMenuItem
+                          key={sub.href ?? sub.title}
+                          render={
+                            <Link
+                              href={sub.href ?? "#"}
+                              className="flex cursor-pointer items-center gap-2"
+                            />
+                          }
+                        >
+                          {sub.icon}
+                          <MenuTitle title={sub.title} isLabs={sub.isLabs} />
+                        </DropdownMenuItem>
+                      ))}
+                    </DropdownMenuGroup>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </SidebarMenuItem>
+            );
+          }
+
+          // กางปกติ — เปิดค้างเมื่อลูกตัวใดตัวหนึ่ง active หรือกำลังค้นหา
+          const open = forceOpen || childActive;
+          return (
+            <Collapsible
+              key={`${item.title}-${open}`}
+              render={<SidebarMenuItem />}
+              defaultOpen={open}
+              className="group/collapsible"
+            >
+              <CollapsibleTrigger
+                render={<SidebarMenuButton tooltip={item.title} suppressHydrationWarning />}
+              >
+                {item.icon}
+                <MenuTitle title={item.title} isLabs={item.isLabs} />
+                <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+              </CollapsibleTrigger>
+              <CollapsibleContent suppressHydrationWarning>
+                <SidebarMenuSub>
+                  {children.map((sub) => {
+                    if (!sub.href) return null;
+                    const active = isNavActive(pathname, sub.href, sub.exact);
+                    return (
+                      <SidebarMenuSubItem key={sub.href}>
+                        <SidebarMenuSubButton
+                          isActive={active}
+                          render={
+                            <Link
+                              href={sub.href}
+                              className="flex items-center gap-2"
+                              onClick={closeMobile}
+                            />
+                          }
+                        >
+                          {sub.icon}
+                          <MenuTitle title={sub.title} isLabs={sub.isLabs} />
+                        </SidebarMenuSubButton>
+                        {sub.badge !== undefined && (
+                          <SidebarMenuBadge>{sub.badge}</SidebarMenuBadge>
+                        )}
+                        <PinAction
+                          href={sub.href}
+                          pin={pin}
+                          className="top-1 right-2 opacity-0 transition-opacity group-hover/menu-sub-item:opacity-100"
+                        />
+                      </SidebarMenuSubItem>
+                    );
+                  })}
+                </SidebarMenuSub>
+              </CollapsibleContent>
+            </Collapsible>
+          );
+        })}
+      </SidebarMenu>
+    </SidebarGroup>
+  );
+}
+
+/** ทุกกลุ่มเมนู */
+export function AppNav({
+  nav,
+  pin,
+  forceOpen,
+}: {
+  nav: AppNavGroup[];
+  pin?: AppNavPinProps;
+  forceOpen?: boolean;
+}) {
+  return (
+    <>
+      {nav.map((group, i) => (
+        <AppNavGroupMenu
+          key={group.title ?? `group-${i}`}
+          group={group}
+          pin={pin}
+          forceOpen={forceOpen}
+        />
+      ))}
+    </>
+  );
+}