@sqrzro/ui 4.0.0-alpha.0 → 4.0.0-alpha.2

package/dist/forms/components/FormError/index.d.ts

@@ -0,0 +1,9 @@
+import type { ClassNameProps } from '../../../styles/interfaces';
+import type { FormFieldClassNames } from '../FormField';
+interface FormErrorProps extends ClassNameProps<FormFieldClassNames> {
+    children: React.ReactNode;
+    id: string;
+    isAssistive?: boolean;
+}
+declare function FormError({ children, classNames, classNameProps, id, isAssistive, }: Readonly<FormErrorProps>): React.ReactElement;
+export default FormError;

package/dist/forms/components/FormError/index.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getClassNames } from '../../../styles/config';
+import tw from '../../../styles/tw';
+function FormError({ children, classNames, classNameProps, id, isAssistive, }) {
+    const componentClassNames = classNames || getClassNames('formField')?.(classNameProps);
+    return (_jsx("div", { className: tw(componentClassNames?.error, isAssistive ? 'sr-only' : null), id: `${id}_err`, children: children }));
+}
+export default FormError;

package/dist/forms/components/FormField/index.d.ts

@@ -0,0 +1,25 @@
+import type { InputEvent, InputProps } from '../../../forms/interfaces';
+import type { ClassNameProps, ErrorableClassName } from '../../../styles/interfaces';
+import { Action } from '../../../utility/interfaces';
+export interface FormFieldClassNames {
+    root: ErrorableClassName;
+    label: string;
+    details: string;
+    optional: string;
+    field: string;
+    error: string;
+}
+export interface FormFieldProps<T, V extends T> extends ClassNameProps<FormFieldClassNames>, InputProps<T, V> {
+    action?: Action | null;
+    details?: string | null;
+    error?: Record<string, string> | null;
+    hasAssistiveError?: boolean;
+    hasAssistiveLabel?: boolean;
+    isContentOnly?: boolean;
+    isOptional?: boolean;
+    label?: React.ReactNode;
+    onChange?: (event: InputEvent<T>) => void;
+    render: (props: InputProps<T>) => React.ReactElement | null;
+}
+declare function FormField<T, V extends T>({ action, classNameProps, details, error, hasAssistiveError, hasAssistiveLabel, id, isContentOnly, isDisabled, isOptional, label, name, onChange, onKeyDown, render, value, }: Readonly<FormFieldProps<T, V>>): React.ReactElement | null;
+export default FormField;

package/dist/forms/components/FormField/index.js

@@ -0,0 +1,37 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { getClassNames } from '../../../styles/config';
+import tw from '../../../styles/tw';
+import FormError from '../FormError';
+import FormLabel from '../FormLabel';
+import ActionButton from '../../../components/buttons/ActionButton';
+function checkHasError(error) {
+    return Boolean(error && Object.keys(error).length > 0 && Object.values(error).some(Boolean));
+}
+function FormField({ action, classNameProps, details, error, hasAssistiveError, hasAssistiveLabel, id, isContentOnly, isDisabled, isOptional, label, name, onChange, onKeyDown, render, value, }) {
+    const classNames = getClassNames('formField')?.(classNameProps);
+    const inputId = id || `ff_${name}`;
+    const [inputError, setInputError] = useState(null);
+    function handleError(message) {
+        setInputError(message);
+    }
+    const renderProps = {
+        classNameProps,
+        error,
+        hasError: checkHasError(error),
+        id: inputId,
+        isDisabled,
+        label,
+        name,
+        onChange,
+        onError: handleError,
+        onKeyDown,
+        value,
+    };
+    if (isContentOnly) {
+        return render(renderProps);
+    }
+    return (_jsxs("div", { className: tw(classNames?.root?.default, error ? classNames?.root?.error : null), children: [label ? (_jsx(FormLabel, { classNameProps: classNameProps, htmlFor: inputId, isAssistive: hasAssistiveLabel, isOptional: isOptional, children: label })) : null, details && label ? _jsx("div", { className: classNames?.details, children: details }) : null, _jsx("div", { className: classNames?.field, children: render(renderProps) }), action ? (_jsx("div", { children: _jsx(ActionButton, { ...action, isDisabled: Boolean(isDisabled || action.isDisabled) }) })) : null, inputError || error?.[name] ? (_jsx(FormError, { classNameProps: classNameProps, id: inputId, isAssistive: hasAssistiveError, children: inputError || error?.[name] })) : null] }));
+}
+export default FormField;

package/dist/forms/components/FormFields/index.d.ts

@@ -0,0 +1,10 @@
+import type { FormFieldComponentProps } from '../../interfaces';
+import type { DropdownComponentProps } from '../Dropdown';
+import type { PasswordInputComponentProps } from '../PasswordInput';
+import type { TextInputComponentProps } from '../TextInput';
+export type DropdownFormFieldProps<T> = FormFieldComponentProps<T | null> & DropdownComponentProps<T>;
+export declare function DropdownFormField<T>(props: Readonly<DropdownFormFieldProps<T>>): React.ReactElement;
+export type PasswordFormFieldProps = FormFieldComponentProps<string> & PasswordInputComponentProps;
+export declare function PasswordFormField(props: Readonly<PasswordFormFieldProps>): React.ReactElement;
+export type TextFormFieldProps = FormFieldComponentProps<string> & TextInputComponentProps;
+export declare function TextFormField(props: Readonly<TextFormFieldProps>): React.ReactElement;

package/dist/forms/components/FormFields/index.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import extractInputProps from '../../utility/extract-input-props';
+import Dropdown from '../Dropdown';
+import FormField from '../FormField';
+import PasswordInput from '../PasswordInput';
+import TextInput from '../TextInput';
+export function DropdownFormField(props) {
+    const { fieldProps, inputProps } = extractInputProps(props);
+    const renderInput = useCallback((renderProps) => (_jsx(Dropdown, { ...renderProps, ...inputProps })), [inputProps]);
+    return _jsx(FormField, { ...fieldProps, render: renderInput });
+}
+export function PasswordFormField(props) {
+    const { fieldProps, inputProps } = extractInputProps(props);
+    const renderInput = useCallback((renderProps) => (_jsx(PasswordInput, { ...renderProps, ...inputProps })), [inputProps]);
+    return _jsx(FormField, { ...fieldProps, render: renderInput });
+}
+export function TextFormField(props) {
+    const { fieldProps, inputProps } = extractInputProps(props);
+    const renderInput = useCallback((renderProps) => (_jsx(TextInput, { ...renderProps, ...inputProps })), [inputProps]);
+    return _jsx(FormField, { ...fieldProps, render: renderInput });
+}

package/dist/forms/components/FormLabel/index.d.ts

@@ -0,0 +1,10 @@
+import type { ClassNameProps } from '../../../styles/interfaces';
+import type { FormFieldClassNames } from '../FormField';
+interface FormLabelProps extends ClassNameProps<FormFieldClassNames> {
+    children: React.ReactNode;
+    htmlFor: string;
+    isAssistive?: boolean;
+    isOptional?: boolean;
+}
+declare function FormLabel({ children, classNames, classNameProps, htmlFor, isAssistive, isOptional, }: Readonly<FormLabelProps>): React.ReactElement;
+export default FormLabel;

package/dist/forms/components/FormLabel/index.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getClassNames } from '../../../styles/config';
+import tw from '../../../styles/tw';
+function FormLabel({ children, classNames, classNameProps, htmlFor, isAssistive, isOptional, }) {
+    const componentClassNames = classNames || getClassNames('formField')?.(classNameProps);
+    return (_jsxs("label", { className: tw(componentClassNames?.label, isAssistive ? 'sr-only' : null), htmlFor: htmlFor, children: [children, isOptional ? _jsx("small", { className: componentClassNames?.optional, children: "Optional" }) : null] }));
+}
+export default FormLabel;

package/dist/forms/components/FormSubmit/index.d.ts

@@ -0,0 +1,4 @@
+import type { ButtonProps } from '../../../components/buttons/Button';
+export type FormSubmitProps = Omit<ButtonProps, 'href' | 'isNewWindow' | 'isText'>;
+declare function FormSubmit({ isLoading, ...props }: Readonly<FormSubmitProps>): React.ReactElement;
+export default FormSubmit;

package/dist/forms/components/FormSubmit/index.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useFormStatus } from 'react-dom';
+import Button from '../../../components/buttons/Button';
+function FormSubmit({ isLoading, ...props }) {
+    const { pending } = useFormStatus();
+    return _jsx(Button, { ...props, isLoading: isLoading || pending, type: "submit", variant: "primary" });
+}
+export default FormSubmit;

package/dist/forms/components/ModalForm/index.d.ts

@@ -0,0 +1,13 @@
+import type { ModalProps } from '../../../components/modals/Modal';
+import type { FormProps } from '../Form';
+export interface ModalFormProps {
+    children: React.ReactNode;
+    formProps: Omit<FormProps, 'children'>;
+    hasServerError?: boolean;
+    hasSubmit?: boolean;
+    isDisabled?: boolean;
+    modalProps: Omit<ModalProps, 'children'>;
+    submitLabel?: string;
+}
+declare function ModalForm({ children, formProps, hasServerError, hasSubmit, isDisabled, modalProps, submitLabel, }: Readonly<ModalFormProps>): React.ReactElement;
+export default ModalForm;

package/dist/forms/components/ModalForm/index.js

@@ -0,0 +1,25 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Modal from '../../../components/modals/Modal';
+import ModalActions from '../../../components/modals/ModalActions';
+import useSearchParamsHref from '../../../hooks/useSearchParamsHref';
+import Form from '../Form';
+function ModalForm({ children, formProps, hasServerError, hasSubmit = true, isDisabled, modalProps, submitLabel, }) {
+    const { setSearchParamsHref } = useSearchParamsHref();
+    function handleCancel() {
+        setSearchParamsHref('action', null);
+    }
+    return (_jsx(Modal, { ...modalProps, children: _jsxs(Form, { ...formProps, children: [children, hasServerError ? _jsx("div", { children: "SERVER ERROR" }) : null, _jsx(ModalActions, { actions: [
+                        { label: 'Cancel', onClick: handleCancel, variant: 'link' },
+                        ...(modalProps.actions || []),
+                        hasSubmit
+                            ? {
+                                isDisabled,
+                                isLoading: modalProps.isLoading,
+                                isSubmittable: true,
+                                label: submitLabel || 'Submit',
+                            }
+                            : null,
+                    ] })] }) }));
+}
+export default ModalForm;

package/dist/forms/components/PasswordInput/index.d.ts

@@ -0,0 +1,11 @@
+import { InputProps } from '../../../forms/interfaces';
+import type { ClassNameProps, SelectableClassName } from '../../../styles/interfaces';
+import type { TextInputComponentProps } from '../TextInput';
+export interface PasswordInputClassNames {
+    action: string;
+    icon: SelectableClassName;
+}
+export type PasswordInputComponentProps = TextInputComponentProps;
+export type PasswordInputProps = ClassNameProps<PasswordInputClassNames> & InputProps<string> & PasswordInputComponentProps;
+declare function PasswordInput({ classNameProps, classNames, ...props }: Readonly<PasswordInputProps>): React.ReactElement;
+export default PasswordInput;

package/dist/forms/components/PasswordInput/index.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { getClassNames } from '../../../styles/config';
+import { getIcon } from '../../../styles/icons';
+import tw from '../../../styles/tw';
+import TextInput from '../TextInput';
+function PasswordInput({ classNameProps, classNames, ...props }) {
+    const componentClassNames = classNames || getClassNames('passwordInput')?.(classNameProps);
+    const Icon = getIcon('password');
+    const [isVisible, setIsVisible] = useState(false);
+    function toggleVisible() {
+        setIsVisible(!isVisible);
+    }
+    return (_jsxs("div", { className: "relative", children: [_jsx(TextInput, { type: isVisible ? 'text' : 'password', ...props }), _jsx("div", { className: componentClassNames?.action, children: _jsxs("button", { className: tw(componentClassNames?.icon?.default, isVisible ? componentClassNames?.icon?.selected : null), onClick: toggleVisible, type: "button", children: [Icon ? _jsx(Icon, {}) : null, isVisible ? 'Hide' : 'Show'] }) })] }));
+}
+export default PasswordInput;

package/dist/forms/components/StaticTextInput/index.d.ts

@@ -0,0 +1,22 @@
+import type { InputProps } from '../../../forms/interfaces';
+import type { ClassNameProps, ErrorableClassName } from '../../../styles/interfaces';
+export interface StaticTextInputClassNames {
+    root: ErrorableClassName;
+    placeholder: string;
+    label: string;
+    details: string;
+    icon: string;
+    clear: string;
+}
+export interface StaticTextInputProps extends ClassNameProps<StaticTextInputClassNames>, Omit<InputProps<string[] | string, string[] | string>, 'onChange'> {
+    details?: string | null;
+    label: string;
+    icon?: React.ReactNode;
+    isOpen?: boolean;
+    isOptional?: boolean;
+    onClear?: () => void;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    placeholder?: string;
+}
+declare function StaticTextInput({ classNames, classNameProps, details, hasError, icon, isDisabled, isOpen, isOptional, label, name, onClear, onClick, onKeyDown, placeholder, value, }: Readonly<StaticTextInputProps>): React.ReactElement;
+export default StaticTextInput;

package/dist/forms/components/StaticTextInput/index.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import Assistive from '../../../components/utility/Assistive';
+import { getClassNames } from '../../../styles/config';
+import tw from '../../../styles/tw';
+function hasValue(value) {
+    if (Array.isArray(value)) {
+        return Boolean(value.filter((item) => Boolean(item)).length);
+    }
+    return Boolean(value);
+}
+function StaticTextInput({ classNames, classNameProps, details, hasError, icon, isDisabled, isOpen, isOptional, label, name, onClear, onClick, onKeyDown, placeholder = 'Select...', value, }) {
+    const componentClassNames = {
+        ...getClassNames('staticTextInput')?.(classNameProps),
+        ...classNames,
+    };
+    function handleClear() {
+        onClear?.();
+    }
+    return (_jsxs("div", { className: tw('relative', isDisabled ? 'pointer-events-none opacity-30' : null, componentClassNames.root?.default, hasError ? componentClassNames.root?.error : null), children: [_jsx("input", { name: name, type: "hidden", value: value ? value.toString() : '' }), label ? (_jsxs(Fragment, { children: [_jsx("span", { className: tw(componentClassNames.label), children: label }), details ? (_jsx("small", { className: tw(componentClassNames.details), children: details })) : null] })) : (_jsx("span", { className: tw(componentClassNames.placeholder), children: placeholder })), onClick ? (_jsx("button", { className: "absolute -bottom-px -left-px -right-px -top-px", disabled: isDisabled, onClick: onClick, onKeyDown: onKeyDown, tabIndex: 0, type: "button", children: _jsx(Assistive, { children: isOpen ? 'Close' : 'Open' }) })) : null, _jsxs("div", { className: "absolute bottom-0 right-0 top-0 flex w-0 items-center justify-end", children: [isOptional && hasValue(value) ? (_jsx("button", { className: tw('flex-none', componentClassNames.clear), onClick: handleClear, type: "button", children: _jsx(Assistive, { children: "Clear" }) })) : null, icon && !isDisabled ? (_jsx("i", { className: tw('pointer-events-none flex-none', componentClassNames.icon) })) : null] })] }));
+}
+export default StaticTextInput;

package/dist/forms/components/Switch/index.d.ts

@@ -0,0 +1,11 @@
+import type { InputProps } from '../../../forms/interfaces';
+import { CheckableClassName, ClassNameProps } from '../../../styles/interfaces';
+export interface SwitchClassNames {
+    root: string;
+    control: string;
+    input: CheckableClassName;
+    icon: CheckableClassName;
+}
+export type SwitchProps = ClassNameProps<SwitchClassNames> & InputProps<boolean>;
+declare function Switch({ classNameProps, classNames, id, isDisabled, name, onChange, value, }: Readonly<SwitchProps>): React.ReactElement;
+export default Switch;

package/dist/forms/components/Switch/index.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { getClassNames } from '../../../styles/config';
+import tw from '../../../styles/tw';
+function Switch({ classNameProps, classNames, id, isDisabled, name, onChange, value, }) {
+    const componentClassNames = classNames || getClassNames('switch')?.(classNameProps);
+    function handleChange(event) {
+        if (onChange) {
+            const inputEvent = {
+                target: { name, value: event.target.checked },
+            };
+            onChange(inputEvent);
+        }
+    }
+    return (_jsxs(Fragment, { children: [_jsx("input", { name: name, type: "hidden", value: "false" }), _jsx("div", { className: tw('block', componentClassNames?.root), children: _jsxs("div", { className: tw('relative', componentClassNames?.control), children: [_jsx("input", { "aria-checked": Boolean(value), checked: Boolean(value), className: tw('appearance-none', componentClassNames?.input?.default, value ? componentClassNames?.input?.checked : null), disabled: isDisabled, id: id || name, name: name, onChange: handleChange, type: "checkbox", value: "true" }), _jsx("i", { className: tw(componentClassNames?.icon?.default, value ? componentClassNames?.icon?.checked : null) })] }) })] }));
+}
+export default Switch;

package/dist/forms/components/TextInput/index.d.ts

@@ -0,0 +1,34 @@
+import type { InputProps } from '../../../forms/interfaces';
+import type { ClassNameProps, ErrorableClassName } from '../../../styles/interfaces';
+export interface TextInputClassNames {
+    loading: string;
+    prefix: ErrorableClassName;
+    root: ErrorableClassName;
+    suffix: ErrorableClassName;
+    clear: string;
+}
+export interface TextInputComponentProps {
+    isAutocomplete?: boolean;
+    isLoading?: boolean;
+    onBlur?: React.EventHandler<React.FocusEvent>;
+    onFocus?: React.EventHandler<React.FocusEvent>;
+    placeholder?: string;
+    prefix?: string | null;
+    suffix?: string | null;
+    type?: React.HTMLInputTypeAttribute;
+}
+export type TextInputProps = ClassNameProps<TextInputClassNames> & InputProps<string> & TextInputComponentProps;
+/**
+ *
+ * ## ClassNames
+ *
+ * | Name | Description | Type |
+ * | ---- | ----------- | ---- |
+ * | root | The input element itself | `ErrorableClassName` |
+ * | prefix | The prefix element of the input, if one exists | `ErrorableClassName` |
+ * | suffix | The suffix element of the input, if one exists | `ErrorableClassName` |
+ * | clear | The wrapper around the 'clear' button of the input, if one exists. The style of the
+ * button itself is handled by the `renderClear` prop. | `string` |
+ */
+declare function TextInput({ classNames, classNameProps, hasError, id, isAutocomplete, isDisabled, name, onBlur, onChange, onFocus, onKeyDown, placeholder, prefix, suffix, type, value, }: Readonly<TextInputProps>): React.ReactElement;
+export default TextInput;

package/dist/forms/components/TextInput/index.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getClassNames } from '../../../styles/config';
+import tw from '../../../styles/tw';
+/**
+ *
+ * ## ClassNames
+ *
+ * | Name | Description | Type |
+ * | ---- | ----------- | ---- |
+ * | root | The input element itself | `ErrorableClassName` |
+ * | prefix | The prefix element of the input, if one exists | `ErrorableClassName` |
+ * | suffix | The suffix element of the input, if one exists | `ErrorableClassName` |
+ * | clear | The wrapper around the 'clear' button of the input, if one exists. The style of the
+ * button itself is handled by the `renderClear` prop. | `string` |
+ */
+function TextInput({ classNames, classNameProps, hasError, id, isAutocomplete, isDisabled, name, onBlur, onChange, onFocus, onKeyDown, placeholder, prefix, suffix, type, value, }) {
+    const componentClassNames = classNames || getClassNames('textInput')?.(classNameProps);
+    function handleChange(event) {
+        if (onChange) {
+            const target = { name, value: event.target.value };
+            onChange({ target });
+        }
+    }
+    return (_jsxs("div", { className: tw('relative', prefix ? 'flex flex-row-reverse' : null, (!prefix && suffix) || value ? 'flex' : null, isDisabled ? 'pointer-events-none opacity-30' : null), children: [prefix ? _jsx("div", { children: prefix }) : null, _jsx("input", { "aria-invalid": hasError, "aria-labelledby": hasError
+                    ? `${id || name}_err`
+                    : undefined /* eslint-disable-line no-undefined */, autoComplete: isAutocomplete === false
+                    ? 'one-time-code'
+                    : undefined /* eslint-disable-line no-undefined */, className: tw('peer w-full focus-visible:outline-0', prefix ? 'border-l-0' : null, (!prefix && suffix) || value ? 'border-r-0' : null, componentClassNames?.root?.default, hasError ? componentClassNames?.root?.error : null), disabled: isDisabled, formNoValidate: true, id: id || name, name: name, onBlur: onBlur, onChange: handleChange, onFocus: onFocus, onKeyDown: onKeyDown, placeholder: placeholder, type: type, value: value || '' }), suffix ? _jsx("div", { children: suffix }) : null] }));
+}
+export default TextInput;

package/dist/forms/hooks/useDropdown.d.ts

@@ -0,0 +1,10 @@
+import { DropdownObject } from '../interfaces';
+interface UseDropdownArgs<T extends string> {
+    deps?: unknown[];
+    fn: (...args: unknown[]) => Promise<DropdownObject<T>[]>;
+}
+interface UseDropdownReturn<T extends string> {
+    data: DropdownObject<T>[];
+}
+declare function useDropdown<T extends string>({ deps, fn }: UseDropdownArgs<T>): UseDropdownReturn<T>;
+export default useDropdown;

package/dist/forms/hooks/useDropdown.js

@@ -0,0 +1,14 @@
+'use client';
+import { useEffect, useState } from 'react';
+function useDropdown({ deps, fn }) {
+    const [data, setData] = useState([]);
+    async function getData() {
+        const response = await (deps ? fn(...deps) : fn());
+        setData(response);
+    }
+    useEffect(() => {
+        void getData();
+    }, deps || []);
+    return { data };
+}
+export default useDropdown;

package/dist/forms/hooks/useEditableForm.d.ts

@@ -0,0 +1,24 @@
+import type { EditableFormProps } from '../components/EditableForm';
+import type { EditingStatus } from '../interfaces';
+import type { FieldPropsReturn, UseFormArgs, UseFormReturn } from './useForm';
+export interface EditableFieldPropsReturn<Request, K extends keyof Request = keyof Request> extends FieldPropsReturn<Request, K> {
+    status: EditingStatus | null;
+}
+export type UseEditableFormArgs<Request, Response> = UseFormArgs<Request, Response> & {
+    defaultStatus?: EditingStatus;
+    onCancel?: () => void;
+    onEdit?: () => void;
+    title?: string;
+};
+export interface UseEditableFormReturn<Request> extends Omit<UseFormReturn<Request>, 'fieldProps' | 'formProps'> {
+    actionProps: {
+        setStatus: React.Dispatch<React.SetStateAction<EditingStatus | null>>;
+        status: EditingStatus | null;
+    };
+    fieldProps: <K extends keyof Request>(name: K, label?: string) => FieldPropsReturn<Request, K>;
+    formProps: Omit<EditableFormProps, 'children'>;
+    setStatus: React.Dispatch<React.SetStateAction<EditingStatus | null>>;
+    status: EditingStatus | null;
+}
+declare function useEditableForm<Request extends object, Response = Request>({ defaultStatus, onCancel, onEdit, onSuccess, title, ...args }: UseEditableFormArgs<Request, Response>): UseEditableFormReturn<Request>;
+export default useEditableForm;

package/dist/forms/hooks/useEditableForm.js

@@ -0,0 +1,34 @@
+import { useEffect, useState } from 'react';
+import useForm from './useForm';
+function useEditableForm({ defaultStatus, onCancel, onEdit, onSuccess, title, ...args }) {
+    const [status, setStatus] = useState(defaultStatus ?? null);
+    async function onEditableSuccess(response) {
+        if (onSuccess) {
+            await onSuccess(response);
+        }
+        setStatus('SAVED');
+    }
+    const useFormReturn = useForm({
+        ...args,
+        refreshOnSuccess: true,
+        onSuccess: onEditableSuccess,
+    });
+    function editableFieldProps(name, label) {
+        const fieldProps = useFormReturn.fieldProps(name, label);
+        return { ...fieldProps, status };
+    }
+    useEffect(() => {
+        if (status === 'CANCELLED') {
+            useFormReturn.setErrors(null);
+        }
+    }, [status]);
+    return {
+        ...useFormReturn,
+        actionProps: { status, setStatus },
+        fieldProps: editableFieldProps,
+        formProps: { formProps: useFormReturn.formProps, onCancel, onEdit, status, setStatus, title },
+        status,
+        setStatus,
+    };
+}
+export default useEditableForm;

package/dist/forms/hooks/useForm.d.ts

@@ -0,0 +1,136 @@
+import type { Default, InputEvent } from '../../forms/interfaces';
+import type { FormProps } from '../components/Form';
+interface AwaitedFormResponse<M> {
+    data: M | null;
+    error: string | null;
+    validation: Record<string, string> | null;
+}
+export type FormResponse<M> = Promise<AwaitedFormResponse<M>>;
+export interface FieldPropsReturn<Request, K extends keyof Request = keyof Request> {
+    error: Record<string, string> | null;
+    isDisabled?: boolean;
+    label?: string;
+    name: string;
+    onChange: (event: InputEvent<Request[K]>) => void;
+    value: Request[K];
+}
+export interface ToastsArgs {
+    server?: string | false;
+    success?: string | false;
+    validation?: string | false;
+}
+export interface UseFormArgs<Request, Response> {
+    defaults?: Default<Request>;
+    onError?: (message: string) => void;
+    onSubmit?: (formData: Request) => FormResponse<Response>;
+    onSuccess?: (response: Response) => Promise<void> | void;
+    onValidation?: (errors: Record<string, string>) => void;
+    redirectOnSuccess?: string | false | ((response: Response) => string | false);
+    refreshOnSuccess?: boolean;
+    toasts?: ToastsArgs | false;
+}
+export interface UseFormReturn<Request> {
+    errors: Record<string, string> | null;
+    fieldProps: <K extends keyof Request>(name: K, label?: string) => FieldPropsReturn<Request, K>;
+    formData: Partial<Request>;
+    formProps: Omit<FormProps, 'children'>;
+    isLoading: boolean;
+    resetForm: () => void;
+    setErrors: (errors: Record<string, string> | null) => void;
+    setFormData: (key: keyof Request, value: Request[keyof Request]) => void;
+    submitForm: () => void;
+}
+/**
+ * ## Overview
+ *
+ * `useForm` is a custom React hook that facilitates handling server-side form submission,
+ * including state management, error handling, and form data processing. It's designed to work
+ * with forms where the data is submitted to and validated by a server.
+ *
+ * ## Type Parameters
+ *
+ * - `Request extends object`: The shape of the request data.
+ * - `Response = Request`: The shape of the response data, defaulting to the same type as `Request`.
+ *
+ * ## Arguments
+ *
+ * `useForm` takes an object with the following properties:
+ *
+ * - `defaults`: Initial default values for the form data.
+ * - `hiddenFields`: Fields that should be included in the form submission but not displayed.
+ * - `onError`: Callback function for handling errors during form submission.
+ * - `onSubmit`: Function to handle the form submission. Expected to return a promise.
+ * - `onSuccess`: Callback function to be called upon a successful submission.
+ * - `onValidationError`: Callback function for handling validation errors.
+ * - `toasts`: Configuration for displaying success or error toasts.
+ *
+ * ## Returns
+ *
+ * `useForm` returns an object with the following properties:
+ *
+ * - `errors`: An object containing any form errors.
+ * - `fieldProps`: Function to generate props for a form field.
+ * - `formData`: Current form data.
+ * - `formProps`: Props for the form element including the submit handler.
+ * - `isLoading`: Boolean indicating if the form submission is in progress.
+ * - `resetForm`: Function to reset the form to its initial state.
+ * - `setFormData`: Function to update a specific piece of form data.
+ *
+ * ## Functionality
+ *
+ * - **Form Data Management:**
+ *   - Manages form data state and provides handleChange and setFormData functions to update form
+ *     data.
+ *
+ * - **Form Submission:**
+ *   - Handles form submission, including displaying loading state, submitting data to the provided
+ *     onSubmit function, and handling server-side validation errors or other errors.
+ *
+ * - **Error Handling:**
+ *   - Manages form error state and handles displaying error messages.
+ *
+ * - **Toasts:**
+ *   - Optionally displays success or error toasts based on the form submission outcome.
+ *
+ * - **Reset Form:**
+ *   - Provides a function to reset the form to its default state.
+ *
+ * ## Example
+ *
+ * ```jsx
+ * import React from 'react';
+ * import { useForm } from './path-to-useForm';
+ *
+ * const MyFormComponent = () => {
+ *     const { fieldProps, formProps, isLoading, resetForm } = useForm<MyFormData>({
+ *         defaults: { name: '', email: '' },
+ *         onSubmit: async (formData) => {
+ *             // Submit form data to the server
+ *         },
+ *     });
+ *
+ *     return (
+ *         <form {...formProps}>
+ *             <input {...fieldProps('name', 'Name')} />
+ *             <input {...fieldProps('email', 'Email')} />
+ *             <button type="submit" disabled={isLoading}>Submit</button>
+ *             <button type="button" onClick={resetForm}>Reset</button>
+ *         </form>
+ *     );
+ * };
+ *
+ * export default MyFormComponent;
+ * ```
+ *
+ * In this example, `MyFormComponent` uses the `useForm` hook to manage form state, handle
+ * submissions, display errors, and reset the form.
+ *
+ * ## Notes
+ *
+ * - Ensure proper types are passed to the useForm hook to align with the expected structure
+ *   of your form data and server responses.
+ * - The hook's functionality can be extended or customized based on specific use cases, such as
+ *   handling additional form events or integrating with different server APIs.
+ */
+declare function useForm<Request extends object, Response = Request>({ defaults, onError, onSubmit, onSuccess, onValidation, redirectOnSuccess, refreshOnSuccess, toasts, }: UseFormArgs<Request, Response>): UseFormReturn<Request>;
+export default useForm;