@colisweb/rescript-toolkit 3.3.1 → 3.4.0

package/package.json

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

package/playground/PlaygroundComponents.res

@@ -15,6 +15,7 @@ let components: array<(string, module(Config))> = [
   ("multiselect", module(Playground_MultiSelect)),
   ("accordion", module(Playground_Accordion)),
   ("buttonGroup", module(Playground_ButtonGroup)),
+  ("buttonGroup2", module(Playground_ButtonGroup2)),
   ("spinner", module(Playground_Spinner)),
   ("notice", module(Playground_Notice)),
   ("snackbar", module(Playground_Snackbar)),

package/playground/components/Playground_ButtonGroup2.res

@@ -0,0 +1,37 @@
+@module("@root/src/ui/Toolkit__Ui_ButtonGroup2.resi?raw")
+external resi: string = "default"
+
+@module("@root/playground/components/Playground_ButtonGroup2.res?raw")
+external codeExample: string = "default"
+
+@val
+external alert: string => unit = "alert"
+
+@react.component
+let make = () => {
+  let sizes = Js.Dict.fromArray([("md", #md), ("lg", #xl)])
+
+  <div>
+    {sizes
+    ->Js.Dict.entries
+    ->Array.mapWithIndex((i, (sizeText, size)) =>
+      <div key={i->Int.toString ++ sizeText} className="flex flex-row mb-4 items-center">
+        <strong className="w-40"> {sizeText->React.string} </strong>
+        <Toolkit__Ui_ButtonGroup2
+          onIndexChange={(currentIndex, tabValue) => {
+            Js.log(currentIndex)
+            Js.log(tabValue)
+          }}
+          buttons={[
+            {label: "Option 1"->React.string, value: "test"},
+            {label: "Option 2"->React.string, onClick: _ => alert("clicked on option 2")},
+            {label: "Option 3"->React.string},
+          ]}
+          className="my-4 self-center"
+          size
+        />
+      </div>
+    )
+    ->React.array}
+  </div>
+}

package/src/ui/Toolkit__Ui.res

@@ -1,5 +1,6 @@
 module Button = Toolkit__Ui_Button
 module ButtonGroup = Toolkit__Ui_ButtonGroup
+module ButtonGroup2 = Toolkit__Ui_ButtonGroup2
 module Spinner = Toolkit__Ui_Spinner
 module Card = Toolkit__Ui_Card
 module Modal = Toolkit__Ui_Modal

package/src/ui/Toolkit__Ui_ButtonGroup2.res

@@ -0,0 +1,55 @@
+type size = [
+  | #md
+  | #xl
+]
+
+type button<'value> = {
+  onClick?: ReactEvent.Mouse.t => unit,
+  label: React.element,
+  value?: 'value,
+}
+
+type buttons<'value> = array<button<'value>>
+
+@react.component
+let make = (
+  ~buttons: buttons<'value>,
+  ~onIndexChange: option<(int, option<'value>) => unit>=?,
+  ~defaultActiveIndex=0,
+  ~className="",
+  ~size: size=#md,
+) => {
+  let isMd = size === #md
+  let (activeIndex, setActiveIndex) = React.useState(() => defaultActiveIndex)
+
+  React.useEffect1(() => {
+    onIndexChange->Option.forEach(fn =>
+      fn(activeIndex, (buttons[activeIndex]->Option.getUnsafe).value)
+    )
+    None
+  }, [activeIndex])
+
+  <div
+    className={cx([
+      className,
+      "flex justify-center items-center rounded-full font-display bg-gray-200 cw-ButtonGroup",
+      isMd ? "h-6" : "h-10",
+      isMd ? "text-sm" : "text-xl",
+    ])}>
+    {buttons
+    ->Array.mapWithIndex((i, button) => {
+      <button
+        key={`btn-group-${i->Int.toString}`}
+        onClick={event => {
+          setActiveIndex(_ => i)
+          button.onClick->Option.forEach(fn => {
+            fn(event)
+          })
+        }}
+        className={cx([activeIndex === i ? "selected" : ""])}>
+        {button.label}
+      </button>
+    })
+    ->React.array}
+  </div>
+}

package/src/ui/Toolkit__Ui_ButtonGroup2.resi

@@ -0,0 +1,21 @@
+type size = [
+  | #md
+  | #xl
+]
+
+type button<'value> = {
+  onClick?: ReactEvent.Mouse.t => unit,
+  label: React.element,
+  value?: 'value,
+}
+
+type buttons<'value> = array<button<'value>>
+
+@react.component
+let make: (
+  ~buttons: buttons<'value>,
+  ~onIndexChange: (int, option<'value>) => unit=?,
+  ~defaultActiveIndex: int=?,
+  ~className: string=?,
+  ~size: size=?,
+) => React.element