@geenius/i18n 0.1.0

package/packages/solidjs-css/src/components/LocaleCard.tsx

@@ -0,0 +1,45 @@
+import { Show } from 'solid-js'
+import type { Component } from 'solid-js'
+import type { Locale } from '@geenius-i18n/shared'
+import { LOCALE_INFO } from '@geenius-i18n/shared'
+
+interface Props {
+  locale: Locale
+  coverage: number
+  isSelected: boolean
+  onSelect: (l: Locale) => void
+}
+
+export const LocaleCard: Component<Props> = (props) => {
+  const info = () => LOCALE_INFO[props.locale]
+  const barModifier = () =>
+    props.coverage >= 90 ? 'i18n__locale-card-bar-fill--complete'
+    : props.coverage >= 70 ? 'i18n__locale-card-bar-fill--partial'
+    : 'i18n__locale-card-bar-fill--low'
+
+  return (
+    <button
+      type="button"
+      class={`i18n__locale-card${props.isSelected ? ' i18n__locale-card--selected' : ''}`}
+      onClick={() => props.onSelect(props.locale)}
+    >
+      <div class="i18n__locale-card-header">
+        <span class="i18n__locale-card-flag">{info()?.flag}</span>
+        <div class="i18n__locale-card-info">
+          <span class="i18n__locale-card-name">{info()?.nativeName}</span>
+          <span class="i18n__locale-card-code">{info()?.name} — {props.locale.toUpperCase()}</span>
+        </div>
+        <Show when={info()?.direction === 'rtl'}>
+          <span class="i18n__locale-card-rtl">RTL</span>
+        </Show>
+      </div>
+      <div class="i18n__locale-card-bar">
+        <div
+          class={`i18n__locale-card-bar-fill ${barModifier()}`}
+          style={{ width: `${props.coverage}%` }}
+        />
+      </div>
+      <span class="i18n__locale-card-coverage">{props.coverage}%</span>
+    </button>
+  )
+}

package/packages/solidjs-css/src/components/LocaleStatsCard.tsx

@@ -0,0 +1,43 @@
+import { Show } from 'solid-js'
+import type { Component } from 'solid-js'
+import type { LocaleStat } from '@geenius-i18n/shared'
+import { LOCALE_INFO } from '@geenius-i18n/shared'
+
+interface Props {
+  stat: LocaleStat
+}
+
+export const LocaleStatsCard: Component<Props> = (props) => {
+  const info = () => LOCALE_INFO[props.stat.locale]
+  const barModifier = () =>
+    props.stat.coverage >= 90 ? 'i18n__stats-card-bar-fill--complete'
+    : props.stat.coverage >= 70 ? 'i18n__stats-card-bar-fill--partial'
+    : 'i18n__stats-card-bar-fill--low'
+
+  return (
+    <div class="i18n__stats-card">
+      <div class="i18n__stats-card-header">
+        <span class="i18n__stats-card-flag">{info()?.flag}</span>
+        <span class="i18n__stats-card-locale">{info()?.nativeName}</span>
+      </div>
+      <div class="i18n__stats-card-coverage">
+        <span class="i18n__stats-card-keys">{props.stat.totalKeys} keys</span>
+        <span class="i18n__stats-card-percent">{props.stat.coverage}%</span>
+      </div>
+      <div class="i18n__stats-card-bar">
+        <div
+          class={`i18n__stats-card-bar-fill ${barModifier()}`}
+          style={{ width: `${props.stat.coverage}%` }}
+        />
+      </div>
+      <div class="i18n__stats-card-counts">
+        <Show when={props.stat.missingKeys > 0}>
+          <span class="i18n__stats-card-missing">{props.stat.missingKeys} missing</span>
+        </Show>
+        <Show when={props.stat.missingKeys === 0}>
+          <span class="i18n__stats-card-complete">Complete</span>
+        </Show>
+      </div>
+    </div>
+  )
+}

package/packages/solidjs-css/src/components/LocaleSwitcher.tsx

@@ -0,0 +1,51 @@
+import { createSignal, Show, For } from 'solid-js'
+import type { Component } from 'solid-js'
+import type { Locale } from '@geenius-i18n/shared'
+import { LOCALE_INFO } from '@geenius-i18n/shared'
+
+interface Props {
+  locales: Locale[]
+  current: Locale
+  onChange: (l: Locale) => void
+}
+
+export const LocaleSwitcher: Component<Props> = (props) => {
+  const [open, setOpen] = createSignal(false)
+
+  return (
+    <div class="i18n__locale-switcher">
+      <button
+        type="button"
+        class="i18n__locale-switcher-trigger"
+        onClick={() => setOpen((o) => !o)}
+      >
+        <span class="i18n__locale-switcher-flag">{LOCALE_INFO[props.current]?.flag}</span>
+        <span class="i18n__locale-switcher-label">{LOCALE_INFO[props.current]?.nativeName}</span>
+        <span class="i18n__locale-switcher-arrow">▾</span>
+      </button>
+
+      <Show when={open()}>
+        <div class="i18n__locale-switcher-dropdown">
+          <For each={props.locales}>
+            {(locale) => {
+              const info = LOCALE_INFO[locale]
+              return (
+                <button
+                  type="button"
+                  class={`i18n__locale-switcher-option${locale === props.current ? ' i18n__locale-switcher-option--active' : ''}`}
+                  onClick={() => { props.onChange(locale); setOpen(false) }}
+                >
+                  <span class="i18n__locale-switcher-option-flag">{info?.flag}</span>
+                  <span class="i18n__locale-switcher-option-name">{info?.nativeName}</span>
+                  <Show when={info?.direction === 'rtl'}>
+                    <span class="i18n__locale-switcher-option-rtl">RTL</span>
+                  </Show>
+                </button>
+              )
+            }}
+          </For>
+        </div>
+      </Show>
+    </div>
+  )
+}

package/packages/solidjs-css/src/components/MissingKeyAlert.tsx

@@ -0,0 +1,24 @@
+import { Show } from 'solid-js'
+import type { Component } from 'solid-js'
+import type { Locale } from '@geenius-i18n/shared'
+import { LOCALE_INFO } from '@geenius-i18n/shared'
+
+interface Props {
+  count: number
+  locale: Locale
+}
+
+export const MissingKeyAlert: Component<Props> = (props) => {
+  return (
+    <Show when={props.count > 0}>
+      <div class="i18n__missing-alert">
+        <span class="i18n__missing-alert-icon">⚠️</span>
+        <span class="i18n__missing-alert-text">
+          <span class="i18n__missing-alert-count">{props.count}</span>
+          {' '}missing key{props.count > 1 ? 's' : ''} for{' '}
+          <strong>{LOCALE_INFO[props.locale]?.name}</strong>
+        </span>
+      </div>
+    </Show>
+  )
+}

package/packages/solidjs-css/src/components/RTLWrapper.tsx

@@ -0,0 +1,16 @@
+import type { ParentComponent } from 'solid-js'
+import type { Locale } from '@geenius-i18n/shared'
+import { LOCALE_INFO } from '@geenius-i18n/shared'
+
+export const RTLWrapper: ParentComponent<{ locale?: Locale }> = (props) => {
+  const dir = () => props.locale ? LOCALE_INFO[props.locale]?.direction ?? 'ltr' : 'ltr'
+
+  return (
+    <div
+      class={`i18n__rtl-wrapper i18n__rtl-wrapper--${dir()}`}
+      dir={dir()}
+    >
+      {props.children}
+    </div>
+  )
+}

package/packages/solidjs-css/src/components/TranslationKeyRow.tsx

@@ -0,0 +1,47 @@
+import { Show } from 'solid-js'
+import type { Component } from 'solid-js'
+import type { Locale } from '@geenius-i18n/shared'
+
+interface Props {
+  translationKey: string
+  value: string
+  locale: Locale
+  namespace?: string
+  onEdit?: (key: string, value: string) => void
+  onDelete?: (key: string) => void
+}
+
+export const TranslationKeyRow: Component<Props> = (props) => {
+  return (
+    <div class="i18n__key-row">
+      <div class="i18n__key-row-key">{props.translationKey}</div>
+      <div class="i18n__key-row-value">{props.value}</div>
+      <div class="i18n__key-row-locale">
+        <span class="i18n__key-row-locale-badge">{props.locale.toUpperCase()}</span>
+        <Show when={props.namespace}>
+          <span class="i18n__key-row-namespace">{props.namespace}</span>
+        </Show>
+      </div>
+      <div class="i18n__key-row-actions">
+        <Show when={props.onEdit}>
+          <button
+            type="button"
+            class="i18n__key-row-btn i18n__key-row-btn--edit"
+            onClick={() => props.onEdit?.(props.translationKey, props.value)}
+          >
+            Edit
+          </button>
+        </Show>
+        <Show when={props.onDelete}>
+          <button
+            type="button"
+            class="i18n__key-row-btn i18n__key-row-btn--delete"
+            onClick={() => props.onDelete?.(props.translationKey)}
+          >
+            Delete
+          </button>
+        </Show>
+      </div>
+    </div>
+  )
+}

package/packages/solidjs-css/src/components/index.ts

@@ -0,0 +1,6 @@
+export { LocaleSwitcher } from './LocaleSwitcher'
+export { RTLWrapper } from './RTLWrapper'
+export { LocaleStatsCard } from './LocaleStatsCard'
+export { MissingKeyAlert } from './MissingKeyAlert'
+export { TranslationKeyRow } from './TranslationKeyRow'
+export { LocaleCard } from './LocaleCard'