feat(use-i18n): add i18n hook

Author: philibea

.eslintignore

@@ -1,3 +1,4 @@
 # From .gitignore
 node_modules/
 dist/
+build/

.eslintrc

@@ -1,5 +1,13 @@
 {
   "root": true,
   "parser": "@babel/eslint-parser",
-  "extends": "./packages/eslint-config-react/index.js"
+  "extends": "./packages/eslint-config-react/index.js",
+  "rules": {
+    "import/no-extraneous-dependencies": [
+      "error",
+      {
+        "devDependencies": ["**/__tests__/*", "rollup.config.js"]
+      }
+    ]
+  }
 }

packages/eslint-config-react/index.js

@@ -45,5 +45,15 @@ module.exports = {
     'react/jsx-no-useless-fragment': 'error',
     'react/no-adjacent-inline-elements': 'error',
     'react/jsx-no-constructed-context-values': 'warn',
+    'import/no-extraneous-dependencies': [
+      'error',
+      {
+        devDependencies: [
+          '**/*.test.js',
+          '**/*.spec.js',
+          '**/__tests__/*.js',
+        ],
+      },
+    ],
   },
 }

packages/use-i18n/README.md

@@ -9,13 +9,52 @@ $ yarn add @scaleway/use-i18n
 ```
 
 ## Usage
+### Loading locales
+Create a directory with your locales.
+Use of local variables and namespace to dynamically load the locales.
+
+**Exemple :**
+
+```
+📦locales
+ ┣ 📂de
+ ┃ ┗ 📜common.json
+ ┣ 📂en
+ ┃ ┗ 📜common.json
+ ┗ 📂fr
+ ┃ ┗ 📜common.json
+```
+your loader will be:
+```js
+const load = ({ locale, namespace }) =>
+  import(`./locales/${locale}/${namespace}`)
+```
+Inside your app you will need to use useTranslation to load namespace locales.
+
+if you want to have pre-load locales you can use defaultTranslations.
+
+```js
+import defaultTranslations from './locales/en/common';
+
+<I18N
+  defaultLocale="en"
+  supportedLocales={['en']}
+  defaultTranslations={defaultTranslations}
+>
+  <App />
+</I18N>
+```
+
+
 
 ```js
 import React from 'react'
 import I18n from '@scaleway/use-i18n'
 
+
 const Page = () => {
-  const { t } = useI18n()
+  // this will load locales based on `./locales/${currentLocale}/common.json`
+  const { t } = useTranlation(['common'])
 
   return <h1>{t('title')}</h1>
 }
@@ -26,10 +65,13 @@ const App = () => {
     title: 'Welcome to I18n hooks',
   }
 
+  const load = ({ locale, namespace }) =>
+    import(`./locales/${locale}/${namespace}`)
+
   return (
     <I18n
       defaultLocale="en"
-      defaultLocales={defaultLocales}
+      supportedLocales={defaultLocales}
       defaultTranslations={defaultTranslations}
     >
       <Page />

packages/use-i18n/example/.eslintignore

@@ -0,0 +1,2 @@
+# From .gitignore
+cra

packages/use-i18n/example/cra/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"],
+  "plugins": ["@babel/plugin-transform-runtime"]
+}

packages/use-i18n/example/cra/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "root": true,
+  "parser": "@babel/eslint-parser",
+  "extends": ["@scaleway/react"]
+}

packages/use-i18n/example/cra/README.md

@@ -3,7 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@scaleway/use-i18n": "file:.yalc/@scaleway/use-i18n",
+    "@emotion/react": "^11.1.5",
+    "@emotion/styled": "^11.3.0",
+    "@scaleway/eslint-config-react": "^1.4.0",
+    "@scaleway/ui": "^0.75.3",
+    "@scaleway/use-i18n": "file:../../",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
@@ -14,12 +18,6 @@
     "build": "react-scripts build",
     "eject": "react-scripts eject"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
   "browserslist": {
     "production": [
       ">0.2%",