@g4rcez/components 3.0.0-0 → 3.0.1

package/dist/hooks/use-form.js

@@ -1,549 +0,0 @@
-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 { ZodNumber } from "zod";
-import { formReset, } from "../components";
-import { path } from "../lib/fns";
-/**
- * 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) => {
-    if (typeof value !== "string") {
-        try {
-            value = JSON.stringify(value);
-        }
-        catch {
-            return false;
-        }
-    }
-    try {
-        JSON.parse(value);
-        return true;
-    }
-    catch {
-        return false;
-    }
-};
-const setHelper = (obj, path, value) => {
-    const lastIndex = path.length - 1;
-    for (let i = 0; i < path.length; i++) {
-        const key = path[i];
-        if (i === lastIndex) {
-            obj[key] = value;
-        }
-        else {
-            if (!(key in obj) || typeof obj[key] !== "object") {
-                const nextKey = path[i + 1];
-                obj[key] = isNaN(Number(nextKey)) ? {} : [];
-            }
-            obj = obj[key];
-        }
-    }
-};
-const convertPath = (path) => path.replace(/\[(\d+)]/g, ".$1").split(".");
-const setPath = (o, path, value) => {
-    const pathArr = Array.isArray(path) ? path.map(String) : convertPath(path);
-    const obj = structuredClone(o);
-    setHelper(obj, pathArr, value);
-    return obj;
-};
-const sort = (a, b) => a.localeCompare(b);
-const noop = {};
-const getDefaultValue = (inner) => {
-    const instanceName = inner._def.typeName;
-    if (instanceName === "ZodDefault")
-        return inner._def.defaultValue();
-    if (instanceName === "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) => {
-    const result = structuredClone(a);
-    for (const key in b) {
-        const bValue = b[key];
-        const aValue = a[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 ? 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(formData);
-    return parse(urlSearchParams.toString(), options);
-};
-export const getSchemaShape = (name, schema) => {
-    return convertPath(name).reduce((acc, el) => {
-        if (el === "")
-            return acc;
-        const shape = acc.shape?.[el] || acc;
-        return shape._def.typeName === "ZodArray" ? shape.element : shape;
-    }, schema);
-};
-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 defaultOptions = {
-    state: {},
-    loading: false,
-    useOnChange: false,
-};
-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 = defaultOptions) => {
-    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 = noop) => {
-        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: opts.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 = noop) => {
-        const validator = getSchemaShape(name, schema);
-        const onChange = (e) => {
-            const value = e.target.value;
-            setState((prev) => setPath(prev, name, value));
-            props?.onChange?.(e);
-        };
-        return {
-            ...props,
-            name,
-            id: name,
-            onChange,
-            form: formName,
-            loading: opts.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 = noop) => {
-        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: opts.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 = noop) => {
-        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: opts.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 = noop) => {
-        const validator = getSchemaShape(name, schema);
-        const onChangeOptions = (options) => {
-            setState((prev) => setPath(prev, name, options));
-        };
-        return {
-            ...props,
-            name,
-            id: name,
-            onChangeOptions,
-            form: formName,
-            loading: opts.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 = noop) => {
-        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: opts.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) => {
-                const name = getName(e.target);
-                if (!name)
-                    return false;
-                const current = e.target;
-                const value = getDataTarget(e.target) || (e.relatedTarget ? getValueByType(e.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) => path(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.js

@@ -1,18 +0,0 @@
-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.js

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

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

@@ -1,12 +0,0 @@
-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.js

@@ -1,10 +0,0 @@
-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.js

@@ -1,25 +0,0 @@
-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.js

@@ -1,7 +0,0 @@
-import { useEffect } from "react";
-export const useOnEvent = (event, func) => {
-    useEffect(() => {
-        window.addEventListener(event, func);
-        return () => window.removeEventListener(event, func);
-    }, [event]);
-};

package/dist/hooks/use-parent.js

@@ -1,21 +0,0 @@
-import { useEffect, useState } from "react";
-export const useParentHeight = (ref) => {
-    const [h, setH] = useState(0);
-    useEffect(() => {
-        const element = ref.current;
-        if (!element)
-            return;
-        const parent = element.parentElement;
-        if (!parent)
-            return;
-        const listener = () => {
-            setH(parent.clientHeight);
-        };
-        parent.addEventListener("resize", listener);
-        listener();
-        return () => {
-            parent.removeEventListener("resize", listener);
-        };
-    }, []);
-    return h;
-};

package/dist/hooks/use-preferences.js

@@ -1,23 +0,0 @@
-import { useCallback, useState } from "react";
-import { Is } from "sidekicker";
-import { LocalStorage } from "storage-manager-js";
-export const usePreferences = (key, defaultValue) => {
-    const [state, setState] = useState(() => {
-        const saved = LocalStorage.get(key);
-        if (saved)
-            return saved;
-        return defaultValue;
-    });
-    const setCallback = useCallback((params) => {
-        if (Is.function(params)) {
-            return setState((prev) => {
-                const result = params(prev);
-                LocalStorage.set(key, result);
-                return result;
-            });
-        }
-        LocalStorage.set(key, params);
-        return params;
-    }, [key]);
-    return [state, setCallback];
-};

package/dist/hooks/use-previous.js

@@ -1,8 +0,0 @@
-import { useEffect, useRef } from "react";
-export const usePrevious = (value) => {
-    const ref = useRef(undefined);
-    useEffect(() => {
-        ref.current = value;
-    }, [value]);
-    return ref.current;
-};