sh-ui-cli 0.116.0 → 0.118.0

package/data/registry/react/components/table/index.module.tsx

@@ -0,0 +1,69 @@
+import * as React from "react";
+import styles from "./styles.module.css";
+import { cn } from "@SH_UI_UTILS@";
+
+export const Table = React.forwardRef<
+  HTMLTableElement,
+  React.TableHTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className={styles["table__wrapper"]}>
+    <table ref={ref} className={cn(styles.table, className)} {...props} />
+  </div>
+));
+Table.displayName = "Table";
+
+export const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn(styles.table__header, className)} {...props} />
+));
+TableHeader.displayName = "TableHeader";
+
+export const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody ref={ref} className={cn(styles.table__body, className)} {...props} />
+));
+TableBody.displayName = "TableBody";
+
+export const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot ref={ref} className={cn(styles.table__footer, className)} {...props} />
+));
+TableFooter.displayName = "TableFooter";
+
+export const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr ref={ref} className={cn(styles.table__row, className)} {...props} />
+));
+TableRow.displayName = "TableRow";
+
+export const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, scope = "col", ...props }, ref) => (
+  <th ref={ref} scope={scope} className={cn(styles.table__head, className)} {...props} />
+));
+TableHead.displayName = "TableHead";
+
+export const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td ref={ref} className={cn(styles.table__cell, className)} {...props} />
+));
+TableCell.displayName = "TableCell";
+
+export const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption ref={ref} className={cn(styles.table__caption, className)} {...props} />
+));
+TableCaption.displayName = "TableCaption";

package/data/registry/react/components/table/index.tailwind.tsx

@@ -0,0 +1,68 @@
+import * as React from "react";
+import { cn } from "@SH_UI_UTILS@";
+
+export const Table = React.forwardRef<
+  HTMLTableElement,
+  React.TableHTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="w-full overflow-x-auto">
+    <table ref={ref} className={cn("w-full border-collapse text-[length:var(--text-sm)] text-foreground", className)} {...props} />
+  </div>
+));
+Table.displayName = "Table";
+
+export const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn(className)} {...props} />
+));
+TableHeader.displayName = "TableHeader";
+
+export const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody ref={ref} className={cn(className)} {...props} />
+));
+TableBody.displayName = "TableBody";
+
+export const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot ref={ref} className={cn("border-t border-border font-medium", className)} {...props} />
+));
+TableFooter.displayName = "TableFooter";
+
+export const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr ref={ref} className={cn("border-b border-border transition-[background-color] duration-[var(--duration-fast)] hover:bg-background-muted data-[state=selected]:bg-background-muted motion-reduce:transition-none", className)} {...props} />
+));
+TableRow.displayName = "TableRow";
+
+export const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, scope = "col", ...props }, ref) => (
+  <th ref={ref} scope={scope} className={cn("h-[var(--control-md)] px-[var(--space-3)] text-start font-medium text-foreground-muted align-middle whitespace-nowrap", className)} {...props} />
+));
+TableHead.displayName = "TableHead";
+
+export const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td ref={ref} className={cn("p-[var(--space-3)] align-middle", className)} {...props} />
+));
+TableCell.displayName = "TableCell";
+
+export const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption ref={ref} className={cn("mt-[var(--space-3)] text-foreground-muted text-[length:var(--text-xs)] text-start", className)} {...props} />
+));
+TableCaption.displayName = "TableCaption";

package/data/registry/react/components/table/index.tsx

@@ -0,0 +1,69 @@
+import * as React from "react";
+import "./styles.css";
+import { cn } from "@SH_UI_UTILS@";
+
+export const Table = React.forwardRef<
+  HTMLTableElement,
+  React.TableHTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="sh-ui-table__wrapper">
+    <table ref={ref} className={cn("sh-ui-table", className)} {...props} />
+  </div>
+));
+Table.displayName = "Table";
+
+export const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("sh-ui-table__header", className)} {...props} />
+));
+TableHeader.displayName = "TableHeader";
+
+export const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody ref={ref} className={cn("sh-ui-table__body", className)} {...props} />
+));
+TableBody.displayName = "TableBody";
+
+export const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot ref={ref} className={cn("sh-ui-table__footer", className)} {...props} />
+));
+TableFooter.displayName = "TableFooter";
+
+export const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr ref={ref} className={cn("sh-ui-table__row", className)} {...props} />
+));
+TableRow.displayName = "TableRow";
+
+export const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, scope = "col", ...props }, ref) => (
+  <th ref={ref} scope={scope} className={cn("sh-ui-table__head", className)} {...props} />
+));
+TableHead.displayName = "TableHead";
+
+export const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td ref={ref} className={cn("sh-ui-table__cell", className)} {...props} />
+));
+TableCell.displayName = "TableCell";
+
+export const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption ref={ref} className={cn("sh-ui-table__caption", className)} {...props} />
+));
+TableCaption.displayName = "TableCaption";

package/data/registry/react/components/table/styles.css

@@ -0,0 +1,57 @@
+.sh-ui-table__wrapper {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.sh-ui-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--text-sm);
+  color: var(--foreground);
+}
+
+.sh-ui-table__head {
+  height: var(--control-md);
+  padding: 0 var(--space-3);
+  text-align: start;
+  font-weight: var(--weight-medium);
+  color: var(--foreground-muted);
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+.sh-ui-table__cell {
+  padding: var(--space-3);
+  vertical-align: middle;
+}
+
+.sh-ui-table__row {
+  border-bottom: 1px solid var(--border);
+  transition: background-color var(--duration-fast) var(--ease-standard);
+}
+
+.sh-ui-table__body .sh-ui-table__row:hover {
+  background: var(--background-muted);
+}
+
+.sh-ui-table__row[data-state="selected"] {
+  background: var(--background-muted);
+}
+
+.sh-ui-table__footer {
+  border-top: 1px solid var(--border);
+  font-weight: var(--weight-medium);
+}
+
+.sh-ui-table__caption {
+  margin-top: var(--space-3);
+  color: var(--foreground-muted);
+  font-size: var(--text-xs);
+  text-align: start;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sh-ui-table__row {
+    transition: none;
+  }
+}

package/data/registry/react/components/table/styles.module.css

@@ -0,0 +1,57 @@
+.table__wrapper {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--text-sm);
+  color: var(--foreground);
+}
+
+.table__head {
+  height: var(--control-md);
+  padding: 0 var(--space-3);
+  text-align: start;
+  font-weight: var(--weight-medium);
+  color: var(--foreground-muted);
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+.table__cell {
+  padding: var(--space-3);
+  vertical-align: middle;
+}
+
+.table__row {
+  border-bottom: 1px solid var(--border);
+  transition: background-color var(--duration-fast) var(--ease-standard);
+}
+
+.table__body .table__row:hover {
+  background: var(--background-muted);
+}
+
+.table__row[data-state="selected"] {
+  background: var(--background-muted);
+}
+
+.table__footer {
+  border-top: 1px solid var(--border);
+  font-weight: var(--weight-medium);
+}
+
+.table__caption {
+  margin-top: var(--space-3);
+  color: var(--foreground-muted);
+  font-size: var(--text-xs);
+  text-align: start;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .table__row {
+    transition: none;
+  }
+}

package/data/registry/react/components/table/table.test.tsx

@@ -0,0 +1,59 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import * as React from "react";
+import {
+  Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption,
+} from "./index";
+
+function Sample(props: { selected?: boolean }) {
+  return (
+    <Table>
+      <TableCaption>사용자 목록</TableCaption>
+      <TableHeader>
+        <TableRow>
+          <TableHead>이름</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow data-state={props.selected ? "selected" : undefined}>
+          <TableCell>Kim</TableCell>
+        </TableRow>
+      </TableBody>
+      <TableFooter>
+        <TableRow><TableCell>합계 1</TableCell></TableRow>
+      </TableFooter>
+    </Table>
+  );
+}
+
+describe("Table primitives", () => {
+  it("네이티브 table 구조를 렌더", () => {
+    const { container } = render(<Sample />);
+    expect(container.querySelector("table")).toBeTruthy();
+    expect(container.querySelector("thead")).toBeTruthy();
+    expect(container.querySelector("tbody")).toBeTruthy();
+    expect(container.querySelector("tfoot")).toBeTruthy();
+    expect(container.querySelector("caption")).toBeTruthy();
+  });
+
+  it("TableHead 는 th[scope=col]", () => {
+    const { container } = render(<Sample />);
+    const th = container.querySelector("th");
+    expect(th?.getAttribute("scope")).toBe("col");
+  });
+
+  it("columnheader role 로 헤더 셀 접근", () => {
+    render(<Sample />);
+    expect(screen.getByRole("columnheader", { name: "이름" })).toBeTruthy();
+  });
+
+  it("data-state=selected 가 행에 반영", () => {
+    const { container } = render(<Sample selected />);
+    expect(container.querySelector('tbody tr[data-state="selected"]')).toBeTruthy();
+  });
+
+  it("className 이 병합된다", () => {
+    const { container } = render(<Table className="custom"><TableBody><TableRow><TableCell>x</TableCell></TableRow></TableBody></Table>);
+    expect(container.querySelector("table.custom")).toBeTruthy();
+  });
+});

package/data/registry/react/components/tree/flatten.test.ts

@@ -0,0 +1,72 @@
+import { describe, it, expect } from "vitest";
+import { flattenVisible, nextFocusable, prevFocusable, findByTypeahead } from "./flatten";
+import type { TreeNode } from "./types";
+
+const tree: TreeNode[] = [
+  { id: "a", label: "Apple", children: [
+    { id: "a1", label: "Ant" },
+    { id: "a2", label: "Arc", disabled: true },
+  ] },
+  { id: "b", label: "Banana" },
+];
+
+describe("flattenVisible", () => {
+  it("닫힌 트리는 최상위만, hasChildren 표기", () => {
+    const v = flattenVisible(tree, new Set());
+    expect(v.map((n) => n.id)).toEqual(["a", "b"]);
+    expect(v[0].hasChildren).toBe(true);
+    expect(v[0].expanded).toBe(false);
+    expect(v[1].hasChildren).toBe(false);
+  });
+
+  it("부모가 펼쳐지면 자식이 가시 + level/aria 메타", () => {
+    const v = flattenVisible(tree, new Set(["a"]));
+    expect(v.map((n) => n.id)).toEqual(["a", "a1", "a2", "b"]);
+    const a1 = v[1];
+    expect(a1.level).toBe(1);
+    expect(a1.parentId).toBe("a");
+    expect(a1.posInSet).toBe(1);
+    expect(a1.setSize).toBe(2);
+  });
+
+  it("부모가 닫혀 있으면 자식은 안 보임", () => {
+    const v = flattenVisible(tree, new Set(["a2-only-irrelevant"]));
+    expect(v.map((n) => n.id)).toEqual(["a", "b"]);
+  });
+});
+
+describe("nextFocusable / prevFocusable", () => {
+  const v = flattenVisible(tree, new Set(["a"]));
+  it("다음 포커스는 disabled 를 건너뛴다", () => {
+    expect(nextFocusable(v, "a1")?.id).toBe("b");
+  });
+  it("이전 포커스도 disabled 를 건너뛴다", () => {
+    expect(prevFocusable(v, "b")?.id).toBe("a1");
+  });
+  it("끝에서 다음은 null", () => {
+    expect(nextFocusable(v, "b")).toBeNull();
+  });
+  it("처음에서 이전은 null", () => {
+    expect(prevFocusable(v, "a")).toBeNull();
+  });
+  it("fromId 가 없으면 next/prev 모두 null", () => {
+    expect(nextFocusable(v, "nonexistent")).toBeNull();
+    expect(prevFocusable(v, "nonexistent")).toBeNull();
+  });
+});
+
+describe("findByTypeahead", () => {
+  const v = flattenVisible(tree, new Set(["a"]));
+  it("접두사로 다음 가시 노드를 찾는다 (대소문자 무시)", () => {
+    expect(findByTypeahead(v, "ban", "a")?.id).toBe("b");
+  });
+  it("매치 없으면 null", () => {
+    expect(findByTypeahead(v, "zz", "a")).toBeNull();
+  });
+  it("disabled 는 typeahead 대상에서 제외", () => {
+    expect(findByTypeahead(v, "arc", "a")).toBeNull();
+  });
+  it("빈 prefix 는 null", () => {
+    expect(findByTypeahead(v, "", "a")).toBeNull();
+  });
+});

package/data/registry/react/components/tree/flatten.ts

@@ -0,0 +1,69 @@
+import type { TreeNode, VisibleNode } from "./types";
+
+/**
+ * 노드 label 을 typeahead 비교용 문자열로 변환한다.
+ * label 이 string 이면 그 값을, JSX 등 비문자열 ReactNode 면 "" 를 반환한다
+ * (비문자열 라벨 노드는 typeahead 검색 대상에서 제외됨).
+ */
+function labelText(node: TreeNode): string {
+  return typeof node.label === "string" ? node.label : "";
+}
+
+export function flattenVisible(nodes: TreeNode[], expanded: Set<string>): VisibleNode[] {
+  const out: VisibleNode[] = [];
+  const walk = (siblings: TreeNode[], level: number, parentId: string | null) => {
+    siblings.forEach((node, i) => {
+      const hasChildren = !!node.children && node.children.length > 0;
+      const isExpanded = hasChildren && expanded.has(node.id);
+      out.push({
+        id: node.id,
+        node,
+        level,
+        parentId,
+        hasChildren,
+        expanded: isExpanded,
+        disabled: !!node.disabled,
+        setSize: siblings.length,
+        posInSet: i + 1,
+      });
+      if (isExpanded) walk(node.children!, level + 1, node.id);
+    });
+  };
+  walk(nodes, 0, null);
+  return out;
+}
+
+export function nextFocusable(visible: VisibleNode[], fromId: string): VisibleNode | null {
+  const i = visible.findIndex((n) => n.id === fromId);
+  if (i === -1) return null;
+  for (let j = i + 1; j < visible.length; j++) {
+    if (!visible[j].disabled) return visible[j];
+  }
+  return null;
+}
+
+export function prevFocusable(visible: VisibleNode[], fromId: string): VisibleNode | null {
+  const i = visible.findIndex((n) => n.id === fromId);
+  if (i === -1) return null;
+  for (let j = i - 1; j >= 0; j--) {
+    if (!visible[j].disabled) return visible[j];
+  }
+  return null;
+}
+
+export function findByTypeahead(
+  visible: VisibleNode[],
+  prefix: string,
+  fromId: string,
+): VisibleNode | null {
+  const p = prefix.toLowerCase();
+  if (!p) return null;
+  const start = visible.findIndex((n) => n.id === fromId);
+  const n = visible.length;
+  for (let k = 1; k <= n; k++) {
+    const cand = visible[(start + k) % n];
+    if (cand.disabled) continue;
+    if (labelText(cand.node).toLowerCase().startsWith(p)) return cand;
+  }
+  return null;
+}