@dotss/ui 1.3.1 → 1.5.0

package/hooks/useForm/useForm.d.ts

@@ -0,0 +1,48 @@
+import { DEFAULT_SCROLL_OPTIONS } from './useForm.utils';
+
+export type FieldErrors<K extends string> = Partial<Record<K, string>>;
+export type FormFieldHelper = {
+    severity: 'error';
+    message?: string;
+};
+export type FormContext<V, N extends string, M> = {
+    values: V;
+    meta?: M;
+    fieldRefs: Map<N, HTMLElement | null>;
+    error: FieldErrors<N>;
+};
+export type ValidateFn<V, N extends string, M> = (ctx: FormContext<V, N, M>) => FieldErrors<N>;
+export type OnSubmitFn<V, N extends string, M> = (ctx: FormContext<V, N, M>) => void | Promise<void>;
+export type SubmitFn<V, N extends string, M> = (options?: Partial<Record<'onError' | 'onSuccess' | 'onSettled', OnSubmitFn<V, N, M>>>) => () => Promise<void>;
+export interface UseFormProps<V, N extends string, M> {
+    fieldNames: readonly N[];
+    values: V;
+    validate: ValidateFn<V, N, M>;
+    meta?: M;
+    scrollOptions?: typeof DEFAULT_SCROLL_OPTIONS;
+    scrollOnError?: boolean;
+    focusOnError?: boolean;
+}
+export interface UseFormReturn<V, N extends string, M> {
+    /** 제출 여부 */
+    isSubmitted: boolean;
+    /** 에러 상태 */
+    errors: FieldErrors<N>;
+    /** 필드 등록 */
+    registerField: (name: N) => (element: HTMLElement | null) => void;
+    /** 에러 초기화 */
+    clearErrors: () => void;
+    /** 필드 에러 도움말 반환 */
+    getFieldHelper: (name: N) => FormFieldHelper | undefined;
+    /** 제출 함수 */
+    submit: SubmitFn<V, N, M>;
+    /** [imperative] 검증 후 errors 갱신 직접 호출 */
+    triggerValidate: (options?: {
+        callEffectOnError?: boolean;
+    }) => void;
+    /** [imperative] 필드 에러 설정 직접 호출 */
+    triggerSetFieldError: (name: N, message: string) => void;
+    /** [imperative] 에러 발생 시 스크롤·포커스 처리 직접 호출 */
+    triggerEffectOnError: (errors: FieldErrors<N>) => void;
+}
+export default function useForm<V, N extends string, M = unknown>({ fieldNames, values, validate, meta, scrollOptions, scrollOnError, focusOnError }: UseFormProps<V, N, M>): UseFormReturn<V, N, M>;

package/hooks/useForm/useForm.es.js

@@ -0,0 +1,98 @@
+import { useRef as C, useState as R, useCallback as n } from "react";
+import { DEFAULT_SCROLL_OPTIONS as T, hasError as _ } from "./useForm.utils.es.js";
+function H({
+  fieldNames: b,
+  values: f,
+  validate: E,
+  meta: i,
+  scrollOptions: m,
+  scrollOnError: d = !0,
+  focusOnError: o = !1
+}) {
+  const s = C(/* @__PURE__ */ new Map()), w = C(/* @__PURE__ */ new Map()), [a, g] = R({}), [k, F] = R(!1), V = d || o, h = n((e) => {
+    const r = w.current.get(e);
+    if (r)
+      return r;
+    const c = (t) => {
+      t ? s.current.set(e, t) : s.current.delete(e);
+    };
+    return w.current.set(e, c), c;
+  }, []), u = n(
+    (e) => {
+      requestAnimationFrame(() => {
+        for (const r of b) {
+          if (!(e == null ? void 0 : e[r])) continue;
+          const t = s.current.get(r);
+          if (d && t && t.scrollIntoView(m ?? T), o && t) {
+            const S = t.querySelector(
+              'input:not([type="hidden"]):not([disabled]), textarea:not([disabled])'
+            );
+            S == null || S.focus({
+              preventScroll: !0
+            });
+          }
+          break;
+        }
+      });
+    },
+    [b, m, d, o]
+  ), y = n(() => {
+    const e = {};
+    return E({ values: f, meta: i, fieldRefs: s.current, error: e });
+  }, [E, f, i]), l = n(
+    ({ callEffectOnError: e = !0 } = {}) => {
+      const r = y();
+      g(r);
+      const c = _(r);
+      return c && e && V && u(r), { isValid: !c, errors: r };
+    },
+    [y, V, u]
+  ), I = n(
+    ({ callEffectOnError: e = !0 } = {}) => {
+      l({ callEffectOnError: e });
+    },
+    [l]
+  ), L = n(() => {
+    g({});
+  }, []), q = n((e, r) => {
+    g((c) => ({ ...c, [e]: r }));
+  }, []), A = n(
+    (e) => {
+      u(e);
+    },
+    [u]
+  ), M = n(
+    (e) => {
+      const r = a == null ? void 0 : a[e];
+      if (r)
+        return { severity: "error", message: r };
+    },
+    [a]
+  ), O = n(
+    (e = {}) => async () => {
+      F(!0);
+      const { isValid: r, errors: c } = l({ callEffectOnError: !0 }), t = {
+        values: f,
+        meta: i,
+        fieldRefs: s.current,
+        error: c
+      };
+      r ? e != null && e.onSuccess && await e.onSuccess(t) : e != null && e.onError && await e.onError(t), e != null && e.onSettled && await e.onSettled(t);
+    },
+    [l, f, i, F]
+  );
+  return {
+    isSubmitted: k,
+    errors: a,
+    registerField: h,
+    clearErrors: L,
+    triggerValidate: I,
+    triggerSetFieldError: q,
+    triggerEffectOnError: A,
+    getFieldHelper: M,
+    submit: O
+  };
+}
+export {
+  H as default
+};

package/hooks/useForm/useForm.utils.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function t(e){return e?Object.values(e).some(r=>r!=null&&r!==""):!1}const n=Object.freeze({block:"center",inline:"center",behavior:"smooth"});exports.DEFAULT_SCROLL_OPTIONS=n;exports.hasError=t;

package/hooks/useForm/useForm.utils.d.ts

@@ -0,0 +1,4 @@
+import { FieldErrors } from './useForm';
+
+export declare function hasError<K extends string>(errors: FieldErrors<K> | null): boolean;
+export declare const DEFAULT_SCROLL_OPTIONS: ScrollIntoViewOptions;

package/hooks/useForm/useForm.utils.es.js

@@ -0,0 +1,12 @@
+function t(e) {
+  return e ? Object.values(e).some((n) => n != null && n !== "") : !1;
+}
+const r = Object.freeze({
+  block: "center",
+  inline: "center",
+  behavior: "smooth"
+});
+export {
+  r as DEFAULT_SCROLL_OPTIONS,
+  t as hasError
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dotss/ui",
-  "version": "1.3.1",
+  "version": "1.5.0",
   "description": "React UI components for Dotss",
   "type": "module",
   "main": "./index.cjs",