@colisweb/rescript-toolkit 5.45.0 → 5.46.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colisweb/rescript-toolkit",
-  "version": "5.45.0",
+  "version": "5.46.0",
   "type": "module",
   "scripts": {
     "clean": "rescript clean",
@@ -35,6 +35,8 @@
     "@greenlabs/ppx-spice": "0.2.1",
     "@headlessui/react": "2.2.1",
     "@headlessui/tailwindcss": "0.2.2",
+    "@radix-ui/react-context-menu": "^2.2.16",
+    "@radix-ui/react-dialog": "1.1.15",
     "@radix-ui/react-dropdown-menu": "2.1.7",
     "@radix-ui/react-popover": "1.1.7",
     "@radix-ui/react-scroll-area": "1.2.4",

package/src/decoders/Toolkit__Decoders.res

@@ -73,6 +73,30 @@ module Date = {
   type t = @spice.codec(codec) date
 }
 
+module LocalDate = {
+  type date = Js.Date.t
+
+  let encoder: Spice.encoder<date> = date =>
+    date->DateFns.formatWithPattern("yyyy-MM-dd")->Spice.stringToJson
+
+  let decoder: Spice.decoder<date> = json =>
+    switch Spice.stringFromJson(json) {
+    | Ok(v) =>
+      DateFns.parseWithPatternWithOptions(
+        v,
+        "yyyy-MM-dd",
+        Js.Date.make()->DateFns.startOfDay,
+        {locale: DateFns.frLocale},
+      )->Ok
+    | Error(_) as err => err
+    }
+
+  let codec: Spice.codec<date> = (encoder, decoder)
+
+  @spice
+  type t = @spice.codec(codec) date
+}
+
 module LocalDatetime = {
   type date = Js.Date.t
 

package/src/tailwind/tailwind.config.cjs

@@ -23,6 +23,8 @@ module.exports = {
       },
       animation: {
         backforth: "backforth 2s ease-in-out infinite",
+        overlayShow: "overlayShow 200ms cubic-bezier(0.16, 1, 0.3, 1)",
+        contentShow: "contentShow 300ms cubic-bezier(0.16, 1, 0.3, 1)",
       },
       keyframes: {
         backforth: {
@@ -30,6 +32,17 @@ module.exports = {
           "50%": { left: "100%" },
           "100%": { left: "0px" },
         },
+        overlayShow: {
+          from: { opacity: "0" },
+          to: { opacity: "1" },
+        },
+        contentShow: {
+          from: {
+            opacity: "0",
+            transform: "scale(0.95)",
+          },
+          to: { opacity: "1", transform: "scale(1)" },
+        },
       },
     },
     screens: {

package/src/ui/Toolkit__Ui_Modal.res

@@ -118,3 +118,89 @@ let make = (
       </HeadlessUi.Dialog.Panel>
     </div>
   </HeadlessUi.Dialog>
+
+module Radix = {
+  open Radix
+  @react.component
+  let make = (
+    ~isVisible,
+    ~title: option<React.element>=?,
+    ~body: React.element,
+    ~hide,
+    ~size=#md,
+    ~type_=#default,
+    ~footer=?,
+    ~ariaLabel="",
+    ~icon: option<module(ReactIcons.Icon)>=?,
+  ) => {
+    // let (isOpen, setIsOpen) = React.useState(() => isVisible)
+    <Dialog.Root
+      \"open"=isVisible
+      onOpenChange={isOpen => {
+        if !isOpen {
+          hide()
+        }
+      }}>
+      <Dialog.Portal>
+        <Dialog.Overlay
+          className="z-40 fixed inset-0 bg-black/30 data-[state=open]:animate-overlayShow"
+        />
+        <div
+          className="z-50 fixed inset-0 overflow-y-auto flex min-h-full items-start justify-center p-4">
+          <Dialog.Content
+            className={cx([
+              "bg-white pb-5 shadow-lg w-full mt-[10vh] data-[state=open]:animate-contentShow",
+              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 =>
+                <Dialog.Title
+                  className={cx([
+                    "text-2xl pb-1 inline-flex items-center gap-2 font-display",
+                    titleStyle(~type_),
+                  ])}>
+                  {icon->Option.mapWithDefault(React.null, icon => {
+                    let module(Icon) = icon
+
+                    <Icon />
+                  })}
+                  title
+                </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>
+            )}
+          </Dialog.Content>
+        </div>
+      </Dialog.Portal>
+    </Dialog.Root>
+  }
+}

package/src/ui/Toolkit__Ui_Modal.resi

@@ -14,3 +14,18 @@ let make: (
   ~ariaLabel: string=?,
   ~icon: module(ReactIcons.Icon)=?,
 ) => React.element
+
+module Radix: {
+  @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=?,
+    ~icon: module(ReactIcons.Icon)=?,
+  ) => React.element
+}

package/src/ui/Toolkit__Ui_NativeDatePicker.res

@@ -1,6 +1,14 @@
 @react.component
-let make = (~onChange, ~value=?, ~id=?, ~disabled=false, ~isInvalid=false, ~className="") =>
-  <div className="relative">
+let make = (
+  ~onChange,
+  ~value=?,
+  ~id=?,
+  ~disabled=false,
+  ~isInvalid=false,
+  ~className="",
+  ~containerClassName="",
+) =>
+  <div className={cx(["relative", containerClassName])}>
     <input
       ?id
       value=?{value->Option.map(d => d->DateFns.formatWithPattern("yyyy-MM-dd"))}

package/src/ui/Toolkit__Ui_NativeDatePicker.resi

@@ -6,4 +6,5 @@ let make: (
   ~disabled: bool=?,
   ~isInvalid: bool=?,
   ~className: string=?,
+  ~containerClassName: string=?,
 ) => React.element

package/src/vendors/DateFns.res

@@ -49,6 +49,16 @@ external isWithinInterval: (Js.Date.t, intervalObject) => bool = "isWithinInterv
 
 // parse
 
+type parseOptions = {locale?: dateFnsLocale}
+
+@module("date-fns")
+external parse: string => Js.Date.t = "parse"
+@module("date-fns")
+external parseWithPattern: (string, string) => Js.Date.t = "parse"
+@module("date-fns")
+external parseWithPatternWithOptions: (string, string, Js.Date.t, parseOptions) => Js.Date.t =
+  "parse"
+
 @module("date-fns")
 external parseISO: string => Js.Date.t = "parseISO"
 
@@ -137,6 +147,21 @@ external isSameMonth: (Js.Date.t, Js.Date.t) => bool = "isSameMonth"
 @module("date-fns")
 external isFirstDayOfMonth: Js.Date.t => bool = "isFirstDayOfMonth"
 
+@module("date-fns")
+external isMonday: Js.Date.t => bool = "isMonday"
+@module("date-fns")
+external isTuesday: Js.Date.t => bool = "isTuesday"
+@module("date-fns")
+external isWednesday: Js.Date.t => bool = "isWednesday"
+@module("date-fns")
+external isThursday: Js.Date.t => bool = "isThursday"
+@module("date-fns")
+external isFriday: Js.Date.t => bool = "isFriday"
+@module("date-fns")
+external isSaturday: Js.Date.t => bool = "isSaturday"
+@module("date-fns")
+external isSunday: Js.Date.t => bool = "isSunday"
+
 // other
 
 @module("date-fns")
@@ -149,9 +174,6 @@ external getDay: Js.Date.t => int = "getDay"
 @module("date-fns")
 external getHours: Js.Date.t => int = "getHours"
 
-@module("date-fns")
-external parse: string => Js.Date.t = "parse"
-
 @module("date-fns")
 external nextTuesday: Js.Date.t => Js.Date.t = "nextTuesday"
 @module("date-fns")
@@ -166,19 +188,9 @@ external nextSaturday: Js.Date.t => Js.Date.t = "nextSaturday"
 external nextSunday: Js.Date.t => Js.Date.t = "nextSunday"
 
 @module("date-fns")
-external isMonday: Js.Date.t => bool = "isMonday"
-@module("date-fns")
-external isTuesday: Js.Date.t => bool = "isTuesday"
-@module("date-fns")
-external isWednesday: Js.Date.t => bool = "isWednesday"
-@module("date-fns")
-external isThursday: Js.Date.t => bool = "isThursday"
-@module("date-fns")
-external isFriday: Js.Date.t => bool = "isFriday"
-@module("date-fns")
-external isSaturday: Js.Date.t => bool = "isSaturday"
-@module("date-fns")
-external isSunday: Js.Date.t => bool = "isSunday"
+external minutesToHours: int => int = "minutesToHours"
 
 @module("date-fns")
-external minutesToHours: int => int = "minutesToHours"
+external max: array<Js.Date.t> => Js.Date.t = "max"
+@module("date-fns")
+external min: array<Js.Date.t> => Js.Date.t = "min"

package/src/vendors/Radix.res

@@ -164,7 +164,7 @@ module DropdownMenu = {
     external make: React.component<props> = "Root"
   }
   module Trigger = {
-    type options = {asChild?: bool}
+    type options = {asChild?: bool, disabled?: bool}
     type props = {...options, children: React.element}
     @module("@radix-ui/react-dropdown-menu")
     external make: React.component<props> = "Trigger"
@@ -471,3 +471,143 @@ module Toast = {
     external make: React.component<props> = "Close"
   }
 }
+
+module Dialog = {
+  module Root = {
+    type options = {
+      defaultOpen?: bool,
+      \"open": bool,
+      onOpenChange?: bool => unit,
+      modal?: bool,
+    }
+    type props = {
+      ...options,
+      children: React.element,
+    }
+    @module("@radix-ui/react-dialog")
+    external make: React.component<props> = "Root"
+  }
+  module Trigger = {
+    type props = {children: React.element, asChild?: bool}
+    @module("@radix-ui/react-dialog")
+    external make: React.component<props> = "Trigger"
+  }
+
+  module Portal = {
+    @module("@radix-ui/react-dialog") @react.component
+    external make: (
+      ~children: React.element,
+      ~forceMount: bool=?,
+      ~className: string=?,
+    ) => React.element = "Portal"
+  }
+  module Overlay = {
+    @module("@radix-ui/react-dialog") @react.component
+    external make: (
+      ~children: React.element=?,
+      ~className: string=?,
+      ~asChild: bool=?,
+      ~forceMount: bool=?,
+    ) => React.element = "Overlay"
+  }
+  module Content = {
+    type align =
+      | @as("center") Center
+      | @as("start") Start
+      | @as("end") End
+
+    type side =
+      | @as("top") Top
+      | @as("right") Right
+      | @as("bottom") Bottom
+      | @as("left") Left
+
+    type options = {
+      asChild?: bool,
+      forceMount?: bool,
+      onOpenAutoFocus?: ReactEvent.Focus.t => unit,
+      onCloseAutoFocus?: ReactEvent.Focus.t => unit,
+      onEscapeKeyDown?: ReactEvent.Keyboard.t => unit,
+      onPointerDownOutside?: ReactEvent.Mouse.t => unit,
+      onInteractOutside?: ReactEvent.Mouse.t => unit,
+      className?: string,
+      style?: ReactDOMStyle.t,
+    }
+
+    type props = {
+      ...options,
+      children: React.element,
+    }
+    @module("@radix-ui/react-dialog")
+    external make: React.component<props> = "Content"
+  }
+  module Close = {
+    type props = {className?: string, children?: React.element, asChild?: bool}
+    @module("@radix-ui/react-dialog")
+    external make: React.component<props> = "Close"
+  }
+  module Title = {
+    type props = {className?: string, asChild?: bool, children?: React.element}
+    @module("@radix-ui/react-dialog")
+    external make: React.component<props> = "Title"
+  }
+}
+
+// module ContextMenu = {
+//   module Root = {
+//     type options = {onOpenChange?: bool => unit, modal?: bool}
+//     type props = {
+//       ...options,
+//       children: React.element,
+//     }
+//     @module("@radix-ui/react-context-menu")
+//     external make: React.component<props> = "Root"
+//   }
+
+//   module Trigger = {
+//     type props = {children: React.element, disabled?: bool, asChild?: bool, className?: string}
+//     @module("@radix-ui/react-context-menu")
+//     external make: React.component<props> = "Trigger"
+//   }
+
+//   module Portal = {
+//     @module("@radix-ui/react-context-menu") @react.component
+//     external make: (~children: React.element) => React.element = "Portal"
+//   }
+//   module Content = {
+//     type options = {alignOffset?: int, sideOffset?: int, align?: string}
+
+//     type props = {
+//       ...options,
+//       className?: string,
+//       children: React.element,
+//     }
+//     @module("@radix-ui/react-context-menu")
+//     external make: React.component<props> = "Content"
+
+//     let className = "z-50 min-w-[220px] bg-white rounded-md overflow-hidden p-[5px] shadow-lg"
+//   }
+//   module Arrow = {
+//     type props = {className?: string, width?: int, height?: int}
+//     @module("@radix-ui/react-context-menu")
+//     external make: React.component<props> = "Arrow"
+//   }
+//   module Label = {
+//     type props = {className?: string, width?: int, height?: int}
+//     @module("@radix-ui/react-context-menu")
+//     external make: React.component<props> = "Label"
+//   }
+//   module Item = {
+//     type props = {
+//       className?: string,
+//       disabled?: bool,
+//       onSelect?: ReactEvent.Mouse.t => unit,
+//       textValue: string,
+//       children: React.element,
+//     }
+//     @module("@radix-ui/react-context-menu")
+//     external make: React.component<props> = "Item"
+
+//     let className = "text-sm leading-none text-neutral-700 rounded-[3px] flex items-center h-[25px] py-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-neutral-900 data-[disabled]:pointer-events-none data-[highlighted]:text-neutral-500 data-[highlighted]:bg-neutral-100"
+//   }
+// }

package/src/vendors/ReactUse.res

@@ -68,3 +68,16 @@ type scrollCoords = {
 
 @module("react-use")
 external useWindowScroll: unit => scrollCoords = "useWindowScroll"
+
+type measure = {
+  x: int,
+  y: int,
+  width: int,
+  height: int,
+  top: int,
+  right: int,
+  bottom: int,
+  left: int,
+}
+@module("react-use")
+external useMeasure: unit => (React.ref<Js.Nullable.t<Dom.element>>, measure) = "useMeasure"