sh-ui-cli 0.15.0 → 0.21.1

package/data/registry/react/components/form/utils.test.ts

@@ -0,0 +1,44 @@
+import { describe, it, expect } from "vitest";
+import { getByPath, setByPath, unflatten, flatten, scopedPath } from "./utils";
+
+describe("getByPath", () => {
+  it("returns value at dot path", () => {
+    const obj = { a: { b: { c: 42 } } };
+    expect(getByPath(obj, "a.b.c")).toBe(42);
+  });
+  it("returns undefined for missing path", () => {
+    expect(getByPath({}, "a.b")).toBeUndefined();
+  });
+  it("returns root when path empty", () => {
+    const obj = { a: 1 };
+    expect(getByPath(obj, "")).toEqual(obj);
+  });
+});
+
+describe("setByPath", () => {
+  it("creates nested structure", () => {
+    expect(setByPath({}, "a.b.c", 1)).toEqual({ a: { b: { c: 1 } } });
+  });
+  it("preserves siblings", () => {
+    expect(setByPath({ a: { x: 1 } }, "a.b", 2)).toEqual({ a: { x: 1, b: 2 } });
+  });
+});
+
+describe("unflatten / flatten", () => {
+  it("roundtrips", () => {
+    const flat = { "a.b.c": 1, "a.d": 2, "e": 3 };
+    const nested = unflatten(flat);
+    expect(nested).toEqual({ a: { b: { c: 1 }, d: 2 }, e: 3 });
+    expect(flatten(nested)).toEqual(flat);
+  });
+});
+
+describe("scopedPath", () => {
+  it("joins non-empty parts with dot", () => {
+    expect(scopedPath("a", "b")).toBe("a.b");
+  });
+  it("skips empty parts", () => {
+    expect(scopedPath("", "b")).toBe("b");
+    expect(scopedPath("a", "")).toBe("a");
+  });
+});

package/data/registry/react/components/form/utils.ts

@@ -0,0 +1,49 @@
+export function getByPath(obj: unknown, path: string): unknown {
+  if (path === "") return obj;
+  const parts = path.split(".");
+  let cur: any = obj;
+  for (const p of parts) {
+    if (cur == null) return undefined;
+    cur = cur[p];
+  }
+  return cur;
+}
+
+export function setByPath<T extends Record<string, any>>(obj: T, path: string, value: unknown): T {
+  if (path === "") return value as T;
+  const parts = path.split(".");
+  const out: any = Array.isArray(obj) ? [...obj] : { ...obj };
+  let cur = out;
+  for (let i = 0; i < parts.length - 1; i++) {
+    const p = parts[i];
+    cur[p] = cur[p] != null && typeof cur[p] === "object" ? { ...cur[p] } : {};
+    cur = cur[p];
+  }
+  cur[parts[parts.length - 1]] = value;
+  return out;
+}
+
+export function flatten(obj: Record<string, unknown>, prefix = ""): Record<string, unknown> {
+  const out: Record<string, unknown> = {};
+  for (const [k, v] of Object.entries(obj)) {
+    const path = prefix ? `${prefix}.${k}` : k;
+    if (v && typeof v === "object" && !Array.isArray(v)) {
+      Object.assign(out, flatten(v as Record<string, unknown>, path));
+    } else {
+      out[path] = v;
+    }
+  }
+  return out;
+}
+
+export function unflatten(flat: Record<string, unknown>): Record<string, unknown> {
+  let result: Record<string, unknown> = {};
+  for (const [path, value] of Object.entries(flat)) {
+    result = setByPath(result, path, value) as Record<string, unknown>;
+  }
+  return result;
+}
+
+export function scopedPath(...parts: (string | undefined)[]): string {
+  return parts.filter((p) => p && p.length > 0).join(".");
+}

package/data/registry/react/components/form/validation.test.ts

@@ -0,0 +1,67 @@
+import { describe, it, expect } from "vitest";
+import { runFieldValidate, runSchema, readHTML5Validity } from "./validation";
+
+describe("runFieldValidate", () => {
+  it("returns undefined on pass", async () => {
+    const r = await runFieldValidate((v) => (v ? undefined : "required"), "ok", {});
+    expect(r).toBeUndefined();
+  });
+
+  it("returns error on fail", async () => {
+    const r = await runFieldValidate((v) => (v ? undefined : "required"), "", {});
+    expect(r).toEqual({ message: "required", source: "validate", type: "custom" });
+  });
+
+  it("supports object form", async () => {
+    const r = await runFieldValidate({ fn: (v) => (v === "x" ? undefined : "bad"), debounce: 100 }, "x", {});
+    expect(r).toBeUndefined();
+  });
+
+  it("supports async fn", async () => {
+    const r = await runFieldValidate(async (v) => (v === "ok" ? undefined : "no"), "ok", {});
+    expect(r).toBeUndefined();
+  });
+});
+
+describe("runSchema", () => {
+  it("maps Standard Schema issues to path-keyed errors", async () => {
+    const schema = {
+      "~standard": {
+        version: 1 as const,
+        vendor: "test",
+        validate: (v: any) => ({
+          issues: [{ path: ["profile", "name"], message: "required" }],
+        }),
+      },
+    };
+    const errors = await runSchema(schema, { profile: { name: "" } }, "schema");
+    expect(errors["profile.name"]).toEqual({ message: "required", source: "schema" });
+  });
+
+  it("returns empty object when schema passes", async () => {
+    const schema = {
+      "~standard": {
+        version: 1 as const,
+        vendor: "test",
+        validate: (v: any) => ({ value: v }),
+      },
+    };
+    const errors = await runSchema(schema, { x: 1 }, "schema");
+    expect(errors).toEqual({});
+  });
+});
+
+describe("readHTML5Validity", () => {
+  it("returns undefined for empty validity", () => {
+    const el = document.createElement("input");
+    expect(readHTML5Validity(el)).toBeUndefined();
+  });
+
+  it("returns first ValidityState flag as type", () => {
+    const el = document.createElement("input");
+    el.required = true;
+    const err = readHTML5Validity(el);
+    expect(err?.source).toBe("html5");
+    expect(err?.type).toBe("valueMissing");
+  });
+});

package/data/registry/react/components/form/validation.ts

@@ -0,0 +1,64 @@
+import type { FieldError, FieldValidate, StandardSchemaV1, ErrorSource } from "./types";
+
+export async function runFieldValidate(
+  validate: FieldValidate | undefined,
+  value: unknown,
+  allValues: unknown
+): Promise<FieldError | undefined> {
+  if (!validate) return undefined;
+  const fn = typeof validate === "function" ? validate : validate.fn;
+  const message = await fn(value, allValues);
+  if (!message) return undefined;
+  return { message, source: "validate", type: "custom" };
+}
+
+export async function runSchema(
+  schema: StandardSchemaV1,
+  values: unknown,
+  source: ErrorSource = "schema"
+): Promise<Record<string, FieldError>> {
+  const result = await schema["~standard"].validate(values);
+  if ("value" in result) return {};
+  const errors: Record<string, FieldError> = {};
+  for (const issue of result.issues) {
+    const path = (issue.path ?? [])
+      .map((seg) =>
+        typeof seg === "object" && seg !== null
+          ? String((seg as { key: PropertyKey }).key)
+          : String(seg)
+      )
+      .join(".");
+    if (!errors[path]) {
+      errors[path] = { message: issue.message, source };
+    }
+  }
+  return errors;
+}
+
+const HTML5_KEYS = [
+  "valueMissing",
+  "typeMismatch",
+  "patternMismatch",
+  "tooLong",
+  "tooShort",
+  "rangeUnderflow",
+  "rangeOverflow",
+  "stepMismatch",
+  "badInput",
+] as const;
+
+export function readHTML5Validity(
+  el: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
+): FieldError | undefined {
+  if (!el.validity || el.validity.valid) return undefined;
+  for (const k of HTML5_KEYS) {
+    if ((el.validity as any)[k]) {
+      return {
+        message: el.validationMessage || k,
+        type: k,
+        source: "html5",
+      };
+    }
+  }
+  return undefined;
+}

package/data/registry/react/components/form-rhf/README.md

@@ -0,0 +1,27 @@
+# form-rhf
+
+React Hook Form 인스턴스를 sh-ui Form 에 연결하는 어댑터.
+
+## Install
+
+```bash
+npm i react-hook-form
+sh-ui add form-rhf
+```
+
+## 사용
+
+```tsx
+import { useForm } from "react-hook-form";
+import { adaptReactHookForm } from "@/components/ui/form-rhf";
+import { Form } from "@/components/ui/form";
+
+const rhf = useForm({ defaultValues, mode: "onBlur" });
+const form = adaptReactHookForm(rhf);
+
+<Form form={form}>
+  <Form.Field name="email">...</Form.Field>
+</Form>
+```
+
+어댑터 모드에선 sh-ui 의 `validateOn` / `schema` prop 은 무시된다. 검증 규칙은 RHF 쪽 `resolver`/`register` 옵션에 둔다.

package/data/registry/react/components/form-rhf/index.tsx

@@ -0,0 +1,289 @@
+import type { UseFormReturn, FieldValues } from "react-hook-form";
+import type {
+  FormStore,
+  FormStoreState,
+  FieldError,
+  FieldConfig,
+  StandardSchemaV1,
+  FormConfig,
+} from "../form/types";
+import { flatten, getByPath } from "../form/utils";
+import { runFieldValidate } from "../form/validation";
+
+interface AdapterMeta {
+  fieldsByStep: Map<string, Set<string>>;
+  fieldsBySection: Map<string, Set<string>>;
+  fieldValidators: Map<string, FieldConfig>;
+  sectionSchemas: Map<string, StandardSchemaV1>;
+  activeStepId: string | null;
+  revalidateOnChange: Set<string>;
+  validatingFields: Set<string>;
+}
+
+/** 마지막으로 계산된 스냅샷 캐시. React useSyncExternalStore 가 Object.is 비교를 사용하므로 동일 상태면 같은 레퍼런스를 반환해야 한다. */
+interface SnapshotCache {
+  snapshot: FormStoreState | null;
+  /** 캐시 무효화를 위한 간단한 version 카운터 */
+  version: number;
+  /** 마지막으로 스냅샷을 생성한 version */
+  snapshotVersion: number;
+}
+
+export interface AdapterConfig<T> {
+  onSubmit?: (
+    values: T,
+    helpers: { reset: () => void; setError: (path: string, message: string) => void }
+  ) => void | Promise<void>;
+}
+
+/**
+ * React Hook Form 인스턴스를 sh-ui FormStore 인터페이스로 감쌉니다.
+ *
+ * - RHF 가 state owner(values, errors, touched, isSubmitting)로 동작
+ * - sh-ui 메타데이터(fieldsByStep, sectionSchemas 등)는 어댑터 내부에서 관리
+ * - validateField: sh-ui runFieldValidate → rhf.setError / rhf.trigger 순으로 실행
+ */
+export function adaptReactHookForm<T extends FieldValues>(
+  rhf: UseFormReturn<T>,
+  config: AdapterConfig<T> = {}
+): FormStore<T> {
+  const meta: AdapterMeta = {
+    fieldsByStep: new Map(),
+    fieldsBySection: new Map(),
+    fieldValidators: new Map(),
+    sectionSchemas: new Map(),
+    activeStepId: null,
+    revalidateOnChange: new Set(),
+    validatingFields: new Set(),
+  };
+
+  const cache: SnapshotCache = { snapshot: null, version: 0, snapshotVersion: -1 };
+
+  const listeners = new Set<() => void>();
+  const notify = () => {
+    cache.version++;
+    listeners.forEach((l) => l());
+  };
+
+  // RHF 7.50+ subscribe API
+  let unsubRhf: (() => void) | undefined;
+
+  const startRhfSubscription = () => {
+    if (typeof (rhf as any).subscribe === "function") {
+      try {
+        unsubRhf = (rhf as any).subscribe({
+          formState: { values: true, errors: true, isSubmitting: true, touchedFields: true },
+          callback: () => notify(),
+        });
+      } catch {
+        // 구버전 RHF: subscribe 미지원 — 무시
+      }
+    }
+  };
+
+  // 첫 subscriber 등록 시 RHF 구독 시작
+  let rhfSubscribed = false;
+
+  const store: FormStore<T> = {
+    subscribe(listener) {
+      listeners.add(listener);
+      if (!rhfSubscribed) {
+        rhfSubscribed = true;
+        startRhfSubscription();
+      }
+      return () => {
+        listeners.delete(listener);
+        if (listeners.size === 0) {
+          rhfSubscribed = false;
+          try {
+            unsubRhf?.();
+          } catch {}
+          unsubRhf = undefined;
+        }
+      };
+    },
+
+    getState(): FormStoreState {
+      // 동일 version이면 캐시 반환 — useSyncExternalStore Object.is 비교 통과
+      if (cache.snapshot !== null && cache.snapshotVersion === cache.version) {
+        return cache.snapshot;
+      }
+
+      const fs = rhf.formState;
+      const rawValues = rhf.getValues();
+      const values = flatten(rawValues as Record<string, unknown>);
+
+      const errors: Record<string, FieldError | undefined> = {};
+      const collectErrors = (errs: Record<string, any>, prefix = "") => {
+        for (const [key, e] of Object.entries(errs)) {
+          const path = prefix ? `${prefix}.${key}` : key;
+          if (e && typeof e === "object") {
+            if (typeof e.message === "string") {
+              errors[path] = { message: e.message, source: "validate" };
+            } else {
+              // nested errors
+              collectErrors(e, path);
+            }
+          }
+        }
+      };
+      collectErrors(fs.errors as Record<string, any>);
+
+      const snapshot: FormStoreState = {
+        values,
+        errors,
+        touched: { ...(fs.touchedFields as any) },
+        submitting: fs.isSubmitting,
+        submitCount: fs.submitCount,
+        activeStepId: meta.activeStepId,
+        fieldsByStep: meta.fieldsByStep,
+        fieldsBySection: meta.fieldsBySection,
+        fieldValidators: meta.fieldValidators,
+        sectionSchemas: meta.sectionSchemas,
+        validatingFields: meta.validatingFields,
+        revalidateOnChange: meta.revalidateOnChange,
+      };
+
+      cache.snapshot = snapshot;
+      cache.snapshotVersion = cache.version;
+      return snapshot;
+    },
+
+    getFieldState(path) {
+      const state = store.getState();
+      const err = state.errors[path];
+      return {
+        value: state.values[path],
+        error: err,
+        errors: err ? [err] : [],
+        touched: !!state.touched[path],
+        isValidating: rhf.formState.isValidating,
+        hasError: !!err,
+      };
+    },
+
+    setFieldValue(path, value) {
+      rhf.setValue(path as any, value as any, { shouldDirty: true });
+    },
+
+    setFieldTouched(path, touched) {
+      if (touched) {
+        void rhf.trigger(path as any);
+      }
+    },
+
+    registerField(path, cfg) {
+      meta.fieldValidators.set(path, cfg);
+      if (cfg.stepId) {
+        const s = meta.fieldsByStep.get(cfg.stepId) ?? new Set<string>();
+        s.add(path);
+        meta.fieldsByStep.set(cfg.stepId, s);
+      }
+      if (cfg.sectionPath) {
+        const s = meta.fieldsBySection.get(cfg.sectionPath) ?? new Set<string>();
+        s.add(path);
+        meta.fieldsBySection.set(cfg.sectionPath, s);
+      }
+      rhf.register(path as any);
+      notify();
+      return () => {
+        meta.fieldValidators.delete(path);
+        if (cfg.stepId) meta.fieldsByStep.get(cfg.stepId)?.delete(path);
+        if (cfg.sectionPath) meta.fieldsBySection.get(cfg.sectionPath)?.delete(path);
+        notify();
+      };
+    },
+
+    registerStep(stepId) {
+      if (!meta.fieldsByStep.has(stepId)) {
+        meta.fieldsByStep.set(stepId, new Set());
+      }
+      notify();
+      return () => {};
+    },
+
+    setActiveStep(stepId) {
+      meta.activeStepId = stepId;
+      notify();
+    },
+
+    registerSectionSchema(sectionPath, schema) {
+      meta.sectionSchemas.set(sectionPath, schema);
+      notify();
+      return () => {
+        meta.sectionSchemas.delete(sectionPath);
+        notify();
+      };
+    },
+
+    async validateField(path) {
+      const cfg = meta.fieldValidators.get(path);
+      const rawValues = rhf.getValues() as Record<string, unknown>;
+      const value = getByPath(rawValues, path);
+      const err = await runFieldValidate(cfg?.validate, value, rawValues);
+      if (err) {
+        rhf.setError(path as any, { type: "custom", message: err.message });
+        meta.revalidateOnChange.add(path);
+        notify();
+        return false;
+      }
+      rhf.clearErrors(path as any);
+      meta.revalidateOnChange.delete(path);
+      // RHF 자체 검증(resolver 등)도 함께 실행
+      const ok = await rhf.trigger(path as any);
+      notify();
+      return ok;
+    },
+
+    async validateStep(stepId) {
+      const fields = Array.from(meta.fieldsByStep.get(stepId) ?? []);
+      if (fields.length === 0) return true;
+      const results = await Promise.all(fields.map((f) => store.validateField(f)));
+      return results.every(Boolean);
+    },
+
+    async validateAll() {
+      const paths = Array.from(meta.fieldValidators.keys());
+      const results = await Promise.all(paths.map((p) => store.validateField(p)));
+      const rhfValid = await rhf.trigger();
+      return results.every(Boolean) && rhfValid;
+    },
+
+    getValues<S = T>(scope?: string): S {
+      const v = rhf.getValues() as unknown;
+      return (scope ? getByPath(v, scope) : v) as S;
+    },
+
+    async submit() {
+      let triggered = false;
+      await rhf.handleSubmit(async (values) => {
+        triggered = true;
+        await config?.onSubmit?.(values as T, {
+          reset: () => rhf.reset(),
+          setError: (p, m) => rhf.setError(p as any, { type: "server", message: m }),
+        });
+      })();
+      if (!triggered) {
+        notify();
+      }
+    },
+
+    reset(defaults) {
+      rhf.reset(defaults as any);
+      meta.revalidateOnChange.clear();
+    },
+
+    setError(path, message) {
+      rhf.setError(path as any, { type: "custom", message });
+      notify();
+    },
+
+    _config: {
+      validateOn: "blur",
+      scrollToFirstError: true,
+      focusFirstError: true,
+    } as FormConfig<T>,
+  };
+
+  return store;
+}

package/data/registry/react/components/form-rhf/rhf.test.tsx

@@ -0,0 +1,42 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import * as React from "react";
+import { useForm } from "react-hook-form";
+import { Form } from "../form";
+import { Field } from "../form/field";
+import { FormControl, FormError } from "../form/field";
+import { adaptReactHookForm } from "./index";
+
+function TestForm() {
+  const rhf = useForm({ defaultValues: { email: "" }, mode: "onBlur" });
+  const form = adaptReactHookForm(rhf);
+  return (
+    <Form form={form}>
+      <Field name="email" validate={(v) => (String(v).includes("@") ? undefined : "bad")}>
+        <FormControl><input data-testid="i" /></FormControl>
+        <FormError />
+      </Field>
+      <button type="submit">go</button>
+    </Form>
+  );
+}
+
+describe("adaptReactHookForm", () => {
+  it("value change via Form.Control updates RHF state", async () => {
+    const user = userEvent.setup();
+    render(<TestForm />);
+    const input = screen.getByTestId("i") as HTMLInputElement;
+    await user.type(input, "a@b.com");
+    expect(input.value).toBe("a@b.com");
+  });
+
+  it("validation error from sh-ui validate shows under field", async () => {
+    const user = userEvent.setup();
+    render(<TestForm />);
+    const input = screen.getByTestId("i") as HTMLInputElement;
+    await user.type(input, "nope");
+    input.blur();
+    await screen.findByText("bad");
+  });
+});

package/data/registry/react/components/form-tanstack/README.md

@@ -0,0 +1,27 @@
+# form-tanstack
+
+TanStack Form 인스턴스를 sh-ui Form 에 연결하는 어댑터.
+
+## Install
+
+```bash
+npm i @tanstack/react-form
+sh-ui add form-tanstack
+```
+
+## 사용
+
+```tsx
+import { useForm } from "@tanstack/react-form";
+import { adaptTanStackForm } from "@/components/ui/form-tanstack";
+import { Form } from "@/components/ui/form";
+
+const ts = useForm({ defaultValues, onSubmit: async () => {} });
+const form = adaptTanStackForm(ts);
+
+<Form form={form}>
+  <Form.Field name="email">...</Form.Field>
+</Form>
+```
+
+어댑터 모드에선 sh-ui 의 schema / validateOn prop 은 무시된다. 검증은 TanStack 의 validators 에 둔다.