@colisweb/rescript-toolkit 2.70.0 → 2.71.0

package/playground/stories/Toolkit__UI_ComboboxStory.res

@@ -1,64 +0,0 @@
-open Storybook
-open ReachUi.Combobox
-
-let default = CSF.make(~title="Components/Combobox", ())
-
-let example = () =>
-  <div className="w-60">
-    <Combobox onSelect={value => Js.log(value)}>
-      <ComboboxInput
-        onChange={event => ReactEvent.Form.target(event)["value"]->Js.log} selectOnClick=true
-      />
-      <ComboboxPopover>
-        <ComboboxList>
-          <ComboboxOption value="test"> <ComboboxOptionText /> </ComboboxOption>
-          <ComboboxOption value="test2"> <ComboboxOptionText /> </ComboboxOption>
-          <ComboboxOption value="test4"> <ComboboxOptionText /> </ComboboxOption>
-          <ComboboxOption value="really big return value example an address from google maps">
-            <ComboboxOptionText />
-          </ComboboxOption>
-          <ComboboxOption value="toto"> <ComboboxOptionText /> </ComboboxOption>
-          <ComboboxOption value="aaa"> <ComboboxOptionText /> </ComboboxOption>
-        </ComboboxList>
-      </ComboboxPopover>
-    </Combobox>
-  </div>
-
-example->CSF.addMeta(
-  ~name="example",
-  ~parameters={
-    "docs": {
-      "page": () => <>
-        <p className="mb-4">
-          {"We use "->React.string}
-          <Docs.Link href="https://reach.tech/combobox">
-            {"@reach/combobox"->React.string}
-          </Docs.Link>
-          {" plugin"->React.string}
-        </p>
-        <CodeBlock>
-          {j`
-<Combobox onSelect={value => Js.log(value)}>
-  <ComboboxInput
-    onChange={event => ReactEvent.Form.target(event)["value"]->Js.log} selectOnClick=true
-  />
-  <ComboboxPopover>
-    <ComboboxList>
-      <ComboboxOption value="test"> <ComboboxOptionText /> </ComboboxOption>
-      <ComboboxOption value="test2"> <ComboboxOptionText /> </ComboboxOption>
-      <ComboboxOption value="test4"> <ComboboxOptionText /> </ComboboxOption>
-      <ComboboxOption value="really big return value example an address from google maps">
-        <ComboboxOptionText />
-      </ComboboxOption>
-      <ComboboxOption value="toto"> <ComboboxOptionText /> </ComboboxOption>
-      <ComboboxOption value="aaa"> <ComboboxOptionText /> </ComboboxOption>
-    </ComboboxList>
-  </ComboboxPopover>
-</Combobox>`->React.string}
-        </CodeBlock>
-        <Docs.Story id="components-combobox--example" />
-      </>,
-    },
-  },
-  (),
-)

package/playground/stories/Toolkit__UI_DropdownListStory.res

@@ -1,89 +0,0 @@
-open Storybook
-
-@module("!!raw-loader!../../../src/ui/Toolkit__Ui_DropdownList.resi")
-external source: 'a = "default"
-
-let default = CSF.make(~title="Components/DropdownList", ())
-
-let example = () => {
-  let items: array<Toolkit__Ui_DropdownList.item> = [
-    {
-      icon: <BsReactIcons.MdKeyboardArrowRight size={22} />,
-      label: "Test"->React.string,
-      onClick: () => Js.log("test"),
-      className: "",
-    },
-    {
-      icon: <BsReactIcons.MdKeyboardArrowRight size={22} />,
-      label: "Test 2"->React.string,
-      onClick: () => Js.log("test 2"),
-      className: "",
-    },
-    {
-      icon: <BsReactIcons.MdKeyboardArrowRight size={22} />,
-      label: "Test 3"->React.string,
-      onClick: () => Js.log("test 3"),
-      className: "",
-    },
-  ]
-
-  <div className="flex flex-row gap-8">
-    <Toolkit__Ui_DropdownList label={"default bottom"->React.string} items />
-    <Toolkit__Ui_DropdownList label={"top"->React.string} position=#top items />
-    <div className="absolute top-20 left-40">
-      <Toolkit__Ui_DropdownList label={"test"->React.string} items />
-    </div>
-    <div className="absolute top-20 right-0">
-      <Toolkit__Ui_DropdownList label={"test 2"->React.string} defaultIsOpen={true} items />
-    </div>
-  </div>
-}
-
-example->CSF.addMeta(
-  ~name="example",
-  ~parameters={
-    "docs": {
-      "page": () => <>
-        <CodeBlock> source </CodeBlock>
-        <Docs.Source
-          language="rescript"
-          code=j`
- let items: array<Toolkit__Ui_DropdownList.item> = [
-    {
-      icon: <BsReactIcons.MdKeyboardArrowRight size={22} />,
-      label: "Test"->React.string,
-      onClick: () => Js.log("test"),
-      className: ""
-    },
-    {
-      icon: <BsReactIcons.MdKeyboardArrowRight size={22} />,
-      label: "Test 2"->React.string,
-      onClick: () => Js.log("test 2"),
-      className: ""
-    },
-    {
-      icon: <BsReactIcons.MdKeyboardArrowRight size={22} />,
-      label: "Test 3"->React.string,
-      onClick: () => Js.log("test 3"),
-      className: ""
-    },
-  ]
-
-  <div className="flex flex-row gap-8">
-    <Toolkit__Ui_DropdownList label={"default bottom"->React.string} items />
-    <Toolkit__Ui_DropdownList label={"top"->React.string} position=#top items />
-    <div className="absolute top-20 left-40">
-      <Toolkit__Ui_DropdownList label={"test"->React.string} items />
-    </div>
-    <div className="absolute top-20 right-0">
-      <Toolkit__Ui_DropdownList label={"test 2"->React.string} defaultIsOpen={true} items />
-    </div>
-  </div>
-          `
-        />
-        <Docs.Story id="components-dropdown--example" />
-      </>,
-    },
-  },
-  (),
-)

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