@colisweb/rescript-toolkit 2.66.1 → 2.67.0

package/playground/stories/Toolkit__UI_IconButtonStory.res

@@ -0,0 +1,140 @@
+open Storybook
+
+let default = CSF.make(~title="Components/IconButton", ())
+
+let defaultPalette = () => {
+  let colors = Js.Dict.fromArray([
+    ("primary", #primary),
+    ("black", #black),
+    ("white", #white),
+    ("gray", #gray),
+    ("success", #success),
+    ("info", #info),
+    ("danger", #danger),
+    ("warning", #warning),
+    ("neutral", #neutral),
+    ("neutralLight", #neutralLight),
+  ])
+
+  let sizes = Js.Dict.fromArray([("xs", #xs), ("sm", #sm), ("md", #md), ("lg", #lg)])
+
+  <div>
+    {colors
+    ->Js.Dict.entries
+    ->Array.mapWithIndex((i, (colorText, color)) =>
+      <div
+        key={i->Int.toString ++ colorText}
+        className="flex flex-row flex-col-gap-4 mb-4 items-center">
+        <strong className="w-40"> {colorText->React.string} </strong>
+        <div className="flex flex-col">
+          {[false, true]
+          ->Array.mapWithIndex((j, disabled) =>
+            <div className="flex items-center flex-col-gap-1 mb-2">
+              {sizes
+              ->Js.Dict.entries
+              ->Array.mapWithIndex((k, (sizeText, size)) =>
+                <div key={(i + j + k)->Int.toString ++ (colorText ++ sizeText)}>
+                  <Toolkit__Ui_IconButton color size disabled icon={<BsReactIcons.MdHome />} />
+                </div>
+              )
+              ->React.array}
+            </div>
+          )
+          ->React.array}
+        </div>
+      </div>
+    )
+    ->React.array}
+  </div>
+}
+
+defaultPalette->CSF.addMeta(
+  ~name="default palette",
+  ~parameters={
+    "docs": {
+      "page": () => <>
+        <Docs.Title />
+        <Docs.Source
+          language="rescript"
+          code=j`
+             <IconButton
+  color=#primary
+  icon={<BsReactIcons.MdHome />}
+/>
+          `
+        />
+        <Toolkit__Ui_IconButton color=#primary icon={<BsReactIcons.MdHome />} />
+      </>,
+    },
+  },
+  (),
+)
+
+let outlinePalette = () => {
+  let colors = Js.Dict.fromArray([
+    ("primary", #primary),
+    ("black", #black),
+    ("white", #white),
+    ("gray", #gray),
+    ("success", #success),
+    ("info", #info),
+    ("danger", #danger),
+    ("warning", #warning),
+    ("neutral", #neutral),
+    ("neutralLight", #neutralLight),
+  ])
+
+  let sizes = Js.Dict.fromArray([("xs", #xs), ("sm", #sm), ("md", #md), ("lg", #lg)])
+
+  <div>
+    {colors
+    ->Js.Dict.entries
+    ->Array.mapWithIndex((i, (colorText, color)) =>
+      <div
+        key={i->Int.toString ++ colorText}
+        className="flex flex-row flex-col-gap-4 mb-4 items-center">
+        <strong className="w-40"> {colorText->React.string} </strong>
+        <div className="flex flex-col">
+          {[false, true]
+          ->Array.mapWithIndex((j, disabled) =>
+            <div className="flex items-center flex-col-gap-1 mb-2">
+              {sizes
+              ->Js.Dict.entries
+              ->Array.mapWithIndex((k, (sizeText, size)) =>
+                <div key={(i + j + k)->Int.toString ++ (colorText ++ sizeText)}>
+                  <Toolkit__Ui_IconButton color size disabled icon={<BsReactIcons.MdHome />} />
+                </div>
+              )
+              ->React.array}
+            </div>
+          )
+          ->React.array}
+        </div>
+      </div>
+    )
+    ->React.array}
+  </div>
+}
+
+outlinePalette->CSF.addMeta(
+  ~name="outline palette",
+  ~parameters={
+    "docs": {
+      "page": () => <>
+        <Docs.Title />
+        <Docs.Source
+          language="rescript"
+          code=j`
+            <IconButton
+  color=#primary
+  variant=#outline
+  icon={<BsReactIcons.MdHome />}
+/>
+          `
+        />
+        <Toolkit__Ui_IconButton color=#primary variant=#outline icon={<BsReactIcons.MdHome />} />
+      </>,
+    },
+  },
+  (),
+)

package/playground/stories/Toolkit__UI_LabelStory.res

@@ -0,0 +1,39 @@
+open Storybook
+open Toolkit__Ui
+
+@module("!!raw-loader!../../../src/ui/Toolkit__Ui_Label.resi")
+external source: 'a = "default"
+
+let default = CSF.make(~title="Form/Label", ())
+
+let sample = () =>
+  <div>
+    <Label htmlFor="test"> {"Label"->React.string} </Label>
+    <Label htmlFor="test" optionalMessage={"Optional"->React.string}>
+      {"Label"->React.string}
+    </Label>
+  </div>
+
+sample->CSF.addMeta(
+  ~name="sample",
+  ~parameters={
+    "docs": {
+      "page": () => <>
+        <CodeBlock> source </CodeBlock>
+        <Docs.Source
+          language="rescript"
+          code=j`
+<div>
+  <Label htmlFor="test"> "Label"->React.string </Label>
+  <Label htmlFor="test" optionalMessage={"Optional"->React.string}>
+    "Label"->React.string
+  </Label>
+</div>
+          `
+        />
+        <Docs.Story id="form-label--sample" />
+      </>,
+    },
+  },
+  (),
+)

package/playground/stories/Toolkit__UI_ModalStory.res

@@ -0,0 +1,211 @@
+open Storybook
+open Toolkit__Ui
+
+@module("!!raw-loader!../../../src/ui/Toolkit__Ui_Modal.resi")
+external source: 'a = "default"
+
+let default = CSF.make(~title="Components/Modal", ())
+
+let defaultExample = () => {
+  let modalSize = [("lg", #lg), ("md", #md), ("sm", #sm), ("xs", #xs)]
+
+  let (isVisible, setVisibility) = React.useState(() => false)
+  let (size, setSize) = React.useState(() => #md)
+
+  <div>
+    <div className="mb-4">
+      <label htmlFor="size"> {"Size :"->React.string} </label>
+      <select
+        id="size"
+        onChange={event => {
+          let value = (event->ReactEvent.Form.target)["value"]
+
+          setSize(_ => value)
+        }}>
+        {modalSize
+        ->Array.map(((label, value)) =>
+          <option value={value->Obj.magic} selected={value == size}> {label->React.string} </option>
+        )
+        ->React.array}
+      </select>
+    </div>
+    <Button onClick={_ => setVisibility(_ => true)}> {"Show modal"->React.string} </Button>
+    <Modal
+      isVisible
+      title={"title"->React.string}
+      body={"Body"->React.string}
+      hide={() => setVisibility(_ => false)}
+      size
+    />
+  </div>
+}
+
+defaultExample->CSF.addMeta(
+  ~name="default",
+  ~parameters={
+    "docs": {
+      "page": () => <>
+        <CodeBlock> source </CodeBlock>
+        <Docs.Source
+          language="rescript"
+          code=j`
+let (isVisible, setVisibility) = React.useState(() => false);
+
+<>
+  <button onClick={_ => setVisibility(_ => true)}>
+    "Show modal"->React.string
+  </button>
+  <Modal
+    isVisible
+    title={"title"->React.string}
+    body={"Body"->React.string}
+    hide={() => setVisibility(_ => false)}
+  />
+</>;
+          `
+        />
+        <Docs.Story id="components-modal--default" />
+      </>,
+    },
+  },
+  (),
+)
+
+let coloredExample = () => {
+  let modalSize = [("lg", #lg), ("md", #md), ("sm", #sm), ("xs", #xs)]
+
+  let modalColor: array<(string, Modal.color)> = [
+    ("primary", #primary),
+    ("success", #success),
+    ("danger", #danger),
+    ("neutral", #neutral),
+  ]
+
+  let (isVisible, setVisibility) = React.useState(() => false)
+  let (size, setSize) = React.useState(() => #md)
+  let (color, setColor) = React.useState(() => #primary)
+
+  <div>
+    <div>
+      <label htmlFor="size"> {"Size :"->React.string} </label>
+      <select
+        id="size"
+        onChange={event => {
+          let value = (event->ReactEvent.Form.target)["value"]
+
+          setSize(_ => value)
+        }}>
+        {modalSize
+        ->Array.map(((label, value)) =>
+          <option value={value->Obj.magic} selected={value == size}> {label->React.string} </option>
+        )
+        ->React.array}
+      </select>
+    </div>
+    <div>
+      <label htmlFor="color"> {"color :"->React.string} </label>
+      <select
+        onChange={event => {
+          let value = (event->ReactEvent.Form.target)["value"]
+
+          setColor(_ => value)
+        }}>
+        {modalColor
+        ->Array.map(((label, value)) =>
+          <option value={value->Obj.magic} selected={value == color}>
+            {label->React.string}
+          </option>
+        )
+        ->React.array}
+      </select>
+    </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_=#colored(color)
+    />
+  </div>
+}
+
+coloredExample->CSF.addMeta(
+  ~name="colored",
+  ~parameters={
+    "docs": {
+      "page": () => <>
+        <CodeBlock> source </CodeBlock>
+        <Docs.Source
+          language="rescript"
+          code=j`
+let modalSize = [|("lg", #lg), ("md", #md), ("sm", #sm), ("xs", #xs)|];
+
+let modalColor: array((string, Modal.color)) = [|
+  ("primary", #primary),
+  ("success", #success),
+  ("danger", #danger),
+  ("neutral", #neutral),
+|];
+
+let (isVisible, setVisibility) = React.useState(() => false);
+let (size, setSize) = React.useState(() => #md);
+let (color, setColor) = React.useState(() => #primary);
+
+<div>
+  <div>
+    <label htmlFor="size"> "Size :"->React.string </label>
+    <select
+      id="size"
+      onChange={event => {
+        let value = event->ReactEvent.Form.target##value;
+
+        setSize(_ => value);
+      }}>
+      {modalSize
+        ->Array.map(((label, value)) => {
+            <option value={value->Obj.magic} selected={value == size}>
+              label->React.string
+            </option>
+          })
+        ->React.array}
+    </select>
+  </div>
+  <div>
+    <label htmlFor="color"> "color :"->React.string </label>
+    <select
+      onChange={event => {
+        let value = event->ReactEvent.Form.target##value;
+
+        setColor(_ => value);
+      }}>
+      {modalColor
+        ->Array.map(((label, value)) => {
+            <option value={value->Obj.magic} selected={value == color}>
+              label->React.string
+            </option>
+          })
+        ->React.array}
+    </select>
+  </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_={#colored(color)}
+  />
+</div>;
+          `
+        />
+        <Docs.Story id="components-modal--colored" />
+      </>,
+    },
+  },
+  (),
+)

package/playground/stories/Toolkit__UI_MultiSelectStory.res

@@ -0,0 +1,132 @@
+open Storybook
+
+@module("!!raw-loader!../../../src/ui/Toolkit__Ui_MultiSelect.resi")
+external source: 'a = "default"
+
+let default = CSF.make(~title="Components/MultiSelect", ())
+
+let example = () => {
+  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>
+    <Toolkit__Ui_Button onClick={_ => tmp.toggle()}>
+      {"Change options"->React.string}
+    </Toolkit__Ui_Button>
+    <div className="h-10" />
+    <Toolkit__Ui_MultiSelect
+      searchPlaceholder="Filter"
+      buttonClassName={"w-48"}
+      dropdownClassName="w-60"
+      placeholder={<span> {"Select me"->React.string} </span>}
+      onChange={Js.log}
+      options
+    />
+    <div className="mt-8" />
+    <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>
+}
+
+example->CSF.addMeta(
+  ~name="example",
+  ~parameters={
+    "docs": {
+      "page": () => <>
+        <CodeBlock> source </CodeBlock>
+        <Docs.Source
+          language="rescript"
+          code=j`
+  let options: 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",
+    },
+  ]
+
+  <div>
+    <Toolkit__Ui_MultiSelect
+      searchPlaceholder="Filter"
+      buttonClassName={"w-48"}
+      dropdownClassName="w-60"
+      placeholder={<span> {"Select me"->React.string} </span>}
+      onChange={Js.log}
+      options
+    />
+    <div className="mt-8" />
+    <Toolkit__Ui_MultiSelect
+      searchPlaceholder="Filter"
+      buttonClassName={"w-48"}
+      dropdownClassName="w-60"
+      defaultValue={[options[0]->Option.getUnsafe]}
+      placeholder={<span> {"Select me"->React.string} </span>}
+      onChange={Js.log}
+      options
+    />
+  </div>
+          `
+        />
+        <Docs.Story id="components-multiselect--example" />
+      </>,
+    },
+  },
+  (),
+)

package/playground/stories/Toolkit__UI_NativeDatePickerStory.res

@@ -0,0 +1,60 @@
+open Storybook
+
+@module("!!raw-loader!../../../src/ui/Toolkit__Ui_NativeDatePicker.resi")
+external source: 'a = "default"
+
+let default = CSF.make(~title="Form/NativeDatePicker", ())
+
+let exemple = () => {
+  <div className="grid grid-cols-2 grid-flow-row auto-rows-auto gap-x-3 gap-y-3">
+    <p> {"base"->React.string} </p>
+    <Toolkit.Ui.NativeDatePicker
+      onChange={date => {
+        ()
+      }}
+    />
+    <p> {"invalid"->React.string} </p>
+    <Toolkit.Ui.NativeDatePicker
+      onChange={date => {
+        ()
+      }}
+      isInvalid=true
+    />
+    <p> {"disabled"->React.string} </p>
+    <Toolkit.Ui.NativeDatePicker
+      onChange={date => {
+        ()
+      }}
+      disabled=true
+    />
+  </div>
+}
+
+exemple->CSF.addMeta(
+  ~name="exemple",
+  ~parameters={
+    "docs": {
+      "page": () => <>
+        <CodeBlock> source </CodeBlock>
+        <Docs.Source
+          language="rescript"
+          code=j`
+let (date,setDate) = React.useEffect(None);
+
+<Toolkit.Ui.NativeDatePicker
+  onChange={date => {
+    setDate(_ => date)
+  }}
+/>
+        `
+        />
+        <Toolkit.Ui.NativeDatePicker
+          onChange={date => {
+            ()
+          }}
+        />
+      </>,
+    },
+  },
+  (),
+)

package/playground/stories/Toolkit__UI_NoticeStory.res

@@ -0,0 +1,66 @@
+open Storybook
+open Toolkit__Ui
+
+@module("!!raw-loader!../../../src/ui/Toolkit__Ui_Notice.resi")
+external source: 'a = "default"
+
+let default = CSF.make(~title="Components/Notice", ())
+
+let example = () => {
+  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"->React.string} </p>
+    <div ref={ReactDOM.Ref.domRef(noticeRef2)} className="w-40 h-40 bg-danger-300 ml-20 mt-20" />
+    <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>
+}
+
+example->CSF.addMeta(
+  ~name="example",
+  ~parameters={
+    "docs": {
+      "page": () => <>
+        <CodeBlock> source </CodeBlock>
+        <Docs.Source
+          language="rescript"
+          code=j`
+  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"->React.string} </p>
+    <div ref={ReactDOM.Ref.domRef(noticeRef2)} className="w-40 h-40 bg-danger-300 ml-20 mt-20" />
+    <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>
+          `
+        />
+        <Docs.Story id="components-notice--example" />
+      </>,
+    },
+  },
+  (),
+)

package/playground/stories/Toolkit__UI_PortalDropdownStory.res

@@ -0,0 +1,40 @@
+open Storybook
+
+@module("!!raw-loader!../../../src/ui/Toolkit__Ui_Dropdown.resi")
+external source: 'a = "default"
+
+let default = CSF.make(~title="Components/PortalDropdown", ())
+
+let example = () =>
+  <div>
+    <Toolkit__Ui_PortalDropdown dropdownClassName="w-60" label={"overflow"->React.string}>
+      {_ => <div> {"Dropdown content !"->React.string} </div>}
+    </Toolkit__Ui_PortalDropdown>
+    <div className="text-right">
+      <Toolkit__Ui_PortalDropdown
+        dropdownClassName="w-[400px] mt-4" label={"overflow"->React.string}>
+        {_ => <div> {"Dropdown content !"->React.string} </div>}
+      </Toolkit__Ui_PortalDropdown>
+    </div>
+  </div>
+
+example->CSF.addMeta(
+  ~name="example",
+  ~parameters={
+    "docs": {
+      "page": () => <>
+        <CodeBlock> source </CodeBlock>
+        <Docs.Source
+          language="rescript"
+          code={j`
+    <Toolkit__Ui_PortalDropdown dropdownClassName="w-60" label={"overflow"->React.string}>
+      {_ => <div> {"Dropdown content !"->React.string} </div>}
+    </Toolkit__Ui_PortalDropdown>
+          `}
+        />
+        <Docs.Story id="components-dropdown--portal" />
+      </>,
+    },
+  },
+  (),
+)