@colisweb/rescript-toolkit 3.5.3 → 3.6.0

package/package.json

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

package/playground/PlaygroundComponents.res

@@ -39,6 +39,7 @@ let components: array<(string, module(Config))> = [
   ("CopyWrapper", module(Playground_CopyWrapper)),
   ("Listbox", module(Playground_Listbox)),
   ("Coordinates", module(Playground_Coordinates)),
+  ("Modal2", module(Playground_Modal2)),
 ]
 
 module List = {

package/playground/components/Playground_Listbox.res

@@ -9,10 +9,10 @@ external codeExample: string = "default"
 @react.component
 let make = () => {
   let (uncontrolledValue, setUncontrolledValue) = React.useState((): option<
-    Toolkit__Ui_Listbox.selectOption<string>,
+    HeadlessUi.Listbox.selectOption<string>,
   > => None)
 
-  let options: Toolkit__Ui_Listbox.options<string> = [
+  let options: array<HeadlessUi.Listbox.selectOption<string>> = [
     {
       label: "Label1",
       value: "1",

package/playground/components/Playground_Modal2.res

@@ -0,0 +1,68 @@
+open Toolkit__Ui
+
+@module("@root/src/ui/Toolkit__Ui_Modal2.resi?raw")
+external resi: string = "default"
+
+@module("@root/playground/components/Playground_Modal2.res?raw")
+external codeExample: string = "default"
+
+@react.component
+let make = () => {
+  let modalSize: array<Modal.size> = [#lg, #md, #sm, #xs]
+
+  let modalColor: array<Modal.color> = [#primary, #success, #danger, #neutral]
+
+  let (isVisible, setVisibility) = React.useState(() => false)
+  let (size, setSize) = React.useState(() => #md)
+  let (modalType, setModalType) = React.useState(() => #default)
+
+  <div className="flex flex-col gap-4 items-start">
+    <div>
+      <Toolkit__Ui_Label htmlFor="size"> {"Size :"->React.string} </Toolkit__Ui_Label>
+      <Toolkit__Ui.Select
+        id="size"
+        value={Obj.magic(size)}
+        onChange={value => {
+          setSize(_ => value->Obj.magic)
+        }}
+        options={modalSize->Array.map((value): Toolkit__Ui.Select.selectOption => {
+          label: value->Obj.magic,
+          value: value->Obj.magic,
+        })}
+      />
+    </div>
+    <div>
+      <Toolkit__Ui_Label htmlFor="color"> {"Color :"->React.string} </Toolkit__Ui_Label>
+      <Toolkit__Ui.Select
+        id="size"
+        onChange={value => {
+          setModalType(_ => value === "" ? #default : #colored(Obj.magic(value)))
+        }}
+        options={
+          open! Toolkit__Ui.Select
+
+          [
+            {
+              label: "default",
+              value: "",
+            },
+          ]->Array.concat(
+            modalColor->Array.map(value => {
+              label: value->Obj.magic,
+              value: value->Obj.magic,
+            }),
+          )
+        }
+      />
+    </div>
+    <Button onClick={_ => setVisibility(_ => true)}> {"Show modal"->React.string} </Button>
+    <Modal2
+      isVisible
+      title={"title"->React.string}
+      body={"Body"->React.string}
+      hide={() => setVisibility(_ => false)}
+      size
+      type_=modalType
+    />
+  </div>
+}

package/src/ui/Toolkit__Ui.res

@@ -36,3 +36,4 @@ module NativeDatePicker = Toolkit__Ui_NativeDatePicker
 module ErrorBoundary = Toolkit__Ui_ErrorBoundary
 module WeekDateFilter = Toolkit__Ui_WeekDateFilter
 module Coordinates = Toolkit__Ui_Coordinates
+module Modal2 = Toolkit__Ui_Modal2

package/src/ui/Toolkit__Ui_Listbox.res

@@ -1,88 +1,22 @@
-type selectOption<'value> = {
-  label: string,
-  value: 'value,
-  disabled?: bool,
-}
-
-type options<'value> = array<selectOption<'value>>
+module Listbox = HeadlessUi.Listbox
 
 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"
-}
+  | Function(
+      (
+        option<HeadlessUi.Listbox.selectOption<'value>>,
+        HeadlessUi.Listbox.selectOption<'value>,
+      ) => bool,
+    )
 
 @react.component
 let make = (
-  ~options: options<'value>,
+  ~options: array<Listbox.selectOption<'value>>,
   ~compare: compare<'value>,
-  ~onChange: option<selectOption<'value> => unit>=?,
+  ~onChange: option<Listbox.selectOption<'value> => unit>=?,
   ~placeholder=?,
-  ~defaultOption: option<selectOption<'value>>=?,
+  ~defaultOption: option<Listbox.selectOption<'value>>=?,
   ~isDisabled=?,
   ~value=?,
   ~name=?,
@@ -120,7 +54,7 @@ let make = (
                 <span className="table-cell truncate text-left">
                   {switch (props.value, placeholder) {
                   | (None, Some(p)) => p->React.string
-                  | (Some(Some(selectedOption)), _) => selectedOption.label->React.string
+                  | (Some(selectedOption), _) => selectedOption.label->React.string
                   | _ => React.null
                   }}
                 </span>
@@ -128,7 +62,7 @@ let make = (
               </>
             }}
           </Listbox.Button>
-          <Transition
+          <HeadlessUi.Transition
             show={props.isOpen}
             className="relative z-20"
             enter="transition duration-100 ease-out"
@@ -181,7 +115,7 @@ let make = (
               })
               ->React.array}
             </Listbox.Options>
-          </Transition>
+          </HeadlessUi.Transition>
         </>
       }}
     </Listbox>

package/src/ui/Toolkit__Ui_Listbox.resi

@@ -1,23 +1,20 @@
-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)
+  | Function(
+      (
+        option<HeadlessUi.Listbox.selectOption<'value>>,
+        HeadlessUi.Listbox.selectOption<'value>,
+      ) => bool,
+    )
 
 @react.component
 let make: (
-  ~options: options<'value>,
+  ~options: array<HeadlessUi.Listbox.selectOption<'value>>,
   ~compare: compare<'value>,
-  ~onChange: selectOption<'value> => unit=?,
+  ~onChange: HeadlessUi.Listbox.selectOption<'value> => unit=?,
   ~placeholder: string=?,
-  ~defaultOption: selectOption<'value>=?,
+  ~defaultOption: HeadlessUi.Listbox.selectOption<'value>=?,
   ~isDisabled: bool=?,
   ~value: 'value=?,
   ~name: string=?,

package/src/ui/Toolkit__Ui_Modal2.res

@@ -0,0 +1,128 @@
+type size = [#xs | #sm | #md | #lg | #custom(int)]
+type color = [#primary | #success | #danger | #neutral]
+type style = [#default | #colored(color)]
+
+let modalStyle = (~type_) =>
+  switch type_ {
+  | #default => "rounded"
+  | #colored(color) =>
+    switch color {
+    | #primary => "rounded-lg"
+    | #success => "rounded-lg border-2 border-success-500"
+    | #danger => "rounded-lg border-4 border-danger-700"
+    | #neutral => "rounded-lg"
+    }
+  }
+
+let headerStyle = (~type_) =>
+  switch type_ {
+  | #default => ""
+  | #colored(color) =>
+    switch color {
+    | #primary => "bg-primary-700 rounded-t"
+    | #success => "bg-success-500 rounded-t"
+    | #danger => "bg-danger-700"
+    | #neutral => "bg-neutral-700 rounded-t-lg"
+    }
+  }
+
+let titleStyle = (~type_) =>
+  switch type_ {
+  | #default => "w-full border-b border-info-500"
+  | #colored(_color) => "text-white"
+  }
+
+let closeIconStyle = (~type_) =>
+  switch type_ {
+  | #default => "hover:bg-gray-200"
+  | #colored(_) => "hover:bg-white hover:text-black text-white"
+  }
+
+@module("react")
+external fragment: React.element = "Fragment"
+
+@react.component
+let make = (
+  ~isVisible,
+  ~title: option<React.element>=?,
+  ~body: React.element,
+  ~hide,
+  ~size=#md,
+  ~type_=#default,
+  ~footer=?,
+  ~ariaLabel="",
+) =>
+  <HeadlessUi.Transition
+    show={isVisible}
+    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">
+    <HeadlessUi.Dialog open_=isVisible onClose=hide className="relative z-50">
+      <HeadlessUi.Transition.Child
+        enter="ease-out duration-300"
+        enterFrom="opacity-0"
+        enterTo="opacity-100"
+        leave="ease-in duration-200"
+        leaveFrom="opacity-100"
+        leaveTo="opacity-0">
+        <div className="fixed inset-0 bg-black/30" />
+      </HeadlessUi.Transition.Child>
+      <div className="fixed inset-0 overflow-y-auto">
+        <div className="flex min-h-full items-start justify-center p-4">
+          <HeadlessUi.Transition.Child
+            \"as"={Node(fragment)}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0 scale-95"
+            enterTo="opacity-100 scale-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100 scale-100"
+            leaveTo="opacity-0 scale-95">
+            <HeadlessUi.Dialog.Panel
+              className={cx(["bg-white pb-5 shadow-lg w-full mt-[10vh]", modalStyle(~type_)])}
+              style={ReactDOMStyle.make(
+                ~maxWidth={
+                  let value = switch size {
+                  | #xs => 480
+                  | #sm => 600
+                  | #md => 768
+                  | #lg => 900
+                  | #custom(value) => value
+                  }
+                  `${value->Int.toString}px`
+                },
+                (),
+              )}>
+              <header
+                className={cx([
+                  "flex items-center justify-between mb-4 pl-5 pr-3 pt-2 pb-1",
+                  headerStyle(~type_),
+                ])}>
+                {title->Option.mapWithDefault(React.null, title =>
+                  <HeadlessUi.Dialog.Title
+                    className={cx(["text-2xl pb-1 font-display", titleStyle(~type_)])}>
+                    title
+                  </HeadlessUi.Dialog.Title>
+                )}
+                <button
+                  onClick={_ => hide()}
+                  className={cx([
+                    title->Option.isSome ? "ml-4" : "ml-auto",
+                    "p-1 rounded-full modal-close-button",
+                    closeIconStyle(~type_),
+                  ])}>
+                  <ReactIcons.MdClose size=28 />
+                </button>
+              </header>
+              <div className="px-1 sm:px-2 md:px-5"> body </div>
+              {footer->Option.mapWithDefault(React.null, footer =>
+                <div className="flex flex-row justify-end mt-6 pr-4"> footer </div>
+              )}
+            </HeadlessUi.Dialog.Panel>
+          </HeadlessUi.Transition.Child>
+        </div>
+      </div>
+    </HeadlessUi.Dialog>
+  </HeadlessUi.Transition>

package/src/ui/Toolkit__Ui_Modal2.resi

@@ -0,0 +1,15 @@
+type size = [#xs | #sm | #md | #lg | #custom(int)]
+type color = [#primary | #success | #danger | #neutral]
+type style = [#default | #colored(color)]
+
+@react.component
+let make: (
+  ~isVisible: bool,
+  ~title: React.element=?,
+  ~body: React.element,
+  ~hide: unit => unit,
+  ~size: size=?, // default: `md
+  ~type_: style=?, // default: `default
+  ~footer: React.element=?,
+  ~ariaLabel: string=?,
+) => React.element

package/src/vendors/HeadlessUi.res

@@ -0,0 +1,118 @@
+module Listbox = {
+  type renderProps = {
+    @as("open")
+    isOpen: bool,
+  }
+
+  type selectOption<'value> = {
+    label: string,
+    value: 'value,
+    disabled?: 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: option<selectOption<'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 = {
+  @unboxed
+  type rec as_<'a> = Node('a): as_<'a>
+
+  @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=?,
+    ~\"as": as_<'a>=?,
+  ) => React.element = "Transition"
+
+  module Child = {
+    @module("@headlessui/react") @scope("Transition") @react.component
+    external make: (
+      ~children: React.element,
+      ~enter: string=?,
+      ~enterFrom: string=?,
+      ~enterTo: string=?,
+      ~leave: string=?,
+      ~leaveFrom: string=?,
+      ~leaveTo: string=?,
+      ~className: string=?,
+      ~\"as": as_<'a>=?,
+    ) => React.element = "Child"
+  }
+}
+
+module Dialog = {
+  @module("@headlessui/react") @react.component
+  external make: (
+    ~open_: bool,
+    ~onClose: unit => unit,
+    ~children: React.element,
+    ~className: string=?,
+    ~style: ReactDOM.Style.t=?,
+  ) => React.element = "Dialog"
+
+  module Panel = {
+    @module("@headlessui/react") @scope("Dialog") @react.component
+    external make: (
+      ~children: React.element,
+      ~className: string=?,
+      ~style: ReactDOM.Style.t=?,
+    ) => React.element = "Panel"
+  }
+  module Title = {
+    @module("@headlessui/react") @scope("Dialog") @react.component
+    external make: (
+      ~children: React.element,
+      ~className: string=?,
+      ~style: ReactDOM.Style.t=?,
+    ) => React.element = "Title"
+  }
+}