@asafarim/shared-i18n 0.8.1 → 0.9.0

package/demo/src/App.tsx

@@ -1,129 +1,178 @@
-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>
-  )
-}
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useTranslation } from '@asafarim/shared-i18n'
+import type { Locale } from '@asafarim/shared-i18n'
+import LanguageBar from './components/LanguageBar'
+import OverviewSection from './components/OverviewSection'
+import GetStartedSection from './components/GetStartedSection'
+import LanguageSwitchersPage from './components/LanguageSwitchersPage'
+import CountryLanguageSelectorsPage from './components/CountryLanguageSelectorsPage'
+import RoutingLabPage from './components/RoutingLabPage'
+import {
+  buildLocalizedPath,
+  parsePathname,
+  localeToSlug,
+} from './i18n/localeRouting'
+import type { DemoPage } from './i18n/localeRouting'
+
+interface RouteState {
+  locale: Locale
+  page: DemoPage
+}
+
+function readRouteFromLocation(): RouteState & { needsRedirect: boolean } {
+  return parsePathname(window.location.pathname)
+}
+
+export default function App() {
+  const { i18n, t } = useTranslation('demo')
+
+  const [route, setRoute] = useState<RouteState>(() => {
+    const parsed = readRouteFromLocation()
+    return { locale: parsed.locale, page: parsed.page }
+  })
+
+  // Normalize URL on first paint and sync i18n language.
+  useEffect(() => {
+    const parsed = readRouteFromLocation()
+    const target = buildLocalizedPath(parsed.locale, parsed.page)
+    if (parsed.needsRedirect || window.location.pathname !== target) {
+      window.history.replaceState({}, '', target)
+    }
+    if (i18n?.changeLanguage && i18n.language !== parsed.locale.language) {
+      i18n.changeLanguage(parsed.locale.language)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  // Keep i18n language in sync with route locale.
+  useEffect(() => {
+    if (i18n?.changeLanguage && i18n.language !== route.locale.language) {
+      i18n.changeLanguage(route.locale.language)
+    }
+  }, [route.locale.language, i18n])
+
+  // Browser back/forward.
+  useEffect(() => {
+    const onPop = () => {
+      const parsed = readRouteFromLocation()
+      setRoute({ locale: parsed.locale, page: parsed.page })
+    }
+    window.addEventListener('popstate', onPop)
+    return () => window.removeEventListener('popstate', onPop)
+  }, [])
+
+  const navigate = useCallback((next: RouteState, replace = false) => {
+    const target = buildLocalizedPath(next.locale, next.page)
+    if (window.location.pathname !== target) {
+      if (replace) window.history.replaceState({}, '', target)
+      else window.history.pushState({}, '', target)
+    }
+    setRoute(next)
+  }, [])
+
+  const handleLocaleChange = useCallback((locale: Locale) => {
+    navigate({ locale, page: route.page })
+  }, [navigate, route.page])
+
+  const handlePageChange = useCallback((page: DemoPage) => {
+    navigate({ locale: route.locale, page })
+  }, [navigate, route.locale])
+
+  const slug = useMemo(() => localeToSlug(route.locale), [route.locale])
+  const path = useMemo(() => buildLocalizedPath(route.locale, route.page), [route.locale, route.page])
+
+  return (
+    <div className="app-shell">
+      <LanguageBar
+        locale={route.locale}
+        onLocaleChange={handleLocaleChange}
+        currentPage={route.page}
+        onPageChange={handlePageChange}
+      />
+
+      <main className="app-main" id="main">
+        {route.page === 'overview' && (
+          <>
+            <section className="hero">
+              <div className="hero__content">
+                <span className="hero__eyebrow">@asafarim/shared-i18n</span>
+                <h1 className="hero__title">{t('title')}</h1>
+                <p className="hero__subtitle">{t('subtitle')}</p>
+                <div className="hero__cta">
+                  <button className="btn btn--primary" onClick={() => handlePageChange('get-started')}>
+                    {t('hero.getStarted')}
+                  </button>
+                  <button className="btn btn--ghost" onClick={() => handlePageChange('country-language-selectors')}>
+                    {t('hero.trySelector')}
+                  </button>
+                </div>
+              </div>
+
+              <aside className="url-card" aria-label={t('hero.liveRoutePreview')}>
+                <div className="url-card__label">{t('hero.liveRoutePreview')}</div>
+                <code className="url-card__url">
+                  alisafari-it.github.io<span className="url-card__path">{path}</span>
+                </code>
+                <dl className="url-card__grid">
+                  <div><dt>Country</dt><dd>{route.locale.country}</dd></div>
+                  <div><dt>Language</dt><dd>{route.locale.language.toUpperCase()}</dd></div>
+                  <div><dt>Slug</dt><dd>{slug}</dd></div>
+                  <div><dt>i18n</dt><dd>{i18n.language}</dd></div>
+                </dl>
+              </aside>
+            </section>
+
+            <OverviewSection />
+
+            <section className="contract">
+              <header className="section-head">
+                <h2>{t('routingContract.heading')}</h2>
+                <p>{t('routingContract.description')}</p>
+              </header>
+              <ul className="contract__list">
+                <li><code>/shared-i18n/</code> {t('routingContract.items.0', { base: '/shared-i18n/', target: '/shared-i18n/be-en/overview' })}</li>
+                <li><code>/shared-i18n/&lt;country&gt;-&lt;lang&gt;/&lt;page&gt;</code> {t('routingContract.items.1', { pattern: '/shared-i18n/<country>-<lang>/<page>' })}</li>
+                <li><strong>CountryLanguageSelector</strong> {t('routingContract.items.2')}</li>
+                <li><strong>LanguageSwitcher</strong> {t('routingContract.items.3')}</li>
+                <li>{t('routingContract.items.4', { defaultSlug: 'be-en', defaultPage: 'overview' })}</li>
+              </ul>
+            </section>
+          </>
+        )}
+
+        {route.page === 'get-started' && (
+          <section className="page-section">
+            <GetStartedSection />
+          </section>
+        )}
+
+        {route.page === 'language-switchers' && (
+          <section className="page-section">
+            <LanguageSwitchersPage locale={route.locale} onLocaleChange={handleLocaleChange} />
+          </section>
+        )}
+
+        {route.page === 'country-language-selectors' && (
+          <section className="page-section">
+            <CountryLanguageSelectorsPage locale={route.locale} onLocaleChange={handleLocaleChange} />
+          </section>
+        )}
+
+        {route.page === 'routing-lab' && (
+          <section className="page-section">
+            <RoutingLabPage locale={route.locale} onLocaleChange={handleLocaleChange} />
+          </section>
+        )}
+      </main>
+
+      <footer className="app-footer">
+        <span>
+          {t('footer.activeRoute')}: <code>{path}</code>
+        </span>
+        <span>
+          {t('footer.builtWith')} <a href="https://github.com/AliSafari-IT/shared-i18n" target="_blank" rel="noopener noreferrer">@asafarim/shared-i18n</a>
+        </span>
+      </footer>
+    </div>
+  )
+}

package/demo/src/components/CountryLanguageSelectorsPage.tsx

@@ -0,0 +1,240 @@
+import { CountryLanguageSelector, useTranslation } from '@asafarim/shared-i18n'
+import type { Locale } from '@asafarim/shared-i18n'
+import { countries } from '../data/countries'
+import { localeToSlug, buildLocalizedPath } from '../i18n/localeRouting'
+
+interface Props {
+  locale: Locale
+  onLocaleChange: (locale: Locale) => void
+}
+
+interface DemoItemProps {
+  title: string
+  description: string
+  code: string
+  children: React.ReactNode
+  previewLabel: string
+  codeLabel: string
+}
+
+function DemoItem({ title, description, code, children, previewLabel, codeLabel }: DemoItemProps) {
+  return (
+    <article className="lab-item">
+      <header className="lab-item__head">
+        <h3 className="lab-item__title">{title}</h3>
+        <p className="lab-item__desc">{description}</p>
+      </header>
+      <div className="lab-item__body">
+        <div className="lab-item__preview">
+          <span className="lab-item__caption">{previewLabel}</span>
+          {children}
+        </div>
+        <div className="lab-item__code">
+          <span className="lab-item__caption">{codeLabel}</span>
+          <pre><code>{code}</code></pre>
+        </div>
+      </div>
+    </article>
+  )
+}
+
+export default function CountryLanguageSelectorsPage({ locale, onLocaleChange }: Props) {
+  const { t } = useTranslation('demo')
+  const slug = localeToSlug(locale)
+  const url = buildLocalizedPath(locale, 'country-language-selectors')
+
+  return (
+    <div className="lab">
+      <header className="section-head">
+        <h2>{t('countryLanguageSelectors.heading')}</h2>
+        <p>{t('countryLanguageSelectors.intro')}</p>
+      </header>
+
+      <div className="lab__status surface">
+        <div>
+          <span className="lab__caption">{t('countryLanguageSelectors.country')}</span>
+          <strong className="lab__value">{locale.country}</strong>
+        </div>
+        <div>
+          <span className="lab__caption">{t('countryLanguageSelectors.language')}</span>
+          <strong className="lab__value">{locale.language.toUpperCase()}</strong>
+        </div>
+        <div>
+          <span className="lab__caption">{t('countryLanguageSelectors.slug')}</span>
+          <code className="lab__value">{slug}</code>
+        </div>
+        <div>
+          <span className="lab__caption">{t('countryLanguageSelectors.url')}</span>
+          <code className="lab__value">{url}</code>
+        </div>
+      </div>
+
+      <div className="lab__grid">
+        <DemoItem
+          title={t('countryLanguageSelectors.variants.0.title')}
+          description={t('countryLanguageSelectors.variants.0.desc')}
+          previewLabel={t('countryLanguageSelectors.preview')}
+          codeLabel={t('countryLanguageSelectors.code')}
+          code={`import { CountryLanguageSelector } from '@asafarim/shared-i18n'
+
+<CountryLanguageSelector
+  countries={countries}
+  value={locale}
+  onChange={onLocaleChange}
+  triggerVariant="compact"
+  flagMode="image"
+  ariaLabel="Select locale (image flags)"
+/>`}
+        >
+          <CountryLanguageSelector
+            countries={countries}
+            value={locale}
+            onChange={onLocaleChange}
+            triggerVariant="compact"
+            flagMode="image"
+            ariaLabel="Lab — compact, image flags"
+          />
+        </DemoItem>
+
+        <DemoItem
+          title={t('countryLanguageSelectors.variants.1.title')}
+          description={t('countryLanguageSelectors.variants.1.desc')}
+          previewLabel={t('countryLanguageSelectors.preview')}
+          codeLabel={t('countryLanguageSelectors.code')}
+          code={`<CountryLanguageSelector
+  countries={countries}
+  value={locale}
+  onChange={onLocaleChange}
+  triggerVariant="compact"
+  flagMode="image"
+  disabled={true}
+/>`}
+        >
+          <CountryLanguageSelector
+            countries={countries}
+            value={locale}
+            onChange={onLocaleChange}
+            triggerVariant="compact"
+            flagMode="image"
+            disabled={true}
+            ariaLabel="Lab — disabled"
+          />
+        </DemoItem>
+
+        <DemoItem
+          title={t('countryLanguageSelectors.variants.2.title')}
+          description={t('countryLanguageSelectors.variants.2.desc')}
+          previewLabel={t('countryLanguageSelectors.preview')}
+          codeLabel={t('countryLanguageSelectors.code')}
+          code={`<CountryLanguageSelector
+  countries={countries}
+  value={locale}
+  onChange={onLocaleChange}
+  triggerVariant="full"
+  flagMode="image"
+/>`}
+        >
+          <CountryLanguageSelector
+            countries={countries}
+            value={locale}
+            onChange={onLocaleChange}
+            triggerVariant="full"
+            flagMode="image"
+            ariaLabel="Lab — full names, image flags"
+          />
+        </DemoItem>
+
+        <DemoItem
+          title={t('countryLanguageSelectors.variants.3.title')}
+          description={t('countryLanguageSelectors.variants.3.desc')}
+          previewLabel={t('countryLanguageSelectors.preview')}
+          codeLabel={t('countryLanguageSelectors.code')}
+          code={`<CountryLanguageSelector
+  countries={countries}
+  value={locale}
+  onChange={onLocaleChange}
+  triggerVariant="flag"
+  flagMode="image"
+/>`}
+        >
+          <CountryLanguageSelector
+            countries={countries}
+            value={locale}
+            onChange={onLocaleChange}
+            triggerVariant="flag"
+            flagMode="image"
+            ariaLabel="Lab — flag only"
+          />
+        </DemoItem>
+
+        <DemoItem
+          title={t('countryLanguageSelectors.variants.4.title')}
+          description={t('countryLanguageSelectors.variants.4.desc')}
+          previewLabel={t('countryLanguageSelectors.preview')}
+          codeLabel={t('countryLanguageSelectors.code')}
+          code={`<CountryLanguageSelector
+  countries={countries}
+  value={locale}
+  onChange={onLocaleChange}
+  renderTrigger={({ country, language, open }) => (
+    <button type="button" className="custom-trigger" data-open={open}>
+      {open ? 'Close' : 'Open'}{' '}
+      <img
+        src={\`https://flagcdn.com/w20/\${country.code.toLowerCase()}.png\`}
+        alt=""
+        width="20"
+        style={{ borderRadius: 2, verticalAlign: 'middle' }}
+      />{' '}
+      {country.name} · {language.code.toUpperCase()}
+    </button>
+  )}
+/>`}
+        >
+          <CountryLanguageSelector
+            countries={countries}
+            value={locale}
+            onChange={onLocaleChange}
+            renderTrigger={({ country, language, open }) => (
+              <button type="button" className="custom-trigger" data-open={open}>
+                {open ? t('countryLanguageSelectors.close') : t('countryLanguageSelectors.open')}{' '}
+                <img
+                  src={`https://flagcdn.com/w20/${country.code.toLowerCase()}.png`}
+                  alt=""
+                  width="20"
+                  style={{ borderRadius: 2, verticalAlign: 'middle' }}
+                />{' '}
+                {country.name} · {language.code.toUpperCase()}
+              </button>
+            )}
+            ariaLabel="Lab — custom trigger"
+          />
+        </DemoItem>
+
+        <DemoItem
+          title={t('countryLanguageSelectors.variants.5.title')}
+          description={t('countryLanguageSelectors.variants.5.desc')}
+          previewLabel={t('countryLanguageSelectors.preview')}
+          codeLabel={t('countryLanguageSelectors.code')}
+          code={`<CountryLanguageSelector
+  countries={countries}
+  value={locale}
+  onChange={onLocaleChange}
+  triggerVariant="compact"
+  flagMode="image"
+  align="start"
+/>`}
+        >
+          <CountryLanguageSelector
+            countries={countries}
+            value={locale}
+            onChange={onLocaleChange}
+            triggerVariant="compact"
+            flagMode="image"
+            align="start"
+            ariaLabel="Lab — align start"
+          />
+        </DemoItem>
+      </div>
+    </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>
+  )
+}