@asafarim/shared-i18n 0.7.0 → 0.8.0

package/demo/src/components/LanguageSwitcherDemo.tsx

@@ -1,202 +1,256 @@
-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"
-          unstyled={true}
-          showEmoji={false}
-          showLabel={true}
-        />
-      </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="Icon Dropdown - Limited Languages with Labels"
-        description="Icon dropdown with language names displayed next to flags"
-        code={`<LanguageSwitcher
-  variant="icon-dropdown"
-  languages={['en', 'nl']}
-  unstyled={false}
-  showLabelInIconDropdown={true}
-/>`}
-      >
-        <LanguageSwitcher
-          variant="icon-dropdown"
-          languages={['en', 'nl']}
-          unstyled={false}
-          showLabelInIconDropdown={true}
-        />
-      </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>
-  )
-}
+import { LanguageSwitcher } from '@asafarim/shared-i18n'
+import { CountryLanguageSelector } from '@asafarim/country-language-selector'
+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() {
+  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={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"
+          unstyled={true}
+          showEmoji={false}
+          showLabel={true}
+        />
+      </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="Icon Dropdown - Limited Languages with Labels"
+        description="Icon dropdown with language names displayed next to flags"
+        code={`<LanguageSwitcher
+  variant="icon-dropdown"
+  languages={['en', 'nl']}
+  unstyled={false}
+  showLabelInIconDropdown={true}
+/>`}
+      >
+        <LanguageSwitcher
+          variant="icon-dropdown"
+          languages={['en', 'nl']}
+          unstyled={false}
+          showLabelInIconDropdown={true}
+        />
+      </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>
+
+      <DemoItem
+        title="Country-Language Selector (Header)"
+        description="The header now uses CountryLanguageSelector for Belgium, Switzerland, and Canada with their official languages"
+        code={`<CountryLanguageSelector
+  countries={countries}
+  defaultValue={{ country: 'BE', language: 'nl' }}
+  persistKey="demo-locale"
+  triggerVariant="compact"
+  onChange={(locale) => i18n.changeLanguage(locale.language)}
+/>`}
+      >
+        <div style={{ padding: '1rem', border: '1px solid #ccc', borderRadius: '4px' }}>
+          <p>The country-language selector is now in the header above.</p>
+          <p>Try selecting different countries and languages to see the interface change!</p>
+        </div>
+      </DemoItem>
+    </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,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>
-  )
-}
+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

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