@colisweb/rescript-toolkit 2.67.1 → 2.68.1

package/playground/stories/Toolkit__UI_SnackbarStory.res

@@ -1,209 +0,0 @@
-open Storybook
-open Toolkit__Ui
-
-@module("!!raw-loader!../../../src/ui/Toolkit__Ui_Snackbar.resi")
-external source: 'a = "default"
-
-let default = CSF.make(~title="Components/Snackbar", ())
-
-let success = () =>
-  <div>
-    <Snackbar.Provider />
-    <div className="mb-4 flex flex-row flex-col-gap-4">
-      <span>
-        <Button onClick={_ => Snackbar.show(~title="Success", ~variant=#success, ())->ignore}>
-          {"Success"->React.string}
-        </Button>
-      </span>
-      <span>
-        <Button
-          onClick={_ =>
-            Snackbar.show(
-              ~title="Success",
-              ~content="Description"->React.string,
-              ~variant=#success,
-              (),
-            )->ignore}>
-          {"Success with description"->React.string}
-        </Button>
-      </span>
-    </div>
-  </div>
-
-success->CSF.addMeta(
-  ~name="success",
-  ~parameters={
-    "docs": {
-      "page": () => <>
-        <CodeBlock> source </CodeBlock>
-        <Docs.Source
-          language="rescript"
-          code=j`
-<div>
-    <Snackbar.Provider />
-    <div className="mb-4 flex flex-row flex-col-gap-4">
-      <span>
-        <Button
-          onClick={_ =>
-            Snackbar.show(~title="Success", ~variant=#success, ())
-          }>
-          "Success"->React.string
-        </Button>
-      </span>
-      <span>
-        <Button
-          onClick={_ =>
-            Snackbar.show(
-              ~title="Success",
-              ~description="Description"->React.string,
-              ~variant=#success,
-              (),
-            )
-          }>
-          "Success with description"->React.string
-        </Button>
-      </span>
-    </div>
-  </div>;
-          `
-        />
-        <Docs.Story id="components-snackbar--success" />
-      </>,
-    },
-  },
-  (),
-)
-
-let warning = () =>
-  <div>
-    <Snackbar.Provider />
-    <div className="mb-4 flex flex-row flex-col-gap-4">
-      <span>
-        <Button onClick={_ => Snackbar.show(~title="warning", ~variant=#warning, ())->ignore}>
-          {"warning"->React.string}
-        </Button>
-      </span>
-      <span>
-        <Button
-          onClick={_ =>
-            Snackbar.show(
-              ~title="warning",
-              ~content="Description"->React.string,
-              ~variant=#warning,
-              (),
-            )->ignore}>
-          {"warning with description"->React.string}
-        </Button>
-      </span>
-    </div>
-  </div>
-
-warning->CSF.addMeta(
-  ~name="warning",
-  ~parameters={
-    "docs": {
-      "page": () => <>
-        <CodeBlock> source </CodeBlock>
-        <Docs.Source
-          language="rescript"
-          code=j`
-<div>
-  <Snackbar.Provider />
-  <div className="mb-4 flex flex-row flex-col-gap-4">
-    <span>
-      <Button
-        onClick={_ =>
-          Snackbar.show(~title="warning", ~variant=#warning, ())
-        }>
-        "warning"->React.string
-      </Button>
-    </span>
-    <span>
-      <Button
-        onClick={_ =>
-          Snackbar.show(
-            ~title="warning",
-            ~description="Description"->React.string,
-            ~variant=#warning,
-            (),
-          )
-        }>
-        "warning with description"->React.string
-      </Button>
-    </span>
-  </div>
-</div>;
-          `
-        />
-        <Docs.Story id="components-snackbar--warning" />
-      </>,
-    },
-  },
-  (),
-)
-
-let danger = () =>
-  <div>
-    <Snackbar.Provider />
-    <div className="mb-4 flex flex-row flex-col-gap-4">
-      <span>
-        <Button onClick={_ => Snackbar.show(~title="danger", ~variant=#danger, ())->ignore}>
-          {"danger"->React.string}
-        </Button>
-      </span>
-      <span>
-        <Button
-          onClick={_ =>
-            Snackbar.show(
-              ~title="danger title pretty long",
-              ~content=<div> <p> {"Description with some text"->React.string} </p> </div>,
-              ~variant=#danger,
-              (),
-            )->ignore}>
-          {"danger with description"->React.string}
-        </Button>
-      </span>
-    </div>
-  </div>
-
-danger->CSF.addMeta(
-  ~name="danger",
-  ~parameters={
-    "docs": {
-      "page": () => <>
-        <CodeBlock> source </CodeBlock>
-        <Docs.Source
-          language="rescript"
-          code=j`
-<div>
-  <Snackbar.Provider />
-  <div className="mb-4 flex flex-row flex-col-gap-4">
-    <span>
-      <Button
-        onClick={_ => Snackbar.show(~title="danger", ~variant=#danger, ())}>
-        "danger"->React.string
-      </Button>
-    </span>
-    <span>
-      <Button
-        onClick={_ =>
-          Snackbar.show(
-            ~title="danger",
-            ~description="Description"->React.string,
-            ~variant=#danger,
-            (),
-          )
-        }>
-        "danger with description"->React.string
-      </Button>
-    </span>
-  </div>
-</div>;
-          `
-        />
-        <Docs.Story id="components-snackbar--danger" />
-      </>,
-    },
-  },
-  (),
-)

package/playground/stories/Toolkit__UI_SpinnerStory.res

@@ -1,65 +0,0 @@
-open Storybook
-open Toolkit__Ui
-
-@module("!!raw-loader!../../../src/ui/Toolkit__Ui_Spinner.resi")
-external source: 'a = "default"
-
-let default = CSF.make(~title="Components/Spinner", ())
-
-let defaultPalette = () => {
-  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 flex-col-gap-4 mb-4 items-center">
-        <strong className="w-40"> {colorText->React.string} </strong>
-        <div className="flex items-center flex-col-gap-6 mb-2">
-          {sizes
-          ->Js.Dict.entries
-          ->Array.mapWithIndex((k, (sizeText, size)) =>
-            <div key={(i + k)->Int.toString ++ (colorText ++ sizeText)}>
-              <Spinner color size />
-            </div>
-          )
-          ->React.array}
-        </div>
-      </div>
-    )
-    ->React.array}
-  </div>
-}
-
-defaultPalette->CSF.addMeta(
-  ~name="default palette",
-  ~parameters={
-    "docs": {
-      "page": () => <>
-        <CodeBlock> source </CodeBlock>
-        <Docs.Source
-          language="rescript"
-          code=j`
-            <Spinner color=#primary size=#md />
-          `
-        />
-        <Spinner color=#primary size=#md />
-      </>,
-    },
-  },
-  (),
-)

package/playground/stories/Toolkit__Ui_ButtonGroupStory.res

@@ -1,77 +0,0 @@
-open Storybook
-
-@module("!!raw-loader!../../../src/ui/Toolkit__Ui_ButtonGroup.resi")
-external source: 'a = "default"
-
-let default = CSF.make(~title="Components/ButtonGroup", ())
-
-let sizePalette = () => {
-  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>
-}
-
-sizePalette->CSF.addMeta(
-  ~name="size palette",
-  ~parameters={
-    "docs": {
-      "page": () => <>
-        <CodeBlock> source </CodeBlock>
-        <Docs.Source
-          language="rescript"
-          code=j`
-            let (selectedOption, setSelectedOption) = React.useState(() => #option1);
-
-            <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>
-          `
-        />
-      </>,
-    },
-  },
-  (),
-)

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" />
-      </>,
-    },
-  },
-  (),
-)