@colisweb/rescript-toolkit 2.71.0 → 3.0.0

package/bsconfig.json

@@ -1,8 +1,8 @@
 {
   "$schema": "https://raw.githubusercontent.com/rescript-lang/rescript-compiler/master/docs/docson/build-schema.json",
   "name": "@colisweb/rescript-toolkit",
-  "reason": {
-    "react-jsx": 3
+  "jsx": {
+    "version": 4
   },
   "sources": [
     {

package/locale/fr.json

@@ -34,6 +34,11 @@
     "defaultMessage": "Jeudi",
     "message": "Jeudi"
   },
+  {
+    "id": "_471931e7",
+    "defaultMessage": "Le champ est requis.",
+    "message": "Le champ est requis."
+  },
   {
     "id": "_49a79a00",
     "defaultMessage": "Samedi",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colisweb/rescript-toolkit",
-  "version": "2.71.0",
+  "version": "3.0.0",
   "type": "module",
   "scripts": {
     "clean": "rescript clean",
@@ -29,7 +29,7 @@
   "dependencies": {
     "@colisweb/bs-react-intl-extractor-bin": "0.12.2",
     "@colisweb/react-day-picker": "7.4.16",
-    "@colisweb/restorative": "0.5.1",
+    "@colisweb/restorative": "1.0.0",
     "@datadog/browser-rum": "4.26.0",
     "@reach/accordion": "0.18.0",
     "@reach/alert-dialog": "0.18.0",
@@ -44,7 +44,7 @@
     "@reach/tabs": "0.18.0",
     "@reach/tooltip": "0.18.0",
     "@reach/visually-hidden": "0.18.0",
-    "@rescript/react": "0.10.3",
+    "@rescript/react": "0.11.0",
     "@tailwindcss/line-clamp": "0.4.2",
     "autoprefixer": "10.4.13",
     "axios": "0.24.0",
@@ -55,7 +55,6 @@
     "date-fns": "2.29.3",
     "decco": "1.6.0",
     "dedent": "0.7.0",
-    "downshift": "5.2.5",
     "lenses-ppx": "6.1.10",
     "list-selectors": "2.0.1",
     "lodash": "4.17.21",
@@ -76,7 +75,7 @@
     "reason-promise": "1.1.5",
     "res-react-intl": "3.1.2",
     "reschema": "1.3.1",
-    "rescript": "10.0.1",
+    "rescript": "10.1.2",
     "rescript-classnames": "6.0.0",
     "rescript-react-update": "5.0.0",
     "sanitize-html": "1.27.4",

package/playground/PlaygroundApp.res

@@ -60,6 +60,13 @@ let links: array<PlaygroundRouter.navLink> = [
       route: Hooks(List),
     }),
   ),
+  Single(
+    App({
+      label: "Bindings"->React.string,
+      icon: <ReactIcons.VscFolderLibrary size={30} />,
+      route: Bindings(List),
+    }),
+  ),
 ]
 
 @val
@@ -128,6 +135,11 @@ let make = () => {
               | List => <PlaygroundHooks.List />
               | Details(component) => <PlaygroundHooks.Details component />
               }
+            | Bindings(component) =>
+              switch component {
+              | List => <PlaygroundBindings.List />
+              | Details(component) => <PlaygroundBindings.Details component />
+              }
 
             | NotFound => "NotFound"->React.string
             }}

package/playground/PlaygroundBindings.res

@@ -0,0 +1,106 @@
+module type Config = {
+  let resi: string
+  let codeExample: string
+  @react.component
+  let make: unit => React.element
+}
+
+let components: array<(string, module(Config))> = [("ReachUI", module(Playground_Bindings_Reach))]
+
+module List = {
+  module ComponentLink = {
+    @react.component
+    let make = (~name) => {
+      <PlaygroundRouter.Link
+        route={Bindings(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">
+        {"Bindings"->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/PlaygroundHooks.res

@@ -6,10 +6,10 @@ module type Config = {
 }
 
 let components: array<(string, module(Config))> = [
-  ("Clipboard", module(Playground_Clipboard)),
-  ("Disclosure", module(Playground_Disclosure)),
-  ("LazyLoad", module(Playground_LazyLoad)),
-  ("MediaQueries", module(Playground_MediaQueries)),
+  ("Clipboard", module(Playground_Hooks_Clipboard)),
+  ("Disclosure", module(Playground_Hooks_Disclosure)),
+  ("LazyLoad", module(Playground_Hooks_LazyLoad)),
+  ("MediaQueries", module(Playground_Hooks_MediaQueries)),
 ]
 
 module List = {

package/playground/PlaygroundRouter.res

@@ -5,6 +5,9 @@ module RouterConfig = {
   type hookRoutes =
     | List
     | Details(string)
+  type bindingRoutes =
+    | List
+    | Details(string)
   type docRoutes =
     | ApiDecoding
     | Identifiers
@@ -22,6 +25,7 @@ module RouterConfig = {
     | Components(componentRoutes)
     | Hooks(hookRoutes)
     | DesignSystem(designRoutes)
+    | Bindings(bindingRoutes)
     | NotFound
 
   let make = (url: RescriptReactRouter.url) => {
@@ -59,6 +63,12 @@ module RouterConfig = {
       | list{component} => Hooks(Details(component))
       | _ => NotFound
       }
+    | list{"bindings", ...rest} =>
+      switch rest {
+      | list{} => Bindings(List)
+      | list{component} => Bindings(Details(component))
+      | _ => NotFound
+      }
 
     | _ => NotFound
     }
@@ -103,6 +113,14 @@ module RouterConfig = {
     | Hooks(route) => {
         let base = `${baseUrl}hooks`
 
+        switch route {
+        | List => `${base}`
+        | Details(component) => `${base}/${component}`
+        }
+      }
+    | Bindings(route) => {
+        let base = `${baseUrl}bindings`
+
         switch route {
         | List => `${base}`
         | Details(component) => `${base}/${component}`

package/playground/bindings/Playground_Bindings_Reach.res

@@ -0,0 +1,143 @@
+let resi = ""
+
+@module("@root/playground/bindings/Playground_Bindings_Reach.res?raw")
+external codeExample: string = "default"
+
+module Menu = {
+  @react.component
+  let make = () => {
+    let (selected, setSelected) = React.useState(() => None)
+    <div>
+      <ReachUi.Menu>
+        <ReachUi.MenuButton>
+          <span className="border rounded-md bg-white px-2 text-neutral-700">
+            {"open menu"->React.string}
+          </span>
+        </ReachUi.MenuButton>
+        <ReachUi.MenuList
+          portal=true
+          className="focus:outline-none focus:shadow-none bg-white translate-x-[calc(-100%+31px)] shadow-lg rounded border border-gray-400 mt-1 py-1">
+          <ReachUi.MenuItem
+            className="py-1 px-2 flex items-center"
+            onSelect={() => {
+              setSelected(_ => Some("menu 1"))
+            }}>
+            {"Menu1"->React.string}
+          </ReachUi.MenuItem>
+          <ReachUi.MenuItem
+            className="py-1 px-2 flex items-center"
+            onSelect={() => {
+              setSelected(_ => Some("menu 2"))
+            }}>
+            {"Menu2"->React.string}
+          </ReachUi.MenuItem>
+          <ReachUi.MenuItem
+            className="py-1 px-2 flex items-center"
+            onSelect={() => {
+              setSelected(_ => Some("menu 3"))
+            }}>
+            {"Menu3"->React.string}
+          </ReachUi.MenuItem>
+        </ReachUi.MenuList>
+      </ReachUi.Menu>
+      {selected->Option.mapWithDefault(React.null, selected => {
+        <p> {("selected : " ++ selected)->React.string} </p>
+      })}
+    </div>
+  }
+}
+
+module Listbox = {
+  @react.component
+  let make = () => {
+    let (searchValue, setSearchValue) = React.useState(() => "")
+    let elements = [{"label": "element 1", "value": "1"}, {"label": "element 2", "value": "2"}]
+
+    <ReachUi.Listbox
+      onChange={v => Js.log(v)}
+      portal=false
+      className="searchListBox"
+      arrow={<ReactIcons.GrFormDown size=25 />}>
+      <input
+        type_="text"
+        placeholder="search placeholder"
+        value=searchValue
+        autoFocus=true
+        onChange={e => {
+          let value = (e->ReactEvent.Form.target)["value"]
+          setSearchValue(_ => value)
+        }}
+        style={ReactDOMStyle.make(~width=`calc(100% - 16px)`, ())}
+        className={cx(["m-2 bg-neutral-100 rounded-sm p-1 focus:shadow-none"])}
+      />
+      <div className="listBoxOptionsContainer">
+        <ReachUi.ListboxOption value="default" className="hidden">
+          {"default text"->React.string}
+        </ReachUi.ListboxOption>
+        {elements
+        ->Array.mapWithIndex((i, element) =>
+          <React.Fragment key={"searchListBox" ++ (element["value"] ++ i->string_of_int)}>
+            <ReachUi.ListboxOption
+              className={element["label"]
+              ->Js.String.toLowerCase
+              ->Js.String2.includes(searchValue->Js.String.toLowerCase)
+                ? ""
+                : "hidden"}
+              value={element["value"]}>
+              {element["label"]->React.string}
+            </ReachUi.ListboxOption>
+          </React.Fragment>
+        )
+        ->React.array}
+      </div>
+    </ReachUi.Listbox>
+  }
+}
+
+module AlertDialog = {
+  @react.component
+  let make = () => {
+    let leastDestructiveRef = React.useRef(Js.Nullable.null)
+    let disclosure = Toolkit__Hooks.useDisclosure()
+
+    <>
+      <Toolkit__Ui_Button onClick={_ => disclosure.show()}>
+        {"show alert dialog"->React.string}
+      </Toolkit__Ui_Button>
+      <ReachUi.AlertDialog
+        isOpen=disclosure.isOpen onDismiss={_ => disclosure.hide()} leastDestructiveRef>
+        <Toolkit__Ui_Card>
+          <Toolkit__Ui_Card.Header>
+            <ReachUi.AlertDialogLabel> {"label"->React.string} </ReachUi.AlertDialogLabel>
+          </Toolkit__Ui_Card.Header>
+          <Toolkit__Ui_Card.Body>
+            <Toolkit__Ui_Button
+              buttonRef={ReactDOM.Ref.domRef(leastDestructiveRef)}
+              className="mr-4"
+              onClick={_ => disclosure.hide()}>
+              {"close"->React.string}
+            </Toolkit__Ui_Button>
+          </Toolkit__Ui_Card.Body>
+        </Toolkit__Ui_Card>
+      </ReachUi.AlertDialog>
+    </>
+  }
+}
+
+@react.component
+let make = () => {
+  <div className="flex flex-col gap-6">
+    <div>
+      <h2> {"Menu"->React.string} </h2>
+      <Menu />
+    </div>
+    <div>
+      <h2> {"Listbox"->React.string} </h2>
+      <Listbox />
+    </div>
+    <div>
+      <h2> {"AlertDialog"->React.string} </h2>
+      <AlertDialog />
+    </div>
+  </div>
+}

package/playground/components/Playground_Form.res

@@ -6,12 +6,20 @@ let resi = ""
 external codeExample: string = "default"
 
 module ReformTest = {
+  @val
+  external alert: string => unit = "alert"
+
+  type userRole = [
+    | #user
+    | #admin
+  ]
   module FormState = {
     type error = unit
     include %lenses(
       type state = {
         login: string,
         password: string,
+        role: option<userRole>,
       }
     )
   }
@@ -20,7 +28,27 @@ module ReformTest = {
 
   @react.component
   let make = () => {
-    let form = FormApi.Form.use(~initialState={login: "", password: ""}, ())
+    let form = FormApi.Form.use(
+      ~initialState={login: "", password: "", role: None},
+      ~schema=FormApi.Form.Validation.Schema([
+        StringNonEmpty(Login),
+        StringNonEmpty(Password),
+        Custom(
+          Role,
+          ({role}) => {
+            switch role {
+            | None => Error("Please select a role")
+            | Some(_) => Valid
+            }
+          },
+        ),
+      ]),
+      ~onSubmit=form => {
+        alert(form.state.values->Obj.magic->Js.Json.stringifyWithSpace(2))
+        Promise.resolved(Ok())
+      },
+      (),
+    )
 
     <ReactIntl.IntlProvider>
       <FormApi.Form.Provider value=form>
@@ -36,6 +64,31 @@ module ReformTest = {
               type_="password"
             />
           </div>
+          <div>
+            <FormApi.SelectPolyvariant
+              field={FormState.Role}
+              id="kind"
+              placeholder="Select a role"
+              options=[
+                {
+                  label: "User",
+                  value: #user,
+                },
+                {
+                  label: "Admin",
+                  value: #admin,
+                },
+              ]
+              encodeValueToString={(v: userRole) => {(v :> string)}}
+              decodeValueFromString={v =>
+                switch v {
+                | "admin" => Some(#admin)
+                | "user" => Some(#user)
+                | _ => None
+                }}
+            />
+          </div>
+          <Toolkit__Ui_Button type_="submit"> {"Submit"->React.string} </Toolkit__Ui_Button>
         </FormApi.Wrapper>
       </FormApi.Form.Provider>
     </ReactIntl.IntlProvider>
@@ -43,7 +96,7 @@ module ReformTest = {
 }
 
 module DayPickerExample = {
-  open BsReactDayPicker
+  open ReactDayPicker
 
   @react.component
   let make = () => {
@@ -111,7 +164,7 @@ let make = () => {
     </div>
     <div>
       <h2> {"DayPickerInput"->React.string} </h2>
-      <BsReactDayPicker.ReactDayPicker.DayPickerInput showOutsideDays=true firstDayOfWeek=1 />
+      <ReactDayPicker.ReactDayPicker.DayPickerInput showOutsideDays=true firstDayOfWeek=1 />
     </div>
     <div>
       <h2> {"NativeDatePicker"->React.string} </h2>

package/playground/components/Playground_Modal.res

@@ -23,9 +23,12 @@ let make = () => {
         id="size"
         value={Obj.magic(size)}
         onChange={value => {
-          setSize(_ => value)
+          setSize(_ => value->Obj.magic)
         }}
-        options={modalSize->Array.map(value => (value->Obj.magic, value->Obj.magic, true))}
+        options={modalSize->Array.map((value): Toolkit__Ui.Select.selectOption => {
+          label: value->Obj.magic,
+          value: value->Obj.magic,
+        })}
       />
     </div>
     <div>
@@ -35,9 +38,21 @@ let make = () => {
         onChange={value => {
           setModalType(_ => value === "" ? #default : #colored(Obj.magic(value)))
         }}
-        options={[("default", "", true)]->Array.concat(
-          modalColor->Array.map(value => (value->Obj.magic, value->Obj.magic, true)),
-        )}
+        options={
+          open! Toolkit__Ui.Select
+
+          [
+            {
+              label: "default",
+              value: "",
+            },
+          ]->Array.concat(
+            modalColor->Array.map(value => {
+              label: value->Obj.magic,
+              value: value->Obj.magic,
+            }),
+          )
+        }
       />
     </div>
     <Button onClick={_ => setVisibility(_ => true)}> {"Show modal"->React.string} </Button>

package/playground/components/Playground_Select.res

@@ -1,5 +1,5 @@
 open Toolkit__Ui
-open BsReactSelect
+open ReactSelect
 
 @module("@root/src/ui/Toolkit__Ui_Select.resi?raw")
 external resi: string = "default"
@@ -25,9 +25,19 @@ let make = () => {
         id="test"
         placeholder="This is a placeholder"
         options=[
-          ("label", "value", true),
-          ("label2", "value2", true),
-          ("label disabled", "value3", false),
+          {
+            label: "Label1",
+            value: "1",
+          },
+          {
+            label: "Label2",
+            value: "2",
+          },
+          {
+            label: "Label3 disabled",
+            value: "3",
+            disabled: true,
+          },
         ]
       />
     </div>

package/playground/hooks/{Playground_Clipboard.res → Playground_Hooks_Clipboard.res}

@@ -1,6 +1,6 @@
 let resi = ""
 
-@module("@root/playground/hooks/Playground_Clipboard.res?raw")
+@module("@root/playground/hooks/Playground_Hooks_Clipboard.res?raw")
 external codeExample: string = "default"
 
 @react.component

package/playground/hooks/{Playground_Disclosure.res → Playground_Hooks_Disclosure.res}

@@ -1,6 +1,6 @@
 let resi = ""
 
-@module("@root/playground/hooks/Playground_Disclosure.res?raw")
+@module("@root/playground/hooks/Playground_Hooks_Disclosure.res?raw")
 external codeExample: string = "default"
 
 @react.component

package/playground/hooks/{Playground_LazyLoad.res → Playground_Hooks_LazyLoad.res}

@@ -1,6 +1,6 @@
 let resi = ""
 
-@module("@root/playground/hooks/Playground_LazyLoad.res?raw")
+@module("@root/playground/hooks/Playground_Hooks_LazyLoad.res?raw")
 external codeExample: string = "default"
 
 @react.component

package/playground/hooks/{Playground_MediaQueries.res → Playground_Hooks_MediaQueries.res}

@@ -1,6 +1,6 @@
 let resi = ""
 
-@module("@root/playground/hooks/Playground_MediaQueries.res?raw")
+@module("@root/playground/hooks/Playground_Hooks_MediaQueries.res?raw")
 external codeExample: string = "default"
 
 @react.component

package/src/decoders/Toolkit__Decoders.res

@@ -19,7 +19,7 @@ module Date = {
   type date = Js.Date.t
 
   let encoder: Decco.encoder<date> = date =>
-    date->BsDateFns.formatWithPattern("yyyy-MM-dd")->Decco.stringToJson
+    date->DateFns.formatWithPattern("yyyy-MM-dd")->Decco.stringToJson
 
   let decoder: Decco.decoder<date> = json =>
     switch Decco.stringFromJson(json) {