@colisweb/rescript-toolkit 4.7.2 → 4.8.1

package/bsconfig.json

@@ -28,7 +28,6 @@
     "reason-promise",
     "decco",
     "rescript-classnames",
-    "reschema",
     "rescript-react-update",
     "@colisweb/restorative"
   ],

package/locale/fr.json

@@ -54,11 +54,6 @@
     "defaultMessage": "Seulement",
     "message": "Seulement"
   },
-  {
-    "id": "_471931e7",
-    "defaultMessage": "Le champ est requis.",
-    "message": "Le champ est requis."
-  },
   {
     "id": "_491a4e71",
     "defaultMessage": "Tapez au moins {minSearchLength, plural, one {1 caractère} other {# caractères}}",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colisweb/rescript-toolkit",
-  "version": "4.7.2",
+  "version": "4.8.1",
   "type": "module",
   "scripts": {
     "clean": "rescript clean",
@@ -64,7 +64,6 @@
     "react-use": "17.4.0",
     "reason-promise": "1.1.5",
     "res-react-intl": "3.1.2",
-    "reschema": "1.3.1",
     "rescript": "10.1.4",
     "rescript-classnames": "6.0.0",
     "rescript-react-update": "5.0.0",

package/src/form/ReSchema.res

@@ -0,0 +1,322 @@
+module type Lenses = {
+  type field<'a>
+  type state
+  let set: (state, field<'a>, 'a) => state
+  let get: (state, field<'a>) => 'a
+}
+
+type childFieldError = {
+  error: string,
+  index: int,
+  name: string,
+}
+
+type fieldState =
+  | Valid
+  | NestedErrors(array<childFieldError>)
+  | Error(string)
+
+type recordValidationState<'a> =
+  | Valid
+  | Errors(array<('a, fieldState)>)
+
+module Make = (Lenses: Lenses) => {
+  type rec field = Field(Lenses.field<'a>): field
+
+  module Validation = {
+    type rec t =
+      | Email({field: Lenses.field<string>, error: option<string>}): t
+      | NoValidation({field: Lenses.field<'a>}): t
+      | StringNonEmpty({field: Lenses.field<string>, error: option<string>}): t
+      | StringRegExp({field: Lenses.field<string>, matches: string, error: option<string>}): t
+      | StringMin({field: Lenses.field<string>, min: int, error: option<string>}): t
+      | StringMax({field: Lenses.field<string>, max: int, error: option<string>}): t
+      | IntMin({field: Lenses.field<int>, min: int, error: option<string>}): t
+      | IntMax({field: Lenses.field<int>, max: int, error: option<string>}): t
+      | FloatMin({field: Lenses.field<float>, min: float, error: option<string>}): t
+      | FloatMax({field: Lenses.field<float>, max: float, error: option<string>}): t
+      | Custom({field: Lenses.field<'a>, predicate: Lenses.state => fieldState}): t
+      | True({field: Lenses.field<bool>, error: option<string>}): t
+      | False({field: Lenses.field<bool>, error: option<string>}): t
+      | OptionNonEmpty({field: Lenses.field<option<'a>>, error: option<string>}): t
+      | ArrayNonEmpty({field: Lenses.field<array<'a>>, error: option<string>}): t
+
+    type schema = array<t>
+
+    let schema = validations => validations->Belt.Array.concatMany
+
+    let mergeValidators = validations => {
+      validations->Belt.Array.reduce([], (rules, (rule, apply)) =>
+        switch rule {
+        | None => rules
+        | Some(rule) => rules->Belt.Array.concat([rule->apply])
+        }
+      )
+    }
+
+    let custom = (field, predicate) => [Custom({field, predicate})]
+
+    let optionNonEmpty = (~error=?, field) => [OptionNonEmpty({field, error})]
+
+    let arrayNonEmpty = (~error=?, field) => [ArrayNonEmpty({field, error})]
+
+    let true_ = (~error=?, field) => [True({field, error})]
+
+    let false_ = (~error=?, field) => [False({field, error})]
+
+    let email = (~error=?, field) => [Email({field, error})]
+
+    let nonEmpty = (~error=?, field) => [StringNonEmpty({field, error})]
+
+    let string = (~min=?, ~minError=?, ~max=?, ~maxError=?, field) => {
+      mergeValidators([
+        (
+          min,
+          min => StringMin({
+            field,
+            min,
+            error: minError,
+          }),
+        ),
+        (
+          max,
+          max => StringMax({
+            field,
+            max,
+            error: maxError,
+          }),
+        ),
+      ])
+    }
+
+    let regExp = (~error=?, ~matches, field) => [StringRegExp({field, matches, error})]
+
+    let float = (~min=?, ~minError=?, ~max=?, ~maxError=?, field) => {
+      mergeValidators([
+        (
+          min,
+          min => FloatMin({
+            field,
+            min,
+            error: minError,
+          }),
+        ),
+        (
+          max,
+          max => FloatMax({
+            field,
+            max,
+            error: maxError,
+          }),
+        ),
+      ])
+    }
+
+    let int = (~min=?, ~minError=?, ~max=?, ~maxError=?, field) => {
+      mergeValidators([
+        (
+          min,
+          min => IntMin({
+            field,
+            min,
+            error: minError,
+          }),
+        ),
+        (
+          max,
+          max => IntMax({
+            field,
+            max,
+            error: maxError,
+          }),
+        ),
+      ])
+    }
+  }
+
+  let validateField = (~validator, ~values, ~i18n: ReSchemaI18n.t): (field, fieldState) =>
+    switch validator {
+    | Validation.True({field, error}) =>
+      let value = Lenses.get(values, field)
+      (Field(field), value ? Valid : Error(error->Belt.Option.getWithDefault(i18n.true_())))
+    | Validation.False({field, error}) =>
+      let value = Lenses.get(values, field)
+      (
+        Field(field),
+        value == false ? Valid : Error(error->Belt.Option.getWithDefault(i18n.false_())),
+      )
+    | Validation.IntMin({field, min, error}) =>
+      let value = Lenses.get(values, field)
+      (
+        Field(field),
+        value >= min ? Valid : Error(error->Belt.Option.getWithDefault(i18n.intMin(~value, ~min))),
+      )
+    | Validation.IntMax({field, max, error}) =>
+      let value = Lenses.get(values, field)
+
+      (
+        Field(field),
+        value <= max ? Valid : Error(error->Belt.Option.getWithDefault(i18n.intMax(~value, ~max))),
+      )
+    | Validation.FloatMin({field, min, error}) =>
+      let value = Lenses.get(values, field)
+      (
+        Field(field),
+        value >= min
+          ? Valid
+          : Error(error->Belt.Option.getWithDefault(i18n.floatMin(~value, ~min))),
+      )
+    | Validation.FloatMax({field, max, error}) =>
+      let value = Lenses.get(values, field)
+      (
+        Field(field),
+        Lenses.get(values, field) <= max
+          ? Valid
+          : Error(error->Belt.Option.getWithDefault(i18n.floatMax(~value, ~max))),
+      )
+    | Validation.Email({field, error}) =>
+      let value = Lenses.get(values, field)
+      (
+        Field(field),
+        Js.Re.test_(ReSchemaRegExp.email, value)
+          ? Valid
+          : Error(error->Belt.Option.getWithDefault(i18n.email(~value))),
+      )
+    | Validation.NoValidation({field}) => (Field(field), Valid)
+    | Validation.StringNonEmpty({field, error}) =>
+      let value = Lenses.get(values, field)
+      (
+        Field(field),
+        value === ""
+          ? Error(error->Belt.Option.getWithDefault(i18n.stringNonEmpty(~value)))
+          : Valid,
+      )
+    | Validation.StringRegExp({field, matches, error}) =>
+      let value = Lenses.get(values, field)
+      (
+        Field(field),
+        Js.Re.test_(Js.Re.fromString(matches), value)
+          ? Valid
+          : Error(error->Belt.Option.getWithDefault(i18n.stringRegExp(~value, ~pattern=matches))),
+      )
+    | Validation.StringMin({field, min, error}) =>
+      let value = Lenses.get(values, field)
+      (
+        Field(field),
+        Js.String.length(value) >= min
+          ? Valid
+          : Error(error->Belt.Option.getWithDefault(i18n.stringMin(~value, ~min))),
+      )
+    | Validation.StringMax({field, max, error}) =>
+      let value = Lenses.get(values, field)
+      (
+        Field(field),
+        Js.String.length(value) <= max
+          ? Valid
+          : Error(error->Belt.Option.getWithDefault(i18n.stringMax(~value, ~max))),
+      )
+    | Validation.Custom({field, predicate}) => (Field(field), predicate(values))
+
+    | Validation.OptionNonEmpty({field, error}) => {
+        let value = Lenses.get(values, field)
+
+        (
+          Field(field),
+          value->Option.isNone
+            ? Error(error->Belt.Option.getWithDefault(i18n.stringNonEmpty(~value="")))
+            : Valid,
+        )
+      }
+    | Validation.ArrayNonEmpty({field, error}) => {
+        let value = Lenses.get(values, field)
+
+        (
+          Field(field),
+          value->Array.length == 0
+            ? Error(error->Belt.Option.getWithDefault(i18n.stringNonEmpty(~value="")))
+            : Valid,
+        )
+      }
+    }
+
+  let getFieldValidator = (~validators, ~fieldName) =>
+    validators->Belt.Array.getBy(validator =>
+      switch validator {
+      | Validation.False({field}) => Field(field) == fieldName
+      | Validation.True({field}) => Field(field) == fieldName
+      | Validation.IntMin({field}) => Field(field) == fieldName
+      | Validation.IntMax({field}) => Field(field) == fieldName
+      | Validation.FloatMin({field}) => Field(field) == fieldName
+      | Validation.FloatMax({field}) => Field(field) == fieldName
+      | Validation.Email({field}) => Field(field) == fieldName
+      | Validation.NoValidation({field}) => Field(field) == fieldName
+      | Validation.StringNonEmpty({field}) => Field(field) == fieldName
+      | Validation.StringRegExp({field}) => Field(field) == fieldName
+      | Validation.StringMin({field}) => Field(field) == fieldName
+      | Validation.StringMax({field}) => Field(field) == fieldName
+      | Validation.Custom({field}) => Field(field) == fieldName
+      | Validation.OptionNonEmpty({field}) => Field(field) == fieldName
+      | Validation.ArrayNonEmpty({field}) => Field(field) == fieldName
+      }
+    )
+
+  let getFieldValidators = (~validators, ~fieldName) =>
+    validators->Belt.Array.keep(validator =>
+      switch validator {
+      | Validation.False({field}) => Field(field) == fieldName
+      | Validation.True({field}) => Field(field) == fieldName
+      | Validation.IntMin({field}) => Field(field) == fieldName
+      | Validation.IntMax({field}) => Field(field) == fieldName
+      | Validation.FloatMin({field}) => Field(field) == fieldName
+      | Validation.FloatMax({field}) => Field(field) == fieldName
+      | Validation.Email({field}) => Field(field) == fieldName
+      | Validation.NoValidation({field}) => Field(field) == fieldName
+      | Validation.StringNonEmpty({field}) => Field(field) == fieldName
+      | Validation.StringRegExp({field}) => Field(field) == fieldName
+      | Validation.StringMin({field}) => Field(field) == fieldName
+      | Validation.StringMax({field}) => Field(field) == fieldName
+      | Validation.Custom({field}) => Field(field) == fieldName
+      | Validation.OptionNonEmpty({field}) => Field(field) == fieldName
+      | Validation.ArrayNonEmpty({field}) => Field(field) == fieldName
+      }
+    )
+
+  let validateOne = (
+    ~field: field,
+    ~values,
+    ~i18n=ReSchemaI18n.default,
+    schema: Validation.schema,
+  ) => {
+    getFieldValidators(~validators=schema, ~fieldName=field)
+    ->Belt.Array.map(validator => validateField(~validator, ~values, ~i18n))
+    ->Belt.Array.getBy(validation => {
+      switch validation {
+      | (_, Error(_)) => true
+      | _ => false
+      }
+    })
+  }
+
+  let validateFields = (~fields, ~values, ~i18n, schema: Validation.schema) => {
+    Belt.Array.map(fields, field =>
+      getFieldValidator(~validators=schema, ~fieldName=field)->Belt.Option.map(validator =>
+        validateField(~validator, ~values, ~i18n)
+      )
+    )
+  }
+
+  let validate = (~i18n=ReSchemaI18n.default, values: Lenses.state, schema: Validation.schema) => {
+    let validationList =
+      schema->Belt.Array.map(validator => validateField(~validator, ~values, ~i18n))
+
+    let errors = validationList->Belt.Array.keepMap(((field, fieldState)) =>
+      switch fieldState {
+      | Error(_) as e => Some((field, e))
+      | NestedErrors(_) as e => Some((field, e))
+      | _ => None
+      }
+    )
+
+    Belt.Array.length(errors) > 0 ? Errors(errors) : Valid
+  }
+}

package/src/form/ReSchemaI18n.res

@@ -0,0 +1,34 @@
+type t = {
+  false_: unit => string,
+  true_: unit => string,
+  intMin: (~value: int, ~min: int) => string,
+  intMax: (~value: int, ~max: int) => string,
+  floatMin: (~value: float, ~min: float) => string,
+  floatMax: (~value: float, ~max: float) => string,
+  email: (~value: string) => string,
+  stringNonEmpty: (~value: string) => string,
+  stringRegExp: (~value: string, ~pattern: string) => string,
+  stringMin: (~value: string, ~min: int) => string,
+  stringMax: (~value: string, ~max: int) => string,
+}
+
+let default = {
+  false_: () => "This value should be false",
+  true_: () => "This value should be true",
+  intMin: (~value as _value, ~min) =>
+    "This value must be greater than or equal to " ++ string_of_int(min),
+  intMax: (~value as _value, ~max) =>
+    "This value must be less than or equal to " ++ string_of_int(max),
+  floatMin: (~value as _value, ~min) =>
+    "This value must be greater than or equal to " ++ Js.Float.toString(min),
+  floatMax: (~value as _value, ~max) =>
+    "This value must be less than or equal to " ++ Js.Float.toString(max),
+  email: (~value) => value ++ " is not a valid email",
+  stringNonEmpty: (~value as _) => "String must not be empty",
+  stringRegExp: (~value as _value, ~pattern) =>
+    "This value must match the following: /" ++ pattern ++ "/",
+  stringMin: (~value as _value, ~min) =>
+    "This value must be at least " ++ string_of_int(min) ++ " characters",
+  stringMax: (~value as _value, ~max) =>
+    "This value must be at most " ++ string_of_int(max) ++ " characters",
+}

package/src/form/ReSchemaRegExp.res

@@ -0,0 +1,5 @@
+// From https://github.com/jquense/yup/blob/92668947dafc2bb60bb7565c53b39091a6213167/src/string.ts#L22
+
+let email = %re(
+  "/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/"
+)

package/src/form/Reform.res

@@ -1,3 +1,5 @@
+open ReactIntl
+
 module type Config = {
   type field<'a>
   type state
@@ -5,9 +7,13 @@ module type Config = {
   let get: (state, field<'a>) => 'a
   type error
 }
+
+type childFieldError = ReSchema.childFieldError
+
 type fieldState =
   | Pristine
   | Valid
+  | NestedErrors(array<ReSchema.childFieldError>)
   | Error(string)
 type formState<'error> =
   | Pristine
@@ -53,6 +59,7 @@ module Make = (Config: Config) => {
     state: state,
     getFieldState: field => fieldState,
     getFieldError: field => option<string>,
+    getNestedFieldError: (field, int) => array<childFieldError>,
     handleChange: 'a. (Config.field<'a>, 'a) => unit,
     arrayPush: 'a. (Config.field<array<'a>>, 'a) => unit,
     arrayUpdateByIndex: 'a. (~field: Config.field<array<'a>>, ~index: int, 'a) => unit,
@@ -92,20 +99,23 @@ module Make = (Config: Config) => {
     | OnDemand
 
   let getInitialFieldsState: Validation.schema => array<(field, fieldState)> = schema => {
-    let Validation.Schema(validators) = schema
-    validators->Belt.Array.map(validator =>
+    schema->Belt.Array.map(validator =>
       switch validator {
-      | Validation.IntMin(field, _min) => (ReSchema.Field(field), (Pristine: fieldState))
-      | Validation.IntMax(field, _max) => (Field(field), Pristine)
-      | Validation.FloatMin(field, _min) => (Field(field), Pristine)
-      | Validation.FloatMax(field, _max) => (Field(field), Pristine)
-      | Validation.Email(field) => (Field(field), Pristine)
-      | Validation.NoValidation(field) => (Field(field), Pristine)
-      | Validation.StringNonEmpty(field) => (Field(field), Pristine)
-      | Validation.StringRegExp(field, _regexp) => (Field(field), Pristine)
-      | Validation.StringMin(field, _min) => (Field(field), Pristine)
-      | Validation.StringMax(field, _max) => (Field(field), Pristine)
-      | Validation.Custom(field, _predicate) => (Field(field), Pristine)
+      | Validation.IntMin({field}) => (ReSchema.Field(field), (Pristine: fieldState))
+      | Validation.True({field}) => (Field(field), Pristine)
+      | Validation.False({field}) => (Field(field), Pristine)
+      | Validation.IntMax({field}) => (Field(field), Pristine)
+      | Validation.FloatMin({field}) => (Field(field), Pristine)
+      | Validation.FloatMax({field}) => (Field(field), Pristine)
+      | Validation.Email({field}) => (Field(field), Pristine)
+      | Validation.NoValidation({field}) => (Field(field), Pristine)
+      | Validation.StringNonEmpty({field}) => (Field(field), Pristine)
+      | Validation.StringRegExp({field}) => (Field(field), Pristine)
+      | Validation.StringMin({field}) => (Field(field), Pristine)
+      | Validation.StringMax({field}) => (Field(field), Pristine)
+      | Validation.Custom({field}) => (Field(field), Pristine)
+      | Validation.OptionNonEmpty({field}) => (Field(field), Pristine)
+      | Validation.ArrayNonEmpty({field}) => (Field(field), Pristine)
       }
     )
   }
@@ -126,10 +136,30 @@ module Make = (Config: Config) => {
     }
   }
 
-  module Provider = {
+  module FormProvider = {
     let make = React.Context.provider(formContext)
   }
 
+  module Provider = {
+    @react.component
+    let make = (~id=?, ~className=?, ~children, ~form) => {
+      <FormProvider value={form}>
+        <form
+          ?id
+          ?className
+          onSubmit={event => {
+            ReactEvent.Synthetic.preventDefault(event)
+            form.submit()
+          }}>
+          children
+          <Toolkit__Ui_VisuallyHidden>
+            <input type_="submit" hidden=true />
+          </Toolkit__Ui_VisuallyHidden>
+        </form>
+      </FormProvider>
+    }
+  }
+
   module Field = {
     @react.component
     let make = (
@@ -146,13 +176,16 @@ module Make = (Config: Config) => {
 
   let use = (
     ~initialState,
-    ~schema: Validation.schema,
+    ~schema=[]: Validation.schema,
     ~onSubmit,
     ~onSubmitFail=ignore,
-    ~i18n=ReSchemaI18n.default,
-    ~validationStrategy=OnChange,
+    ~i18n=?,
+    ~validationStrategy=OnDemand,
     (),
   ) => {
+    let intl = useIntl()
+    let i18n = i18n->Option.getWithDefault(Toolkit__FormValidationFunctions.i18n(intl))
+
     let (state, send) = ReactUpdate.useReducerWithMapState(
       (state, action) => {
         switch action {
@@ -165,6 +198,13 @@ module Make = (Config: Config) => {
                 state: self.state,
                 raiseSubmitFailed: error => self.send(RaiseSubmitFailed(error)),
               })
+              ->Promise.tap(x =>
+                switch x {
+                | Ok(_) => self.send(SetFormState(SubmitSucceed))
+                | Error(error) => self.send(SetFormState(SubmitFailed(Some(error))))
+                }
+              )
+              ->ignore
 
               None
             },
@@ -180,26 +220,27 @@ module Make = (Config: Config) => {
         | ValidateField(field) =>
           SideEffects(
             self => {
-              let fieldState =
-                schema |> ReSchema.validateOne(~field, ~values=self.state.values, ~i18n)
-              let newFieldState: option<fieldState> = fieldState->Belt.Option.map(x =>
-                switch x {
+              let fieldState = ReSchema.validateOne(
+                ~field,
+                ~values=self.state.values,
+                ~i18n,
+                schema,
+              )
+              let newFieldState: fieldState = switch fieldState {
+              | None => Valid
+              | Some(fieldState) =>
+                switch fieldState {
                 | (_, Error(message)) => Error(message)
+                | (_, NestedErrors(errors)) => NestedErrors(errors)
                 | (_, Valid) => Valid
                 }
-              )
+              }
 
               let newFieldsState =
                 state.fieldsState
-                ->Belt.Array.keep(elem =>
-                  elem |> (((fieldValue, _fieldState)) => fieldValue != field)
-                )
-                ->Belt.Array.concat(
-                  switch newFieldState {
-                  | Some(fieldState) => [(field, fieldState)]
-                  | None => []
-                  },
-                )
+                ->Belt.Array.keep(((value, _)) => value != field)
+                ->Belt.Array.concat([(field, newFieldState)])
+
               self.send(SetFieldsState(newFieldsState))
               None
             },
@@ -207,23 +248,38 @@ module Make = (Config: Config) => {
         | ValidateForm(submit) =>
           SideEffects(
             self => {
-              let recordState = schema |> ReSchema.validate(~i18n, self.state.values)
+              let recordState = ReSchema.validate(~i18n, self.state.values, schema)
 
               switch recordState {
-              | Valid =>
-                self.send(SetFormState(Valid))
-                submit ? self.send(Submit) : ()
+              | Valid => {
+                  let newFieldsState: array<(field, fieldState)> =
+                    self.state.fieldsState->Belt.Array.map(((field, _)) => (
+                      field,
+                      (Valid: fieldState),
+                    ))
+                  self.send(SetFieldsState(newFieldsState))
+                  submit ? self.send(Submit) : ()
+                }
               | Errors(erroredFields) =>
-                let newFieldsState =
-                  erroredFields->Belt.Array.map(((field, errorMessage)) => (
-                    field,
-                    Error(errorMessage),
-                  ))
+                let newFieldsState: array<(field, fieldState)> = erroredFields->Belt.Array.map(((
+                  field,
+                  err,
+                )) => (
+                  field,
+                  switch err {
+                  | Error(e) => Error(e)
+                  | NestedErrors(e) => NestedErrors(e)
+                  | Valid => Valid
+                  },
+                ))
                 self.send(SetFieldsState(newFieldsState))
                 submit
                   ? onSubmitFail({
                       send: self.send,
-                      state: self.state,
+                      state: {
+                        ...self.state,
+                        fieldsState: newFieldsState,
+                      },
                       raiseSubmitFailed: error => self.send(RaiseSubmitFailed(error)),
                     })
                   : ()
@@ -328,10 +384,19 @@ module Make = (Config: Config) => {
         x =>
           switch x {
           | Error(error) => Some(error)
+          | NestedErrors(_errors) => None
           | _ => None
           }
       )
 
+    let getNestedFieldError = (field, index) =>
+      switch getFieldState(field) {
+      | NestedErrors(errors) => errors->Array.keep(error => error.index === index)
+      | Pristine
+      | Valid
+      | Error(_) => []
+      }
+
     let validateFields = (fields: array<field>) => {
       let fieldsValidated = ReSchema.validateFields(~fields, ~values=state.values, ~i18n, schema)
 
@@ -354,6 +419,7 @@ module Make = (Config: Config) => {
                   switch newFieldStateValidated {
                   | Valid => [(field, (Valid: fieldState))]
                   | Error(message) => [(field, Error(message))]
+                  | NestedErrors(message) => [(field, NestedErrors(message))]
                   }
 
                 | None => []
@@ -386,6 +452,7 @@ module Make = (Config: Config) => {
         shouldValidate ? send(FieldChangeValue(field, value)) : send(SetFieldValue(field, value)),
       getFieldState,
       getFieldError,
+      getNestedFieldError,
       handleChange: (field, value) => send(FieldChangeValue(field, value)),
       arrayPush: (field, value) => send(FieldArrayAdd(field, value)),
       arrayUpdateByIndex: (~field, ~index, value) =>

package/src/form/Toolkit__Form.res

@@ -1,19 +1,5 @@
 open ReactIntl
 
-module Helpers = {
-  let handleChange = (handleChange, event) => handleChange(ReactEvent.Form.target(event)["value"])
-
-  let handleSubmit = (handleSubmit, event) => {
-    ReactEvent.Synthetic.preventDefault(event)
-    handleSubmit()
-  }
-}
-
-module Msg = {
-  @@intl.messages
-  let optionNonEmpty = {defaultMessage: "Le champ est requis."}
-}
-
 module ErrorMessage = {
   @react.component
   let make = (~error=?, ~className="") =>
@@ -33,83 +19,12 @@ module type Config = {
 }
 
 module Make = (StateLenses: Config) => {
-  module Form = {
-    include Reform.Make(StateLenses)
-
-    let use = (
-      ~initialState,
-      ~schema=Validation.Schema([]),
-      ~onSubmit=?,
-      ~onSubmitFail=ignore,
-      ~validationStrategy=OnDemand,
-      (),
-    ): api => {
-      let intl = useIntl()
-
-      use(
-        ~initialState,
-        ~schema,
-        ~onSubmit=form => {
-          onSubmit
-          ->Option.map(onSubmit =>
-            onSubmit(form)->Promise.tap(x =>
-              switch x {
-              | Ok(_) => form.send(SetFormState(SubmitSucceed))
-              | Error(error) => form.send(SetFormState(SubmitFailed(Some(error))))
-              }
-            )
-          )
-          ->ignore
-        },
-        ~onSubmitFail,
-        ~i18n=Toolkit__FormValidationFunctions.i18n(intl),
-        ~validationStrategy,
-        (),
-      )
-    }
-  }
-
-  module CustomValidation = {
-    let optionNonEmpty = (intl, lense) => Form.Validation.Custom(
-      lense,
-      values =>
-        values->StateLenses.get(lense)->Option.isNone
-          ? Error(intl->Intl.formatMessage(Msg.optionNonEmpty))
-          : Valid,
-    )
-
-    let arrayNonEmpty = (intl, lense) => Form.Validation.Custom(
-      lense,
-      values =>
-        values->StateLenses.get(lense)->Array.length == 0
-          ? Error(intl->Intl.formatMessage(Msg.optionNonEmpty))
-          : Valid,
-    )
-  }
-
-  module Wrapper = {
-    @react.component
-    let make = (~id=?, ~className=?, ~children) => {
-      let form = Form.useFormContext()
-      <form
-        ?id
-        ?className
-        onSubmit={event => {
-          ReactEvent.Synthetic.preventDefault(event)
-          form.submit()
-        }}>
-        children
-        <Toolkit__Ui_VisuallyHidden>
-          <input type_="submit" hidden=true />
-        </Toolkit__Ui_VisuallyHidden>
-      </form>
-    }
-  }
+  include Reform.Make(StateLenses)
 
   module RadioGroup = {
     @react.component
     let make = (~field, ~elements, ~inline=?) =>
-      <Form.Field
+      <Field
         field
         render={({handleChange, error, value}) => <>
           <Toolkit__Ui_RadioGroup
@@ -148,7 +63,7 @@ module Make = (StateLenses: Config) => {
       let (showPassword, setShowPassword) = React.useState(() => false)
       let isPasswordType = type_->Option.mapWithDefault(false, type_ => type_ === "password")
 
-      <Form.Field
+      <Field
         field
         key={showPassword->string_of_bool}
         render={({handleChange, error, value, validate, state}) => {
@@ -256,7 +171,7 @@ module Make = (StateLenses: Config) => {
           }
         `)
 
-      <Form.Field
+      <Field
         field
         render={({handleChange, error, value, validate, state}) => {
           let isInvalid = error->Option.isSome
@@ -330,7 +245,7 @@ module Make = (StateLenses: Config) => {
       ~timeIntervals=?,
       ~inline=?,
     ) =>
-      <Form.Field
+      <Field
         field
         render={({handleChange, error, value, validate, state}) => {
           let isInvalid = error->Option.isSome
@@ -399,12 +314,12 @@ module Make = (StateLenses: Config) => {
       ~isOptional=?,
       ~className=?,
     ) =>
-      <Form.Field
+      <Field
         field
         render={({handleChange, error, value, validate, state}) => {
           let isInvalid = error->Option.isSome
 
-          let onChange = Helpers.handleChange(handleChange)
+          let onChange = event => handleChange(ReactEvent.Form.target(event)["value"])
 
           let onBlur = _ =>
             switch state {
@@ -446,7 +361,7 @@ module Make = (StateLenses: Config) => {
   module Checkbox = {
     @react.component
     let make = (~field, ~label, ~name=?, ~disabled=?, ~className=?) =>
-      <Form.Field
+      <Field
         field
         render={({handleChange, error, value}) => <>
           <Toolkit__Ui_Checkbox
@@ -477,7 +392,7 @@ module Make = (StateLenses: Config) => {
       ~isOptional=?,
       ~className=?,
     ) => {
-      <Form.Field
+      <Field
         field
         render={({handleChange, error, value, validate, state}) => {
           let isInvalid = error->Option.isSome
@@ -539,7 +454,7 @@ module Make = (StateLenses: Config) => {
       ~isOptional=?,
       ~className=?,
     ) => {
-      <Form.Field
+      <Field
         field
         render={({handleChange, error, value, validate, state}) => {
           let isInvalid = error->Option.isSome
@@ -604,7 +519,7 @@ module Make = (StateLenses: Config) => {
       ~valueFormat,
       ~autoFocus=?,
     ) => {
-      <Form.Field
+      <Field
         field
         render={({handleChange, error, value}) => {
           let isInvalid = error->Option.isSome
@@ -654,7 +569,7 @@ module Make = (StateLenses: Config) => {
       ~dropdownClassName=?,
       ~itemClassName=?,
     ) => {
-      <Form.Field
+      <Field
         field
         render={({handleChange, error, value, validate, state}) => {
           let onClose = _ => {
@@ -705,7 +620,7 @@ module Make = (StateLenses: Config) => {
       ~switchClassName=?,
       ~labelClassName=?,
     ) =>
-      <Form.Field
+      <Field
         field
         render={({handleChange, value}) => <>
           <Toolkit__Ui_Switch
@@ -731,6 +646,7 @@ module Make = (StateLenses: Config) => {
         ~containerClassName,
         ~placeholder,
         ~disabledBefore: option<Js.Date.t>=?,
+        ~revalidate,
       ) => {
         let (date, setDate) = React.useState((): option<Js.Date.t> => value)
         let intl = useIntl()
@@ -800,6 +716,7 @@ module Make = (StateLenses: Config) => {
                     type_="button"
                     disabled={date->Option.isNone}
                     onClick={_ => {
+                      revalidate()
                       setDate(_ => None)
                     }}>
                     <FormattedMessage defaultMessage={"Réinitialiser"} />
@@ -810,6 +727,7 @@ module Make = (StateLenses: Config) => {
                     disabled={date->Option.isNone}
                     onClick={_ => {
                       disclosure.hide()
+                      revalidate()
                       handleChange(date)
                     }}>
                     <FormattedMessage defaultMessage={"Choisir"} />
@@ -831,23 +749,32 @@ module Make = (StateLenses: Config) => {
       ~placeholder=?,
       ~disabledBefore=?,
     ) => {
-      <Form.Field
+      <Field
         field
-        render={({handleChange, value, error}) => <>
-          {switch label {
-          | None => React.null
-          | Some(label) =>
-            <Toolkit__Ui_Label
-              htmlFor=id
-              optionalMessage={isOptional->Option.getWithDefault(false)
-                ? <FormattedMessage defaultMessage="(Optionnel)" />
-                : React.null}>
-              label
-            </Toolkit__Ui_Label>
-          }}
-          <Picker value handleChange containerClassName placeholder ?disabledBefore />
-          <ErrorMessage ?error />
-        </>}
+        render={({handleChange, value, error, state, validate}) => {
+          let revalidate = () => {
+            switch state {
+            | Pristine => ()
+            | _ => validate()
+            }
+          }
+
+          <>
+            {switch label {
+            | None => React.null
+            | Some(label) =>
+              <Toolkit__Ui_Label
+                htmlFor=id
+                optionalMessage={isOptional->Option.getWithDefault(false)
+                  ? <FormattedMessage defaultMessage="(Optionnel)" />
+                  : React.null}>
+                label
+              </Toolkit__Ui_Label>
+            }}
+            <Picker value handleChange containerClassName placeholder ?disabledBefore revalidate />
+            <ErrorMessage ?error />
+          </>
+        }}
       />
     }
   }