@colisweb/rescript-toolkit 3.2.4 → 3.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colisweb/rescript-toolkit",
-  "version": "3.2.4",
+  "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

@@ -18,6 +18,8 @@ module Alert = Toolkit__Ui_Alert
 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

package/src/ui/Toolkit__Ui_SelectPolyvariant.res

@@ -36,7 +36,7 @@ let make = (
     ?placeholder
     value=?{value->Option.map(encodeValueToString)}
     defaultValue=?{defaultValue->Option.map(encodeValueToString)}
-    options={options->Array.map((option): Toolkit__Ui.Select.selectOption => {
+    options={options->Array.map((option): Toolkit__Ui_Select.selectOption => {
       label: option.label,
       value: option.value->encodeValueToString,
       disabled: ?option.disabled,

package/src/unleash/Toolkit__Unleash.res

@@ -27,7 +27,7 @@ module MakeFeature = (C: Config) => {
   type t = config<C.argument>
 
   let exec = (var: C.input) =>
-    Axios.get(C.envUrl ++ C.featureName, ())
+    Axios.get(C.envUrl ++ C.featureName,~config={Axios.makeConfig()}, ())
     ->Promise.Js.toResult
     ->Promise.flatMapOk(({data}) => {
       Promise.resolved(t_decode(data))

package/src/vendors/Axios.res

@@ -72,30 +72,25 @@ external makeConfig: (
 ) => config = ""
 
 @module("axios")
-external get: (string, ~config: config=?, unit) => Promise.Js.t<response<'data>, 'err> = "get"
+external get: (string, ~config: config, unit) => Promise.Js.t<response<'data>, 'err> = "get"
 
 @module("axios")
-external post: (string, ~data: 'a, ~config: config=?, unit) => Promise.Js.t<response<'data>, 'err> =
+external post: (string, ~data: 'a, ~config: config, unit) => Promise.Js.t<response<'data>, 'err> =
   "post"
 
 @module("axios")
-external put: (string, ~data: 'a, ~config: config=?, unit) => Promise.Js.t<response<'data>, 'err> =
+external put: (string, ~data: 'a, ~config: config, unit) => Promise.Js.t<response<'data>, 'err> =
   "put"
 
 @module("axios")
-external patch: (
-  string,
-  ~data: 'a,
-  ~config: config=?,
-  unit,
-) => Promise.Js.t<response<'data>, 'err> = "patch"
+external patch: (string, ~data: 'a, ~config: config, unit) => Promise.Js.t<response<'data>, 'err> =
+  "patch"
 
 @module("axios")
-external delete: (string, ~config: config=?, unit) => Promise.Js.t<response<'data>, 'err> = "delete"
+external delete: (string, ~config: config, unit) => Promise.Js.t<response<'data>, 'err> = "delete"
 
 @module("axios")
-external options: (string, ~config: config=?, unit) => Promise.Js.t<response<'data>, 'err> =
-  "options"
+external options: (string, ~config: config, unit) => Promise.Js.t<response<'data>, 'err> = "options"
 
 module Instance = {
   type t
@@ -104,14 +99,14 @@ module Instance = {
   external create: config => t = "create"
 
   @send
-  external get: (t, string, ~config: config=?, unit) => Promise.Js.t<response<'data>, 'err> = "get"
+  external get: (t, string, ~config: config, unit) => Promise.Js.t<response<'data>, 'err> = "get"
 
   @send
   external post: (
     t,
     string,
     ~data: 'a,
-    ~config: config=?,
+    ~config: config,
     unit,
   ) => Promise.Js.t<response<'data>, 'err> = "post"
 
@@ -120,7 +115,7 @@ module Instance = {
     t,
     string,
     ~data: 'a,
-    ~config: config=?,
+    ~config: config,
     unit,
   ) => Promise.Js.t<response<'data>, 'err> = "put"
 
@@ -129,16 +124,16 @@ module Instance = {
     t,
     string,
     ~data: 'a,
-    ~config: config=?,
+    ~config: config,
     unit,
   ) => Promise.Js.t<response<'data>, 'err> = "patch"
 
   @send
-  external delete: (t, string, ~config: config=?, unit) => Promise.Js.t<response<'data>, 'err> =
+  external delete: (t, string, ~config: config, unit) => Promise.Js.t<response<'data>, 'err> =
     "delete"
 
   @send
-  external options: (t, string, ~config: config=?, unit) => Promise.Js.t<response<'data>, 'err> =
+  external options: (t, string, ~config: config, unit) => Promise.Js.t<response<'data>, 'err> =
     "options"
 
   module Interceptors = {
@@ -206,82 +201,82 @@ module WithResult = {
 
   let get = (
     ~instance=?,
-    ~config=?,
+    ~config,
     ~decodeData: decodeData<'newData>,
     ~mapError: option<mapError<'a, 'response, 'headers, 'request>>=?,
     string,
   ) =>
     switch instance {
-    | None => get(string, ~config?, ())->toResult(~decodeData, ~mapError)
+    | None => get(string, ~config, ())->toResult(~decodeData, ~mapError)
     | Some(instance) =>
-      instance->Instance.get(string, ~config?, ())->toResult(~decodeData, ~mapError)
+      instance->Instance.get(string, ~config, ())->toResult(~decodeData, ~mapError)
     }
 
   let post = (
     ~instance=?,
     ~data,
-    ~config=?,
+    ~config,
     ~decodeData: decodeData<'newData>,
     ~mapError: option<mapError<'a, 'response, 'headers, 'request>>=?,
     string,
   ) =>
     switch instance {
-    | None => post(string, ~data, ~config?, ())->toResult(~decodeData, ~mapError)
+    | None => post(string, ~data, ~config, ())->toResult(~decodeData, ~mapError)
     | Some(instance) =>
-      instance->Instance.post(string, ~data, ~config?, ())->toResult(~decodeData, ~mapError)
+      instance->Instance.post(string, ~data, ~config, ())->toResult(~decodeData, ~mapError)
     }
 
   let put = (
     ~instance=?,
     ~data,
-    ~config=?,
+    ~config,
     ~decodeData: decodeData<'newData>,
     ~mapError: option<mapError<'a, 'response, 'headers, 'request>>=?,
     string,
   ) =>
     switch instance {
-    | None => put(string, ~data, ~config?, ())->toResult(~decodeData, ~mapError)
+    | None => put(string, ~data, ~config, ())->toResult(~decodeData, ~mapError)
     | Some(instance) =>
-      instance->Instance.put(string, ~data, ~config?, ())->toResult(~decodeData, ~mapError)
+      instance->Instance.put(string, ~data, ~config, ())->toResult(~decodeData, ~mapError)
     }
 
   let patch = (
     ~instance=?,
     ~data,
-    ~config=?,
+    ~config,
     ~decodeData: decodeData<'newData>,
     ~mapError: option<mapError<'a, 'response, 'headers, 'request>>=?,
     string,
   ) =>
     switch instance {
-    | None => patch(string, ~data, ~config?, ())->toResult(~decodeData, ~mapError)
+    | None => patch(string, ~data, ~config, ())->toResult(~decodeData, ~mapError)
     | Some(instance) =>
-      instance->Instance.patch(string, ~data, ~config?, ())->toResult(~decodeData, ~mapError)
+      instance->Instance.patch(string, ~data, ~config, ())->toResult(~decodeData, ~mapError)
     }
 
   let delete = (
     ~instance=?,
-    ~config=?,
+    ~config,
     ~decodeData: decodeData<'newData>,
     ~mapError: option<mapError<'a, 'response, 'headers, 'request>>=?,
     string,
   ) =>
     switch instance {
-    | None => delete(string, ~config?, ())->toResult(~decodeData, ~mapError)
+    | None => delete(string, ~config, ())->toResult(~decodeData, ~mapError)
     | Some(instance) =>
-      instance->Instance.delete(string, ~config?, ())->toResult(~decodeData, ~mapError)
+      instance->Instance.delete(string, ~config, ())->toResult(~decodeData, ~mapError)
     }
 
   let options = (
     ~instance=?,
-    ~config=?,
+    ~config,
     ~decodeData: decodeData<'newData>,
     ~mapError: option<mapError<'a, 'response, 'headers, 'request>>=?,
     string,
   ) =>
     switch instance {
-    | None => options(string, ~config?, ())->toResult(~decodeData, ~mapError)
+    | None => options(string, ~config, ())->toResult(~decodeData, ~mapError)
     | Some(instance) =>
-      instance->Instance.options(string, ~config?, ())->toResult(~decodeData, ~mapError)
+      instance->Instance.options(string, ~config, ())->toResult(~decodeData, ~mapError)
     }
 }