@suphark/ui 0.15.0 → 0.17.0

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
 
+## [0.17.0] — 2026-09-30
+
+### Added
+
+- **`CopyButton`** (barrel) — ปุ่มคัดลอกข้อความ: ไอคอน Copy → ✓ (`text-success`) ชั่วครู่แล้วกลับ, ใช้ `useCopyToClipboard` (มี fallback `execCommand` สำหรับ webview ที่บล็อก clipboard API) แอปไม่ต้องเขียน state เอง (Pi Auth เขียนซ้ำ 12 ไฟล์, Pi Config ใน `RevealedValues`): `value`, `children` (ไม่ส่ง = ปุ่มไอคอนล้วน), `label`/`copiedLabel` (ค่าเริ่มต้น `UiText.copy`/`copied` — เป็น aria-label เมื่อไม่มี children และเป็น `title` เสมอ), `toast` (ค่าเริ่มต้น **false** เพราะปุ่มแสดง ✓ อยู่แล้ว — ส่ง `true` หรือข้อความของแอปได้), `timeout`, `onCopied`, props อื่นของ `Button` (variant/size/className) ส่งผ่านหมด
+- **`CodeBlock`** (barrel, สเปกจาก Pi Config — ของเดิมอยู่ `features/docs/code-block.tsx` ใช้ 2 ไฟล์; Pi Auth มีแบบเดียวกัน ~9 จุด) — บล็อกโค้ด/คำสั่ง: หัวแถบ `title ?? lang ?? "shell"` (mono, `title={false}` = ไม่มีหัวแถบ) + `CopyButton`, เนื้อเป็น `<pre><code>` mono เลื่อนแนวนอน; `copyText` เมื่อคัดลอกไม่เท่ากับที่แสดง (เช่นคัดลอกเฉพาะค่า token ไม่เอา `KEY=`), `copyLabel`, `showCopy`, `wrap` (ตัดบรรทัดแทนเลื่อน), `maxHeightClassName`; ไม่มี syntax highlight โดยตั้งใจ (ไม่เพิ่ม dependency)
+- `SearchInput`: ใช้แบบ **uncontrolled** ได้แล้ว — ไม่ส่ง `value` = คุมค่าในตัวเองจาก `defaultValue` (ปุ่มล้าง/Escape ยังทำงาน) จึงวางใน `<form>` ที่ submit ไป server action/URL param พร้อม `name` ได้ (คำถามจาก Pi Auth: `/console/logs`, `/platform/users`); `onValueChange` ยังเรียกทุกตัวอักษรทั้งสองโหมด — **ไม่มี debounce ในตัว** (ให้แอป debounce เอง) จดไว้ใน docstring แล้ว
+- showcase: หน้า `/components/copy-button`, `/components/code-block` — 101 หน้า; tests 5 กรณีเพิ่ม (รวม 146)
+- test: `date-picker.test.tsx` ตั้ง timeout 20s (เปิด popup = render ปฏิทินทั้งเดือนใน jsdom ช้าเป็นครั้งคราวเกิน 5s ตอนรันทั้งชุด — ทำให้ `pnpm verify`/CI แดงสุ่ม ๆ)
+
+## [0.16.0] — 2026-09-30
+
+### Added
+
+- **`SearchInput`** (barrel) — ช่องค้นหามาตรฐานที่ Pi Auth (~15 จุด) / Pi PDF (5) / DueBell (8) เขียนซ้ำ: ไอคอนแว่นขยายซ้าย, ปุ่มล้าง (X) ขวาเมื่อมีข้อความ (กดแล้ว focus กลับที่ช่อง), **Escape ล้างค่า** (`clearOnEscape`), `type="search"` แต่ซ่อนปุ่ม X ของ WebKit; controlled ล้วน `value` + `onValueChange(next)` (แอปคุม state/debounce เอง), `onClear`, `size` xs|sm|default (h-7/h-8/h-9), `label`/`clearLabel`/`placeholder` (ค่าเริ่มต้นจาก **`UiText.search`** `{ placeholder, label, clear }` — key ใหม่), `groupClassName` (กรอบ) แยกจาก `className` (ตัว `<input>`), ส่ง `ref` ถึง input ได้; props อื่นของ `<input>` ส่งผ่านหมด
+- showcase: หน้า `/components/search-input`; **เมนูซ้ายของ `/components` มีช่องค้นหาแล้ว** — กรองตามชื่อ/slug/ชื่อ export/คำอธิบาย, บอกจำนวนที่พบ (`aria-live`), กด `/` ที่ไหนก็ได้เพื่อโฟกัสช่องค้นหา (ไม่ดักเมื่อกำลังพิมพ์ในช่องอื่น)
+
 ## [0.15.0] — 2026-09-30
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suphark/ui",
-  "version": "0.15.0",
+  "version": "0.17.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/shared/button/copy-button.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { useUiText } from "@suphark/ui/components/shared/ui-text";
+import { Button } from "@suphark/ui/components/ui/button";
+import { useCopyToClipboard } from "@suphark/ui/hooks/use-copy-to-clipboard";
+import { cn } from "@suphark/ui/lib/utils";
+import { Check, Copy } from "lucide-react";
+import type { ComponentProps, ReactNode } from "react";
+
+export interface CopyButtonProps
+  extends Omit<ComponentProps<typeof Button>, "onClick" | "children" | "value"> {
+  /** ข้อความที่จะคัดลอก */
+  value: string;
+  /** ป้ายบนปุ่ม — ไม่ส่ง = ปุ่มไอคอนล้วน (ใช้ `label` เป็น aria-label) */
+  children?: ReactNode;
+  /** aria-label/title ของปุ่ม (ค่าเริ่มต้น `UiText.copy`) */
+  label?: string;
+  /** aria-label/title หลังคัดลอกแล้ว (ค่าเริ่มต้น `UiText.copied`) */
+  copiedLabel?: string;
+  /** toast ของ `useCopyToClipboard` — ค่าเริ่มต้น `false` เพราะปุ่มนี้แสดง ✓ อยู่แล้ว */
+  toast?: boolean | { success?: string; failed?: string };
+  /** ms ที่ไอคอน ✓ ค้างไว้ (ค่าเริ่มต้น 2000) */
+  timeout?: number;
+  onCopied?: (value: string) => void;
+}
+
+/**
+ * ปุ่มคัดลอกข้อความ: ไอคอน Copy → ✓ ชั่วครู่หลังคัดลอก (แอปไม่ต้องเขียน state/clipboard เอง)
+ * ใช้ `useCopyToClipboard` ที่มี fallback `execCommand` สำหรับ webview ที่บล็อก clipboard API
+ *
+ *   <CopyButton value={token} />                                  // ปุ่มไอคอน
+ *   <CopyButton value={url} variant="outline" size="sm">คัดลอกลิงก์</CopyButton>
+ */
+export function CopyButton({
+  value,
+  children,
+  label,
+  copiedLabel,
+  toast = false,
+  timeout = 2000,
+  onCopied,
+  variant = "ghost",
+  size,
+  className,
+  disabled,
+  ...props
+}: CopyButtonProps) {
+  const text = useUiText();
+  const { isCopied, copyToClipboard } = useCopyToClipboard({ toast, timeout });
+  const idle = label ?? text.copy;
+  const done = copiedLabel ?? text.copied;
+  const title = isCopied ? done : idle;
+
+  return (
+    <Button
+      {...props}
+      type="button"
+      variant={variant}
+      size={size ?? (children ? "sm" : "icon-sm")}
+      disabled={disabled}
+      aria-label={children ? undefined : title}
+      title={title}
+      className={cn(isCopied && "text-success", className)}
+      onClick={async () => {
+        if (await copyToClipboard(value)) onCopied?.(value);
+      }}
+    >
+      {isCopied ? <Check aria-hidden="true" /> : <Copy aria-hidden="true" />}
+      {children}
+    </Button>
+  );
+}

package/src/components/shared/button/index.ts

@@ -6,6 +6,7 @@ export { AddNewButton } from "./add-new-button";
 export { ActionButton, type ActionButtonProps } from "./base/action-button";
 export { CancelButton } from "./cancel-button";
 export { ConfirmButton } from "./confirm-button";
+export { CopyButton, type CopyButtonProps } from "./copy-button";
 export { DeleteButton } from "./delete-button";
 export { FloatingSaveButton } from "./floating-save-button";
 export { PrintButton } from "./print-button";

package/src/components/shared/form/search-input.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import { useUiText } from "@suphark/ui/components/shared/ui-text";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@suphark/ui/components/ui/input-group";
+import { cn } from "@suphark/ui/lib/utils";
+import { Search, X } from "lucide-react";
+import { type ComponentProps, useRef, useState } from "react";
+
+export interface SearchInputProps
+  extends Omit<ComponentProps<"input">, "size" | "value" | "onChange" | "type"> {
+  /** ไม่ส่ง = uncontrolled (คุมค่าในตัวเอง จาก `defaultValue`) — ใช้กับฟอร์มที่ submit เองได้ */
+  value?: string;
+  /** รับค่าใหม่ตรง ๆ (ไม่ใช่ event) — ปุ่มล้างก็เรียกด้วย `""`; uncontrolled ก็ยังเรียกให้ */
+  onValueChange?: (value: string) => void;
+  /** เรียกเพิ่มหลังกดปุ่มล้าง/Escape (เช่นรีเซ็ตหน้า pagination) */
+  onClear?: () => void;
+  /** xs = h-7, sm = h-8 (ค่าเริ่มต้น), default = h-9 */
+  size?: "xs" | "sm" | "default";
+  /** aria-label ของช่อง (ค่าเริ่มต้น `UiText.search.label`) */
+  label?: string;
+  /** aria-label ของปุ่มล้าง (ค่าเริ่มต้น `UiText.search.clear`) */
+  clearLabel?: string;
+  /** Escape ในช่องล้างค่า (ค่าเริ่มต้น true) */
+  clearOnEscape?: boolean;
+  /** class ของกรอบ (InputGroup) — `className` ไปที่ `<input>` */
+  groupClassName?: string;
+}
+
+/**
+ * ช่องค้นหามาตรฐาน: ไอคอนแว่นขยายซ้าย + ปุ่มล้าง (X) ขวาเมื่อมีข้อความ + Escape ล้างค่า
+ * ใช้ได้ทั้ง controlled (`value` + `onValueChange` — แอปคุม state/debounce เอง) และ uncontrolled
+ * (`defaultValue` + `name` ในฟอร์มที่ submit ไป server action/URL param) — ซ้ำอยู่ใน Pi Auth/Pi PDF/DueBell
+ * `onValueChange` ยิงทุกตัวอักษร (ไม่มี debounce ในตัว — ให้แอป debounce เองถ้าต้องยิง query)
+ *
+ *   const [q, setQ] = useState("");
+ *   <SearchInput value={q} onValueChange={setQ} placeholder="ค้นหาสมาชิก…" />
+ *   <form action={search}><SearchInput name="q" defaultValue={q} /></form>
+ */
+export function SearchInput({
+  value: valueProp,
+  onValueChange,
+  defaultValue,
+  onClear,
+  size = "sm",
+  label,
+  clearLabel,
+  clearOnEscape = true,
+  placeholder,
+  className,
+  groupClassName,
+  disabled,
+  onKeyDown,
+  ref,
+  ...props
+}: SearchInputProps) {
+  const text = useUiText();
+  const inputRef = useRef<HTMLInputElement>(null);
+  // uncontrolled: เก็บค่าเองเพื่อให้ปุ่มล้าง/Escape ทำงาน และรู้ว่าจะโชว์ปุ่มล้างไหม
+  const [uncontrolled, setUncontrolled] = useState(String(defaultValue ?? ""));
+  const value = valueProp ?? uncontrolled;
+
+  function change(next: string) {
+    if (valueProp === undefined) setUncontrolled(next);
+    onValueChange?.(next);
+  }
+
+  function clear() {
+    change("");
+    if (valueProp === undefined && inputRef.current) inputRef.current.value = "";
+    onClear?.();
+    inputRef.current?.focus();
+  }
+
+  return (
+    <InputGroup
+      data-slot="search-input"
+      className={cn(size === "xs" ? "h-7" : size === "default" ? "h-9" : "h-8", groupClassName)}
+    >
+      <InputGroupAddon>
+        <Search aria-hidden="true" className={size === "xs" ? "size-3.5" : undefined} />
+      </InputGroupAddon>
+      <InputGroupInput
+        {...props}
+        ref={(node) => {
+          inputRef.current = node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        }}
+        type="search"
+        value={value}
+        disabled={disabled}
+        placeholder={placeholder ?? text.search?.placeholder ?? "ค้นหา…"}
+        aria-label={label ?? text.search?.label ?? "ค้นหา"}
+        autoComplete="off"
+        spellCheck={false}
+        onChange={(e) => change(e.target.value)}
+        onKeyDown={(e) => {
+          onKeyDown?.(e);
+          if (clearOnEscape && e.key === "Escape" && value && !e.defaultPrevented) {
+            e.preventDefault();
+            clear();
+          }
+        }}
+        className={cn(
+          // ซ่อนปุ่ม X ของ type=search ใน WebKit — เรามีปุ่มล้างของเราเอง
+          "[&::-webkit-search-cancel-button]:appearance-none",
+          size === "xs" && "text-xs",
+          className,
+        )}
+      />
+      {value && !disabled && (
+        <InputGroupAddon align="inline-end">
+          <InputGroupButton
+            size={size === "xs" ? "icon-xs" : "icon-sm"}
+            onClick={clear}
+            aria-label={clearLabel ?? text.search?.clear ?? "ล้างการค้นหา"}
+          >
+            <X aria-hidden="true" />
+          </InputGroupButton>
+        </InputGroupAddon>
+      )}
+    </InputGroup>
+  );
+}

package/src/components/shared/text/code-block.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { CopyButton } from "@suphark/ui/components/shared/button/copy-button";
+import { cn } from "@suphark/ui/lib/utils";
+import type { ReactNode } from "react";
+
+export interface CodeBlockProps {
+  /** โค้ด/คำสั่งที่แสดง */
+  code: string;
+  /** ป้ายหัวแถบ (ค่าเริ่มต้น `lang` หรือ "shell") — ส่ง `false` เพื่อซ่อนหัวแถบทั้งแถว */
+  title?: ReactNode | false;
+  /** ชื่อภาษา — เป็นป้ายเฉย ๆ ไม่มี syntax highlight */
+  lang?: string;
+  /** สิ่งที่คัดลอกจริงเมื่อต่างจากที่แสดง (เช่นคัดลอกเฉพาะค่า token ไม่เอา `KEY=`) */
+  copyText?: string;
+  /** aria-label ของปุ่มคัดลอก */
+  copyLabel?: string;
+  showCopy?: boolean;
+  /** ตัดบรรทัดแทนเลื่อนแนวนอน */
+  wrap?: boolean;
+  /** จำกัดความสูงแล้วเลื่อน เช่น `"max-h-72"` */
+  maxHeightClassName?: string;
+  className?: string;
+}
+
+/**
+ * บล็อกโค้ด/คำสั่งพร้อมปุ่มคัดลอก — หัวแถบชื่อไฟล์/ภาษา + `<pre><code>` mono เลื่อนแนวนอนได้
+ * ไม่มี syntax highlight โดยตั้งใจ (คำสั่ง/ค่า config ไม่ต้องการ และเลี่ยง dependency)
+ *
+ *   <CodeBlock code="pnpm add @suphark/ui" />
+ *   <CodeBlock title="API_TOKEN" code={`API_TOKEN=${token}`} copyText={token} />
+ */
+export function CodeBlock({
+  code,
+  title,
+  lang,
+  copyText,
+  copyLabel,
+  showCopy = true,
+  wrap = false,
+  maxHeightClassName,
+  className,
+}: CodeBlockProps) {
+  const heading = title === false ? null : (title ?? lang ?? "shell");
+  const showHeader = heading !== null || showCopy;
+
+  return (
+    <div
+      data-slot="code-block"
+      className={cn("min-w-0 overflow-hidden rounded-lg border bg-card", className)}
+    >
+      {showHeader && (
+        <div className="flex items-center justify-between gap-2 border-b bg-muted px-3 py-1.5">
+          <span className="min-w-0 truncate font-mono text-muted-foreground text-xs">
+            {heading}
+          </span>
+          {showCopy && (
+            <CopyButton
+              value={copyText ?? code}
+              label={copyLabel}
+              variant="outline"
+              size="icon-xs"
+              className="shrink-0"
+            />
+          )}
+        </div>
+      )}
+      <pre
+        className={cn(
+          "px-3 py-2 font-mono text-xs leading-relaxed",
+          wrap ? "whitespace-pre-wrap break-words" : "overflow-x-auto",
+          maxHeightClassName && cn("overflow-y-auto", maxHeightClassName),
+        )}
+      >
+        <code>{code}</code>
+      </pre>
+    </div>
+  );
+}

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

@@ -49,6 +49,8 @@ export interface UiText {
   theme?: Partial<{ label: string; light: string; dark: string; system: string }>;
   /** SectionNav: aria-label ของแถบแท็บย่อย (optional — "แท็บย่อย") */
   sectionNav?: Partial<{ tabs: string }>;
+  /** SearchInput: placeholder / aria-label ช่อง / aria-label ปุ่มล้าง (optional) */
+  search?: Partial<{ placeholder: string; label: string; clear: string }>;
 }
 
 export const UI_TEXT_TH: UiText = {
@@ -82,6 +84,7 @@ export const UI_TEXT_TH: UiText = {
   signOut: "ออกจากระบบ",
   theme: { label: "ธีม", light: "สว่าง", dark: "มืด", system: "ตามระบบ" },
   sectionNav: { tabs: "แท็บย่อย" },
+  search: { placeholder: "ค้นหา…", label: "ค้นหา", clear: "ล้างการค้นหา" },
 };
 
 export const UI_TEXT_EN: UiText = {
@@ -115,6 +118,7 @@ export const UI_TEXT_EN: UiText = {
   signOut: "Sign out",
   theme: { label: "Theme", light: "Light", dark: "Dark", system: "System" },
   sectionNav: { tabs: "Section tabs" },
+  search: { placeholder: "Search…", label: "Search", clear: "Clear search" },
 };
 
 const UiTextContext = createContext<UiText>(UI_TEXT_TH);

package/src/index.ts

@@ -76,6 +76,7 @@ export { FormFieldRadioCards } from "./components/shared/form/form-field-radio-c
 export { FormFieldRadioGroup } from "./components/shared/form/form-field-radio-group";
 export { FormFieldSelect, type SelectOption } from "./components/shared/form/form-field-select";
 export { CheckboxField, LabeledField } from "./components/shared/form/labeled-field";
+export { SearchInput, type SearchInputProps } from "./components/shared/form/search-input";
 export {
   SimpleSelect,
   type SimpleSelectGroup,
@@ -133,6 +134,7 @@ export { SelectionButton } from "./components/shared/selection-button";
 export { Stat } from "./components/shared/stat";
 export { StatusBadge, statusTone, type Tone } from "./components/shared/status-badge";
 export { SwitcherChevron } from "./components/shared/switcher-chevron";
+export { CodeBlock, type CodeBlockProps } from "./components/shared/text/code-block";
 export {
   PrimarySecondaryText,
   type PrimarySecondaryTextProps,