@asafarim/shared-i18n 0.5.2 → 0.6.0

package/demo/src/components/KeyTable.tsx

@@ -0,0 +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>
+  )
+}

package/demo/src/components/LanguageBar.tsx

@@ -0,0 +1,19 @@
+import { LanguageSwitcher } from '@asafarim/shared-i18n'
+
+export default function LanguageBar() {
+  return (
+    <div className="language-bar">
+      <LanguageSwitcher
+        variant="icon-dropdown"
+        showIcon={true}
+        showLabel={false}
+        showEmoji={true}
+        className="language-switcher"
+        buttonClassName="language-switcher-button"
+        selectClassName="language-switcher-select"
+       // languages={undefined} // Use default languages
+        languages={["en", "nl", "fr"] as const}
+      />
+    </div>
+  )
+}

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

@@ -0,0 +1,113 @@
+@import "@asafarim/design-tokens/css";
+
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--asm-space-6);
+}
+
+.demoItem {
+  border: 1px solid var(--asm-color-border);
+  border-radius: var(--asm-radius-lg);
+  overflow: hidden;
+  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;
+  }
+}

package/demo/src/components/LanguageSwitcherDemo.tsx

@@ -0,0 +1,184 @@
+import { LanguageSwitcher } from '@asafarim/shared-i18n'
+import styles from './LanguageSwitcherDemo.module.css'
+
+interface DemoItemProps {
+  title: string
+  description: string
+  code: string
+  children: React.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>
+  )
+}
+
+export default function LanguageSwitcherDemo() {
+  return (
+    <div className={styles.container}>
+      <DemoItem
+        title="Buttons Variant"
+        description="Display all languages as individual button options"
+        code={`<LanguageSwitcher
+  variant="buttons"
+  buttonClassName="lang-button"
+  unstyled={false}
+/>`}
+      >
+        <LanguageSwitcher
+          variant="buttons"
+          buttonClassName="lang-button"
+          unstyled={false}
+        />
+      </DemoItem>
+
+      <DemoItem
+        title="Select Dropdown - Text Only"
+        description="Dropdown with language names, no emojis"
+        code={`<LanguageSwitcher
+  variant="select"
+  selectClassName="lang-select"
+  unstyled={false}
+  showEmoji={false}
+/>`}
+      >
+        <LanguageSwitcher
+          variant="select"
+          selectClassName="lang-select"
+          unstyled={false}
+          showEmoji={false}
+        />
+      </DemoItem>
+
+      <DemoItem
+        title="Select Dropdown - Emoji Only (2 Languages)"
+        description="Compact dropdown showing only emojis for language selection"
+        code={`<LanguageSwitcher
+  variant="select"
+  selectClassName="lang-select"
+  unstyled={true}
+  showEmoji={true}
+  languages={['en', 'nl']}
+  isToggler={false}
+/>`}
+      >
+        <LanguageSwitcher
+          variant="select"
+          selectClassName="lang-select"
+          unstyled={true}
+          showEmoji={true}
+          languages={['en', 'nl']}
+          isToggler={false}
+        />
+      </DemoItem>
+
+      <DemoItem
+        title="Toggle Button (2 Languages)"
+        description="Automatic toggle button when exactly 2 languages are provided"
+        code={`<LanguageSwitcher
+  variant="select"
+  selectClassName="lang-select"
+  unstyled={true}
+  showEmoji={true}
+  languages={['en', 'nl']}
+  isToggler={true}
+/>`}
+      >
+        <LanguageSwitcher
+          variant="select"
+          selectClassName="lang-select"
+          unstyled={true}
+          showEmoji={true}
+          languages={['en', 'nl']}
+          isToggler={true}
+        />
+      </DemoItem>
+
+      <DemoItem
+        title="Icon Dropdown"
+        description="Minimal icon-based dropdown for all languages"
+        code={`<LanguageSwitcher
+  variant="icon-dropdown"
+  unstyled={false}
+/>`}
+      >
+        <LanguageSwitcher
+          variant="icon-dropdown"
+          unstyled={false}
+        />
+      </DemoItem>
+
+      <DemoItem
+        title="Icon Dropdown - Limited Languages"
+        description="Icon dropdown restricted to specific languages"
+        code={`<LanguageSwitcher
+  variant="icon-dropdown"
+  languages={['en', 'nl']}
+  unstyled={false}
+/>`}
+      >
+        <LanguageSwitcher
+          variant="icon-dropdown"
+          languages={['en', 'nl']}
+          unstyled={false}
+        />
+      </DemoItem>
+
+      <DemoItem
+        title="Select Dropdown - Text Only (2 Languages)"
+        description="Standard dropdown with text labels for 2 languages"
+        code={`<LanguageSwitcher
+  variant="select"
+  selectClassName="lang-select"
+  unstyled={false}
+  showEmoji={false}
+  languages={['en', 'nl']}
+  isToggler={false}
+/>`}
+      >
+        <LanguageSwitcher
+          variant="select"
+          selectClassName="lang-select"
+          unstyled={false}
+          showEmoji={false}
+          languages={['en', 'nl']}
+          isToggler={false}
+        />
+      </DemoItem>
+
+      <DemoItem
+        title="Buttons Variant - Limited Languages"
+        description="Button variant restricted to specific languages"
+        code={`<LanguageSwitcher
+  variant="buttons"
+  buttonClassName="lang-button"
+  unstyled={false}
+  languages={['en', 'nl']}
+/>`}
+      >
+        <LanguageSwitcher
+          variant="buttons"
+          buttonClassName="lang-button"
+          unstyled={false}
+          languages={['en', 'nl']}
+        />
+      </DemoItem>
+    </div>
+  )
+}

package/demo/src/components/OverviewSection.tsx

@@ -0,0 +1,43 @@
+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>
+  )
+}

package/demo/src/components/Panel.tsx

@@ -0,0 +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>
+  )
+}

package/demo/src/components/StatusCard.tsx

@@ -0,0 +1,109 @@
+import { useState, useEffect } from 'react'
+import {
+  useTranslation,
+  SUPPORTED_LANGUAGES,
+  LANGUAGE_NAMES,
+  LANGUAGE_COOKIE_NAME,
+  getLanguageFromCookie,
+  getInitialLanguage,
+  updateUserLanguagePreference,
+  isSupportedLanguage
+} from '@asafarim/shared-i18n'
+import Panel from './Panel'
+
+export default function StatusCard() {
+  const { t, i18n } = useTranslation('demo')
+  const [cookieValue, setCookieValue] = useState<string | null>(null)
+  const [initialLang, setInitialLang] = useState<string>('')
+  const [syncResult, setSyncResult] = useState<{ type: 'success' | 'error'; message: string } | null>(null)
+  const [isSyncing, setIsSyncing] = useState(false)
+
+  useEffect(() => {
+    setCookieValue(getLanguageFromCookie())
+    setInitialLang(getInitialLanguage())
+  }, [i18n.language])
+
+  const backendUrl = import.meta.env.VITE_IDENTITY_API_URL || 'not set'
+
+  const handleSync = async () => {
+    setIsSyncing(true)
+    setSyncResult(null)
+    try {
+      const currentLanguage = i18n.language
+      if (isSupportedLanguage(currentLanguage)) {
+        await updateUserLanguagePreference(currentLanguage)
+      } else {
+        throw new Error(`Unsupported language: ${currentLanguage}`)
+      }
+      setSyncResult({
+        type: 'success',
+        message: t('status.resultOk')
+      })
+    } catch (error) {
+      setSyncResult({
+        type: 'error',
+        message: `${t('status.resultFail')}: ${error instanceof Error ? error.message : 'Unknown error'}`
+      })
+    } finally {
+      setIsSyncing(false)
+    }
+  }
+
+  return (
+    <Panel title={t('status.heading')}>
+      <div className="status-grid">
+        <div className="status-card">
+          <h4>Current Language</h4>
+          <p>{i18n.language}</p>
+        </div>
+
+        <div className="status-card">
+          <h4>{t('status.cookie')}</h4>
+          <p>
+            <strong>Name:</strong> {LANGUAGE_COOKIE_NAME}
+          </p>
+          <p>
+            <strong>Value:</strong> {cookieValue || '(not set)'}
+          </p>
+        </div>
+
+        <div className="status-card">
+          <h4>Initial Language</h4>
+          <p>{initialLang}</p>
+        </div>
+
+        <div className="status-card">
+          <h4>Supported Languages</h4>
+          <ul className="status-list">
+            {SUPPORTED_LANGUAGES.map((lang: string) => (
+              <li key={lang}>
+                {lang}: {LANGUAGE_NAMES[lang as keyof typeof LANGUAGE_NAMES]}
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <div className="status-card">
+          <h4>{t('status.backend')}</h4>
+          <p>{backendUrl}</p>
+        </div>
+
+        <div className="status-card">
+          <h4>Backend Sync</h4>
+          <button
+            className="sync-button"
+            onClick={handleSync}
+            disabled={isSyncing}
+          >
+            {isSyncing ? 'Syncing...' : t('status.simulate')}
+          </button>
+          {syncResult && (
+            <div className={`sync-result ${syncResult.type}`}>
+              {syncResult.message}
+            </div>
+          )}
+        </div>
+      </div>
+    </Panel>
+  )
+}