@colisweb/rescript-toolkit 2.71.1 → 3.0.1

package/src/form/Reform.res

@@ -109,34 +109,24 @@ module Make = (Config: Config) => {
     )
   }
 
-  let formContext: React.Context.t<option<api>> = React.createContext(None)
+  let formContext: React.Context.t<api> = React.createContext(Obj.magic(None))
 
   let useFormContext = () => React.useContext(formContext)
 
   let useField = field => {
-    let interface = useFormContext()
-    interface->Belt.Option.map(({
-      handleChange,
-      getFieldError,
-      getFieldState,
-      validateField,
-      state,
-    }) => {
+    let {handleChange, getFieldError, getFieldState, validateField, state} = useFormContext()
+
+    {
       handleChange: handleChange(field),
       error: getFieldError(Field(field)),
       state: getFieldState(Field(field)),
       validate: () => validateField(Field(field)),
       value: state.values->Config.get(field),
-    })
+    }
   }
 
   module Provider = {
-    let provider = React.Context.provider(formContext)
-
-    @react.component
-    let make = (~value: api, ~children) => {
-      React.createElement(provider, {"value": Some(value), "children": children})
-    }
+    let make = React.Context.provider(formContext)
   }
 
   module Field = {
@@ -148,26 +138,8 @@ module Make = (Config: Config) => {
       (),
     ) => {
       let fieldInterface = useField(field)
-      React.useMemo3(
-        () =>
-          fieldInterface
-          ->Belt.Option.map(render)
-          ->Belt.Option.getWithDefault(renderOnMissingContext),
-        (
-          {
-            open Belt.Option
-            fieldInterface->flatMap(({error}) => error)->getWithDefault("")
-          },
-          {
-            open Belt.Option
-            fieldInterface->map(({value}) => value)
-          },
-          {
-            open Belt.Option
-            fieldInterface->map(({state}) => state)
-          },
-        ),
-      )
+
+      render(fieldInterface)
     }
   }
 

package/src/form/Toolkit__Form.res

@@ -9,6 +9,11 @@ module Helpers = {
   }
 }
 
+module Msg = {
+  @@intl.messages
+  let optionNonEmpty = {defaultMessage: "Le champ est requis."}
+}
+
 module ErrorMessage = {
   @react.component
   let make = (~error=?, ~className="") =>
@@ -62,10 +67,28 @@ module Make = (StateLenses: Config) => {
       )
   }
 
+  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()->Option.getExn
+      let form = Form.useFormContext()
       <form
         ?id
         ?className
@@ -444,29 +467,19 @@ module Make = (StateLenses: Config) => {
       ~label=?,
       ~id,
       ~name=?,
-      ~items,
-      ~itemToLabel=?,
-      ~itemToId=?,
+      ~options: Toolkit__Ui_Select.options,
       ~placeholder=?,
-      ~hasPlaceholderOption=?,
       ~autoFocus=?,
       ~disabled=?,
       ~isOptional=?,
       ~className=?,
     ) => {
-      let valueRef = React.useRef(None)
-
       <Form.Field
         field
         render={({handleChange, error, value, validate, state}) => {
           let isInvalid = error->Option.isSome
 
-          let onChange = value => valueRef.current = Some(value)
-
           let onBlur = _ => {
-            valueRef.current->Option.map(handleChange)->ignore
-            valueRef.current = None
-
             switch state {
             | Pristine => ()
             | _ => validate()
@@ -485,21 +498,84 @@ module Make = (StateLenses: Config) => {
                 label
               </Toolkit__Ui_Label>
             }}
-            <Toolkit__Ui_ListboxInput.Select
-              ?className
-              items
+            <Toolkit__Ui_Select
+              options
               ?name
-              ?itemToLabel
-              ?itemToId
-              id
-              ?disabled
               ?placeholder
-              ?hasPlaceholderOption
               ?autoFocus
+              ?className
+              isDisabled=?{disabled}
+              onBlur
+              id
               isInvalid
-              onChange
+              value
+              onChange={selectedValue => {
+                handleChange(selectedValue)
+              }}
+            />
+            <ErrorMessage ?error />
+          </>
+        }}
+      />
+    }
+  }
+
+  module SelectPolyvariant = {
+    @react.component
+    let make = (
+      ~field,
+      ~label=?,
+      ~id,
+      ~name=?,
+      ~options: Toolkit__Ui_SelectPolyvariant.options<'value>,
+      ~encodeValueToString: 'value => string,
+      ~decodeValueFromString,
+      ~placeholder=?,
+      ~autoFocus=?,
+      ~disabled=?,
+      ~isOptional=?,
+      ~className=?,
+    ) => {
+      <Form.Field
+        field
+        render={({handleChange, error, value, validate, state}) => {
+          let isInvalid = error->Option.isSome
+
+          let onBlur = _ => {
+            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>
+            }}
+            <Toolkit__Ui_SelectPolyvariant
+              options
+              ?name
+              ?placeholder
+              ?autoFocus
+              ?className
+              isDisabled=?{disabled}
               onBlur
-              defaultValue=?value
+              id
+              isInvalid
+              ?value
+              encodeValueToString
+              decodeValueFromString
+              onChange={selectedValue => {
+                handleChange(selectedValue)
+              }}
             />
             <ErrorMessage ?error />
           </>
@@ -509,7 +585,7 @@ module Make = (StateLenses: Config) => {
   }
 
   module SearchSelect = {
-    open! BsReactSelect
+    open! ReactSelect
 
     @react.component
     let make = (
@@ -567,30 +643,18 @@ module Make = (StateLenses: Config) => {
       ~field,
       ~label=?,
       ~id,
-      ~name=?,
-      ~items,
-      ~itemToLabel,
-      ~itemToId,
-      ~placeholder=?,
-      ~hasPlaceholderOption=?,
-      ~autoFocus=?,
+      ~options: Toolkit__Ui_MultiSelect.options,
+      ~placeholder,
       ~disabled=?,
       ~isOptional=?,
-      ~className=?,
+      ~buttonClassName=?,
+      ~dropdownClassName=?,
+      ~itemClassName=?,
     ) => {
-      let valueRef = React.useRef(None)
-
       <Form.Field
         field
         render={({handleChange, error, value, validate, state}) => {
-          let isInvalid = error->Option.isSome
-
-          let onChange = value => valueRef.current = Some(value)
-
-          let onBlur = _ => {
-            valueRef.current->Option.map(handleChange)->ignore
-            valueRef.current = None
-
+          let onClose = _ => {
             switch state {
             | Pristine => ()
             | _ => validate()
@@ -609,21 +673,16 @@ module Make = (StateLenses: Config) => {
                 label
               </Toolkit__Ui_Label>
             }}
-            <Toolkit__Ui_ListboxInput.MultiSelect
-              ?className
-              items
-              ?name
-              itemToLabel
-              itemToId
-              id
-              value
+            <Toolkit__Ui_MultiSelect
+              ?buttonClassName
+              ?dropdownClassName
+              ?itemClassName
+              options
+              defaultValue={value}
               ?disabled
-              ?placeholder
-              ?hasPlaceholderOption
-              ?autoFocus
-              isInvalid
-              onChange
-              onBlur
+              onChange={items => handleChange(items)}
+              onClose
+              placeholder
             />
             <ErrorMessage ?error />
           </>

package/src/hooks/Toolkit__Hooks.res

@@ -133,7 +133,7 @@ let useClipboard = (~onCopyNotificationMessage: option<string>=?, value: string)
       Toolkit__Ui_Snackbar.show(~title=message, ~variant=#success, ())->ignore
     )
 
-    let didCopy = BsCopyToClipboard.copy(value)
+    let didCopy = CopyToClipboard.copy(value)
     setHasCopied(_ => didCopy)
   }, [value])
 

package/src/intl/Toolkit__Intl.res

@@ -84,7 +84,7 @@ module Make = (Config: IntlConfig) => {
 
   let getDateFnsLocale = locale =>
     switch locale {
-    | #fr => BsDateFns.frLocale
+    | #fr => DateFns.frLocale
     }
 
   module Provider = {

package/src/intl/Toolkit__Intl.resi

@@ -25,7 +25,7 @@ module Make: (Config: IntlConfig) =>
   let useIntl: unit => ReactIntl.Intl.t
   let useCurrentLocale: unit => availableLanguages
   let setCurrentLocale: availableLanguages => unit
-  let getDateFnsLocale: availableLanguages => BsDateFns.dateFnsLocale
+  let getDateFnsLocale: availableLanguages => DateFns.dateFnsLocale
 
   module Provider: {
     @react.component

package/src/logger/Toolkit__NativeLogger.res

@@ -1,4 +1,4 @@
-open BsSentryReactNative
+open SentryReactNative
 
 @val external isDev: bool = "__DEV__"
 

package/src/router/Toolkit__Router.res

@@ -19,12 +19,6 @@ module Make = (Config: RouterConfig) => {
   })
 
   module RouterContextProvider = {
-    let makeProps = (~value: contextState, ~children, ()) =>
-      {
-        "value": value,
-        "children": children,
-      }
-
     let make = React.Context.provider(routerContext)
   }
 

package/src/ui/Toolkit__Ui.res

@@ -18,8 +18,6 @@ module Alert = Toolkit__Ui_Alert
 module IconButton = Toolkit__Ui_IconButton
 module Tag = Toolkit__Ui_Tag
 module Select = Toolkit__Ui_Select
-module Listbox = Toolkit__Ui_Listbox
-module ListboxInput = Toolkit__Ui_ListboxInput
 module Table = Toolkit__Ui_Table
 module Reference = Toolkit__Ui_Reference
 module RichText = Toolkit__Ui_RichText

package/src/ui/Toolkit__Ui_Dropdown.res

@@ -17,6 +17,8 @@ let make = (
   ~buttonSize: Toolkit__Ui_Button.size=#md,
   ~buttonVariant: Toolkit__Ui_Button.variant=#default,
   ~position=#bottom,
+  ~disabled: bool=?,
+  ~onClose: unit => unit=?,
 ) => {
   let dropDownRef = React.useRef(Js.Nullable.null)
   let buttonRef = React.useRef(Js.Nullable.null)
@@ -25,6 +27,7 @@ let make = (
 
   Toolkit__Hooks.useOnClickOutside(buttonRef, _ => {
     hide()
+    onClose->Option.forEach(fn => fn())
   })
 
   let (adjustmentStyle, setAdjustmentStyle) = React.useState(() => None)
@@ -40,14 +43,16 @@ let make = (
         | #left if left < 0. => setPosition(_ => #right)
         | #right if right < 0. => setPosition(_ => #left)
         | _ =>
-          setAdjustmentStyle(_ => Some(
-            ReactDOM.Style.make(
-              ~marginLeft=left < 0. ? `${-.left->Js.Float.toString}px` : "",
-              ~marginRight=right < 0. ? `${-.right->Js.Float.toString}px` : "",
-              ~opacity="1",
-              (),
+          setAdjustmentStyle(
+            _ => Some(
+              ReactDOM.Style.make(
+                ~marginLeft=left < 0. ? `${-.left->Js.Float.toString}px` : "",
+                ~marginRight=right < 0. ? `${-.right->Js.Float.toString}px` : "",
+                ~opacity="1",
+                (),
+              ),
             ),
-          ))
+          )
         }
       })
     } else {
@@ -60,6 +65,7 @@ let make = (
     <Toolkit__Ui_Button
       variant=buttonVariant
       size=buttonSize
+      ?disabled
       type_="button"
       color=buttonColor
       buttonRef={ReactDOM.Ref.domRef(buttonRef)}

package/src/ui/Toolkit__Ui_Dropdown.resi

@@ -17,4 +17,6 @@ let make: (
   ~buttonSize: Toolkit__Ui_Button.size=?,
   ~buttonVariant: Toolkit__Ui_Button.variant=?,
   ~position: position=?,
+  ~disabled: bool=?,
+  ~onClose: unit => unit=?,
 ) => React.element

package/src/ui/Toolkit__Ui_Layout.res

@@ -25,12 +25,7 @@ module NavOpenContext = {
   let context = React.createContext(false)
 
   module Provider = {
-    let provider = React.Context.provider(context)
-
-    @react.component
-    let make = (~value, ~children) => {
-      React.createElement(provider, {"value": value, "children": children})
-    }
+    let make = React.Context.provider(context)
   }
 }
 

package/src/ui/Toolkit__Ui_MultiSelect.res

@@ -1,12 +1,14 @@
 type item = {
-  itemLabel: React.element,
+  itemLabel?: React.element,
   label: string,
   value: string,
 }
 
+type options = array<item>
+
 @react.component
 let make = (
-  ~options: array<item>,
+  ~options: options,
   ~placeholder: React.element,
   ~buttonClassName="",
   ~dropdownClassName="",
@@ -15,6 +17,8 @@ let make = (
   ~allowFilter=true,
   ~defaultValue: array<item>=[],
   ~onChange: array<item> => unit,
+  ~disabled: bool=?,
+  ~onClose: unit => unit=?,
 ) => {
   let (selectedOptions, setSelectedOptions) = React.useState(() => defaultValue)
   let previousDefaultValue = Toolkit__Hooks.usePrevious(defaultValue)
@@ -49,7 +53,9 @@ let make = (
   }
 
   <Toolkit__Ui_Dropdown
+    ?disabled
     buttonClassName
+    ?onClose
     dropdownClassName
     position=#bottom
     label={switch selectedOptions {
@@ -109,7 +115,7 @@ let make = (
           ->Js.String2.includes(search)
       )
       ->Array.mapWithIndex((i, item) => {
-        let {itemLabel, label, value} = item
+        let {label, value} = item
 
         <div
           key={`multiselectoption-${label}-${value}`}
@@ -144,7 +150,7 @@ let make = (
                 })
               }
             }}>
-            itemLabel
+            {item.itemLabel->Option.getWithDefault(label->React.string)}
           </Toolkit__Ui_Checkbox>
         </div>
       })

package/src/ui/Toolkit__Ui_MultiSelect.resi

@@ -1,9 +1,11 @@
 type item = {
-  itemLabel: React.element,
+  itemLabel?: React.element,
   label: string,
   value: string,
 }
 
+type options = array<item>
+
 @react.component
 let make: (
   ~options: array<item>,
@@ -15,4 +17,6 @@ let make: (
   ~allowFilter: bool=?,
   ~defaultValue: array<item>=?,
   ~onChange: array<item> => unit,
+  ~disabled: bool=?,
+  ~onClose: unit => unit=?,
 ) => React.element

package/src/ui/Toolkit__Ui_NativeDatePicker.res

@@ -3,12 +3,12 @@ let make = (~onChange, ~value=?, ~id=?, ~disabled=false, ~isInvalid=false, ~clas
   <div className="relative">
     <input
       ?id
-      value=?{value->Option.map(d => d->BsDateFns.formatWithPattern("yyyy-MM-dd"))}
+      value=?{value->Option.map(d => d->DateFns.formatWithPattern("yyyy-MM-dd"))}
       disabled
       ariaDisabled={disabled}
       onChange={event => {
         let value = ReactEvent.Form.target(event)["value"]
-        onChange(Some(Js.Date.fromString(value))->Option.keep(BsDateFns.isValid))
+        onChange(Some(Js.Date.fromString(value))->Option.keep(DateFns.isValid))
       }}
       className={cx([
         "h-[38px] border rounded transition-all duration-150 ease-in-out py-2 pl-4 pr-8 appearance-none w-full bg-white text-gray-800 leading-tight focus:outline-none focus:shadow-none focus:border-info-500 disabled:bg-gray-200 disabled:text-gray-700 focus:z30 relative border-gray-300",

package/src/ui/Toolkit__Ui_Select.res

@@ -1,7 +1,16 @@
+type selectOption = {
+  label: string,
+  value: string,
+  disabled?: bool,
+}
+
+type options = array<selectOption>
+
 @react.component
 let make = (
-  ~options,
-  ~onChange,
+  ~options: options,
+  ~onChange: string => unit,
+  ~onBlur=?,
   ~placeholder=?,
   ~defaultValue=?,
   ~isDisabled=?,
@@ -10,12 +19,17 @@ let make = (
   ~containerClassName="",
   ~id=?,
   ~value=?,
+  ~name=?,
+  ~autoFocus=?,
 ) =>
   <div className={cx(["relative", containerClassName])}>
     <select
       ?id
+      ?name
+      ?autoFocus
       disabled={isDisabled->Option.getWithDefault(false)}
       ariaDisabled={isDisabled->Option.getWithDefault(false)}
+      ?onBlur
       className={cx([
         "border rounded transition-all duration-150 ease-in-out py-2 pl-4 pr-8 appearance-none w-full bg-white text-gray-800 leading-tight focus:outline-none focus:shadow-none focus:border-info-500 disabled:bg-gray-200 disabled:text-gray-700 focus:z30 relative",
         switch isInvalid {
@@ -35,9 +49,12 @@ let make = (
         <option value=""> {placeholder->React.string} </option>
       )}
       {options
-      ->Array.mapWithIndex((i, (label, value, enabled)) =>
-        <option key={"select_option_" ++ i->Int.toString} value disabled={!enabled}>
-          {label->React.string}
+      ->Array.mapWithIndex((i, option) =>
+        <option
+          key={"select_option_" ++ i->Int.toString}
+          value={option.value}
+          disabled=?{option.disabled}>
+          {option.label->React.string}
         </option>
       )
       ->React.array}

package/src/ui/Toolkit__Ui_Select.resi

@@ -1,7 +1,16 @@
+type selectOption = {
+  label: string,
+  value: string,
+  disabled?: bool,
+}
+
+type options = array<selectOption>
+
 @react.component
 let make: (
-  ~options: array<(string, string, bool)>,
-  ~onChange: 'value => unit,
+  ~options: options,
+  ~onChange: string => unit,
+  ~onBlur: ReactEvent.Focus.t => unit=?,
   ~placeholder: string=?,
   ~defaultValue: string=?,
   ~isDisabled: bool=?,
@@ -10,4 +19,6 @@ let make: (
   ~containerClassName: string=?,
   ~id: string=?,
   ~value: string=?,
+  ~name: string=?,
+  ~autoFocus: bool=?,
 ) => React.element

package/src/ui/Toolkit__Ui_SelectPolyvariant.res

@@ -0,0 +1,45 @@
+type selectOption<'value> = {
+  label: string,
+  value: 'value,
+  disabled?: bool,
+}
+
+type options<'value> = array<selectOption<'value>>
+
+@react.component
+let make = (
+  ~options: options<'value>,
+  ~onChange: option<'value> => unit,
+  ~encodeValueToString: 'value => string,
+  ~decodeValueFromString,
+  ~onBlur=?,
+  ~placeholder=?,
+  ~defaultValue=?,
+  ~isDisabled=?,
+  ~isInvalid=?,
+  ~className="",
+  ~containerClassName="",
+  ~id=?,
+  ~value=?,
+  ~name=?,
+  ~autoFocus=?,
+) =>
+  <Toolkit__Ui_Select
+    ?id
+    ?name
+    containerClassName
+    className
+    ?autoFocus
+    ?onBlur
+    ?isDisabled
+    ?isInvalid
+    ?placeholder
+    value=?{value->Option.map(encodeValueToString)}
+    defaultValue=?{defaultValue->Option.map(encodeValueToString)}
+    options={options->Array.map((option): Toolkit__Ui.Select.selectOption => {
+      label: option.label,
+      value: option.value->encodeValueToString,
+      disabled: ?option.disabled,
+    })}
+    onChange={value => value->decodeValueFromString->onChange}
+  />

package/src/ui/Toolkit__Ui_Table.res

@@ -27,12 +27,17 @@ module Pagination = {
       <div className="w-20">
         <Toolkit__Ui_Select
           value={table.state.pageSize->Int.toString}
-          onChange={value => table.setPageSize(value)}
-          options={[25, 50, 100]->Array.map(pageSize => (
-            pageSize->Int.toString,
-            pageSize->Int.toString,
-            true,
-          ))}
+          onChange={value => {
+            value
+            ->Int.fromString
+            ->Option.forEach(pageSize => {
+              table.setPageSize(pageSize)
+            })
+          }}
+          options={[25, 50, 100]->Array.map((pageSize): Toolkit__Ui_Select.selectOption => {
+            label: pageSize->Int.toString,
+            value: pageSize->Int.toString,
+          })}
         />
       </div>
     </div>