@colisweb/rescript-toolkit 2.70.1 → 2.71.0

package/playground/stories/Storybook.res

@@ -1,178 +0,0 @@
-type \"export" = {title: string}
-
-module Main = {
-  type chapter = unit => React.element
-
-  type section
-
-  @val @module("@storybook/react")
-  external storiesOf: (string, 'a) => section = "storiesOf"
-
-  @send external extAdd: (section, string, chapter) => unit = "add"
-
-  type decorator = chapter => React.element
-
-  @send external addDecorator: (section, decorator) => unit = "addDecorator"
-
-  type webpackModule
-
-  type chapterAdd = (string, chapter) => unit
-
-  type story = {add: chapterAdd}
-
-  let createStory = (
-    ~title: string,
-    ~decorators: list<decorator>,
-    ~_module: webpackModule,
-    (),
-  ): story => {
-    let story = storiesOf(title, _module)
-    decorators->List.forEach(dec => addDecorator(story, dec))
-    {add: (name: string, c: chapter) => extAdd(story, name, c)}
-  }
-}
-
-module Story = {
-  type section
-
-  type webpackModule
-
-  type chapter = unit => React.element
-
-  type decorator = chapter => React.element
-
-  @val @module("@storybook/react")
-  external storiesOf: (string, webpackModule) => section = "storiesOf"
-
-  @send external add: (section, string, chapter) => section = "add"
-
-  @send external addDecorator: (section, decorator) => section = "addDecorator"
-}
-
-module CSF = {
-  type csfStory = unit => React.element
-  type decorator = csfStory => React.element
-
-  type csfMetadata<'params> = {
-    title: string,
-    component: Js.Nullable.t<unit => React.element>,
-    decorators: Js.Nullable.t<array<decorator>>,
-    parameters: Js.Nullable.t<'params>,
-    includeStories: Js.Nullable.t<array<string>>,
-    excludeStories: Js.Nullable.t<array<string>>,
-  }
-
-  type storyMetadata<'params> = {
-    name: Js.Nullable.t<string>,
-    decorators: Js.Nullable.t<array<decorator>>,
-    parameters: Js.Nullable.t<'params>,
-  }
-
-  @ocaml.doc("
-  * Bucklescript renames a variables called `default` to `$$default` and exports that as well.
-  ")
-  let bsExports = ["$$default"]
-
-  @set
-  external story: (csfStory, storyMetadata<'params>) => unit = "story"
-
-  let make = (
-    ~title,
-    ~component=?,
-    ~decorators=?,
-    ~parameters=?,
-    ~includeStories=?,
-    ~excludeStories=?,
-    (),
-  ) => {
-    title: title,
-    component: component->Js.Nullable.fromOption,
-    decorators: decorators->Js.Nullable.fromOption,
-    parameters: parameters->Js.Nullable.fromOption,
-    includeStories: includeStories->Js.Nullable.fromOption,
-    excludeStories: excludeStories
-    ->Belt.Option.mapWithDefault(bsExports, es => es->Js.Array2.concat(bsExports))
-    ->Js.Nullable.return,
-  }
-
-  let addMeta = (csfStory, ~name=?, ~decorators=?, ~parameters=?, ()) =>
-    csfStory->story({
-      name: name->Js.Nullable.fromOption,
-      decorators: decorators->Js.Nullable.fromOption,
-      parameters: parameters->Js.Nullable.fromOption,
-    })
-}
-
-module Knobs = {
-  @module("@storybook/addon-knobs")
-  external withKnobs: Main.decorator = "withKnobs"
-
-  @module("@storybook/addon-knobs")
-  external boolean: (string, bool) => bool = "boolean"
-
-  @module("@storybook/addon-knobs")
-  external select: (string, Js.Dict.t<'a>, 'a) => 'a = "select"
-
-  @module("@storybook/addon-knobs")
-  external array: (string, array<'a>, 'a) => string = "array"
-
-  @module("@storybook/addon-knobs")
-  external text: (string, string) => string = "text"
-
-  @module("@storybook/addon-knobs")
-  external int: (string, int) => int = "number"
-
-  @module("@storybook/addon-knobs")
-  external float: (string, float) => string = "number"
-
-  type range<'v> = {
-    range: bool,
-    min: 'v,
-    max: 'v,
-    step: int,
-  }
-
-  @module("@storybook/addon-knobs")
-  external intRange: (string, int, range<int>) => string = "number"
-
-  @module("@storybook/addon-knobs")
-  external floatRange: (string, float, range<float>) => string = "number"
-
-  @module("@storybook/addon-knobs")
-  external date: (string, Js.Date.t) => string = "date"
-}
-
-module Docs = {
-  module Title = {
-    @module("@storybook/addon-docs/blocks") @react.component
-    external make: unit => React.element = "Title"
-  }
-  module Subtitle = {
-    @module("@storybook/addon-docs/blocks") @react.component
-    external make: unit => React.element = "Subtitle"
-  }
-  module Description = {
-    @module("@storybook/addon-docs/blocks") @react.component
-    external make: unit => React.element = "Description"
-  }
-  module Story = {
-    @module("@storybook/addon-docs/blocks") @react.component
-    external make: (~id: string) => React.element = "Story"
-  }
-  module Source = {
-    @module("@storybook/addon-docs/blocks") @react.component
-    external make: (~language: string, ~code: string) => React.element = "Source"
-  }
-  module Link = {
-    @react.component
-    let make = (~href: string, ~children) =>
-      <a href className="text-info-500 underline hover:text-info-400" target="_blank">
-        {children}
-      </a>
-  }
-}
-
-module CodeBlock = {
-  @module("../../../.storybook/CodeBlock.js") @react.component
-  external make: (~children: React.element) => React.element = "default"
-}

package/playground/stories/Toolkit__Hooks_ClipboardStory.res

@@ -1,44 +0,0 @@
-open Storybook
-
-let default = CSF.make(~title="Hooks/useClipboard", ())
-
-let useClipboard = () => {
-  let clipboard = Toolkit.Hooks.useClipboard(
-    ~onCopyNotificationMessage="Copied !",
-    "copied content",
-  )
-
-  <>
-    <Toolkit.Ui.Snackbar.Provider />
-    <Toolkit.Ui.Button onClick={_ => clipboard.copy()}> {"Copy"->React.string} </Toolkit.Ui.Button>
-  </>
-}
-
-useClipboard->CSF.addMeta(
-  ~name="example",
-  ~parameters={
-    "docs": {
-      "page": () => <>
-        <Docs.Source
-          language="rescript"
-          code=j`
-let clipboard =
-  Toolkit.Hooks.useClipboard(
-    ~onCopyNotificationMessage="Copied !",
-    "copied content",
-  );
-
-<>
-  <Toolkit.Ui.Snackbar.Provider />
-  <Toolkit.Ui.Button onClick={_ => clipboard.copy()}>
-    "Copy"->React.string
-  </Toolkit.Ui.Button>
-</>;
-          `
-        />
-        <Docs.Story id="hooks-useclipboard--use-clipboard" />
-      </>,
-    },
-  },
-  (),
-)

package/playground/stories/Toolkit__Hooks_DisclosureStory.res

@@ -1,56 +0,0 @@
-open Storybook
-
-let default = CSF.make(~title="Hooks/useDisclosure", ())
-
-let useDisclosure = () => {
-  let disclosure = Toolkit.Hooks.useDisclosure()
-
-  <div className="grid grid-cols-2 gap-4 w-64">
-    <div className="grid grid-rows-3 gap-4">
-      <Toolkit.Ui.Button onClick={_ => disclosure.toggle()}>
-        {"Toggle"->React.string}
-      </Toolkit.Ui.Button>
-      <Toolkit.Ui.Button onClick={_ => disclosure.show()}>
-        {"Show"->React.string}
-      </Toolkit.Ui.Button>
-      <Toolkit.Ui.Button onClick={_ => disclosure.hide()}>
-        {"Hide"->React.string}
-      </Toolkit.Ui.Button>
-    </div>
-    <p> {(disclosure.isOpen ? "Visible" : "hidden")->React.string} </p>
-  </div>
-}
-
-useDisclosure->CSF.addMeta(
-  ~name="example",
-  ~parameters={
-    "docs": {
-      "page": () => <>
-        // <CodeBlock> source </CodeBlock>
-        <Docs.Source
-          language="rescript"
-          code=j`
-let disclosure = Toolkit.Hooks.useDisclosure();
-
-<div className="grid grid-cols-2 gap-4 w-64">
-  <div className="grid grid-rows-3 gap-4">
-    <Toolkit.Ui.Button onClick={_ => disclosure.toggle()}>
-      "Toggle"->React.string
-    </Toolkit.Ui.Button>
-    <Toolkit.Ui.Button onClick={_ => disclosure.show()}>
-      "Show"->React.string
-    </Toolkit.Ui.Button>
-    <Toolkit.Ui.Button onClick={_ => disclosure.hide()}>
-      "Hide"->React.string
-    </Toolkit.Ui.Button>
-  </div>
-  <p> (disclosure.isOpen ? "Visible" : "hidden")->React.string </p>
-</div>;
-          `
-        />
-        <Docs.Story id="hooks-usedisclosure--use-disclosure" />
-      </>,
-    },
-  },
-  (),
-)

package/playground/stories/Toolkit__Hooks_LazyLoadStory.res

@@ -1,58 +0,0 @@
-open Storybook
-
-let default = CSF.make(~title="Hooks/useLazyLoad", ())
-
-let useLazyLoad = () => {
-  let ref = React.useRef(Js.Nullable.null)
-  let intersection = ReactUse.useIntersection(
-    ref,
-    {
-      root: Js.Nullable.null,
-      rootMargin: "0px",
-      threshold: 1.,
-    },
-  )
-
-  <div
-    className={cx([
-      "h-[600px] w-64 overflow-scroll border",
-      switch intersection->Js.Nullable.toOption {
-      | Some({intersectionRatio}) if intersectionRatio < 1. => ""
-      | _ => "bg-info-100"
-      },
-    ])}>
-    <p className="h-[500px]">
-      {"The background will change when the text at the end will be visible in the viewport."->React.string}
-    </p>
-    <p ref={ReactDOM.Ref.domRef(ref)}> {"not visible"->React.string} </p>
-  </div>
-}
-
-useLazyLoad->CSF.addMeta(
-  ~name="example",
-  ~parameters={
-    "docs": {
-      "page": () => <>
-        <Docs.Source
-          language="rescript"
-          code=j`
-let clipboard =
-  Toolkit.Hooks.useClipboard(
-    ~onCopyNotificationMessage="Copied !",
-    "copied content",
-  );
-
-<>
-  <Toolkit.Ui.Snackbar.Provider />
-  <Toolkit.Ui.Button onClick={_ => clipboard.copy()}>
-    "Copy"->React.string
-  </Toolkit.Ui.Button>
-</>;
-          `
-        />
-        <Docs.Story id="hooks-useclipboard--use-clipboard" />
-      </>,
-    },
-  },
-  (),
-)

package/playground/stories/Toolkit__UI_CheckboxStory.res

@@ -1,150 +0,0 @@
-open Storybook
-open Toolkit__Ui
-
-@module("!!raw-loader!../../../src/ui/Toolkit__Ui_Checkbox.resi")
-external source: 'a = "default"
-
-let default = CSF.make(~title="Form/Checkbox", ())
-
-let sample = () => {
-  let (checked, setChecked) = React.useState(() => true)
-
-  <div>
-    <Checkbox name="test" value="test"> {"children"->React.string} </Checkbox>
-    <Checkbox
-      name="test2" value="test" inverseLabel={true} checkedClassname="border border-success-500">
-      {"children"->React.string}
-    </Checkbox>
-    <br />
-    <Checkbox
-      name="test2"
-      value="test"
-      inverseLabel={true}
-      checkedClassname="border border-success-500"
-      hideLabel={true}>
-      {"children"->React.string}
-    </Checkbox>
-    <br />
-    <div className="w-64">
-      <p> {"controlled"->React.string} </p>
-      <Checkbox
-        name="test2"
-        value="test"
-        checked
-        onChange={(checked, _) => setChecked(_ => checked)}
-        checkedClassname="border border-success-500"
-        hideLabel={true}>
-        {"children"->React.string}
-      </Checkbox>
-      <button onClick={_ => setChecked(c => !c)}> {"toggle"->React.string} </button>
-    </div>
-  </div>
-}
-
-sample->CSF.addMeta(
-  ~name="sample",
-  ~parameters={
-    "docs": {
-      "page": () => <>
-        <CodeBlock> source </CodeBlock>
-        <Docs.Source
-          language="rescript"
-          code=j`
-<Checkbox name="test" value="test"> "children"->React.string </Checkbox>
-          `
-        />
-        <Docs.Story id="form-checkbox--sample" />
-      </>,
-    },
-  },
-  (),
-)
-
-let checked = () =>
-  <Checkbox checked=true name="test" value="test"> {"children"->React.string} </Checkbox>
-
-checked->CSF.addMeta(
-  ~name="checked",
-  ~parameters={
-    "docs": {
-      "page": () => <>
-        <CodeBlock> source </CodeBlock>
-        <Docs.Source
-          language="rescript"
-          code=j`
-<Checkbox name="test" checked=true value="test"> "children"->React.string </Checkbox>
-          `
-        />
-        <Docs.Story id="form-checkbox--checked" />
-      </>,
-    },
-  },
-  (),
-)
-
-let sizes = () => <>
-  <Checkbox checked=true name="test" value="test" size=#xs className="mb-4">
-    {"xs"->React.string}
-  </Checkbox>
-  <Checkbox checked=true name="test" value="test" size=#sm className="mb-4">
-    {"sm"->React.string}
-  </Checkbox>
-  <Checkbox checked=true name="test" value="test" size=#md className="mb-4">
-    {"md"->React.string}
-  </Checkbox>
-  <Checkbox checked=true name="test" value="test" size=#lg className="mb-4">
-    {"lg"->React.string}
-  </Checkbox>
-</>
-
-sizes->CSF.addMeta(
-  ~name="sizes",
-  ~parameters={
-    "docs": {
-      "page": () => <>
-        <CodeBlock> source </CodeBlock>
-        <Docs.Source
-          language="rescript"
-          code=j`
-<>
-  <Checkbox
-    checked=true
-    name="test"
-    value="test"
-    size=#xs
-    className="mb-4">
-    "xs"->React.string
-  </Checkbox>
-  <Checkbox
-    checked=true
-    name="test"
-    value="test"
-    size=#sm
-    className="mb-4">
-    "sm"->React.string
-  </Checkbox>
-  <Checkbox
-    checked=true
-    name="test"
-    value="test"
-    size=#md
-    className="mb-4">
-    "md"->React.string
-  </Checkbox>
-  <Checkbox
-    checked=true
-    name="test"
-    value="test"
-    size=#lg
-    className="mb-4">
-    "lg"->React.string
-  </Checkbox>
-</>
-          `
-        />
-        <Docs.Story id="form-checkbox--sizes" />
-      </>,
-    },
-  },
-  (),
-)

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