@colisweb/rescript-toolkit 5.38.2 → 5.40.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colisweb/rescript-toolkit",
-  "version": "5.38.2",
+  "version": "5.40.0",
   "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/router/Toolkit__Router.res

@@ -247,6 +247,10 @@ module Make = (Config: RouterConfig) => {
       ~isSubLink=false,
       ~isActive=false,
       ~onLinkClick=() => (),
+      ~containerClassName="",
+      ~labelClassName="",
+      ~tooltipClassName="",
+      ~activeClassName="",
     ) =>
       switch link {
       | Custom(element) => element
@@ -255,7 +259,12 @@ module Make = (Config: RouterConfig) => {
         <a
           href=url
           target="_blank"
-          className={cx([commonClassName, "py-3 sidenav-link", isSubLink ? "ml-3" : ""])}>
+          className={cx([
+            commonClassName,
+            "py-3 sidenav-link",
+            isSubLink ? "ml-3" : "",
+            containerClassName,
+          ])}>
           <span className="overflow-hidden flex">
             {config.icon->Option.mapWithDefault(React.null, icon =>
               <div className={cx(["text-neutral-800", isNavOpen ? "pl-2" : "px-2"])}> icon </div>
@@ -265,13 +274,17 @@ module Make = (Config: RouterConfig) => {
                 "transition-all duration-200 ease-in-out absolute ml-12 w-40 transform top-1/2 -translate-y-1/2",
                 isNavOpen ? "pl-1 opacity-100 delay-75" : "opacity-0 invisible",
                 isSubLink ? "text-sm" : "",
+                labelClassName,
               ])}>
               label
             </span>
             {isNavOpen
               ? React.null
               : <div
-                  className="sidenav-link-tooltip absolute left-0 p-2 bg-neutral-700 text-white rounded transform top-1/2 -translate-y-1/2 transition-all duration-200 ease-in-out opacity-0 invisible ml-16 whitespace-nowrap">
+                  className={cx([
+                    "sidenav-link-tooltip absolute left-0 p-2 bg-neutral-700 text-white rounded transform top-1/2 -translate-y-1/2 transition-all duration-200 ease-in-out opacity-0 invisible ml-16 whitespace-nowrap",
+                    tooltipClassName,
+                  ])}>
                   label
                 </div>}
           </span>
@@ -288,9 +301,14 @@ module Make = (Config: RouterConfig) => {
             isSubLink ? "ml-3" : "",
             config.icon->Option.isNone ? "py-5" : "",
             "sidenav-link",
+            containerClassName,
             isActive && !disabledActiveLink ? "bg-primary-100/75 text-neutral-700" : "",
+            isActive && !disabledActiveLink ? activeClassName : "",
+          ])}
+          activeClassName={cx([
+            disabledActiveLink ? "" : "bg-primary-100/75 text-neutral-700",
+            disabledActiveLink ? "" : activeClassName,
           ])}
-          activeClassName={disabledActiveLink ? "" : "bg-primary-100/75 text-neutral-700"}
           onClick={_ => onLinkClick()}>
           <span className="overflow-hidden flex">
             {config.icon->Option.mapWithDefault(React.null, icon =>
@@ -301,13 +319,17 @@ module Make = (Config: RouterConfig) => {
                 "transition-all duration-200 ease-in-out absolute ml-12 w-40 transform top-1/2 -translate-y-1/2",
                 isNavOpen ? "pl-1 opacity-100 delay-75" : "opacity-0 invisible",
                 isSubLink ? "text-sm" : "",
+                labelClassName,
               ])}>
               label
             </span>
             {isNavOpen
               ? React.null
               : <div
-                  className="sidenav-link-tooltip absolute left-0 p-2 bg-neutral-700 text-white rounded transform top-1/2 -translate-y-1/2 transition-all duration-200 ease-in-out opacity-0 invisible ml-16 whitespace-nowrap">
+                  className={cx([
+                    "sidenav-link-tooltip absolute left-0 p-2 bg-neutral-700 text-white rounded transform top-1/2 -translate-y-1/2 transition-all duration-200 ease-in-out opacity-0 invisible ml-16 whitespace-nowrap",
+                    tooltipClassName,
+                  ])}>
                   label
                 </div>}
           </span>
@@ -345,6 +367,8 @@ module Make = (Config: RouterConfig) => {
       ~isNavOpen: bool,
       ~onLinkClick=() => (),
       ~openMenu,
+      ~iconClassName="",
+      ~labelClassName="",
     ) => {
       let (isOpen, setIsOpen) = React.useState(() => false)
       let currentRoute = useRoute()
@@ -387,13 +411,15 @@ module Make = (Config: RouterConfig) => {
             "flex items-center w-full sidenav-link",
             hasActiveSubRoute || relativeRoute->Option.isSome ? "bg-primary-100/75" : "",
           ])}>
-          <span className={cx(["mr-2 text-neutral-800", isNavOpen ? "pl-2" : "px-2"])}>
+          <span
+            className={cx(["mr-2 text-neutral-800", isNavOpen ? "pl-2" : "px-2", iconClassName])}>
             groupInfo.icon
           </span>
           <span
             className={cx([
               "transition-all duration-200 ease-in-out absolute ml-12 w-40 transform top-1/2 -translate-y-1/2 text-left",
               isNavOpen ? "pl-1 opacity-100 delay-75" : "opacity-0 invisible",
+              labelClassName,
             ])}>
             groupInfo.label
           </span>

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
+    }}
+  />