@colisweb/rescript-toolkit 2.67.0 → 2.68.0

package/playground/docs/Setup.mdx

@@ -0,0 +1,51 @@
+# ReScript toolkit
+
+## Setup
+
+Install the package :
+
+```bash
+npm i -S @colisweb/rescript-toolkit
+```
+
+Add the package to the `bsconfig.json` file :
+
+```json
+{
+  "bs-dependencies": ["@colisweb/rescript-toolkit"]
+}
+```
+
+Import the style in your app :
+
+```js
+// App.js
+import "@colisweb/rescript-toolkit/src/ui/styles.css";
+```
+
+### Add Tailwind
+
+This toolkit is based on [tailwindcss](https://tailwindcss.com/).
+We share a postcss config that you can include to your webpack config
+
+## Usage
+
+The bindings in the _vendors_ are **globaly accessible**.
+
+```rescript
+
+@react.component
+let make = () => {
+  let dialog = Toolkit.Hooks.useDisclosure();
+
+  <div className="bg-white" />
+};
+```
+
+### Local development
+
+Run bsb
+
+```bash
+npm run dev
+```

package/playground/docs/Unleash.mdx

@@ -0,0 +1,53 @@
+# Unleash
+
+[Unleash](https://github.com/Unleash/unleash) is feature flipping solution. It allows us to activate or restrain fonctionalities acording a configuration.
+
+## Usage
+
+### 1. Create a rule
+
+We use a functor to enforce several parameters :
+
+| Params      |                     value                      |
+| ----------- | :--------------------------------------------: |
+| parameters  |                  'parameters                   |
+| input       |                     'input                     |
+| output      |                    'output                     |
+| envUrl      |                     string                     |
+| featureName |                     string                     |
+| exec        | ('input, Unleash.config(parameters)) => output |
+
+```rescript
+module OutdatedApplicationConfig = {
+  @decco
+  type parameters = {version: string}
+  type input = unit
+  type output = bool
+  let envUrl = Env.unleashUrl
+  let featureName = "minimum-supported-version"
+
+  let exec = (_, config: Unleash.config<parameters>) => {
+    let appVersion =
+      ReactNativeVersionNumber.appVersion->Js.Nullable.toOption->Option.getWithDefault("")
+
+    config.strategies
+    ->Array.get(0)
+    ->Option.mapWithDefault(false, strategy =>
+      config.enabled ? Semver.lt(appVersion, strategy.parameters.version) : false
+    )
+  }
+}
+
+module OutdatedApplication = Toolkit.Unleash.MakeFeature(OutdatedApplicationConfig)
+```
+
+### 2. Use the rule
+
+```rescript
+OutdatedApplication.exec()
+->Promise.tapOk(outdated => {
+  if (outdated) {
+    Js.log("app outdated");
+  }
+})
+```

package/playground/main.jsx

@@ -3,7 +3,7 @@ import ReactDOM from "react-dom/client";
 import "../src/ui/styles.css";
 import "../src/ui/Toolkit__Ui_DatetimeInput.css";
 import "./custom.css";
-import App from "../lib/es6_global/playground/App.bs";
+import App from "../lib/es6_global/playground/PlaygroundApp.bs";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 

package/src/intl/Toolkit__Intl.res

@@ -31,16 +31,11 @@ let availableLanguagesFromString = v =>
   | _ => #fr
   }
 
-let createIntl = (locale: availableLanguages, messages) => {
+let createIntl = (~onError=?, locale: availableLanguages, messages) => {
   let cache = createIntlCache()
 
   createIntl(
-    intlConfig(
-      ~locale=locale->availableLanguagesToString,
-      ~messages,
-      ~onError=message => Toolkit__BrowserLogger.error2("create intl error", message),
-      (),
-    ),
+    intlConfig(~locale=locale->availableLanguagesToString, ~messages, ~onError?, ()),
     cache,
   )
 }
@@ -48,6 +43,7 @@ let createIntl = (locale: availableLanguages, messages) => {
 module type IntlConfig = {
   let messages: messages
   let defaultLocale: option<availableLanguages>
+  let onError: string => unit
 }
 
 module Make = (Config: IntlConfig) => {
@@ -67,10 +63,10 @@ module Make = (Config: IntlConfig) => {
 
   type action = SetLocale(availableLanguages)
 
-  let store = Restorative.createStore({locale: locale, intl: intl}, (_state, action) =>
+  let store = Restorative.createStore({locale, intl}, (_state, action) =>
     switch action {
     | SetLocale(locale) => {
-        locale: locale,
+        locale,
         intl: {
           let messages = switch locale {
           | #fr => Config.messages.fr->toDict

package/src/intl/Toolkit__Intl.resi

@@ -14,6 +14,7 @@ let availableLanguagesFromString: string => availableLanguages
 module type IntlConfig = {
   let messages: messages
   let defaultLocale: option<availableLanguages>
+  let onError: string => unit
 }
 
 module Make: (Config: IntlConfig) =>

package/src/logger/Toolkit__BrowserLogger.res

@@ -51,22 +51,22 @@ let warning3 = (str, str2, str3) => {
 }
 
 let error = (str: string) => {
-  if nodeEnv !== "production" {
-    Js.Console.log3("%cERROR", errorStyle, str)
-  } else {
-    DatadogRum.Browser.addError(makeError(str))
-  }
+  DatadogRum.Browser.addError(makeError(str))
+  // if nodeEnv !== "production" {
+  //   Js.Console.log3("%cERROR", errorStyle, str)
+  // } else {
+  // }
 }
 
 let error2 = (str, str2) => {
-  if nodeEnv !== "production" {
-    Js.Console.log4("%cERROR", errorStyle, str, str2)
-  } else {
-    DatadogRum.Browser.addErrorWithContext(
-      makeError(str),
-      {
-        "cause": str2,
-      },
-    )
-  }
+  DatadogRum.Browser.addErrorWithContext(
+    makeError(str),
+    {
+      "cause": str2,
+    },
+  )
+  // if nodeEnv !== "production" {
+  //   Js.Console.log4("%cERROR", errorStyle, str, str2)
+  // } else {
+  // }
 }

package/src/router/Toolkit__Router.res

@@ -252,7 +252,7 @@ module Make = (Config: RouterConfig) => {
         <a
           href=url
           target="_blank"
-          className={cx([commonClassName, "sidenav-link", isSubLink ? "ml-3" : ""])}>
+          className={cx([commonClassName, "py-3 sidenav-link", isSubLink ? "ml-3" : ""])}>
           <span className="overflow-hidden flex">
             {config.icon->Option.mapWithDefault(React.null, icon =>
               <div className={cx(["text-neutral-800", isNavOpen ? "pl-2" : "px-2"])}> icon </div>
@@ -280,6 +280,7 @@ module Make = (Config: RouterConfig) => {
           className={cx([
             commonClassName,
             isSubLink ? "ml-3" : "",
+            config.icon->Option.isNone ? "py-5" : "",
             "sidenav-link",
             isActive ? "bg-primary-100/75 text-neutral-700" : "",
           ])}

package/src/tailwind/tailwind.config.cjs

@@ -1,5 +1,3 @@
-const defaultColors = require("tailwindcss/colors");
-
 module.exports = {
   theme: {
     extend: {
@@ -65,9 +63,9 @@ module.exports = {
       screen: "100vh",
     },
     colors: {
-      white: defaultColors.white,
-      black: defaultColors.black,
-      transparent: defaultColors.transparent,
+      white: "#fff",
+      black: "#000",
+      transparent: "transparent",
       routeWithdraw: "#176693",
       gray: {
         100: "#f7fafc",

package/src/ui/Toolkit__Ui_MultiSelect.res

@@ -36,6 +36,18 @@ let make = (
     None
   }, (previousDefaultValue, defaultValue))
 
+  let filterOptionsBySearch = (~options, ~search) => {
+    options->Array.keep(({label}) =>
+      // normalize nfd -> replace by re remove split by commponents the accent letters and deletes the accent component only, leaving the un-accented letter
+      search == "" ||
+        label
+        ->Js.String2.toLowerCase
+        ->Js.String2.normalizeByForm("NFD")
+        ->Js.String2.replaceByRe(%re("/[\u0300-\u036f]/g"), "")
+        ->Js.String2.includes(search)
+    )
+  }
+
   <Toolkit__Ui_Dropdown
     buttonClassName
     dropdownClassName
@@ -64,6 +76,15 @@ let make = (
               id="search"
               autoFocus={true}
               placeholder=?{searchPlaceholder}
+              onKeyDown={event => {
+                if event->ReactEvent.Keyboard.key === "Enter" && search !== "" {
+                  let selectedOptions = filterOptionsBySearch(~options, ~search)
+                  onChange(selectedOptions)
+                  setSelectedOptions(_ => {
+                    selectedOptions
+                  })
+                }
+              }}
               onChange={event => {
                 let target = event->ReactEvent.Form.currentTarget
                 // normalize nfd -> replace by re remove split by commponents the accent letters and deletes the accent component only, leaving the un-accented letter

package/src/ui/styles.css

@@ -139,7 +139,6 @@ select:not([disabled]):not([tabindex="-1"]):focus,
 textarea:not([disabled]):not([tabindex="-1"]):focus,
 button:not([disabled]):not([tabindex="-1"]):focus,
 iframe:not([tabindex="-1"]):focus,
-[tabindex]:not([tabindex="-1"]):focus,
 [contentEditable="true"]:not([tabindex="-1"]):focus,
 .focus {
   outline: none !important;
@@ -164,7 +163,9 @@ iframe:not([tabindex="-1"]):focus,
 }
 
 .input-range
-  .DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end):not(.DayPicker-Day--outside) {
+  .DayPicker-Day--selected:not(.DayPicker-Day--start):not(
+    .DayPicker-Day--end
+  ):not(.DayPicker-Day--outside) {
   background-color: #f0f8ff !important;
   color: #4a90e2;
 }
@@ -221,7 +222,9 @@ iframe:not([tabindex="-1"]):focus,
 }
 
 .Selectable
-  .DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end):not(.DayPicker-Day--outside) {
+  .DayPicker-Day--selected:not(.DayPicker-Day--start):not(
+    .DayPicker-Day--end
+  ):not(.DayPicker-Day--outside) {
   background-color: #f0f8ff !important;
   color: #4a90e2;
 }

package/vite.config.js

@@ -3,14 +3,57 @@ import react from "@vitejs/plugin-react";
 import createReScriptPlugin from "@jihchi/vite-plugin-rescript";
 import mdx from "@mdx-js/rollup";
 import fs from "fs";
+import addClasses from "rehype-add-classes";
+import rehypeHighlight from "rehype-highlight";
+import rescriptHighlight from "./playground/utils/rescript-highlight";
+import rehypeAutolinkHeadings from "rehype-autolink-headings";
+import rehypeSlug from "rehype-slug";
 
 const appDirectory = fs.realpathSync(process.cwd());
+const isProduction = process.env.NODE_ENV === "production";
 
 export default defineConfig({
-  plugins: [mdx(), createReScriptPlugin(), react()],
+  base: isProduction ? "/colisweb-open-source/rescript-toolkit/" : "",
+  build: {
+    sourcemap: true,
+  },
+  plugins: [
+    mdx({
+      rehypePlugins: [
+        [
+          addClasses,
+          {
+            h1: "text-4xl",
+            h2: "text-3xl",
+            h3: "text-2xl",
+            h4: "text-xl",
+            "h1,h2,h3,h4": "font-display font-bold underline mb-1",
+            p: "mb-1",
+            pre: "bg-white p-2 rounded-lg border my-4 block",
+            ul: "list-disc",
+          },
+        ],
+        [rehypeSlug],
+        [rehypeAutolinkHeadings, { behavior: "wrap" }],
+        [
+          rehypeHighlight,
+          {
+            languages: {
+              rescript: rescriptHighlight,
+            },
+          },
+        ],
+      ],
+    }),
+    createReScriptPlugin(),
+    react(),
+  ],
   define: {
     global: {},
   },
+  optimizeDeps: {
+    include: ["highlight.js"],
+  },
   resolve: {
     alias: [
       {

package/playground/Playground_Component.res

@@ -1,33 +0,0 @@
-module type Config = {
-  let resi: string
-  let codeExample: string
-  @react.component
-  let make: unit => React.element
-}
-
-module ComponentDetails = {
-  @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>
-            <CodeBlock> {Config.codeExample->React.string} </CodeBlock>
-          </ReachUi.TabPanel>
-          <ReachUi.TabPanel>
-            <CodeBlock> {Config.resi->React.string} </CodeBlock>
-          </ReachUi.TabPanel>
-        </ReachUi.TabPanels>
-      </ReachUi.Tabs>
-    </div>
-  }
-}

package/playground/Playground_ComponentDetails.res

@@ -1,25 +0,0 @@
-@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>
-      {Playground_ComponentsList.components
-      ->Array.getBy(((name, _)) => {
-        component === name
-      })
-      ->Option.mapWithDefault("unknown"->React.string, ((_, playgroundModule)) => {
-        <Playground_Component.ComponentDetails component={playgroundModule} />
-      })}
-    </div>
-  </div>
-}

package/playground/Playground_ComponentsList.res

@@ -1,43 +0,0 @@
-let components: array<(string, module(Playground_Component.Config))> = [
-  ("card", module(Playground_Card)),
-  ("switch", module(Playground_Switch)),
-]
-
-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 />)
-      ->React.array}
-    </div>
-  </div>
-}

package/playground/stories/Toolkit__UI_AlertStory.res

@@ -1,111 +0,0 @@
-open Storybook
-open Toolkit__Ui
-
-@module("!!raw-loader!../../../src/ui/Toolkit__Ui_Alert.resi")
-external source: 'a = "default"
-
-let default = CSF.make(~title="Components/Alert", ())
-
-let success = () =>
-  <Alert title={"Title"->React.string} description={"Description"->React.string} status=#success />
-
-success->CSF.addMeta(
-  ~name="success",
-  ~parameters={
-    "docs": {
-      "page": () => <>
-        <CodeBlock> source </CodeBlock>
-        <Docs.Source
-          language="rescript"
-          code=j`
-            <Alert
-    title={"Title"->React.string}
-    description={"Description"->React.string}
-    status=#success
-  />;
-          `
-        />
-        <Docs.Story id="components-alert--success" />
-      </>,
-    },
-  },
-  (),
-)
-
-let error = () =>
-  <Alert title={"Title"->React.string} description={"Description"->React.string} status=#error />
-
-error->CSF.addMeta(
-  ~name="error",
-  ~parameters={
-    "docs": {
-      "page": () => <>
-        <CodeBlock> source </CodeBlock>
-        <Docs.Source
-          language="rescript"
-          code=j`
-            <Alert
-    title={"Title"->React.string}
-    description={"Description"->React.string}
-    status=#error
-  />;
-          `
-        />
-        <Docs.Story id="components-alert--error" />
-      </>,
-    },
-  },
-  (),
-)
-
-let warning = () =>
-  <Alert title={"Title"->React.string} description={"Description"->React.string} status=#warning />
-
-warning->CSF.addMeta(
-  ~name="warning",
-  ~parameters={
-    "docs": {
-      "page": () => <>
-        <CodeBlock> source </CodeBlock>
-        <Docs.Source
-          language="rescript"
-          code=j`
-            <Alert
-  title={"Title"->React.string}
-  description={"Description"->React.string}
-  status=#warning
-/>;
-          `
-        />
-        <Docs.Story id="components-alert--warning" />
-      </>,
-    },
-  },
-  (),
-)
-
-let info = () =>
-  <Alert title={"Title"->React.string} description={"Description"->React.string} status=#info />
-
-info->CSF.addMeta(
-  ~name="info",
-  ~parameters={
-    "docs": {
-      "page": () => <>
-        <CodeBlock> source </CodeBlock>
-        <Docs.Source
-          language="rescript"
-          code=j`
-            <Alert
-  title={"Title"->React.string}
-  description={"Description"->React.string}
-  status=#info
-/>;
-          `
-        />
-        <Docs.Story id="components-alert--info" />
-      </>,
-    },
-  },
-  (),
-)

package/playground/stories/Toolkit__UI_LabelStory.res

@@ -1,39 +0,0 @@
-open Storybook
-open Toolkit__Ui
-
-@module("!!raw-loader!../../../src/ui/Toolkit__Ui_Label.resi")
-external source: 'a = "default"
-
-let default = CSF.make(~title="Form/Label", ())
-
-let sample = () =>
-  <div>
-    <Label htmlFor="test"> {"Label"->React.string} </Label>
-    <Label htmlFor="test" optionalMessage={"Optional"->React.string}>
-      {"Label"->React.string}
-    </Label>
-  </div>
-
-sample->CSF.addMeta(
-  ~name="sample",
-  ~parameters={
-    "docs": {
-      "page": () => <>
-        <CodeBlock> source </CodeBlock>
-        <Docs.Source
-          language="rescript"
-          code=j`
-<div>
-  <Label htmlFor="test"> "Label"->React.string </Label>
-  <Label htmlFor="test" optionalMessage={"Optional"->React.string}>
-    "Label"->React.string
-  </Label>
-</div>
-          `
-        />
-        <Docs.Story id="form-label--sample" />
-      </>,
-    },
-  },
-  (),
-)