@asafarim/shared-i18n 0.6.6 → 0.8.0

package/demo/src/locales/nl/demo.json

@@ -1,85 +1,85 @@
-{
-  "title": "Shared i18n demo",
-  "subtitle": "Een lichtgewicht React i18next wrapper met cookie persistentie.",
-  "cta": "Taal wisselen",
-  "overview": {
-    "heading": "Overzicht",
-    "description": "@asafarim/shared-i18n is een production-grade internationalisatie (i18n) pakket voor React-applicaties.",
-    "features": {
-      "title": "Belangrijkste Functies",
-      "items": [
-        "Ondersteuning voor meerdere talen met cookie persistentie",
-        "Ingebouwde taaldetectie en fallback",
-        "TypeScript-ondersteuning met volledige type veiligheid",
-        "Vooraf geconfigureerde common en identity-portal naamruimten",
-        "Naadloze integratie met react-i18next",
-        "Synchronisatie van taalvoorkeur met backend",
-        "SSR-veilige hulpprogramma's voor server-side rendering"
-      ]
-    },
-    "useCases": {
-      "title": "Ideaal Voor",
-      "items": [
-        "Globale applicaties die ondersteuning voor meerdere talen vereisen",
-        "Enterprise-platforms met taalvoorkeuren van gebruikers",
-        "Identiteits- en verificatiesystemen",
-        "Content management systemen met lokalisatie",
-        "SaaS-applicaties die internationale gebruikers bedienen"
-      ]
-    }
-  },
-  "getStarted": {
-    "heading": "Aan de Slag",
-    "intro": "Leer hoe je @asafarim/shared-i18n in minuten in je React-applicatie integreert.",
-    "steps": [
-      {
-        "title": "1. Installeer het Pakket",
-        "description": "Voeg het pakket toe aan je projectafhankelijkheden.",
-        "code": "pnpm add @asafarim/shared-i18n"
-      },
-      {
-        "title": "2. Initialiseer i18n in Je App",
-        "description": "Roep initI18n aan bij het opstarten van de applicatie om taalinstellingen te configureren.",
-        "code": "import { initI18n } from '@asafarim/shared-i18n';\n\ninitI18n({\n  defaultNS: 'common',\n  ns: ['common', 'identityPortal'],\n  resources: { /* je vertalingen */ }\n});"
-      },
-      {
-        "title": "3. Gebruik de useLanguage Hook",
-        "description": "Krijg toegang tot taalwisseling en huidige taaltoestand in je componenten.",
-        "code": "const { changeLanguage, isChanging } = useLanguage();\n\n<button onClick={() => changeLanguage('en')}>\n  Naar Engels\n</button>"
-      },
-      {
-        "title": "4. Vertaal met useTranslation",
-        "description": "Gebruik de useTranslation hook om toegang te krijgen tot vertaalde strings.",
-        "code": "const { t } = useTranslation('common');\n\n<h1>{t('welcome')}</h1>"
-      },
-      {
-        "title": "5. Maak Gebruik van Cookie Persistentie",
-        "description": "Taalvoorkeuren van gebruikers worden automatisch opgeslagen en hersteld.",
-        "code": "// Automatisch opgeslagen via cookies\n// Geen extra setup vereist!"
-      },
-      {
-        "title": "6. Synchroniseer met Backend (Optioneel)",
-        "description": "Werk taalvoorkeuren van gebruikers bij op je backend.",
-        "code": "import { updateUserLanguagePreference } from '@asafarim/shared-i18n';\n\nawait updateUserLanguagePreference('nl');"
-      }
-    ],
-    "tips": {
-      "title": "Pro Tips",
-      "items": [
-        "Gebruik naamruimten om vertalingen per functie in te delen",
-        "Maak gebruik van de Trans-component voor complexe vertalingen met variabelen",
-        "Stel VITE_IDENTITY_API_URL in voor backend-synchronisatie",
-        "Controleer browsertaldetectie met getInitialLanguage()",
-        "Combineer met design tokens voor consistent thema's in alle talen"
-      ]
-    }
-  },
-  "status": {
-    "heading": "Live status",
-    "cookie": "Cookie",
-    "backend": "Backend",
-    "simulate": "Backend synchronisatie simuleren",
-    "resultOk": "Backend synchronisatie geslaagd",
-    "resultFail": "Backend synchronisatie mislukt"
-  }
-}
+{
+  "title": "Shared i18n demo",
+  "subtitle": "Een lichtgewicht React i18next wrapper met cookie persistentie.",
+  "cta": "Taal wisselen",
+  "overview": {
+    "heading": "Overzicht",
+    "description": "@asafarim/shared-i18n is een production-grade internationalisatie (i18n) pakket voor React-applicaties.",
+    "features": {
+      "title": "Belangrijkste Functies",
+      "items": [
+        "Ondersteuning voor meerdere talen met cookie persistentie",
+        "Ingebouwde taaldetectie en fallback",
+        "TypeScript-ondersteuning met volledige type veiligheid",
+        "Vooraf geconfigureerde common en identity-portal naamruimten",
+        "Naadloze integratie met react-i18next",
+        "Synchronisatie van taalvoorkeur met backend",
+        "SSR-veilige hulpprogramma's voor server-side rendering"
+      ]
+    },
+    "useCases": {
+      "title": "Ideaal Voor",
+      "items": [
+        "Globale applicaties die ondersteuning voor meerdere talen vereisen",
+        "Enterprise-platforms met taalvoorkeuren van gebruikers",
+        "Identiteits- en verificatiesystemen",
+        "Content management systemen met lokalisatie",
+        "SaaS-applicaties die internationale gebruikers bedienen"
+      ]
+    }
+  },
+  "getStarted": {
+    "heading": "Aan de Slag",
+    "intro": "Leer hoe je @asafarim/shared-i18n in minuten in je React-applicatie integreert.",
+    "steps": [
+      {
+        "title": "1. Installeer het Pakket",
+        "description": "Voeg het pakket toe aan je projectafhankelijkheden.",
+        "code": "pnpm add @asafarim/shared-i18n"
+      },
+      {
+        "title": "2. Initialiseer i18n in Je App",
+        "description": "Roep initI18n aan bij het opstarten van de applicatie om taalinstellingen te configureren.",
+        "code": "import { initI18n } from '@asafarim/shared-i18n';\n\ninitI18n({\n  defaultNS: 'common',\n  ns: ['common', 'identityPortal'],\n  resources: { /* je vertalingen */ }\n});"
+      },
+      {
+        "title": "3. Gebruik de useLanguage Hook",
+        "description": "Krijg toegang tot taalwisseling en huidige taaltoestand in je componenten.",
+        "code": "const { changeLanguage, isChanging } = useLanguage();\n\n<button onClick={() => changeLanguage('en')}>\n  Naar Engels\n</button>"
+      },
+      {
+        "title": "4. Vertaal met useTranslation",
+        "description": "Gebruik de useTranslation hook om toegang te krijgen tot vertaalde strings.",
+        "code": "const { t } = useTranslation('common');\n\n<h1>{t('welcome')}</h1>"
+      },
+      {
+        "title": "5. Maak Gebruik van Cookie Persistentie",
+        "description": "Taalvoorkeuren van gebruikers worden automatisch opgeslagen en hersteld.",
+        "code": "// Automatisch opgeslagen via cookies\n// Geen extra setup vereist!"
+      },
+      {
+        "title": "6. Synchroniseer met Backend (Optioneel)",
+        "description": "Werk taalvoorkeuren van gebruikers bij op je backend.",
+        "code": "import { updateUserLanguagePreference } from '@asafarim/shared-i18n';\n\nawait updateUserLanguagePreference('nl');"
+      }
+    ],
+    "tips": {
+      "title": "Pro Tips",
+      "items": [
+        "Gebruik naamruimten om vertalingen per functie in te delen",
+        "Maak gebruik van de Trans-component voor complexe vertalingen met variabelen",
+        "Stel VITE_IDENTITY_API_URL in voor backend-synchronisatie",
+        "Controleer browsertaldetectie met getInitialLanguage()",
+        "Combineer met design tokens voor consistent thema's in alle talen"
+      ]
+    }
+  },
+  "status": {
+    "heading": "Live status",
+    "cookie": "Cookie",
+    "backend": "Backend",
+    "simulate": "Backend synchronisatie simuleren",
+    "resultOk": "Backend synchronisatie geslaagd",
+    "resultFail": "Backend synchronisatie mislukt"
+  }
+}

package/demo/src/main.tsx

@@ -1,24 +1,29 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import { initI18n } from '@asafarim/shared-i18n'
-import App from './App'
-import './index.css'
-import enDemo from './locales/en/demo.json'
-import nlDemo from './locales/nl/demo.json'
-import frDemo from './locales/fr/demo.json'
-
-initI18n({
-  defaultNS: 'common',
-  ns: ['common', 'demo'],
-  resources: {
-    en: { demo: enDemo },
-    nl: { demo: nlDemo },
-    fr: { demo: frDemo }
-  }
-})
-
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-)
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { initI18n } from '@asafarim/shared-i18n'
+import '@asafarim/country-language-selector/styles.css'
+import App from './App'
+import './index.css'
+import enDemo from './locales/en/demo.json'
+import nlDemo from './locales/nl/demo.json'
+import frDemo from './locales/fr/demo.json'
+import itDemo from './locales/it/demo.json'
+import deDemo from './locales/de/demo.json'
+
+initI18n({
+  defaultNS: 'common',
+  ns: ['common', 'demo'],
+  resources: {
+    en: { demo: enDemo },
+    nl: { demo: nlDemo },
+    fr: { demo: frDemo },
+    it: { demo: itDemo },
+    de: { demo: deDemo }
+  }
+})
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

package/demo/tsconfig.json

@@ -1,18 +1,18 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-    "strict": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "noEmit": true,
-    "jsx": "react-jsx"
-  },
-  "include": ["src", "../src/types", "./vite-env.d.ts"],
-  "references": [{ "path": "./tsconfig.node.json" }, { "path": "../tsconfig.json" }]
-}
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "strict": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src", "../src/types", "./vite-env.d.ts"],
+  "references": [{ "path": "./tsconfig.node.json" }, { "path": "../tsconfig.json" }]
+}

package/demo/tsconfig.node.json

@@ -1,10 +1,10 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true
-  },
-  "include": ["vite.config.ts"]
-}
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/demo/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/app.tsx","./src/main.tsx","./src/components/getstartedsection.tsx","./src/components/keytable.tsx","./src/components/languagebar.tsx","./src/components/languageswitcherdemo.tsx","./src/components/overviewsection.tsx","./src/components/panel.tsx","./src/components/statuscard.tsx","../src/types/css.d.ts","../vite-env.d.ts"],"version":"5.8.3"}
+{"root":["./src/app.tsx","./src/main.tsx","./src/components/countrylanguagedemo.tsx","./src/components/getstartedsection.tsx","./src/components/keytable.tsx","./src/components/languagebar.tsx","./src/components/languageswitcherdemo.tsx","./src/components/logo.tsx","./src/components/overviewsection.tsx","./src/components/panel.tsx","./src/components/statuscard.tsx","../src/types/css.d.ts","./vite-env.d.ts"],"version":"5.8.3"}

package/demo/vite-env.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="vite/client" />
-
-declare module 'vite/client' {
-  interface ImportMetaEnv {
-    readonly BASE_URL: string
-    readonly VITE_IDENTITY_API_URL?: string
-  }
+/// <reference types="vite/client" />
+
+declare module 'vite/client' {
+  interface ImportMetaEnv {
+    readonly BASE_URL: string
+    readonly VITE_IDENTITY_API_URL?: string
+  }
 }

package/demo/vite.config.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vite").UserConfig;
-export default _default;
+declare const _default: import("vite").UserConfig;
+export default _default;

package/demo/vite.config.js

@@ -1,10 +1,10 @@
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-export default defineConfig({
-    plugins: [react()],
-    base: process.env.BASE_PATH || '/shared-i18n/',
-    server: {
-        port: 5173,
-        open: true
-    }
-});
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+export default defineConfig({
+    plugins: [react()],
+    base: process.env.BASE_PATH || '/shared-i18n/',
+    server: {
+        port: 5173,
+        open: true
+    }
+});