npm package: @geenius/i18n
Description: Geenius I18n — Internationalization for Convex apps (React + SolidJS)
Author: Antigravity HQ
Latest version: 0.3.0

# @geenius/i18n

Internationalization for Convex apps with React and SolidJS support.

## Features

- 14 built-in locales with metadata (name, native name, direction, flag)
- RTL detection for Arabic and Hebrew
- Pluralization with `_zero`, `_one`, `_other` suffixes
- `{{variable}}` interpolation
- Intl-based date, number, and currency formatting
- localStorage locale persistence and browser detection
- Convex backend schema for translation management
- Admin dashboard components (Tailwind and vanilla CSS variants)

## Packages

| Package | Description |
|---------|-------------|
| `@geenius/i18n-shared` | Core types, utilities, locale data |
| `@geenius/i18n-convex` | Convex schema and query/mutation factories |
| `@geenius/i18n-react` | React hooks, components, admin pages (Tailwind) |
| `@geenius/i18n-solidjs` | SolidJS primitives, components, admin pages |
| `@geenius/i18n-react-css` | React components (vanilla CSS) |
| `@geenius/i18n-solidjs-css` | SolidJS components (vanilla CSS) |

## Quick Start

### React

```tsx
import { I18nProvider, useI18n } from '@geenius/i18n/react'

const translations = {
  greeting: 'Hello {{name}}!',
  items_zero: 'No items',
  items_one: '1 item',
  items_other: '{{count}} items',
}

function App() {
  return (
    <I18nProvider
      config={{ defaultLocale: 'en', supportedLocales: ['en', 'es', 'fr'], persistLocale: true, detectBrowser: true }}
      translations={translations}
    >
      <Dashboard />
    </I18nProvider>
  )
}

function Dashboard() {
  const { t, locale, setLocale, formatDate, formatCurrency, isRTL } = useI18n()

  return (
    <div dir={isRTL ? 'rtl' : 'ltr'}>
      <h1>{t('greeting', { name: 'Mehdi' })}</h1>
      <p>{formatDate(new Date())}</p>
      <p>{formatCurrency(49.99, 'USD')}</p>
      <button onClick={() => setLocale('es')}>Switch to Spanish</button>
    </div>
  )
}
```

### SolidJS

```tsx
import { I18nProvider, createI18n } from '@geenius/i18n/solidjs'

function Dashboard() {
  const { t, locale, setLocale } = createI18n()
  return <h1>{t('greeting', { name: 'Mehdi' })}</h1>
}
```

### Core Utilities

```ts
import { interpolate, t, plural, isRTL, formatDate, formatNumber, formatCurrency, detectLocale } from '@geenius/i18n/shared'

interpolate('Hello {{name}}!', { name: 'Alice' })  // "Hello Alice!"
isRTL('ar')  // true
formatCurrency(42.99, 'EUR', 'de')  // "42,99 €"
```

### Convex Backend

```ts
import { schema, createI18nQueries, createI18nMutations } from '@geenius/i18n/convex'
import { query, mutation } from './_generated/server'

// Wire into your Convex project
const { listTranslations, searchTranslations } = createI18nQueries(query)
const { upsertTranslation, importTranslations } = createI18nMutations(mutation)

export { listTranslations, searchTranslations, upsertTranslation, importTranslations }
```

### Config Builder

```ts
import { createI18nConfig, i18nPresets } from '@geenius/i18n/shared'

// Builder pattern
const config = createI18nConfig()
  .withDefaultLocale('en')
  .withSupportedLocales(['en', 'fr', 'de', 'es'])
  .withFallbackLocale('en')
  .withDebug(true)
  .build()

// Or use presets
const simple = i18nPresets.simple('en')
const multi = i18nPresets.multi()
const global = i18nPresets.global()
const dev = i18nPresets.development()
```

## Supported Locales

English, French, German, Spanish, Portuguese, Italian, Dutch, Russian, Chinese, Japanese, Korean, Arabic (RTL), Hebrew (RTL), Turkish

## Development

```bash
pnpm install
pnpm build    # Build all packages
pnpm test     # Run tests
```

## License

MIT