@geenius/i18n 0.1.0

package/packages/solidjs-css/src/index.tsx

@@ -0,0 +1,3 @@
+export * from './primitives'
+export * from './components'
+export * from './pages'

package/packages/solidjs-css/src/pages/I18nAdminPage.tsx

@@ -0,0 +1,134 @@
+import { createSignal, createMemo, Show, For } from 'solid-js'
+import type { Component } from 'solid-js'
+import type { Locale, LocaleStat } from '@geenius-i18n/shared'
+import { LOCALE_INFO, ALL_LOCALES, flattenDict } from '@geenius-i18n/shared'
+import type { TranslationDict } from '@geenius-i18n/shared'
+import { LocaleStatsCard } from '../components/LocaleStatsCard'
+import { MissingKeyAlert } from '../components/MissingKeyAlert'
+import { TranslationKeyRow } from '../components/TranslationKeyRow'
+import { LocaleCard } from '../components/LocaleCard'
+
+interface Props {
+  stats?: LocaleStat[]
+  translations?: Record<string, Record<string, string>>
+  supportedLocales?: Locale[]
+  onUpsert?: (locale: string, key: string, value: string) => void
+  onDelete?: (locale: string, key: string) => void
+}
+
+export const I18nAdminPage: Component<Props> = (props) => {
+  const locales = () => props.supportedLocales ?? ALL_LOCALES
+  const [selectedLocale, setSelectedLocale] = createSignal<Locale>(locales()[0] ?? 'en')
+  const [search, setSearch] = createSignal('')
+
+  const allStats = () => props.stats ?? []
+  const allTranslations = () => props.translations ?? {}
+
+  const selectedStat = createMemo(() =>
+    allStats().find((s) => s.locale === selectedLocale())
+  )
+
+  const missingCount = createMemo(() => selectedStat()?.missingKeys ?? 0)
+
+  const translationEntries = createMemo(() => {
+    const localeTranslations = allTranslations()[selectedLocale()]
+    if (!localeTranslations) return []
+    const entries = Object.entries(localeTranslations)
+    const q = search().toLowerCase()
+    if (!q) return entries
+    return entries.filter(
+      ([key, value]) => key.toLowerCase().includes(q) || value.toLowerCase().includes(q)
+    )
+  })
+
+  const coverageForLocale = (locale: Locale) => {
+    const stat = allStats().find((s) => s.locale === locale)
+    return stat?.coverage ?? 0
+  }
+
+  return (
+    <div class="i18n__admin-page">
+      <div class="i18n__admin-container">
+        {/* Header */}
+        <div class="i18n__page-header">
+          <h1 class="i18n__page-title">Translation Admin</h1>
+          <p class="i18n__page-subtitle">Manage translations across all supported locales</p>
+        </div>
+
+        <div class="i18n__admin-body">
+          {/* Stats section */}
+          <Show when={allStats().length > 0}>
+            <section class="i18n__admin-section">
+              <h2 class="i18n__admin-section-title">Locale Coverage</h2>
+              <div class="i18n__stats-grid">
+                <For each={allStats()}>
+                  {(stat) => <LocaleStatsCard stat={stat} />}
+                </For>
+              </div>
+            </section>
+          </Show>
+
+          {/* Missing keys alert */}
+          <MissingKeyAlert count={missingCount()} locale={selectedLocale()} />
+
+          {/* Locale selector */}
+          <section class="i18n__admin-section">
+            <h2 class="i18n__admin-section-title">Select Locale</h2>
+            <div class="i18n__locale-grid">
+              <For each={locales()}>
+                {(locale) => (
+                  <LocaleCard
+                    locale={locale}
+                    coverage={coverageForLocale(locale)}
+                    isSelected={locale === selectedLocale()}
+                    onSelect={setSelectedLocale}
+                  />
+                )}
+              </For>
+            </div>
+          </section>
+
+          {/* Search + translation rows */}
+          <section class="i18n__admin-section">
+            <div class="i18n__admin-section-header">
+              <h2 class="i18n__admin-section-title">
+                Translations — {LOCALE_INFO[selectedLocale()]?.nativeName}
+              </h2>
+              <input
+                type="text"
+                class="i18n__search-input"
+                placeholder="Search keys or values…"
+                value={search()}
+                onInput={(e) => setSearch(e.currentTarget.value)}
+              />
+            </div>
+
+            <Show
+              when={translationEntries().length > 0}
+              fallback={
+                <div class="i18n__empty-state">
+                  <span class="i18n__empty-state-icon">🌐</span>
+                  <p class="i18n__empty-state-text">No translations for {LOCALE_INFO[selectedLocale()]?.name}</p>
+                </div>
+              }
+            >
+              <div class="i18n__translation-list">
+                <For each={translationEntries()}>
+                  {([key, value]) => (
+                    <TranslationKeyRow
+                      translationKey={key}
+                      value={value}
+                      locale={selectedLocale()}
+                      onEdit={(k, v) => props.onUpsert?.(selectedLocale(), k, v)}
+                      onDelete={(k) => props.onDelete?.(selectedLocale(), k)}
+                    />
+                  )}
+                </For>
+              </div>
+            </Show>
+          </section>
+        </div>
+      </div>
+    </div>
+  )
+}

package/packages/solidjs-css/src/pages/LocalePreviewPage.tsx

@@ -0,0 +1,116 @@
+import { Show } from 'solid-js'
+import type { Component } from 'solid-js'
+import type { I18nConfig, TranslationDict } from '@geenius-i18n/shared'
+import { LOCALE_INFO, ALL_LOCALES } from '@geenius-i18n/shared'
+import { I18nProvider, createI18n } from '../primitives'
+import { LocaleSwitcher } from '../components/LocaleSwitcher'
+import { RTLWrapper } from '../components/RTLWrapper'
+
+function PreviewInfoCard(props: { label: string; value: string; highlight?: boolean }) {
+  return (
+    <div class="i18n__preview-info-card">
+      <span class="i18n__preview-info-label">{props.label}</span>
+      <span class={`i18n__preview-info-value${props.highlight ? ' i18n__preview-info-value--highlight' : ''}`}>
+        {props.value}
+      </span>
+    </div>
+  )
+}
+
+function FormatExample(props: { label: string; value: string }) {
+  return (
+    <div class="i18n__preview-example">
+      <span class="i18n__preview-label">{props.label}</span>
+      <span class="i18n__preview-value">{props.value}</span>
+    </div>
+  )
+}
+
+function PreviewContent() {
+  const { locale, t, direction, isRTL, setLocale, formatDate, formatNumber, formatCurrency } = createI18n()
+  const info = () => LOCALE_INFO[locale()]
+
+  return (
+    <div class="i18n__preview-page">
+      <div class="i18n__preview-container">
+        {/* Header */}
+        <div class="i18n__preview-header">
+          <div class="i18n__preview-header-text">
+            <h1 class="i18n__preview-title">Locale Preview</h1>
+            <p class="i18n__preview-subtitle">Live preview of locale formatting and direction</p>
+          </div>
+          <LocaleSwitcher locales={ALL_LOCALES} current={locale()} onChange={setLocale} />
+        </div>
+
+        {/* Info cards */}
+        <div class="i18n__preview-info-grid">
+          <PreviewInfoCard label="Locale" value={locale().toUpperCase()} />
+          <PreviewInfoCard label="Direction" value={direction()} highlight={isRTL()} />
+          <PreviewInfoCard label="Native Name" value={info()?.nativeName ?? '?'} />
+          <PreviewInfoCard label="Flag" value={info()?.flag ?? '?'} />
+        </div>
+
+        {/* RTL-aware content */}
+        <RTLWrapper locale={locale()}>
+          <div class="i18n__preview-content">
+            {/* Formatting */}
+            <section class="i18n__preview-section">
+              <h3 class="i18n__preview-section-title">Formatting Examples</h3>
+              <div class="i18n__preview-examples">
+                <FormatExample label="Date" value={formatDate(new Date())} />
+                <FormatExample label="Date (full)" value={formatDate(new Date(), { dateStyle: 'full' })} />
+                <FormatExample label="Number" value={formatNumber(1234567.89)} />
+                <FormatExample label="Currency (USD)" value={formatCurrency(9999.99, 'USD')} />
+                <FormatExample label="Currency (EUR)" value={formatCurrency(4250.50, 'EUR')} />
+                <FormatExample label="Percentage" value={formatNumber(0.85, { style: 'percent' })} />
+              </div>
+            </section>
+
+            {/* RTL notice */}
+            <Show when={isRTL()}>
+              <div class="i18n__preview-rtl-notice">
+                ⚡ RTL mode active — text flows right-to-left
+              </div>
+            </Show>
+
+            {/* Sample text */}
+            <section class="i18n__preview-section">
+              <h3 class="i18n__preview-section-title">Sample Text</h3>
+              <p class="i18n__preview-sample-text">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
+                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+                exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+              </p>
+            </section>
+
+            {/* Translation test */}
+            <section class="i18n__preview-section">
+              <h3 class="i18n__preview-section-title">Translation Lookup</h3>
+              <div class="i18n__preview-examples">
+                <FormatExample label="greeting" value={t('greeting')} />
+                <FormatExample label="auth.login" value={t('auth.login')} />
+                <FormatExample label="dashboard.title" value={t('dashboard.title')} />
+              </div>
+            </section>
+          </div>
+        </RTLWrapper>
+      </div>
+    </div>
+  )
+}
+
+export const LocalePreviewPage: Component<{ config?: Partial<I18nConfig>; translations?: TranslationDict }> = (props) => {
+  const fullConfig: I18nConfig = {
+    defaultLocale: 'en',
+    supportedLocales: ALL_LOCALES,
+    detectBrowser: true,
+    persistLocale: true,
+    ...props.config,
+  }
+
+  return (
+    <I18nProvider config={fullConfig} translations={props.translations}>
+      <PreviewContent />
+    </I18nProvider>
+  )
+}

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

@@ -0,0 +1,2 @@
+export { I18nAdminPage } from './I18nAdminPage'
+export { LocalePreviewPage } from './LocalePreviewPage'

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

@@ -0,0 +1 @@
+export * from '@geenius-i18n/solidjs'

package/packages/solidjs-css/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src",
+    "jsxImportSource": "solid-js",
+    "jsx": "preserve",
+    "strict": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler"
+  },
+  "include": [
+    "src"
+  ]
+}

package/packages/solidjs-css/tsup.config.bundled_dcjc4sct21j.mjs

@@ -0,0 +1,18 @@
+// tsup.config.ts
+import { defineConfig } from "tsup";
+import { solidPlugin } from "esbuild-plugin-solid";
+var tsup_config_default = defineConfig({
+  entry: ["src/index.tsx", "src/styles.css"],
+  outDir: "dist",
+  format: ["esm", "cjs"],
+  dts: true,
+  sourcemap: true,
+  clean: true,
+  treeshake: true,
+  external: ["solid-js"],
+  esbuildPlugins: [solidPlugin()]
+});
+export {
+  tsup_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidHN1cC5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9faW5qZWN0ZWRfZmlsZW5hbWVfXyA9IFwiL1VzZXJzL21laGRpbmFiaGFuaS9Qcm9qZWN0cy9hbnRpZ3Jhdml0eS9ib2lsZXJwbGF0ZXMvZ2Vlbml1cy1wYWNrYWdlcy9nZWVuaXVzLWkxOG4vcGFja2FnZXMvc29saWRqcy1jc3MvdHN1cC5jb25maWcudHNcIjtjb25zdCBfX2luamVjdGVkX2Rpcm5hbWVfXyA9IFwiL1VzZXJzL21laGRpbmFiaGFuaS9Qcm9qZWN0cy9hbnRpZ3Jhdml0eS9ib2lsZXJwbGF0ZXMvZ2Vlbml1cy1wYWNrYWdlcy9nZWVuaXVzLWkxOG4vcGFja2FnZXMvc29saWRqcy1jc3NcIjtjb25zdCBfX2luamVjdGVkX2ltcG9ydF9tZXRhX3VybF9fID0gXCJmaWxlOi8vL1VzZXJzL21laGRpbmFiaGFuaS9Qcm9qZWN0cy9hbnRpZ3Jhdml0eS9ib2lsZXJwbGF0ZXMvZ2Vlbml1cy1wYWNrYWdlcy9nZWVuaXVzLWkxOG4vcGFja2FnZXMvc29saWRqcy1jc3MvdHN1cC5jb25maWcudHNcIjtpbXBvcnQgeyBkZWZpbmVDb25maWcgfSBmcm9tICd0c3VwJ1xuaW1wb3J0IHsgc29saWRQbHVnaW4gfSBmcm9tICdlc2J1aWxkLXBsdWdpbi1zb2xpZCdcblxuZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29uZmlnKHtcbiAgICBlbnRyeTogWydzcmMvaW5kZXgudHN4JywgJ3NyYy9zdHlsZXMuY3NzJ10sXG4gICAgb3V0RGlyOiAnZGlzdCcsXG4gICAgZm9ybWF0OiBbJ2VzbScsICdjanMnXSxcbiAgICBkdHM6IHRydWUsXG4gICAgc291cmNlbWFwOiB0cnVlLFxuICAgIGNsZWFuOiB0cnVlLFxuICAgIHRyZWVzaGFrZTogdHJ1ZSxcbiAgICBleHRlcm5hbDogWydzb2xpZC1qcyddLFxuICAgIGVzYnVpbGRQbHVnaW5zOiBbc29saWRQbHVnaW4oKV0sXG59KVxuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUFzYyxTQUFTLG9CQUFvQjtBQUNuZSxTQUFTLG1CQUFtQjtBQUU1QixJQUFPLHNCQUFRLGFBQWE7QUFBQSxFQUN4QixPQUFPLENBQUMsaUJBQWlCLGdCQUFnQjtBQUFBLEVBQ3pDLFFBQVE7QUFBQSxFQUNSLFFBQVEsQ0FBQyxPQUFPLEtBQUs7QUFBQSxFQUNyQixLQUFLO0FBQUEsRUFDTCxXQUFXO0FBQUEsRUFDWCxPQUFPO0FBQUEsRUFDUCxXQUFXO0FBQUEsRUFDWCxVQUFVLENBQUMsVUFBVTtBQUFBLEVBQ3JCLGdCQUFnQixDQUFDLFlBQVksQ0FBQztBQUNsQyxDQUFDOyIsCiAgIm5hbWVzIjogW10KfQo=

package/packages/solidjs-css/tsup.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from 'tsup'
+import { solidPlugin } from 'esbuild-plugin-solid'
+
+export default defineConfig({
+    entry: ['src/index.tsx', 'src/styles.css'],
+    outDir: 'dist',
+    format: ['esm', 'cjs'],
+    dts: true,
+    sourcemap: true,
+    clean: true,
+    treeshake: true,
+    external: ['solid-js'],
+    esbuildPlugins: [solidPlugin()],
+})

package/pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+packages:
+  - 'packages/*'

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "esModuleInterop": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "outDir": "dist",
+    "rootDir": "src",
+    "jsx": "react-jsx",
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true
+  },
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
+}