@colisweb/rescript-toolkit 2.67.1 → 2.68.1

package/src/ui/styles.css

@@ -139,7 +139,6 @@ select:not([disabled]):not([tabindex="-1"]):focus,
 textarea:not([disabled]):not([tabindex="-1"]):focus,
 button:not([disabled]):not([tabindex="-1"]):focus,
 iframe:not([tabindex="-1"]):focus,
-[tabindex]:not([tabindex="-1"]):focus,
 [contentEditable="true"]:not([tabindex="-1"]):focus,
 .focus {
   outline: none !important;
@@ -164,7 +163,9 @@ iframe:not([tabindex="-1"]):focus,
 }
 
 .input-range
-  .DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end):not(.DayPicker-Day--outside) {
+  .DayPicker-Day--selected:not(.DayPicker-Day--start):not(
+    .DayPicker-Day--end
+  ):not(.DayPicker-Day--outside) {
   background-color: #f0f8ff !important;
   color: #4a90e2;
 }
@@ -221,7 +222,9 @@ iframe:not([tabindex="-1"]):focus,
 }
 
 .Selectable
-  .DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end):not(.DayPicker-Day--outside) {
+  .DayPicker-Day--selected:not(.DayPicker-Day--start):not(
+    .DayPicker-Day--end
+  ):not(.DayPicker-Day--outside) {
   background-color: #f0f8ff !important;
   color: #4a90e2;
 }

package/vite.config.js

@@ -13,7 +13,7 @@ const appDirectory = fs.realpathSync(process.cwd());
 const isProduction = process.env.NODE_ENV === "production";
 
 export default defineConfig({
-  base: isProduction ? "/colisweb-open-source/rescript-toolkit/" : "",
+  base: isProduction ? "/colisweb-open-source/rescript-toolkit/" : "/",
   build: {
     sourcemap: true,
   },
@@ -26,6 +26,7 @@ export default defineConfig({
             h1: "text-4xl",
             h2: "text-3xl",
             h3: "text-2xl",
+            h4: "text-xl",
             "h1,h2,h3,h4": "font-display font-bold underline mb-1",
             p: "mb-1",
             pre: "bg-white p-2 rounded-lg border my-4 block",

package/playground/stories/Toolkit__UI_AccordionStory.res

@@ -1,34 +0,0 @@
-open Storybook.Story
-open Storybook
-
-open ReachUi
-
-let _module = %raw("module")
-
-module Example = {
-  @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>
-}
-
-storiesOf("Components/Accordion", _module)
-->addDecorator(Knobs.withKnobs)
-->add("default", () => <Example />)
-->ignore

package/playground/stories/Toolkit__UI_AlertStory.res

@@ -1,111 +0,0 @@
-open Storybook
-open Toolkit__Ui
-
-@module("!!raw-loader!../../../src/ui/Toolkit__Ui_Alert.resi")
-external source: 'a = "default"
-
-let default = CSF.make(~title="Components/Alert", ())
-
-let success = () =>
-  <Alert title={"Title"->React.string} description={"Description"->React.string} status=#success />
-
-success->CSF.addMeta(
-  ~name="success",
-  ~parameters={
-    "docs": {
-      "page": () => <>
-        <CodeBlock> source </CodeBlock>
-        <Docs.Source
-          language="rescript"
-          code=j`
-            <Alert
-    title={"Title"->React.string}
-    description={"Description"->React.string}
-    status=#success
-  />;
-          `
-        />
-        <Docs.Story id="components-alert--success" />
-      </>,
-    },
-  },
-  (),
-)
-
-let error = () =>
-  <Alert title={"Title"->React.string} description={"Description"->React.string} status=#error />
-
-error->CSF.addMeta(
-  ~name="error",
-  ~parameters={
-    "docs": {
-      "page": () => <>
-        <CodeBlock> source </CodeBlock>
-        <Docs.Source
-          language="rescript"
-          code=j`
-            <Alert
-    title={"Title"->React.string}
-    description={"Description"->React.string}
-    status=#error
-  />;
-          `
-        />
-        <Docs.Story id="components-alert--error" />
-      </>,
-    },
-  },
-  (),
-)
-
-let warning = () =>
-  <Alert title={"Title"->React.string} description={"Description"->React.string} status=#warning />
-
-warning->CSF.addMeta(
-  ~name="warning",
-  ~parameters={
-    "docs": {
-      "page": () => <>
-        <CodeBlock> source </CodeBlock>
-        <Docs.Source
-          language="rescript"
-          code=j`
-            <Alert
-  title={"Title"->React.string}
-  description={"Description"->React.string}
-  status=#warning
-/>;
-          `
-        />
-        <Docs.Story id="components-alert--warning" />
-      </>,
-    },
-  },
-  (),
-)
-
-let info = () =>
-  <Alert title={"Title"->React.string} description={"Description"->React.string} status=#info />
-
-info->CSF.addMeta(
-  ~name="info",
-  ~parameters={
-    "docs": {
-      "page": () => <>
-        <CodeBlock> source </CodeBlock>
-        <Docs.Source
-          language="rescript"
-          code=j`
-            <Alert
-  title={"Title"->React.string}
-  description={"Description"->React.string}
-  status=#info
-/>;
-          `
-        />
-        <Docs.Story id="components-alert--info" />
-      </>,
-    },
-  },
-  (),
-)

package/playground/stories/Toolkit__UI_LabelStory.res

@@ -1,39 +0,0 @@
-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

@@ -1,211 +0,0 @@
-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

@@ -1,132 +0,0 @@
-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_NoticeStory.res

@@ -1,66 +0,0 @@
-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" />
-      </>,
-    },
-  },
-  (),
-)