@suphark/ui 0.9.0 → 0.11.0

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
 
+## [0.11.0] — 2026-09-21
+
+### Added
+
+- `AppShell` (layout sidebar): slot **`sidebarContentBefore`** / **`sidebarContentAfter`** วางใน `SidebarContent` ก่อน/หลังเมนู — เลื่อนไปกับเมนู (ต่างจาก `sidebarHeader` ที่ตรึงบน) ซ่อนอัตโนมัติเมื่อยุบเป็นไอคอน; สำหรับต้นไม้โฟลเดอร์ + ถังขยะ + มิเตอร์พื้นที่แบบ Google Drive (ขอจาก Pi Files — เดิมต้องยัดใน `sidebarHeader` แล้วจำกัด max-h เอง)
+- showcase: `/shell` ใส่ `TreeView` + `ProgressBar` ใน `sidebarContentAfter` เป็นตัวอย่าง (`app/shell/sidebar-drive.tsx`)
+
+## [0.10.0] — 2026-09-21
+
+### Added
+
+- **`SectionNav`** (`@suphark/ui/next`, สเปกจาก Pi Auth — ชิ้นสุดท้ายที่แอปยังประกอบเอง) — หัวหมวด + แถบแท็บย่อยใต้หัวข้อสำหรับ layout ของหมวดที่มีหลายหน้า (directory/access/security/integrations): `title`/`description`/`actions` ส่งต่อ `PageHeader`, `tabs[{ href? | slug?, label, exact?, badge? }]` (href หรือ `${base}/${slug}`), แต่ละแท็บเป็น `NavLink` (`-mb-px border-b-2` ไฮไลต์ `border-primary` ตาม pathname, `aria-current=page`), badge ต่อท้าย label, `navLabel` (ค่าเริ่มต้น `UiText.sectionNav.tabs` — "แท็บย่อย"/"Section tabs"), ไม่มี tabs = ไม่มี nav; ไม่มี state ใช้จาก server component ได้ (เฉพาะแถบ `<nav>` เป็น client component เล็ก ๆ เพื่ออ่าน UiText); types `SectionNavProps`, `SectionNavTab`; `UiText.sectionNav` (optional)
+- showcase: หน้า `section-nav` (แท็บชี้หน้าจริงในหมวดนำทาง — Link prefetch จะไม่ 404) — 97 หน้า; tests 3 กรณี (รวม 126)
+
 ## [0.9.0] — 2026-09-21
 
 ### Added

package/README.md

@@ -129,6 +129,7 @@ export default async function Layout({ children }) {
 - `header={false}` ไม่มี header · `collapsible="offcanvas"` ซ่อนทั้งแผง (supplychain) · `contentMaxWidth="max-w-5xl"` จำกัดความกว้าง (Pi Auth)
 - `pin={{ pinnedHrefs, onTogglePin }}` เปิดปุ่มปักหมุดเมนู (แอปเก็บ state เอง) · `header.center` วาง pinned menus
 - `sidebarHeader` ซ่อนอัตโนมัติเมื่อยุบเป็นไอคอน — ใส่ `sidebarHeaderCollapsed` ถ้าต้องการไอคอนแทน (เช่นปุ่ม ⌘K)
+- ของที่ต้องเลื่อนไปกับเมนู (ต้นไม้โฟลเดอร์ยาว, มิเตอร์พื้นที่) ใส่ `sidebarContentBefore` / `sidebarContentAfter` (อยู่ใน SidebarContent) — `sidebarHeader` ตรึงอยู่บนไม่เลื่อน
 - `header.breadcrumbs.labels` รับฟังก์ชัน `(segment, href) => ReactNode` ได้ (ใส่ `t()` ของ next-intl) — **แต่ฟังก์ชันส่งจาก server layout ไม่ได้** (React error "Functions cannot be passed directly to Client Components") ให้ทำ client component ที่เรียก `<HeaderBreadcrumbs labels={…} />` แล้วส่งเป็น `breadcrumbs: <MyBreadcrumbs />` (ดู `apps/showcase/src/app/shell/breadcrumbs.tsx`)
 - `<UserMenu>` children คือรายการเมนู: `ThemeMenuItems` มี `DropdownMenuGroup` + หัว "ธีม" ในตัวแล้ว (ปรับข้อความด้วย `label`/`labels`) ไม่ต้องห่อเพิ่ม; รายการอื่นใส่ `DropdownMenuItem`/`DropdownMenuGroup` เอง
 - ตัวอย่างรันได้ที่ `apps/showcase/src/app/shell`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suphark/ui",
-  "version": "0.9.0",
+  "version": "0.11.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 เอง",

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

@@ -65,6 +65,12 @@ export interface AppShellProps {
   sidebarHeader?: ReactNode;
   /** สิ่งที่แสดงแทน `sidebarHeader` ตอนยุบเป็นไอคอน (เช่นปุ่มไอคอน ⌘K) — ไม่ส่ง = ไม่แสดงอะไร */
   sidebarHeaderCollapsed?: ReactNode;
+  /**
+   * ส่วนเพิ่มใน `SidebarContent` ก่อน/หลังเมนู — เลื่อนไปกับเมนู (ต่างจาก `sidebarHeader` ที่ตรึงอยู่บน)
+   * เช่น ต้นไม้โฟลเดอร์ + มิเตอร์พื้นที่แบบ Drive (Pi Files); ซ่อนอัตโนมัติเมื่อยุบเป็นไอคอน
+   */
+  sidebarContentBefore?: ReactNode;
+  sidebarContentAfter?: ReactNode;
   /** ท้าย sidebar — ปกติคือ `<UserMenu variant="sidebar" />` */
   sidebarFooter?: ReactNode;
   /**
@@ -137,6 +143,8 @@ function SidebarShell({
   pin,
   sidebarHeader,
   sidebarHeaderCollapsed,
+  sidebarContentBefore,
+  sidebarContentAfter,
   sidebarFooter,
   header = true,
   brandColor,
@@ -176,6 +184,8 @@ function SidebarShell({
         pin={pin}
         sidebarHeader={sidebarHeader}
         sidebarHeaderCollapsed={sidebarHeaderCollapsed}
+        sidebarContentBefore={sidebarContentBefore}
+        sidebarContentAfter={sidebarContentAfter}
         sidebarFooter={sidebarFooter}
         collapsible={collapsible}
       />
@@ -344,6 +354,8 @@ function ShellSidebar({
   pin,
   sidebarHeader,
   sidebarHeaderCollapsed,
+  sidebarContentBefore,
+  sidebarContentAfter,
   sidebarFooter,
   collapsible,
 }: Pick<
@@ -355,6 +367,8 @@ function ShellSidebar({
   | "pin"
   | "sidebarHeader"
   | "sidebarHeaderCollapsed"
+  | "sidebarContentBefore"
+  | "sidebarContentAfter"
   | "sidebarFooter"
   | "collapsible"
 >) {
@@ -407,7 +421,13 @@ function ShellSidebar({
         )}
       </SidebarHeader>
       <SidebarContent>
+        {sidebarContentBefore && (
+          <div className="px-2 group-data-[collapsible=icon]:hidden">{sidebarContentBefore}</div>
+        )}
         <AppNav nav={visibleNav} pin={pin} forceOpen={searching} />
+        {sidebarContentAfter && (
+          <div className="px-2 group-data-[collapsible=icon]:hidden">{sidebarContentAfter}</div>
+        )}
       </SidebarContent>
       {sidebarFooter && <SidebarFooter>{sidebarFooter}</SidebarFooter>}
       {collapsible !== "none" && <SidebarRail />}

package/src/components/shared/navigation/section-nav-bar.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import { useUiText } from "@suphark/ui/components/shared/ui-text";
+import type { ReactNode } from "react";
+
+/** แถบแท็บของ SectionNav — แยกเป็น client เพื่ออ่าน aria-label ค่าเริ่มต้นจาก UiText (context) */
+export function SectionNavBar({ label, children }: { label?: string; children: ReactNode }) {
+  const text = useUiText();
+  return (
+    <nav
+      aria-label={label ?? text.sectionNav?.tabs ?? "แท็บย่อย"}
+      className="flex flex-wrap gap-1 border-b text-sm"
+    >
+      {children}
+    </nav>
+  );
+}

package/src/components/shared/navigation/section-nav.tsx

@@ -0,0 +1,79 @@
+import { NavLink } from "@suphark/ui/components/app-shell/nav-link";
+import { PageHeader } from "@suphark/ui/components/shared/page-header";
+import { cn } from "@suphark/ui/lib/utils";
+import type { ReactNode } from "react";
+import { SectionNavBar } from "./section-nav-bar";
+
+export interface SectionNavTab {
+  /** ลิงก์เต็ม — หรือส่ง `slug` แล้วให้ `base` ของ SectionNav ประกอบเป็น `${base}/${slug}` */
+  href?: string;
+  slug?: string;
+  label: ReactNode;
+  /** active เฉพาะ path ตรงเป๊ะ (ค่าเริ่มต้น prefix match) */
+  exact?: boolean;
+  /** ต่อท้าย label เช่น จำนวน */
+  badge?: ReactNode;
+}
+
+export interface SectionNavProps {
+  title: ReactNode;
+  description?: ReactNode;
+  actions?: ReactNode;
+  /** prefix ของ href เมื่อแท็บให้ `slug` (เช่น "/directory") */
+  base?: string;
+  tabs?: ReadonlyArray<SectionNavTab>;
+  /** aria-label ของแถบแท็บ (ค่าเริ่มต้น `UiText.sectionNav.tabs` — "แท็บย่อย") */
+  navLabel?: string;
+  className?: string;
+}
+
+function tabHref(tab: SectionNavTab, base?: string): string {
+  if (tab.href) return tab.href;
+  const b = (base ?? "").replace(/\/+$/, "");
+  return `${b}/${(tab.slug ?? "").replace(/^\/+/, "")}`;
+}
+
+/**
+ * หัวหมวด + แถบแท็บย่อยใต้หัวข้อ สำหรับ layout ของหมวดที่มีหลายหน้า (directory/access/security/integrations …)
+ * = `PageHeader` + `NavLink` แต่ละแท็บ (ไฮไลต์ตาม pathname) — ไม่มี state ใช้จาก server component ได้
+ *
+ *   <SectionNav title="ไดเรกทอรี" base="/directory" tabs={[{ slug: "users", label: "ผู้ใช้" }, { slug: "groups", label: "กลุ่ม", badge: 3 }]} />
+ */
+export function SectionNav({
+  title,
+  description,
+  actions,
+  base,
+  tabs,
+  navLabel,
+  className,
+}: SectionNavProps) {
+  return (
+    <div data-slot="section-nav" className={cn("flex flex-col gap-3", className)}>
+      <PageHeader title={title} description={description} actions={actions} />
+      {tabs && tabs.length > 0 && (
+        <SectionNavBar label={navLabel}>
+          {tabs.map((tab) => {
+            const href = tabHref(tab, base);
+            return (
+              <NavLink
+                key={href}
+                href={href}
+                exact={tab.exact}
+                className="-mb-px inline-flex items-center gap-1.5 border-transparent border-b-2 px-3 py-2 text-muted-foreground transition-colors hover:text-foreground"
+                activeClassName="border-primary font-medium text-foreground"
+              >
+                {tab.label}
+                {tab.badge != null && (
+                  <span className="rounded-full bg-muted px-1.5 text-muted-foreground text-xs tabular-nums">
+                    {tab.badge}
+                  </span>
+                )}
+              </NavLink>
+            );
+          })}
+        </SectionNavBar>
+      )}
+    </div>
+  );
+}

package/src/components/shared/ui-text.tsx

@@ -47,6 +47,8 @@ export interface UiText {
   signOut?: string;
   /** ThemeMenuItems: หัวกลุ่ม + ตัวเลือก (optional) */
   theme?: Partial<{ label: string; light: string; dark: string; system: string }>;
+  /** SectionNav: aria-label ของแถบแท็บย่อย (optional — "แท็บย่อย") */
+  sectionNav?: Partial<{ tabs: string }>;
 }
 
 export const UI_TEXT_TH: UiText = {
@@ -79,6 +81,7 @@ export const UI_TEXT_TH: UiText = {
   userMenu: "เมนูผู้ใช้",
   signOut: "ออกจากระบบ",
   theme: { label: "ธีม", light: "สว่าง", dark: "มืด", system: "ตามระบบ" },
+  sectionNav: { tabs: "แท็บย่อย" },
 };
 
 export const UI_TEXT_EN: UiText = {
@@ -111,6 +114,7 @@ export const UI_TEXT_EN: UiText = {
   userMenu: "User menu",
   signOut: "Sign out",
   theme: { label: "Theme", light: "Light", dark: "Dark", system: "System" },
+  sectionNav: { tabs: "Section tabs" },
 };
 
 const UiTextContext = createContext<UiText>(UI_TEXT_TH);

package/src/next.ts

@@ -15,6 +15,11 @@ export {
   PageBreadcrumb,
   type PageBreadcrumbItem,
 } from "./components/shared/navigation/page-breadcrumb";
+export {
+  SectionNav,
+  type SectionNavProps,
+  type SectionNavTab,
+} from "./components/shared/navigation/section-nav";
 export { Stepper, type StepperStep, type StepStatus } from "./components/shared/navigation/stepper";
 export { type RowAction, type RowActionItem, RowActions } from "./components/shared/row-actions";
 export { RowMenu, type RowMenuDialog, type RowMenuItem } from "./components/shared/row-menu";