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

package/dist/components/CheckboxField/index.js

@@ -1,75 +1,71 @@
 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) => {
-  let {
-    validate,
-    name,
-    label = '',
-    size,
-    progress,
-    disabled,
-    required,
-    className,
-    children,
-    onChange,
-    onBlur,
-    onFocus,
-    value,
-    helper,
-    tooltip,
-    'data-testid': dataTestId
-  } = _ref;
+const CheckboxField = ({
+  name,
+  label,
+  size,
+  progress,
+  disabled,
+  required,
+  className,
+  children,
+  onChange,
+  onBlur,
+  onFocus,
+  rules,
+  helper,
+  tooltip,
+  'data-testid': dataTestId,
+  value,
+  shouldUnregister = false
+}) => {
   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,
+    shouldUnregister,
+    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,51 +1,49 @@
 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,
-    error: customError,
-    name,
-    required = false
-  } = _ref;
+const CheckboxGroupField = ({
+  legend,
+  className,
+  helper,
+  direction,
+  children,
+  onChange,
+  label = '',
+  error: customError,
+  name,
+  required = false,
+  shouldUnregister = false
+}) => {
   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
+    field,
+    fieldState: {
+      error
+    }
+  } = useController({
+    name,
+    shouldUnregister
   });
   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,96 +1,93 @@
 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;
-const DateField = _ref => {
-  let {
-    required,
-    name,
-    label = '',
-    validate,
-    format,
-    locale,
-    maxDate,
-    minDate,
-    initialValue,
-    disabled,
-    value: inputVal,
-    onChange,
-    onBlur,
-    onFocus,
-    formatOnBlur,
-    autoFocus = false,
-    excludeDates,
-    selectsRange,
-    'data-testid': dataTestId
-  } = _ref;
+const DateField = ({
+  required,
+  name,
+  label = '',
+  format,
+  locale,
+  maxDate,
+  minDate,
+  disabled,
+  onChange,
+  onBlur,
+  onFocus,
+  rules,
+  autoFocus = false,
+  excludeDates,
+  selectsRange,
+  'data-testid': dataTestId,
+  shouldUnregister = false
+}) => {
   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,
+    field,
+    fieldState: {
+      error
+    }
+  } = useController({
     name,
-    value: input.value
+    shouldUnregister,
+    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/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,82 @@
-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 Form = _ref => {
-  let {
-    children,
-    onRawSubmit,
-    errors,
-    initialValues,
-    validateOnBlur,
-    validate,
-    name,
-    render,
-    mutators,
-    keepDirtyOnReinitialize,
-    className
-  } = _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 FormSubmitContext = /*#__PURE__*/React.createContext({});
+const Form = ({
+  children,
+  methods: methodsProp,
+  initialValues,
+  errors,
+  onRawSubmit,
+  name
+}) => {
+  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,54 +1,59 @@
 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 {
-    disabled,
-    maxValue,
-    minValue,
-    name,
-    onChange,
-    onBlur,
-    onFocus,
-    onMaxCrossed,
-    onMinCrossed,
-    required,
-    size,
-    step,
-    text,
-    validate,
-    value,
-    className,
-    'data-testid': dataTestId
-  } = _ref;
+const NumberInputField = ({
+  disabled,
+  maxValue,
+  minValue,
+  name,
+  onChange,
+  onBlur,
+  onFocus,
+  onMaxCrossed,
+  onMinCrossed,
+  required,
+  size,
+  step,
+  text,
+  rules,
+  className,
+  label,
+  shouldUnregister = false
+}) => {
+  const {
+    getError
+  } = useErrors();
   const {
-    input
-  } = useFormField(name, {
-    disabled,
-    required,
-    type: 'number',
-    validate,
-    value,
-    defaultValue: 0,
-    max: maxValue,
-    min: minValue
+    field,
+    fieldState: {
+      error
+    }
+  } = useController({
+    name,
+    shouldUnregister,
+    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 +61,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)
   });
 };