feat: example with shared locales

.changeset/silver-cycles-march.md

@@ -0,0 +1,5 @@
+---
+"@your-org/common-i18n": major
+---
+
+Initial common shared locales package example

.changeset/slimy-maps-joke.md

@@ -0,0 +1,6 @@
+---
+"nextjs-app": minor
+"remix-app": minor
+---
+
+Example and howto consume shared locales from @your-org/common-i18n

README.md

@@ -51,6 +51,7 @@ Useful to
 │   ├── remix-app   (api)
 │   └── vite-app
 └── packages
+    ├── common-i18n         (locales...)
     ├── core-lib
     ├── db-main-prisma
     ├── eslint-config-bases (to shared eslint configs)
@@ -71,12 +72,13 @@ Useful to
 - [packages/db-main-prisma](./packages/db-main-prisma): used by web-app. [README](./packages/db-main-prisma/README.md) | [CHANGELOG](./packages/db-main-prisma/CHANGELOG.md)
 - [packages/eslint-config-bases](./packages/eslint-config-bases): [README](./packages/eslint-config-bases/README.md) | [CHANGELOG](./packages/eslint-config-bases/CHANGELOG.md)
 - [packages/ui-lib](./packages/ui-lib): publishable. [README](./packages/ui-lib/README.md) | [CHANGELOG](./packages/ui-lib/CHANGELOG.md)
+- [packages/common-i18n](./packages/common-i18n): [README](./packages/common-i18n/README.md) | [CHANGELOG](./packages/common-i18n/CHANGELOG.md)
 
 > Apps can depend on packages, packages can depend on each others...
 
 #### Shared static assets
 
-If needed static resources like **locales**, **images**,... can be shared by using symlinks in the repo.
+If needed static resources like **images**,... can be shared by using symlinks in the repo.
 
 - See the global [static](./static) folder.
 

apps/nextjs-app/e2e/pages/index/index.spec.ts

@@ -1,6 +1,6 @@
 import { test, expect } from '@playwright/test';
-import homeJsonEn from '@/public/locales/en/demo.json';
-import homeJsonFr from '@/public/locales/fr/demo.json';
+import homeJsonEn from '@your-org/common-i18n/locales/en/demo.json';
+import homeJsonFr from '@your-org/common-i18n/locales/fr/demo.json';
 
 test.describe('Demo page', () => {
   test('should have the title in english by default', async ({ page }) => {

apps/nextjs-app/e2e/pages/system/404.spec.ts

@@ -1,6 +1,6 @@
 import { test, expect } from '@playwright/test';
-import systemJsonEn from '@/public/locales/en/system.json';
-import systemJsonFR from '@/public/locales/fr/system.json';
+import systemJsonEn from '@your-org/common-i18n/locales/en/system.json';
+import systemJsonFr from '@your-org/common-i18n/locales/fr/system.json';
 
 const pageSlug = 'this-page-does-not-exist';
 
@@ -13,6 +13,6 @@ test.describe('404 not found page', () => {
   test('should have the title in french', async ({ page }) => {
     await page.goto(`/fr/${pageSlug}`);
     const title = await page.title();
-    expect(title).toBe(systemJsonFR.notFound.title);
+    expect(title).toBe(systemJsonFr.notFound.title);
   });
 });

apps/nextjs-app/package.json

@@ -34,9 +34,9 @@
     "vercel-build": "yarn share-static-hardlink && next build",
     "start": "next start",
     "bundle-analyze": "cross-env ANALYZE=true NEXTJS_IGNORE_TYPECHECK=1 NEXTJS_IGNORE_ESLINT=1 NEXTJS_SENTRY_UPLOAD_DRY_RUN=1 yarn build",
-    "?share-static-symlink": "echo 'Use this command to link assets, locales... from shared static folder'",
+    "?share-static-symlink": "echo 'Use this command to link assets... from shared static folder'",
     "share-static-symlink": "rimraf ./public/shared-assets && symlink-dir ../../static/assets ./public/shared-assets",
-    "?share-static-hardlink": "echo 'Use this command to link assets, locales... from shared static folder'",
+    "?share-static-hardlink": "echo 'Use this command to link assets... from shared static folder'",
     "share-static-hardlink": "rimraf ./public/shared-assets && syncdir ../../static/assets ./public/shared-assets --copy",
     "check-dist": "es-check -v",
     "check-build-size": "size-limit --highlight-less",

apps/nextjs-app/src/pages/home.tsx

@@ -1,4 +1,5 @@
 import { BadRequest } from '@tsed/exceptions';
+
 import type { GetStaticProps, InferGetStaticPropsType } from 'next';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import { homeConfig } from '@/features/home/home.config';

apps/nextjs-app/src/types.d/react-i18next.d.ts

@@ -5,7 +5,7 @@
  * @link https://react.i18next.com/latest/typescript
  */
 import 'react-i18next';
-import type { I18nNamespaces } from '@your-org/common-i18n/index';
+import type { I18nNamespaces } from '@your-org/common-i18n';
 
 declare module 'react-i18next' {
   interface CustomTypeOptions {

apps/nextjs-app/tsconfig.json

@@ -18,7 +18,10 @@
       "@/pages/*": ["./pages/*"],
       "@/public/*": ["../public/*"],
       "@/themes/*": ["./themes/*"],
-      "@your-org/common-i18n/*": ["../../../packages/common-i18n/src/*"],
+      "@your-org/common-i18n": ["../../../packages/common-i18n/src/index"],
+      "@your-org/common-i18n/locales/*": [
+        "../../../packages/common-i18n/src/locales/*"
+      ],
       "@your-org/ui-lib/*": ["../../../packages/ui-lib/src/*"],
       "@your-org/ui-lib": ["../../../packages/ui-lib/src/index"],
       "@your-org/core-lib/*": ["../../../packages/core-lib/src/*"],

apps/remix-app/package.json

@@ -21,9 +21,9 @@
     "watch-tailwind": "tailwindcss -o ./src/tailwind.css --watch",
     "remix-dev": "remix dev",
     "clean": "rimraf --no-glob ./.cache ./coverage ./src/tailwind.css ./tsconfig.tsbuildinfo ./.eslintcache && jest --clear-cache",
-    "?share-static-symlink": "echo 'Use this command to link assets, locales... from shared static folder'",
+    "?share-static-symlink": "echo 'Use this command to link assets... from shared static folder'",
     "share-static-symlink": "rimraf ./public/shared-assets && symlink-dir ../../static/assets ./public/shared-assets",
-    "?share-static-hardlink": "echo 'Use this command to link assets, locales... from shared static folder'",
+    "?share-static-hardlink": "echo 'Use this command to link assets... from shared static folder'",
     "share-static-hardlink": "rimraf ./public/shared-assets && syncdir ../../static/assets ./public/shared-assets --copy",
     "test": "yarn test-unit",
     "test-unit": "jest --config jest.config.js",

apps/remix-app/tsconfig.json

@@ -13,6 +13,10 @@
       "@/lib/*": ["./src/lib/*"],
       "@/routes/*": ["./src/routes/*"],
       "@/test-utils": ["./config/jest/test-utils"],
+      "@your-org/common-i18n": ["../../../packages/common-i18n/src/index"],
+      "@your-org/common-i18n/locales/*": [
+        "../../../packages/common-i18n/src/locales/*"
+      ],
       "@your-org/ui-lib/*": ["../../packages/ui-lib/src/*"],
       "@your-org/ui-lib": ["../../packages/ui-lib/src/index"],
       "@your-org/core-lib/*": ["../../packages/core-lib/src/*"],

packages/common-i18n/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@your-org/common-i18n",
-  "version": "1.0.0",
+  "version": "0.1.0",
   "license": "MIT",
   "private": true,
   "homepage": "https://github.com/belgattitude/nextjs-monorepo-example",
@@ -14,6 +14,13 @@
     "url": "https://github.com/belgattitude"
   },
   "sideEffects": false,
+  "type": "module",
+  "exports": {
+    "./locales/*.json": {
+      "require": "./src/locales/*.json",
+      "import": "./src/locales/*.json"
+    }
+  },
   "scripts": {
     "clean": "rimraf --no-glob ./dist ./coverage ./tsconfig.tsbuildinfo ./.eslintcache && jest --clear-cache",
     "lint": "eslint . --ext .ts,.tsx,.js,.jsx",

packages/common-i18n/src/index.ts

@@ -3,9 +3,9 @@ import type demo from './locales/en/demo.json';
 import type home from './locales/en/home.json';
 import type system from './locales/en/system.json';
 
-export type I18nNamespaces = {
+export interface I18nNamespaces {
   home: typeof home;
   demo: typeof demo;
   common: typeof common;
   system: typeof system;
-};
+}

packages/common-i18n/src/locales/fr/demo.json

@@ -1,5 +1,5 @@
 {
   "page": {
-    "title": "Web-app | DAmo | nextjs-monorepo-example"
+    "title": "Web-app | Démo | nextjs-monorepo-example"
   }
 }