@ultraviolet/form 2.0.0-next.0 → 2.0.0-next.2

package/dist/components/CheckboxField/index.js

@@ -1,14 +1,12 @@
 import { Checkbox } from '@ultraviolet/ui';
-import { forwardRef } from 'react';
+import { Controller } 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,58 @@ 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,
-    name,
-    value: input.value ?? input.checked
-  });
-  return jsx(Checkbox, {
-    name: input.name,
-    onChange: event => {
-      input.onChange(event);
-      onChange?.(event);
-    },
-    onBlur: event => {
-      input.onBlur(event);
-      onBlur?.(event);
-    },
-    onFocus: event => {
-      input.onFocus(event);
-      onFocus?.(event);
-    },
-    size: size,
-    progress: progress,
+  return jsx(Controller, {
+    name: name,
     disabled: disabled,
-    checked: input.checked,
-    error: error,
-    helper: helper,
-    ref: ref,
-    className: className,
-    value: input.value,
-    required: required,
-    "data-testid": dataTestId,
-    tooltip: tooltip,
-    children: children
+    rules: {
+      required,
+      ...rules
+    },
+    render: _ref2 => {
+      let {
+        field,
+        fieldState: {
+          error
+        }
+      } = _ref2;
+      return jsx(Checkbox, {
+        name: field.name,
+        onChange: event => {
+          field.onChange(value ? [...(field.value ?? []), value] : event.target.checked);
+          onChange?.(event);
+        },
+        onBlur: event => {
+          field.onBlur();
+          onBlur?.(event);
+        },
+        onFocus: onFocus,
+        size: size,
+        progress: progress,
+        disabled: field.disabled,
+        checked: Array.isArray(field.value) ? field.value.includes(value) : !!field.value,
+        error: getError({
+          label: label ?? ''
+        }, error),
+        ref: field.ref,
+        className: className,
+        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 { Controller } 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
@@ -19,38 +19,38 @@ const CheckboxGroupField = _ref => {
   const {
     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,
-    name
-  });
-  return jsx(CheckboxGroup, {
-    legend: legend,
-    name: fields.name,
-    value: fields.value,
-    onChange: event => {
-      if (fields.value?.includes(event.currentTarget.value)) {
-        fields.remove(fields.value.indexOf(event.currentTarget?.value));
-      } else {
-        fields.push(event.currentTarget.value);
-      }
-      onChange?.(event);
-    },
-    error: error ?? customError,
-    className: className,
-    direction: direction,
-    helper: helper,
-    required: required,
-    children: children
+  return jsx(Controller, {
+    name: name,
+    render: _ref2 => {
+      let {
+        field,
+        fieldState: {
+          error
+        }
+      } = _ref2;
+      return jsx(CheckboxGroup, {
+        legend: legend,
+        name: name,
+        value: field.value,
+        onChange: event => {
+          const fieldValue = field.value;
+          if (fieldValue?.includes(event.currentTarget.value)) {
+            field.onChange(fieldValue?.filter(currentValue => currentValue !== event.currentTarget.value));
+          } else {
+            field.onChange([...field.value, event.currentTarget.value]);
+          }
+          onChange?.(event);
+        },
+        error: getError({
+          label
+        }, error) ?? customError,
+        className: className,
+        direction: direction,
+        helper: helper,
+        required: required,
+        children: children
+      });
+    }
   });
 };
 CheckboxGroupField.Checkbox = CheckboxGroup.Checkbox;

package/dist/components/DateField/index.js

@@ -1,7 +1,9 @@
 import { DateInput } from '@ultraviolet/ui';
+import { Controller } 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,
@@ -30,67 +29,64 @@ const DateField = _ref => {
   const {
     getError
   } = useErrors();
-  const {
-    input,
-    meta
-  } = useFormField(name, {
-    disabled,
-    formatOnBlur,
-    initialValue,
-    maxDate,
-    minDate,
-    required,
-    validate,
-    value: inputVal
-  });
-  const error = getError({
-    label,
-    maxDate,
-    meta: meta,
-    minDate,
-    name,
-    value: input.value
-  });
-  return jsx(DateInput, {
-    label: label,
-    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);
-          return;
-        }
-        const currentDate = parseDate(input.value);
-        newDate.setHours(currentDate.getHours(), currentDate.getMinutes());
-        input.onChange(newDate);
-      } else if (Array.isArray(val)) {
-        input.onChange(val);
-      }
+  return jsx(Controller, {
+    name: name,
+    rules: {
+      ...rules,
+      validate: {
+        ...rules?.validate,
+        minDate: minDateValidator(minDate),
+        maxDate: maxDateValidator(maxDate)
+      },
+      required
     },
-    onBlur: e => {
-      input.onBlur(e);
-      onBlur?.(e);
-    },
-    onFocus: e => {
-      input.onFocus(e);
-      onFocus?.(e);
-    },
-    maxDate: maxDate,
-    minDate: minDate,
-    startDate: selectsRange ? input.value[0] : undefined,
-    endDate: selectsRange ? input.value[1] : undefined,
-    error: error,
-    disabled: disabled,
-    autoFocus: autoFocus,
-    name: input.name,
-    "data-testid": dataTestId,
-    excludeDates: excludeDates,
-    selectsRange: selectsRange
+    render: _ref2 => {
+      let {
+        field,
+        fieldState: {
+          error
+        }
+      } = _ref2;
+      return jsx(DateInput, {
+        name: field.name,
+        label: label,
+        value: field.value,
+        format: format || (value => value ? parseDate(value).toLocaleDateString() : ''),
+        locale: locale,
+        required: required,
+        onChange: val => {
+          if (val && val instanceof Date) {
+            onChange?.(val);
+            const newDate = parseDate(val);
+            if (isEmpty(field.value)) {
+              field.onChange(newDate);
+              return;
+            }
+            const currentDate = parseDate(field.value);
+            newDate.setHours(currentDate.getHours(), currentDate.getMinutes());
+            field.onChange(newDate);
+          }
+        },
+        onBlur: e => {
+          field.onBlur();
+          onBlur?.(e);
+        },
+        onFocus: onFocus,
+        maxDate: maxDate,
+        minDate: minDate,
+        error: getError({
+          minDate,
+          maxDate,
+          label
+        }, error),
+        disabled: disabled,
+        autoFocus: autoFocus,
+        excludeDates: excludeDates,
+        "data-testid": dataTestId,
+        startDate: selectsRange ? field.value[0] : undefined,
+        endDate: selectsRange ? field.value[1] : undefined
+      });
+    }
   });
 };
 

package/dist/components/Form/defaultErrors.js

@@ -0,0 +1,21 @@
+const defaultErrors = {
+  maxDate: () => '',
+  maxLength: () => '',
+  minLength: () => '',
+  max: () => '',
+  min: () => '',
+  required: () => '',
+  pattern: () => '',
+  deps: () => '',
+  value: () => '',
+  onBlur: () => '',
+  disabled: () => '',
+  onChange: () => '',
+  validate: () => '',
+  setValueAs: () => '',
+  valueAsDate: () => '',
+  valueAsNumber: () => '',
+  shouldUnregister: () => ''
+};
+
+export { defaultErrors };

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/FormSpy/index.js

@@ -0,0 +1,23 @@
+import { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+
+/**
+ * @deprecated
+ */
+const FormSpy = _ref => {
+  let {
+    onChange
+  } = _ref;
+  const {
+    watch
+  } = useForm();
+  useEffect(() => {
+    const subscription = watch(values => onChange?.({
+      values
+    }));
+    return () => subscription.unsubscribe();
+  }, [watch, onChange]);
+  return null;
+};
+
+export { FormSpy };

package/dist/components/NumberInputField/index.js

@@ -1,6 +1,7 @@
 import { NumberInput } from '@ultraviolet/ui';
+import { Controller } 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,48 +18,58 @@ 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
-  });
-  return jsx(NumberInput, {
+    getError
+  } = useErrors();
+  return jsx(Controller, {
     name: name,
-    disabled: disabled,
-    onBlur: event => {
-      input.onBlur(event);
-      onBlur?.(event);
-    },
-    onChange: event => {
-      input.onChange(event);
-      onChange?.(event);
-    },
-    onFocus: event => {
-      input.onFocus(event);
-      onFocus?.(event);
+    rules: {
+      required,
+      max: maxValue,
+      min: minValue,
+      ...rules
     },
-    maxValue: maxValue,
-    minValue: minValue,
-    onMinCrossed: onMinCrossed,
-    onMaxCrossed: onMaxCrossed,
-    size: size,
-    step: step,
-    text: text,
-    value: input.value,
-    className: className,
-    "data-testid": dataTestId
+    render: _ref2 => {
+      let {
+        field,
+        fieldState: {
+          error
+        }
+      } = _ref2;
+      return jsx(NumberInput, {
+        name: field.name,
+        value: field.value,
+        disabled: disabled,
+        onBlur: event => {
+          field.onBlur();
+          onBlur?.(event);
+        },
+        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: onFocus,
+        maxValue: maxValue,
+        minValue: minValue,
+        onMinCrossed: onMinCrossed,
+        onMaxCrossed: onMaxCrossed,
+        size: size,
+        step: step,
+        text: text,
+        className: className,
+        label: label,
+        error: getError({
+          label: label ?? '',
+          max: maxValue,
+          min: minValue
+        }, error)
+      });
+    }
   });
 };