@colisweb/rescript-toolkit 2.70.0 → 2.71.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colisweb/rescript-toolkit",
-  "version": "2.70.0",
+  "version": "2.71.0",
   "type": "module",
   "scripts": {
     "clean": "rescript clean",
@@ -60,7 +60,7 @@
     "list-selectors": "2.0.1",
     "lodash": "4.17.21",
     "postcss": "8.4.21",
-    "postcss-preset-env": "7.8.3",
+    "postcss-preset-env": "8.0.1",
     "prismjs": "1.29.0",
     "react": "18.2.0",
     "react-big-calendar": "1.5.2",
@@ -90,6 +90,7 @@
     "@mdx-js/mdx": "2.2.1",
     "@mdx-js/react": "2.2.1",
     "@mdx-js/rollup": "2.2.1",
+    "@originjs/vite-plugin-commonjs": "^1.0.3",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
     "@vitejs/plugin-react": "^3.0.0",

package/playground/PlaygroundApp.res

@@ -2,13 +2,13 @@ let links: array<PlaygroundRouter.navLink> = [
   Single(
     App({
       route: Home,
-      icon: <BsReactIcons.MdHome size={30} />,
+      icon: <ReactIcons.MdHome size={30} />,
       label: "Home"->React.string,
     }),
   ),
   Grouped(
     {
-      icon: <BsReactIcons.FaBook size={30} />,
+      icon: <ReactIcons.FaBook size={30} />,
       label: "Docs"->React.string,
     },
     [
@@ -26,15 +26,45 @@ let links: array<PlaygroundRouter.navLink> = [
       }),
     ],
   ),
+  Grouped(
+    {
+      icon: <ReactIcons.BsPalette size={30} />,
+      label: "Design"->React.string,
+    },
+    [
+      App({
+        label: "Fonts"->React.string,
+        route: DesignSystem(Fonts),
+      }),
+      App({
+        label: "Colors"->React.string,
+        route: DesignSystem(Colors),
+      }),
+      App({
+        label: "MediaQueries"->React.string,
+        route: DesignSystem(MediaQueries),
+      }),
+    ],
+  ),
   Single(
     App({
       label: "Components"->React.string,
-      icon: <BsReactIcons.SiDatabricks size={30} />,
+      icon: <ReactIcons.SiDatabricks size={30} />,
       route: Components(List),
     }),
   ),
+  Single(
+    App({
+      label: "Hooks"->React.string,
+      icon: <ReactIcons.GiHook size={30} />,
+      route: Hooks(List),
+    }),
+  ),
 ]
 
+@val
+external baseUrl: string = "import.meta.env.BASE_URL"
+
 @react.component
 let make = () => {
   <PlaygroundLocales.Provider>
@@ -44,6 +74,7 @@ let make = () => {
           onLogoClick={() => {
             PlaygroundRouter.redirect(Home)
           }}
+          logoSrc={`${baseUrl}assets/logo.svg`}
           sideNavRender={(
             {
               onLinkClick,
@@ -80,18 +111,23 @@ let make = () => {
               | Form => <Playground_Docs.Form />
               | Requests => <Playground_Docs.Requests />
               }
-            | DesignSystem(_route) => React.null
-            // switch route {
-            //   | Fonts => <Playground_DesignSystem.Fonts />
-            //   | Colors => <Playground_DesignSystem.Colors />
-            //   | MediaQueries => <Playground_DesignSystem.MediaQueries />
-            //   }
+            | DesignSystem(route) =>
+              switch route {
+              | Fonts => <Playground_DesignSystem.Fonts />
+              | Colors => <Playground_DesignSystem.Colors />
+              | MediaQueries => <Playground_DesignSystem.MediaQueries />
+              }
 
             | Components(component) =>
               switch component {
               | List => <PlaygroundComponents.List />
               | Details(component) => <PlaygroundComponents.Details component />
               }
+            | Hooks(component) =>
+              switch component {
+              | List => <PlaygroundHooks.List />
+              | Details(component) => <PlaygroundHooks.Details component />
+              }
 
             | NotFound => "NotFound"->React.string
             }}

package/playground/PlaygroundComponents.res

@@ -18,6 +18,23 @@ let components: array<(string, module(Config))> = [
   ("spinner", module(Playground_Spinner)),
   ("notice", module(Playground_Notice)),
   ("snackbar", module(Playground_Snackbar)),
+  ("dropdown", module(Playground_Dropdown)),
+  ("portalDropdown", module(Playground_PortalDropdown)),
+  ("tabs", module(Playground_Tabs)),
+  ("reference", module(Playground_Reference)),
+  ("select", module(Playground_Select)),
+  ("checkbox", module(Playground_Checkbox)),
+  ("tag", module(Playground_Tag)),
+  ("radio", module(Playground_Radio)),
+  ("richText", module(Playground_RichText)),
+  ("table", module(Playground_Table)),
+  ("ProgressBar", module(Playground_ProgressBar)),
+  ("Tooltip", module(Playground_Tooltip)),
+  ("DropdownList", module(Playground_DropdownList)),
+  ("TextInput", module(Playground_TextInput)),
+  ("Form", module(Playground_Form)),
+  ("Combobox", module(Playground_Combobox)),
+  ("IconButton", module(Playground_IconButton)),
 ]
 
 module List = {
@@ -53,6 +70,7 @@ module List = {
       </h1>
       <div className="flex flex-row flex-wrap gap-4">
         {components
+        ->Lodash.sortBy(((name, _)) => name->Js.String2.toLowerCase)
         ->Array.keep(((name, _)) => name->Js.String2.toLowerCase->Js.String2.includes(search))
         ->Array.map(((name, _)) => <ComponentLink name key={name} />)
         ->React.array}

package/playground/PlaygroundHooks.res

@@ -0,0 +1,111 @@
+module type Config = {
+  let resi: string
+  let codeExample: string
+  @react.component
+  let make: unit => React.element
+}
+
+let components: array<(string, module(Config))> = [
+  ("Clipboard", module(Playground_Clipboard)),
+  ("Disclosure", module(Playground_Disclosure)),
+  ("LazyLoad", module(Playground_LazyLoad)),
+  ("MediaQueries", module(Playground_MediaQueries)),
+]
+
+module List = {
+  module ComponentLink = {
+    @react.component
+    let make = (~name) => {
+      <PlaygroundRouter.Link
+        route={Hooks(Details(name))}
+        className="p-4 rounded-lg border bg-white hover:border-primary-700 w-64">
+        <strong className="capitalize"> {name->React.string} </strong>
+      </PlaygroundRouter.Link>
+    }
+  }
+
+  @react.component
+  let make = () => {
+    let (search, setSearch) = React.useState(() => "")
+
+    <div>
+      <h1 className="text-4xl font-bold font-display mb-4 flex flex-row gap-4 items-center">
+        {"Hooks"->React.string}
+        <input
+          type_="search"
+          placeholder="Search"
+          value={search}
+          onChange={event => {
+            let target = event->ReactEvent.Form.target
+
+            setSearch(_ => target["value"])
+          }}
+          className="bg-white text-sm font-sans px-4 font-normal  rounded-md border border-neutral-300 focus:border-primary-700 h-10 w-60"
+        />
+      </h1>
+      <div className="flex flex-row flex-wrap gap-4">
+        {components
+        ->Array.keep(((name, _)) => name->Js.String2.toLowerCase->Js.String2.includes(search))
+        ->Array.map(((name, _)) => <ComponentLink name key={name} />)
+        ->React.array}
+      </div>
+    </div>
+  }
+}
+
+module Details = {
+  module Component = {
+    @react.component
+    let make = (~component: module(Config)) => {
+      let module(Config) = component
+      <div>
+        <ReachUi.Tabs>
+          <ReachUi.TabList className="mb-4">
+            <ReachUi.Tab> {"Example"->React.string} </ReachUi.Tab>
+            <ReachUi.Tab> {"Code example"->React.string} </ReachUi.Tab>
+            <ReachUi.Tab> {"API"->React.string} </ReachUi.Tab>
+          </ReachUi.TabList>
+          <ReachUi.TabPanels>
+            <ReachUi.TabPanel>
+              <Config />
+            </ReachUi.TabPanel>
+            <ReachUi.TabPanel>
+              <Playground_CodeBlock code={Config.codeExample} />
+            </ReachUi.TabPanel>
+            <ReachUi.TabPanel>
+              <Playground_CodeBlock code={Config.resi} />
+            </ReachUi.TabPanel>
+          </ReachUi.TabPanels>
+        </ReachUi.Tabs>
+      </div>
+    }
+  }
+
+  @react.component
+  let make = (~component: string) => {
+    PlaygroundRouter.Breadcrumb.use([
+      {
+        route: Hooks(List),
+        text: "Hooks"->React.string,
+      },
+      {
+        route: Hooks(Details(component)),
+        text: <span className="capitalize"> {`${component}`->React.string} </span>,
+      },
+    ])
+    <div>
+      <h1 className="text-4xl font-bold font-display mb-4 capitalize">
+        {component->React.string}
+      </h1>
+      <div>
+        {components
+        ->Array.getBy(((name, _)) => {
+          component->Js.String2.toLowerCase === name->Js.String2.toLowerCase
+        })
+        ->Option.mapWithDefault("unknown"->React.string, ((_, playgroundModule)) => {
+          <Component component={playgroundModule} />
+        })}
+      </div>
+    </div>
+  }
+}

package/playground/PlaygroundRouter.res

@@ -2,6 +2,9 @@ module RouterConfig = {
   type componentRoutes =
     | List
     | Details(string)
+  type hookRoutes =
+    | List
+    | Details(string)
   type docRoutes =
     | ApiDecoding
     | Identifiers
@@ -17,6 +20,7 @@ module RouterConfig = {
     | Home
     | Docs(docRoutes)
     | Components(componentRoutes)
+    | Hooks(hookRoutes)
     | DesignSystem(designRoutes)
     | NotFound
 
@@ -49,6 +53,12 @@ module RouterConfig = {
       | list{component} => Components(Details(component))
       | _ => NotFound
       }
+    | list{"hooks", ...rest} =>
+      switch rest {
+      | list{} => Hooks(List)
+      | list{component} => Hooks(Details(component))
+      | _ => NotFound
+      }
 
     | _ => NotFound
     }
@@ -90,6 +100,15 @@ module RouterConfig = {
         }
       }
 
+    | Hooks(route) => {
+        let base = `${baseUrl}hooks`
+
+        switch route {
+        | List => `${base}`
+        | Details(component) => `${base}/${component}`
+        }
+      }
+
     | NotFound => `${baseUrl}404`
     }
 }

package/playground/components/Playground_Accordion.res

@@ -13,7 +13,7 @@ let make = () =>
         {"title"->React.string}
         <AccordionButton>
           <span className="cw-accordion-icon">
-            <BsReactIcons.MdKeyboardArrowRight />
+            <ReactIcons.MdKeyboardArrowRight />
           </span>
         </AccordionButton>
         <AccordionPanel> {"content"->React.string} </AccordionPanel>
@@ -22,7 +22,7 @@ let make = () =>
         <AccordionButton className="flex items-center">
           {"title"->React.string}
           <span className="cw-accordion-icon">
-            <BsReactIcons.MdKeyboardArrowRight />
+            <ReactIcons.MdKeyboardArrowRight />
           </span>
         </AccordionButton>
         <AccordionPanel> {"content"->React.string} </AccordionPanel>

package/playground/components/Playground_Button.res

@@ -63,6 +63,22 @@ let make = () => {
                     </div>,
                 )
                 ->React.array}
+                <div className="flex items-center gap-1 mb-2">
+                  {sizes
+                  ->Js.Dict.entries
+                  ->Array.mapWithIndex(
+                    (k, (sizeText, size)) =>
+                      <div
+                        key={(i + k)->Int.toString ++ "icon" ++ ((color :> string) ++ sizeText)}
+                        className="flex flex-col justify-center items-center">
+                        <Toolkit__Ui_Button leftIcon=module(ReactIcons.FaCheck) variant color size>
+                          {"hello"->React.string}
+                        </Toolkit__Ui_Button>
+                        <span className="text-xxs"> {sizeText->React.string} </span>
+                      </div>,
+                  )
+                  ->React.array}
+                </div>
               </div>
             </div>
           })

package/playground/components/Playground_Checkbox.res

@@ -0,0 +1,60 @@
+
+open Toolkit__Ui
+
+@module("@root/src/ui/Toolkit__Ui_Checkbox.resi?raw")
+external resi: string = "default"
+
+@module("@root/playground/components/Playground_Checkbox.res?raw")
+external codeExample: string = "default"
+
+@react.component
+let make = () => {
+  let (checked, setChecked) = React.useState(() => true)
+
+  <div className="flex flex-col gap-4">
+    <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>
+    <Checkbox
+      name="test2"
+      value="test"
+      inverseLabel={true}
+      checkedClassname="border border-success-500"
+      hideLabel={true}>
+      {"children"->React.string}
+    </Checkbox>
+    <div className="w-64">
+      <h2> {"controlled"->React.string} </h2>
+      <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>
+      <h2> {"Checked"->React.string} </h2>
+      <Checkbox checked=true name="test" value="test"> {"children"->React.string} </Checkbox>
+    </div>
+    <div>
+      <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>
+    </div>
+  </div>
+}

package/playground/components/Playground_Combobox.res

@@ -0,0 +1,38 @@
+open ReachUi.Combobox
+
+let resi = ""
+
+@module("@root/playground/components/Playground_Combobox.res?raw")
+external codeExample: string = "default"
+
+@react.component
+let make = () =>
+  <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>