sh-ui-cli 0.14.0 → 0.21.0

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

@@ -0,0 +1,206 @@
+import { describe, it, expect, vi } from "vitest";
+import { createFormStore } from "./store";
+
+describe("createFormStore — basic", () => {
+  it("starts with empty state + defaults merged", () => {
+    const store = createFormStore({ defaultValues: { a: 1, b: { c: 2 } } });
+    expect(store.getState().values).toEqual({ "a": 1, "b.c": 2 });
+  });
+
+  it("setFieldValue updates flat values and notifies", () => {
+    const store = createFormStore();
+    const listener = vi.fn();
+    store.subscribe(listener);
+    store.setFieldValue("name", "sh");
+    expect(store.getState().values["name"]).toBe("sh");
+    expect(listener).toHaveBeenCalled();
+  });
+
+  it("getFieldState returns value + touched + error snapshot", () => {
+    const store = createFormStore({ defaultValues: { name: "a" } });
+    const s = store.getFieldState("name");
+    expect(s.value).toBe("a");
+    expect(s.touched).toBe(false);
+    expect(s.hasError).toBe(false);
+  });
+
+  it("getValues returns nested", () => {
+    const store = createFormStore({ defaultValues: { profile: { name: "a" } } });
+    expect(store.getValues()).toEqual({ profile: { name: "a" } });
+    expect(store.getValues("profile")).toEqual({ name: "a" });
+  });
+});
+
+describe("registerField + validateField", () => {
+  it("registers validator and unregisters on dispose", () => {
+    const store = createFormStore();
+    const unregister = store.registerField("email", { validate: (v) => (v ? undefined : "required") });
+    expect(store.getState().fieldValidators.has("email")).toBe(true);
+    unregister();
+    expect(store.getState().fieldValidators.has("email")).toBe(false);
+  });
+
+  it("validateField sets error on fail", async () => {
+    const store = createFormStore();
+    store.registerField("email", { validate: (v) => (v ? undefined : "required") });
+    store.setFieldValue("email", "");
+    const ok = await store.validateField("email");
+    expect(ok).toBe(false);
+    expect(store.getState().errors["email"]?.message).toBe("required");
+  });
+
+  it("validateField clears error on pass", async () => {
+    const store = createFormStore();
+    store.registerField("email", { validate: (v) => (v ? undefined : "required") });
+    store.setFieldValue("email", "");
+    await store.validateField("email");
+    store.setFieldValue("email", "a@b.com");
+    const ok = await store.validateField("email");
+    expect(ok).toBe(true);
+    expect(store.getState().errors["email"]).toBeUndefined();
+  });
+});
+
+describe("steps", () => {
+  it("registerStep tracks step id, activates on setActiveStep", () => {
+    const store = createFormStore();
+    store.registerStep("a");
+    store.registerStep("b");
+    store.setActiveStep("a");
+    expect(store.getState().activeStepId).toBe("a");
+    store.setActiveStep("b");
+    expect(store.getState().activeStepId).toBe("b");
+  });
+
+  it("validateStep validates only fields registered with stepId", async () => {
+    const store = createFormStore();
+    store.registerField("email", {
+      stepId: "account",
+      validate: (v) => (v ? undefined : "required"),
+    });
+    store.registerField("name", {
+      stepId: "profile",
+      validate: (v) => (v ? undefined : "required"),
+    });
+    const ok = await store.validateStep("account");
+    expect(ok).toBe(false);
+    expect(store.getState().errors["email"]).toBeDefined();
+    expect(store.getState().errors["name"]).toBeUndefined();
+  });
+});
+
+describe("section schema & priority", () => {
+  const stdSchema = (path: string[], msg: string) => ({
+    "~standard": {
+      version: 1 as const,
+      vendor: "test",
+      validate: (v: any) => ({ issues: [{ path, message: msg }] }),
+    },
+  });
+
+  it("section schema produces error for fields under its path", async () => {
+    const store = createFormStore();
+    store.registerField("profile.name", { sectionPath: "profile" });
+    store.registerSectionSchema("profile", stdSchema(["name"], "section says bad"));
+    await store.validateField("profile.name");
+    expect(store.getState().errors["profile.name"]?.message).toBe("section says bad");
+  });
+
+  it("root schema validates at root, only relevant when no earlier failure", async () => {
+    const store = createFormStore({ schema: stdSchema(["email"], "root says bad") });
+    store.registerField("email", {});
+    await store.validateField("email");
+    expect(store.getState().errors["email"]?.message).toBe("root says bad");
+  });
+
+  it("section schema overrides root schema for same path (no merge)", async () => {
+    const store = createFormStore({ schema: stdSchema(["profile", "name"], "root") });
+    store.registerField("profile.name", { sectionPath: "profile" });
+    store.registerSectionSchema("profile", stdSchema(["name"], "section"));
+    await store.validateField("profile.name");
+    expect(store.getState().errors["profile.name"]?.message).toBe("section");
+  });
+
+  it("field validate runs before schema; schema skipped if field validate fails", async () => {
+    const store = createFormStore({ schema: stdSchema(["email"], "schema says bad") });
+    store.registerField("email", { validate: (v) => (v ? undefined : "field says required") });
+    await store.validateField("email");
+    expect(store.getState().errors["email"]?.message).toBe("field says required");
+  });
+});
+
+describe("submit / reset / setError", () => {
+  it("submit calls onSubmit with nested values when valid", async () => {
+    const onSubmit = vi.fn();
+    const store = createFormStore<{ email: string }>({
+      defaultValues: { email: "a@b.com" },
+      onSubmit,
+    });
+    store.registerField("email", { validate: (v) => (v ? undefined : "required") });
+    await store.submit();
+    expect(onSubmit).toHaveBeenCalledWith({ email: "a@b.com" }, expect.any(Object));
+  });
+
+  it("submit blocks onSubmit when validation fails, calls onInvalid", async () => {
+    const onSubmit = vi.fn();
+    const onInvalid = vi.fn();
+    const store = createFormStore({ onSubmit, onInvalid });
+    store.registerField("email", { validate: (v) => (v ? undefined : "required") });
+    store.setFieldValue("email", "");
+    await store.submit();
+    expect(onSubmit).not.toHaveBeenCalled();
+    expect(onInvalid).toHaveBeenCalled();
+  });
+
+  it("setError injects server error, next value change clears it", () => {
+    const store = createFormStore();
+    store.registerField("email", {});
+    store.setError("email", "taken");
+    expect(store.getFieldState("email").error?.message).toBe("taken");
+    store.setFieldValue("email", "new@x.com");
+    expect(store.getFieldState("email").error).toBeUndefined();
+  });
+
+  it("reset clears values, errors, touched, submitCount", () => {
+    const store = createFormStore({ defaultValues: { name: "a" } });
+    store.setFieldValue("name", "b");
+    store.setError("name", "err");
+    store.reset();
+    expect(store.getFieldState("name").value).toBe("a");
+    expect(store.getFieldState("name").error).toBeUndefined();
+  });
+});
+
+describe("async validate", () => {
+  it("sets isValidating during async validate", async () => {
+    const store = createFormStore();
+    store.registerField("email", {
+      validate: async (v) => {
+        await new Promise((r) => setTimeout(r, 10));
+        return v ? undefined : "bad";
+      },
+    });
+    store.setFieldValue("email", "");
+    const p = store.validateField("email");
+    expect(store.getState().validatingFields.has("email")).toBe(true);
+    await p;
+    expect(store.getState().validatingFields.has("email")).toBe(false);
+  });
+
+  it("stale resolution is discarded if value changed", async () => {
+    const store = createFormStore();
+    let resolve1: (v: string | undefined) => void;
+    store.registerField("email", {
+      validate: (v) =>
+        v === "slow"
+          ? new Promise<string | undefined>((r) => (resolve1 = r))
+          : undefined,
+    });
+    store.setFieldValue("email", "slow");
+    const p1 = store.validateField("email");
+    store.setFieldValue("email", "ok");
+    resolve1!("slow says bad");
+    await p1;
+    expect(store.getState().errors["email"]).toBeUndefined();
+  });
+});

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

@@ -0,0 +1,318 @@
+import type {
+  FormStore,
+  FormStoreState,
+  FormConfig,
+  FieldState,
+  FieldError,
+  FieldConfig,
+  StandardSchemaV1,
+} from "./types";
+import { flatten, unflatten, getByPath } from "./utils";
+import { runFieldValidate, runSchema } from "./validation";
+
+export interface CreateFormStoreOptions<T = unknown> {
+  defaultValues?: Partial<T>;
+  schema?: StandardSchemaV1<T>;
+  validateOn?: "submit" | "blur" | "change";
+  onSubmit?: FormConfig<T>["onSubmit"];
+  onInvalid?: FormConfig<T>["onInvalid"];
+  scrollToFirstError?: boolean;
+  focusFirstError?: boolean;
+}
+
+export function createFormStore<T = unknown>(
+  options: CreateFormStoreOptions<T> = {}
+): FormStore<T> {
+  const config: FormConfig<T> = {
+    schema: options.schema,
+    validateOn: options.validateOn ?? "blur",
+    onSubmit: options.onSubmit,
+    onInvalid: options.onInvalid,
+    scrollToFirstError: options.scrollToFirstError ?? true,
+    focusFirstError: options.focusFirstError ?? true,
+  };
+
+  const initialValues = options.defaultValues
+    ? flatten(options.defaultValues as Record<string, unknown>)
+    : {};
+
+  let state: FormStoreState = {
+    values: { ...initialValues },
+    errors: {},
+    touched: {},
+    submitting: false,
+    submitCount: 0,
+    activeStepId: null,
+    fieldsByStep: new Map(),
+    fieldsBySection: new Map(),
+    fieldValidators: new Map(),
+    sectionSchemas: new Map(),
+    validatingFields: new Set(),
+    revalidateOnChange: new Set(),
+  };
+
+  const listeners = new Set<() => void>();
+  const notify = () => listeners.forEach((l) => l());
+
+  const store: FormStore<T> = {
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+
+    getState: () => state,
+
+    getFieldState(path): FieldState {
+      const err = state.errors[path];
+      return {
+        value: state.values[path],
+        error: err,
+        errors: err ? [err] : [],
+        touched: !!state.touched[path],
+        isValidating: state.validatingFields.has(path),
+        hasError: !!err,
+      };
+    },
+
+    setFieldValue(path, value) {
+      const nextErrors = { ...state.errors };
+      delete nextErrors[path];
+      state = {
+        ...state,
+        values: { ...state.values, [path]: value },
+        errors: nextErrors,
+      };
+      notify();
+    },
+
+    setFieldTouched(path, touched) {
+      if (state.touched[path] === touched) return;
+      state = { ...state, touched: { ...state.touched, [path]: touched } };
+      notify();
+    },
+
+    registerField(path, cfg) {
+      state.fieldValidators.set(path, cfg);
+      if (cfg.stepId) {
+        const set = state.fieldsByStep.get(cfg.stepId) ?? new Set<string>();
+        set.add(path);
+        state.fieldsByStep.set(cfg.stepId, set);
+      }
+      if (cfg.sectionPath) {
+        const set = state.fieldsBySection.get(cfg.sectionPath) ?? new Set<string>();
+        set.add(path);
+        state.fieldsBySection.set(cfg.sectionPath, set);
+      }
+      notify();
+      return () => {
+        state.fieldValidators.delete(path);
+        if (cfg.stepId) state.fieldsByStep.get(cfg.stepId)?.delete(path);
+        if (cfg.sectionPath) state.fieldsBySection.get(cfg.sectionPath)?.delete(path);
+        notify();
+      };
+    },
+
+    registerStep(stepId) {
+      if (!state.fieldsByStep.has(stepId)) {
+        state.fieldsByStep.set(stepId, new Set());
+        notify();
+      }
+      return () => {};
+    },
+
+    setActiveStep(stepId) {
+      if (state.activeStepId === stepId) return;
+      state = { ...state, activeStepId: stepId };
+      notify();
+    },
+
+    registerSectionSchema(sectionPath, schema) {
+      state.sectionSchemas.set(sectionPath, schema);
+      notify();
+      return () => {
+        state.sectionSchemas.delete(sectionPath);
+        notify();
+      };
+    },
+
+    async validateField(path) {
+      const cfg = state.fieldValidators.get(path);
+      const valueAtStart = state.values[path];
+      const values = store.getValues() as Record<string, unknown>;
+
+      // Mark as validating
+      state = {
+        ...state,
+        validatingFields: new Set(state.validatingFields).add(path),
+      };
+      notify();
+
+      try {
+        // 1. field validate (highest priority)
+        const fieldErr = await runFieldValidate(cfg?.validate, valueAtStart, values);
+        // Stale check — if value changed while awaiting, bail
+        if (state.values[path] !== valueAtStart) return !state.errors[path];
+        if (fieldErr) {
+          state = {
+            ...state,
+            errors: { ...state.errors, [path]: fieldErr },
+            revalidateOnChange: new Set(state.revalidateOnChange).add(path),
+          };
+          notify();
+          return false;
+        }
+
+        // 2. section schema — path starts with sectionPath prefix
+        for (const [sectionPath, schema] of state.sectionSchemas) {
+          if (path === sectionPath || path.startsWith(sectionPath + ".")) {
+            const scopedValues = (getByPath(values, sectionPath) ?? {}) as Record<string, unknown>;
+            const errors = await runSchema(schema, scopedValues);
+            // Stale check
+            if (state.values[path] !== valueAtStart) return !state.errors[path];
+            const relativePath = path.slice(sectionPath.length + 1);
+            const err = errors[relativePath];
+            const nextErrors = { ...state.errors };
+            const nextRevalidate = new Set(state.revalidateOnChange);
+            if (err) {
+              nextErrors[path] = err;
+              nextRevalidate.add(path);
+            } else {
+              delete nextErrors[path];
+              nextRevalidate.delete(path);
+            }
+            state = { ...state, errors: nextErrors, revalidateOnChange: nextRevalidate };
+            notify();
+            return !err;
+          }
+        }
+
+        // 3. root schema (lowest priority)
+        if (store._config.schema) {
+          const errors = await runSchema(store._config.schema, values);
+          // Stale check
+          if (state.values[path] !== valueAtStart) return !state.errors[path];
+          const err = errors[path];
+          const nextErrors = { ...state.errors };
+          const nextRevalidate = new Set(state.revalidateOnChange);
+          if (err) {
+            nextErrors[path] = err;
+            nextRevalidate.add(path);
+          } else {
+            delete nextErrors[path];
+            nextRevalidate.delete(path);
+          }
+          state = { ...state, errors: nextErrors, revalidateOnChange: nextRevalidate };
+          notify();
+          return !err;
+        }
+
+        // 4. No validation — clear any existing error
+        const nextErrors = { ...state.errors };
+        delete nextErrors[path];
+        const nextRevalidate = new Set(state.revalidateOnChange);
+        nextRevalidate.delete(path);
+        state = { ...state, errors: nextErrors, revalidateOnChange: nextRevalidate };
+        notify();
+        return true;
+      } finally {
+        const nextSet = new Set(state.validatingFields);
+        nextSet.delete(path);
+        state = { ...state, validatingFields: nextSet };
+        notify();
+      }
+    },
+
+    async validateStep(stepId) {
+      const fields = Array.from(state.fieldsByStep.get(stepId) ?? []);
+      if (fields.length === 0) return true;
+      const results = await Promise.all(fields.map((f) => store.validateField(f)));
+      if (results.some((r) => !r)) {
+        const nextTouched = { ...state.touched };
+        for (const f of fields) nextTouched[f] = true;
+        state = { ...state, touched: nextTouched };
+        notify();
+      }
+      return results.every(Boolean);
+    },
+
+    async validateAll() {
+      const paths = Array.from(state.fieldValidators.keys());
+      const results = await Promise.all(paths.map((p) => store.validateField(p)));
+      if (store._config.schema) {
+        const values = store.getValues() as Record<string, unknown>;
+        const errors = await runSchema(store._config.schema, values);
+        const nextErrors = { ...state.errors };
+        for (const [path, err] of Object.entries(errors)) {
+          if (!nextErrors[path]) nextErrors[path] = err;
+        }
+        state = { ...state, errors: nextErrors };
+        notify();
+      }
+      return results.every(Boolean) && Object.values(state.errors).every((e) => !e);
+    },
+
+    getValues<S = T>(scope?: string): S {
+      const nested = unflatten(state.values);
+      return (scope ? getByPath(nested, scope) : nested) as S;
+    },
+
+    async submit() {
+      state = { ...state, submitting: true, submitCount: state.submitCount + 1 };
+      notify();
+
+      // Touch all registered fields
+      const allFields = Array.from(state.fieldValidators.keys());
+      const nextTouched = { ...state.touched };
+      for (const f of allFields) nextTouched[f] = true;
+      state = { ...state, touched: nextTouched };
+
+      const valid = await store.validateAll();
+      if (!valid) {
+        state = { ...state, submitting: false };
+        notify();
+        store._config.onInvalid?.(state.errors as Record<string, FieldError>);
+        return;
+      }
+
+      const values = store.getValues();
+      try {
+        await store._config.onSubmit?.(values as T, {
+          reset: (d) => store.reset(d),
+          setError: (p, m) => store.setError(p, m),
+        });
+      } finally {
+        state = { ...state, submitting: false };
+        notify();
+      }
+    },
+
+    reset(defaults) {
+      const src = defaults ?? options.defaultValues;
+      const flat = src ? flatten(src as Record<string, unknown>) : {};
+      state = {
+        ...state,
+        values: flat,
+        errors: {},
+        touched: {},
+        submitCount: 0,
+        submitting: false,
+        revalidateOnChange: new Set(),
+      };
+      notify();
+    },
+
+    setError(path, message) {
+      state = {
+        ...state,
+        errors: { ...state.errors, [path]: { message, source: "validate" } },
+      };
+      notify();
+    },
+
+    _config: config,
+  };
+
+  return store;
+}

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

@@ -0,0 +1,47 @@
+.sh-ui-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4, 1rem);
+}
+
+.sh-ui-form-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4, 1rem);
+}
+
+.sh-ui-form-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1, 0.25rem);
+}
+
+.sh-ui-form-field[data-disabled] {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+.sh-ui-form-error {
+  color: var(--color-danger, #dc2626);
+  font-size: var(--text-sm, 0.875rem);
+  margin: 0;
+  animation: sh-ui-form-error-in 150ms
+    var(--easing-out, cubic-bezier(0.16, 1, 0.3, 1));
+}
+
+@keyframes sh-ui-form-error-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sh-ui-form-error {
+    animation-duration: 0.01ms;
+  }
+}

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

@@ -0,0 +1,104 @@
+// Standard Schema v1 최소 타입 — https://standardschema.dev 스펙과 동일
+export interface StandardSchemaPathSegment {
+  readonly key: PropertyKey;
+}
+export type StandardSchemaPath = ReadonlyArray<PropertyKey | StandardSchemaPathSegment>;
+export interface StandardSchemaIssue {
+  readonly message: string;
+  readonly path?: StandardSchemaPath;
+}
+export interface StandardSchemaV1<TInput = unknown, TOutput = TInput> {
+  readonly "~standard": {
+    readonly version: 1;
+    readonly vendor: string;
+    readonly validate: (
+      value: unknown
+    ) =>
+      | { value: TOutput }
+      | { issues: ReadonlyArray<StandardSchemaIssue> }
+      | Promise<{ value: TOutput } | { issues: ReadonlyArray<StandardSchemaIssue> }>;
+  };
+}
+
+export type ErrorSource = "html5" | "validate" | "schema";
+
+export interface FieldError {
+  message: string;
+  type?: string;
+  source: ErrorSource;
+}
+
+export interface FieldState {
+  value: unknown;
+  error: FieldError | undefined;
+  errors: FieldError[];
+  touched: boolean;
+  isValidating: boolean;
+  hasError: boolean;
+}
+
+export type ValidateOn = "submit" | "blur" | "change";
+
+export type FieldValidate =
+  | ((value: unknown, values: unknown) => string | undefined | Promise<string | undefined>)
+  | {
+      fn: (value: unknown, values: unknown) => string | undefined | Promise<string | undefined>;
+      debounce?: number;
+    };
+
+export interface FieldConfig {
+  validate?: FieldValidate;
+  validateOn?: ValidateOn;
+  stepId?: string;
+  sectionPath?: string;
+  required?: boolean;
+}
+
+export interface SubmitHelpers<T> {
+  reset: (defaults?: Partial<T>) => void;
+  setError: (path: string, message: string) => void;
+}
+
+export interface FormStoreState {
+  values: Record<string, unknown>;
+  errors: Record<string, FieldError | undefined>;
+  touched: Record<string, boolean>;
+  submitting: boolean;
+  submitCount: number;
+  activeStepId: string | null;
+  fieldsByStep: Map<string, Set<string>>;
+  fieldsBySection: Map<string, Set<string>>;
+  fieldValidators: Map<string, FieldConfig>;
+  sectionSchemas: Map<string, StandardSchemaV1>;
+  validatingFields: Set<string>;
+  revalidateOnChange: Set<string>;
+}
+
+export interface FormConfig<T> {
+  schema?: StandardSchemaV1<T>;
+  validateOn: ValidateOn;
+  onSubmit?: (values: T, helpers: SubmitHelpers<T>) => void | Promise<void>;
+  onInvalid?: (errors: Record<string, FieldError>) => void;
+  scrollToFirstError: boolean;
+  focusFirstError: boolean;
+}
+
+export interface FormStore<T = unknown> {
+  subscribe(listener: () => void): () => void;
+  getState(): FormStoreState;
+  getFieldState(path: string): FieldState;
+  setFieldValue(path: string, value: unknown): void;
+  setFieldTouched(path: string, touched: boolean): void;
+  registerField(path: string, config: FieldConfig): () => void;
+  registerStep(stepId: string, onActivate?: (active: boolean) => void): () => void;
+  setActiveStep(stepId: string | null): void;
+  registerSectionSchema(sectionPath: string, schema: StandardSchemaV1): () => void;
+  validateField(path: string): Promise<boolean>;
+  validateStep(stepId: string): Promise<boolean>;
+  validateAll(): Promise<boolean>;
+  getValues<S = T>(scope?: string): S;
+  submit(): Promise<void>;
+  reset(defaults?: Partial<T>): void;
+  setError(path: string, message: string): void;
+  _config: FormConfig<T>;
+}

package/data/registry/react/components/form/use-sh-ui-form.ts

@@ -0,0 +1,15 @@
+"use client";
+
+import * as React from "react";
+import { createFormStore, type CreateFormStoreOptions } from "./store";
+import type { FormStore } from "./types";
+
+export function useShUiForm<T = unknown>(
+  options?: CreateFormStoreOptions<T>
+): FormStore<T> {
+  const storeRef = React.useRef<FormStore<T> | null>(null);
+  if (!storeRef.current) {
+    storeRef.current = createFormStore<T>(options);
+  }
+  return storeRef.current;
+}