@colisweb/rescript-toolkit 3.2.5 → 3.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colisweb/rescript-toolkit",
-  "version": "3.2.5",
+  "version": "3.3.0",
   "type": "module",
   "scripts": {
     "clean": "rescript clean",
@@ -31,6 +31,7 @@
     "@colisweb/react-day-picker": "7.4.16",
     "@colisweb/restorative": "1.0.0",
     "@datadog/browser-rum": "4.26.0",
+    "@headlessui/react": "^1.7.14",
     "@reach/accordion": "0.18.0",
     "@reach/alert-dialog": "0.18.0",
     "@reach/auto-id": "0.18.0",

package/playground/PlaygroundComponents.res

@@ -36,6 +36,7 @@ let components: array<(string, module(Config))> = [
   ("Combobox", module(Playground_Combobox)),
   ("IconButton", module(Playground_IconButton)),
   ("CopyWrapper", module(Playground_CopyWrapper)),
+  ("Listbox", module(Playground_Listbox)),
 ]
 
 module List = {

package/playground/components/Playground_Listbox.res

@@ -0,0 +1,61 @@
+open Toolkit__Ui
+
+@module("@root/src/ui/Toolkit__Ui_Listbox.resi?raw")
+external resi: string = "default"
+
+@module("@root/playground/components/Playground_Listbox.res?raw")
+external codeExample: string = "default"
+
+@react.component
+let make = () => {
+  let (uncontrolledValue, setUncontrolledValue) = React.useState((): option<
+    Toolkit__Ui_Listbox.selectOption<string>,
+  > => None)
+
+  let options: Toolkit__Ui_Listbox.options<string> = [
+    {
+      label: "Label1",
+      value: "1",
+    },
+    {
+      label: "Label2",
+      value: "2",
+    },
+    {
+      label: "Label3 disabled",
+      value: "3",
+      disabled: true,
+    },
+  ]
+
+  <div className="flex flex-col gap-6">
+    <div>
+      <Label htmlFor="test" optionalMessage={"Optional"->React.string}>
+        {"Listbox uncontrolled"->React.string}
+      </Label>
+      <Listbox
+        placeholder="This is a placeholder"
+        compare={ValueEquality}
+        onChange={value => setUncontrolledValue(_ => Some(value))}
+        options
+      />
+      <div className="mt-4">
+        <p> {"selected value :"->React.string} </p>
+        {uncontrolledValue->Option.mapWithDefault(React.null, value =>
+          <p> {value.label->React.string} </p>
+        )}
+      </div>
+    </div>
+    <div>
+      <Label htmlFor="test" optionalMessage={"Optional"->React.string}>
+        {"Listbox uncontrolled defaultOption selected"->React.string}
+      </Label>
+      <Listbox
+        placeholder="This is a placeholder"
+        compare={ValueEquality}
+        defaultOption=?{options[1]}
+        options
+      />
+    </div>
+  </div>
+}

package/src/ui/Toolkit__Ui.res

@@ -19,6 +19,7 @@ module IconButton = Toolkit__Ui_IconButton
 module Tag = Toolkit__Ui_Tag
 module Select = Toolkit__Ui_Select
 module SelectPolyvariant = Toolkit__Ui_SelectPolyvariant
+module Listbox = Toolkit__Ui_Listbox
 module Table = Toolkit__Ui_Table
 module Reference = Toolkit__Ui_Reference
 module RichText = Toolkit__Ui_RichText

package/src/ui/Toolkit__Ui_Listbox.res

@@ -0,0 +1,185 @@
+type selectOption<'value> = {
+  label: string,
+  value: 'value,
+  disabled?: bool,
+}
+
+type options<'value> = array<selectOption<'value>>
+
+type compare<'value> =
+  | Key(string)
+  | ValueEquality
+  | Function((option<selectOption<'value>>, selectOption<'value>) => bool)
+
+module Listbox = {
+  type renderProps = {
+    @as("open")
+    isOpen: bool,
+  }
+
+  @module("@headlessui/react") @react.component
+  external make: (
+    ~children: renderProps => React.element,
+    ~value: 'value,
+    ~defaultValue: selectOption<'value>=?,
+    ~onChange: selectOption<'value> => unit=?,
+    ~disabled: bool=?,
+    ~by: 'a=?,
+    ~name: string=?,
+    ~className: string=?,
+  ) => React.element = "Listbox"
+
+  module Button = {
+    type renderProps<'value> = {value: 'value}
+    @module("@headlessui/react") @scope("Listbox") @react.component
+    external make: (
+      ~children: renderProps<'value> => React.element,
+      ~className: string=?,
+    ) => React.element = "Button"
+  }
+  module Options = {
+    @module("@headlessui/react") @scope("Listbox") @react.component
+    external make: (
+      ~children: React.element,
+      ~className: string=?,
+      ~static: bool=?,
+    ) => React.element = "Options"
+  }
+  module Option = {
+    type renderProps = {
+      active: bool,
+      selected: bool,
+    }
+
+    @module("@headlessui/react") @scope("Listbox") @react.component
+    external make: (
+      ~children: renderProps => React.element,
+      ~value: 'value=?,
+      ~disabled: bool=?,
+      ~className: string=?,
+    ) => React.element = "Option"
+  }
+}
+
+module Transition = {
+  @module("@headlessui/react") @react.component
+  external make: (
+    ~show: bool,
+    ~children: React.element,
+    ~enter: string=?,
+    ~enterFrom: string=?,
+    ~enterTo: string=?,
+    ~leave: string=?,
+    ~leaveFrom: string=?,
+    ~leaveTo: string=?,
+    ~className: string=?,
+  ) => React.element = "Transition"
+}
+
+@react.component
+let make = (
+  ~options: options<'value>,
+  ~compare: compare<'value>,
+  ~onChange: option<selectOption<'value> => unit>=?,
+  ~placeholder=?,
+  ~defaultOption: option<selectOption<'value>>=?,
+  ~isDisabled=?,
+  ~value=?,
+  ~name=?,
+) => {
+  <div className="relative">
+    <Listbox
+      value
+      by={switch compare {
+      | Key(objectKey) => objectKey
+      | ValueEquality =>
+        (
+          (selectedValue, v2) => {
+            selectedValue->Option.mapWithDefault(false, selectedOption =>
+              selectedOption.value === v2.value
+            )
+          }
+        )->Obj.magic
+
+      | Function(fn) => fn->Obj.magic
+      }}
+      onChange={value => {
+        onChange->Option.forEach(fn => {
+          fn({...value, value: value.value->Option.getUnsafe})
+        })
+      }}
+      disabled=?{isDisabled}
+      ?name
+      defaultValue=?{defaultOption->Obj.magic}>
+      {props => {
+        <>
+          <Listbox.Button
+            className="relative  w-full cursor-default rounded-lg bg-white py-2 pl-3 pr-10 text-left shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm">
+            {props => {
+              switch (props.value, placeholder) {
+              | (None, Some(p)) => p->React.string
+              | (Some(Some(selectedOption)), _) => selectedOption.label->React.string
+
+              | _ => React.null
+              }
+            }}
+          </Listbox.Button>
+          <Transition
+            show={props.isOpen}
+            className="relative z-20"
+            enter="transition duration-100 ease-out"
+            enterFrom="transform scale-95 opacity-0"
+            enterTo="transform scale-100 opacity-100"
+            leave="transition duration-75 ease-out"
+            leaveFrom="transform scale-100 opacity-100"
+            leaveTo="transform scale-95 opacity-0">
+            <Listbox.Options
+              static={true}
+              className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm z-20">
+              {options
+              ->Array.mapWithIndex((i, option) => {
+                <Listbox.Option
+                  key={`listbox-${i->Int.toString}`} value={option} disabled=?{option.disabled}>
+                  {props => {
+                    <div
+                      className={cx([
+                        "relative cursor-default select-none py-2 pl-4 pr-4 text-gray-900 flex flex-row items-center gap-2",
+                        props.active ? "bg-primary-50" : "bg-white",
+                        switch option.disabled {
+                        | Some(true) => "text-gray-500"
+                        | _ => "text-gray-900"
+                        },
+                      ])}>
+                      {props.selected
+                        ? <div
+                            className={cx([
+                              "w-6 h-6 rounded-full border  inline-flex items-center justify-center",
+                              switch option.disabled {
+                              | Some(true) => "bg-gray-100 border-gray-200"
+                              | _ => "bg-white border-gray-500"
+                              },
+                            ])}>
+                            <div className="w-4 h-4 rounded-full bg-primary-700" />
+                          </div>
+                        : <div
+                            className={cx([
+                              "w-6 h-6 rounded-full border border-gray-500 bg-white",
+                              switch option.disabled {
+                              | Some(true) => "border-gray-200"
+                              | _ => "bg-white border-gray-500"
+                              },
+                            ])}
+                          />}
+                      {option.label->React.string}
+                    </div>
+                  }}
+                </Listbox.Option>
+              })
+              ->React.array}
+            </Listbox.Options>
+          </Transition>
+        </>
+      }}
+    </Listbox>
+  </div>
+}

package/src/ui/Toolkit__Ui_Listbox.resi

@@ -0,0 +1,24 @@
+type selectOption<'value> = {
+  label: string,
+  value: 'value,
+  disabled?: bool,
+}
+
+type options<'value> = array<selectOption<'value>>
+
+type compare<'value> =
+  | Key(string)
+  | ValueEquality
+  | Function((option<selectOption<'value>>, selectOption<'value>) => bool)
+
+@react.component
+let make: (
+  ~options: options<'value>,
+  ~compare: compare<'value>,
+  ~onChange: selectOption<'value> => unit=?,
+  ~placeholder: string=?,
+  ~defaultOption: selectOption<'value>=?,
+  ~isDisabled: bool=?,
+  ~value: 'value=?,
+  ~name: string=?,
+) => React.element