21075: MAJOR Refactored translations to use Il8nBundles (#9)

howsoai · Jul 31, 2024 · 4025b51 · 4025b51
1 parent 08859f1
commit 4025b51
Show file tree

Hide file tree

Showing 155 changed files with 1,594 additions and 962 deletions.
diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
@@ -27,5 +27,6 @@ jobs:
           # ⚠️ Make sure to configure a `CHROMATIC_PROJECT_TOKEN` repository secret
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           autoAcceptChanges: "main" # 👈 Option to accept all changes on main
+          exitOnceUploaded: true
           skip: "@(renovate/**|dependabot/**)" # 👈 Option to skip Chromatic for certain branches
           zip: true
diff --git a/.storybook/i18next.ts b/.storybook/i18next.ts
@@ -1,30 +1,22 @@
 import { initReactI18next } from "react-i18next";
 import i18n from "i18next";
 import LanguageDetector from "i18next-browser-languagedetector";
-import { defaultTranslationNamespace as reactTailwindFlowbiteComponentsNs } from "@howso/react-tailwind-flowbite-components";
-import howsoReactTailwindFlowbiteComponentsEn from "@howso/react-tailwind-flowbite-components/lib/public/locales/react-tailwind-flowbite-components/en.json" with { type:
-  "json" };
-import { defaultTranslationNamespace } from "../src/hooks/useDefaultTranslation";
-import howsoEngineReactDisplayComponentsEn from "../public/locales/howso-engine-react-display-components/en.json" with { type:
-  "json" };
+import { addI18nBundlesToResources } from "@howso/ui-internationalization-utils";
+import { I18nBundles as ReactTailwindFlowbiteComponentsI18nBundles } from "@howso/react-tailwind-flowbite-components";
+import { I18nBundles } from "../src";
 
-const ns = [reactTailwindFlowbiteComponentsNs, defaultTranslationNamespace];
 const supportedLngs = ["en"];
 
 export default i18n
   .use(initReactI18next)
   .use(LanguageDetector)
   .init({
     lng: supportedLngs[0],
-    ns,
     interpolation: { escapeValue: false },
     // react: { useSuspense: true },
     supportedLngs,
-    resources: {
-      en: {
-        [reactTailwindFlowbiteComponentsNs]:
-          howsoReactTailwindFlowbiteComponentsEn,
-        [defaultTranslationNamespace]: howsoEngineReactDisplayComponentsEn,
-      },
-    },
+    resources: addI18nBundlesToResources({}, [
+      ...ReactTailwindFlowbiteComponentsI18nBundles,
+      ...I18nBundles,
+    ]),
   });
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -6,14 +6,14 @@ const config: StorybookConfig = {
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
     "@storybook/addon-a11y",
-    "@chromatic-com/storybook"
+    "@chromatic-com/storybook",
   ],
   framework: {
     name: "@storybook/react-vite",
     options: {},
   },
   docs: {},
-  staticDirs: ["../public"], //👈 Configures the static asset folder in Storybook
+  // staticDirs: ["../public"], //👈 Configures the static asset folder in Storybook
   refs: {
     "react-tailwind-flowbite-components": {
       title: "Howso components",

diff --git a/MIGRATION.md b/MIGRATION.md
@@ -1,5 +1,36 @@
 # Migration guide
 
+## 3.x
+
+Refactored translation system to use `@howso/ui-internationalization-utils` `I18nBundle`s.
+
+To reduce overall bundle size, you are advised to specify components' bundles you use selectively in your `i18n` service:
+
+```ts
+import { FeatureAttributeSampleI18nBundle } from "@howso/howso-engine-react-display-components";
+
+i18n
+  // ...
+  .init({
+    resources: addI18nBundlesToResources(resources, [SkeletonI18nBundle]),
+    // ...
+  });
+```
+
+A naive export is available from this package that contains all bundles, though
+its use is discouraged:
+
+```ts
+import { I18nBundles } from "@howso/howso-engine-react-display-components";
+
+i18n
+  // ...
+  .init({
+    resources: addI18nBundlesToResources(resources, [...I18nBundles]),
+    // ...
+  });
+```
+
 ## 2.x
 
 Flowbite updates 0.7 - 0.10

diff --git a/README.md b/README.md
@@ -53,9 +53,36 @@ The suggested integration is trough setting up React I8ln's using `backend`:
 
 You will need the translation files from:
 
-- This package
 - [@howso/react-tailwind-flowbite-components](https://github.com/howsoai/react-tailwind-flowbite-components)
 
+Translation files from this package must be included into your `i18n` `resources`:
+To reduce overall bundle size, you are advised to specify components' bundles you use selectively in your `i18n` service:
+
+```ts
+import { FeatureAttributeSampleI18nBundle } from "@howso/howso-engine-react-display-components";
+
+i18n
+  // ...
+  .init({
+    resources: addI18nBundlesToResources(resources, [SkeletonI18nBundle]),
+    // ...
+  });
+```
+
+A naive export is available from this package that contains all bundles, though
+its use is discouraged:
+
+```ts
+import { I18nBundles } from "@howso/howso-engine-react-display-components";
+
+i18n
+  // ...
+  .init({
+    resources: addI18nBundlesToResources(resources, [...I18nBundles]),
+    // ...
+  });
+```
+
 ## Contributing
 
 Development is done through [Storybook](https://storybook.js.org/).
@@ -65,15 +92,6 @@ You may start the UI for inspection with hot reloading using:
 npm run storybook
 ```
 
-### Translations
-
-This package produces a number of components that expose translations.
-Any usages of translation should use the `useDefaultTranslation` function instead of `useTranslation`.
-This will ensure translations are in the correct namespace for this package to be copied into implementing systems.
-
-Using translations should be done sparingly. Copying the updated translation file is a manual process.
-Translation changes should be considered breaking releases to signal this step and include a note in the [migration](./MIGRATION.md) file.
-
 ## Publishing
 
 This package is published into a private npm registery.

diff --git a/jest.config.cjs b/jest.config.cjs
@@ -12,7 +12,7 @@ module.exports = {
   },
   rootDir: "src",
   setupFiles: [
-    "<rootDir>/../jest/setup/il8n.js",
+    "<rootDir>/../jest/setup/i18n.js",
     "<rootDir>/../jest/setup/config.js",
   ],
   testEnvironment: "jsdom",

diff --git a/jest/setup/il8n.js → jest/setup/i18n.js b/jest/setup/il8n.js → jest/setup/i18n.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,7 +14,7 @@
     "prebuild": "rimraf lib/*",
     "pre-commit": "lint-staged",
     "prepare": "husky install",
-    "test": "npm run lint && tsc --noEmit && jest",
+    "test": "jest",
     "test:watch": "jest --watch",
     "test:coverage": "tsc --noEmit && jest --collect-coverage",
     "storybook": "storybook dev -p 6006",
@@ -37,7 +37,7 @@
   "peerDependencies": {
     "@hookform/error-message": "^2.0.1",
     "@howso/openapi-client": "^1.0.0",
-    "@howso/react-tailwind-flowbite-components": "^4.0.2",
+    "@howso/react-tailwind-flowbite-components": "^5.0.1",
     "jotai": "^2.8.3",
     "lodash": "^4.17.0",
     "react": "^18.0.0",
@@ -56,7 +56,8 @@
     "@fontsource/inter": "^5.0.5",
     "@hookform/error-message": "^2.0.1",
     "@howso/openapi-client": "^1.0.0",
-    "@howso/react-tailwind-flowbite-components": "^4.0.2",
+    "@howso/react-tailwind-flowbite-components": "^5.0.1",
+    "@howso/ui-internationalization-utils": "^1.0.1",
     "@rollup/plugin-typescript": "^11.1.6",
     "@storybook/addon-a11y": "^8.1.10",
     "@storybook/addon-actions": "^8.1.10",
@@ -94,7 +95,6 @@
     "react-icons": "^5.2.1",
     "react-router-dom": "^6.14.1",
     "rollup": "^4.12.1",
-    "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-postcss": "^4.0.2",
     "storybook": "^8.1.10",
     "tailwindcss": "^3.4.1",

diff --git a/public/.gitkeep b/public/.gitkeep