@asafarim/shared-i18n 0.8.0 → 0.9.0

package/demo/src/components/LanguageSwitchersPage.tsx

@@ -0,0 +1,245 @@
+import { useState } from 'react'
+import { LanguageSwitcher, useTranslation } from '@asafarim/shared-i18n'
+import type { Locale } from '@asafarim/shared-i18n'
+import type { SupportedLanguage } from '@asafarim/shared-i18n'
+import { countries } from '../data/countries'
+import { resolveLocaleFromLanguage } from '../i18n/localeAdapter'
+import type { ResolveLocaleResult } from '../i18n/localeAdapter'
+
+interface Props {
+  locale: Locale
+  onLocaleChange: (locale: Locale) => void
+}
+
+interface DemoItemProps {
+  title: string
+  description: string
+  code: string
+  notice?: ResolveLocaleResult | null
+  children: React.ReactNode
+  previewLabel?: string
+  codeLabel?: string
+  note?: string
+}
+
+function DemoItem({ title, description, code, notice, children, previewLabel = 'Preview', codeLabel = 'Code', note }: 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}
+          {notice?.reason === 'fallback-country' && (
+            <p className="notice notice--warn">{notice.message}</p>
+          )}
+          {notice?.reason === 'unsupported' && (
+            <p className="notice notice--err">{notice.message}</p>
+          )}
+        </div>
+        <div className="lab-item__code">
+          <span className="lab-item__caption">{codeLabel}</span>
+          <pre><code>{code}</code></pre>
+        </div>
+      </div>
+      {note && (
+        <p className="lab-item__note">
+          ℹ️ {note}
+        </p>
+      )}
+    </article>
+  )
+}
+
+export default function LanguageSwitchersPage({ locale, onLocaleChange }: Props) {
+  const { t } = useTranslation('demo')
+  const [lastResult, setLastResult] = useState<ResolveLocaleResult | null>(null)
+
+  const makeHandler = () => (lang: SupportedLanguage) => {
+    const result = resolveLocaleFromLanguage(locale, lang, countries)
+    setLastResult(result)
+    if (result.reason !== 'unsupported') onLocaleChange(result.locale)
+  }
+
+  return (
+    <div className="lab">
+      <header className="section-head">
+        <h2>{t('languageSwitchers.heading')}</h2>
+        <p>{t('languageSwitchers.intro')}</p>
+      </header>
+
+      <div className="switcher-distinction surface">
+        <h3>{t('languageSwitchers.distinction.title')}</h3>
+        <p>{t('languageSwitchers.distinction.p1')}</p>
+        <ul className="slug-list">
+          <li><code>be-en</code> — Belgium English</li>
+          <li><code>nl-en</code> — Netherlands English</li>
+          <li><code>lu-en</code> — Luxembourg English</li>
+          <li><code>gb-en</code> — UK English</li>
+        </ul>
+        <p>
+          {t('languageSwitchers.distinction.p2')}{' '}
+          <strong>{t('languageSwitchers.distinction.link')}</strong>
+        </p>
+      </div>
+
+      <div className="comparison-table surface">
+        <h3>{t('languageSwitchers.comparison.title')}</h3>
+        <div className="tbl-wrap">
+          <table>
+            <thead>
+              <tr>
+                <th>{t('languageSwitchers.comparison.capability')}</th>
+                <th>{t('languageSwitchers.comparison.ls')}</th>
+                <th>{t('languageSwitchers.comparison.cls')}</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr><td>{t('languageSwitchers.comparison.changesLang')}</td><td className="yes">{t('languageSwitchers.comparison.yes')}</td><td className="yes">{t('languageSwitchers.comparison.yesVia')}</td></tr>
+              <tr><td>{t('languageSwitchers.comparison.knowsCountry')}</td><td className="no">{t('languageSwitchers.comparison.no')}</td><td className="yes">{t('languageSwitchers.comparison.yes')}</td></tr>
+              <tr><td>{t('languageSwitchers.comparison.representsBeEn')}</td><td className="no">{t('languageSwitchers.comparison.no')}</td><td className="yes">{t('languageSwitchers.comparison.yes')}</td></tr>
+              <tr><td>{t('languageSwitchers.comparison.distinguishes')}</td><td className="no">{t('languageSwitchers.comparison.no')}</td><td className="yes">{t('languageSwitchers.comparison.yes')}</td></tr>
+              <tr><td>{t('languageSwitchers.comparison.bestUrls')}</td><td className="no">{t('languageSwitchers.comparison.needsAdapter')}</td><td className="yes">{t('languageSwitchers.comparison.yes')}</td></tr>
+              <tr><td>{t('languageSwitchers.comparison.bestTransOnly')}</td><td className="yes">{t('languageSwitchers.comparison.yes')}</td><td>{t('languageSwitchers.comparison.optional')}</td></tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <div className="lab__grid">
+        <DemoItem
+          title={t('languageSwitchers.variants.0.title')}
+          description={t('languageSwitchers.variants.0.desc')}
+          notice={lastResult}
+          previewLabel={t('languageSwitchers.preview')}
+          codeLabel={t('languageSwitchers.code')}
+          note={t('languageSwitchers.note')}
+          code={`import { LanguageSwitcher } from '@asafarim/shared-i18n'
+
+<LanguageSwitcher
+  variant="buttons"
+  onChanged={(lang) => {
+    const { locale } = resolveLocaleFromLanguage(currentLocale, lang, countries)
+    navigate(locale)
+  }}
+/>`}
+        >
+          <LanguageSwitcher
+            variant="buttons"
+            onChanged={makeHandler()}
+          />
+        </DemoItem>
+
+        <DemoItem
+          title={t('languageSwitchers.variants.1.title')}
+          description={t('languageSwitchers.variants.1.desc')}
+          notice={lastResult}
+          previewLabel={t('languageSwitchers.preview')}
+          codeLabel={t('languageSwitchers.code')}
+          note={t('languageSwitchers.note')}
+          code={`<LanguageSwitcher
+  variant="select"
+  showEmoji={false}
+  onChanged={makeHandler()}
+/>`}
+        >
+          <LanguageSwitcher
+            variant="select"
+            showEmoji={false}
+            showLabel={true}
+            unstyled={true}
+            onChanged={makeHandler()}
+          />
+        </DemoItem>
+
+        <DemoItem
+          title={t('languageSwitchers.variants.2.title')}
+          description={t('languageSwitchers.variants.2.desc')}
+          notice={lastResult}
+          previewLabel={t('languageSwitchers.preview')}
+          codeLabel={t('languageSwitchers.code')}
+          note={t('languageSwitchers.note')}
+          code={`<LanguageSwitcher
+  variant="icon-dropdown"
+  onChanged={makeHandler()}
+/>`}
+        >
+          <LanguageSwitcher
+            variant="icon-dropdown"
+            onChanged={makeHandler()}
+          />
+        </DemoItem>
+
+        <DemoItem
+          title={t('languageSwitchers.variants.3.title')}
+          description={t('languageSwitchers.variants.3.desc')}
+          notice={lastResult}
+          previewLabel={t('languageSwitchers.preview')}
+          codeLabel={t('languageSwitchers.code')}
+          note={t('languageSwitchers.note')}
+          code={`<LanguageSwitcher
+  variant="icon-dropdown"
+  languages={['en', 'nl', 'fr', 'de']}
+  onChanged={makeHandler()}
+/>`}
+        >
+          <LanguageSwitcher
+            variant="icon-dropdown"
+            languages={['en', 'nl', 'fr', 'de']}
+            onChanged={makeHandler()}
+          />
+        </DemoItem>
+
+        <DemoItem
+          title={t('languageSwitchers.variants.4.title')}
+          description={t('languageSwitchers.variants.4.desc')}
+          notice={lastResult}
+          previewLabel={t('languageSwitchers.preview')}
+          codeLabel={t('languageSwitchers.code')}
+          note={t('languageSwitchers.note')}
+          code={`<LanguageSwitcher
+  variant="icon-dropdown"
+  languages={['en', 'nl', 'fr', 'de']}
+  showLabelInIconDropdown={true}
+  onChanged={makeHandler()}
+/>`}
+        >
+          <LanguageSwitcher
+            variant="icon-dropdown"
+            languages={['en', 'nl', 'fr', 'de']}
+            showLabelInIconDropdown={true}
+            onChanged={makeHandler()}
+          />
+        </DemoItem>
+
+        <DemoItem
+          title={t('languageSwitchers.variants.5.title')}
+          description={t('languageSwitchers.variants.5.desc')}
+          notice={lastResult}
+          previewLabel={t('languageSwitchers.preview')}
+          codeLabel={t('languageSwitchers.code')}
+          note={t('languageSwitchers.note')}
+          code={`<LanguageSwitcher
+  variant="select"
+  languages={['en', 'nl']}
+  isToggler={true}
+  showEmoji={true}
+  onChanged={makeHandler()}
+/>`}
+        >
+          <LanguageSwitcher
+            variant="select"
+            languages={['en', 'nl']}
+            isToggler={true}
+            showEmoji={true}
+            unstyled={true}
+            onChanged={makeHandler()}
+          />
+        </DemoItem>
+      </div>
+    </div>
+  )
+}

package/demo/src/components/Logo.tsx

@@ -1,7 +1,7 @@
-export default function Logo({width = 70}: {width?: number}) {
-  return (
-    <div className="logo">
-      <img src={import.meta.env.BASE_URL + "logo.svg"} alt="Logo" width={width} />
-    </div>
-  )
+export default function Logo({width = 70}: {width?: number}) {
+  return (
+    <div className="logo">
+      <img src={import.meta.env.BASE_URL + "logo.svg"} alt="Logo" width={width} />
+    </div>
+  )
 }

package/demo/src/components/OverviewSection.tsx

@@ -1,43 +1,58 @@
-import { useTranslation } from '@asafarim/shared-i18n'
-
-export default function OverviewSection() {
-  const { t } = useTranslation('demo')
-  const overview = t('overview', { returnObjects: true }) as any
-
-  return (
-    <div className="overview-section">
-      <div className="overview-header">
-        <h2 className="overview-title">{overview.heading}</h2>
-        <p className="overview-description">{overview.description}</p>
-      </div>
-
-      <div className="overview-grid">
-        <div className="feature-card">
-          <div className="feature-icon">✨</div>
-          <h3>{overview.features.title}</h3>
-          <ul className="feature-list">
-            {overview.features.items.map((item: string, idx: number) => (
-              <li key={idx}>
-                <span className="feature-dot">•</span>
-                {item}
-              </li>
-            ))}
-          </ul>
-        </div>
-
-        <div className="feature-card">
-          <div className="feature-icon">🎯</div>
-          <h3>{overview.useCases.title}</h3>
-          <ul className="feature-list">
-            {overview.useCases.items.map((item: string, idx: number) => (
-              <li key={idx}>
-                <span className="feature-dot">→</span>
-                {item}
-              </li>
-            ))}
-          </ul>
-        </div>
-      </div>
-    </div>
-  )
-}
+import { useTranslation } from '@asafarim/shared-i18n'
+
+export default function OverviewSection() {
+  const { t } = useTranslation('demo')
+  const overview = t('overview', { returnObjects: true }) as any
+
+  return (
+    <div className="overview-section">
+      <div className="overview-header">
+        <h2 className="overview-title">{overview.heading}</h2>
+        <p className="overview-description">{overview.description}</p>
+      </div>
+
+      <div className="overview-grid">
+        <div className="feature-card">
+          <div className="feature-icon">🌍</div>
+          <h3>{overview.features.title}</h3>
+          <ul className="feature-list">
+            {overview.features.items.map((item: string, idx: number) => (
+              <li key={idx}>
+                <span className="feature-dot">•</span>
+                {item}
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        {overview.selectors && (
+          <div className="feature-card">
+            <div className="feature-icon">🗺️</div>
+            <h3>{overview.selectors.title}</h3>
+            <ul className="feature-list">
+              {overview.selectors.items.map((item: string, idx: number) => (
+                <li key={idx}>
+                  <span className="feature-dot">→</span>
+                  {item}
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+
+        <div className="feature-card">
+          <div className="feature-icon">🎯</div>
+          <h3>{overview.useCases.title}</h3>
+          <ul className="feature-list">
+            {overview.useCases.items.map((item: string, idx: number) => (
+              <li key={idx}>
+                <span className="feature-dot">→</span>
+                {item}
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </div>
+  )
+}

package/demo/src/components/Panel.tsx

@@ -1,15 +1,15 @@
-import { ReactNode } from 'react'
-
-interface PanelProps {
-  title: string
-  children: ReactNode
-}
-
-export default function Panel({ title, children }: PanelProps) {
-  return (
-    <div className="panel">
-      <h2 className="panel-title">{title}</h2>
-      {children}
-    </div>
-  )
-}
+import { ReactNode } from 'react'
+
+interface PanelProps {
+  title: string
+  children: ReactNode
+}
+
+export default function Panel({ title, children }: PanelProps) {
+  return (
+    <div className="panel">
+      <h2 className="panel-title">{title}</h2>
+      {children}
+    </div>
+  )
+}

package/demo/src/components/RoutingLabPage.tsx

@@ -0,0 +1,147 @@
+import { useState } from 'react'
+import { LanguageSwitcher, CountryLanguageSelector, useTranslation } from '@asafarim/shared-i18n'
+import type { Locale } from '@asafarim/shared-i18n'
+import type { SupportedLanguage } from '@asafarim/shared-i18n'
+import { countries } from '../data/countries'
+import { localeToSlug } from '../i18n/localeRouting'
+import { resolveLocaleFromLanguage } from '../i18n/localeAdapter'
+import type { ResolveLocaleResult } from '../i18n/localeAdapter'
+
+interface Props {
+  locale: Locale
+  onLocaleChange: (locale: Locale) => void
+}
+
+interface ScenarioRow {
+  id: string
+  startLocale: Locale
+  action: string
+  expectedSlug: string
+  run: (onLocaleChange: (l: Locale) => void) => void
+}
+
+const SCENARIOS: ScenarioRow[] = [
+  {
+    id: 'be-en-fr',
+    startLocale: { country: 'BE', language: 'en' },
+    action: 'LanguageSwitcher selects French',
+    expectedSlug: 'be-fr',
+    run: (cb) => {
+      const { locale } = resolveLocaleFromLanguage({ country: 'BE', language: 'en' }, 'fr', countries)
+      cb(locale)
+    },
+  },
+  {
+    id: 'gb-en-nl',
+    startLocale: { country: 'GB', language: 'en' },
+    action: 'LanguageSwitcher selects Dutch (UK → fallback to NL)',
+    expectedSlug: 'nl-nl',
+    run: (cb) => {
+      const { locale } = resolveLocaleFromLanguage({ country: 'GB', language: 'en' }, 'nl', countries)
+      cb(locale)
+    },
+  },
+  {
+    id: 'cls-gb-en',
+    startLocale: { country: 'BE', language: 'en' },
+    action: 'CountryLanguageSelector selects UK English',
+    expectedSlug: 'gb-en',
+    run: (cb) => cb({ country: 'GB', language: 'en' }),
+  },
+  {
+    id: 'cls-lu-de',
+    startLocale: { country: 'BE', language: 'en' },
+    action: 'CountryLanguageSelector selects Luxembourg German',
+    expectedSlug: 'lu-de',
+    run: (cb) => cb({ country: 'LU', language: 'de' }),
+  },
+]
+
+export default function RoutingLabPage({ locale, onLocaleChange }: Props) {
+  const { t } = useTranslation('demo')
+  const [lsResult, setLsResult] = useState<ResolveLocaleResult | null>(null)
+
+  const handleLangSwitch = (lang: SupportedLanguage) => {
+    const result = resolveLocaleFromLanguage(locale, lang, countries)
+    setLsResult(result)
+    if (result.reason !== 'unsupported') onLocaleChange(result.locale)
+  }
+
+  return (
+    <div className="lab">
+      <header className="section-head">
+        <h2>{t('routingLab.heading')}</h2>
+        <p>{t('routingLab.intro')}</p>
+      </header>
+
+      <div className="lab__status surface">
+        <div><span className="lab__caption">{t('routingLab.currentLocale')}</span><strong className="lab__value">{locale.country} / {locale.language.toUpperCase()}</strong></div>
+        <div><span className="lab__caption">{t('routingLab.slug')}</span><code className="lab__value">{localeToSlug(locale)}</code></div>
+        <div><span className="lab__caption">{t('routingLab.urlPath')}</span><code className="lab__value">/shared-i18n/{localeToSlug(locale)}/routing-lab</code></div>
+      </div>
+
+      <div className="lab__side-by-side">
+        <div className="lab__side surface">
+          <h3 className="lab__side-title">{t('routingLab.langOnly.title')}</h3>
+          <p className="lab__side-desc">{t('routingLab.langOnly.desc')}</p>
+          <LanguageSwitcher
+            variant="buttons"
+            languages={['en', 'nl', 'fr', 'de']}
+            onChanged={handleLangSwitch}
+          />
+          {lsResult && (
+            <div className={`notice ${lsResult.reason === 'fallback-country' ? 'notice--warn' : lsResult.reason === 'unsupported' ? 'notice--err' : 'notice--ok'}`}>
+              {lsResult.reason === 'same-country' && (
+                <>✓ Same country — locale: <code>{localeToSlug(lsResult.locale)}</code></>
+              )}
+              {lsResult.reason === 'fallback-country' && lsResult.message}
+              {lsResult.reason === 'unsupported' && lsResult.message}
+            </div>
+          )}
+          <div className="lab__outcome">
+            {t('routingLab.langOnly.resolved')} <code>{localeToSlug(locale)}</code>
+          </div>
+        </div>
+
+        <div className="lab__side surface">
+          <h3 className="lab__side-title">{t('routingLab.countryLang.title')}</h3>
+          <p className="lab__side-desc">{t('routingLab.countryLang.desc')}</p>
+          <CountryLanguageSelector
+            countries={countries}
+            value={locale}
+            onChange={onLocaleChange}
+            triggerVariant="full"
+            flagMode="image"
+            ariaLabel="Routing lab — country language selector"
+          />
+          <div className="lab__outcome">
+            {t('routingLab.countryLang.resolved')} <code>{localeToSlug(locale)}</code>
+          </div>
+        </div>
+      </div>
+
+      <section className="lab__scenarios">
+        <h3>{t('routingLab.scenarios.title')}</h3>
+        <p>{t('routingLab.scenarios.desc')}</p>
+        <div className="scenario-grid">
+          {SCENARIOS.map(s => (
+            <button
+              key={s.id}
+              type="button"
+              className="scenario-card"
+              onClick={() => s.run(onLocaleChange)}
+            >
+              <div className="scenario-card__action">{s.action}</div>
+              <div className="scenario-card__result">
+                {t('routingLab.scenarios.expected')} <code>{s.expectedSlug}</code>
+              </div>
+              <div className="scenario-card__start">
+                Start: <code>{localeToSlug(s.startLocale)}</code>
+              </div>
+            </button>
+          ))}
+        </div>
+      </section>
+    </div>
+  )
+}