@colisweb/rescript-toolkit 2.67.0 → 2.68.0

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_ButtonStory.res

@@ -1,324 +0,0 @@
-open Storybook
-
-@module("!!raw-loader!../../../src/ui/Toolkit__Ui_Button.resi")
-external source: 'a = "default"
-
-let default = CSF.make(~title="Components/Button", ())
-
-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_Button color size disabled>
-                    {"hello"->React.string}
-                  </Toolkit__Ui_Button>
-                </div>
-              )
-              ->React.array}
-            </div>
-          )
-          ->React.array}
-        </div>
-      </div>
-    )
-    ->React.array}
-  </div>
-}
-
-defaultPalette->CSF.addMeta(
-  ~name="default palette",
-  ~parameters={
-    "docs": {
-      "page": () => <>
-        <Docs.Title />
-        <CodeBlock> source </CodeBlock>
-        <Docs.Source
-          language="rescript"
-          code=j`
-            <Button variant=#default>"Content"->React.string</Button>
-          `
-        />
-      </>,
-    },
-  },
-  (),
-)
-
-let pillPalette = () => {
-  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_Button variant=#pill color size disabled>
-                    {"hello"->React.string}
-                  </Toolkit__Ui_Button>
-                </div>
-              )
-              ->React.array}
-            </div>
-          )
-          ->React.array}
-        </div>
-      </div>
-    )
-    ->React.array}
-  </div>
-}
-
-pillPalette->CSF.addMeta(
-  ~name="pill palette",
-  ~parameters={
-    "docs": {
-      "page": () => <>
-        <Docs.Title />
-        <CodeBlock> source </CodeBlock>
-        <Docs.Source
-          language="rescript"
-          code=j`
-            <Button variant=#pill>"Content"->React.string</Button>
-          `
-        />
-      </>,
-    },
-  },
-  (),
-)
-
-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_Button color size disabled variant=#outline>
-                    {"hello"->React.string}
-                  </Toolkit__Ui_Button>
-                </div>
-              )
-              ->React.array}
-            </div>
-          )
-          ->React.array}
-        </div>
-      </div>
-    )
-    ->React.array}
-  </div>
-}
-
-outlinePalette->CSF.addMeta(
-  ~name="outline palette",
-  ~parameters={
-    "docs": {
-      "page": () => <>
-        <Docs.Title />
-        <CodeBlock> source </CodeBlock>
-        <Docs.Source
-          language="rescript"
-          code=j`
-            <Button color=#primary variant=#outline>"Content"->React.string</Button>
-          `
-        />
-        <Toolkit__Ui_Button color=#primary variant=#outline>
-          {"hello"->React.string}
-        </Toolkit__Ui_Button>
-      </>,
-    },
-  },
-  (),
-)
-
-let textPalette = () => {
-  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_Button color size disabled variant=#text>
-                    {"hello"->React.string}
-                  </Toolkit__Ui_Button>
-                </div>
-              )
-              ->React.array}
-            </div>
-          )
-          ->React.array}
-        </div>
-      </div>
-    )
-    ->React.array}
-  </div>
-}
-
-textPalette->CSF.addMeta(
-  ~name="text palette",
-  ~parameters={
-    "docs": {
-      "page": () => <>
-        <Docs.Title />
-        <CodeBlock> source </CodeBlock>
-        <Docs.Source
-          language="rescript"
-          code=j`
-            <Button color=#primary variant=#text>"Content"->React.string</Button>
-          `
-        />
-        <Toolkit__Ui_Button color=#primary variant=#text>
-          {"hello"->React.string}
-        </Toolkit__Ui_Button>
-      </>,
-    },
-  },
-  (),
-)
-
-let loading = () =>
-  <Toolkit__Ui_Button color=#primary isLoading=true> {"content"->React.string} </Toolkit__Ui_Button>
-
-loading->CSF.addMeta(
-  ~name="loading",
-  ~parameters={
-    "docs": {
-      "page": () => <>
-        <Docs.Title />
-        <CodeBlock> source </CodeBlock>
-        <Docs.Source
-          language="rescript"
-          code=j`
-            <Button color=#primary isLoading=true>"Content"->React.string</Button>
-          `
-        />
-        <Docs.Story id="components-button--loading" />
-      </>,
-    },
-  },
-  (),
-)
-
-let disabled = () =>
-  <Toolkit__Ui_Button color=#primary disabled=true> {"content"->React.string} </Toolkit__Ui_Button>
-
-disabled->CSF.addMeta(
-  ~name="disabled",
-  ~parameters={
-    "docs": {
-      "page": () => <>
-        <Docs.Title />
-        <CodeBlock> source </CodeBlock>
-        <Docs.Source
-          language="rescript"
-          code=j`
-            <Button color=#primary disabled=true>"Content"->React.string</Button>
-          `
-        />
-        <Docs.Story id="components-button--disabled" />
-      </>,
-    },
-  },
-  (),
-)