@ultraviolet/form 2.0.0-next.4 → 2.0.0-next.6

package/dist/components/CheckboxField/index.js

@@ -1,14 +1,12 @@
 import { Checkbox } from '@ultraviolet/ui';
-import { forwardRef } from 'react';
+import { useController } from 'react-hook-form';
 import { jsx } from '@emotion/react/jsx-runtime';
 import { useErrors } from '../../providers/ErrorContext/index.js';
-import { useFormField } from '../../hooks/useFormField.js';
 
-const CheckboxField = /*#__PURE__*/forwardRef((_ref, ref) => {
+const CheckboxField = _ref => {
   let {
-    validate,
     name,
-    label = '',
+    label,
     size,
     progress,
     disabled,
@@ -18,58 +16,55 @@ const CheckboxField = /*#__PURE__*/forwardRef((_ref, ref) => {
     onChange,
     onBlur,
     onFocus,
-    value,
+    rules,
     helper,
     tooltip,
-    'data-testid': dataTestId
+    'data-testid': dataTestId,
+    value
   } = _ref;
   const {
     getError
   } = useErrors();
   const {
-    input,
-    meta
-  } = useFormField(name, {
-    disabled,
-    required,
-    type: 'checkbox',
-    validate,
-    value
-  });
-  const error = getError({
-    label,
-    meta: meta,
+    field,
+    fieldState: {
+      error
+    }
+  } = useController({
     name,
-    value: input.value ?? input.checked
+    disabled,
+    rules: {
+      required,
+      ...rules
+    }
   });
   return jsx(Checkbox, {
-    name: input.name,
+    name: field.name,
     onChange: event => {
-      input.onChange(event);
-      onChange?.(event);
+      field.onChange(value ? [...(field.value ?? []), value] : event.target.checked);
+      onChange?.(event.target.checked);
     },
     onBlur: event => {
-      input.onBlur(event);
+      field.onBlur();
       onBlur?.(event);
     },
-    onFocus: event => {
-      input.onFocus(event);
-      onFocus?.(event);
-    },
+    onFocus: onFocus,
     size: size,
     progress: progress,
-    disabled: disabled,
-    checked: input.checked,
-    error: error,
-    helper: helper,
-    ref: ref,
+    disabled: field.disabled,
+    checked: Array.isArray(field.value) ? field.value.includes(value) : !!field.value,
+    error: getError({
+      label: label ?? ''
+    }, error),
+    ref: field.ref,
     className: className,
-    value: input.value,
     required: required,
     "data-testid": dataTestId,
+    helper: helper,
     tooltip: tooltip,
+    value: value,
     children: children
   });
-});
+};
 
 export { CheckboxField };

package/dist/components/CheckboxGroupField/index.js

@@ -1,17 +1,17 @@
 import { CheckboxGroup } from '@ultraviolet/ui';
-import { useFieldArray } from 'react-final-form-arrays';
+import { useController } from 'react-hook-form';
 import { jsx } from '@emotion/react/jsx-runtime';
 import { useErrors } from '../../providers/ErrorContext/index.js';
 
 const CheckboxGroupField = _ref => {
   let {
     legend,
-    value,
     className,
     helper,
     direction,
     children,
     onChange,
+    label = '',
     error: customError,
     name,
     required = false
@@ -20,32 +20,29 @@ const CheckboxGroupField = _ref => {
     getError
   } = useErrors();
   const {
-    fields,
-    meta
-  } = useFieldArray(name, {
-    type: 'checkbox',
-    value,
-    validate: localValue => required && localValue?.length === 0 ? 'Required' : undefined
-  });
-  const error = getError({
-    label: legend,
-    meta,
-    value: fields.value,
+    field,
+    fieldState: {
+      error
+    }
+  } = useController({
     name
   });
   return jsx(CheckboxGroup, {
     legend: legend,
-    name: fields.name,
-    value: fields.value,
+    name: name,
+    value: field.value,
     onChange: event => {
-      if (fields.value?.includes(event.currentTarget.value)) {
-        fields.remove(fields.value.indexOf(event.currentTarget?.value));
+      const fieldValue = field.value;
+      if (fieldValue?.includes(event.currentTarget.value)) {
+        field.onChange(fieldValue?.filter(currentValue => currentValue !== event.currentTarget.value));
       } else {
-        fields.push(event.currentTarget.value);
+        field.onChange([...field.value, event.currentTarget.value]);
       }
-      onChange?.(event);
+      onChange?.(event.currentTarget.value);
     },
-    error: error ?? customError,
+    error: getError({
+      label
+    }, error) ?? customError,
     className: className,
     direction: direction,
     helper: helper,

package/dist/components/DateField/index.js

@@ -1,7 +1,9 @@
 import { DateInput } from '@ultraviolet/ui';
+import { useController } from 'react-hook-form';
+import { maxDateValidator } from '../../validators/maxDate.js';
+import { minDateValidator } from '../../validators/minDate.js';
 import { jsx } from '@emotion/react/jsx-runtime';
 import { useErrors } from '../../providers/ErrorContext/index.js';
-import { useFormField } from '../../hooks/useFormField.js';
 
 const parseDate = value => typeof value === 'string' ? new Date(value) : value;
 const isEmpty = value => typeof value === 'string' ? value === '' : value === undefined;
@@ -10,18 +12,15 @@ const DateField = _ref => {
     required,
     name,
     label = '',
-    validate,
     format,
     locale,
     maxDate,
     minDate,
-    initialValue,
     disabled,
-    value: inputVal,
     onChange,
     onBlur,
     onFocus,
-    formatOnBlur,
+    rules,
     autoFocus = false,
     excludeDates,
     selectsRange,
@@ -31,66 +30,63 @@ const DateField = _ref => {
     getError
   } = useErrors();
   const {
-    input,
-    meta
-  } = useFormField(name, {
-    disabled,
-    formatOnBlur,
-    initialValue,
-    maxDate,
-    minDate,
-    required,
-    validate,
-    value: inputVal
-  });
-  const error = getError({
-    label,
-    maxDate,
-    meta: meta,
-    minDate,
+    field,
+    fieldState: {
+      error
+    }
+  } = useController({
     name,
-    value: input.value
+    rules: {
+      ...rules,
+      validate: {
+        ...rules?.validate,
+        minDate: minDateValidator(minDate),
+        maxDate: maxDateValidator(maxDate)
+      },
+      required
+    }
   });
   return jsx(DateInput, {
+    name: field.name,
     label: label,
+    value: field.value,
     format: format || (value => value ? parseDate(value).toLocaleDateString() : ''),
     locale: locale,
     required: required,
-    value: input.value,
     onChange: val => {
       if (val && val instanceof Date) {
         onChange?.(val);
         const newDate = parseDate(val);
-        if (isEmpty(input.value)) {
-          input.onChange(newDate);
+        if (isEmpty(field.value)) {
+          field.onChange(newDate);
           return;
         }
-        const currentDate = parseDate(input.value);
+        const currentDate = parseDate(field.value);
         newDate.setHours(currentDate.getHours(), currentDate.getMinutes());
-        input.onChange(newDate);
+        field.onChange(newDate);
       } else if (Array.isArray(val)) {
-        input.onChange(val);
+        field.onChange(val);
       }
     },
     onBlur: e => {
-      input.onBlur(e);
+      field.onBlur();
       onBlur?.(e);
     },
-    onFocus: e => {
-      input.onFocus(e);
-      onFocus?.(e);
-    },
+    onFocus: onFocus,
     maxDate: maxDate,
     minDate: minDate,
-    startDate: selectsRange ? input.value[0] : undefined,
-    endDate: selectsRange ? input.value[1] : undefined,
-    error: error,
+    error: getError({
+      minDate,
+      maxDate,
+      label
+    }, error),
     disabled: disabled,
     autoFocus: autoFocus,
-    name: input.name,
-    "data-testid": dataTestId,
     excludeDates: excludeDates,
-    selectsRange: selectsRange
+    selectsRange: selectsRange,
+    "data-testid": dataTestId,
+    startDate: selectsRange && Array.isArray(field.value) ? field.value[0] : undefined,
+    endDate: selectsRange && Array.isArray(field.value) ? field.value[1] : undefined
   });
 };
 

package/dist/components/Form/index.js

@@ -1,43 +1,83 @@
-import arrayMutators from 'final-form-arrays';
-import { Form as Form$1 } from 'react-final-form';
+import React, { useMemo } from 'react';
+import { useForm, FormProvider } from 'react-hook-form';
+import { FORM_ERROR } from '../../constants.js';
+import { defaultErrors } from './defaultErrors.js';
 import { jsx } from '@emotion/react/jsx-runtime';
 import { ErrorProvider } from '../../providers/ErrorContext/index.js';
 
+const FormSubmitContext = /*#__PURE__*/React.createContext({});
 const Form = _ref => {
   let {
     children,
-    onRawSubmit,
-    errors,
+    methods: methodsProp,
     initialValues,
-    validateOnBlur,
-    validate,
-    name,
-    render,
-    mutators,
-    keepDirtyOnReinitialize,
-    className
+    errors,
+    onRawSubmit,
+    name
   } = _ref;
-  return jsx(Form$1, {
-    initialValues: initialValues,
-    validateOnBlur: validateOnBlur,
-    validate: validate,
-    mutators: {
-      ...arrayMutators,
-      ...mutators
-    },
-    onSubmit: onRawSubmit,
-    render: render ?? (renderProps => jsx(ErrorProvider, {
-      errors: errors,
-      children: jsx("form", {
-        noValidate: true,
-        name: name,
-        onSubmit: renderProps.handleSubmit,
-        className: className,
-        children: typeof children === 'function' ? children(renderProps) : children
+  const methodsHook = useForm({
+    defaultValues: initialValues,
+    mode: 'onChange'
+  });
+  const methods = !methodsProp ? methodsHook : methodsProp;
+  const handleSubmit = methods.handleSubmit(async values => {
+    const result = await onRawSubmit(values, {
+      reset: methods.reset,
+      resetFieldState: methods.resetField,
+      restart: () => methods.reset(initialValues),
+      change: methods.setValue
+    });
+    if (result === null) {
+      methods.setError('root.submit', {
+        type: 'custom'
+      });
+      return;
+    }
+    if (result && typeof result !== 'boolean' && typeof result !== 'number') {
+      methods.setError('root.submit', {
+        type: 'custom',
+        message: typeof result === 'object' ? result[FORM_ERROR] : result
+      });
+    }
+  });
+  const formSubmitContextValue = useMemo(() => ({
+    handleSubmit
+  }), [handleSubmit]);
+  return jsx(FormProvider, {
+    ...methods,
+    children: jsx(FormSubmitContext.Provider, {
+      value: formSubmitContextValue,
+      children: jsx(ErrorProvider, {
+        errors: {
+          ...defaultErrors,
+          ...errors
+        },
+        children: jsx("form", {
+          onSubmit: async e => {
+            e.preventDefault();
+            e.stopPropagation();
+            await handleSubmit(e);
+          },
+          name: name,
+          children: typeof children === 'function' ? children({
+            values: methods.watch(),
+            hasValidationErrors: !methods.formState.isValid,
+            errors: methods.formState.errors,
+            submitting: methods.formState.isSubmitting,
+            pristine: !methods.formState.isDirty,
+            handleSubmit,
+            submitError: !!methods.formState.errors?.root?.['submit'],
+            valid: methods.formState.isValid,
+            form: {
+              change: methods.setValue,
+              reset: methods.reset,
+              submit: handleSubmit
+            }
+          }) : children
+        })
       })
-    })),
-    keepDirtyOnReinitialize: keepDirtyOnReinitialize
+    })
   });
 };
 
-export { Form };
+export { Form, FormSubmitContext };

package/dist/components/NumberInputField/index.js

@@ -1,6 +1,7 @@
 import { NumberInput } from '@ultraviolet/ui';
+import { useController } from 'react-hook-form';
 import { jsx } from '@emotion/react/jsx-runtime';
-import { useFormField } from '../../hooks/useFormField.js';
+import { useErrors } from '../../providers/ErrorContext/index.js';
 
 const NumberInputField = _ref => {
   let {
@@ -17,38 +18,41 @@ const NumberInputField = _ref => {
     size,
     step,
     text,
-    validate,
-    value,
+    rules,
     className,
-    'data-testid': dataTestId
+    label
   } = _ref;
   const {
-    input
-  } = useFormField(name, {
-    disabled,
-    required,
-    type: 'number',
-    validate,
-    value,
-    defaultValue: 0,
-    max: maxValue,
-    min: minValue
+    getError
+  } = useErrors();
+  const {
+    field,
+    fieldState: {
+      error
+    }
+  } = useController({
+    name,
+    rules: {
+      max: maxValue,
+      min: minValue,
+      required,
+      ...rules
+    }
   });
   return jsx(NumberInput, {
-    name: name,
+    name: field.name,
+    value: field.value,
     disabled: disabled,
     onBlur: event => {
-      input.onBlur(event);
+      field.onBlur();
       onBlur?.(event);
     },
     onChange: event => {
-      input.onChange(event);
+      // React hook form doesnt allow undefined values after definition https://react-hook-form.com/docs/usecontroller/controller (that make sense)
+      field.onChange(event ?? null);
       onChange?.(event);
     },
-    onFocus: event => {
-      input.onFocus(event);
-      onFocus?.(event);
-    },
+    onFocus: onFocus,
     maxValue: maxValue,
     minValue: minValue,
     onMinCrossed: onMinCrossed,
@@ -56,9 +60,13 @@ const NumberInputField = _ref => {
     size: size,
     step: step,
     text: text,
-    value: input.value,
     className: className,
-    "data-testid": dataTestId
+    label: label,
+    error: getError({
+      label: label ?? '',
+      max: maxValue,
+      min: minValue
+    }, error)
   });
 };
 

package/dist/components/RadioField/index.js

@@ -1,7 +1,7 @@
 import { Radio } from '@ultraviolet/ui';
+import { useController } from 'react-hook-form';
 import { jsx } from '@emotion/react/jsx-runtime';
 import { useErrors } from '../../providers/ErrorContext/index.js';
-import { useFormField } from '../../hooks/useFormField.js';
 
 const RadioField = _ref => {
   let {
@@ -9,57 +9,52 @@ const RadioField = _ref => {
     'data-testid': dataTestId,
     disabled,
     id,
-    label = '',
     name,
     onBlur,
+    label = '',
     onChange,
     onFocus,
     required,
-    validate,
     value,
+    rules,
     tooltip
   } = _ref;
   const {
     getError
   } = useErrors();
   const {
-    input,
-    meta
-  } = useFormField(name, {
-    required,
-    type: 'radio',
-    validate,
-    value
-  });
-  const error = getError({
-    disabled,
-    label: label,
-    meta: meta,
+    field,
+    fieldState: {
+      error
+    }
+  } = useController({
     name,
-    value: input.value
+    rules: {
+      required,
+      ...rules
+    }
   });
   return jsx(Radio, {
-    checked: input.checked,
+    name: field.name,
+    checked: field.value === value,
     className: className,
     "data-testid": dataTestId,
     disabled: disabled,
-    error: error,
+    error: getError({
+      label: typeof label === 'string' ? label : ''
+    }, error),
     id: id,
-    name: input.name,
-    onChange: event => {
-      input.onChange(event);
-      onChange?.(event);
+    onChange: () => {
+      field.onChange(value);
+      onChange?.(value);
     },
     onBlur: event => {
-      input.onBlur(event);
+      field.onBlur();
       onBlur?.(event);
     },
-    onFocus: event => {
-      input.onFocus(event);
-      onFocus?.(event);
-    },
+    onFocus: onFocus,
     required: required,
-    value: input.value,
+    value: value ?? '',
     label: label,
     tooltip: tooltip
   });

package/dist/components/RadioGroupField/index.js

@@ -1,7 +1,7 @@
 import { RadioGroup } from '@ultraviolet/ui';
+import { useController } from 'react-hook-form';
 import { jsx } from '@emotion/react/jsx-runtime';
 import { useErrors } from '../../providers/ErrorContext/index.js';
-import { useFormField } from '../../hooks/useFormField.js';
 
 const RadioGroupField = _ref => {
   let {
@@ -10,9 +10,9 @@ const RadioGroupField = _ref => {
     name,
     onChange,
     required,
-    validate,
-    value,
+    rules,
     children,
+    label = '',
     error: customError,
     helper,
     direction
@@ -21,30 +21,27 @@ const RadioGroupField = _ref => {
     getError
   } = useErrors();
   const {
-    input,
-    meta
-  } = useFormField(name, {
-    required,
-    validate,
-    value
-  });
-  const error = getError({
-    label: legend,
-    meta: meta,
+    field,
+    fieldState: {
+      error
+    }
+  } = useController({
     name,
-    value: input.value
+    rules
   });
   return jsx(RadioGroup, {
     className: className,
-    name: input.name,
+    name: field.name,
     onChange: event => {
-      input.onChange(event);
-      onChange?.(event);
+      field.onChange(event);
+      onChange?.(event.target.value);
     },
     required: required,
-    value: input.value,
+    value: field.value,
     legend: legend,
-    error: error ?? customError,
+    error: getError({
+      label
+    }, error) ?? customError,
     helper: helper,
     direction: direction,
     children: children