@colisweb/rescript-toolkit 2.56.1 → 2.57.0

package/locale/fr.json

@@ -94,6 +94,11 @@
     "defaultMessage": "Doit être un entier positif ou un nombre a virgule",
     "message": "Doit être un entier positif ou un nombre a virgule"
   },
+  {
+    "id": "_e5c29cb8",
+    "defaultMessage": "(Optionnel)",
+    "message": "(Optionnel)"
+  },
   {
     "id": "_e6b5a42a",
     "defaultMessage": "Nbr colis",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colisweb/rescript-toolkit",
-  "version": "2.56.1",
+  "version": "2.57.0",
   "scripts": {
     "clean": "rescript clean",
     "build": "rescript build -with-deps",
@@ -27,7 +27,7 @@
     "@colisweb/bs-react-intl-extractor-bin": "0.12.2",
     "@colisweb/react-day-picker": "7.4.16",
     "@colisweb/restorative": "0.5.1",
-    "@datadog/browser-rum": "4.21.1",
+    "@datadog/browser-rum": "4.26.0",
     "@reach/accordion": "0.17.0",
     "@reach/alert-dialog": "0.17.0",
     "@reach/auto-id": "0.17.0",
@@ -43,12 +43,12 @@
     "@reach/visually-hidden": "0.17.0",
     "@rescript/react": "0.10.3",
     "@tailwindcss/line-clamp": "0.4.2",
-    "autoprefixer": "10.4.12",
+    "autoprefixer": "10.4.13",
     "axios": "0.24.0",
     "bs-axios": "0.0.43",
     "case": "1.6.3",
     "click-outside-hook": "1.1.0",
-    "copy-to-clipboard": "3.3.2",
+    "copy-to-clipboard": "3.3.3",
     "date-fns": "2.29.3",
     "decco": "1.6.0",
     "dedent": "0.7.0",
@@ -56,19 +56,19 @@
     "lenses-ppx": "6.1.10",
     "list-selectors": "2.0.1",
     "lodash": "4.17.21",
-    "postcss": "8.4.17",
+    "postcss": "8.4.19",
     "postcss-loader": "4.2.0",
     "postcss-preset-env": "6.7.0",
     "prismjs": "1.29.0",
     "react": "18.2.0",
-    "react-big-calendar": "1.5.0",
+    "react-big-calendar": "1.5.2",
     "react-datepicker": "3.8.0",
     "react-dom": "18.2.0",
     "react-error-boundary": "3.1.4",
     "react-helmet": "6.1.0",
-    "react-icons": "4.4.0",
-    "react-intl": "6.1.2",
-    "react-select": "5.4.0",
+    "react-icons": "4.7.1",
+    "react-intl": "6.2.5",
+    "react-select": "5.7.0",
     "react-table": "7.8.0",
     "react-use": "17.4.0",
     "reason-promise": "1.1.5",
@@ -82,7 +82,7 @@
     "tailwindcss": "3.2.4"
   },
   "devDependencies": {
-    "@babel/core": "7.18.6",
+    "@babel/core": "7.20.5",
     "@storybook/addon-actions": "6.1.21",
     "@storybook/addon-essentials": "6.1.21",
     "@storybook/addon-knobs": "6.1.21",
@@ -91,11 +91,11 @@
     "@storybook/react": "6.1.21",
     "@storybook/theming": "6.1.21",
     "babel-loader": "8.2.5",
-    "highlight.js": "11.3.1",
-    "husky": "8.0.1",
+    "highlight.js": "11.7.0",
+    "husky": "8.0.2",
     "is-ci": "3.0.1",
     "raw-loader": "4.0.2",
-    "react-is": "17.0.2",
-    "sass": "1.45.0"
+    "react-is": "18.2.0",
+    "sass": "1.56.1"
   }
 }

package/src/form/Toolkit__Form.res

@@ -1,3 +1,5 @@
+open ReactIntl
+
 module Helpers = {
   let handleChange = (handleChange, event) => handleChange(ReactEvent.Form.target(event)["value"])
 
@@ -72,11 +74,26 @@ module Make = (StateLenses: Config) => {
           form.submit()
         }}>
         children
-        <ReachUi.VisuallyHidden> <input type_="submit" hidden=true /> </ReachUi.VisuallyHidden>
+        <ReachUi.VisuallyHidden>
+          <input type_="submit" hidden=true />
+        </ReachUi.VisuallyHidden>
       </form>
     }
   }
 
+  module RadioGroup = {
+    @react.component
+    let make = (~field, ~elements, ~inline=?) =>
+      <Form.Field
+        field
+        render={({handleChange, error, value}) => <>
+          <Toolkit__Ui_RadioGroup
+            defaultValue=value onChange={v => handleChange(v)} elements ?inline
+          />
+          <ErrorMessage ?error />
+        </>}
+      />
+  }
   module Input = {
     @react.component
     let make = (
@@ -189,4 +206,443 @@ module Make = (StateLenses: Config) => {
       />
     }
   }
+
+  module Int = {
+    @react.component
+    let make = (
+      ~field,
+      ~label=?,
+      ~id,
+      ~name=?,
+      ~placeholder=?,
+      ~autoFocus=?,
+      ~disabled=?,
+      ~isOptional=?,
+      ~step=?,
+      ~min=?,
+      ~max=?,
+      ~className=?,
+    ) => {
+      let parseInt: string => option<int> = %raw(`
+          x => {
+            var result = parseInt(x, 10);
+            return isNaN(result) ? undefined : result;
+          }
+        `)
+
+      <Form.Field
+        field
+        render={({handleChange, error, value, validate, state}) => {
+          let isInvalid = error->Option.isSome
+
+          let onChange = event =>
+            ReactEvent.Form.target(event)["value"]->Option.flatMap(parseInt)->handleChange
+
+          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_TextInput
+              ?className
+              id
+              value={value->Option.map(Js.Int.toString)->Option.getWithDefault("")}
+              type_="number"
+              ?name
+              ?disabled
+              ?placeholder
+              ?autoFocus
+              ?step
+              ?min
+              ?max
+              isInvalid
+              onChange
+              onBlur
+            />
+            <ErrorMessage ?error />
+          </>
+        }}
+      />
+    }
+  }
+
+  module DateTime = {
+    @react.component
+    let make = (
+      ~field,
+      ~label=?,
+      ~id,
+      ~name=?,
+      ~startDate=?,
+      ~endDate=?,
+      ~selectsStart=?,
+      ~selectsEnd=?,
+      ~minDate=?,
+      ~showTimeSelect=?,
+      ~showYearDropdown=?,
+      ~placeholder=?,
+      ~autoFocus=?,
+      ~disabled=?,
+      ~isOptional=?,
+      ~timeCaption=?,
+      ~timeFormat=?,
+      ~minTime=?,
+      ~maxTime=?,
+      ~timeIntervals=?,
+      ~inline=?,
+    ) =>
+      <Form.Field
+        field
+        render={({handleChange, error, value, validate, state}) => {
+          let isInvalid = error->Option.isSome
+
+          let onChange = value => handleChange(value->Js.Nullable.toOption)
+
+          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_DatetimeInput
+              ?value
+              ?showTimeSelect
+              ?showYearDropdown
+              ?disabled
+              ?startDate
+              ?endDate
+              ?inline
+              ?selectsStart
+              ?timeFormat
+              ?timeCaption
+              ?timeIntervals
+              ?selectsEnd
+              ?minTime
+              ?maxTime
+              ?minDate
+              id
+              ?name
+              ?placeholder
+              ?autoFocus
+              onBlur
+              onChange
+              isInvalid
+            />
+            <ErrorMessage ?error />
+          </>
+        }}
+      />
+  }
+
+  module Textarea = {
+    @react.component
+    let make = (
+      ~field,
+      ~label=?,
+      ~variant=#default,
+      ~id,
+      ~name=?,
+      ~placeholder=?,
+      ~autoFocus=?,
+      ~disabled=?,
+      ~isOptional=?,
+      ~className=?,
+    ) =>
+      <Form.Field
+        field
+        render={({handleChange, error, value, validate, state}) => {
+          let isInvalid = error->Option.isSome
+
+          let onChange = Helpers.handleChange(handleChange)
+
+          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_TextareaInput
+              ?className
+              id
+              variant
+              value
+              ?name
+              ?disabled
+              ?placeholder
+              ?autoFocus
+              isInvalid
+              onChange
+              onBlur
+            />
+            <ErrorMessage ?error />
+          </>
+        }}
+      />
+  }
+
+  module Checkbox = {
+    @react.component
+    let make = (~field, ~label, ~name=?, ~disabled=?, ~className=?) =>
+      <Form.Field
+        field
+        render={({handleChange, error, value}) => <>
+          <Toolkit__Ui_Checkbox
+            ?className
+            checked={value->Obj.magic}
+            value={value->Obj.magic}
+            ?name
+            ?disabled
+            onChange={(checked, _value) => handleChange(checked)}>
+            label
+          </Toolkit__Ui_Checkbox>
+          <ErrorMessage ?error />
+        </>}
+      />
+  }
+
+  module Select = {
+    @react.component
+    let make = (
+      ~field,
+      ~label=?,
+      ~id,
+      ~name=?,
+      ~items,
+      ~itemToLabel=?,
+      ~itemToId=?,
+      ~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()
+            }
+          }
+
+          <>
+            {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_ListboxInput.Select
+              ?className
+              items
+              ?name
+              ?itemToLabel
+              ?itemToId
+              id
+              ?disabled
+              ?placeholder
+              ?hasPlaceholderOption
+              ?autoFocus
+              isInvalid
+              onChange
+              onBlur
+              defaultValue=?value
+            />
+            <ErrorMessage ?error />
+          </>
+        }}
+      />
+    }
+  }
+
+  module SearchSelect = {
+    open! BsReactSelect
+
+    @react.component
+    let make = (
+      ~field,
+      ~label=?,
+      ~id,
+      ~name,
+      ~options,
+      ~placeholder=?,
+      ~isDisabled=?,
+      ~className="",
+      ~isOptional=?,
+      ~valueFormat,
+      ~autoFocus=?,
+    ) => {
+      <Form.Field
+        field
+        render={({handleChange, error, value}) => {
+          let isInvalid = error->Option.isSome
+
+          <>
+            {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>
+            }}
+            <ReactSelect
+              defaultMenuIsOpen=?autoFocus
+              ?autoFocus
+              name
+              ?isDisabled
+              classNamePrefix="react-select"
+              className={cx([className, isInvalid ? "errored" : ""])}
+              ?placeholder
+              onChange={o => handleChange(Some(o.value))}
+              value=?{value->Option.map(valueFormat)}
+              options
+            />
+            <ErrorMessage ?error />
+          </>
+        }}
+      />
+    }
+  }
+
+  module MultiSelect = {
+    @react.component
+    let make = (
+      ~field,
+      ~label=?,
+      ~id,
+      ~name=?,
+      ~items,
+      ~itemToLabel,
+      ~itemToId,
+      ~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()
+            }
+          }
+
+          <>
+            {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_ListboxInput.MultiSelect
+              ?className
+              items
+              ?name
+              itemToLabel
+              itemToId
+              id
+              value
+              ?disabled
+              ?placeholder
+              ?hasPlaceholderOption
+              ?autoFocus
+              isInvalid
+              onChange
+              onBlur
+            />
+            <ErrorMessage ?error />
+          </>
+        }}
+      />
+    }
+  }
+
+  module Switch = {
+    @react.component
+    let make = (~field, ~label=?, ~id, ~size=?) =>
+      <Form.Field
+        field
+        render={({handleChange, value}) => <>
+          {label->Option.mapWithDefault(React.null, label =>
+            <Toolkit__Ui_Label htmlFor=id> label </Toolkit__Ui_Label>
+          )}
+          <Toolkit__Ui_Switch onChange={value => handleChange(value)} name=id checked=value ?size />
+        </>}
+      />
+  }
 }

package/src/ui/Toolkit__Ui_RadioGroup.res

@@ -0,0 +1,37 @@
+open ReachUi
+module Radio = Toolkit__Ui.Radio
+
+type element = {
+  label: React.element,
+  value: string,
+  disabled: bool,
+}
+
+@react.component
+let make = (~onChange, ~elements: array<element>, ~defaultValue=?, ~inline=false) => {
+  let name = "radio-" ++ AutoId.use("")
+  let (value, setValue) = React.useState(() => defaultValue->Option.getWithDefault(""))
+
+  React.useEffect1(() => {
+    onChange(value)
+    None
+  }, [value])
+
+  <div className={inline ? "flex gap-3" : ""}>
+    {elements
+    ->Array.mapWithIndex((i, element) =>
+      <Radio
+        key={"radio-" ++ string_of_int(i)}
+        value=element.value
+        name
+        disabled=element.disabled
+        checked={element.value === value}
+        onChange={value => {
+          setValue(_ => value)
+        }}>
+        element.label
+      </Radio>
+    )
+    ->React.array}
+  </div>
+}

package/src/ui/styles.css

@@ -111,7 +111,7 @@ body,
   background-color: #1bb0c4;
 }
 
-.searchListBox [aria-selected=true] {
+.searchListBox [aria-selected="true"] {
   background-color: #1bb0c4 !important;
 }
 
@@ -140,12 +140,16 @@ textarea:not([disabled]):not([tabindex="-1"]):focus,
 button:not([disabled]):not([tabindex="-1"]):focus,
 iframe:not([tabindex="-1"]):focus,
 [tabindex]:not([tabindex="-1"]):focus,
-[contentEditable=true]:not([tabindex="-1"]):focus,
+[contentEditable="true"]:not([tabindex="-1"]):focus,
 .focus {
   outline: none !important;
   box-shadow: rgba(66, 153, 225, 0.9) 0px 0px 0px 3px;
 }
 
+.react-select__control input:not([disabled]):not([tabindex="-1"]):focus {
+  box-shadow: none !important;
+}
+
 .no-focus {
   outline: none !important;
   box-shadow: none !important;
@@ -159,7 +163,8 @@ iframe:not([tabindex="-1"]):focus,
   @apply bg-info-500;
 }
 
-.input-range .DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end):not(.DayPicker-Day--outside) {
+.input-range
+  .DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end):not(.DayPicker-Day--outside) {
   background-color: #f0f8ff !important;
   color: #4a90e2;
 }
@@ -215,7 +220,8 @@ iframe:not([tabindex="-1"]):focus,
   @apply shadow-none !important;
 }
 
-.Selectable .DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end):not(.DayPicker-Day--outside) {
+.Selectable
+  .DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end):not(.DayPicker-Day--outside) {
   background-color: #f0f8ff !important;
   color: #4a90e2;
 }
@@ -260,12 +266,13 @@ iframe:not([tabindex="-1"]):focus,
   @apply h-10 text-xl;
 }
 
-[data-reach-accordion-item][data-state=open] .cw-accordion-icon {
+[data-reach-accordion-item][data-state="open"] .cw-accordion-icon {
   display: block;
   transform: rotate(90deg);
 }
 
-[data-reach-accordion-item][data-state=collapsed] .cw-accordion-collapsed-hide {
+[data-reach-accordion-item][data-state="collapsed"]
+  .cw-accordion-collapsed-hide {
   display: none !important;
 }
 
@@ -321,7 +328,7 @@ input::-webkit-inner-spin-button {
 }
 
 /* Firefox */
-input[type=number] {
+input[type="number"] {
   -moz-appearance: textfield;
 }
 
@@ -333,7 +340,8 @@ input[type=number] {
 .DayPicker .DayPicker-Day--selected {
   border-radius: 0 !important;
 }
-.DayPicker .DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end) {
+.DayPicker
+  .DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end) {
   background-color: #e7edf3 !important;
   color: #15373a;
 }
@@ -352,11 +360,13 @@ input[type=number] {
 .DayPicker .DayPicker-Day--closed {
   border-radius: 0 !important;
 }
-.DayPicker .DayPicker-Day--closed:not(.DayPicker-Day--start):not(.DayPicker-Day--end) {
+.DayPicker
+  .DayPicker-Day--closed:not(.DayPicker-Day--start):not(.DayPicker-Day--end) {
   background-color: #ff634b !important;
   color: #15373a;
 }
-.DayPicker .DayPicker-Day--closed.DayPicker-Day--start:not(.DayPicker-Day--end) {
+.DayPicker
+  .DayPicker-Day--closed.DayPicker-Day--start:not(.DayPicker-Day--end) {
   border-top-left-radius: 50% !important;
   border-bottom-left-radius: 50% !important;
   border-top-right-radius: 0 !important;
@@ -364,7 +374,8 @@ input[type=number] {
   background-color: #ff904b !important;
   color: #15373a;
 }
-.DayPicker .DayPicker-Day--closed.DayPicker-Day--end:not(.DayPicker-Day--start) {
+.DayPicker
+  .DayPicker-Day--closed.DayPicker-Day--end:not(.DayPicker-Day--start) {
   border-top-right-radius: 50% !important;
   border-bottom-right-radius: 50% !important;
   border-top-left-radius: 0 !important;
@@ -378,10 +389,10 @@ input[type=number] {
 }
 
 .cw-ButtonGroup > button {
-  @apply whitespace-nowrap h-full px-3 md:px-4 flex items-center justify-center rounded-3xl py-3
+  @apply whitespace-nowrap h-full px-3 md:px-4 flex items-center justify-center rounded-3xl py-3;
 }
 .cw-ButtonGroup > button:hover {
-  @apply bg-primary-300
+  @apply bg-primary-300;
 }
 
 .cw-ButtonGroup > button.selected {
@@ -390,7 +401,7 @@ input[type=number] {
 }
 
 .cw-Checkbox > input:checked + .checkmark > * {
-  @apply opacity-100
+  @apply opacity-100;
 }
 
-/* purgecss end ignore */
+/* purgecss end ignore */

package/src/vendors/BsReactIcons.res

@@ -5923,6 +5923,12 @@ module FaUserCog = {
     "FaUserCog"
 }
 
+module FaUserCircle = {
+  @module("react-icons/fa") @react.component
+  external make: (~size: int=?, ~color: string=?, ~className: string=?) => React.element =
+    "FaUserCircle"
+}
+
 module FaRedo = {
   @module("react-icons/fa") @react.component
   external make: (~size: int=?, ~color: string=?, ~className: string=?) => React.element = "FaRedo"