@sqrzro/ui 4.0.0-alpha.54 → 4.0.0-alpha.55

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

@@ -8,6 +8,7 @@ export interface FormProps extends ClassNameProps<FormClassNames> {
     id?: string;
     onSubmit?: React.FormEventHandler<HTMLFormElement>;
     ref?: React.Ref<HTMLFormElement>;
+    uncaughtErrors: Record<string, string> | null;
 }
-declare function Form({ action, children, classNames, classNameProps, id, onSubmit, ref, }: Readonly<FormProps>): React.ReactElement;
+declare function Form({ action, children, classNames, classNameProps, id, onSubmit, uncaughtErrors, ref, }: Readonly<FormProps>): React.ReactElement;
 export default Form;

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

@@ -1,9 +1,10 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useClassNames } from '../../../styles/context';
 import tw from '../../../styles/classnames/utility/tw';
-function Form({ action, children, classNames, classNameProps, id, onSubmit, ref, }) {
+import { InfoPanel } from '../../../components';
+function Form({ action, children, classNames, classNameProps, id, onSubmit, uncaughtErrors, ref, }) {
     const componentClassNames = useClassNames('form', { props: classNameProps }, classNames);
-    return (_jsx("form", { ref: ref, action: action, className: tw(componentClassNames?.root), id: id, onSubmit: onSubmit, children: children }));
+    return (_jsxs("form", { ref: ref, action: action, className: tw(componentClassNames?.root), id: id, onSubmit: onSubmit, children: [uncaughtErrors && Object.keys(uncaughtErrors).length ? (_jsx(InfoPanel, { variant: "error", children: Object.values(uncaughtErrors).map((item, index) => (_jsx("p", { children: item }, index))) })) : null, children] }));
 }
 export default Form;

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

@@ -3,11 +3,12 @@ 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'>;
+    serverError?: string | null;
     submitLabel?: string;
+    validationErrors?: string[];
 }
-declare function ModalForm({ children, formProps, hasServerError, hasSubmit, isDisabled, modalProps, submitLabel, }: Readonly<ModalFormProps>): React.ReactElement;
+declare function ModalForm({ children, formProps, hasSubmit, isDisabled, modalProps, serverError, submitLabel, validationErrors, }: Readonly<ModalFormProps>): React.ReactElement;
 export default ModalForm;

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

@@ -4,12 +4,13 @@ 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, }) {
+import { InfoPanel } from '../../../components';
+function ModalForm({ children, formProps, hasSubmit = true, isDisabled, modalProps, serverError, submitLabel, validationErrors, }) {
     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: [
+    return (_jsx(Modal, { ...modalProps, children: _jsxs(Form, { ...formProps, children: [serverError ? _jsx(InfoPanel, { variant: "error", children: serverError }) : null, validationErrors?.length ? (_jsx(InfoPanel, { variant: "error", children: JSON.stringify(validationErrors) })) : null, children, _jsx(ModalActions, { actions: [
                         { label: 'Cancel', onClick: handleCancel },
                         ...(modalProps.actions || []),
                         hasSubmit

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

@@ -24,7 +24,7 @@ export interface UseFormArgs<Request, Response> extends UseSuccessArgs<Response>
     defaults?: Default<Request>;
     onError?: (message: string) => void;
     onSubmit?: (formData: Request) => FormResponse<Response>;
-    onValidation?: (errors: Record<string, string>) => void;
+    onValidation?: (errors: Record<string, string>, uncaughtErrors?: Record<string, string>) => void;
     toasts?: ToastsArgs | false;
 }
 export interface UseFormReturn<Request> {
@@ -38,6 +38,7 @@ export interface UseFormReturn<Request> {
     setFormData: <K extends keyof Request>(key: K, value: Request[K]) => void;
     submitForm: () => void;
 }
+export declare const DEFAULT_TOAST_MESSAGES: Record<keyof ToastsArgs, string>;
 /**
  * ## Overview
  *

package/dist/forms/hooks/useForm.js

@@ -4,7 +4,7 @@ import { formatTitle } from '@sqrzro/utility';
 import useDeepCompareEffect from 'use-deep-compare-effect';
 import useSuccess from '../../hooks/useSuccess';
 import useToast from '../../hooks/useToast';
-const DEFAULT_TOAST_MESSAGES = {
+export const DEFAULT_TOAST_MESSAGES = {
     server: 'There was a problem submitting your request. Please try again later.',
     success: 'Your request was submitted successfully.',
     validation: 'There was a problem with your submission. Please check the form and try again.',
@@ -121,9 +121,11 @@ function getToastMessage(key, toasts) {
  */
 function useForm({ defaults = {}, onError, onSubmit, onSuccess, onValidation, redirectOnSuccess, refreshOnSuccess, toasts, }) {
     const ref = useRef(null);
+    const usedFields = useRef(new Set());
     const { handleSuccess } = useSuccess({ onSuccess, redirectOnSuccess, refreshOnSuccess });
     const [isLoading] = useTransition();
     const [errors, setErrors] = useState(null);
+    const [uncaughtErrors, setUncaughtErrors] = useState(null);
     const [data, setData] = useState(defaults);
     const { toastError, toastSuccess } = useToast();
     function setFormData(key, value) {
@@ -141,8 +143,12 @@ function useForm({ defaults = {}, onError, onSubmit, onSuccess, onValidation, re
         toastError(getToastMessage('server', toasts));
     }
     function handleFormValidation(messages) {
-        onValidation?.(messages);
+        const uncaughtMessages = Object.keys(messages)
+            .filter((key) => !usedFields.current.has(key))
+            .reduce((acc, key) => ({ ...acc, [key]: messages[key] }), {});
+        onValidation?.(messages, uncaughtMessages);
         setErrors(messages);
+        setUncaughtErrors(uncaughtMessages);
         toastError(getToastMessage('validation', toasts));
     }
     async function handleSubmit() {
@@ -162,6 +168,7 @@ function useForm({ defaults = {}, onError, onSubmit, onSuccess, onValidation, re
         }
     }
     function fieldProps(name, label) {
+        usedFields.current.add(name);
         return {
             error: getErrorsForField(errors, name),
             label: getLabel(name, label),
@@ -186,6 +193,7 @@ function useForm({ defaults = {}, onError, onSubmit, onSuccess, onValidation, re
         formProps: {
             action: handleSubmit,
             ref,
+            uncaughtErrors,
         },
         isLoading,
         resetForm,

package/dist/forms/hooks/useModalForm.js

@@ -1,8 +1,10 @@
 'use client';
+import { useState } from 'react';
 import { useRouter } from 'next/navigation';
 import useSearchParamsHref from '../../hooks/useSearchParamsHref';
-import useForm from './useForm';
+import useForm, { DEFAULT_TOAST_MESSAGES } from './useForm';
 function useModalForm({ actions, icon, submitLabel, title, ...useFormArgs }) {
+    const [serverError, setServerError] = useState(null);
     const { setSearchParamsHref } = useSearchParamsHref();
     const router = useRouter();
     function handleSuccess(response) {
@@ -14,6 +16,10 @@ function useModalForm({ actions, icon, submitLabel, title, ...useFormArgs }) {
     }
     const useFormReturn = useForm({
         ...useFormArgs,
+        onError: (message) => {
+            setServerError(DEFAULT_TOAST_MESSAGES.server);
+            useFormArgs.onError?.(message);
+        },
         onSuccess: handleSuccess,
         toasts: false,
     });
@@ -22,6 +28,7 @@ function useModalForm({ actions, icon, submitLabel, title, ...useFormArgs }) {
         formProps: {
             formProps: useFormReturn.formProps,
             modalProps: { actions, icon, title },
+            serverError,
             submitLabel,
         },
     };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sqrzro/ui",
   "type": "module",
-  "version": "4.0.0-alpha.54",
+  "version": "4.0.0-alpha.55",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "ISC",