@colisweb/rescript-toolkit 2.45.0 → 2.46.3

package/.gitlab-ci.yml

@@ -35,6 +35,7 @@ publish rescript-toolkit:
   script:
     - export NPM_TOKEN=${NPM_TOKEN:-undefined}
     - npm --no-git-tag-version version $(echo $CI_COMMIT_TAG | sed -e 's/^v//')
+    - yarn
     - npm publish
   cache:
     key: "yarn-$CI_COMMIT_REF_SLUG"

package/.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+yarn intl:extract && yarn intl:check

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.45.0",
+  "version": "2.46.3",
   "scripts": {
     "clean": "rescript clean",
     "build": "rescript build -with-deps",
@@ -9,7 +9,10 @@
     "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",
+    "prepare": "is-ci || husky install"
   },
   "keywords": [
     "ReScript",
@@ -21,6 +24,7 @@
   "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",
@@ -38,6 +42,7 @@
     "@reach/tooltip": "0.17.0",
     "@reach/visually-hidden": "0.17.0",
     "@rescript/react": "0.10.3",
+    "@tailwindcss/line-clamp": "0.4.0",
     "autoprefixer": "10.4.7",
     "axios": "0.24.0",
     "bs-axios": "0.0.43",
@@ -88,6 +93,8 @@
     "@storybook/theming": "6.1.21",
     "babel-loader": "8.2.5",
     "highlight.js": "11.3.1",
+    "husky": "8.0.0",
+    "is-ci": "3.0.1",
     "raw-loader": "4.0.2",
     "react-is": "17.0.2",
     "sass": "1.45.0"

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/tailwind/tailwind.config.js

@@ -11,7 +11,8 @@ module.exports = {
       },
       boxShadow: {
         sidenav: "inset 0 0 1px 2px rgba(0, 0, 0, 0.2)",
-        sm: "0px 2px 1px -1px rgba(0,0,0,0.1), 0px 1px 1px 0px rgba(0,0,0,0.1), 0px 1px 3px 0px rgba(0,0,0,0.1)",
+        sm:
+          "0px 2px 1px -1px rgba(0,0,0,0.1), 0px 1px 1px 0px rgba(0,0,0,0.1), 0px 1px 3px 0px rgba(0,0,0,0.1)",
       },
       borderColor: {
         currentColor: "currentColor",
@@ -149,6 +150,7 @@ module.exports = {
       },
     },
   },
+  plugins: [require("@tailwindcss/line-clamp")],
   content: [
     "public/index.html",
     "lib/es6_global/src/**/**.js",

package/src/ui/Toolkit__Ui_Dropdown.res

@@ -18,18 +18,20 @@ let make = (
   ~buttonVariant: Toolkit__Ui_Button.variant=#default,
   ~position=#bottom,
 ) => {
-  let ref = React.useRef(Js.Nullable.null)
+  let dropDownRef = React.useRef(Js.Nullable.null)
+  let buttonRef = React.useRef(Js.Nullable.null)
   let (position, setPosition) = React.useState(() => position)
   let {isOpen, hide, toggle} = Toolkit__Hooks.useDisclosure(~defaultIsOpen, ())
 
-  Toolkit__Hooks.useOnClickOutside(ref, _ => {
+  Toolkit__Hooks.useOnClickOutside(buttonRef, _ => {
     hide()
   })
+
   let (adjustmentStyle, setAdjustmentStyle) = React.useState(() => None)
 
   React.useEffect2(() => {
     if isOpen {
-      ref.current
+      dropDownRef.current
       ->Js.Nullable.toOption
       ->Option.forEach(dom => {
         let {left, right} = dom->Browser.DomElement.getBoundingClientRect
@@ -52,7 +54,7 @@ let make = (
       setAdjustmentStyle(_ => None)
     }
     None
-  }, (isOpen, ref))
+  }, (isOpen, dropDownRef))
 
   <div className={cx(["relative", containerClassName])}>
     <Toolkit__Ui_Button
@@ -60,11 +62,12 @@ let make = (
       size=buttonSize
       type_="button"
       color=buttonColor
+      buttonRef={ReactDOM.Ref.domRef(buttonRef)}
       onClick={event => {
-        switch ref.current->Js.Nullable.toOption {
+        switch dropDownRef.current->Js.Nullable.toOption {
         | None => toggle()
-        | Some(domRef) => {
-            let isInDropdown = ReactEvent.Mouse.currentTarget(event)["contains"](. domRef)
+        | Some(dropDownRef) => {
+            let isInDropdown = ReactEvent.Mouse.currentTarget(event)["contains"](. dropDownRef)
             if !isInDropdown {
               toggle()
             }
@@ -75,7 +78,7 @@ let make = (
       label
       {isOpen
         ? <div
-            ref={ReactDOM.Ref.domRef(ref)}
+            ref={ReactDOM.Ref.domRef(dropDownRef)}
             className={cx([
               "dropdown",
               "absolute  z-20 bg-white p-2 transform shadow rounded text-base font-normal text-neutral-700 opacity-0",

package/src/ui/Toolkit__Ui_Table.res

@@ -45,6 +45,7 @@ module Core = {
     ~className="",
     ~emptyMessage,
     ~additionalRow: option<(ReactTable.instanceRow<'a>, 'a) => React.element>=?,
+    ~trClassName="",
   ) =>
     <div className={cx([className, "flex flex-auto w-full overflow-x-auto relative"])}>
       <Toolkit__Ui_Spread props={table.getTableProps()}>
@@ -98,7 +99,7 @@ module Core = {
 
                 <React.Fragment key={"tr" ++ index->Int.toString}>
                   <Toolkit__Ui_Spread props={row.getRowProps()}>
-                    <tr className={"block even:bg-gray-200 min-h-[5.5rem]"}>
+                    <tr className={cx([trClassName, "block even:bg-gray-200 min-h-[5.5rem]"])}>
                       {row.cells
                       ->Array.mapWithIndex((index, cell) =>
                         <Toolkit__Ui_Spread

package/src/ui/Toolkit__Ui_Table.resi

@@ -10,6 +10,7 @@ module Core: {
     ~className: string=?,
     ~emptyMessage: string,
     ~additionalRow: (ReactTable.instanceRow<'a>, 'a) => React.element=?,
+    ~trClassName: string=?,
   ) => React.element
 }
 

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
+}