@asafarim/shared-i18n 0.8.0 → 0.9.0

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>
+  )
+}

package/demo/src/components/LanguageBar.tsx

@@ -1,103 +1,145 @@
-import { CountryLanguageSelector } from '@asafarim/country-language-selector'
-import { useTranslation } from '@asafarim/shared-i18n'
-import { useState } from 'react'
-
-export default function LanguageBar() {
-  const [isDarkTheme, setIsDarkTheme] = useState(false)
-  const { i18n } = useTranslation()
-
-  const toggleTheme = () => {
-    setIsDarkTheme(!isDarkTheme)
-    document.documentElement.setAttribute('data-theme', isDarkTheme ? 'light' : 'dark')
-  }
-
-  const handleLocaleChange = (locale: { country: string; language: string }) => {
-    if (i18n?.changeLanguage) {
-      i18n.changeLanguage(locale.language)
-    }
-  }
-
-  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' }
-      ]
-    }
-  ]
-
-  return (
-    <div className="language-bar">
-      <CountryLanguageSelector
-        countries={countries}
-        defaultValue={{ country: 'BE', language: 'nl' }}
-        persistKey="demo-locale"
-        triggerVariant="compact"
-        onChange={handleLocaleChange}
-      />
-      <div className='package-source-actions'>
-        <a
-          href="https://github.com/AliSafari-IT/shared-i18n"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="icon-button"
-          title="View on GitHub"
-          aria-label="View repository on GitHub"
-        >
-          <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
-            <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
-          </svg>
-        </a>
-        
-        <a
-          href="https://www.npmjs.com/package/@asafarim/shared-i18n"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="icon-button"
-          title="View on NPM"
-          aria-label="View package on NPM"
-        >
-          <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
-            <path d="M0 0v16h16v-16h-16zm8.5 9.5h-1v-3h1v3zm0-4h-1v-1h1v1zm-3.5 4h-1v-6h1v6zm-3.5 0h-1v-4h1v4zm10.5 0h-1v-2h1v2zm0-3h-1v-3h1v3z"/>
-          </svg>
-        </a>
-
-        <button
-          onClick={toggleTheme}
-          className="icon-button"
-          title={`Switch to ${isDarkTheme ? 'light' : 'dark'} theme`}
-          aria-label={`Switch to ${isDarkTheme ? 'light' : 'dark'} theme`}
-        >
-          {isDarkTheme ? '☀️' : '🌙'}
-        </button>
-      </div>
-    </div>
-  )
-}
+import { useEffect, useState } from 'react'
+import { CountryLanguageSelector } from '@asafarim/shared-i18n'
+import type { Locale } from '@asafarim/shared-i18n'
+import { useTranslation } from '@asafarim/shared-i18n'
+import { countries } from '../data/countries'
+import type { DemoPage } from '../i18n/localeRouting'
+import { PAGES, localeToSlug } from '../i18n/localeRouting'
+import Logo from './Logo'
+
+interface LanguageBarProps {
+  locale: Locale
+  onLocaleChange: (locale: Locale) => void
+  currentPage: DemoPage
+  onPageChange: (page: DemoPage) => void
+}
+
+const usePageLabels = (t: (key: string) => string): Record<DemoPage, string> => ({
+  'overview': t('nav.overview'),
+  'get-started': t('nav.getStarted'),
+  'language-switchers': t('nav.languageSwitchers'),
+  'country-language-selectors': t('nav.countrySelectors'),
+  'routing-lab': t('nav.routingLab'),
+})
+
+function getStoredTheme(): 'light' | 'dark' {
+  if (typeof window === 'undefined') return 'light'
+  const saved = window.localStorage.getItem('demo-theme')
+  if (saved === 'light' || saved === 'dark') return saved
+  return window.matchMedia?.('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+}
+
+export default function LanguageBar({ locale, onLocaleChange, currentPage, onPageChange }: LanguageBarProps) {
+  const { i18n, t } = useTranslation('demo')
+  const PAGE_LABELS = usePageLabels(t)
+  const [theme, setTheme] = useState<'light' | 'dark'>(() => getStoredTheme())
+
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', theme)
+    window.localStorage.setItem('demo-theme', theme)
+  }, [theme])
+
+  const toggleTheme = () => setTheme(t => (t === 'dark' ? 'light' : 'dark'))
+
+  const handleLocaleChange = (next: Locale) => {
+    onLocaleChange(next)
+    if (i18n?.changeLanguage) i18n.changeLanguage(next.language)
+  }
+
+  return (
+    <header className="topnav" role="banner">
+      <div className="topnav__inner">
+        <a
+          className="topnav__brand"
+          href="#"
+          onClick={(e) => { e.preventDefault(); onPageChange('overview') }}
+          aria-label="Shared i18n home"
+        >
+          <Logo />
+          <div className="topnav__brand-text">
+            <span className="topnav__brand-name">@asafarim/shared-i18n</span>
+            <span className="topnav__brand-tag">{t('nav.tagline')}</span>
+          </div>
+        </a>
+
+        <nav className="topnav__pills" aria-label="Demo sections">
+          {PAGES.map(page => (
+            <button
+              key={page}
+              type="button"
+              className={`pill ${page === currentPage ? 'pill--active' : ''}`}
+              aria-current={page === currentPage ? 'page' : undefined}
+              onClick={() => onPageChange(page)}
+            >
+              {PAGE_LABELS[page]}
+            </button>
+          ))}
+        </nav>
+
+        <div className="topnav__actions">
+          <span className="locale-chip" title={`Active locale: ${localeToSlug(locale)}`}>
+            <span className="locale-chip__dot" aria-hidden="true" />
+            {locale.country} / {locale.language.toUpperCase()}
+            <span className="locale-chip__slug">{localeToSlug(locale)}</span>
+          </span>
+
+          <CountryLanguageSelector
+            countries={countries}
+            value={locale}
+            onChange={handleLocaleChange}
+            triggerVariant="compact"
+            flagMode="image"
+            align="end"
+            ariaLabel="Select country and language with image flags"
+          />
+
+          <CountryLanguageSelector
+            countries={countries}
+            value={locale}
+            onChange={handleLocaleChange}
+            triggerVariant="flag"
+            flagMode="image"
+            align="end"
+            ariaLabel="Select country and language with image flags"
+          />
+
+          <a
+            href="https://github.com/AliSafari-IT/shared-i18n"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="icon-button"
+            title="View on GitHub"
+            aria-label="View repository on GitHub"
+          >
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+              <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
+            </svg>
+          </a>
+
+          <a
+            href="https://www.npmjs.com/package/@asafarim/shared-i18n"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="icon-button"
+            title="View on npm"
+            aria-label="View package on npm"
+          >
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+              <path d="M0 0v16h16V0H0zm13 13h-2V6H8v7H3V3h10v10z"/>
+            </svg>
+          </a>
+
+          <button
+            type="button"
+            onClick={toggleTheme}
+            className="icon-button"
+            title={`Switch to ${theme === 'dark' ? 'light' : 'dark'} theme`}
+            aria-label={`Switch to ${theme === 'dark' ? 'light' : 'dark'} theme`}
+          >
+            {theme === 'dark' ? '☀️' : '🌙'}
+          </button>
+        </div>
+      </div>
+    </header>
+  )
+}

package/demo/src/components/LanguageSwitcherDemo.module.css

@@ -1,114 +1,114 @@
-@import "@asafarim/design-tokens/css";
-
-.container {
-  display: flex;
-  flex-direction: column;
-  gap: var(--asm-space-6);
-  overflow: visible;
-}
-
-.demoItem {
-  border: 1px solid var(--asm-color-border);
-  border-radius: var(--asm-radius-lg);
-  overflow: visible;
-  background: var(--asm-color-surface);
-  transition: box-shadow var(--asm-motion-duration-fast) var(--asm-motion-easing-standard);
-}
-
-.demoItem:hover {
-  box-shadow: var(--asm-effect-shadow-md);
-}
-
-.demoHeader {
-  padding: var(--asm-space-4);
-  border-bottom: 1px solid var(--asm-color-border);
-  background: var(--asm-color-surface-muted);
-}
-
-.demoTitle {
-  margin: 0 0 var(--asm-space-2) 0;
-  font-size: var(--asm-font-size-sm);
-  font-weight: 600;
-  color: var(--asm-color-text);
-}
-
-.demoDescription {
-  margin: 0;
-  font-size: var(--asm-font-size-xs);
-  color: var(--asm-color-text-muted);
-  line-height: 1.5;
-}
-
-.demoContent {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 0;
-}
-
-.demoPreview {
-  padding: var(--asm-space-4);
-  border-right: 1px solid var(--asm-color-border);
-  display: flex;
-  flex-direction: column;
-  gap: var(--asm-space-3);
-}
-
-.demoCode {
-  padding: var(--asm-space-4);
-  display: flex;
-  flex-direction: column;
-  gap: var(--asm-space-3);
-  background: #fafafa;
-}
-
-.previewLabel,
-.codeLabel {
-  font-size: var(--asm-font-size-xs);
-  font-weight: 600;
-  color: var(--asm-color-text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.codeBlock {
-  margin: 0;
-  padding: var(--asm-space-3);
-  background: var(--asm-color-surface);
-  border: 1px solid var(--asm-color-border);
-  border-radius: var(--asm-radius-md);
-  font-size: 0.8rem;
-  line-height: 1.6;
-  color: var(--asm-color-text);
-  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-  overflow-x: auto;
-}
-
-@media (max-width: 1024px) {
-  .demoContent {
-    grid-template-columns: 1fr;
-  }
-
-  .demoPreview {
-    border-right: none;
-    border-bottom: 1px solid var(--asm-color-border);
-  }
-}
-
-@media (max-width: 640px) {
-  .demoItem {
-    border-radius: var(--asm-radius-md);
-  }
-
-  .demoHeader {
-    padding: var(--asm-space-3);
-  }
-
-  .demoPreview,
-  .demoCode {
-    padding: var(--asm-space-3);
-  }
-
-  .codeBlock {
-    font-size: 0.75rem;
-  }
-}
+@import "@asafarim/design-tokens/css";
+
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--asm-space-6);
+  overflow: visible;
+}
+
+.demoItem {
+  border: 1px solid var(--asm-color-border);
+  border-radius: var(--asm-radius-lg);
+  overflow: visible;
+  background: var(--asm-color-surface);
+  transition: box-shadow var(--asm-motion-duration-fast) var(--asm-motion-easing-standard);
+}
+
+.demoItem:hover {
+  box-shadow: var(--asm-effect-shadow-md);
+}
+
+.demoHeader {
+  padding: var(--asm-space-4);
+  border-bottom: 1px solid var(--asm-color-border);
+  background: var(--asm-color-surface-muted);
+}
+
+.demoTitle {
+  margin: 0 0 var(--asm-space-2) 0;
+  font-size: var(--asm-font-size-sm);
+  font-weight: 600;
+  color: var(--asm-color-text);
+}
+
+.demoDescription {
+  margin: 0;
+  font-size: var(--asm-font-size-xs);
+  color: var(--asm-color-text-muted);
+  line-height: 1.5;
+}
+
+.demoContent {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0;
+}
+
+.demoPreview {
+  padding: var(--asm-space-4);
+  border-right: 1px solid var(--asm-color-border);
+  display: flex;
+  flex-direction: column;
+  gap: var(--asm-space-3);
+}
+
+.demoCode {
+  padding: var(--asm-space-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--asm-space-3);
+  background: #fafafa;
+}
+
+.previewLabel,
+.codeLabel {
+  font-size: var(--asm-font-size-xs);
+  font-weight: 600;
+  color: var(--asm-color-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.codeBlock {
+  margin: 0;
+  padding: var(--asm-space-3);
+  background: var(--asm-color-surface);
+  border: 1px solid var(--asm-color-border);
+  border-radius: var(--asm-radius-md);
+  font-size: 0.8rem;
+  line-height: 1.6;
+  color: var(--asm-color-text);
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  overflow-x: auto;
+}
+
+@media (max-width: 1024px) {
+  .demoContent {
+    grid-template-columns: 1fr;
+  }
+
+  .demoPreview {
+    border-right: none;
+    border-bottom: 1px solid var(--asm-color-border);
+  }
+}
+
+@media (max-width: 640px) {
+  .demoItem {
+    border-radius: var(--asm-radius-md);
+  }
+
+  .demoHeader {
+    padding: var(--asm-space-3);
+  }
+
+  .demoPreview,
+  .demoCode {
+    padding: var(--asm-space-3);
+  }
+
+  .codeBlock {
+    font-size: 0.75rem;
+  }
+}