@colisweb/rescript-toolkit 2.67.0 → 2.68.0

package/.gitlab-ci.yml

@@ -47,7 +47,7 @@ publish rescript-toolkit:
 # -----------------------------------------------
 pages:
   image: node:16-bullseye
-  extends: .rules-only-for-tags
+  extends: .rules-only-for-master
   tags:
     - aws
   stage: deploy
@@ -55,9 +55,10 @@ pages:
     - export NPM_TOKEN=${NPM_TOKEN:-undefined}
     - yarn
     - yarn build
+    - cp -a dist/. public/
   artifacts:
     paths:
-      - dist
+      - public
   cache:
     key: "yarn-$CI_COMMIT_REF_SLUG"
     paths:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colisweb/rescript-toolkit",
-  "version": "2.67.0",
+  "version": "2.68.0",
   "type": "module",
   "scripts": {
     "clean": "rescript clean",
@@ -59,8 +59,7 @@
     "lenses-ppx": "6.1.10",
     "list-selectors": "2.0.1",
     "lodash": "4.17.21",
-    "postcss": "8.4.19",
-    "postcss-loader": "4.2.0",
+    "postcss": "8.4.21",
     "postcss-preset-env": "7.8.3",
     "prismjs": "1.29.0",
     "react": "18.2.0",
@@ -95,12 +94,16 @@
     "@vitejs/plugin-react": "^3.0.0",
     "babel-loader": "8.2.5",
     "highlight.js": "11.7.0",
-    "husky": "8.0.2",
+    "husky": "8.0.3",
     "is-ci": "3.0.1",
     "raw-loader": "4.0.2",
     "react-is": "18.2.0",
+    "rehype-add-classes": "^1.0.0",
+    "rehype-autolink-headings": "^6.1.1",
+    "rehype-highlight": "^6.0.0",
+    "rehype-slug": "^5.1.0",
     "sass": "1.56.1",
-    "vite": "^4.0.0"
+    "vite": "4.0.4"
   },
   "packageManager": "yarn@3.3.1"
 }

package/playground/{App.res → PlaygroundApp.res}

@@ -72,18 +72,25 @@ let make = () => {
           <PlaygroundRouter.Breadcrumb />
           <div className="p-4">
             {switch currentRoute {
-            | Home => <Doc.Setup />
+            | Home => <Playground_Docs.Setup />
             | Docs(doc) =>
               switch doc {
-              | Identifiers => <Doc.Identifiers />
-              | ApiDecoding => <Doc.ApiDecoding />
-              | Form => <Doc.Form />
-              | Requests => <Doc.Requests />
+              | Identifiers => <Playground_Docs.Identifiers />
+              | ApiDecoding => <Playground_Docs.ApiDecoding />
+              | 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 />
+            //   }
+
             | Components(component) =>
               switch component {
-              | List => <Playground_ComponentsList />
-              | Details(component) => <Playground_ComponentDetails component />
+              | List => <PlaygroundComponents.List />
+              | Details(component) => <PlaygroundComponents.Details component />
               }
 
             | NotFound => "NotFound"->React.string

package/playground/PlaygroundComponents.res

@@ -0,0 +1,114 @@
+module type Config = {
+  let resi: string
+  let codeExample: string
+  @react.component
+  let make: unit => React.element
+}
+
+let components: array<(string, module(Config))> = [
+  ("card", module(Playground_Card)),
+  ("switch", module(Playground_Switch)),
+  ("button", module(Playground_Button)),
+  ("label", module(Playground_Label)),
+  ("alert", module(Playground_Alert)),
+  ("modal", module(Playground_Modal)),
+  ("multiselect", module(Playground_MultiSelect)),
+]
+
+module List = {
+  module ComponentLink = {
+    @react.component
+    let make = (~name) => {
+      <PlaygroundRouter.Link
+        route={Components(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">
+        {"Components"->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: Components(List),
+        text: "Components"->React.string,
+      },
+      {
+        route: Components(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 === name
+        })
+        ->Option.mapWithDefault("unknown"->React.string, ((_, playgroundModule)) => {
+          <Component component={playgroundModule} />
+        })}
+      </div>
+    </div>
+  }
+}

package/playground/PlaygroundLocales.res

@@ -6,4 +6,5 @@ include Toolkit.Intl.Make({
     fr: Array.concatMany([toolkitLocalesFr]),
   }
   let defaultLocale = None
+  let onError = msg => Js.log(msg)
 })

package/playground/PlaygroundRouter.res

@@ -8,10 +8,16 @@ module RouterConfig = {
     | Requests
     | Form
 
+  type designRoutes =
+    | Fonts
+    | Colors
+    | MediaQueries
+
   type t =
     | Home
     | Docs(docRoutes)
     | Components(componentRoutes)
+    | DesignSystem(designRoutes)
     | NotFound
 
   let make = (url: RescriptReactRouter.url) => {
@@ -25,6 +31,13 @@ module RouterConfig = {
       | list{"requests"} => Docs(Requests)
       | _ => NotFound
       }
+    | list{"design", ...rest} =>
+      switch rest {
+      | list{"fonts"} => DesignSystem(Fonts)
+      | list{"colors"} => DesignSystem(Colors)
+      | list{"mediaQueries"} => DesignSystem(MediaQueries)
+      | _ => NotFound
+      }
     | list{"components", ...rest} =>
       switch rest {
       | list{} => Components(List)
@@ -50,6 +63,16 @@ module RouterConfig = {
         }
       }
 
+    | DesignSystem(designRoute) => {
+        let base = "/design"
+
+        switch designRoute {
+        | Fonts => `${base}/fonts`
+        | Colors => `${base}/colors`
+        | MediaQueries => `${base}/mediaQueries`
+        }
+      }
+
     | Components(route) => {
         let base = "/components"
 

package/playground/{CodeBlock.res → Playground_CodeBlock.res}

@@ -3,34 +3,30 @@ module HighlightJs = {
   external registerLanguage: (string, 'a) => unit = "registerLanguage"
   @module("highlight.js") @scope("default")
   external highlightAll: unit => unit = "highlightAll"
+
+  type result = {value: string}
+  @module("highlight.js") @scope("default")
+  external highlight: (string, 'a) => result = "highlight"
 }
 
 @module("../../../playground/utils/rescript-highlight")
 external rescriptModule: 'a = "default"
-@module("highlight.js/lib/languages/bash")
-external bashModule: 'a = "default"
-@module("highlight.js/lib/languages/javascript")
-external javascriptModule: 'a = "default"
 
 HighlightJs.registerLanguage("rescript", rescriptModule)
-HighlightJs.registerLanguage("bash", bashModule)
-HighlightJs.registerLanguage("js", javascriptModule)
 
 @react.component
-let make = (~children, ~className="") => {
-  React.useEffect0(() => {
-    HighlightJs.highlightAll()
-
-    None
-  })
-
+let make = (~code) => {
   <div className="Code border rounded-lg mb-6 relative">
     <pre className="p-4">
-      <code className={className}> {children} </code>
+      <code
+        dangerouslySetInnerHTML={
+          "__html": HighlightJs.highlight(code, {"language": "rescript"}).value,
+        }
+      />
     </pre>
     <button
-      className="absolute right-0 bottom-0 bg-white rounded-tl rounded-br text-sm px-2 border-t border-l hover:bg-neutral-200"
-      onClick={_ => Browser.Navigator.Clipboard.writeText(Obj.magic(children))}>
+      className="absolute right-0 top-0 bg-white rounded-tl rounded-br text-sm px-2 border-b border-l hover:bg-neutral-200"
+      onClick={_ => Browser.Navigator.Clipboard.writeText(Obj.magic(code))}>
       {"Copy"->React.string}
     </button>
   </div>

package/playground/components/Playground_Alert.res

@@ -0,0 +1,25 @@
+open Toolkit__Ui
+
+@module("@root/src/ui/Toolkit__Ui_Alert.resi?raw")
+external resi: string = "default"
+
+@module("@root/playground/components/Playground_Alert.res?raw")
+external codeExample: string = "default"
+
+@react.component
+let make = () => {
+  let variants: array<Alert.status> = [#success, #error, #info, #warning]
+
+  <div className="flex flex-col gap-8">
+    {variants
+    ->Array.map(variant => {
+      <div key={(variant :> string)}>
+        <h3> {(variant :> string)->React.string} </h3>
+        <Alert
+          title={"Title"->React.string} description={"Description"->React.string} status=variant
+        />
+      </div>
+    })
+    ->React.array}
+  </div>
+}

package/playground/components/Playground_Button.res

@@ -0,0 +1,75 @@
+@module("@root/src/ui/Toolkit__Ui_Button.resi?raw")
+external resi: string = "default"
+
+@module("@root/playground/components/Playground_Button.res?raw")
+external codeExample: string = "default"
+
+@react.component
+let make = () => {
+  let colors: array<Toolkit__Ui_Button.color> = [
+    #primary,
+    #black,
+    #white,
+    #gray,
+    #success,
+    #info,
+    #danger,
+    #warning,
+    #neutral,
+    #neutralLight,
+  ]
+
+  let sizes = Js.Dict.fromArray([("xs", #xs), ("sm", #sm), ("md", #md), ("lg", #lg)])
+  let variants = Js.Dict.fromArray([
+    ("default", #default),
+    ("text", #text),
+    ("link", #link),
+    ("outline", #outline),
+    ("pill", #pill),
+  ])
+
+  <div>
+    {colors
+    ->Array.mapWithIndex((i, color) =>
+      <div
+        key={i->Int.toString ++ (color :> string)}
+        className="flex flex-col gap-4 first:border-0 border-t pt-4 first:pt-0 border-neutral-500">
+        <h2> {(color :> string)->React.string} </h2>
+        <div className="flex flex-row flex-wrap gap-8">
+          {variants
+          ->Js.Dict.entries
+          ->Array.map(((variantText, variant)) => {
+            <div>
+              <h4> {variantText->React.string} </h4>
+              <div className="flex flex-col">
+                {[false, true]
+                ->Array.mapWithIndex(
+                  (j, disabled) =>
+                    <div className="flex items-center gap-1 mb-2">
+                      {sizes
+                      ->Js.Dict.entries
+                      ->Array.mapWithIndex(
+                        (k, (sizeText, size)) =>
+                          <div
+                            key={(i + j + k)->Int.toString ++ ((color :> string) ++ sizeText)}
+                            className="flex flex-col justify-center items-center">
+                            <Toolkit__Ui_Button variant color size disabled>
+                              {"hello"->React.string}
+                            </Toolkit__Ui_Button>
+                            <span className="text-xxs"> {sizeText->React.string} </span>
+                          </div>,
+                      )
+                      ->React.array}
+                    </div>,
+                )
+                ->React.array}
+              </div>
+            </div>
+          })
+          ->React.array}
+        </div>
+      </div>
+    )
+    ->React.array}
+  </div>
+}

package/playground/components/Playground_Label.res

@@ -0,0 +1,16 @@
+open Toolkit__Ui
+
+@module("@root/src/ui/Toolkit__Ui_Label.resi?raw")
+external resi: string = "default"
+
+@module("@root/playground/components/Playground_Label.res?raw")
+external codeExample: string = "default"
+
+@react.component
+let make = () =>
+  <div>
+    <Label htmlFor="test"> {"Label"->React.string} </Label>
+    <Label htmlFor="test" optionalMessage={"Optional"->React.string}>
+      {"Label"->React.string}
+    </Label>
+  </div>

package/playground/components/Playground_Modal.res

@@ -0,0 +1,53 @@
+open Toolkit__Ui
+
+@module("@root/src/ui/Toolkit__Ui_Modal.resi?raw")
+external resi: string = "default"
+
+@module("@root/playground/components/Playground_Modal.res?raw")
+external codeExample: string = "default"
+
+@react.component
+let make = () => {
+  let modalSize: array<Modal.size> = [#lg, #md, #sm, #xs]
+
+  let modalColor: array<Modal.color> = [#primary, #success, #danger, #neutral]
+
+  let (isVisible, setVisibility) = React.useState(() => false)
+  let (size, setSize) = React.useState(() => #md)
+  let (modalType, setModalType) = React.useState(() => #default)
+
+  <div className="flex flex-col gap-4 items-start">
+    <div>
+      <Toolkit__Ui_Label htmlFor="size"> {"Size :"->React.string} </Toolkit__Ui_Label>
+      <Toolkit__Ui.Select
+        id="size"
+        value={Obj.magic(size)}
+        onChange={value => {
+          setSize(_ => value)
+        }}
+        options={modalSize->Array.map(value => (value->Obj.magic, value->Obj.magic, true))}
+      />
+    </div>
+    <div>
+      <Toolkit__Ui_Label htmlFor="color"> {"Color :"->React.string} </Toolkit__Ui_Label>
+      <Toolkit__Ui.Select
+        id="size"
+        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)),
+        )}
+      />
+    </div>
+    <Button onClick={_ => setVisibility(_ => true)}> {"Show modal"->React.string} </Button>
+    <Modal
+      isVisible
+      title={"title"->React.string}
+      body={"Body"->React.string}
+      hide={() => setVisibility(_ => false)}
+      size
+      type_=modalType
+    />
+  </div>
+}

package/playground/components/Playground_MultiSelect.res

@@ -0,0 +1,91 @@
+@module("@root/src/ui/Toolkit__Ui_MultiSelect.resi?raw")
+external resi: string = "default"
+
+@module("@root/playground/components/Playground_MultiSelect.res?raw")
+external codeExample: string = "default"
+
+@react.component
+let make = () => {
+  let options1: array<Toolkit__Ui_MultiSelect.item> = [
+    {
+      itemLabel: <p className="flex flex-row text-danger-500">
+        <BsReactIcons.FaAngleDown />
+        {"test"->React.string}
+      </p>,
+      label: "Test",
+      value: "test",
+    },
+    {
+      itemLabel: <p> {"test2"->React.string} </p>,
+      label: "Test2",
+      value: "test2",
+    },
+    {
+      itemLabel: <p> {"test3"->React.string} </p>,
+      label: "Test3",
+      value: "test3",
+    },
+    {
+      itemLabel: <p> {"test4"->React.string} </p>,
+      label: "Test4",
+      value: "test4",
+    },
+  ]
+  let options2: array<Toolkit__Ui_MultiSelect.item> = [
+    {
+      itemLabel: <p> {"test4"->React.string} </p>,
+      label: "Test4",
+      value: "test4",
+    },
+  ]
+
+  let tmp = Toolkit__Hooks.useDisclosure()
+
+  let options = tmp.isOpen ? options2 : options1
+
+  <div className="flex flex-col gap-8 items-start">
+    <Toolkit__Ui_Button onClick={_ => tmp.toggle()}>
+      {"Change options"->React.string}
+    </Toolkit__Ui_Button>
+    <Toolkit__Ui_MultiSelect
+      searchPlaceholder="Filter"
+      buttonClassName={"w-48"}
+      dropdownClassName="w-60"
+      placeholder={<span> {"Select me"->React.string} </span>}
+      onChange={Js.log}
+      options
+    />
+    <div>
+      <h3 className="mb-2"> {"Preselected options"->React.string} </h3>
+      <Toolkit__Ui_MultiSelect
+        searchPlaceholder="Filter"
+        buttonClassName={"w-48"}
+        dropdownClassName="w-60"
+        defaultValue={options}
+        placeholder={<span> {"Select me"->React.string} </span>}
+        onChange={Js.log}
+        options
+      />
+    </div>
+    <div>
+      <h3 className="mb-2"> {"Search"->React.string} </h3>
+      <p className="mb-1">
+        {"Search input is displayed when there are more than 5 options"->React.string}
+      </p>
+      <Toolkit__Ui_MultiSelect
+        searchPlaceholder="Filter"
+        buttonClassName={"w-48"}
+        dropdownClassName="w-60 max-h-[300px] overflow-auto"
+        options={Array.makeBy(10, (i): Toolkit__Ui.MultiSelect.item => {
+          {
+            itemLabel: <p> {`label ${i->Int.toString}`->React.string} </p>,
+            label: `label ${i->Int.toString}`,
+            value: `label ${i->Int.toString}`,
+          }
+        })}
+        placeholder={<span> {"Select me"->React.string} </span>}
+        onChange={Js.log}
+      />
+    </div>
+  </div>
+}

package/playground/components/Playground_Switch.res

@@ -1,9 +1,9 @@
 open Toolkit__Ui
 
-@module("../../../../src/ui/Toolkit__Ui_Switch.resi?raw")
+@module("@root/src/ui/Toolkit__Ui_Switch.resi?raw")
 external resi: string = "default"
 
-@module("../../../../playground/components/Playground_Switch.res?raw")
+@module("@root/playground/components/Playground_Switch.res?raw")
 external codeExample: string = "default"
 
 @react.component