@colisweb/rescript-toolkit 2.70.1 → 2.71.0

package/playground/stories/Toolkit__UI_IconButtonStory.res

@@ -1,140 +0,0 @@
-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_NativeDatePickerStory.res

@@ -1,60 +0,0 @@
-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_PortalDropdownStory.res

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

package/playground/stories/Toolkit__UI_RadioStory.res

@@ -1,128 +0,0 @@
-open Storybook
-open Toolkit__Ui
-
-@module("!!raw-loader!../../../src/ui/Toolkit__Ui_Radio.resi")
-external source: 'a = "default"
-
-let default = CSF.make(~title="Form/Radio", ())
-
-let sample = () =>
-  <div>
-    <input />
-    <Radio name="test" value="test1"> {"test1"->React.string} </Radio>
-    <Radio name="test" value="test2"> {"test2"->React.string} </Radio>
-    <Radio name="test" value="test3"> {"test3"->React.string} </Radio>
-  </div>
-
-sample->CSF.addMeta(
-  ~name="sample",
-  ~parameters={
-    "docs": {
-      "page": () => <>
-        <CodeBlock> source </CodeBlock>
-        <Docs.Source
-          language="rescript"
-          code=j`
-<div>
-  <Radio name="test" value="test1"> {"test1"->React.string} </Radio>
-  <Radio name="test" value="test2"> {"test2"->React.string} </Radio>
-  <Radio name="test" value="test3"> {"test3"->React.string} </Radio>
-</div>
-          `
-        />
-        <Docs.Story id="form-radio--sample" />
-      </>,
-    },
-  },
-  (),
-)
-
-let checked = () =>
-  <Radio checked=true name="test" value="test"> {"children"->React.string} </Radio>
-
-checked->CSF.addMeta(
-  ~name="checked",
-  ~parameters={
-    "docs": {
-      "page": () => <>
-        <CodeBlock> source </CodeBlock>
-        <Docs.Source
-          language="rescript"
-          code=j`
-<Radio name="test" checked=true value="test"> "children"->React.string </Radio>
-          `
-        />
-        <Docs.Story id="form-radio--checked" />
-      </>,
-    },
-  },
-  (),
-)
-
-let sizes = () =>
-  <div>
-    <Radio checked=true name="test" value="test" size=#xs className="mb-4">
-      {"xs"->React.string}
-    </Radio>
-    <Radio checked=true name="test" value="test" size=#sm className="mb-4">
-      {"sm"->React.string}
-    </Radio>
-    <Radio checked=true name="test" value="test" size=#md className="mb-4">
-      {"md"->React.string}
-    </Radio>
-    <Radio checked=true name="test" value="test" size=#lg className="mb-4">
-      {"lg"->React.string}
-    </Radio>
-  </div>
-
-sizes->CSF.addMeta(
-  ~name="sizes",
-  ~parameters={
-    "docs": {
-      "page": () => <>
-        <CodeBlock> source </CodeBlock>
-        <Docs.Source
-          language="rescript"
-          code=j`
-<>
-  <Radio
-    checked=true
-    name="test"
-    value="test"
-    size=#xs
-    className="mb-4">
-    "xs"->React.string
-  </Radio>
-  <Radio
-    checked=true
-    name="test"
-    value="test"
-    size=#sm
-    className="mb-4">
-    "sm"->React.string
-  </Radio>
-  <Radio
-    checked=true
-    name="test"
-    value="test"
-    size=#md
-    className="mb-4">
-    "md"->React.string
-  </Radio>
-  <Radio
-    checked=true
-    name="test"
-    value="test"
-    size=#lg
-    className="mb-4">
-    "lg"->React.string
-  </Radio>
-</>
-          `
-        />
-        <Docs.Story id="form-radio--sizes" />
-      </>,
-    },
-  },
-  (),
-)

package/playground/stories/Toolkit__UI_ReferenceStory.res

@@ -1,37 +0,0 @@
-open Storybook
-open Toolkit__Ui
-
-@module("!!raw-loader!../../../src/ui/Toolkit__Ui_Reference.resi")
-external source: 'a = "default"
-
-let default = CSF.make(~title="Components/Reference", ())
-
-let defaultExample = () =>
-  <div>
-    <Reference reference="07868-9897687-0898" />
-    <div className="w-48 mt-4"> <Reference reference="07868-9897687-0898" /> </div>
-  </div>
-
-defaultExample->CSF.addMeta(
-  ~name="default",
-  ~parameters={
-    "docs": {
-      "page": () => <>
-        <CodeBlock> source </CodeBlock>
-        <Docs.Source
-          language="rescript"
-          code=j`
-<div>
-  <Reference reference="07868-9897687-0898" />
-  <div className="w-48 mt-4">
-    <Reference reference="07868-9897687-0898" />
-  </div>
-</div>;
-          `
-        />
-        <Docs.Story id="components-reference--default-example" />
-      </>,
-    },
-  },
-  (),
-)

package/playground/stories/Toolkit__UI_RichTextStory.res

@@ -1,40 +0,0 @@
-open Storybook
-open Toolkit__Ui
-
-@module("!!raw-loader!../../../src/ui/Toolkit__Ui_RichText.resi")
-external source: 'a = "default"
-
-let default = CSF.make(~title="Components/RichText", ())
-
-let sample = () => {
-  let html = `
-    <h1>
-      test 2
-    </h1>
-  `
-  let link = "https://www.colisweb.com"
-  <div className="flex flex-col gap-4">
-    <RichText text="test" /> <RichText text=html /> <RichText text=link />
-  </div>
-}
-
-sample->CSF.addMeta(
-  ~name="sample",
-  ~parameters={
-    "docs": {
-      "page": () => <>
-        <CodeBlock> source </CodeBlock>
-        <Docs.Source
-          language="rescript"
-          code=j`
-<div>
-    <RichText text="test" />
-  </div>
-          `
-        />
-        <Docs.Story id="form-label--sample" />
-      </>,
-    },
-  },
-  (),
-)

package/playground/stories/Toolkit__UI_SelectStory.res

@@ -1,153 +0,0 @@
-open Storybook
-open Toolkit__Ui
-
-@module("!!raw-loader!../../../src/ui/Toolkit__Ui_Select.resi")
-external source: 'a = "default"
-
-let default = CSF.make(~title="Form/Select", ())
-
-let native = () =>
-  <div>
-    <Label htmlFor="test" optionalMessage={"Optional"->React.string}>
-      {"Label"->React.string}
-    </Label>
-    <Select
-      onChange={_ => ()}
-      id="test"
-      placeholder="This is a placeholder"
-      options=[
-        ("label", "value", true),
-        ("label2", "value2", true),
-        ("label disabled", "value3", false),
-      ]
-    />
-  </div>
-
-native->CSF.addMeta(
-  ~name="native",
-  ~parameters={
-    "docs": {
-      "page": () => <>
-        <CodeBlock> source </CodeBlock>
-        <Docs.Source
-          language="rescript"
-          code=j`
-<div>
-  <Label htmlFor="test" optionalMessage={"Optional"->React.string}>
-    "Label"->React.string
-  </Label>
-  <Select
-    onChange={_ => ()}
-    id="test"
-    placeholder="This is a placeholder"
-    options=[|
-      ("label", "value", true),
-      ("label2"->React.string, "value2", true),
-      ("label disabled"->React.string, "value3", false),
-    |]
-  />
-</div>
-          `
-        />
-        <Docs.Story id="form-select--native" />
-      </>,
-    },
-  },
-  (),
-)
-
-let reactSelect = () => {
-  open BsReactSelect
-  let options = [
-    {label: "Label", value: "value"},
-    {label: "Label2", value: "value2"},
-    {label: "Label3", value: "value3"},
-  ]
-
-  let isDisabled = Knobs.boolean("isDisabled", false)
-  let isInvalid = Knobs.boolean("isInvalid", false)
-
-  <div>
-    <Label htmlFor="test" optionalMessage={"Optional"->React.string}>
-      {"Label"->React.string}
-    </Label>
-    <ReactSelect
-      name="test"
-      isDisabled
-      classNamePrefix="react-select"
-      className={cx([isInvalid ? "errored" : ""])}
-      placeholder="Placeholder"
-      onChange={v => Js.log(v)}
-      options
-    />
-    <div className="h-10" />
-    <Label htmlFor="test2" optionalMessage={"Optional"->React.string}>
-      {"Searchable select with multiple value"->React.string}
-    </Label>
-    <ReactSelectMultiple
-      name="test2"
-      isDisabled
-      defaultValue=[]
-      classNamePrefix="react-select"
-      className={cx([isInvalid ? "errored" : ""])}
-      placeholder="Placeholder"
-      onChange={v => Js.log(v)}
-      options
-    />
-  </div>
-}
-
-reactSelect->CSF.addMeta(
-  ~name="react-select",
-  ~parameters={
-    "docs": {
-      "page": () => <>
-        <Docs.Source
-          language="rescript"
-          code=j`
-open BsReactSelect;
-let options = [|
-  {label: "Label", value: "value"},
-  {label: "Label2", value: "value2"},
-  {label: "Label3", value: "value3"},
-|];
-
-let isDisabled = Knobs.boolean("isDisabled", false);
-let isInvalid = Knobs.boolean("isInvalid", false);
-
-<div>
-  <Label htmlFor="test" optionalMessage={"Optional"->React.string}>
-    "Label"->React.string
-  </Label>
-  <ReactSelect
-    name="test"
-    isDisabled
-    classNamePrefix="react-select"
-    className={cx([isInvalid ? "errored" : ""])}
-    placeholder="Placeholder"
-    onChange={v => Js.log(v)}
-    options
-  />
-  <div className="h-10" />
-  <Label htmlFor="test2" optionalMessage={"Optional"->React.string}>
-    "Searchable select with multiple value"->React.string
-  </Label>
-  <ReactSelectMultiple
-    name="test2"
-    isDisabled
-    defaultValue=[||]
-    classNamePrefix="react-select"
-    className={cx([isInvalid ? "errored" : ""])}
-    placeholder="Placeholder"
-    onChange={v => Js.log(v)}
-    options
-  />
-</div>;
-          `
-        />
-        <Docs.Story id="form-select--react-select" />
-      </>,
-    },
-  },
-  (),
-)

package/playground/stories/Toolkit__UI_TableStory.res

@@ -1,103 +0,0 @@
-open Storybook
-
-@module("!!raw-loader!../../../src/ui/Toolkit__Ui_Table.resi")
-external source: 'a = "default"
-
-let default = CSF.make(~title="Components/Table", ())
-
-type rec data = array<(test, toto)>
-and test = {
-  name: string,
-  age: int,
-}
-and toto = Js.Dict.t<string>
-
-module Test = {
-  let data: data = Array.make(100, ({name: "toto", age: 2}, Js.Dict.empty()))
-
-  @react.component
-  let make = () => {
-    let columns = React.useMemo0(() => [
-      ReactTable.makeColumn(
-        ~accessor=((value, _dict)) => value.name,
-        ~id="test",
-        ~header="Name"->React.string,
-        ~filterRender=_ => React.null,
-        ~cell=cell => <p> {cell.cell.value->React.string} </p>,
-        (),
-      ),
-    ])
-
-    let table = {
-      open ReactTable
-      useTable5(
-        make(~columns, ~data, ()),
-        useFilters,
-        useSortBy,
-        usePagination,
-        useFlexLayout,
-        useResizeColumns,
-      )
-    }
-
-    <div>
-      <Toolkit__Ui_Table.Pagination table />
-      <Toolkit__Ui_Table.Core table emptyMessage="No items" />
-    </div>
-  }
-}
-
-let example = () => <Test />
-
-example->CSF.addMeta(
-  ~name="example",
-  ~parameters={
-    "docs": {
-      "page": () => <>
-        <CodeBlock> source </CodeBlock>
-        <Docs.Source
-          language="rescript"
-          code=j`
-let data: data =
-    Array.make(100, ({name: "toto", age: 2}, Js.Dict.empty()));
-
-  [@react.component]
-  let make = () => {
-    let columns =
-      React.useMemo0(() => {
-        [|
-          ReactTable.makeColumn(
-            ~accessor=((value, _dict)) => value.name,
-            ~id="test",
-            ~header="Name"->React.string,
-            ~filterRender=_ => React.null,
-            ~cell=cell => {<p> cell.cell.value->React.string </p>},
-            (),
-          ),
-        |]
-      });
-
-    let table =
-      ReactTable.(
-        useTable5(
-          make(~columns, ~data, ()),
-          useFilters,
-          useSortBy,
-          usePagination,
-          useAbsoluteLayout,
-          useResizeColumns,
-        )
-      );
-
-    <div>
-      <Toolkit__Ui_Table.Pagination table />
-      <Toolkit__Ui_Table.Core table emptyMessage="No items" />
-    </
-          `
-        />
-        <Docs.Story id="components-table--example" />
-      </>,
-    },
-  },
-  (),
-)