@colisweb/rescript-toolkit 5.39.0 → 5.40.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colisweb/rescript-toolkit",
-  "version": "5.39.0",
+  "version": "5.40.1",
   "type": "module",
   "scripts": {
     "clean": "rescript clean",

package/src/form/Toolkit__Form.res

@@ -21,6 +21,34 @@ module type Config = {
 module Make = (StateLenses: Config) => {
   include Reform.Make(StateLenses)
 
+  module RadioGroupEnum = {
+    @react.component
+    let make = (
+      type enum,
+      ~enum: module(Toolkit__Utils.Enum with type t = enum),
+      ~field,
+      ~elements,
+      ~variant=?,
+      ~inline=?,
+      ~containerClassName=?,
+    ) =>
+      <Field
+        field
+        render={({handleChange, error, value}) =>
+          <React.Fragment>
+            <Toolkit__Ui_RadioGroupEnum
+              enum
+              ?containerClassName
+              ?variant
+              defaultValue=?value
+              onChange={v => handleChange(v)}
+              elements
+              ?inline
+            />
+            <ErrorMessage ?error />
+          </React.Fragment>}
+      />
+  }
   module RadioGroup = {
     @react.component
     let make = (~field, ~elements, ~variant=?, ~inline=?, ~containerClassName=?) =>
@@ -510,6 +538,69 @@ module Make = (StateLenses: Config) => {
       />
     }
   }
+  module SelectEnum = {
+    @react.component
+    let make = (
+      type enum,
+      ~enum: module(Toolkit__Utils.Enum with type t = enum),
+      ~field,
+      ~label=?,
+      ~id,
+      ~name=?,
+      ~options: Toolkit__Ui_SelectEnum.options<enum>,
+      ~placeholder=?,
+      ~autoFocus=?,
+      ~disabled=?,
+      ~isOptional=?,
+      ~className=?,
+    ) => {
+      <Field
+        field
+        render={({handleChange, error, value, validate, state}) => {
+          let isInvalid = error->Option.isSome
+
+          let onBlur = _ => {
+            switch state {
+            | Pristine => ()
+            | _ => validate()
+            }
+          }
+
+          <React.Fragment>
+            {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_SelectEnum
+              enum
+              options
+              ?name
+              ?placeholder
+              ?autoFocus
+              ?className
+              isDisabled=?{disabled}
+              onBlur
+              id
+              isInvalid
+              ?value
+              onChange={selectedValue => {
+                Js.log(selectedValue)
+                handleChange(selectedValue)
+              }}
+            />
+            <ErrorMessage ?error />
+          </React.Fragment>
+        }}
+      />
+    }
+  }
 
   module SearchSelect = {
     open! ReactSelect

package/src/ui/Toolkit__Ui_MultiSelect.res

@@ -11,7 +11,7 @@ type options = array<item>
 @react.component
 let make = (
   ~options: options,
-  ~placeholder: React.element,
+  ~placeholder: option<React.element>=?,
   ~buttonClassName="",
   ~dropdownClassName="",
   ~itemClassName="",
@@ -59,7 +59,9 @@ let make = (
     label={switch selectedOptions {
     | [] =>
       <p className="flex flex-row gap-2 w-full items-center relative">
-        <span className="ml-1"> {placeholder} </span>
+        {placeholder->Option.mapWithDefault(React.null, placeholder => {
+          <span className="ml-1"> {placeholder} </span>
+        })}
         <span className="absolute inset-y-0 right-0 flex items-center">
           <ReactIcons.FaAngleDown />
         </span>

package/src/ui/Toolkit__Ui_MultiSelect.resi

@@ -9,7 +9,7 @@ type options = array<item>
 @react.component
 let make: (
   ~options: array<item>,
-  ~placeholder: React.element,
+  ~placeholder: React.element=?,
   ~buttonClassName: string=?,
   ~dropdownClassName: string=?,
   ~itemClassName: string=?,
@@ -19,5 +19,5 @@ let make: (
   ~onChange: array<item> => unit,
   ~disabled: bool=?,
   ~onClose: unit => unit=?,
-  ~displaySelectOnlyOption:bool=?
+  ~displaySelectOnlyOption: bool=?,
 ) => React.element

package/src/ui/Toolkit__Ui_RadioEnum.res

@@ -0,0 +1,116 @@
+type size = [#xs | #sm | #md | #lg]
+type variant =
+  | Default
+  | Filled
+
+@react.component
+let make = (
+  type enum,
+  ~enum: module(Toolkit__Utils.Enum with type t = enum),
+  ~value: enum,
+  ~children: option<React.element>=?,
+  ~disabled: option<bool>=?,
+  ~onChange=?,
+  ~name=?,
+  ~checked=?,
+  ~className="",
+  ~contentClassName="",
+  ~size: size=#sm,
+  ~variant: variant=Default,
+  ~icon: option<module(ReactIcons.Icon)>=?,
+) => {
+  <label
+    className={cx([
+      "flex items-center cw-radio relative",
+      switch variant {
+      | Default => "cw-radio--default"
+      | Filled => "self-start bg-neutral-100 font-medium px-2 py-1 rounded-full cw-radio--filled"
+      },
+      disabled->Option.getWithDefault(false)
+        ? "cursor-not-allowed opacity-75 text-gray-600"
+        : "cursor-pointer",
+      className,
+    ])}>
+    <input
+      type_="radio"
+      value={Toolkit__Utils.encodeEnumToString(value, enum)}
+      className="opacity-0 w-0 h-0 peer cw-radio-input"
+      onChange={event => {
+        let target = ReactEvent.Form.target(event)
+        let value = target["value"]
+
+        onChange->Option.forEach(fn =>
+          fn(Toolkit__Utils.decodeEnumFromString(value, enum)->Option.getExn)
+        )
+      }}
+      ?disabled
+      ?name
+      ?checked
+    />
+    {switch variant {
+    | Default => React.null
+    | Filled =>
+      <span
+        className="cw-radio-filled-bg peer-checked:bg-primary-700 w-full h-full absolute rounded-full left-0 top-0"
+      />
+    }}
+    <span
+      className={cx([
+        "bg-white  flex-shrink-0 cw-radio-circle",
+        {
+          switch variant {
+          | Default => "border peer-checked:border-4 peer-checked:border-primary-700 peer-checked:text-primary-700"
+          | Filled => "border-2 peer-checked:border-primary-700 peer-checked:text-white"
+          }
+        },
+        "checkmark rounded-full   mr-2 border-neutral-700 transform transition-all ease-in-out flex items-center justify-center",
+        switch size {
+        | #xs => "w-4 h-4"
+        | #sm => "w-6 h-6"
+        | #md => "w-8 h-8"
+        | #lg => "w-10 h-10"
+        },
+      ])}>
+      {switch variant {
+      | Default => React.null
+      | Filled =>
+        <span
+          className={cx([
+            "transform transition-all ease-in-out cw-radio-circle-content rounded-full",
+            switch size {
+            | #xs => "w-2 h-2"
+            | #sm => "w-3 h-3"
+            | #md => "w-4 h-4"
+            | #lg => "w-6 h-6"
+            },
+          ])}
+        />
+      }}
+    </span>
+    <span
+      className={cx([
+        "flex flex-row items-center gap-2",
+        {
+          switch variant {
+          | Default => ""
+          | Filled => "peer-checked:text-white relative pr-1"
+          }
+        },
+        contentClassName,
+      ])}>
+      {icon->Option.mapWithDefault(React.null, icon => {
+        let module(Icon) = icon
+
+        <Icon
+          size={switch size {
+          | #lg => 26
+          | #md => 24
+          | #sm => 20
+          | #xs => 16
+          }}
+        />
+      })}
+      {children->Option.getWithDefault(React.null)}
+    </span>
+  </label>
+}

package/src/ui/Toolkit__Ui_RadioGroupEnum.res

@@ -0,0 +1,47 @@
+module Radio = Toolkit__Ui_RadioEnum
+
+type element<'value> = {
+  label: React.element,
+  value: 'value,
+  disabled?: bool,
+}
+
+@react.component
+let make = (
+  type enum,
+  ~enum: module(Toolkit__Utils.Enum with type t = enum),
+  ~onChange,
+  ~elements: array<element<enum>>,
+  ~variant=?,
+  ~defaultValue: option<enum>=?,
+  ~containerClassName="",
+  ~inline=false,
+) => {
+  let name = "radio-" ++ ReachUi_AutoId.use("")
+  let (value, setValue) = React.useState(() => defaultValue)
+
+  React.useEffect(() => {
+    onChange(value)
+    None
+  }, [value])
+
+  <div className={cx([inline ? "flex gap-3" : "", containerClassName])}>
+    {elements
+    ->Array.mapWithIndex((i, element) =>
+      <Radio
+        enum
+        ?variant
+        key={"radio-" ++ string_of_int(i)}
+        value=element.value
+        name
+        disabled=?element.disabled
+        checked={Some(element.value) === value}
+        onChange={value => {
+          setValue(_ => Some(value))
+        }}>
+        element.label
+      </Radio>
+    )
+    ->React.array}
+  </div>
+}

package/src/ui/Toolkit__Ui_SelectEnum.res

@@ -0,0 +1,47 @@
+type selectOption<'value> = {
+  label: string,
+  value: 'value,
+  disabled?: bool,
+}
+
+type options<'value> = array<selectOption<'value>>
+
+@react.component
+let make = (
+  type enum,
+  ~enum: module(Toolkit__Utils.Enum with type t = enum),
+  ~options: options<enum>,
+  ~onChange: option<enum> => unit,
+  ~onBlur=?,
+  ~placeholder=?,
+  ~defaultValue=?,
+  ~isDisabled=?,
+  ~isInvalid=?,
+  ~className="",
+  ~containerClassName="",
+  ~id=?,
+  ~value: option<enum>=?,
+  ~name=?,
+  ~autoFocus=?,
+) =>
+  <Toolkit__Ui_Select
+    ?id
+    ?name
+    containerClassName
+    className
+    ?autoFocus
+    ?onBlur
+    ?isDisabled
+    ?isInvalid
+    ?placeholder
+    value=?{value->Option.map(v => Toolkit__Utils.encodeEnumToString(v, enum))}
+    defaultValue=?{defaultValue->Option.map(v => v->Toolkit__Utils.encodeEnumToString(enum))}
+    options={options->Array.map((option): Toolkit__Ui_Select.selectOption => {
+      label: option.label,
+      value: option.value->Toolkit__Utils.encodeEnumToString(enum),
+      disabled: ?option.disabled,
+    })}
+    onChange={value => {
+      value->Toolkit__Utils.decodeEnumFromString(enum)->onChange
+    }}
+  />