@ultraviolet/form 2.0.0-next.9 → 2.0.1

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

@@ -34,14 +34,24 @@ const SelectableCardField = ({
       ...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 => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/form",
-  "version": "2.0.0-next.9",
+  "version": "2.0.1",
   "description": "Ultraviolet Form",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -32,14 +32,14 @@
     "default": "./dist/index.js"
   },
   "peerDependencies": {
-    "@emotion/react": "11.11.1",
+    "@emotion/react": "11.11.3",
     "@emotion/styled": "11.11.0",
     "react": "18.x",
     "react-dom": "18.x",
-    "react-hook-form": "7.47.0"
+    "react-hook-form": "7.49.2"
   },
   "devDependencies": {
-    "@babel/core": "7.23.6",
+    "@babel/core": "7.23.7",
     "@types/final-form-focus": "1.1.7",
     "@types/react": "18.2.45",
     "@types/react-dom": "18.2.18",
@@ -47,15 +47,16 @@
     "react-dom": "18.2.0"
   },
   "dependencies": {
-    "@babel/runtime": "7.23.6",
+    "@babel/runtime": "7.23.7",
     "@emotion/babel-plugin": "11.11.0",
-    "@emotion/react": "11.11.1",
+    "@emotion/react": "11.11.3",
     "@emotion/styled": "11.11.0",
     "react-select": "5.8.0",
-    "react-hook-form": "^7.47.0",
-    "@ultraviolet/ui": "1.29.1"
+    "react-hook-form": "7.49.2",
+    "@ultraviolet/ui": "1.29.3"
   },
   "scripts": {
-    "build": "rollup -c ../../rollup.config.mjs"
+    "build": "rollup -c ../../rollup.config.mjs",
+    "typecheck": "tsc --noEmit"
   }
 }

package/dist/components/FormSpy/index.js

@@ -1,23 +0,0 @@
-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/helpers/pickValidators.js

@@ -1,5 +0,0 @@
-import validators from '../validators/index.js';
-
-const pickValidators = args => Object.entries(args).map(([key, value]) => value !== undefined ? validators[key]?.(value) : undefined).filter(validator => !!validator);
-
-export { pickValidators };

package/dist/hooks/useFormField.js

@@ -1,74 +0,0 @@
-import { useMemo } from 'react';
-import { useField } from 'react-final-form';
-import { useValidation } from './useValidation.js';
-import { pickValidators } from '../helpers/pickValidators.js';
-
-const useFormField = (name, {
-  afterSubmit,
-  disabled,
-  allowNull,
-  beforeSubmit,
-  defaultValue,
-  format,
-  formatOnBlur,
-  initialValue,
-  isEqual,
-  multiple,
-  parse,
-  subscription,
-  type,
-  validate,
-  validateFields,
-  value,
-  max,
-  maxLength,
-  min,
-  minLength,
-  regex,
-  required,
-  maxDate,
-  minDate
-}) => {
-  const serializedRegex = useMemo(() => regex?.toString(), [regex]);
-  const validators = useMemo(() => pickValidators({
-    max,
-    maxDate,
-    maxLength,
-    min,
-    minDate,
-    minLength,
-    regex,
-    required
-  }),
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [max, maxLength, min, minLength, required, serializedRegex, maxDate, minDate]);
-  const validateFn = useValidation({
-    validate,
-    validators
-  });
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const data = useMemo(() => ({
-    key: Math.random()
-  }), [validateFn, disabled]);
-  return useField(name, {
-    afterSubmit,
-    allowNull,
-    beforeSubmit,
-    defaultValue,
-    format,
-    formatOnBlur,
-    initialValue,
-    isEqual,
-    multiple,
-    parse,
-    subscription,
-    type,
-    validate: disabled ? undefined : validateFn,
-    validateFields,
-    value,
-    data
-  });
-};
-
-export { useFormField };

package/dist/hooks/useValidation.js

@@ -1,19 +0,0 @@
-import { useCallback } from 'react';
-
-const useValidation = ({
-  validators,
-  validate
-}) => useCallback((value, allValues, meta) => {
-  if (validate) {
-    const validateErr = validate(value, allValues, meta);
-    if (validateErr !== undefined && validateErr !== true) {
-      return validateErr;
-    }
-  }
-  const errors = validators.filter(validator => !validator.validate(value, allValues, meta)).map(({
-    error
-  }) => error);
-  return errors.length > 0 ? errors : undefined;
-}, [validate, validators]);
-
-export { useValidation };

package/dist/validators/index.js

@@ -1,21 +0,0 @@
-import { maxValidator } from './max.js';
-import { maxDateValidator } from './maxDate.js';
-import { maxLengthValidator } from './maxLength.js';
-import { minValidator } from './min.js';
-import { minDateValidator } from './minDate.js';
-import { minLengthValidator } from './minLength.js';
-import { regexValidator } from './regex.js';
-import { requiredValidator } from './required.js';
-
-var validators = {
-  max: maxValidator,
-  maxDate: maxDateValidator,
-  maxLength: maxLengthValidator,
-  min: minValidator,
-  minDate: minDateValidator,
-  minLength: minLengthValidator,
-  regex: regexValidator,
-  required: requiredValidator
-};
-
-export { validators as default };

package/dist/validators/max.js

@@ -1,6 +0,0 @@
-const maxValidator = max => ({
-  error: 'TOO_HIGH',
-  validate: value => value === undefined || Number(value) <= max
-});
-
-export { maxValidator };

package/dist/validators/maxLength.js

@@ -1,6 +0,0 @@
-const maxLengthValidator = maxLength => ({
-  error: 'MAX_LENGTH',
-  validate: value => value === undefined || value.length <= maxLength
-});
-
-export { maxLengthValidator };

package/dist/validators/min.js

@@ -1,6 +0,0 @@
-const minValidator = min => ({
-  error: 'TOO_LOW',
-  validate: value => value === undefined || Number(value) >= min
-});
-
-export { minValidator };

package/dist/validators/minLength.js

@@ -1,6 +0,0 @@
-const minLengthValidator = minLength => ({
-  error: 'MIN_LENGTH',
-  validate: value => value === undefined || value.length >= minLength
-});
-
-export { minLengthValidator };

package/dist/validators/regex.js

@@ -1,6 +0,0 @@
-const regexValidator = regexes => ({
-  error: 'REGEX',
-  validate: value => regexes.every(regex => value === undefined || value === '' || (Array.isArray(regex) ? regex.some(regexOr => regexOr.test(value)) : regex.test(value)))
-});
-
-export { regexValidator };

package/dist/validators/required.js

@@ -1,6 +0,0 @@
-const requiredValidator = required => ({
-  error: 'REQUIRED',
-  validate: value => required ? !!value : true
-});
-
-export { requiredValidator };