@colisweb/rescript-toolkit 2.43.0 → 2.46.0

package/bsconfig.json

@@ -23,8 +23,6 @@
   "suffix": ".bs.js",
   "namespace": false,
   "bs-dependencies": [
-    "bs-css",
-    "bs-css-emotion",
     "@rescript/react",
     "reason-promise",
     "decco",

package/locale/fr.json

@@ -0,0 +1,102 @@
+[
+  {
+    "id": "_05a04636",
+    "defaultMessage": "Bin packing",
+    "message": "Bin packing"
+  },
+  {
+    "id": "_09d99cb1",
+    "defaultMessage": "Mardi",
+    "message": "Mardi"
+  },
+  {
+    "id": "_1484eaf0",
+    "defaultMessage": "Format requis : 14 chiffres",
+    "message": "Format requis : 14 chiffres"
+  },
+  {
+    "id": "_24a9ec30",
+    "defaultMessage": "Format requis : 4 caractères ou nombres (exemples : 'A1b2' 'abcd')",
+    "message": "Format requis : 4 caractères ou nombres (exemples : 'A1b2' 'abcd')"
+  },
+  {
+    "id": "_29102a96",
+    "defaultMessage": "Volume total",
+    "message": "Volume total"
+  },
+  {
+    "id": "_337be526",
+    "defaultMessage": "Jeudi",
+    "message": "Jeudi"
+  },
+  {
+    "id": "_49a79a00",
+    "defaultMessage": "Samedi",
+    "message": "Samedi"
+  },
+  {
+    "id": "_5689ac4d",
+    "defaultMessage": "Masquer le mot de passe",
+    "message": "Masquer le mot de passe"
+  },
+  {
+    "id": "_8f8eb0df",
+    "defaultMessage": "Vendredi",
+    "message": "Vendredi"
+  },
+  {
+    "id": "_90cfad83",
+    "defaultMessage": "Mercredi",
+    "message": "Mercredi"
+  },
+  {
+    "id": "_9fc912ee",
+    "defaultMessage": "Lundi",
+    "message": "Lundi"
+  },
+  {
+    "id": "_aaa4996e",
+    "defaultMessage": "Dimanche",
+    "message": "Dimanche"
+  },
+  {
+    "id": "_c05fffa7",
+    "defaultMessage": "Afficher le mot de passe",
+    "message": "Afficher le mot de passe"
+  },
+  {
+    "id": "_c98895d1",
+    "defaultMessage": "Doit etre un entier positif",
+    "message": "Doit etre un entier positif"
+  },
+  {
+    "id": "_d2c9771a",
+    "defaultMessage": "Mauvais format (req: {exemple})",
+    "message": "Mauvais format (req: {exemple})"
+  },
+  {
+    "id": "_d56f025d",
+    "defaultMessage": "Champs requis",
+    "message": "Champs requis"
+  },
+  {
+    "id": "_d7f4a16b",
+    "defaultMessage": "Ce nom est deja utilisé dans un autre forfait",
+    "message": "Ce nom est deja utilisé dans un autre forfait"
+  },
+  {
+    "id": "_dd093040",
+    "defaultMessage": "Doit être un entier positif ou un nombre a virgule",
+    "message": "Doit être un entier positif ou un nombre a virgule"
+  },
+  {
+    "id": "_e6b5a42a",
+    "defaultMessage": "Nbr colis",
+    "message": "Nbr colis"
+  },
+  {
+    "id": "clipboard.copied",
+    "defaultMessage": "Copied to clipboard",
+    "message": "Copied to clipboard"
+  }
+]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colisweb/rescript-toolkit",
-  "version": "2.43.0",
+  "version": "2.46.0",
   "scripts": {
     "clean": "rescript clean",
     "build": "rescript build -with-deps",
@@ -9,7 +9,9 @@
     "build:reacticons": "node tools/extract-react-icons.js",
     "build:scss": "node tools/build-scss.js",
     "storybook": "STORYBOOK=true start-storybook -p 6006 --no-manager-cache",
-    "build-storybook": "TAILWIND_MODE=build STORYBOOK=true build-storybook"
+    "build-storybook": "TAILWIND_MODE=build STORYBOOK=true build-storybook",
+    "intl:check": "node src/intl/check.js",
+    "intl:extract": "node src/intl/extract.js"
   },
   "keywords": [
     "ReScript",
@@ -21,8 +23,10 @@
   "author": "Colisweb",
   "license": "MIT",
   "dependencies": {
+    "@colisweb/bs-react-intl-extractor-bin": "0.12.2",
     "@colisweb/react-day-picker": "7.4.16",
     "@colisweb/restorative": "0.5.1",
+    "@datadog/browser-rum": "4.14.0",
     "@reach/accordion": "0.17.0",
     "@reach/alert-dialog": "0.17.0",
     "@reach/auto-id": "0.17.0",
@@ -40,8 +44,6 @@
     "autoprefixer": "10.4.7",
     "axios": "0.24.0",
     "bs-axios": "0.0.43",
-    "bs-css": "13.4.0",
-    "bs-css-emotion": "2.4.0",
     "case": "1.6.3",
     "click-outside-hook": "1.1.0",
     "copy-to-clipboard": "3.3.1",
@@ -51,12 +53,19 @@
     "downshift": "5.2.5",
     "lenses-ppx": "6.1.10",
     "list-selectors": "2.0.1",
+    "lodash": "4.17.21",
     "postcss": "8.4.14",
     "postcss-loader": "4.2.0",
     "postcss-preset-env": "6.7.0",
     "prismjs": "1.28.0",
+    "react": "18.2.0",
+    "react-big-calendar": "1.0.1",
     "react-datepicker": "3.8.0",
+    "react-dom": "18.2.0",
+    "react-error-boundary": "3.1.4",
+    "react-helmet": "6.1.0",
     "react-icons": "4.4.0",
+    "react-intl": "6.0.5",
     "react-select": "5.4.0",
     "react-table": "7.8.0",
     "react-use": "17.4.0",
@@ -68,14 +77,7 @@
     "rescript-react-update": "5.0.0",
     "sanitize-html": "2.7.0",
     "swr": "1.3.0",
-    "tailwindcss": "3.1.4",
-    "react-error-boundary": "3.1.4",
-    "@datadog/browser-rum": "4.14.0",
-    "react-intl": "6.0.5",
-    "lodash": "4.17.21",
-    "react-helmet": "6.1.0",
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "tailwindcss": "3.1.4"
   },
   "devDependencies": {
     "@babel/core": "7.18.6",

package/src/Toolkit.res

@@ -12,3 +12,5 @@ module Form = Toolkit__Form
 module FormValidationFunctions = Toolkit__FormValidationFunctions
 module BrowserLogger = Toolkit__BrowserLogger
 module NativeLogger = Toolkit__NativeLogger
+module Intl = Toolkit__Intl
+module LocalesHelpers = Toolkit__LocalesHelpers

package/src/form/Toolkit__Form.res

@@ -166,12 +166,8 @@ module Make = (StateLenses: Config) => {
                   | "password" =>
                     <Toolkit__Ui_Tooltip
                       label={showPassword
-                        ? <ReactIntl.FormattedMessage
-                            id="toolkit.hidePassword" defaultMessage="Hide password"
-                          />
-                        : <ReactIntl.FormattedMessage
-                            id="toolkit.showPassword" defaultMessage="Show password"
-                          />}>
+                        ? <ReactIntl.FormattedMessage defaultMessage="Masquer le mot de passe" />
+                        : <ReactIntl.FormattedMessage defaultMessage="Afficher le mot de passe" />}>
                       <button
                         type_="button"
                         className="p-1 bg-neutral-300 rounded-r border border-gray-300 text-neutral-800"

package/src/form/Toolkit__FormValidationFunctions.res

@@ -2,20 +2,22 @@ open ReactIntl
 
 module Msg = {
   @@intl.messages
-  let requiredValue = {defaultMessage: "required value"}
-  let requiredPosInt = {defaultMessage: "must be a positive integer"}
-  let requiredPosIntOrFloat = {defaultMessage: "must be a positive integer or float"}
-  let wrongFormat = {defaultMessage: "Wrong format (req: {exemple})"}
-  let maxNumberOfPackets = {defaultMessage: "Nb packets"}
-  let totalVolume = {defaultMessage: "Total volume"}
+  let requiredValue = {defaultMessage: "Champs requis"}
+  let requiredPosInt = {defaultMessage: "Doit etre un entier positif"}
+  let requiredPosIntOrFloat = {
+    defaultMessage: "Doit être un entier positif ou un nombre a virgule",
+  }
+  let wrongFormat = {defaultMessage: "Mauvais format (req: {exemple})"}
+  let maxNumberOfPackets = {defaultMessage: "Nbr colis"}
+  let totalVolume = {defaultMessage: "Volume total"}
   let binPacking = {defaultMessage: "Bin packing"}
-  let vehicleNameAlreadyUsed = {defaultMessage: "This name is already used in another flat rate"}
+  let vehicleNameAlreadyUsed = {defaultMessage: "Ce nom est deja utilisé dans un autre forfait"}
 
   let requiredAlphanumericMax4 = {
-    defaultMessage: "required format : 4 characters or numbers (exemples: 'A1b2' 'abcd')",
+    defaultMessage: "Format requis : 4 caractères ou nombres (exemples : 'A1b2' 'abcd')",
   }
   let required14Digits = {
-    defaultMessage: "required format : 14 digits",
+    defaultMessage: "Format requis : 14 chiffres",
   }
 }
 

package/src/intl/Toolkit__Intl.res

@@ -0,0 +1,101 @@
+open ReactIntl
+
+type rec messages = {fr: array<translation>}
+and translation = {
+  id: string,
+  defaultMessage: string,
+  message: Js.nullable<string>,
+}
+
+let toDict = (translations: array<translation>) =>
+  translations->Array.reduce(Js.Dict.empty(), (dict, entry) => {
+    dict->Js.Dict.set(
+      entry.id,
+      entry.message->Js.Nullable.toOption->Option.getWithDefault(entry.defaultMessage),
+    )
+    dict
+  })
+
+type availableLanguages = [
+  | #fr
+]
+
+let availableLanguagesToString = (availableLanguages: availableLanguages) =>
+  switch availableLanguages {
+  | #fr => "fr"
+  }
+
+let availableLanguagesFromString = v =>
+  switch v {
+  | v if v->Js.String2.includes("fr") => #fr
+  | _ => #fr
+  }
+
+let createIntl = (locale: availableLanguages, messages) => {
+  let cache = createIntlCache()
+
+  createIntl(
+    intlConfig(
+      ~locale=locale->availableLanguagesToString,
+      ~messages,
+      ~onError=message => Toolkit__BrowserLogger.error2("create intl error", message),
+      (),
+    ),
+    cache,
+  )
+}
+
+module type IntlConfig = {
+  let messages: messages
+  let defaultLocale: option<availableLanguages>
+}
+
+module Make = (Config: IntlConfig) => {
+  let browserLocale = Browser.Navigator.getBrowserLanguage()
+  let locale =
+    Config.defaultLocale->Option.getWithDefault(browserLocale->availableLanguagesFromString)
+
+  let messages = switch locale {
+  | #fr => Config.messages.fr->toDict
+  }
+  let intl = createIntl(locale, messages)
+
+  type state = {
+    locale: availableLanguages,
+    intl: Intl.t,
+  }
+
+  type action = SetLocale(availableLanguages)
+
+  let store = Restorative.createStore({locale: locale, intl: intl}, (_state, action) =>
+    switch action {
+    | SetLocale(locale) => {
+        locale: locale,
+        intl: {
+          let messages = switch locale {
+          | #fr => Config.messages.fr->toDict
+          }
+          createIntl(locale, messages)
+        },
+      }
+    }
+  )
+
+  let setCurrentLocale = (locale: availableLanguages) => store.dispatch(SetLocale(locale))
+
+  let useCurrentLocale = () => store.useStore().locale
+  let useIntl = () => store.useStore().intl
+
+  let getDateFnsLocale = locale =>
+    switch locale {
+    | #fr => BsDateFns.frLocale
+    }
+
+  module Provider = {
+    @react.component
+    let make = (~children) => {
+      let intl = useIntl()
+      <RawIntlProvider value=intl> children </RawIntlProvider>
+    }
+  }
+}

package/src/intl/Toolkit__Intl.resi

@@ -0,0 +1,33 @@
+type availableLanguages = [
+  | #fr
+]
+type rec messages = {fr: array<translation>}
+and translation = {
+  id: string,
+  defaultMessage: string,
+  message: Js.nullable<string>,
+}
+
+let availableLanguagesToString: availableLanguages => string
+let availableLanguagesFromString: string => availableLanguages
+
+module type IntlConfig = {
+  let messages: messages
+  let defaultLocale: option<availableLanguages>
+}
+
+module Make: (Config: IntlConfig) =>
+{
+  let browserLocale: string
+  let locale: availableLanguages
+  let intl: ReactIntl.Intl.t
+  let useIntl: unit => ReactIntl.Intl.t
+  let useCurrentLocale: unit => availableLanguages
+  let setCurrentLocale: availableLanguages => unit
+  let getDateFnsLocale: availableLanguages => BsDateFns.dateFnsLocale
+
+  module Provider: {
+    @react.component
+    let make: (~children: React.element) => React.element
+  }
+}

package/src/intl/Toolkit__LocalesHelpers.res

@@ -0,0 +1,35 @@
+open ReactIntl
+
+module DatePicker = {
+  module Fr = {
+    let weekdaysShort = ["Di", "Lun", "Ma", "Me", "Je", "Ve", "Sa"]
+
+    let months = [
+      j`Janvier`,
+      j`Février`,
+      j`Mars`,
+      j`Avril`,
+      j`Mai`,
+      j`Juin`,
+      j`Juillet`,
+      j`Août`,
+      j`Septembre`,
+      j`Octobre`,
+      j`Novembre`,
+      j`Décembre`,
+    ]
+
+    let firstDayOfWeek = 1
+  }
+}
+
+module Days = {
+  @@intl.messages
+  let monday = {defaultMessage: "Lundi"}
+  let tuesday = {defaultMessage: "Mardi"}
+  let wednesday = {defaultMessage: "Mercredi"}
+  let thursday = {defaultMessage: "Jeudi"}
+  let friday = {defaultMessage: "Vendredi"}
+  let saturday = {defaultMessage: "Samedi"}
+  let sunday = {defaultMessage: "Dimanche"}
+}

package/src/intl/check.js

@@ -1,25 +1,26 @@
-const fs = require('fs')
-const cp = require('child_process')
-const path = require('path')
+const fs = require("fs");
+const cp = require("child_process");
+const path = require("path");
+const cwd = process.cwd();
+const translations = path.join(cwd, "locale");
 
-const cwd = process.cwd()
-const translations = path.join(cwd, 'locale', 'translations')
+const AVAILABLE_LANGUAGES = ["fr"];
 
-const [enMissing, frMissing] = ['en', 'fr'].map((locale) => {
-  const file = path.join(translations, `${locale}.json`)
-  const content = JSON.parse(fs.readFileSync(file))
+const missingMessagesLanguages = AVAILABLE_LANGUAGES.map((locale) => {
+  const file = path.join(translations, `${locale}.json`);
+  const content = JSON.parse(fs.readFileSync(file));
 
-  return content.filter((item) => item.message === '').length
-})
+  return [content.filter((item) => item.message === "").length, locale];
+});
 
-if (enMissing > 0) {
-  console.log(`=== ⚠️ [EN] There are ${enMissing} messages missing.`)
-}
-
-if (frMissing > 0) {
-  console.log(`=== ⚠️ [FR]   There are ${frMissing} messages missing.`)
-}
+missingMessagesLanguages.forEach(([missingMessagesLanguage, language]) => {
+  if (missingMessagesLanguage > 0) {
+    console.log(
+      `=== ⚠️ [${language}]   There are ${missingMessagesLanguage} messages missing.`
+    );
+  }
+});
 
-if (enMissing || frMissing) {
-  process.exit(1)
+if (missingMessagesLanguages.some(([missingMessages]) => missingMessages > 0)) {
+  process.exit(1);
 }

package/src/intl/defaultLanguageConverter.js

@@ -0,0 +1,37 @@
+const fs = require("fs");
+const path = require("path");
+const glob = require("glob");
+
+const cwd = process.cwd();
+const originFile = path.join(cwd, "locale/translations/fr.json");
+const base = JSON.parse(fs.readFileSync(originFile, "utf8"));
+const dict = base.reduce((acc, value) => {
+  acc[value.defaultMessage] = value.message;
+  return acc;
+}, {});
+/**
+ * Match :
+ * - defaultMessage=""
+ * - defaultMessage={""}
+ * - defaultMessage:
+ */
+const pattern = /(defaultMessage(=|:|={|:\s))"(.*?|$)"/g;
+
+glob("**/*.res", (err, files) => {
+  files.forEach((file) => {
+    const filePath = path.join(cwd, file);
+    let fileContent = fs.readFileSync(filePath, "utf-8");
+    const matches = fileContent.matchAll(pattern);
+
+    for (const match of matches) {
+      let [, , , key] = match;
+      let message = dict[key];
+
+      if (message) {
+        fileContent = fileContent.replace(`"${key}"`, `"${message}"`);
+      }
+    }
+
+    fs.writeFileSync(filePath, fileContent);
+  });
+});

package/src/intl/extract.js

@@ -1,33 +1,44 @@
 const fs = require("fs");
 const cp = require("child_process");
 const path = require("path");
-
-const locales = ["en", "fr"];
-
 const cwd = process.cwd();
 const src = path.join(cwd, "src");
-const locale = path.join(cwd, "locale");
-const toolkit = path.join(cwd, "node_modules/@colisweb/rescript-toolkit/src");
+const localeFolderPath = path.join(cwd, "locale");
+
+const AVAILABLE_LANGUAGES = ["fr"];
+const DEFAULT_LANGUAGE = "fr";
+
+if (!fs.existsSync(localeFolderPath)) {
+  fs.mkdirSync(localeFolderPath);
+}
+
 const bin = path.join(cwd, "node_modules", ".bin", "bs-react-intl-extractor");
 
 console.log("=== ⏳  Extracting messages...");
 const extracted = JSON.parse(
-  cp.execSync(`${bin} --allow-duplicates ${src} ${locale} ${toolkit}`)
+  cp.execSync(`${bin} --allow-duplicates ${src} ${localeFolderPath}`)
 );
 console.log("=== ✅  Extracting messages... done.");
 
-for (const locale of locales) {
-  console.log(`\n=== ⏳  Updating ${locale} translation...`);
-  const file = path.join(src, "../locale/translations", `${locale}.json`);
+for (const LANGUAGE of AVAILABLE_LANGUAGES) {
+  console.log(`\n=== ⏳  Updating ${LANGUAGE} translation...`);
+  const file = path.join(src, "../locale", `${LANGUAGE}.json`);
 
   let content;
   try {
-    content = JSON.parse(fs.readFileSync(file));
+    if (fs.existsSync(file)) {
+      content = JSON.parse(fs.readFileSync(file));
+    } else {
+      console.log(
+        `=== ⚠️  Translation for ${LANGUAGE} wasn't found. Creating new one.`
+      );
+      content = [];
+    }
   } catch (error) {
     console.log(error.code);
     if (error.code === "ENOENT") {
       console.log(
-        `=== ⚠️  Translation for ${locale} wasn't found. Creating new one.`
+        `=== ⚠️  Translation for ${LANGUAGE} wasn't found. Creating new one.`
       );
       content = [];
     } else {
@@ -42,11 +53,11 @@ for (const locale of locales) {
     message:
       cache[msg.id] && cache[msg.id].message
         ? cache[msg.id].message
-        : locale === "en"
+        : LANGUAGE === DEFAULT_LANGUAGE
         ? msg.defaultMessage
         : "",
   }));
 
   fs.writeFileSync(file, JSON.stringify(messages, null, 2) + "\n");
-  console.log(`=== ✅  Updating ${locale} translation... done.`);
+  console.log(`=== ✅  Updating ${LANGUAGE} translation... done.`);
 }

package/src/ui/Toolkit__Ui_ButtonGroup.res

@@ -4,39 +4,9 @@ let make = (~children, ~className="", ~size: [#md | #xl]=#md) => {
   <div
     className={cx([
       className,
-      "flex justify-center items-center rounded-full font-display bg-gray-200",
+      "flex justify-center items-center rounded-full font-display bg-gray-200 cw-ButtonGroup",
       isMd ? "h-6" : "h-10",
       isMd ? "text-sm" : "text-xl",
-      {
-        open Css
-        style(list{
-          selector(
-            "& > button",
-            list{
-              whiteSpace(#nowrap),
-              height(100.->pct),
-              padding2(~v=0.75->rem, ~h=isMd ? 0.75->rem : 1.->rem),
-              display(#flex),
-              alignItems(#center),
-              justifyContent(#center),
-              borderRadius(2.->rem),
-              selector("&:hover", list{backgroundColor("3DDEF3"->hex)}),
-            },
-          ),
-          selector(
-            "& > button.selected",
-            list{
-              background(
-                linearGradient(
-                  270.->deg,
-                  list{(0.->pct, "11a3b6"->hex), (100.->pct, "27d0dc"->hex)},
-                ),
-              ),
-              color(white),
-            },
-          ),
-        })
-      },
     ])}>
     children
   </div>

package/src/ui/Toolkit__Ui_Card.res

@@ -79,13 +79,7 @@ module Footer = {
 @react.component
 let make = (~className="", ~children=React.null, ~customMinHeight=200) =>
   <div
-    className={cx([
-      className,
-      "rounded-lg shadow-sm bg-white p-6",
-      {
-        open Css
-        style(list{minHeight(customMinHeight->px)})
-      },
-    ])}>
+    style={ReactDOMStyle.make(~minHeight=`${customMinHeight->Int.toString}px`, ())}
+    className={cx([className, "rounded-lg shadow-sm bg-white p-6"])}>
     children
   </div>

package/src/ui/Toolkit__Ui_Checkbox.res

@@ -1,19 +1,5 @@
 type size = [#xs | #sm | #md | #lg]
 
-module Styles = {
-  open Css
-
-  let label = style(list{
-    selector("& > input + .checkmark", list{backgroundColor(hex("fff"))}),
-    selector(
-      "& > input:checked + .checkmark",
-      list{backgroundColor(hex("15cbe3")), borderColor(hex("15cbe3"))},
-    ),
-    selector("& > input + .checkmark > *", list{opacity(0.)}),
-    selector("& > input:checked + .checkmark > *", list{opacity(1.)}),
-  })
-}
-
 @react.component
 let make = (
   ~value,
@@ -45,8 +31,7 @@ let make = (
 
   <label
     className={cx([
-      Styles.label,
-      "items-center",
+      "items-center cw-Checkbox",
       inverseLabel ? "inline-flex flex-row-reverse justify-end" : "flex flex-row",
       disabled->Option.getWithDefault(false)
         ? "cursor-not-allowed opacity-75 text-gray-600"
@@ -58,7 +43,7 @@ let make = (
       type_="checkbox"
       value
       ?defaultChecked
-      className="hidden"
+      className="hidden peer"
       onChange={event => {
         let target = ReactEvent.Form.target(event)
         let checked = target["checked"]
@@ -73,7 +58,8 @@ let make = (
     />
     <span
       className={cx([
-        "checkmark rounded border text-white border-neutral-300 transform transition-all ease-in-out flex items-center justify-center flex-shrink-0",
+        "peer-checked:bg-primary-500 peer-checked:border-primary-500",
+        "bg-white rounded border text-white border-neutral-300 transform transition-all ease-in-out flex items-center justify-center flex-shrink-0",
         switch size {
         | #xs => "w-4 h-4"
         | #sm => "w-6 h-6"

package/src/ui/Toolkit__Ui_Modal.res

@@ -2,19 +2,6 @@ type size = [#xs | #sm | #md | #lg | #custom(int)]
 type color = [#primary | #success | #danger | #neutral]
 type style = [#default | #colored(color)]
 
-let sizeRule = size => {
-  let value = switch size {
-  | #xs => 480
-  | #sm => 600
-  | #md => 768
-  | #lg => 900
-  | #custom(value) => value
-  }
-
-  open Css
-  style(list{width(pct(100.)), important(maxWidth(px(value)))})
-}
-
 let modalStyle = (~type_) =>
   switch type_ {
   | #default => "rounded"
@@ -51,23 +38,6 @@ let closeIconStyle = (~type_) =>
   | #colored(_) => "hover:bg-white hover:text-black text-white"
   }
 
-let blockBody = () => {
-  open Css
-  global("body", list{overflow(#hidden)})
-}
-let resetBody = () => {
-  open Css
-  global("body", list{overflow(#auto)})
-}
-{
-  open Css
-  global("[data-reach-dialog-overlay]", list{important(background(rgba(74, 115, 120, #num(0.5))))})
-}
-{
-  open Css
-  global("[data-reach-dialog-content]", list{important(background(transparent))})
-}
-
 @react.component
 let make = (
   ~isVisible,
@@ -79,7 +49,28 @@ let make = (
   ~footer=?,
   ~ariaLabel="",
 ) =>
-  <ReachUi.Dialog ariaLabel isOpen=isVisible onDismiss=hide className={sizeRule(size)}>
+  <ReachUi.Dialog
+    ariaLabel
+    isOpen=isVisible
+    onDismiss=hide
+    style={ReactDOMStyle.make(
+      ~maxWidth={
+        let value = switch size {
+        | #xs => 480
+        | #sm => 600
+        | #md => 768
+        | #lg => 900
+        | #custom(value) => value
+        }
+        `${value->Int.toString}px`
+      },
+      (),
+    )}
+    className={cx([
+      {
+        "w-full "
+      },
+    ])}>
     <div className={cx(["bg-white pb-5 z-40 shadow-lg w-full", modalStyle(~type_)])}>
       <header
         className={cx([

package/src/ui/Toolkit__Ui_ProgressBar.res

@@ -4,6 +4,7 @@ type color = [#success | #danger | #warning | #info]
 let make = (~progression: float, ~color: color=#success) =>
   <div className="flex flex-row w-full h-2 bg-neutral-300 rounded-lg">
     <div
+      style={ReactDOMStyle.make(~width=`${progression->Float.toString}%`, ())}
       className={cx([
         "h-full rounded-lg",
         switch color {
@@ -12,7 +13,6 @@ let make = (~progression: float, ~color: color=#success) =>
         | #warning => "bg-warning-500"
         | #info => "bg-info-500"
         },
-        Css.style(list{Css.width(progression->#percent)}),
       ])}
     />
   </div>

package/src/ui/Toolkit__Ui_Radio.res

@@ -1,20 +1,5 @@
 type size = [#xs | #sm | #md | #lg]
 
-module Styles = {
-  open Css
-
-  let label = style(list{
-    selector("& > input + .checkmark", list{backgroundColor(hex("fff"))}),
-    selector("& > input:focus + .checkmark", list{unsafe("boxShadow", "0px 0px 4px #15CBE3")}),
-    selector(
-      "& > input:checked + .checkmark",
-      list{backgroundColor(hex("15cbe3")), borderColor(hex("15cbe3"))},
-    ),
-    selector("& > input + .checkmark > *", list{opacity(0.)}),
-    selector("& > input:checked + .checkmark > *", list{opacity(1.)}),
-  })
-}
-
 @react.component
 let make = (
   ~value,
@@ -28,7 +13,6 @@ let make = (
 ) =>
   <label
     className={cx([
-      Styles.label,
       "flex items-center",
       disabled->Option.getWithDefault(false)
         ? "cursor-not-allowed opacity-75 text-gray-600"
@@ -38,7 +22,7 @@ let make = (
     <input
       type_="radio"
       value
-      className="opacity-0 w-0 h-0"
+      className="opacity-0 w-0 h-0 peer"
       onChange={event => {
         let target = ReactEvent.Form.target(event)
         let value = target["value"]
@@ -51,6 +35,8 @@ let make = (
     />
     <span
       className={cx([
+        "bg-white peer-focus:shadow-sm peer-focus:shadow-primary-500",
+        "peer-checked:border-primary-500 peer-checked:bg-primary-500",
         "checkmark rounded-full border text-white mr-3 border-neutral-300 transform transition-all ease-in-out flex items-center justify-center",
         switch size {
         | #xs => "w-4 h-4"

package/src/ui/Toolkit__Ui_Tooltip.res

@@ -38,32 +38,23 @@ let make = (
     {isVisible && canBeShowed
       ? <ReachUi.Portal>
           <div
-            className={cx([
-              "absolute w-0 h-0 border-gray-800",
-              triangleClassName,
-              {
-                open Css
-                style(list{
-                  unsafe("borderLeft", "10px solid transparent !important"),
-                  unsafe("borderRight", "10px solid transparent !important"),
-                  unsafe("borderBottom", "10px solid"),
-                  left(
-                    triggerRect
-                    ->Js.Nullable.toOption
-                    ->Option.mapWithDefault(0, triggerRect =>
-                      triggerRect.left - 10 + triggerRect.width / 2
-                    )
-                    ->px,
-                  ),
-                  top(
-                    triggerRect
-                    ->Js.Nullable.toOption
-                    ->Option.mapWithDefault(0, triggerRect => triggerRect.bottom + scrollY)
-                    ->px,
-                  ),
-                })
-              },
-            ])}
+            style={ReactDOMStyle.make(
+              ~borderLeft="10px solid transparent",
+              ~borderRight="10px solid transparent",
+              ~borderBottom="10px solid",
+              ~left=`${triggerRect
+                ->Js.Nullable.toOption
+                ->Option.mapWithDefault(0, triggerRect =>
+                  triggerRect.left - 10 + triggerRect.width / 2
+                )
+                ->Int.toString}px`,
+              ~top=`${triggerRect
+                ->Js.Nullable.toOption
+                ->Option.mapWithDefault(0, triggerRect => triggerRect.bottom + scrollY)
+                ->Int.toString}px`,
+              (),
+            )}
+            className={cx(["absolute w-0 h-0 border-gray-800", triangleClassName])}
           />
         </ReachUi.Portal>
       : React.null}
@@ -71,10 +62,10 @@ let make = (
       ? <Toolkit__Ui_Spread props=tooltip>
           <TooltipPopup
             label
+            style={ReactDOMStyle.make(~maxWidth=`${maxWidth->Int.toString}px`, ())}
             className={cx([
               "px-3 py-2 bg-gray-800 rounded text-white text-sm z-40 whitespace-pre-wrap",
               tooltipClassName,
-              Css.style(list{Css.maxWidth(maxWidth->Css.px)}),
             ])}
             position=centered
           />

package/src/ui/styles.css

@@ -39,12 +39,13 @@ body,
 
 [data-reach-dialog-content] {
   padding: 0 !important;
+  background: transparent;
   margin: 10vh auto;
   outline: 0;
 }
 
 [data-reach-dialog-overlay] {
-  background: rgba(0, 0, 0, 0.6);
+  background: rgba(74, 115, 120, 0.5);
   z-index: 40;
   position: fixed;
   top: 0;
@@ -376,4 +377,20 @@ input[type=number] {
   color: #15373a;
 }
 
+.cw-ButtonGroup > button {
+  @apply whitespace-nowrap h-full px-3 md:px-4 flex items-center justify-center rounded-3xl py-3
+}
+.cw-ButtonGroup > button:hover {
+  @apply bg-primary-300
+}
+
+.cw-ButtonGroup > button.selected {
+  background: linear-gradient(270deg, #11a3b6 0%, #27d0dc 100%);
+  color: white;
+}
+
+.cw-Checkbox > input:checked + .checkmark > * {
+  @apply opacity-100
+}
+
 /* purgecss end ignore */

package/src/vendors/Browser.res

@@ -56,3 +56,19 @@ external screenWidth: int = "window.screen.width"
 
 @val
 external screenHeight: int = "window.screen.height"
+
+module Navigator = {
+  type t
+
+  @val
+  external userLanguage: option<string> = "window.navigator.userLanguage"
+
+  @val external language: option<string> = "window.navigator.language"
+
+  let getBrowserLanguage = () =>
+    switch (userLanguage, language) {
+    | (Some(l), _) => l
+    | (_, Some(l)) => l
+    | (None, None) => "fr"
+    }
+}

package/src/vendors/Browser.resi

@@ -36,3 +36,14 @@ module DomElement: {
 }
 
 let innerWidth: int
+
+module Navigator: {
+  type t
+
+  @val
+  external userLanguage: option<string> = "window.navigator.userLanguage"
+
+  @val external language: option<string> = "window.navigator.language"
+
+  let getBrowserLanguage: unit => string
+}

package/src/vendors/ShallowEqual.res

@@ -0,0 +1,5 @@
+@module("shallow-equal")
+external shallowEqualObjects: ('a, 'b) => bool = "shallowEqualObjects"
+
+@module("shallow-equal")
+external shallowEqualArrays: (array<'a>, array<'b>) => bool = "shallowEqualArrays"

package/src/vendors/reach-ui/ReachUi_Tooltip.res

@@ -28,6 +28,7 @@ module TooltipPopup = {
   external make: (
     ~className: string=?,
     ~position: (triggerRect, triggerRect) => position,
+    ~style: ReactDOMStyle.t=?,
     ~label: React.element,
   ) => React.element = "TooltipPopup"
 }