@colisweb/rescript-toolkit 4.12.1 → 4.14.0

package/locale/fr.json

@@ -1,4 +1,9 @@
 [
+  {
+    "id": "_0475def8",
+    "defaultMessage": "Fin",
+    "message": "Fin"
+  },
   {
     "id": "_04eadf92",
     "defaultMessage": "L'email est invalide.",
@@ -39,11 +44,6 @@
     "defaultMessage": "Volume total",
     "message": "Volume total"
   },
-  {
-    "id": "_2f765479",
-    "defaultMessage": "Choisir",
-    "message": "Choisir"
-  },
   {
     "id": "_337be526",
     "defaultMessage": "Jeudi",
@@ -64,6 +64,16 @@
     "defaultMessage": "Samedi",
     "message": "Samedi"
   },
+  {
+    "id": "_4df46058",
+    "defaultMessage": "Semaine {number}",
+    "message": "Semaine {number}"
+  },
+  {
+    "id": "_4f2a1035",
+    "defaultMessage": "Début",
+    "message": "Début"
+  },
   {
     "id": "_5689ac4d",
     "defaultMessage": "Masquer le mot de passe",
@@ -74,6 +84,11 @@
     "defaultMessage": "Non",
     "message": "Non"
   },
+  {
+    "id": "_6a661ab6",
+    "defaultMessage": "Aujourd'hui",
+    "message": "Aujourd'hui"
+  },
   {
     "id": "_6ef34790",
     "defaultMessage": "Une erreur est survenue lors de la recherche",
@@ -94,11 +109,21 @@
     "defaultMessage": "<lat></lat>, <lng></lng>",
     "message": "<lat></lat>, <lng></lng>"
   },
+  {
+    "id": "_7cd2a589",
+    "defaultMessage": "Cette semaine",
+    "message": "Cette semaine"
+  },
   {
     "id": "_7e01b0f2",
     "defaultMessage": "Réinitialiser",
     "message": "Réinitialiser"
   },
+  {
+    "id": "_7e345c99",
+    "defaultMessage": "Ce mois",
+    "message": "Ce mois"
+  },
   {
     "id": "_8f8eb0df",
     "defaultMessage": "Vendredi",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colisweb/rescript-toolkit",
-  "version": "4.12.1",
+  "version": "4.14.0",
   "type": "module",
   "scripts": {
     "clean": "rescript clean",
@@ -28,7 +28,6 @@
   "license": "MIT",
   "dependencies": {
     "@colisweb/bs-react-intl-extractor-bin": "0.12.2",
-    "@colisweb/react-day-picker": "7.4.16",
     "@colisweb/restorative": "1.0.0",
     "@datadog/browser-rum": "4.46.0",
     "@headlessui/react": "1.7.16",
@@ -53,6 +52,7 @@
     "react": "18.2.0",
     "react-big-calendar": "1.5.2",
     "react-datepicker": "3.8.0",
+    "react-day-picker": "8.8.0",
     "react-dom": "18.2.0",
     "react-error-boundary": "4.0.10",
     "react-helmet": "6.1.0",

package/src/form/Toolkit__Form.res

@@ -638,107 +638,7 @@ module Make = (StateLenses: Config) => {
   }
 
   module DatePicker = {
-    module Picker = {
-      @react.component
-      let make = (
-        ~value,
-        ~handleChange,
-        ~containerClassName,
-        ~placeholder,
-        ~disabledBefore: option<Js.Date.t>=?,
-        ~revalidate,
-      ) => {
-        let (date, setDate) = React.useState((): option<Js.Date.t> => value)
-        let intl = useIntl()
-
-        <div>
-          <Toolkit__Ui_PortalDropdown
-            buttonClassName="!border-0 w-full !p-0"
-            label={switch value {
-            | None =>
-              <div className={cx(["text-left w-full", containerClassName])}>
-                <div className="border p-2 rounded text-neutral-400 font-normal">
-                  {placeholder->Option.getWithDefault(
-                    <FormattedMessage defaultMessage={"Choisissez une date"} />,
-                  )}
-                </div>
-              </div>
-            | Some(date) =>
-              <div
-                className={cx([
-                  "border rounded-lg p-2 flex flex-row items-center justify-between gap-6 font-normal text-neutral-700 w-full",
-                  containerClassName,
-                ])}>
-                <span>
-                  <FormattedDate
-                    value={date} weekday=#long day=#numeric month=#long year=#numeric
-                  />
-                </span>
-                <div
-                  className="border inline-flex items-center justify-center w-8 h-8 rounded border-primary-700 text-primary-700">
-                  <ReactIcons.FaPencilAlt size={18} />
-                </div>
-              </div>
-            }}>
-            {disclosure => {
-              <div className="flex flex-col">
-                <ReactDayPicker.ReactDayPicker.DayPicker
-                  className="cw-Datepicker"
-                  showOutsideDays=true
-                  modifiers={disabledBefore->Option.mapWithDefault(
-                    Js.Obj.empty()->Obj.magic,
-                    disabledBefore => {
-                      {
-                        "disabled": {
-                          "before": disabledBefore,
-                        },
-                      }->Obj.magic
-                    },
-                  )}
-                  locale={intl->Intl.locale}
-                  months=Toolkit__LocalesHelpers.DatePicker.Fr.months
-                  weekdaysShort=Toolkit__LocalesHelpers.DatePicker.Fr.weekdaysShort
-                  firstDayOfWeek=1
-                  selectedDays=(date->Obj.magic, {from: Js.Nullable.null, to_: Js.Nullable.null})
-                  onDayClick={(
-                    (day, modifiers) => {
-                      let disabled: option<bool> = (modifiers->Obj.magic)["disabled"]
-
-                      switch disabled {
-                      | Some(true) => ()
-                      | _ => setDate(_ => Some(day))
-                      }
-                    }
-                  )->Obj.magic}
-                />
-                <div className="flex flex-row justify-between">
-                  <Toolkit__Ui_Button
-                    type_="button"
-                    disabled={date->Option.isNone}
-                    onClick={_ => {
-                      revalidate()
-                      setDate(_ => None)
-                    }}>
-                    <FormattedMessage defaultMessage={"Réinitialiser"} />
-                  </Toolkit__Ui_Button>
-                  <Toolkit__Ui_Button
-                    color=#primary
-                    type_="button"
-                    disabled={date->Option.isNone}
-                    onClick={_ => {
-                      disclosure.hide()
-                      revalidate()
-                      handleChange(date)
-                    }}>
-                    <FormattedMessage defaultMessage={"Choisir"} />
-                  </Toolkit__Ui_Button>
-                </div>
-              </div>
-            }}
-          </Toolkit__Ui_PortalDropdown>
-        </div>
-      }
-    }
+    open ReactDayPicker
     @react.component
     let make = (
       ~field,
@@ -751,14 +651,7 @@ module Make = (StateLenses: Config) => {
     ) => {
       <Field
         field
-        render={({handleChange, value, error, state, validate}) => {
-          let revalidate = () => {
-            switch state {
-            | Pristine => ()
-            | _ => validate()
-            }
-          }
-
+        render={({handleChange, value, error}) => {
           <>
             {switch label {
             | None => React.null
@@ -771,7 +664,39 @@ module Make = (StateLenses: Config) => {
                 label
               </Toolkit__Ui_Label>
             }}
-            <Picker value handleChange containerClassName placeholder ?disabledBefore revalidate />
+            <ReactDayPicker.SingleDayPickerInput
+              ?value
+              onChange={v => handleChange(v)}
+              allowEmpty=?isOptional
+              buttonClassName="w-full"
+              labelClassName={cx([
+                "flex flex-row items-center gap-4 font-normal text-neutral-700 w-full",
+                containerClassName,
+              ])}
+              modifiers=?{disabledBefore->Option.map((disabledBefore): ReactDayPicker.modifiers => {
+                disabled: [
+                  ReactDayPicker.Matcher.interval({
+                    before: disabledBefore,
+                  }),
+                ],
+              })}
+              placeholder={placeholder->Option.getWithDefault(
+                <FormattedMessage defaultMessage="Choisissez une date" />,
+              )}
+              labelFormatter={date => {
+                <>
+                  <span>
+                    <FormattedDate
+                      value={date} weekday=#long day=#numeric month=#long year=#numeric
+                    />
+                  </span>
+                  <div
+                    className="border inline-flex items-center justify-center w-8 h-8 rounded border-primary-700 text-primary-700">
+                    <ReactIcons.FaPencilAlt size={18} />
+                  </div>
+                </>
+              }}
+            />
             <ErrorMessage ?error />
           </>
         }}

package/src/ui/Toolkit__Ui.res

@@ -31,6 +31,7 @@ module Layout = Toolkit__Ui_Layout
 module SpinnerFullScreen = Toolkit__Ui_SpinnerFullScreen
 module MultiSelect = Toolkit__Ui_MultiSelect
 module MultiSelectWithValidation = Toolkit__Ui_MultiSelectWithValidation
+module SelectWithValidation = Toolkit__Ui_SelectWithValidation
 module Notice = Toolkit__Ui_Notice
 module NativeDatePicker = Toolkit__Ui_NativeDatePicker
 module ErrorBoundary = Toolkit__Ui_ErrorBoundary

package/src/ui/Toolkit__Ui_SelectWithValidation.res

@@ -0,0 +1,150 @@
+open ReactIntl
+
+type item = {
+  itemLabel?: React.element,
+  label: string,
+  value: string,
+}
+
+type options = array<item>
+
+module Footer = {
+  @react.component
+  let make = (~onCancel, ~onValidateClick) => {
+    let dropdownContext = React.useContext(Toolkit__Ui_Dropdown.dropdownContext)
+
+    <footer className="bg-white p-1 flex flex-row justify-between">
+      <Toolkit__Ui_Button
+        type_="button"
+        onClick={_ => {
+          dropdownContext.hide()
+          onCancel()
+        }}>
+        <FormattedMessage defaultMessage={"Annuler"} />
+      </Toolkit__Ui_Button>
+      <Toolkit__Ui_Button
+        color=#primary
+        type_="button"
+        onClick={_ => {
+          onValidateClick()
+          dropdownContext.hide()
+        }}>
+        <FormattedMessage defaultMessage={"Valider"} />
+      </Toolkit__Ui_Button>
+    </footer>
+  }
+}
+
+module Options = {
+  @react.component
+  let make = (~options, ~deferredSearch, ~itemClassName, ~setSelectedOption, ~selectedOption) => {
+    options
+    ->Array.keep(({label}) =>
+      deferredSearch == "" ||
+        label->Toolkit__Primitives.String.normalizeForSearch->Js.String2.includes(deferredSearch)
+    )
+    ->Array.mapWithIndex((i, item) => {
+      let {label, value} = item
+
+      <div
+        key={`multiselectoption-${label}-${value}-${i->Int.toString}`}
+        className={cx([
+          "group flex flex-row items-center gap-2 pt-3 text-left relative",
+          i > 0 ? "mt-3" : "",
+          itemClassName,
+        ])}>
+        <Toolkit__Ui_Radio
+          value
+          className="w-full flex-shrink-0 relative"
+          checked={selectedOption->Option.mapWithDefault(false, selectedOption => {
+            item.label == selectedOption.label && item.value == selectedOption.value
+          })}
+          onChange={_ => {
+            setSelectedOption(_ => {
+              Some(item)
+            })
+          }}>
+          {item.itemLabel->Option.getWithDefault(label->React.string)}
+        </Toolkit__Ui_Radio>
+      </div>
+    })
+    ->React.array
+  }
+}
+
+@react.component
+let make = (
+  ~options: options,
+  ~placeholder: React.element,
+  ~buttonClassName="",
+  ~dropdownClassName="",
+  ~itemClassName="",
+  ~searchPlaceholder: option<string>=?,
+  ~allowFilter=true,
+  ~defaultValue: option<item>=?,
+  ~onValidate: item => unit,
+  ~disabled: option<bool>=?,
+  ~onCancel: option<unit => unit>=?,
+) => {
+  let (selectedOption, setSelectedOption) = React.useState(() => defaultValue)
+  let previousDefaultValue = Toolkit__Hooks.usePrevious(defaultValue)
+  let (search, setSearch) = React.useState(() => "")
+  let deferredSearch = React.useDeferredValue(search)
+  let allowFilter = options->Array.length > 5 && allowFilter
+
+  React.useEffect2(() => {
+    switch (previousDefaultValue, defaultValue) {
+    | (Some(Some(v)), Some(v2)) if v !== v2 => setSelectedOption(_ => defaultValue)
+    | _ => ()
+    }
+
+    None
+  }, (previousDefaultValue, defaultValue))
+
+  <Toolkit__Ui_Dropdown
+    ?disabled
+    buttonClassName
+    onClose={_ => setSelectedOption(_ => defaultValue)}
+    dropdownClassName
+    position=#bottom
+    label={switch selectedOption {
+    | None =>
+      <p className="flex flex-row gap-2 w-full items-center relative">
+        <span className="ml-1"> {placeholder} </span>
+        <span className="absolute inset-y-0 right-0 flex items-center">
+          <ReactIcons.FaAngleDown />
+        </span>
+      </p>
+    | Some({label}) =>
+      <div className="table table-fixed w-full" title={label}>
+        <span className="table-cell truncate text-left"> {label->React.string} </span>
+      </div>
+    }}>
+    <div className="py-2 pl-2 pr-1 max-h-[300px] overflow-y-scroll">
+      {allowFilter
+        ? <div className="mb-3">
+            <Toolkit__Ui_TextInput
+              id="search"
+              autoFocus={true}
+              placeholder=?{searchPlaceholder}
+              allowWhiteSpace={true}
+              value={search}
+              onChange={event => {
+                let target = event->ReactEvent.Form.currentTarget
+
+                setSearch(_ => target["value"]->Toolkit__Primitives.String.normalizeForSearch)
+              }}
+            />
+          </div>
+        : React.null}
+      <Options deferredSearch options setSelectedOption selectedOption itemClassName />
+    </div>
+    <Footer
+      onCancel={() => {
+        setSelectedOption(_ => defaultValue)
+        onCancel->Option.forEach(fn => fn())
+      }}
+      onValidateClick={() => selectedOption->Option.forEach(onValidate)}
+    />
+  </Toolkit__Ui_Dropdown>
+}

package/src/ui/Toolkit__Ui_SelectWithValidation.resi

@@ -0,0 +1,17 @@
+type item = {itemLabel?: React.element, label: string, value: string}
+type options = array<item>
+
+@react.component
+let make: (
+  ~options: options,
+  ~placeholder: React.element,
+  ~buttonClassName: string=?,
+  ~dropdownClassName: string=?,
+  ~itemClassName: string=?,
+  ~searchPlaceholder: string=?,
+  ~allowFilter: bool=?,
+  ~defaultValue: item=?,
+  ~onValidate: item => unit,
+  ~disabled: bool=?,
+  ~onCancel: unit => unit=?,
+) => React.element