@asafarim/shared-i18n 0.7.0 → 0.8.0

package/demo/src/components/LanguageBar.tsx

@@ -1,63 +1,103 @@
-import { LanguageSwitcher } from '@asafarim/shared-i18n'
-import { useState } from 'react'
-
-export default function LanguageBar() {
-  const [isDarkTheme, setIsDarkTheme] = useState(false)
-
-  const toggleTheme = () => {
-    setIsDarkTheme(!isDarkTheme)
-    document.documentElement.setAttribute('data-theme', isDarkTheme ? 'light' : 'dark')
-  }
-
-  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 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 { 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>
+  )
 }

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

@@ -1,113 +1,114 @@
-@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;
-  }
-}
+@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;
+  }
+}