@colisweb/rescript-toolkit 2.70.0 → 2.71.0

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

package/playground/stories/Toolkit__UI_TableStory.resi

@@ -1,3 +0,0 @@
-let default: Storybook.CSF.csfMetadata<'params>
-
-let example: unit => React.element

package/playground/stories/Toolkit__UI_TabsStory.res

@@ -1,52 +0,0 @@
-open Storybook.Story
-open Storybook
-
-open ReachUi
-
-let _module = %raw("module")
-
-storiesOf("Components/Tabs", _module)
-->addDecorator(Knobs.withKnobs)
-->add("default", () =>
-  <div>
-    <Tabs className="flex flex-col">
-      <TabList className="cw-Tabs">
-        <Tab> {"Tab 1"->React.string} </Tab> <Tab> {"Tab 2"->React.string} </Tab>
-      </TabList>
-      <TabPanels className="mt-4">
-        <TabPanel> {"Panel 1"->React.string} </TabPanel>
-        <TabPanel> {"Panel 2"->React.string} </TabPanel>
-      </TabPanels>
-    </Tabs>
-  </div>
-)
-->add("big", () =>
-  <div>
-    <Tabs className="flex flex-col">
-      <TabList className="cw-Tabs cw-Tabs--big">
-        <Tab> {"Tab 1"->React.string} </Tab> <Tab> {"Tab 2"->React.string} </Tab>
-      </TabList>
-      <TabPanels className="mt-4">
-        <TabPanel> {"Panel 1"->React.string} </TabPanel>
-        <TabPanel> {"Panel 2"->React.string} </TabPanel>
-      </TabPanels>
-    </Tabs>
-  </div>
-)
-->add("with render", () =>
-  <div>
-    <TabsRender className="flex flex-col">
-      {({selectedIndex}) => <>
-        {("selected index : " ++ selectedIndex->Int.toString)->React.string}
-        <TabList className="cw-Tabs">
-          <Tab> {"Tab 1"->React.string} </Tab> <Tab> {"Tab 2"->React.string} </Tab>
-        </TabList>
-        <TabPanels className="mt-4">
-          <TabPanel> {"Panel 1"->React.string} </TabPanel>
-          <TabPanel> {"Panel 2"->React.string} </TabPanel>
-        </TabPanels>
-      </>}
-    </TabsRender>
-  </div>
-)
-->ignore

package/playground/stories/Toolkit__UI_TagStory.res

@@ -1,160 +0,0 @@
-open Storybook
-open Toolkit__Ui
-
-@module("!!raw-loader!../../../src/ui/Toolkit__Ui_Tag.resi")
-external source: 'a = "default"
-
-let default = CSF.make(~title="Components/Tag", ())
-
-let palette = () => {
-  let colors = Js.Dict.fromArray([
-    ("black", #black),
-    ("white", #white),
-    ("gray", #gray),
-    ("primary", #primary),
-    ("info", #info),
-    ("danger", #danger),
-    ("warning", #warning),
-    ("success", #success),
-    ("neutral", #neutral),
-  ])
-
-  let size = Js.Dict.fromArray([("xs", #xs), ("sm", #sm), ("md", #md), ("lg", #lg)])
-  <div className="flex flex-col flex-gap-2 flex-1">
-    {colors
-    ->Js.Dict.entries
-    ->Array.mapWithIndex((i, (key, color)) =>
-      <div key={i->Int.toString ++ key->Obj.magic} className="flex items-center flex-col-gap-2">
-        {size
-        ->Js.Dict.entries
-        ->Array.mapWithIndex((j, (key, size)) =>
-          <div key={(i + j)->Int.toString ++ key->Obj.magic}>
-            <Tag color size> {"content"->React.string} </Tag>
-          </div>
-        )
-        ->React.array}
-      </div>
-    )
-    ->React.array}
-  </div>
-}
-
-palette->CSF.addMeta(
-  ~name="palette",
-  ~parameters={
-    "docs": {
-      "page": () => <>
-        <CodeBlock> source </CodeBlock>
-        <Docs.Source
-          language="rescript"
-          code=j`
-<Tag color size> "content"->React.string </Tag>
-          `
-        />
-        <Docs.Story id="components-tag--palette" />
-      </>,
-    },
-  },
-  (),
-)
-
-let plain = () => <Tag color=#gray size=#md> {"content"->React.string} </Tag>
-
-plain->CSF.addMeta(
-  ~name="plain",
-  ~parameters={
-    "docs": {
-      "page": () => <>
-        <CodeBlock> source </CodeBlock>
-        <Docs.Source
-          language="rescript"
-          code=j`
-<Tag color=#gray size=#md> "content"->React.string </Tag>;
-          `
-        />
-        <Docs.Story id="components-tag--plain" />
-      </>,
-    },
-  },
-  (),
-)
-
-let outline = () => {
-  let colors = Js.Dict.fromArray([
-    ("black", #black),
-    ("white", #white),
-    ("gray", #gray),
-    ("primary", #primary),
-    ("info", #info),
-    ("danger", #danger),
-    ("warning", #warning),
-    ("success", #success),
-    ("neutral", #neutral),
-  ])
-
-  let size = Js.Dict.fromArray([("xs", #xs), ("sm", #sm), ("md", #md), ("lg", #lg)])
-  <div className="flex flex-col flex-gap-2 flex-1">
-    {colors
-    ->Js.Dict.entries
-    ->Array.mapWithIndex((i, (key, color)) =>
-      <div key={i->Int.toString ++ key->Obj.magic} className="flex items-center flex-col-gap-2">
-        {size
-        ->Js.Dict.entries
-        ->Array.mapWithIndex((j, (key, size)) =>
-          <div key={(i + j)->Int.toString ++ key->Obj.magic}>
-            <Tag variant=#outline color size> {"content"->React.string} </Tag>
-          </div>
-        )
-        ->React.array}
-      </div>
-    )
-    ->React.array}
-  </div>
-}
-
-outline->CSF.addMeta(
-  ~name="outline",
-  ~parameters={
-    "docs": {
-      "page": () => <>
-        <CodeBlock> source </CodeBlock>
-        <Docs.Source
-          language="rescript"
-          code=`
-<Tag color=#gray variant=#outline size=#md> {"content"->React.string} </Tag>
-          `
-        />
-        <Docs.Story id="components-tag--outline" />
-      </>,
-    },
-  },
-  (),
-)
-
-let withTooltip = () =>
-  <Tag
-    color=#gray variant=#outline size=#md tooltipLabel={<span> {"some text"->React.string} </span>}>
-    {"content"->React.string}
-  </Tag>
-
-withTooltip->CSF.addMeta(
-  ~name="withTooltip",
-  ~parameters={
-    "docs": {
-      "page": () => <>
-        <CodeBlock> source </CodeBlock>
-        <Docs.Source
-          language="rescript"
-          code=`
-<Tag
-  color=#gray variant=#outline size=#md tooltipLabel={<span> {"some text"->React.string} </span>}>
-  {"content"->React.string}
-</Tag>
-          `
-        />
-        <Docs.Story id="components-tag--withTooltip" />
-      </>,
-    },
-  },
-  (),
-)

package/playground/stories/Toolkit__UI_TextInputStory.res

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

package/playground/stories/Toolkit__UI_TooltipStory.res

@@ -1,136 +0,0 @@
-open Storybook
-open Toolkit__Ui
-
-@module("!!raw-loader!../../../src/ui/Toolkit__Ui_Tooltip.resi")
-external source: 'a = "default"
-
-let default = CSF.make(
-  ~title="Components/Tooltip",
-  ~parameters={
-    "docs": {
-      "page": () => <>
-        <CodeBlock> source </CodeBlock>
-        <Docs.Title />
-        <Docs.Source
-          language="rescript"
-          code=j`
-            <span>
-    <Tooltip canBeShowed=true label={<span> "Label"->React.string </span>}>
-      <div> "Hover me"->React.string </div>
-    </Tooltip>
-  </span>;
-          `
-        />
-        <span>
-          <Tooltip canBeShowed=true label={<span> {"Label"->React.string} </span>}>
-            <div> {"Hover me"->React.string} </div>
-          </Tooltip>
-        </span>
-        <hr className="mt-4" />
-        <Docs.Source
-          language="rescript"
-          code=j`
-            <span>
-    <Tooltip canBeShowed=false label={<span> "Label"->React.string </span>}>
-      <div> "Hover me"->React.string </div>
-    </Tooltip>
-  </span>;
-          `
-        />
-        <span>
-          <Tooltip canBeShowed=false label={<span> {"Label"->React.string} </span>}>
-            <div> {"Hover me but nothing"->React.string} </div>
-          </Tooltip>
-        </span>
-      </>,
-    },
-  },
-  (),
-)
-
-let example = () =>
-  <span>
-    <Tooltip
-      canBeShowed=true
-      label={<span>
-        {"Please consider only if the lift is big enough for the commodity"->React.string}
-      </span>}>
-      <span className="w-auto"> {"Hover me"->React.string} </span>
-    </Tooltip>
-  </span>
-
-example->CSF.addMeta(~name="example", ())
-
-let custom = () =>
-  <span>
-    <Tooltip
-      canBeShowed=true
-      tooltipClassName="!bg-info-500"
-      triangleClassName="!border-info-500"
-      label={<span>
-        {"Please consider only if the lift is big enough for the commodity"->React.string}
-      </span>}>
-      <span className="w-auto"> {"Hover me"->React.string} </span>
-    </Tooltip>
-  </span>
-
-let v2 = () =>
-  <div>
-    <div className="inline-block relative">
-      <Toolkit__Ui_TooltipV2
-        tooltipClassName="w-[300px]"
-        position=#top
-        label={<span>
-          {"Please consider only if the lift is big enough for the commodity"->React.string}
-        </span>}>
-        <span className="w-auto"> {"Should be top but overflow"->React.string} </span>
-      </Toolkit__Ui_TooltipV2>
-    </div>
-    <br />
-    <div className="inline-block relative">
-      <Toolkit__Ui_TooltipV2
-        tooltipClassName="w-[300px]"
-        label={<span>
-          {"Please consider only if the lift is big enough for the commodity"->React.string}
-        </span>}>
-        <span className="w-auto"> {"Default as bottom should corrected"->React.string} </span>
-      </Toolkit__Ui_TooltipV2>
-    </div>
-    <br />
-    <div className="inline-block relative">
-      <Toolkit__Ui_TooltipV2
-        position=#right
-        tooltipClassName="w-[300px]"
-        label={<span>
-          {"Please consider only if the lift is big enough for the commodity"->React.string}
-        </span>}>
-        <span className="w-auto"> {"Tooltip right"->React.string} </span>
-      </Toolkit__Ui_TooltipV2>
-    </div>
-    <br />
-    <div className="inline-block relative">
-      <Toolkit__Ui_TooltipV2
-        position=#top
-        tooltipClassName="w-[300px]"
-        label={<span>
-          {"Please consider only if the lift is big enough for the commodity"->React.string}
-        </span>}>
-        <span className="w-auto"> {"Tooltip top"->React.string} </span>
-      </Toolkit__Ui_TooltipV2>
-    </div>
-    <br />
-    <div className="w-[1800px]">
-      <div className="inline-block relative ml-[1000px]">
-        <Toolkit__Ui_TooltipV2
-          position=#bottom
-          tooltipClassName="w-[300px]"
-          label={<span>
-            {"Please consider only if the lift is big enough for the commodity"->React.string}
-          </span>}>
-          <span className="w-auto"> {"Hover me"->React.string} </span>
-        </Toolkit__Ui_TooltipV2>
-      </div>
-    </div>
-  </div>
-
-custom->CSF.addMeta(~name="custom", ())