@asafarim/shared-i18n 0.7.0 → 0.8.1

package/demo/public/logo.svg

@@ -1,24 +1,24 @@
-<svg width="180" height="180" viewBox="0 0 180 180" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" stop-color="#3A5AFE" />
-      <stop offset="100%" stop-color="#14B8A6" />
-    </linearGradient>
-    <linearGradient id="accent" x1="0%" y1="0%" x2="0%" y2="100%">
-      <stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.9" />
-      <stop offset="100%" stop-color="#FFFFFF" stop-opacity="0.2" />
-    </linearGradient>
-    <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="sRGB">
-      <feDropShadow dx="0" dy="8" stdDeviation="12" flood-color="#0B1220" flood-opacity="0.28" />
-    </filter>
-  </defs>
-  <rect width="180" height="180" rx="32" fill="url(#bg)" filter="url(#shadow)" />
-  <g transform="translate(45 45)">
-    <path d="M45 0C20.147 0 0 20.147 0 45C0 69.853 20.147 90 45 90C69.853 90 90 69.853 90 45C90 20.147 69.853 0 45 0ZM45 72C29.088 72 15.75 58.662 15.75 42.75C15.75 26.838 29.088 13.5 45 13.5C60.912 13.5 74.25 26.838 74.25 42.75C74.25 58.662 60.912 72 45 72Z" fill="white" opacity="0.2" />
-    <path d="M24 27H66C70.971 27 75 31.029 75 36V54C75 58.971 70.971 63 66 63H24C19.029 63 15 58.971 15 54V36C15 31.029 19.029 27 24 27Z" fill="url(#accent)" />
-    <path d="M36 54V45C36 40.029 40.029 36 45 36C49.971 36 54 40.029 54 45V54" stroke="#0B1220" stroke-width="4" stroke-linecap="round" />
-    <circle cx="45" cy="21" r="6" fill="white" />
-    <path d="M33 69H57" stroke="white" stroke-width="4" stroke-linecap="round" opacity="0.7" />
-    <path d="M27 15H63" stroke="white" stroke-width="4" stroke-linecap="round" opacity="0.4" />
-  </g>
-</svg>
+<svg width="180" height="180" viewBox="0 0 180 180" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#3A5AFE" />
+      <stop offset="100%" stop-color="#14B8A6" />
+    </linearGradient>
+    <linearGradient id="accent" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.9" />
+      <stop offset="100%" stop-color="#FFFFFF" stop-opacity="0.2" />
+    </linearGradient>
+    <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="sRGB">
+      <feDropShadow dx="0" dy="8" stdDeviation="12" flood-color="#0B1220" flood-opacity="0.28" />
+    </filter>
+  </defs>
+  <rect width="180" height="180" rx="32" fill="url(#bg)" filter="url(#shadow)" />
+  <g transform="translate(45 45)">
+    <path d="M45 0C20.147 0 0 20.147 0 45C0 69.853 20.147 90 45 90C69.853 90 90 69.853 90 45C90 20.147 69.853 0 45 0ZM45 72C29.088 72 15.75 58.662 15.75 42.75C15.75 26.838 29.088 13.5 45 13.5C60.912 13.5 74.25 26.838 74.25 42.75C74.25 58.662 60.912 72 45 72Z" fill="white" opacity="0.2" />
+    <path d="M24 27H66C70.971 27 75 31.029 75 36V54C75 58.971 70.971 63 66 63H24C19.029 63 15 58.971 15 54V36C15 31.029 19.029 27 24 27Z" fill="url(#accent)" />
+    <path d="M36 54V45C36 40.029 40.029 36 45 36C49.971 36 54 40.029 54 45V54" stroke="#0B1220" stroke-width="4" stroke-linecap="round" />
+    <circle cx="45" cy="21" r="6" fill="white" />
+    <path d="M33 69H57" stroke="white" stroke-width="4" stroke-linecap="round" opacity="0.7" />
+    <path d="M27 15H63" stroke="white" stroke-width="4" stroke-linecap="round" opacity="0.4" />
+  </g>
+</svg>

package/demo/src/App.tsx

@@ -1,116 +1,129 @@
-import { useState } from 'react'
-import { useTranslation } from '@asafarim/shared-i18n'
-import LanguageBar from './components/LanguageBar'
-import Panel from './components/Panel'
-import KeyTable from './components/KeyTable'
-import StatusCard from './components/StatusCard'
-import OverviewSection from './components/OverviewSection'
-import GetStartedSection from './components/GetStartedSection'
-import LanguageSwitcherDemo from './components/LanguageSwitcherDemo'
-import Logo from './components/Logo'
-
-type TabType = 'overview' | 'getStarted' | 'demo'
-
-
-
-export default function App() {
-  const { t } = useTranslation('demo')
-  const [activeTab, setActiveTab] = useState<TabType>('overview')
-
-  return (
-    <div className="app-container">
-      <header className="app-header">
-        <Logo />
-        <div className="header-content">
-          <h1>{t('title')}</h1>
-          <p className="subtitle">{t('subtitle')}</p>
-        </div>
-        <LanguageBar />
-      </header>
-
-      <main className="app-main">
-        <div className="nav-tabs">
-          <button
-            className={`nav-tab ${activeTab === 'overview' ? 'active' : ''}`}
-            onClick={() => setActiveTab('overview')}
-          >
-            Overview
-          </button>
-          <button
-            className={`nav-tab ${activeTab === 'getStarted' ? 'active' : ''}`}
-            onClick={() => setActiveTab('getStarted')}
-          >
-            Get Started
-          </button>
-          <button
-            className={`nav-tab ${activeTab === 'demo' ? 'active' : ''}`}
-            onClick={() => setActiveTab('demo')}
-          >
-            Demo
-          </button>
-        </div>
-
-        {activeTab === 'overview' && <OverviewSection />}
-
-        {activeTab === 'getStarted' && <GetStartedSection />}
-
-        {activeTab === 'demo' && (
-          <>
-            <Panel title="LanguageSwitcher Component">
-              <LanguageSwitcherDemo />
-            </Panel>
-
-            <Panel title="Translations">
-              <div className="panel-grid">
-                <div>
-                  <h3>Common Namespace</h3>
-                  <KeyTable
-                    namespace="common"
-                    keys={['welcome', 'language', 'apps.appName.identity', 'apps.description.identity']}
-                  />
-                </div>
-                <div>
-                  <h3>Identity Portal Namespace</h3>
-                  <KeyTable
-                    namespace="identityPortal"
-                    keys={[
-                      'navbar.admin-area',
-                      'navbar.auth.signIn',
-                      'navbar.auth.signOut',
-                      'dashboard.title',
-                      'dashboard.user-management.title'
-                    ]}
-                  />
-                </div>
-              </div>
-            </Panel>
-
-            <Panel title="Interpolation & Trans Component">
-              <InterpolationDemo />
-            </Panel>
-
-            <StatusCard />
-          </>
-        )}
-      </main>
-    </div>
-  )
-}
-
-function InterpolationDemo() {
-  const { t, i18n } = useTranslation('identityPortal')
-
-  return (
-    <div className="interpolation-demo">
-      <div className="demo-item">
-        <h4>navbar.auth.welcome with interpolation</h4>
-        <p className="demo-output">
-          {t('navbar.auth.welcome', { userName: 'Ali' })}
-        </p>
-      </div>
-      <div className="demo-item">
-        <h4>Current language: {i18n.language}</h4>
-      </div>
-    </div>
-  )
-}
+import { useState } from 'react'
+import { useTranslation } from '@asafarim/shared-i18n'
+import LanguageBar from './components/LanguageBar'
+import Panel from './components/Panel'
+import KeyTable from './components/KeyTable'
+import StatusCard from './components/StatusCard'
+import OverviewSection from './components/OverviewSection'
+import GetStartedSection from './components/GetStartedSection'
+import LanguageSwitcherDemo from './components/LanguageSwitcherDemo'
+import CountryLanguageDemo from './components/CountryLanguageDemo'
+import Logo from './components/Logo'
+
+type TabType = 'overview' | 'getStarted' | 'demo' | 'countryDemo'
+
+
+
+export default function App() {
+  const { t } = useTranslation('demo')
+  const [activeTab, setActiveTab] = useState<TabType>('overview')
+
+  return (
+    <div className="app-container">
+      <header className="app-header">
+        <Logo />
+        <div className="header-content">
+          <h1>{t('title')}</h1>
+          <p className="subtitle">{t('subtitle')}</p>
+        </div>
+        <LanguageBar />
+      </header>
+
+      <main className="app-main">
+        <div className="nav-tabs">
+          <button
+            className={`nav-tab ${activeTab === 'overview' ? 'active' : ''}`}
+            onClick={() => setActiveTab('overview')}
+          >
+            Overview
+          </button>
+          <button
+            className={`nav-tab ${activeTab === 'getStarted' ? 'active' : ''}`}
+            onClick={() => setActiveTab('getStarted')}
+          >
+            Get Started
+          </button>
+          <button
+            className={`nav-tab ${activeTab === 'demo' ? 'active' : ''}`}
+            onClick={() => setActiveTab('demo')}
+          >
+            Demo
+          </button>
+          <button
+            className={`nav-tab ${activeTab === 'countryDemo' ? 'active' : ''}`}
+            onClick={() => setActiveTab('countryDemo')}
+          >
+            Country Selector
+          </button>
+        </div>
+
+        {activeTab === 'overview' && <OverviewSection />}
+
+        {activeTab === 'getStarted' && <GetStartedSection />}
+
+        {activeTab === 'demo' && (
+          <>
+            <Panel title="LanguageSwitcher Component">
+              <LanguageSwitcherDemo />
+            </Panel>
+
+            <Panel title="Translations">
+              <div className="panel-grid">
+                <div>
+                  <h3>Common Namespace</h3>
+                  <KeyTable
+                    namespace="common"
+                    keys={['welcome', 'language', 'apps.appName.identity', 'apps.description.identity']}
+                  />
+                </div>
+                <div>
+                  <h3>Identity Portal Namespace</h3>
+                  <KeyTable
+                    namespace="identityPortal"
+                    keys={[
+                      'navbar.admin-area',
+                      'navbar.auth.signIn',
+                      'navbar.auth.signOut',
+                      'dashboard.title',
+                      'dashboard.user-management.title'
+                    ]}
+                  />
+                </div>
+              </div>
+            </Panel>
+
+            <Panel title="Interpolation & Trans Component">
+              <InterpolationDemo />
+            </Panel>
+
+            <StatusCard />
+          </>
+        )}
+
+        {activeTab === 'countryDemo' && (
+          <Panel title="Country / Language Selector Examples">
+            <CountryLanguageDemo />
+          </Panel>
+        )}
+      </main>
+    </div>
+  )
+}
+
+function InterpolationDemo() {
+  const { t, i18n } = useTranslation('identityPortal')
+
+  return (
+    <div className="interpolation-demo">
+      <div className="demo-item">
+        <h4>navbar.auth.welcome with interpolation</h4>
+        <p className="demo-output">
+          {t('navbar.auth.welcome', { userName: 'Ali' })}
+        </p>
+      </div>
+      <div className="demo-item">
+        <h4>Current language: {i18n.language}</h4>
+      </div>
+    </div>
+  )
+}

package/demo/src/components/CountryLanguageDemo.tsx

@@ -0,0 +1,140 @@
+import { useState } from 'react'
+import type { ReactNode } from 'react'
+import { CountryLanguageSelector } from '@asafarim/country-language-selector'
+import styles from './LanguageSwitcherDemo.module.css'
+
+interface DemoItemProps {
+  title: string
+  description: string
+  code: string
+  children: ReactNode
+}
+
+function DemoItem({ title, description, code, children }: DemoItemProps) {
+  return (
+    <div className={styles.demoItem}>
+      <div className={styles.demoHeader}>
+        <h4 className={styles.demoTitle}>{title}</h4>
+        <p className={styles.demoDescription}>{description}</p>
+      </div>
+      <div className={styles.demoContent}>
+        <div className={styles.demoPreview}>
+          <div className={styles.previewLabel}>Preview</div>
+          {children}
+        </div>
+        <div className={styles.demoCode}>
+          <div className={styles.codeLabel}>Code</div>
+          <pre className={styles.codeBlock}>{code}</pre>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const countries = [
+  {
+    code: 'BE',
+    name: 'Belgium',
+    nativeName: 'België',
+    flag: '🇧🇪',
+    languages: [
+      { code: 'nl', label: 'Dutch', nativeLabel: 'Nederlands' },
+      { code: 'fr', label: 'French', nativeLabel: 'Français' },
+      { code: 'de', label: 'German', nativeLabel: 'Deutsch' }
+    ]
+  },
+  {
+    code: 'CH',
+    name: 'Switzerland',
+    nativeName: 'Schweiz',
+    flag: '🇨🇭',
+    languages: [
+      { code: 'de', label: 'German', nativeLabel: 'Deutsch' },
+      { code: 'fr', label: 'French', nativeLabel: 'Français' },
+      { code: 'it', label: 'Italian', nativeLabel: 'Italiano' },
+      { code: 'rm', label: 'Romansh', nativeLabel: 'Rumantsch' }
+    ]
+  },
+  {
+    code: 'CA',
+    name: 'Canada',
+    nativeName: 'Canada',
+    flag: '🇨🇦',
+    languages: [
+      { code: 'en', label: 'English' },
+      { code: 'fr', label: 'French', nativeLabel: 'Français' }
+    ]
+  }
+]
+
+export default function CountryLanguageDemo() {
+  const [selectedLocale, setSelectedLocale] = useState({ country: 'BE', language: 'nl' })
+  const [customLocale, setCustomLocale] = useState({ country: 'CH', language: 'it' })
+
+  return (
+    <div className={styles.container}>
+      <DemoItem
+        title="Default Selector"
+        description="A standard country-language selector with compact trigger mode and persistence."
+        code={`<CountryLanguageSelector
+  countries={countries}
+  defaultValue={{ country: 'BE', language: 'nl' }}
+  persistKey="country-locale"
+/>`}
+      >
+        <CountryLanguageSelector
+          countries={countries}
+          defaultValue={{ country: 'BE', language: 'nl' }}
+          persistKey="country-locale"
+          onChange={(locale) => setSelectedLocale(locale)}
+        />
+        <p style={{ marginTop: '1rem' }}>
+          Selected locale: <strong>{selectedLocale.country}</strong> / <strong>{selectedLocale.language}</strong>
+        </p>
+      </DemoItem>
+
+      <DemoItem
+        title="Full Trigger Variant"
+        description="Render the current selection using full country and language names."
+        code={`<CountryLanguageSelector
+  countries={countries}
+  defaultValue={{ country: 'CA', language: 'fr' }}
+  triggerVariant="full"
+/>`}
+      >
+        <CountryLanguageSelector
+          countries={countries}
+          defaultValue={{ country: 'CA', language: 'fr' }}
+          triggerVariant="full"
+          onChange={(locale) => setSelectedLocale(locale)}
+        />
+      </DemoItem>
+
+      <DemoItem
+        title="Custom Trigger"
+        description="Use a custom trigger renderer to show selected country and language in your own button style."
+        code={`<CountryLanguageSelector
+  countries={countries}
+  defaultValue={{ country: 'CH', language: 'it' }}
+  renderTrigger={({ country, language, open }) => (
+    <button>{open ? 'Close' : 'Open'} {country.code} · {language.code}</button>
+  )}
+/>`}
+      >
+        <CountryLanguageSelector
+          countries={countries}
+          defaultValue={{ country: 'CH', language: 'it' }}
+          renderTrigger={({ country, language, open }) => (
+            <button type="button" style={{ padding: '0.75rem 1rem', borderRadius: 8, border: '1px solid #ccc', background: open ? '#f0f4ff' : '#fff' }}>
+              {open ? 'Close' : 'Open'} {country.flag} {country.name} · {language.nativeLabel ?? language.label}
+            </button>
+          )}
+          onChange={(locale) => setCustomLocale(locale)}
+        />
+        <p style={{ marginTop: '1rem' }}>
+          Custom trigger locale: <strong>{customLocale.country}</strong> / <strong>{customLocale.language}</strong>
+        </p>
+      </DemoItem>
+    </div>
+  )
+}

package/demo/src/components/GetStartedSection.tsx

@@ -1,56 +1,56 @@
-import { useState } from 'react'
-import { useTranslation } from '@asafarim/shared-i18n'
-
-export default function GetStartedSection() {
-  const { t } = useTranslation('demo')
-  const [expandedStep, setExpandedStep] = useState<number>(0)
-  const getStarted = t('getStarted', { returnObjects: true }) as any
-
-  return (
-    <div className="get-started-section">
-      <div className="gs-header">
-        <h2 className="gs-title">{getStarted.heading}</h2>
-        <p className="gs-intro">{getStarted.intro}</p>
-      </div>
-
-      <div className="steps-container">
-        {getStarted.steps.map((step: any, idx: number) => (
-          <div key={idx} className="step-item">
-            <button
-              className={`step-header ${expandedStep === idx ? 'expanded' : ''}`}
-              onClick={() => setExpandedStep(expandedStep === idx ? -1 : idx)}
-            >
-              <div className="step-number">{idx + 1}</div>
-              <div className="step-info">
-                <h3>{step.title}</h3>
-                <p>{step.description}</p>
-              </div>
-              <div className="step-toggle">
-                {expandedStep === idx ? '−' : '+'}
-              </div>
-            </button>
-            {expandedStep === idx && (
-              <div className="step-content">
-                <pre className="code-block">
-                  <code>{step.code}</code>
-                </pre>
-              </div>
-            )}
-          </div>
-        ))}
-      </div>
-
-      <div className="tips-section">
-        <div className="tips-icon">💡</div>
-        <div className="tips-content">
-          <h3>{getStarted.tips.title}</h3>
-          <ul className="tips-list">
-            {getStarted.tips.items.map((tip: string, idx: number) => (
-              <li key={idx}>{tip}</li>
-            ))}
-          </ul>
-        </div>
-      </div>
-    </div>
-  )
-}
+import { useState } from 'react'
+import { useTranslation } from '@asafarim/shared-i18n'
+
+export default function GetStartedSection() {
+  const { t } = useTranslation('demo')
+  const [expandedStep, setExpandedStep] = useState<number>(0)
+  const getStarted = t('getStarted', { returnObjects: true }) as any
+
+  return (
+    <div className="get-started-section">
+      <div className="gs-header">
+        <h2 className="gs-title">{getStarted.heading}</h2>
+        <p className="gs-intro">{getStarted.intro}</p>
+      </div>
+
+      <div className="steps-container">
+        {getStarted.steps.map((step: any, idx: number) => (
+          <div key={idx} className="step-item">
+            <button
+              className={`step-header ${expandedStep === idx ? 'expanded' : ''}`}
+              onClick={() => setExpandedStep(expandedStep === idx ? -1 : idx)}
+            >
+              <div className="step-number">{idx + 1}</div>
+              <div className="step-info">
+                <h3>{step.title}</h3>
+                <p>{step.description}</p>
+              </div>
+              <div className="step-toggle">
+                {expandedStep === idx ? '−' : '+'}
+              </div>
+            </button>
+            {expandedStep === idx && (
+              <div className="step-content">
+                <pre className="code-block">
+                  <code>{step.code}</code>
+                </pre>
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+
+      <div className="tips-section">
+        <div className="tips-icon">💡</div>
+        <div className="tips-content">
+          <h3>{getStarted.tips.title}</h3>
+          <ul className="tips-list">
+            {getStarted.tips.items.map((tip: string, idx: number) => (
+              <li key={idx}>{tip}</li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </div>
+  )
+}

package/demo/src/components/KeyTable.tsx

@@ -1,29 +1,29 @@
-import { useTranslation } from '@asafarim/shared-i18n'
-
-interface KeyTableProps {
-  namespace: string
-  keys: string[]
-}
-
-export default function KeyTable({ namespace, keys }: KeyTableProps) {
-  const { t } = useTranslation(namespace)
-
-  return (
-    <table className="key-table">
-      <thead>
-        <tr>
-          <th>Key</th>
-          <th>Value</th>
-        </tr>
-      </thead>
-      <tbody>
-        {keys.map((key) => (
-          <tr key={key}>
-            <td>{key}</td>
-            <td>{t(key)}</td>
-          </tr>
-        ))}
-      </tbody>
-    </table>
-  )
-}
+import { useTranslation } from '@asafarim/shared-i18n'
+
+interface KeyTableProps {
+  namespace: string
+  keys: string[]
+}
+
+export default function KeyTable({ namespace, keys }: KeyTableProps) {
+  const { t } = useTranslation(namespace)
+
+  return (
+    <table className="key-table">
+      <thead>
+        <tr>
+          <th>Key</th>
+          <th>Value</th>
+        </tr>
+      </thead>
+      <tbody>
+        {keys.map((key) => (
+          <tr key={key}>
+            <td>{key}</td>
+            <td>{t(key)}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  )
+}