@colisweb/rescript-toolkit 2.67.1 → 2.68.1

package/package.json

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

package/playground/PlaygroundComponents.res

@@ -8,6 +8,16 @@ module type Config = {
 let components: array<(string, module(Config))> = [
   ("card", module(Playground_Card)),
   ("switch", module(Playground_Switch)),
+  ("button", module(Playground_Button)),
+  ("label", module(Playground_Label)),
+  ("alert", module(Playground_Alert)),
+  ("modal", module(Playground_Modal)),
+  ("multiselect", module(Playground_MultiSelect)),
+  ("accordion", module(Playground_Accordion)),
+  ("buttonGroup", module(Playground_ButtonGroup)),
+  ("spinner", module(Playground_Spinner)),
+  ("notice", module(Playground_Notice)),
+  ("snackbar", module(Playground_Snackbar)),
 ]
 
 module List = {

package/playground/PlaygroundRouter.res

@@ -21,7 +21,12 @@ module RouterConfig = {
     | NotFound
 
   let make = (url: RescriptReactRouter.url) => {
-    switch url.path {
+    let path = switch url.path {
+    | list{"colisweb-open-source", "rescript-toolkit", ...routes} => routes
+    | path => path
+    }
+
+    switch path {
     | list{} => Home
     | list{"docs", ...rest} =>
       switch rest {
@@ -49,11 +54,14 @@ module RouterConfig = {
     }
   }
 
+  @val
+  external baseUrl: string = "import.meta.env.BASE_URL"
+
   let toString = (route: t) =>
     switch route {
-    | Home => "/"
+    | Home => baseUrl
     | Docs(doc) => {
-        let base = "/docs"
+        let base = `${baseUrl}docs`
 
         switch doc {
         | ApiDecoding => `${base}/api-decoding`
@@ -64,7 +72,7 @@ module RouterConfig = {
       }
 
     | DesignSystem(designRoute) => {
-        let base = "/design"
+        let base = `${baseUrl}design`
 
         switch designRoute {
         | Fonts => `${base}/fonts`
@@ -74,7 +82,7 @@ module RouterConfig = {
       }
 
     | Components(route) => {
-        let base = "/components"
+        let base = `${baseUrl}components`
 
         switch route {
         | List => `${base}`
@@ -82,7 +90,7 @@ module RouterConfig = {
         }
       }
 
-    | NotFound => "/404"
+    | NotFound => `${baseUrl}404`
     }
 }
 

package/playground/components/Playground_Accordion.res

@@ -0,0 +1,31 @@
+open ReachUi
+
+let resi = ""
+
+@module("@root/playground/components/Playground_Accordion.res?raw")
+external codeExample: string = "default"
+
+@react.component
+let make = () =>
+  <div>
+    <Accordion>
+      <AccordionItem>
+        {"title"->React.string}
+        <AccordionButton>
+          <span className="cw-accordion-icon">
+            <BsReactIcons.MdKeyboardArrowRight />
+          </span>
+        </AccordionButton>
+        <AccordionPanel> {"content"->React.string} </AccordionPanel>
+      </AccordionItem>
+      <AccordionItem>
+        <AccordionButton className="flex items-center">
+          {"title"->React.string}
+          <span className="cw-accordion-icon">
+            <BsReactIcons.MdKeyboardArrowRight />
+          </span>
+        </AccordionButton>
+        <AccordionPanel> {"content"->React.string} </AccordionPanel>
+      </AccordionItem>
+    </Accordion>
+  </div>

package/playground/components/Playground_Alert.res

@@ -0,0 +1,25 @@
+open Toolkit__Ui
+
+@module("@root/src/ui/Toolkit__Ui_Alert.resi?raw")
+external resi: string = "default"
+
+@module("@root/playground/components/Playground_Alert.res?raw")
+external codeExample: string = "default"
+
+@react.component
+let make = () => {
+  let variants: array<Alert.status> = [#success, #error, #info, #warning]
+
+  <div className="flex flex-col gap-8">
+    {variants
+    ->Array.map(variant => {
+      <div key={(variant :> string)}>
+        <h3> {(variant :> string)->React.string} </h3>
+        <Alert
+          title={"Title"->React.string} description={"Description"->React.string} status=variant
+        />
+      </div>
+    })
+    ->React.array}
+  </div>
+}

package/playground/components/Playground_Button.res

@@ -0,0 +1,75 @@
+@module("@root/src/ui/Toolkit__Ui_Button.resi?raw")
+external resi: string = "default"
+
+@module("@root/playground/components/Playground_Button.res?raw")
+external codeExample: string = "default"
+
+@react.component
+let make = () => {
+  let colors: array<Toolkit__Ui_Button.color> = [
+    #primary,
+    #black,
+    #white,
+    #gray,
+    #success,
+    #info,
+    #danger,
+    #warning,
+    #neutral,
+    #neutralLight,
+  ]
+
+  let sizes = Js.Dict.fromArray([("xs", #xs), ("sm", #sm), ("md", #md), ("lg", #lg)])
+  let variants = Js.Dict.fromArray([
+    ("default", #default),
+    ("text", #text),
+    ("link", #link),
+    ("outline", #outline),
+    ("pill", #pill),
+  ])
+
+  <div>
+    {colors
+    ->Array.mapWithIndex((i, color) =>
+      <div
+        key={i->Int.toString ++ (color :> string)}
+        className="flex flex-col gap-4 first:border-0 border-t pt-4 first:pt-0 border-neutral-500">
+        <h2> {(color :> string)->React.string} </h2>
+        <div className="flex flex-row flex-wrap gap-8">
+          {variants
+          ->Js.Dict.entries
+          ->Array.map(((variantText, variant)) => {
+            <div>
+              <h4> {variantText->React.string} </h4>
+              <div className="flex flex-col">
+                {[false, true]
+                ->Array.mapWithIndex(
+                  (j, disabled) =>
+                    <div className="flex items-center gap-1 mb-2">
+                      {sizes
+                      ->Js.Dict.entries
+                      ->Array.mapWithIndex(
+                        (k, (sizeText, size)) =>
+                          <div
+                            key={(i + j + k)->Int.toString ++ ((color :> string) ++ sizeText)}
+                            className="flex flex-col justify-center items-center">
+                            <Toolkit__Ui_Button variant color size disabled>
+                              {"hello"->React.string}
+                            </Toolkit__Ui_Button>
+                            <span className="text-xxs"> {sizeText->React.string} </span>
+                          </div>,
+                      )
+                      ->React.array}
+                    </div>,
+                )
+                ->React.array}
+              </div>
+            </div>
+          })
+          ->React.array}
+        </div>
+      </div>
+    )
+    ->React.array}
+  </div>
+}

package/playground/components/Playground_ButtonGroup.res

@@ -0,0 +1,40 @@
+@module("@root/src/ui/Toolkit__Ui_ButtonGroup.resi?raw")
+external resi: string = "default"
+
+@module("@root/playground/components/Playground_ButtonGroup.res?raw")
+external codeExample: string = "default"
+
+@react.component
+let make = () => {
+  let sizes = Js.Dict.fromArray([("md", #md), ("lg", #xl)])
+
+  let (selectedOption, setSelectedOption) = React.useState(() => #option1)
+
+  <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_ButtonGroup className="my-4 self-center" size>
+          <button
+            className={selectedOption === #option1 ? "selected" : ""}
+            onClick={_ => setSelectedOption(_ => #option1)}>
+            {"Option 1"->React.string}
+          </button>
+          <button
+            className={selectedOption === #option2 ? "selected" : ""}
+            onClick={_ => setSelectedOption(_ => #option2)}>
+            {"Option 2"->React.string}
+          </button>
+          <button
+            className={selectedOption === #option3 ? "selected" : ""}
+            onClick={_ => setSelectedOption(_ => #option3)}>
+            {"Option 3"->React.string}
+          </button>
+        </Toolkit__Ui_ButtonGroup>
+      </div>
+    )
+    ->React.array}
+  </div>
+}

package/playground/components/Playground_Label.res

@@ -0,0 +1,16 @@
+open Toolkit__Ui
+
+@module("@root/src/ui/Toolkit__Ui_Label.resi?raw")
+external resi: string = "default"
+
+@module("@root/playground/components/Playground_Label.res?raw")
+external codeExample: string = "default"
+
+@react.component
+let make = () =>
+  <div>
+    <Label htmlFor="test"> {"Label"->React.string} </Label>
+    <Label htmlFor="test" optionalMessage={"Optional"->React.string}>
+      {"Label"->React.string}
+    </Label>
+  </div>

package/playground/components/Playground_Modal.res

@@ -0,0 +1,53 @@
+open Toolkit__Ui
+
+@module("@root/src/ui/Toolkit__Ui_Modal.resi?raw")
+external resi: string = "default"
+
+@module("@root/playground/components/Playground_Modal.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)
+        }}
+        options={modalSize->Array.map(value => (value->Obj.magic, value->Obj.magic, true))}
+      />
+    </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={[("default", "", true)]->Array.concat(
+          modalColor->Array.map(value => (value->Obj.magic, value->Obj.magic, true)),
+        )}
+      />
+    </div>
+    <Button onClick={_ => setVisibility(_ => true)}> {"Show modal"->React.string} </Button>
+    <Modal
+      isVisible
+      title={"title"->React.string}
+      body={"Body"->React.string}
+      hide={() => setVisibility(_ => false)}
+      size
+      type_=modalType
+    />
+  </div>
+}

package/playground/components/Playground_MultiSelect.res

@@ -0,0 +1,91 @@
+@module("@root/src/ui/Toolkit__Ui_MultiSelect.resi?raw")
+external resi: string = "default"
+
+@module("@root/playground/components/Playground_MultiSelect.res?raw")
+external codeExample: string = "default"
+
+@react.component
+let make = () => {
+  let options1: array<Toolkit__Ui_MultiSelect.item> = [
+    {
+      itemLabel: <p className="flex flex-row text-danger-500">
+        <BsReactIcons.FaAngleDown />
+        {"test"->React.string}
+      </p>,
+      label: "Test",
+      value: "test",
+    },
+    {
+      itemLabel: <p> {"test2"->React.string} </p>,
+      label: "Test2",
+      value: "test2",
+    },
+    {
+      itemLabel: <p> {"test3"->React.string} </p>,
+      label: "Test3",
+      value: "test3",
+    },
+    {
+      itemLabel: <p> {"test4"->React.string} </p>,
+      label: "Test4",
+      value: "test4",
+    },
+  ]
+  let options2: array<Toolkit__Ui_MultiSelect.item> = [
+    {
+      itemLabel: <p> {"test4"->React.string} </p>,
+      label: "Test4",
+      value: "test4",
+    },
+  ]
+
+  let tmp = Toolkit__Hooks.useDisclosure()
+
+  let options = tmp.isOpen ? options2 : options1
+
+  <div className="flex flex-col gap-8 items-start">
+    <Toolkit__Ui_Button onClick={_ => tmp.toggle()}>
+      {"Change options"->React.string}
+    </Toolkit__Ui_Button>
+    <Toolkit__Ui_MultiSelect
+      searchPlaceholder="Filter"
+      buttonClassName={"w-48"}
+      dropdownClassName="w-60"
+      placeholder={<span> {"Select me"->React.string} </span>}
+      onChange={Js.log}
+      options
+    />
+    <div>
+      <h3 className="mb-2"> {"Preselected options"->React.string} </h3>
+      <Toolkit__Ui_MultiSelect
+        searchPlaceholder="Filter"
+        buttonClassName={"w-48"}
+        dropdownClassName="w-60"
+        defaultValue={options}
+        placeholder={<span> {"Select me"->React.string} </span>}
+        onChange={Js.log}
+        options
+      />
+    </div>
+    <div>
+      <h3 className="mb-2"> {"Search"->React.string} </h3>
+      <p className="mb-1">
+        {"Search input is displayed when there are more than 5 options"->React.string}
+      </p>
+      <Toolkit__Ui_MultiSelect
+        searchPlaceholder="Filter"
+        buttonClassName={"w-48"}
+        dropdownClassName="w-60 max-h-[300px] overflow-auto"
+        options={Array.makeBy(10, (i): Toolkit__Ui.MultiSelect.item => {
+          {
+            itemLabel: <p> {`label ${i->Int.toString}`->React.string} </p>,
+            label: `label ${i->Int.toString}`,
+            value: `label ${i->Int.toString}`,
+          }
+        })}
+        placeholder={<span> {"Select me"->React.string} </span>}
+        onChange={Js.log}
+      />
+    </div>
+  </div>
+}

package/playground/components/Playground_Notice.res

@@ -0,0 +1,34 @@
+open Toolkit__Ui
+
+@module("@root/src/ui/Toolkit__Ui_Notice.resi?raw")
+external resi: string = "default"
+
+@module("@root/playground/components/Playground_Notice.res?raw")
+external codeExample: string = "default"
+
+@react.component
+let make = () => {
+  let pRef = React.useRef(Js.Nullable.null)
+  let noticeRef2 = React.useRef(Js.Nullable.null)
+  let (noticeVisible1, setNoticeVisible1) = React.useState(() => false)
+  let (noticeVisible2, setNoticeVisible2) = React.useState(() => false)
+
+  <div>
+    <div className="flex flex-row items-center">
+      <Button onClick={_ => setNoticeVisible1(v => !v)}> {"Toggle notice 1"->React.string} </Button>
+      <Button onClick={_ => setNoticeVisible2(v => !v)}> {"Toggle notice 2"->React.string} </Button>
+    </div>
+    <p className="text-center" ref={ReactDOM.Ref.domRef(pRef)}>
+      {"example notice 1"->React.string}
+    </p>
+    <div ref={ReactDOM.Ref.domRef(noticeRef2)} className="w-40 h-40 bg-danger-300 ml-20 mt-20">
+      {"notice 2"->React.string}
+    </div>
+    <Notice visible=noticeVisible1 baseElementRef=pRef className="bg-info-700 p-2 rounded">
+      <p className="text-white"> {"Some text there"->React.string} </p>
+    </Notice>
+    <Notice visible=noticeVisible2 baseElementRef=noticeRef2 className="bg-info-700 p-2 rounded">
+      <p className="text-white"> {"Some text there"->React.string} </p>
+    </Notice>
+  </div>
+}

package/playground/components/Playground_Snackbar.res

@@ -0,0 +1,43 @@
+open Toolkit__Ui
+
+@module("@root/src/ui/Toolkit__Ui_Snackbar.resi?raw")
+external resi: string = "default"
+
+@module("@root/playground/components/Playground_Snackbar.res?raw")
+external codeExample: string = "default"
+
+@react.component
+let make = () => {
+  let variants: array<Toolkit__Ui_Snackbar.variant> = [#success, #warning, #danger]
+
+  <div>
+    <Snackbar.Provider />
+    <div className="flex flex-col gap-4">
+      {variants
+      ->Array.map(variant => {
+        let variantAsString = (variant :> string)
+
+        <div className="flex flex-row gap-4">
+          <span>
+            <Button onClick={_ => Snackbar.show(~title=variantAsString, ~variant, ())->ignore}>
+              {`Trigger ${variantAsString} variant`->React.string}
+            </Button>
+          </span>
+          <span>
+            <Button
+              onClick={_ =>
+                Snackbar.show(
+                  ~title=variantAsString,
+                  ~content="Description"->React.string,
+                  ~variant,
+                  (),
+                )->ignore}>
+              {`Trigger ${variantAsString} variant with description`->React.string}
+            </Button>
+          </span>
+        </div>
+      })
+      ->React.array}
+    </div>
+  </div>
+}

package/playground/components/Playground_Spinner.res

@@ -0,0 +1,48 @@
+open Toolkit__Ui
+
+@module("@root/src/ui/Toolkit__Ui_Spinner.resi?raw")
+external resi: string = "default"
+
+@module("@root/playground/components/Playground_Spinner.res?raw")
+external codeExample: string = "default"
+
+@react.component
+let make = () => {
+  let colors = Js.Dict.fromArray([
+    ("current", #current),
+    ("black", #black),
+    ("white", #white),
+    ("gray", #gray),
+    ("success", #success),
+    ("primary", #primary),
+    ("warning", #warning),
+    ("info", #info),
+    ("danger", #danger),
+  ])
+
+  let sizes = Js.Dict.fromArray([("sm", #sm), ("md", #md), ("lg", #lg), ("xl", #xl)])
+
+  <div>
+    {colors
+    ->Js.Dict.entries
+    ->Array.mapWithIndex((i, (colorText, color)) =>
+      <div key={i->Int.toString ++ colorText} className="flex flex-row items-center">
+        <strong className="w-40"> {colorText->React.string} </strong>
+        <div className="flex flex-row items-center gap-8 mb-4">
+          {sizes
+          ->Js.Dict.entries
+          ->Array.mapWithIndex((k, (sizeText, size)) =>
+            <div
+              key={(i + k)->Int.toString ++ (colorText ++ sizeText)}
+              className="flex flex-col items-center">
+              <Spinner color size />
+              <span className="text-xxs"> {sizeText->React.string} </span>
+            </div>
+          )
+          ->React.array}
+        </div>
+      </div>
+    )
+    ->React.array}
+  </div>
+}

package/playground/components/Playground_Switch.res

@@ -1,9 +1,9 @@
 open Toolkit__Ui
 
-@module("../../../../src/ui/Toolkit__Ui_Switch.resi?raw")
+@module("@root/src/ui/Toolkit__Ui_Switch.resi?raw")
 external resi: string = "default"
 
-@module("../../../../playground/components/Playground_Switch.res?raw")
+@module("@root/playground/components/Playground_Switch.res?raw")
 external codeExample: string = "default"
 
 @react.component

package/playground/custom.css

@@ -155,9 +155,12 @@
 }
 
 h2 {
-  @apply text-2xl font-display font-bold;
+  @apply text-3xl font-display font-bold;
 }
 h3 {
+  @apply text-2xl font-display font-bold;
+}
+h4 {
   @apply text-xl font-display font-bold;
 }
 

package/playground/docs/Setup.mdx

@@ -30,16 +30,15 @@ We share a postcss config that you can include to your webpack config
 
 ## Usage
 
-The bindings in the _vendors_ are **globaly accessible**. Everything else is scoped into the `Toolkit` namespace.
+The bindings in the _vendors_ are **globaly accessible**.
 
 ```rescript
-open Toolkit;
 
 @react.component
 let make = () => {
-  let dialog = Hooks.useDisclosure();
+  let dialog = Toolkit.Hooks.useDisclosure();
 
-  <div className=Tw.(style([bgWhite])) />
+  <div className="bg-white" />
 };
 ```
 
@@ -50,9 +49,3 @@ Run bsb
 ```bash
 npm run dev
 ```
-
-Run storybook
-
-```bash
-npm run storybook
-```

package/src/router/Toolkit__Router.res

@@ -252,7 +252,7 @@ module Make = (Config: RouterConfig) => {
         <a
           href=url
           target="_blank"
-          className={cx([commonClassName, "sidenav-link", isSubLink ? "ml-3" : ""])}>
+          className={cx([commonClassName, "py-3 sidenav-link", isSubLink ? "ml-3" : ""])}>
           <span className="overflow-hidden flex">
             {config.icon->Option.mapWithDefault(React.null, icon =>
               <div className={cx(["text-neutral-800", isNavOpen ? "pl-2" : "px-2"])}> icon </div>
@@ -280,6 +280,7 @@ module Make = (Config: RouterConfig) => {
           className={cx([
             commonClassName,
             isSubLink ? "ml-3" : "",
+            config.icon->Option.isNone ? "py-5" : "",
             "sidenav-link",
             isActive ? "bg-primary-100/75 text-neutral-700" : "",
           ])}

package/src/ui/Toolkit__Ui_MultiSelect.res

@@ -36,6 +36,18 @@ let make = (
     None
   }, (previousDefaultValue, defaultValue))
 
+  let filterOptionsBySearch = (~options, ~search) => {
+    options->Array.keep(({label}) =>
+      // normalize nfd -> replace by re remove split by commponents the accent letters and deletes the accent component only, leaving the un-accented letter
+      search == "" ||
+        label
+        ->Js.String2.toLowerCase
+        ->Js.String2.normalizeByForm("NFD")
+        ->Js.String2.replaceByRe(%re("/[\u0300-\u036f]/g"), "")
+        ->Js.String2.includes(search)
+    )
+  }
+
   <Toolkit__Ui_Dropdown
     buttonClassName
     dropdownClassName
@@ -64,6 +76,15 @@ let make = (
               id="search"
               autoFocus={true}
               placeholder=?{searchPlaceholder}
+              onKeyDown={event => {
+                if event->ReactEvent.Keyboard.key === "Enter" && search !== "" {
+                  let selectedOptions = filterOptionsBySearch(~options, ~search)
+                  onChange(selectedOptions)
+                  setSelectedOptions(_ => {
+                    selectedOptions
+                  })
+                }
+              }}
               onChange={event => {
                 let target = event->ReactEvent.Form.currentTarget
                 // normalize nfd -> replace by re remove split by commponents the accent letters and deletes the accent component only, leaving the un-accented letter