@weser/form 1.0.0

package/dist/useField.d.ts

@@ -0,0 +1,61 @@
+import { ChangeEvent } from 'react';
+import { ZodType } from 'zod';
+import { $ZodIssue } from 'zod/v4/core';
+import { type T_Field, type Options } from './types';
+export default function useField<T = string, C = ChangeEvent<HTMLInputElement>>(schema: ZodType, { name, value, disabled, touched, showValidationOn, parseEvent, formatValue, formatErrorMessage, _onInit, _onUpdate, _storedField, }?: Options<T, C>): {
+    valid: boolean;
+    update: (data: Partial<T_Field<T>>) => void;
+    reset: () => void;
+    validate: () => import("zod").ZodSafeParseResult<unknown>;
+    errorMessage: string | undefined;
+    inputProps: {
+        onFocus: () => void;
+        onBlur: () => void;
+        value: any;
+        disabled: boolean;
+        name: string | undefined;
+        'data-valid': boolean;
+        onChange: (e: C) => void;
+    } | {
+        onFocus: () => void;
+        onBlur?: undefined;
+        value: any;
+        disabled: boolean;
+        name: string | undefined;
+        'data-valid': boolean;
+        onChange: (e: C) => void;
+    };
+    props: {
+        onFocus: () => void;
+        onBlur: () => void;
+        value: any;
+        disabled: boolean;
+        name: string | undefined;
+        valid: boolean;
+        errorMessage: string | undefined;
+        onChange: (e: C) => void;
+    } | {
+        onFocus: () => void;
+        onBlur?: undefined;
+        value: any;
+        disabled: boolean;
+        name: string | undefined;
+        valid: boolean;
+        errorMessage: string | undefined;
+        onChange: (e: C) => void;
+    };
+    _initial: {
+        value: T;
+        disabled: boolean;
+        touched: boolean;
+        dirty: boolean;
+        valid: boolean;
+        errorMessage: string | undefined;
+    };
+    _applyError: (issue: $ZodIssue) => void;
+    value: T;
+    disabled: boolean;
+    touched: boolean;
+    dirty: boolean;
+};
+//# sourceMappingURL=useField.d.ts.map

package/dist/useField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useField.d.ts","sourceRoot":"","sources":["../src/useField.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAuB,MAAM,OAAO,CAAA;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AAC7B,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAEvC,OAAO,EAAE,KAAK,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,SAAS,CAAA;AAOpD,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,CAAC,GAAG,MAAM,EAAE,CAAC,GAAG,WAAW,CAAC,gBAAgB,CAAC,EAC5E,MAAM,EAAE,OAAO,EACf,EACE,IAAI,EACJ,KAAe,EACf,QAAgB,EAChB,OAAe,EACf,gBAA2B,EAC3B,UAAoC,EACpC,WAAmC,EACnC,kBAA8C,EAC9C,OAAO,EACP,SAAS,EACT,YAAY,GACb,GAAE,OAAO,CAAC,CAAC,EAAE,CAAC,CAAM;;mBA6BC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;;;;;;;;;;;sBA6CpB,CAAC;;;;;;;;sBAAD,CAAC;;;;;;;;;;sBAAD,CAAC;;;;;;;;;sBAAD,CAAC;;;;;;;;;;yBAyBM,SAAS;;;;;EAyCtC"}

package/dist/useField.js

@@ -0,0 +1,123 @@
+import { useEffect, useState } from 'react';
+import defaultFormatErrorMessage from './defaultFormatErrorMessage';
+const defaultParseEvent = (e) => e.target.value;
+const defaultFormatValue = (value) => value;
+export default function useField(schema, { name, value = '', disabled = false, touched = false, showValidationOn = 'submit', parseEvent = (defaultParseEvent), formatValue = (defaultFormatValue), formatErrorMessage = defaultFormatErrorMessage, _onInit, _onUpdate, _storedField, } = {}) {
+    function _validate(value) {
+        const { success, error } = schema.safeParse(value);
+        if (!success && error.issues.length > 0) {
+            return formatErrorMessage(error.issues[0], value, name);
+        }
+    }
+    const message = _validate(value);
+    const initialField = {
+        value,
+        disabled,
+        touched,
+        dirty: false,
+        valid: !message,
+        errorMessage: message,
+    };
+    const [field, setField] = useState(_storedField ?? initialField);
+    useEffect(() => {
+        if (_onInit && !_storedField) {
+            _onInit(field);
+        }
+    }, [_onInit, _storedField]);
+    function update(data) {
+        if (data.value !== undefined) {
+            const dirty = data.value !== initialField.value;
+            const errorMessage = _validate(data.value);
+            const _data = {
+                touched: showValidationOn === 'change' ? dirty : field.touched,
+                dirty,
+                ...data,
+                errorMessage,
+                valid: !errorMessage,
+            };
+            if (_onUpdate) {
+                _onUpdate(_data);
+            }
+            setField((field) => ({
+                ...field,
+                ..._data,
+            }));
+        }
+        else {
+            if (_onUpdate) {
+                _onUpdate(data);
+            }
+            setField((field) => ({
+                ...field,
+                ...data,
+            }));
+        }
+    }
+    function reset() {
+        if (_onUpdate) {
+            _onUpdate(initialField);
+        }
+        setField(initialField);
+    }
+    function validate() {
+        return schema.safeParse(field.value);
+    }
+    function onChange(e) {
+        update({ value: parseEvent(e) });
+    }
+    // Only show validation error when is touched
+    const valid = !field.touched ? true : !field.errorMessage;
+    // Only show errrorMessage and validation styles if the field is touched according to the config
+    const errorMessage = field.touched ? field.errorMessage : undefined;
+    const touch = () => update({ touched: true });
+    const untouch = () => update({ touched: false });
+    function getListeners() {
+        if (showValidationOn === 'blur') {
+            return {
+                onFocus: untouch,
+                onBlur: touch,
+            };
+        }
+        return {
+            onFocus: untouch,
+        };
+    }
+    function _applyError(issue) {
+        const errorMessage = formatErrorMessage(issue, field.value, name);
+        setField((field) => ({
+            ...field,
+            errorMessage,
+        }));
+    }
+    const inputValue = formatValue(field.value);
+    const inputProps = {
+        value: inputValue,
+        disabled: field.disabled,
+        name,
+        'data-valid': valid,
+        onChange,
+        ...getListeners(),
+    };
+    const props = {
+        value: inputValue,
+        disabled: field.disabled,
+        name,
+        valid,
+        errorMessage,
+        onChange,
+        ...getListeners(),
+    };
+    return {
+        ...field,
+        valid,
+        update,
+        reset,
+        validate,
+        errorMessage,
+        inputProps,
+        props,
+        _initial: initialField,
+        _applyError,
+    };
+}
+//# sourceMappingURL=useField.js.map

package/dist/useField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useField.js","sourceRoot":"","sources":["../src/useField.ts"],"names":[],"mappings":"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"}

package/dist/useFieldArray.d.ts

@@ -0,0 +1 @@
+export default function useFieldArray(): void;

package/dist/useFieldArray.js

@@ -0,0 +1,2 @@
+export default function useFieldArray() {
+}

package/dist/useFocusTrap.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+type Config = {
+    visible?: boolean;
+    autoFocus?: boolean;
+};
+export default function useFocusTrap(ref: RefObject<HTMLElement | null>, active: boolean, config?: Config): void;
+export {};

package/dist/useFocusTrap.js

@@ -0,0 +1,77 @@
+import { useEffect } from 'react';
+import useKeyDown from './useKeyDown.js';
+const focusableSelector = `:is(
+  a[href], 
+  area[href], 
+  input:not([disabled]), 
+  select:not([disabled]), 
+  textarea:not([disabled]), 
+  button:not([disabled]), 
+  [tabindex]:not([tabindex="-1"]), 
+  [contenteditable]
+)`;
+export default function useFocusTrap(ref, active, config = {}) {
+    const { visible, autoFocus = true } = config;
+    useKeyDown('Tab', (e) => {
+        const element = ref.current;
+        if (!active || !element) {
+            return;
+        }
+        const focusables = [
+            ...element.querySelectorAll(focusableSelector),
+        ].filter((el) => el.hasAttribute('tabindex')
+            ? el.getAttribute('tabindex') !== '-1'
+            : true);
+        const firstFocusable = focusables[0];
+        const lastFocusable = focusables[focusables.length - 1];
+        const activeElement = document.activeElement;
+        let nextElement;
+        if (activeElement && focusables.includes(activeElement)) {
+            const index = focusables.indexOf(activeElement);
+            if (e.shiftKey) {
+                if (index === 0) {
+                    nextElement = lastFocusable;
+                }
+            }
+            else {
+                if (index === focusables.length - 1) {
+                    nextElement = firstFocusable;
+                }
+            }
+        }
+        else {
+            if (e.shiftKey) {
+                nextElement = lastFocusable;
+            }
+            else {
+                nextElement = firstFocusable;
+            }
+        }
+        if (nextElement) {
+            ;
+            nextElement.focus();
+            e.preventDefault();
+        }
+    }, {
+        active,
+    });
+    useEffect(() => {
+        const element = ref.current;
+        if (!autoFocus || !visible || !element) {
+            return;
+        }
+        const autoFocusElement = element.querySelector('[data-autofocus="true"]' + focusableSelector);
+        if (autoFocusElement) {
+            // @ts-ignore
+            autoFocusElement.focus();
+            return;
+        }
+        const nodeList = element.querySelectorAll(focusableSelector);
+        const elements = Array.from(nodeList);
+        const focusableElements = elements.filter((element) => !element.hasAttribute('tabindex') ||
+            element.getAttribute('tabindex') === '0');
+        // 1. focus the first focusable
+        // @ts-ignore, TODO: fix typing
+        focusableElements[0]?.focus();
+    }, [visible, ref, autoFocus]);
+}

package/dist/useForm.d.ts

@@ -0,0 +1,74 @@
+import { FormEvent, ChangeEvent } from 'react';
+import { z, ZodObject, ZodRawShape } from 'zod';
+import { $ZodIssue } from 'zod/v4/core';
+import { type Options } from './types';
+import useField from './useField';
+type FieldsMap = Record<string, ReturnType<typeof useField<any, any>>>;
+type Config = {
+    formatErrorMessage?: (error: $ZodIssue, value: any, name?: string) => string;
+    _onUpdate?: (fields: FieldsMap) => void;
+};
+export default function useForm<S extends ZodRawShape>(schema: ZodObject<S>, { formatErrorMessage, _onUpdate }?: Config): {
+    isValidating: boolean;
+    useFormField: <T = string, C = ChangeEvent<HTMLInputElement>>(_name: keyof S, options?: Omit<Options<T, C>, "formatErrorMessage" | "name" | "_onInit" | "_onUpdate" | "_storedField">) => {
+        valid: boolean;
+        update: (data: Partial<import("./types").T_Field<T>>) => void;
+        reset: () => void;
+        validate: () => z.ZodSafeParseResult<unknown>;
+        errorMessage: string | undefined;
+        inputProps: {
+            onFocus: () => void;
+            onBlur: () => void;
+            value: any;
+            disabled: boolean;
+            name: string | undefined;
+            'data-valid': boolean;
+            onChange: (e: C) => void;
+        } | {
+            onFocus: () => void;
+            onBlur?: undefined;
+            value: any;
+            disabled: boolean;
+            name: string | undefined;
+            'data-valid': boolean;
+            onChange: (e: C) => void;
+        };
+        props: {
+            onFocus: () => void;
+            onBlur: () => void;
+            value: any;
+            disabled: boolean;
+            name: string | undefined;
+            valid: boolean;
+            errorMessage: string | undefined;
+            onChange: (e: C) => void;
+        } | {
+            onFocus: () => void;
+            onBlur?: undefined;
+            value: any;
+            disabled: boolean;
+            name: string | undefined;
+            valid: boolean;
+            errorMessage: string | undefined;
+            onChange: (e: C) => void;
+        };
+        _initial: {
+            value: T;
+            disabled: boolean;
+            touched: boolean;
+            dirty: boolean;
+            valid: boolean;
+            errorMessage: string | undefined;
+        };
+        _applyError: (issue: $ZodIssue) => void;
+        value: T;
+        disabled: boolean;
+        touched: boolean;
+        dirty: boolean;
+    };
+    handleSubmit: (onSubmit: (data: z.infer<typeof schema>) => void, onError?: (issues: Array<$ZodIssue>) => void) => (e: FormEvent<HTMLFormElement>) => Promise<void>;
+    checkDirty: () => boolean;
+    reset: () => void;
+};
+export {};
+//# sourceMappingURL=useForm.d.ts.map

package/dist/useForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useForm.d.ts","sourceRoot":"","sources":["../src/useForm.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,SAAS,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAChE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAY,WAAW,EAAW,MAAM,KAAK,CAAA;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAEvC,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,SAAS,CAAA;AAEtC,OAAO,QAAQ,MAAM,YAAY,CAAA;AAEjC,KAAK,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,OAAO,QAAQ,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,CAAA;AAEtE,KAAK,MAAM,GAAG;IACZ,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;IAC5E,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,KAAK,IAAI,CAAA;CACxC,CAAA;AACD,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,CAAC,SAAS,WAAW,EACnD,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,EACpB,EAAE,kBAA8C,EAAE,SAAS,EAAE,GAAE,MAAW;;mBAKpD,CAAC,WAAW,CAAC,yCAC1B,MAAM,CAAC,YACL,IAAI,CACX,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,EACb,oBAAoB,GAAG,MAAM,GAAG,SAAS,GAAG,WAAW,GAAG,cAAc,CACzE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6BA4DS,CAAC,IAAI,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,MAAM,CAAC,KAAK,IAAI,YACtC,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,KAAK,IAAI,MAE9B,GAAG,SAAS,CAAC,eAAe,CAAC;;;EA2C9C"}

package/dist/useForm.js

@@ -0,0 +1,102 @@
+import { useRef, useState } from 'react';
+import defaultFormatErrorMessage from './defaultFormatErrorMessage';
+import useField from './useField';
+export default function useForm(schema, { formatErrorMessage = defaultFormatErrorMessage, _onUpdate } = {}) {
+    const [isValidating, setIsValidating] = useState(false);
+    const fields = useRef({});
+    function useFormField(_name, options = {}) {
+        const name = String(_name);
+        const shape = schema.shape[_name];
+        const stored = fields.current[name];
+        const field = useField(shape, {
+            ...options,
+            name,
+            formatErrorMessage,
+            // internals
+            _storedField: stored,
+            _onInit: (data) => {
+                fields.current[name] = {
+                    ...field,
+                    ...data,
+                };
+            },
+            _onUpdate: (data) => {
+                fields.current[name] = {
+                    ...fields.current[name],
+                    ...data,
+                };
+                if (_onUpdate) {
+                    _onUpdate(fields.current);
+                }
+            },
+        });
+        return field;
+    }
+    function touchFields() {
+        for (const name in fields.current) {
+            fields.current[name].update({
+                touched: true,
+                // force revalidate
+                value: fields.current[name].value,
+            });
+        }
+    }
+    function reset() {
+        for (const name in fields.current) {
+            fields.current[name].reset();
+        }
+    }
+    function checkDirty() {
+        for (const name in fields.current) {
+            if (fields.current[name].dirty) {
+                return true;
+            }
+        }
+        return false;
+    }
+    function handleSubmit(onSubmit, onError) {
+        return async (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            touchFields();
+            const data = mapFieldsToData(fields.current);
+            setIsValidating(true);
+            const parsed = await schema.safeParseAsync(data);
+            setIsValidating(false);
+            if (parsed.success) {
+                onSubmit(parsed.data);
+            }
+            else {
+                if (parsed.error.issues.length > 0) {
+                    _applyErrors(parsed.error.issues);
+                }
+                if (onError) {
+                    onError(parsed.error.issues);
+                }
+            }
+        };
+    }
+    function _applyErrors(issues) {
+        for (const issue of issues) {
+            const field = fields.current[issue.path[0]];
+            if (field) {
+                field._applyError(issue);
+            }
+        }
+    }
+    return {
+        isValidating,
+        useFormField,
+        handleSubmit,
+        checkDirty,
+        reset,
+    };
+}
+function mapFieldsToData(fields) {
+    const obj = {};
+    for (const name in fields) {
+        obj[name] = fields[name].value;
+    }
+    return obj;
+}
+//# sourceMappingURL=useForm.js.map

package/dist/useForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useForm.js","sourceRoot":"","sources":["../src/useForm.ts"],"names":[],"mappings":"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"}

package/dist/useForm.jsx

@@ -0,0 +1,112 @@
+import { useRef, useState, } from 'react';
+import { createContext } from '@weser/context';
+import defaultFormatErrorMessage from './defaultFormatErrorMessage.js';
+import useField from './useField.js';
+export function createForm(schema) {
+    function _useForm() {
+        return useForm(schema);
+    }
+    const [useFormContext, FormProvider] = createContext(null);
+    return {
+        useForm: _useForm,
+        useFormContext,
+        FormProvider,
+    };
+}
+function mapFieldsToData(fields) {
+    const obj = {};
+    for (const name in fields) {
+        obj[name] = fields[name].value;
+    }
+    return obj;
+}
+export default function useForm(schema, formatErrorMessage = defaultFormatErrorMessage) {
+    const [isValidating, setIsValidating] = useState(false);
+    const fields = useRef({});
+    function useFormField(_name, options = {}) {
+        const name = String(_name);
+        const shape = schema.shape[_name];
+        const stored = fields.current[name];
+        const field = useField(shape, {
+            ...options,
+            name,
+            formatErrorMessage,
+            // internals
+            _storedField: stored,
+            _onInit: (data) => {
+                fields.current[name] = {
+                    ...field,
+                    ...data,
+                };
+            },
+            _onUpdate: (data) => {
+                fields.current[name] = {
+                    ...fields.current[name],
+                    ...data,
+                };
+            },
+        });
+        return field;
+    }
+    function touchFields() {
+        for (const name in fields.current) {
+            fields.current[name].update({
+                touched: true,
+                // force revalidate
+                value: fields.current[name].value,
+            });
+        }
+    }
+    function reset() {
+        for (const name in fields.current) {
+            fields.current[name].reset();
+        }
+    }
+    function checkDirty() {
+        for (const name in fields.current) {
+            if (fields.current[name].dirty) {
+                return true;
+            }
+        }
+        return false;
+    }
+    function handleSubmit(onSubmit, onError) {
+        return async (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            touchFields();
+            // TODO: abort if fields are invalid already
+            // collect validation for each field
+            const data = mapFieldsToData(fields.current);
+            setIsValidating(true);
+            const parsed = await schema.safeParseAsync(data);
+            setIsValidating(false);
+            if (parsed.success) {
+                onSubmit(parsed.data);
+            }
+            else {
+                if (parsed.error.issues.length > 0) {
+                    _applyErrors(parsed.error.issues);
+                }
+                if (onError) {
+                    onError(parsed.error);
+                }
+            }
+        };
+    }
+    function _applyErrors(issues) {
+        for (const issue of issues) {
+            const field = fields.current[issue.path[0]];
+            if (field) {
+                field._applyError(issue);
+            }
+        }
+    }
+    return {
+        useFormField,
+        handleSubmit,
+        checkDirty,
+        isValidating,
+        reset,
+    };
+}

package/dist/useKeyDown.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+type Options = {
+    target?: RefObject<HTMLElement>;
+    active?: boolean;
+};
+export default function useKeyDown(keyCode: string | Array<string>, callback: (e: KeyboardEvent) => void, options?: Options): void;
+export {};

package/dist/useKeyDown.js

@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+export default function useKeyDown(keyCode, callback, options = {}) {
+    const { active = true, target } = options;
+    const keyCodes = [].concat(keyCode);
+    useEffect(() => {
+        if (!active || target === null || target?.current === null) {
+            return;
+        }
+        const hasRef = target && target.current;
+        const element = hasRef ? target.current : document;
+        if (element) {
+            const handleKeyDown = (e) => {
+                if (keyCodes.includes(e.code) &&
+                    (!hasRef || (hasRef && document.activeElement === element))) {
+                    callback(e);
+                }
+            };
+            element.addEventListener('keydown', handleKeyDown);
+            return () => element.removeEventListener('keydown', handleKeyDown);
+        }
+    }, [target, callback, active, keyCode]);
+}

package/dist/useRouteChange.d.ts

@@ -0,0 +1 @@
+export default function useRouteChange(onRouteChange: (path: string) => void, pathname?: string): void;

package/dist/useRouteChange.js

@@ -0,0 +1,19 @@
+import { useEffect } from 'react';
+export default function useRouteChange(onRouteChange, pathname) {
+    useEffect(() => {
+        if (pathname) {
+            onRouteChange(pathname);
+        }
+    }, [pathname]);
+    // track clicks on links with the current path
+    useEffect(() => {
+        const onClick = (e) => {
+            const target = e.target;
+            if (target.tagName === 'A' && target.href === pathname) {
+                onRouteChange(pathname);
+            }
+        };
+        window.addEventListener('click', onClick);
+        return () => window.removeEventListener('click', onClick);
+    }, []);
+}

package/dist/useScrollBlocking.d.ts

@@ -0,0 +1 @@
+export default function useScrollBlocking(active: boolean): void;

package/dist/useScrollBlocking.js

@@ -0,0 +1,28 @@
+import { useEffect } from 'react';
+let scrollTop;
+function blockScrolling(scrollElement) {
+    scrollTop = window.scrollY;
+    scrollElement.style.overflow = 'hidden';
+    scrollElement.style.position = 'fixed';
+    scrollElement.style.width = '100%';
+    scrollElement.style.top = -scrollTop + 'px';
+}
+function enableScrolling(scrollElement) {
+    scrollElement.style.removeProperty('position');
+    scrollElement.style.removeProperty('overflow');
+    scrollElement.style.removeProperty('top');
+    scrollElement.style.removeProperty('width');
+    window.scrollTo(0, scrollTop);
+}
+function toggleScrolling(isBlocked) {
+    const scrollElement = document.scrollingElement;
+    if (isBlocked) {
+        blockScrolling(scrollElement);
+    }
+    else {
+        enableScrolling(scrollElement);
+    }
+}
+export default function useScrollBlocking(active) {
+    useEffect(() => toggleScrolling(active), [active]);
+}