@ultraviolet/form 2.0.0-next.8 → 2.0.0

package/README.md

@@ -3,7 +3,7 @@
 [![npm version](https://badge.fury.io/js/%40ultraviolet%2Fform.svg)](https://badge.fury.io/js/%40ultraviolet%2Fform)
 
 Ultraviolet Form is an extension of Ultraviolet UI including everything to build forms using React.
-It is using [React Final Form](https://final-form.org/react) under the hood.
+It is using [React Hook Form](https://react-hook-form.com/) under the hood.
 
 ## Installation
 
@@ -19,11 +19,13 @@ To use the library you need to put a `ThemeProvider` from `@emotion/react` with
 import { ThemeProvider } from '@emotion/react'
 import { Form, TextInputField } from '@ultraviolet/form'
 import { theme } from '@ultraviolet/ui'
+import { useForm } from '@ultraviolet/form'
 
 export default function App() {
+  const methods = useForm()
   return (
     <ThemeProvider theme={theme}>
-      <Form>
+      <Form methods={methods}>
         <TextInputField name="example" />
       </Form>
     </ThemeProvider>
@@ -31,16 +33,6 @@ export default function App() {
 }
 ```
 
-## Contribute
-
-### Add a validator
-
-- Create a file under `src/validators/` folder
-- Export a default function with a type : (arg: unknown) => ValidatorObject
-- Export it into `src/validators/index.ts`
-- Add the key into the `ValidatorProps` type in `src/types.ts`
-- Add tests into `src/validators/__tests__` folder
-
 ## Documentation
 
 Checkout our [documentation website](https://storybook.ultraviolet.scaleway.com/).

package/dist/components/CheckboxField/index.js

@@ -3,26 +3,25 @@ import { useController } from 'react-hook-form';
 import { jsx } from '@emotion/react/jsx-runtime';
 import { useErrors } from '../../providers/ErrorContext/index.js';
 
-const CheckboxField = _ref => {
-  let {
-    name,
-    label,
-    size,
-    progress,
-    disabled,
-    required,
-    className,
-    children,
-    onChange,
-    onBlur,
-    onFocus,
-    rules,
-    helper,
-    tooltip,
-    'data-testid': dataTestId,
-    value,
-    shouldUnregister = false
-  } = _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();

package/dist/components/CheckboxGroupField/index.js

@@ -3,20 +3,19 @@ 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,
-    className,
-    helper,
-    direction,
-    children,
-    onChange,
-    label = '',
-    error: customError,
-    name,
-    required = false,
-    shouldUnregister = false
-  } = _ref;
+const CheckboxGroupField = ({
+  legend,
+  className,
+  helper,
+  direction,
+  children,
+  onChange,
+  label = '',
+  error: customError,
+  name,
+  required = false,
+  shouldUnregister = false
+}) => {
   const {
     getError
   } = useErrors();

package/dist/components/DateField/index.js

@@ -7,26 +7,25 @@ import { useErrors } from '../../providers/ErrorContext/index.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 = '',
-    format,
-    locale,
-    maxDate,
-    minDate,
-    disabled,
-    onChange,
-    onBlur,
-    onFocus,
-    rules,
-    autoFocus = false,
-    excludeDates,
-    selectsRange,
-    'data-testid': dataTestId,
-    shouldUnregister = false
-  } = _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();

package/dist/components/Form/index.js

@@ -6,15 +6,14 @@ import { jsx } from '@emotion/react/jsx-runtime';
 import { ErrorProvider } from '../../providers/ErrorContext/index.js';
 
 const FormSubmitContext = /*#__PURE__*/React.createContext({});
-const Form = _ref => {
-  let {
-    children,
-    methods: methodsProp,
-    initialValues,
-    errors,
-    onRawSubmit,
-    name
-  } = _ref;
+const Form = ({
+  children,
+  methods: methodsProp,
+  initialValues,
+  errors,
+  onRawSubmit,
+  name
+}) => {
   const methodsHook = useForm({
     defaultValues: initialValues,
     mode: 'onChange'

package/dist/components/NumberInputField/index.js

@@ -3,26 +3,25 @@ import { useController } from 'react-hook-form';
 import { jsx } from '@emotion/react/jsx-runtime';
 import { useErrors } from '../../providers/ErrorContext/index.js';
 
-const NumberInputField = _ref => {
-  let {
-    disabled,
-    maxValue,
-    minValue,
-    name,
-    onChange,
-    onBlur,
-    onFocus,
-    onMaxCrossed,
-    onMinCrossed,
-    required,
-    size,
-    step,
-    text,
-    rules,
-    className,
-    label,
-    shouldUnregister = false
-  } = _ref;
+const NumberInputField = ({
+  disabled,
+  maxValue,
+  minValue,
+  name,
+  onChange,
+  onBlur,
+  onFocus,
+  onMaxCrossed,
+  onMinCrossed,
+  required,
+  size,
+  step,
+  text,
+  rules,
+  className,
+  label,
+  shouldUnregister = false
+}) => {
   const {
     getError
   } = useErrors();

package/dist/components/RadioField/index.js

@@ -3,23 +3,22 @@ import { useController } from 'react-hook-form';
 import { jsx } from '@emotion/react/jsx-runtime';
 import { useErrors } from '../../providers/ErrorContext/index.js';
 
-const RadioField = _ref => {
-  let {
-    className,
-    'data-testid': dataTestId,
-    disabled,
-    id,
-    name,
-    onBlur,
-    label = '',
-    onChange,
-    onFocus,
-    required,
-    value,
-    rules,
-    tooltip,
-    shouldUnregister = false
-  } = _ref;
+const RadioField = ({
+  className,
+  'data-testid': dataTestId,
+  disabled,
+  id,
+  name,
+  onBlur,
+  label = '',
+  onChange,
+  onFocus,
+  required,
+  value,
+  rules,
+  tooltip,
+  shouldUnregister = false
+}) => {
   const {
     getError
   } = useErrors();

package/dist/components/RadioGroupField/index.js

@@ -3,21 +3,20 @@ import { useController } from 'react-hook-form';
 import { jsx } from '@emotion/react/jsx-runtime';
 import { useErrors } from '../../providers/ErrorContext/index.js';
 
-const RadioGroupField = _ref => {
-  let {
-    className,
-    legend = '',
-    name,
-    onChange,
-    required,
-    rules,
-    children,
-    label = '',
-    error: customError,
-    helper,
-    direction,
-    shouldUnregister = false
-  } = _ref;
+const RadioGroupField = ({
+  className,
+  legend = '',
+  name,
+  onChange,
+  required,
+  rules,
+  children,
+  label = '',
+  error: customError,
+  helper,
+  direction,
+  shouldUnregister = false
+}) => {
   const {
     getError
   } = useErrors();

package/dist/components/SelectInputField/index.js

@@ -7,54 +7,51 @@ import { useErrors } from '../../providers/ErrorContext/index.js';
 const identity = x => x;
 // const identity = <T,>(x: T) => x
 
-const SelectInputField = _ref => {
-  let {
-    animation,
-    animationDuration,
-    animationOnChange,
-    children,
-    className,
-    disabled,
-    // error: errorProp,
-    format: formatProp = identity,
-    // formatOnBlur,
-    id,
-    inputId,
-    isClearable,
-    isLoading,
-    isSearchable,
-    label = '',
-    maxLength,
-    menuPortalTarget,
-    minLength,
-    multiple,
-    name,
-    onBlur,
-    onChange,
-    onFocus,
-    options: optionsProp,
-    parse: parseProp = identity,
-    placeholder,
-    readOnly,
-    required,
-    rules,
-    noTopLabel,
-    noOptionsMessage,
-    customStyle,
-    shouldUnregister = false
-  } = _ref;
-  const options = useMemo(() => optionsProp || Children.toArray(children).flat().filter(Boolean).map(_ref2 => {
-    let {
-      props: {
-        children: labelChild,
-        ...option
-      }
-    } = _ref2;
-    return {
-      ...option,
-      label: labelChild
-    };
-  }), [optionsProp, children]);
+const SelectInputField = ({
+  animation,
+  animationDuration,
+  animationOnChange,
+  children,
+  className,
+  disabled,
+  // error: errorProp,
+  format: formatProp = identity,
+  // formatOnBlur,
+  id,
+  inputId,
+  isClearable,
+  isLoading,
+  isSearchable,
+  label = '',
+  maxLength,
+  menuPortalTarget,
+  minLength,
+  multiple,
+  name,
+  onBlur,
+  onChange,
+  onFocus,
+  options: optionsProp,
+  parse: parseProp = identity,
+  placeholder,
+  readOnly,
+  required,
+  rules,
+  noTopLabel,
+  noOptionsMessage,
+  customStyle,
+  shouldUnregister = false,
+  'data-testid': dataTestId
+}) => {
+  const options = useMemo(() => optionsProp || Children.toArray(children).flat().filter(Boolean).map(({
+    props: {
+      children: labelChild,
+      ...option
+    }
+  }) => ({
+    ...option,
+    label: labelChild
+  })), [optionsProp, children]);
   const parse = useMemo(() => multiple ? parseProp : option => parseProp(option?.value ?? null, name), [multiple, parseProp, name]);
   const format = useCallback(val => {
     if (multiple) return formatProp(val, name);
@@ -126,6 +123,7 @@ const SelectInputField = _ref => {
     required: required,
     value: format(field.value),
     noOptionsMessage: noOptionsMessage,
+    "data-testid": dataTestId,
     children: children
   });
 };

package/dist/components/SelectableCardField/index.js

@@ -2,25 +2,25 @@ import { SelectableCard } from '@ultraviolet/ui';
 import { useController } from 'react-hook-form';
 import { jsx } from '@emotion/react/jsx-runtime';
 
-const SelectableCardField = _ref => {
-  let {
-    name,
-    value,
-    onChange,
-    showTick,
-    type,
-    disabled,
-    children,
-    className,
-    onFocus,
-    onBlur,
-    required,
-    tooltip,
-    id,
-    label,
-    rules,
-    shouldUnregister = false
-  } = _ref;
+const SelectableCardField = ({
+  name,
+  value,
+  onChange,
+  showTick,
+  type,
+  disabled,
+  children,
+  className,
+  onFocus,
+  onBlur,
+  required,
+  tooltip,
+  id,
+  label,
+  rules,
+  shouldUnregister = false,
+  'data-testid': dataTestId
+}) => {
   const {
     field,
     fieldState: {
@@ -34,14 +34,24 @@ const SelectableCardField = _ref => {
       ...rules
     }
   });
+  const isChecked = type === 'checkbox' && Array.isArray(field.value) && value ? (field.value ?? []).includes(value) : field.value === value;
   return jsx(SelectableCard, {
     isError: !!error,
     showTick: showTick,
-    checked: field.value === value,
+    checked: isChecked,
     className: className,
     disabled: disabled,
     onChange: event => {
-      field.onChange(event);
+      if (type === 'checkbox') {
+        const fieldValue = field.value ?? [];
+        if (fieldValue?.includes(event.currentTarget.value)) {
+          field.onChange(fieldValue?.filter(currentValue => currentValue !== event.currentTarget.value));
+        } else {
+          field.onChange([...fieldValue, event.currentTarget.value]);
+        }
+      } else {
+        field.onChange(event);
+      }
       onChange?.(event);
     },
     onBlur: event => {
@@ -57,6 +67,7 @@ const SelectableCardField = _ref => {
     label: label,
     value: value ?? '',
     name: field.name,
+    "data-testid": dataTestId,
     children: children
   });
 };

package/dist/components/Submit/index.js

@@ -2,20 +2,19 @@ import { Button } from '@ultraviolet/ui';
 import { useFormState } from 'react-hook-form';
 import { jsx } from '@emotion/react/jsx-runtime';
 
-const Submit = _ref => {
-  let {
-    children,
-    className,
-    disabled = false,
-    icon,
-    iconPosition,
-    size,
-    variant = 'filled',
-    sentiment = 'primary',
-    tooltip,
-    fullWidth,
-    onClick
-  } = _ref;
+const Submit = ({
+  children,
+  className,
+  disabled = false,
+  icon,
+  iconPosition,
+  size,
+  variant = 'filled',
+  sentiment = 'primary',
+  tooltip,
+  fullWidth,
+  onClick
+}) => {
   const {
     isSubmitting,
     isValid

package/dist/components/SubmitErrorAlert/index.js

@@ -2,10 +2,9 @@ import { Alert } from '@ultraviolet/ui';
 import { useFormState } from 'react-hook-form';
 import { jsx } from '@emotion/react/jsx-runtime';
 
-const SubmitErrorAlert = _ref => {
-  let {
-    className
-  } = _ref;
+const SubmitErrorAlert = ({
+  className
+}) => {
   const {
     errors
   } = useFormState();

package/dist/components/TagInputField/index.js

@@ -2,19 +2,19 @@ import { TagInput } from '@ultraviolet/ui';
 import { useController } from 'react-hook-form';
 import { jsx } from '@emotion/react/jsx-runtime';
 
-const TagInputField = _ref => {
-  let {
-    className,
-    disabled,
-    id,
-    name,
-    onChange,
-    placeholder,
-    required,
-    rules,
-    variant,
-    shouldUnregister = false
-  } = _ref;
+const TagInputField = ({
+  className,
+  disabled,
+  id,
+  name,
+  onChange,
+  placeholder,
+  required,
+  rules,
+  variant,
+  shouldUnregister = false,
+  'data-testid': dataTestId
+}) => {
   const {
     field
   } = useController({
@@ -36,7 +36,8 @@ const TagInputField = _ref => {
     },
     placeholder: placeholder,
     variant: variant,
-    tags: field.value
+    tags: field.value,
+    "data-testid": dataTestId
   });
 };