@colisweb/rescript-toolkit 2.70.0 → 2.71.0

package/playground/{stories/Toolkit__UI_DropdownStory.res → components/Playground_Dropdown.res}

@@ -1,11 +1,11 @@
-open Storybook
+@module("@root/src/ui/Toolkit__Ui_Dropdown.resi?raw")
+external resi: string = "default"
 
-@module("!!raw-loader!../../../src/ui/Toolkit__Ui_Dropdown.resi")
-external source: 'a = "default"
+@module("@root/playground/components/Playground_Dropdown.res?raw")
+external codeExample: string = "default"
 
-let default = CSF.make(~title="Components/Dropdown", ())
-
-let example = () =>
+@react.component
+let make = () =>
   <div>
     <Toolkit__Ui_Dropdown dropdownClassName="w-60" label={"overflow"->React.string}>
       <div> {"Dropdown content !"->React.string} </div>
@@ -50,56 +50,3 @@ let example = () =>
       </div>
     </div>
   </div>
-
-example->CSF.addMeta(
-  ~name="example",
-  ~parameters={
-    "docs": {
-      "page": () => <>
-        <CodeBlock> source </CodeBlock>
-        <Docs.Source
-          language="rescript"
-          code={j`
-    <Toolkit__Ui_Dropdown
-    className="p-4 shadow rounded"
-    renderButton={disclosure => {
-      <Button onClick={_ => disclosure.toggle()}> {"Toggle me"->React.string} </Button>
-    }}>
-    <div> {"Dropdown content !"->React.string} </div>
-  </Toolkit__Ui_Dropdown>
-          `}
-        />
-        <Docs.Story id="components-dropdown--example" />
-      </>,
-    },
-  },
-  (),
-)
-
-let portal = () =>
-  <div>
-    <Toolkit__Ui_PortalDropdown dropdownClassName="w-60" label={"overflow"->React.string}>
-      {_ => <div> {"Dropdown content !"->React.string} </div>}
-    </Toolkit__Ui_PortalDropdown>
-  </div>
-
-example->CSF.addMeta(
-  ~name="portal",
-  ~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/components/Playground_DropdownList.res

@@ -0,0 +1,40 @@
+@module("@root/src/ui/Toolkit__Ui_DropdownList.resi?raw")
+external resi: string = "default"
+
+@module("@root/playground/components/Playground_DropdownList.res?raw")
+external codeExample: string = "default"
+
+@react.component
+let make = () => {
+  let items: array<Toolkit__Ui_DropdownList.item> = [
+    {
+      icon: <ReactIcons.MdKeyboardArrowRight size={22} />,
+      label: "Test"->React.string,
+      onClick: () => Js.log("test"),
+      className: "",
+    },
+    {
+      icon: <ReactIcons.MdKeyboardArrowRight size={22} />,
+      label: "Test 2"->React.string,
+      onClick: () => Js.log("test 2"),
+      className: "",
+    },
+    {
+      icon: <ReactIcons.MdKeyboardArrowRight size={22} />,
+      label: "Test 3"->React.string,
+      onClick: () => Js.log("test 3"),
+      className: "",
+    },
+  ]
+
+  <div className="flex flex-row gap-8 relative">
+    <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>
+}

package/playground/{stories/Toolkit__UI_FormStory.res → components/Playground_Form.res}

@@ -1,8 +1,9 @@
-open Storybook.Story
-open Storybook
 open Toolkit__Ui
 
-let _module = %raw("module")
+let resi = ""
+
+@module("@root/playground/components/Playground_Form.res?raw")
+external codeExample: string = "default"
 
 module ReformTest = {
   module FormState = {
@@ -41,28 +42,6 @@ module ReformTest = {
   }
 }
 
-storiesOf("Form/reform", _module)->add("default", () => <ReformTest />)->ignore
-
-storiesOf("Form/TextareaInput", _module)
-->addDecorator(Knobs.withKnobs)
-->add("default", () =>
-  <div>
-    <Label htmlFor="test" optionalMessage={"Optional"->React.string}>
-      {"Label"->React.string}
-    </Label>
-    <TextareaInput id="test" placeholder="Test" />
-  </div>
-)
-->add("with error", () =>
-  <div>
-    <Label htmlFor="test" optionalMessage={"Optional"->React.string}>
-      {"Label"->React.string}
-    </Label>
-    <TextareaInput id="test" placeholder="Test" isInvalid=true />
-  </div>
-)
-->ignore
-
 module DayPickerExample = {
   open BsReactDayPicker
 
@@ -106,12 +85,58 @@ module DayPickerExample = {
   }
 }
 
-storiesOf("Form/react-day-picker", _module)
-->addDecorator(Knobs.withKnobs)
-->add("DayPicker", () => <DayPickerExample />)
-->add("DayPickerInput", () =>
-  <div>
-    <BsReactDayPicker.ReactDayPicker.DayPickerInput showOutsideDays=true firstDayOfWeek=1 />
+@react.component
+let make = () => {
+  <div className="flex flex-col gap-4">
+    <div>
+      <h2> {"Reform"->React.string} </h2>
+      <ReformTest />
+    </div>
+    <div>
+      <h2> {"TextareaInput"->React.string} </h2>
+      <Label htmlFor="test" optionalMessage={"Optional"->React.string}>
+        {"Label"->React.string}
+      </Label>
+      <TextareaInput id="test" placeholder="Test" />
+      <div>
+        <Label htmlFor="test" optionalMessage={"Optional"->React.string}>
+          {"Label"->React.string}
+        </Label>
+        <TextareaInput id="test" placeholder="Test" isInvalid=true />
+      </div>
+    </div>
+    <div>
+      <h2> {"DayPicker"->React.string} </h2>
+      <DayPickerExample />
+    </div>
+    <div>
+      <h2> {"DayPickerInput"->React.string} </h2>
+      <BsReactDayPicker.ReactDayPicker.DayPickerInput showOutsideDays=true firstDayOfWeek=1 />
+    </div>
+    <div>
+      <h2> {"NativeDatePicker"->React.string} </h2>
+      <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>
+    </div>
   </div>
-)
-->ignore
+}

package/playground/components/Playground_IconButton.res

@@ -0,0 +1,65 @@
+let resi = ""
+
+@module("@root/playground/components/Playground_IconButton.res?raw")
+external codeExample: string = "default"
+
+@react.component
+let make = () => {
+  let colors: array<Toolkit__Ui.IconButton.color> = [
+    #primary,
+    #black,
+    #white,
+    #gray,
+    #success,
+    #info,
+    #danger,
+    #warning,
+    #neutral,
+    #neutralLight,
+  ]
+  let variants: array<Toolkit__Ui.IconButton.variant> = [#default, #outline]
+
+  let sizes = Js.Dict.fromArray([("xs", #xs), ("sm", #sm), ("md", #md), ("lg", #lg)])
+
+  <div>
+    {colors
+    ->Array.mapWithIndex((i, color) => {
+      let colorText = (color :> string)
+      <div
+        key={i->Int.toString ++ colorText}
+        className="flex flex-col gap-4 first:border-0 border-t py-4 first:pt-0 border-neutral-500">
+        <h2> {colorText->React.string} </h2>
+        <div className="flex flex-row flex-wrap gap-8">
+          {variants
+          ->Array.map(variant => {
+            let variantText = (variant :> string)
+            <div key={`${colorText}${variantText}`} className="flex flex-col gap-4">
+              <h4> {variantText->React.string} </h4>
+              {[false, true]
+              ->Array.mapWithIndex(
+                (j, disabled) =>
+                  <div className="flex items-center gap-4">
+                    {disabled ? <p> {"Disabled"->React.string} </p> : React.null}
+                    {sizes
+                    ->Js.Dict.entries
+                    ->Array.mapWithIndex(
+                      (k, (sizeText, size)) =>
+                        <div key={(i + j + k)->Int.toString ++ (colorText ++ sizeText)}>
+                          <Toolkit__Ui_IconButton
+                            variant color size disabled icon={<ReactIcons.MdHome />}
+                          />
+                        </div>,
+                    )
+                    ->React.array}
+                  </div>,
+              )
+              ->React.array}
+            </div>
+          })
+          ->React.array}
+        </div>
+      </div>
+    })
+    ->React.array}
+  </div>
+}

package/playground/components/Playground_MultiSelect.res

@@ -9,7 +9,7 @@ let make = () => {
   let options1: array<Toolkit__Ui_MultiSelect.item> = [
     {
       itemLabel: <p className="flex flex-row text-danger-500">
-        <BsReactIcons.FaAngleDown />
+        <ReactIcons.FaAngleDown />
         {"test"->React.string}
       </p>,
       label: "Test",

package/playground/components/Playground_PortalDropdown.res

@@ -0,0 +1,11 @@
+@module("@root/src/ui/Toolkit__Ui_PortalDropdown.resi?raw")
+external resi: string = "default"
+
+@module("@root/playground/components/Playground_PortalDropdown.res?raw")
+external codeExample: string = "default"
+
+@react.component
+let make = () =>
+  <Toolkit__Ui_PortalDropdown dropdownClassName="w-60" label={"overflow"->React.string}>
+    {_ => <div> {"Dropdown content !"->React.string} </div>}
+  </Toolkit__Ui_PortalDropdown>

package/playground/components/Playground_ProgressBar.res

@@ -0,0 +1,33 @@
+open Toolkit__Ui
+
+@module("@root/src/ui/Toolkit__Ui_ProgressBar.resi?raw")
+external resi: string = "default"
+
+@module("@root/playground/components/Playground_ProgressBar.res?raw")
+external codeExample: string = "default"
+
+@react.component
+let make = () => {
+  let colors = Js.Dict.fromArray([
+    ("success", #success),
+    ("warning", #warning),
+    ("info", #info),
+    ("danger", #danger),
+  ])
+
+  <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="w-60">
+          <ProgressBar color progression=60. />
+        </div>
+      </div>
+    )
+    ->React.array}
+  </div>
+}

package/playground/components/Playground_Radio.res

@@ -0,0 +1,23 @@
+open Toolkit__Ui
+
+@module("@root/src/ui/Toolkit__Ui_Radio.resi?raw")
+external resi: string = "default"
+
+@module("@root/playground/components/Playground_Radio.res?raw")
+external codeExample: string = "default"
+
+@react.component
+let make = () =>
+  <div className="flex flex-col gap-4">
+    <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>
+    <Radio checked=true name="ddd" value="test"> {"default checked"->React.string} </Radio>
+    <div className="flex flex-col gap-2">
+      <h2> {"Sizes"->React.string} </h2>
+      <Radio checked=true name="test2" value="test5" size=#xs> {"xs"->React.string} </Radio>
+      <Radio checked=true name="test2" value="test55" size=#sm> {"sm"->React.string} </Radio>
+      <Radio checked=true name="test2" value="test33" size=#md> {"md"->React.string} </Radio>
+      <Radio checked=true name="test2" value="test2" size=#lg> {"lg"->React.string} </Radio>
+    </div>
+  </div>

package/playground/components/Playground_Reference.res

@@ -0,0 +1,16 @@
+open Toolkit__Ui
+
+@module("@root/src/ui/Toolkit__Ui_Reference.resi?raw")
+external resi: string = "default"
+
+@module("@root/playground/components/Playground_Reference.res?raw")
+external codeExample: string = "default"
+
+@react.component
+let make = () =>
+  <div>
+    <Reference reference="07868-9897687-0898" />
+    <div className="w-48 mt-4">
+      <Reference reference="07868-9897687-0898" />
+    </div>
+  </div>

package/playground/components/Playground_RichText.res

@@ -0,0 +1,22 @@
+open Toolkit__Ui
+
+@module("@root/src/ui/Toolkit__Ui_RichText.resi?raw")
+external resi: string = "default"
+
+@module("@root/playground/components/Playground_RichText.res?raw")
+external codeExample: string = "default"
+
+@react.component
+let make = () => {
+  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>
+}

package/playground/components/Playground_Select.res

@@ -0,0 +1,86 @@
+open Toolkit__Ui
+open BsReactSelect
+
+@module("@root/src/ui/Toolkit__Ui_Select.resi?raw")
+external resi: string = "default"
+
+@module("@root/playground/components/Playground_Select.res?raw")
+external codeExample: string = "default"
+
+@react.component
+let make = () => {
+  let options = [
+    {label: "Label", value: "value"},
+    {label: "Label2", value: "value2"},
+    {label: "Label3", value: "value3"},
+  ]
+
+  <div className="flex flex-col gap-6">
+    <div>
+      <Label htmlFor="test" optionalMessage={"Optional"->React.string}>
+        {"Native select"->React.string}
+      </Label>
+      <Select
+        onChange={_ => ()}
+        id="test"
+        placeholder="This is a placeholder"
+        options=[
+          ("label", "value", true),
+          ("label2", "value2", true),
+          ("label disabled", "value3", false),
+        ]
+      />
+    </div>
+    <div>
+      <h2> {"react-select"->React.string} </h2>
+      <Label htmlFor="test" optionalMessage={"Optional"->React.string}>
+        {"default"->React.string}
+      </Label>
+      <ReactSelect
+        name="test"
+        classNamePrefix="react-select"
+        placeholder="Placeholder"
+        onChange={v => Js.log(v)}
+        options
+      />
+    </div>
+    <div>
+      <Label htmlFor="test3" optionalMessage={"Optional"->React.string}>
+        {"Disabled"->React.string}
+      </Label>
+      <ReactSelect
+        name="test3"
+        isDisabled=true
+        classNamePrefix="react-select"
+        placeholder="Placeholder"
+        onChange={v => Js.log(v)}
+        options
+      />
+    </div>
+    <div>
+      <Label htmlFor="test4" optionalMessage={"Optional"->React.string}>
+        {"Errored"->React.string}
+      </Label>
+      <ReactSelect
+        name="test4"
+        classNamePrefix="react-select"
+        className={cx(["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"
+        defaultValue=[]
+        classNamePrefix="react-select"
+        placeholder="Placeholder"
+        onChange={v => Js.log(v)}
+        options
+      />
+    </div>
+  </div>
+}

package/playground/components/Playground_Table.res

@@ -0,0 +1,45 @@
+@module("@root/src/ui/Toolkit__Ui_Table.resi?raw")
+external resi: string = "default"
+
+@module("@root/playground/components/Playground_Table.res?raw")
+external codeExample: string = "default"
+
+type rec data = array<(test, toto)>
+and test = {
+  name: string,
+  age: int,
+}
+and toto = Js.Dict.t<string>
+
+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>
+}

package/playground/components/Playground_Tabs.res

@@ -0,0 +1,53 @@
+open ReachUi
+
+let resi = ""
+
+@module("@root/playground/components/Playground_Tabs.res?raw")
+external codeExample: string = "default"
+
+@react.component
+let make = () => {
+  <div className="flex flex-col gap-6">
+    <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>
+    <div>
+      <h2> {"Big"->React.string} </h2>
+      <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>
+    <div>
+      <h2> {"Render"->React.string} </h2>
+      <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>
+  </div>
+}

package/playground/components/Playground_Tag.res

@@ -0,0 +1,52 @@
+@module("@root/src/ui/Toolkit__Ui_Tag.resi?raw")
+external resi: string = "default"
+
+@module("@root/playground/components/Playground_Tag.res?raw")
+external codeExample: string = "default"
+
+@react.component
+let make = () => {
+  let colors: array<Toolkit__Ui.Tag.color> = [
+    #black,
+    #white,
+    #gray,
+    #primary,
+    #info,
+    #danger,
+    #warning,
+    #success,
+    #neutral,
+  ]
+
+  let size: array<Toolkit__Ui.Tag.size> = [#xs, #sm, #md, #lg]
+  let variants: array<Toolkit__Ui.Tag.variant> = [#plain, #outline]
+
+  <div className="flex flex-col gap-4">
+    {variants
+    ->Array.map(variant => {
+      <div>
+        <h2> {(variant :> string)->React.string} </h2>
+        <div className="flex flex-col gap-2">
+          {colors
+          ->Array.mapWithIndex((i, color) =>
+            <div key={i->Int.toString ++ color->Obj.magic} className="flex items-center gap-4">
+              <strong className="w-32"> {(color :> string)->React.string} </strong>
+              {size
+              ->Array.mapWithIndex(
+                (j, size) =>
+                  <div key={(i + j)->Int.toString ++ size->Obj.magic}>
+                    <Toolkit__Ui_Tag variant color size>
+                      {"content"->React.string}
+                    </Toolkit__Ui_Tag>
+                  </div>,
+              )
+              ->React.array}
+            </div>
+          )
+          ->React.array}
+        </div>
+      </div>
+    })
+    ->React.array}
+  </div>
+}

package/playground/components/Playground_TextInput.res

@@ -0,0 +1,23 @@
+open Toolkit__Ui
+
+let resi = ""
+
+@module("@root/playground/components/Playground_TextInput.res?raw")
+external codeExample: string = "default"
+
+@react.component
+let make = () =>
+  <div className="flex flex-col gap-4">
+    <div>
+      <Label htmlFor="test" optionalMessage={"Optional"->React.string}>
+        {"Label"->React.string}
+      </Label>
+      <TextInput id="test" placeholder="Test" />
+    </div>
+    <div>
+      <Label htmlFor="test" optionalMessage={"Optional"->React.string}>
+        {"Label"->React.string}
+      </Label>
+      <TextInput id="test" placeholder="Test" isInvalid=true />
+    </div>
+  </div>