@g4rcez/components 4.1.1 → 4.1.3

package/dist/hooks/use-form.js

@@ -0,0 +1,563 @@
+"use client";
+import { isValid } from "date-fns";
+import { parse } from "qs";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { getPath, Is } from "sidekicker";
+import { LocalStorage } from "storage-manager-js";
+import { z, ZodNumber } from "zod";
+import { formReset, } from "../components";
+/**
+ * Validates if a value is valid JSON
+ * @param value - The value to validate
+ * @returns True if the value is valid JSON
+ * @internal
+ */
+const isValidJSON = (value) => {
+    let str;
+    if (typeof value === "string") {
+        str = value;
+    }
+    else {
+        try {
+            str = JSON.stringify(value);
+        }
+        catch {
+            return false;
+        }
+    }
+    try {
+        JSON.parse(str);
+        return true;
+    }
+    catch {
+        return false;
+    }
+};
+const convertPath = (path) => path.replace(/\[(\d+)]/g, ".$1").split(".");
+const shallowSetPath = (obj, keys, value) => {
+    if (keys.length === 0)
+        return value;
+    const [key, ...rest] = keys;
+    const current = obj !== null ? obj[key] : undefined;
+    const nextKey = rest[0];
+    const fallback = nextKey !== undefined && !Number.isNaN(Number(nextKey)) ? [] : {};
+    const updated = shallowSetPath(current ?? fallback, rest, value);
+    if (Array.isArray(obj)) {
+        const clone = obj.slice();
+        clone[Number(key)] = updated;
+        return clone;
+    }
+    return { ...(obj ?? {}), [key]: updated };
+};
+const setPath = (o, path, value) => {
+    const pathArr = Array.isArray(path) ? path.map(String) : convertPath(path);
+    return shallowSetPath(o, pathArr, value);
+};
+const sort = (a, b) => a.localeCompare(b);
+const getDefaultValue = (inner) => {
+    const instanceName = inner._def.typeName;
+    if (instanceName === "ZodDefault")
+        return inner._def.defaultValue();
+    if (inner instanceof z.ZodObject)
+        return getDefaults(inner);
+    if (instanceName === "ZodArray")
+        return [];
+    if ("innerType" in inner._def) {
+        const defaults = getDefaultValue(inner._def.innerType);
+        if (instanceName === "ZodArray")
+            return defaults ?? [];
+        return defaults;
+    }
+    return undefined;
+};
+const getDefaults = (schema) => Object.fromEntries(Object.entries(schema.shape).map(([key, value]) => {
+    return [key, getDefaultValue(value)];
+}));
+const deepMerge = (a, b) => {
+    // as unknown as Record: structuredClone returns T, but we mutate it dynamically; static T & U proven at return
+    const result = structuredClone(a);
+    for (const key in b) {
+        const bValue = b[key];
+        const aValue = result[key];
+        if (bValue !== undefined) {
+            if (typeof bValue === "object" &&
+                bValue !== null &&
+                !Array.isArray(bValue) &&
+                typeof aValue === "object" &&
+                aValue !== null &&
+                !Array.isArray(aValue)) {
+                result[key] = deepMerge(aValue, bValue);
+            }
+            else {
+                result[key] = bValue ?? aValue;
+            }
+        }
+    }
+    return result;
+};
+const options = {
+    sort,
+    allowDots: true,
+    charset: "utf-8",
+    parseArrays: true,
+    plainObjects: true,
+    charsetSentinel: true,
+    allowPrototypes: false,
+    depth: Number.MAX_SAFE_INTEGER,
+    arrayLimit: Number.MAX_SAFE_INTEGER,
+    parameterLimit: Number.MAX_SAFE_INTEGER,
+};
+/**
+ * Converts a form element to a JSON object
+ * @param form - The HTML form element to convert
+ * @returns A JSON object representing the form data
+ */
+export const formToJson = (form) => {
+    const formData = new FormData(form);
+    const urlSearchParams = new URLSearchParams(Array.from(formData.entries()).filter((entry) => typeof entry[1] === "string"));
+    return parse(urlSearchParams.toString(), options);
+};
+const schemaShapeCache = new WeakMap();
+export const getSchemaShape = (name, schema) => {
+    let nameMap = schemaShapeCache.get(schema);
+    if (!nameMap) {
+        nameMap = new Map();
+        schemaShapeCache.set(schema, nameMap);
+    }
+    const cached = nameMap.get(name);
+    if (cached !== undefined)
+        return cached;
+    const result = convertPath(name).reduce((acc, el) => {
+        if (el === "")
+            return acc;
+        const zodObj = acc;
+        const shape = zodObj.shape?.[el] || acc;
+        const result = shape._def.typeName === "ZodArray" ? shape.element : shape;
+        return result;
+    }, schema);
+    nameMap.set(name, result);
+    return result;
+};
+const getValueByType = (e) => {
+    if (e.dataset.value)
+        return e.dataset.value;
+    if (e.type === "checkbox")
+        return e.checked;
+    if (e.type === "number")
+        return e.valueAsNumber;
+    return e.value || e.getAttribute("value");
+};
+const getDataTarget = (e) => {
+    const target = e.dataset.target;
+    if (!target)
+        return getValueByType(e);
+    const element = document.querySelector(`[data-origin="${target}"]`);
+    if (!element)
+        return getValueByType(e);
+    return getValueByType(element);
+};
+const getName = (e) => e.dataset.target || e.name;
+/**
+ * Creates a form storage interceptor for persisting form state
+ * @param name - The unique name for the form storage
+ * @returns An interceptor object with get, set, and clear methods
+ */
+export const createFormStorage = (name) => {
+    const key = `@use-form/${name}`;
+    return {
+        get: () => {
+            const state = LocalStorage.get(key);
+            return isValidJSON(state) ? state : {};
+        },
+        clear: () => void LocalStorage.delete(key),
+        set: (s) => LocalStorage.set(key, s),
+    };
+};
+/**
+ * A comprehensive form management hook with Zod schema validation.
+ *
+ * Provides form state management, validation, and component binding for React forms.
+ * Supports automatic validation, error handling, and form persistence.
+ *
+ * @example
+ * ```tsx
+ * const schema = z.object({
+ *   name: z.string().min(1, "Name is required"),
+ *   email: z.string().email("Invalid email"),
+ *   age: z.number().min(18, "Must be 18 or older")
+ * });
+ *
+ * const MyForm = () => {
+ *   const form = useForm(schema, "user-form");
+ *
+ *   return (
+ *     <form {...form.controller()} onSubmit={form.onSubmit((e, { data }) => {
+ *       console.log("Form data:", data);
+ *     })}>
+ *       <Input {...form.input("name")} placeholder="Name" />
+ *       <Input {...form.input("email")} type="email" placeholder="Email" />
+ *       <Input {...form.input("age")} type="number" placeholder="Age" />
+ *       <Button type="submit">Submit</Button>
+ *     </form>
+ *   );
+ * };
+ * ```
+ *
+ * @template T - The Zod schema type
+ * @param schema - Zod schema for form validation
+ * @param formName - Unique identifier for the form
+ * @param opts - Optional configuration including initial state and interceptors
+ * @returns Form management object with input helpers and handlers
+ */
+export const useForm = (schema, formName, opts = {}) => {
+    const loading = opts.loading ?? false;
+    const [errors, setErrors] = useState(null);
+    const ref = useRef({});
+    const [state, setState] = useState(() => {
+        if (Is.function(opts?.state))
+            return opts.state();
+        return opts?.state ?? getDefaults(schema) ?? {};
+    });
+    const onInvalidField = useCallback((e) => {
+        const target = e.target;
+        const related = e.currentTarget;
+        const isOptional = target.dataset.optional === "true";
+        if (isOptional) {
+            return;
+        }
+        const path = getName(target);
+        const value = getDataTarget(target) || (related ? getValueByType(related) : "");
+        const partialSchema = getSchemaShape(path, schema);
+        target.setAttribute("data-initialized", "true");
+        if (partialSchema) {
+            const validation = partialSchema.safeParse(value);
+            const message = validation.success ? undefined : (validation.error.issues[0]?.message ?? "");
+            setErrors((prev) => setPath(prev ?? {}, path, message));
+        }
+    }, [schema]);
+    const onInvalid = useCallback((exec) => (event) => {
+        const form = event.currentTarget;
+        const validationErrors = Object.values(ref.current).reduce((acc, input) => {
+            const field = input.element;
+            const validation = input.schema.safeParse(getValueByType(field));
+            if (field.dataset.ignore === "ignore")
+                return acc;
+            if (validation.success)
+                return acc;
+            const errorMessage = validation.error.issues[0]?.message;
+            field.setAttribute("data-initialized", "true");
+            const name = field.dataset.name || field.name || "";
+            return setPath(acc, name, errorMessage);
+        }, {});
+        const e = Is.empty(validationErrors) ? null : validationErrors;
+        setErrors(e);
+        console.error(e);
+        exec?.({ form, errors: e || {} });
+    }, []);
+    const datepicker = (name, props) => {
+        const validator = getSchemaShape(name, schema);
+        const onChange = (date) => {
+            if (!isValid(date))
+                return;
+            setState((prev) => setPath(prev, name, date.toISOString()));
+            setErrors((prev) => setPath(prev, name, undefined));
+            const input = ref.current[name].element;
+            if (input) {
+                const origin = input.getAttribute("data-origin");
+                const inputShadow = document.querySelector(`input[data-target="${origin}"]`);
+                if (inputShadow)
+                    inputShadow.setCustomValidity("");
+            }
+            props?.onChange?.(date);
+        };
+        return {
+            ...props,
+            loading,
+            name,
+            id: name,
+            onChange,
+            form: formName,
+            date: Is.string(state[name]) ? new Date(state[name]) : state[name],
+            required: props?.required ?? !validator.isOptional(),
+            error: getPath(errors, name),
+            ref: (e) => {
+                if (e === null)
+                    return;
+                ref.current[name] = { element: e, schema: validator };
+            },
+        };
+    };
+    const select = (name, props) => {
+        const validator = getSchemaShape(name, schema);
+        const onChange = (e) => {
+            const value = e.target.value;
+            setState((prev) => setPath(prev, name, value));
+            // SelectProps/AutocompleteProps have divergent onChange signatures at this generic union boundary
+            props?.onChange?.(e);
+        };
+        return {
+            ...props,
+            name,
+            id: name,
+            onChange,
+            form: formName,
+            loading,
+            onInvalid: onInvalidField,
+            error: getPath(errors, name, undefined),
+            value: getPath(state, name, undefined) ?? "",
+            required: props?.required ?? !validator.isOptional(),
+            ref: (e) => e !== null
+                ? (ref.current[name] = {
+                    element: e,
+                    schema: validator,
+                })
+                : undefined,
+        };
+    };
+    const checkbox = (name, props) => {
+        const validator = getSchemaShape(name, schema);
+        const onChange = (e) => {
+            const value = e.target.checked;
+            setState((prev) => setPath(prev ?? {}, name, value));
+            props?.onChange?.(e);
+        };
+        return {
+            ...props,
+            name,
+            id: name,
+            onChange,
+            form: formName,
+            loading,
+            onInvalid: onInvalidField,
+            error: getPath(errors, name, undefined),
+            required: props?.required ?? !validator.isOptional(),
+            ref: (e) => e !== null
+                ? void (ref.current[name] = {
+                    element: e,
+                    schema: validator,
+                })
+                : undefined,
+        };
+    };
+    const textarea = (name, props) => {
+        const validator = getSchemaShape(name, schema);
+        const onChange = (e) => {
+            e.persist?.();
+            const value = e.target.value;
+            props?.onChange?.(e);
+            setState((prev) => setPath(prev, name, value));
+        };
+        return {
+            ...props,
+            loading,
+            name,
+            id: name,
+            onChange,
+            form: formName,
+            onInvalid: onInvalidField,
+            error: getPath(errors, name, undefined),
+            required: props?.required ?? !validator.isOptional(),
+            value: getPath(state, name, undefined) || props?.value || "",
+            type: Is.instance(validator, ZodNumber) ? "number" : (props?.type ?? "text"),
+            ref: (e) => e === null
+                ? undefined
+                : (ref.current[name] = {
+                    element: e,
+                    schema: validator,
+                }),
+        };
+    };
+    const multiselect = (name, props) => {
+        const validator = getSchemaShape(name, schema);
+        const onChangeOptions = (options) => {
+            setState((prev) => setPath(prev, name, options));
+        };
+        return {
+            ...props,
+            name,
+            id: name,
+            onChangeOptions,
+            form: formName,
+            loading,
+            onInvalid: onInvalidField,
+            error: getPath(errors, name, undefined),
+            required: props?.required ?? !validator.isOptional(),
+            value: getPath(state, name, undefined) || props?.value || [],
+            ref: (e) => e === null
+                ? undefined
+                : void (ref.current[name] = {
+                    element: e,
+                    schema: validator,
+                }),
+        };
+    };
+    const input = (name, props) => {
+        const validator = getSchemaShape(name, schema);
+        const isNumber = validator._def.typeName === "ZodNumber";
+        const onChange = (e) => {
+            e.persist?.();
+            const value = isNumber ? e.target.valueAsNumber : e.target.value;
+            props?.onChange?.(e);
+            setState((prev) => setPath(prev, name, value));
+        };
+        return {
+            ...props,
+            name,
+            id: name,
+            onChange,
+            form: formName,
+            loading,
+            onInvalid: onInvalidField,
+            error: getPath(errors, name, undefined),
+            required: props?.required ?? !validator.isOptional(),
+            type: isNumber ? "number" : (props?.type ?? "text"),
+            value: getPath(state, name, undefined) || props?.value || "",
+            ref: (e) => e === null
+                ? undefined
+                : void (ref.current[name] = {
+                    element: e,
+                    schema: validator,
+                }),
+        };
+    };
+    useEffect(() => {
+        const events = Object.values(ref.current).map((input) => {
+            const element = input.element.dataset.origin
+                ? document.querySelector(`[data-target="${input.element.name}"]`)
+                : input.element;
+            const validation = input.schema.safeParse(getValueByType(element));
+            const onBlurField = (e) => {
+                if (e.target === null)
+                    return false;
+                const name = getName(e.target);
+                if (!name)
+                    return false;
+                const current = e.target;
+                const relatedTarget = e.relatedTarget;
+                const value = getDataTarget(current) || (relatedTarget ? getValueByType(relatedTarget) : "");
+                const validation = input.schema.safeParse(value);
+                current.setAttribute("value", value);
+                if (validation.success) {
+                    if (element.setCustomValidity)
+                        element.setCustomValidity("");
+                    setErrors((prev) => {
+                        if (Is.null(prev))
+                            return null;
+                        const newErrors = setPath(prev, name, undefined);
+                        if (Is.empty(prev) || Is.nil(prev))
+                            return null;
+                        return Is.empty(newErrors) ? null : newErrors;
+                    });
+                    return false;
+                }
+                if (element.required) {
+                    const errorMessage = validation.error.issues[0]?.message || "";
+                    if (element.setCustomValidity)
+                        element.setCustomValidity(errorMessage);
+                    setErrors((prev) => {
+                        if (Is.null(prev))
+                            return null;
+                        const newErrors = setPath(prev, name, errorMessage || undefined);
+                        return Is.empty(newErrors) ? null : newErrors;
+                    });
+                }
+                return false;
+            };
+            const controller = new AbortController();
+            const trigger = element.getAttribute("data-trigger") || "blur";
+            element.addEventListener(trigger, onBlurField, { signal: controller.signal });
+            const hasInitialError = element.dataset.shadow ? false : element.required ? !validation.success : false;
+            return {
+                input,
+                hasInitialError,
+                unsubscribe: () => controller.abort(),
+            };
+        });
+        const hasErrors = events.some((x) => x.hasInitialError);
+        if (hasErrors)
+            setErrors((prev) => (prev === null ? {} : prev));
+        return () => events.forEach((item) => item.unsubscribe());
+    });
+    const onSubmit = (exec) => (event) => {
+        event.preventDefault();
+        const form = event.currentTarget;
+        let json = formToJson(form);
+        const elements = formName ? Array.from(document.querySelectorAll(`[form="${formName}"]`)) : Array.from(form.elements);
+        elements.forEach((field) => {
+            if (field.tagName === "SELECT") {
+                const input = field;
+                json = setPath(json, input.name, input.value);
+            }
+            if (field.tagName === "INPUT") {
+                const input = field;
+                const value = getDataTarget(input) || (input ? getValueByType(input) : "");
+                json = setPath(json, input.dataset.target || input.name, value);
+            }
+        });
+        const input = deepMerge(json, state);
+        const result = schema.safeParse(input);
+        const reset = () => {
+            formReset(form);
+            opts.interceptor?.clear();
+        };
+        if (result.success) {
+            const jsonString = JSON.stringify(result.data);
+            form.setAttribute("data-json", jsonString);
+            opts.interceptor?.clear();
+            return exec?.(event, {
+                form,
+                event,
+                reset,
+                setErrors,
+                errors: [],
+                success: true,
+                data: result.data,
+                json: result.data,
+            });
+        }
+        console.group("useForm error");
+        console.info(result);
+        console.info(result.error.issues);
+        console.error(result.error);
+        console.groupEnd();
+        form.reportValidity();
+        return exec?.(event, {
+            form,
+            json,
+            event,
+            reset,
+            setErrors,
+            data: json,
+            success: false,
+            errors: result.error.issues.map((x) => ({ message: x.message, path: x.path.map((x) => String(x)) })),
+        });
+    };
+    const get = (p) => getPath(state, p) || "";
+    const controller = (props) => ({
+        ...props,
+        id: formName,
+        name: formName,
+    });
+    useEffect(() => {
+        if (opts.interceptor)
+            opts.interceptor?.set(state);
+    }, [state]);
+    return {
+        get,
+        input,
+        state,
+        errors,
+        select,
+        checkbox,
+        onSubmit,
+        setState,
+        textarea,
+        onInvalid,
+        controller,
+        datepicker,
+        name: formName,
+        multiselect,
+        disabled: errors !== null,
+    };
+};
+export const getJsonForm = (form) => !form ? {} : JSON.parse(form.getAttribute("data-json"));

package/dist/hooks/use-hover.d.ts

@@ -0,0 +1,3 @@
+import { RefObject } from "react";
+export declare const useHover: (ref: RefObject<HTMLElement>) => boolean;
+//# sourceMappingURL=use-hover.d.ts.map

package/dist/hooks/use-hover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-hover.d.ts","sourceRoot":"","sources":["../../src/hooks/use-hover.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAEvD,eAAO,MAAM,QAAQ,GAAI,KAAK,SAAS,CAAC,WAAW,CAAC,YAiBnD,CAAC"}

package/dist/hooks/use-hover.js

@@ -0,0 +1,18 @@
+import { useEffect, useState } from "react";
+export const useHover = (ref) => {
+    const [hovered, setHovered] = useState(false);
+    const enter = () => setHovered(true);
+    const leave = () => setHovered(false);
+    useEffect(() => {
+        const el = ref.current; // cache external ref value for use in cleanup
+        if (el) {
+            el.addEventListener("mouseenter", enter);
+            el.addEventListener("mouseleave", leave);
+            return () => {
+                el.removeEventListener("mouseenter", enter);
+                el.removeEventListener("mouseleave", leave);
+            };
+        }
+    }, []);
+    return hovered;
+};

package/dist/hooks/use-input-id.d.ts

@@ -0,0 +1,4 @@
+type S = string | undefined;
+export declare const useInputId: (id: S, name: S) => string;
+export {};
+//# sourceMappingURL=use-input-id.d.ts.map

package/dist/hooks/use-input-id.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-input-id.d.ts","sourceRoot":"","sources":["../../src/hooks/use-input-id.ts"],"names":[],"mappings":"AAEA,KAAK,CAAC,GAAG,MAAM,GAAG,SAAS,CAAC;AAE5B,eAAO,MAAM,UAAU,GAAI,IAAI,CAAC,EAAE,MAAM,CAAC,WAGxC,CAAC"}

package/dist/hooks/use-input-id.js

@@ -0,0 +1,5 @@
+import { useId } from "react";
+export const useInputId = (id, name) => {
+    const same = useId();
+    return id || name || same;
+};

package/dist/hooks/use-is-coarse-device.d.ts

@@ -0,0 +1,2 @@
+export declare const useIsCoarseDevice: () => boolean;
+//# sourceMappingURL=use-is-coarse-device.d.ts.map

package/dist/hooks/use-is-coarse-device.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-is-coarse-device.d.ts","sourceRoot":"","sources":["../../src/hooks/use-is-coarse-device.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,iBAAiB,QAAO,OASpC,CAAC"}

package/dist/hooks/use-is-coarse-device.js

@@ -0,0 +1,12 @@
+import { useEffect, useRef, useState } from "react";
+import { isSsr } from "../lib/fns";
+const getCoarse = () => window.matchMedia("@media (pointer: coarse)");
+export const useIsCoarseDevice = () => {
+    const ref = useRef(isSsr() ? null : getCoarse());
+    const [isCoarse, setIsCoarse] = useState(isSsr() ? false : (ref.current?.matches ?? false));
+    useEffect(() => {
+        const coerse = ref.current === null ? getCoarse() : ref.current;
+        coerse.addEventListener("change", (e) => setIsCoarse(e.matches));
+    }, []);
+    return isCoarse;
+};

package/dist/hooks/use-locale.d.ts

@@ -0,0 +1,3 @@
+import type { Locales } from "the-mask-input";
+export declare const useLocale: (locale?: Locales) => Locales | undefined;
+//# sourceMappingURL=use-locale.d.ts.map

package/dist/hooks/use-locale.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-locale.d.ts","sourceRoot":"","sources":["../../src/hooks/use-locale.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAG9C,eAAO,MAAM,SAAS,GAAI,SAAS,OAAO,KAAG,OAAO,GAAG,SAKtD,CAAC"}

package/dist/hooks/use-locale.js

@@ -0,0 +1,10 @@
+import { useContext } from "react";
+import { Context } from "../config/context";
+export const useLocale = (locale) => {
+    const ctx = useContext(Context);
+    if (locale)
+        return locale;
+    if (!ctx)
+        return undefined;
+    return ctx.locale || locale;
+};

package/dist/hooks/use-media-query.d.ts

@@ -0,0 +1,2 @@
+export declare const useMediaQuery: (query: string, defaultValue?: boolean) => boolean;
+//# sourceMappingURL=use-media-query.d.ts.map

package/dist/hooks/use-media-query.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-media-query.d.ts","sourceRoot":"","sources":["../../src/hooks/use-media-query.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,aAAa,GAAI,OAAO,MAAM,EAAE,eAAc,OAAc,YAkBxE,CAAC"}

package/dist/hooks/use-media-query.js

@@ -0,0 +1,25 @@
+import { useLayoutEffect, useState } from "react";
+import { isSsr } from "../lib/fns";
+const getMatches = (query, defaultValue) => {
+    if (isSsr()) {
+        return defaultValue;
+    }
+    return window.matchMedia(query).matches;
+};
+export const useMediaQuery = (query, defaultValue = true) => {
+    const [matches, setMatches] = useState(defaultValue);
+    useLayoutEffect(() => {
+        const matchMedia = window.matchMedia(query);
+        const onChange = () => setMatches(getMatches(query, defaultValue));
+        onChange();
+        if (matchMedia.addListener) {
+            matchMedia.addListener(onChange);
+            return () => {
+                return matchMedia.removeListener ? matchMedia.removeListener(onChange) : undefined;
+            };
+        }
+        matchMedia.addEventListener("change", onChange);
+        return () => matchMedia.removeEventListener("change", onChange);
+    }, [query]);
+    return matches;
+};

package/dist/hooks/use-on-event.d.ts

@@ -0,0 +1,4 @@
+type Listener<K extends keyof WindowEventMap> = (event: WindowEventMap[K]) => void;
+export declare const useOnEvent: <K extends keyof WindowEventMap>(event: K, func: Listener<K>) => void;
+export {};
+//# sourceMappingURL=use-on-event.d.ts.map