@colisweb/rescript-toolkit 2.56.1 → 2.56.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colisweb/rescript-toolkit",
-  "version": "2.56.1",
+  "version": "2.56.2",
   "scripts": {
     "clean": "rescript clean",
     "build": "rescript build -with-deps",

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/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"