@suphark/ui 0.16.0 → 0.17.0

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 รูปแบบตาม [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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suphark/ui",
-  "version": "0.16.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

@@ -9,13 +9,14 @@ import {
 } from "@suphark/ui/components/ui/input-group";
 import { cn } from "@suphark/ui/lib/utils";
 import { Search, X } from "lucide-react";
-import { type ComponentProps, useRef } from "react";
+import { type ComponentProps, useRef, useState } from "react";
 
 export interface SearchInputProps
   extends Omit<ComponentProps<"input">, "size" | "value" | "onChange" | "type"> {
-  value: string;
-  /** รับค่าใหม่ตรง ๆ (ไม่ใช่ event) — ปุ่มล้างก็เรียกด้วย `""` */
-  onValueChange: (value: string) => void;
+  /** ไม่ส่ง = uncontrolled (คุมค่าในตัวเอง จาก `defaultValue`) — ใช้กับฟอร์มที่ submit เองได้ */
+  value?: string;
+  /** รับค่าใหม่ตรง ๆ (ไม่ใช่ event) — ปุ่มล้างก็เรียกด้วย `""`; uncontrolled ก็ยังเรียกให้ */
+  onValueChange?: (value: string) => void;
   /** เรียกเพิ่มหลังกดปุ่มล้าง/Escape (เช่นรีเซ็ตหน้า pagination) */
   onClear?: () => void;
   /** xs = h-7, sm = h-8 (ค่าเริ่มต้น), default = h-9 */
@@ -32,14 +33,18 @@ export interface SearchInputProps
 
 /**
  * ช่องค้นหามาตรฐาน: ไอคอนแว่นขยายซ้าย + ปุ่มล้าง (X) ขวาเมื่อมีข้อความ + Escape ล้างค่า
- * เป็น controlled ล้วน (แอปคุม state/debounce เอง) — ซ้ำอยู่ใน Pi Auth/Pi PDF/DueBell จึงยกมาไว้ที่นี่
+ * ใช้ได้ทั้ง 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,
+  value: valueProp,
   onValueChange,
+  defaultValue,
   onClear,
   size = "sm",
   label,
@@ -55,9 +60,18 @@ export function SearchInput({
 }: 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() {
-    onValueChange("");
+    change("");
+    if (valueProp === undefined && inputRef.current) inputRef.current.value = "";
     onClear?.();
     inputRef.current?.focus();
   }
@@ -84,7 +98,7 @@ export function SearchInput({
         aria-label={label ?? text.search?.label ?? "ค้นหา"}
         autoComplete="off"
         spellCheck={false}
-        onChange={(e) => onValueChange(e.target.value)}
+        onChange={(e) => change(e.target.value)}
         onKeyDown={(e) => {
           onKeyDown?.(e);
           if (clearOnEscape && e.key === "Escape" && value && !e.defaultPrevented) {

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/index.ts

@@ -134,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,