diff --git a/.gitignore b/.gitignore index ca446272..8f57eee7 100644 --- a/.gitignore +++ b/.gitignore @@ -58,6 +58,8 @@ apps/site/.source # Test artifacts test-screenshots +test-results +playwright-report # Vite timestamp files *.timestamp-*.mjs diff --git a/ROADMAP.md b/ROADMAP.md index 1e573c1b..4f86e28d 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -70,26 +70,26 @@ ObjectUI is a universal Server-Driven UI (SDUI) engine built on React + Tailwind #### 1.1 Test System Enhancement (4 weeks) **Target:** 80%+ test coverage -- [ ] Add tests for all core modules (@object-ui/core) -- [ ] Add tests for all components (@object-ui/components) -- [ ] Add E2E test framework (Playwright) +- [x] Add tests for all core modules (@object-ui/core) +- [x] Add tests for all components (@object-ui/components) +- [x] Add E2E test framework (Playwright) - [ ] Add performance benchmark suite - [ ] Visual regression tests (Storybook snapshot + Chromatic) #### 1.2 Internationalization (i18n) Support (3 weeks) **Target:** 10+ languages, RTL layout -- [ ] Create @object-ui/i18n package -- [ ] Integrate i18next library -- [ ] Add translation support to all components -- [ ] Provide 10+ language packs (zh, en, ja, ko, de, fr, es, pt, ru, ar) -- [ ] RTL layout support -- [ ] Date/currency formatting utilities +- [x] Create @object-ui/i18n package +- [x] Integrate i18next library +- [x] Add translation support to all components +- [x] Provide 10+ language packs (zh, en, ja, ko, de, fr, es, pt, ru, ar) +- [x] RTL layout support +- [x] Date/currency formatting utilities #### 1.3 Documentation System Upgrade (2 weeks) **Target:** World-class documentation -- [ ] 5-minute quick start guide +- [x] 5-minute quick start guide - [ ] Complete zero-to-deployment tutorial - [ ] Video tutorial series - [ ] Complete case studies (CRM, E-commerce, Analytics, Workflow) @@ -98,6 +98,9 @@ ObjectUI is a universal Server-Driven UI (SDUI) engine built on React + Tailwind #### 1.4 Performance Optimization (3 weeks) **Target:** 50%+ performance improvement +- [x] Enhanced lazy loading with retry and error boundaries +- [x] Plugin preloading utilities + **Performance Targets:** - First Contentful Paint: 800ms → 400ms - Largest Contentful Paint: 1.2s → 600ms diff --git a/content/docs/guide/meta.json b/content/docs/guide/meta.json index 622540cc..4399a6da 100644 --- a/content/docs/guide/meta.json +++ b/content/docs/guide/meta.json @@ -1,6 +1,7 @@ { "title": "Guide", "pages": [ + "quick-start", "architecture", "schema-rendering", "layout", diff --git a/content/docs/guide/quick-start.md b/content/docs/guide/quick-start.md new file mode 100644 index 00000000..e749dc5f --- /dev/null +++ b/content/docs/guide/quick-start.md @@ -0,0 +1,196 @@ +--- +title: "Quick Start" +description: "Get up and running with ObjectUI in 5 minutes - install, configure, and render your first server-driven UI" +--- + +# Quick Start + +Get up and running with ObjectUI in **5 minutes**. This guide walks you through installation, basic setup, and rendering your first server-driven UI. + +## Prerequisites + +- **Node.js** 20+ +- **pnpm** 9+ (recommended) or npm/yarn +- Basic knowledge of **React** and **TypeScript** + +## Step 1: Create a React Project + +If you don't have an existing React project, create one with Vite: + +```bash +pnpm create vite my-app --template react-ts +cd my-app +``` + +## Step 2: Install ObjectUI + +Install the core ObjectUI packages: + +```bash +pnpm add @object-ui/react @object-ui/core @object-ui/types @object-ui/components @object-ui/fields +``` + +Install Tailwind CSS (required for styling): + +```bash +pnpm add -D tailwindcss @tailwindcss/vite +``` + +## Step 3: Configure Tailwind CSS + +Add Tailwind to your `vite.config.ts`: + +```ts +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; +import tailwindcss from '@tailwindcss/vite'; + +export default defineConfig({ + plugins: [react(), tailwindcss()], +}); +``` + +Add to your `src/index.css`: + +```css +@import "tailwindcss"; +``` + +## Step 4: Register Components + +Create `src/setup.ts` to register the built-in components: + +```ts +import { Registry } from '@object-ui/core'; +import { registerAllComponents } from '@object-ui/components'; +import { registerAllFields } from '@object-ui/fields'; + +// Register the built-in component renderers +registerAllComponents(Registry); +registerAllFields(Registry); +``` + +## Step 5: Render Your First UI + +Replace `src/App.tsx` with: + +```tsx +import './setup'; +import { SchemaRenderer } from '@object-ui/react'; + +// Define your UI as JSON schema +const schema = { + type: 'form', + fields: [ + { + name: 'name', + label: 'Full Name', + type: 'string', + required: true, + }, + { + name: 'email', + label: 'Email Address', + type: 'string', + widget: 'email', + }, + { + name: 'role', + label: 'Role', + type: 'string', + widget: 'select', + options: [ + { label: 'Admin', value: 'admin' }, + { label: 'Editor', value: 'editor' }, + { label: 'Viewer', value: 'viewer' }, + ], + }, + ], + submitLabel: 'Create User', +}; + +function App() { + return ( +
+

ObjectUI Demo

+ { + console.log('Form submitted:', data); + alert(JSON.stringify(data, null, 2)); + }} + /> +
+ ); +} + +export default App; +``` + +## Step 6: Run the App + +```bash +pnpm dev +``` + +Open [http://localhost:5173](http://localhost:5173) — you should see a fully functional form rendered from JSON! + +## What Just Happened? + +1. **JSON Schema** → You defined a form as a JSON object with fields, types, and labels +2. **Registry** → Built-in components were registered to handle each schema type +3. **SchemaRenderer** → Converted the JSON into interactive React components (Shadcn UI) +4. **Zero UI Code** → No JSX needed for the form fields — it's all driven by data + +## Next Steps + +### Add a Data Table + +```tsx +const tableSchema = { + type: 'crud', + resource: 'users', + columns: [ + { name: 'name', label: 'Name' }, + { name: 'email', label: 'Email' }, + { name: 'role', label: 'Role' }, + ], +}; +``` + +### Add Internationalization + +```bash +pnpm add @object-ui/i18n +``` + +```tsx +import { I18nProvider } from '@object-ui/i18n'; + +function App() { + return ( + + + + ); +} +``` + +### Use Lazy Loading for Plugins + +```tsx +import { createLazyPlugin } from '@object-ui/react'; + +const ObjectGrid = createLazyPlugin( + () => import('@object-ui/plugin-grid'), + { fallback:
Loading grid...
} +); +``` + +### Learn More + +- [Architecture Overview](/docs/guide/architecture) — Understand how ObjectUI works +- [Schema Rendering](/docs/guide/schema-rendering) — Deep dive into schema rendering +- [Component Registry](/docs/guide/component-registry) — Customize and extend components +- [Plugins](/docs/guide/plugins) — Add views like Grid, Kanban, Charts +- [Fields Guide](/docs/guide/fields) — All 30+ field types diff --git a/e2e/smoke.spec.ts b/e2e/smoke.spec.ts new file mode 100644 index 00000000..24048af5 --- /dev/null +++ b/e2e/smoke.spec.ts @@ -0,0 +1,29 @@ +import { test, expect } from '@playwright/test'; + +/** + * Smoke test to verify the console app loads correctly. + * This is a foundational E2E test that validates the basic app shell. + */ +test.describe('Console App', () => { + test('should load the home page', async ({ page }) => { + await page.goto('/'); + // Wait for the app to render + await page.waitForLoadState('networkidle'); + // The page should have rendered something (not blank) + const body = page.locator('body'); + await expect(body).not.toBeEmpty(); + }); + + test('should display the navigation sidebar', async ({ page }) => { + await page.goto('/'); + await page.waitForLoadState('networkidle'); + // The app shell should contain a navigation area + const nav = page.locator('nav').first(); + await expect(nav).toBeVisible(); + }); + + test('should have correct page title', async ({ page }) => { + await page.goto('/'); + await expect(page).toHaveTitle(/.+/); + }); +}); diff --git a/package.json b/package.json index 5dd78ddf..917cbc80 100644 --- a/package.json +++ b/package.json @@ -61,7 +61,9 @@ "changeset:version": "changeset version", "changeset:publish": "changeset publish", "pretest:coverage": "turbo run build --filter=@object-ui/types --filter=@object-ui/core --filter=@object-ui/react --filter=@object-ui/components --filter=@object-ui/fields --filter=@object-ui/layout --filter=@object-ui/plugin-kanban --filter=@object-ui/plugin-charts --filter=@object-ui/plugin-form --filter=@object-ui/plugin-grid --filter=@object-ui/plugin-dashboard", - "test:compliance": "vitest run src/__tests__/compliance.test.tsx" + "test:compliance": "vitest run src/__tests__/compliance.test.tsx", + "test:e2e": "playwright test", + "test:e2e:ui": "playwright test --ui" }, "devDependencies": { "@changesets/cli": "^2.29.8", @@ -99,6 +101,7 @@ "jsdom": "^28.0.0", "msw": "^2.12.7", "msw-storybook-addon": "^2.0.6", + "@playwright/test": "^1.58.2", "playwright": "^1.58.0", "prettier": "^3.8.1", "react": "19.2.4", diff --git a/packages/core/src/builder/__tests__/schema-builder.test.ts b/packages/core/src/builder/__tests__/schema-builder.test.ts new file mode 100644 index 00000000..0ffcfba6 --- /dev/null +++ b/packages/core/src/builder/__tests__/schema-builder.test.ts @@ -0,0 +1,235 @@ +import { describe, it, expect } from 'vitest'; +import { form, crud, button, input, card, grid, flex } from '../../builder/schema-builder'; + +describe('SchemaBuilder', () => { + describe('form()', () => { + it('creates a basic form schema', () => { + const schema = form().id('test-form').build(); + expect(schema).toBeDefined(); + expect(schema.type).toBe('form'); + expect(schema.id).toBe('test-form'); + }); + + it('supports field definitions', () => { + const schema = form() + .field({ name: 'email', label: 'Email', type: 'string' }) + .build(); + expect(schema.fields).toHaveLength(1); + expect(schema.fields![0].name).toBe('email'); + }); + + it('supports bulk fields', () => { + const schema = form() + .fields([ + { name: 'first_name', label: 'First Name', type: 'string' }, + { name: 'last_name', label: 'Last Name', type: 'string' }, + ]) + .build(); + expect(schema.fields).toHaveLength(2); + }); + + it('supports default values', () => { + const schema = form() + .defaultValues({ status: 'active' }) + .build(); + expect(schema.defaultValues).toEqual({ status: 'active' }); + }); + + it('supports submit label', () => { + const schema = form() + .submitLabel('Create') + .build(); + expect(schema.submitLabel).toBe('Create'); + }); + + it('supports layout option', () => { + const schema = form() + .layout('vertical') + .build(); + expect(schema.layout).toBe('vertical'); + }); + + it('supports columns', () => { + const schema = form() + .columns(2) + .build(); + expect(schema.columns).toBe(2); + }); + + it('supports chaining', () => { + const schema = form() + .id('chained') + .field({ name: 'name', label: 'Name', type: 'string' }) + .submitLabel('Submit') + .layout('horizontal') + .columns(3) + .build(); + expect(schema.id).toBe('chained'); + expect(schema.fields).toHaveLength(1); + expect(schema.submitLabel).toBe('Submit'); + expect(schema.layout).toBe('horizontal'); + expect(schema.columns).toBe(3); + }); + }); + + describe('crud()', () => { + it('creates a basic CRUD schema', () => { + const schema = crud().id('test-crud').build(); + expect(schema).toBeDefined(); + expect(schema.type).toBe('crud'); + expect(schema.id).toBe('test-crud'); + }); + + it('supports resource definition', () => { + const schema = crud() + .resource('users') + .build(); + expect(schema.resource).toBe('users'); + }); + + it('supports column definitions', () => { + const schema = crud() + .column({ name: 'name', label: 'Name' }) + .build(); + expect(schema.columns).toHaveLength(1); + expect(schema.columns![0].name).toBe('name'); + }); + + it('supports bulk columns', () => { + const schema = crud() + .columns([ + { name: 'id', label: 'ID' }, + { name: 'name', label: 'Name' }, + ]) + .build(); + expect(schema.columns).toHaveLength(2); + }); + + it('supports CRUD operations', () => { + const schema = crud() + .api('/api/users') + .enableCreate() + .enableUpdate() + .enableDelete() + .build(); + expect(schema.operations).toBeDefined(); + expect(schema.operations!.create.enabled).toBe(true); + expect(schema.operations!.update.enabled).toBe(true); + expect(schema.operations!.delete.enabled).toBe(true); + }); + + it('supports pagination', () => { + const schema = crud() + .pagination(25) + .build(); + expect(schema.pagination).toBeDefined(); + expect(schema.pagination!.enabled).toBe(true); + expect(schema.pagination!.pageSize).toBe(25); + }); + }); + + describe('button()', () => { + it('creates a button schema', () => { + const schema = button().id('btn').build(); + expect(schema).toBeDefined(); + expect(schema.type).toBe('button'); + expect(schema.id).toBe('btn'); + }); + + it('supports label', () => { + const schema = button() + .label('Click Me') + .build(); + expect(schema.label).toBe('Click Me'); + }); + + it('supports variant', () => { + const schema = button() + .variant('destructive') + .build(); + expect(schema.variant).toBe('destructive'); + }); + }); + + describe('input()', () => { + it('creates an input schema', () => { + const schema = input().id('my-input').build(); + expect(schema).toBeDefined(); + expect(schema.type).toBe('input'); + expect(schema.id).toBe('my-input'); + }); + + it('supports label and placeholder', () => { + const schema = input() + .label('Username') + .placeholder('Enter username') + .build(); + expect(schema.label).toBe('Username'); + expect(schema.placeholder).toBe('Enter username'); + }); + }); + + describe('card()', () => { + it('creates a card schema', () => { + const schema = card().id('my-card').build(); + expect(schema).toBeDefined(); + expect(schema.type).toBe('card'); + expect(schema.id).toBe('my-card'); + }); + }); + + describe('grid()', () => { + it('creates a grid schema', () => { + const schema = grid().id('my-grid').build(); + expect(schema).toBeDefined(); + expect(schema.type).toBe('grid'); + expect(schema.id).toBe('my-grid'); + }); + }); + + describe('flex()', () => { + it('creates a flex schema', () => { + const schema = flex().id('my-flex').build(); + expect(schema).toBeDefined(); + expect(schema.type).toBe('flex'); + expect(schema.id).toBe('my-flex'); + }); + + it('supports direction', () => { + const schema = flex() + .direction('row') + .build(); + expect(schema.direction).toBe('row'); + }); + }); + + describe('common builder properties', () => { + it('supports className', () => { + const schema = button() + .className('my-class') + .build(); + expect(schema.className).toBe('my-class'); + }); + + it('supports visible', () => { + const schema = button() + .visible(false) + .build(); + expect(schema.visible).toBe(false); + }); + + it('supports disabled', () => { + const schema = button() + .disabled(true) + .build(); + expect(schema.disabled).toBe(true); + }); + + it('supports testId', () => { + const schema = button() + .testId('test-btn') + .build(); + expect(schema.testId).toBe('test-btn'); + }); + }); +}); diff --git a/packages/core/src/evaluator/__tests__/ExpressionContext.test.ts b/packages/core/src/evaluator/__tests__/ExpressionContext.test.ts new file mode 100644 index 00000000..20fdf1c5 --- /dev/null +++ b/packages/core/src/evaluator/__tests__/ExpressionContext.test.ts @@ -0,0 +1,110 @@ +import { describe, it, expect } from 'vitest'; +import { ExpressionContext } from '../../evaluator/ExpressionContext'; + +describe('ExpressionContext', () => { + it('creates a context with initial data', () => { + const ctx = new ExpressionContext({ name: 'Alice', age: 30 }); + expect(ctx.get('name')).toBe('Alice'); + expect(ctx.get('age')).toBe(30); + }); + + it('creates an empty context', () => { + const ctx = new ExpressionContext(); + expect(ctx.get('anything')).toBeUndefined(); + }); + + it('sets and gets values', () => { + const ctx = new ExpressionContext(); + ctx.set('key', 'value'); + expect(ctx.get('key')).toBe('value'); + }); + + it('checks existence with has()', () => { + const ctx = new ExpressionContext({ x: 1 }); + expect(ctx.has('x')).toBe(true); + expect(ctx.has('y')).toBe(false); + }); + + it('supports dot notation for nested access', () => { + const ctx = new ExpressionContext({ user: { name: 'Bob', address: { city: 'NYC' } } }); + expect(ctx.get('user.name')).toBe('Bob'); + expect(ctx.get('user.address.city')).toBe('NYC'); + }); + + it('returns undefined for non-existent nested paths', () => { + const ctx = new ExpressionContext({ user: { name: 'Bob' } }); + expect(ctx.get('user.email')).toBeUndefined(); + expect(ctx.get('user.address.city')).toBeUndefined(); + }); + + describe('scope management', () => { + it('pushScope adds a new scope', () => { + const ctx = new ExpressionContext({ base: 'value' }); + ctx.pushScope({ scoped: 'data' }); + expect(ctx.get('scoped')).toBe('data'); + expect(ctx.get('base')).toBe('value'); + }); + + it('popScope removes the latest scope', () => { + const ctx = new ExpressionContext({ base: 'value' }); + ctx.pushScope({ temp: 'data' }); + expect(ctx.get('temp')).toBe('data'); + ctx.popScope(); + expect(ctx.get('temp')).toBeUndefined(); + expect(ctx.get('base')).toBe('value'); + }); + + it('inner scope shadows outer scope', () => { + const ctx = new ExpressionContext({ name: 'outer' }); + ctx.pushScope({ name: 'inner' }); + expect(ctx.get('name')).toBe('inner'); + ctx.popScope(); + expect(ctx.get('name')).toBe('outer'); + }); + + it('supports multiple nested scopes', () => { + const ctx = new ExpressionContext({ level: 0 }); + ctx.pushScope({ level: 1 }); + ctx.pushScope({ level: 2 }); + expect(ctx.get('level')).toBe(2); + ctx.popScope(); + expect(ctx.get('level')).toBe(1); + ctx.popScope(); + expect(ctx.get('level')).toBe(0); + }); + }); + + describe('toObject', () => { + it('flattens all scopes into one object', () => { + const ctx = new ExpressionContext({ a: 1 }); + ctx.pushScope({ b: 2 }); + const obj = ctx.toObject(); + expect(obj.a).toBe(1); + expect(obj.b).toBe(2); + }); + + it('inner scope values take precedence in flattened object', () => { + const ctx = new ExpressionContext({ x: 'outer' }); + ctx.pushScope({ x: 'inner' }); + const obj = ctx.toObject(); + expect(obj.x).toBe('inner'); + }); + }); + + describe('createChild', () => { + it('creates a child context with additional data', () => { + const parent = new ExpressionContext({ parent: 'value' }); + const child = parent.createChild({ child: 'data' }); + expect(child.get('parent')).toBe('value'); + expect(child.get('child')).toBe('data'); + }); + + it('child modifications do not affect parent', () => { + const parent = new ExpressionContext({ shared: 'original' }); + const child = parent.createChild({}); + child.set('shared', 'modified'); + expect(child.get('shared')).toBe('modified'); + expect(parent.get('shared')).toBe('original'); + }); + }); +}); diff --git a/packages/core/src/validation/__tests__/schema-validator.test.ts b/packages/core/src/validation/__tests__/schema-validator.test.ts new file mode 100644 index 00000000..6e0c0ee1 --- /dev/null +++ b/packages/core/src/validation/__tests__/schema-validator.test.ts @@ -0,0 +1,118 @@ +import { describe, it, expect } from 'vitest'; +import { + validateSchema, + assertValidSchema, + isValidSchema, + formatValidationErrors, +} from '../../validation/schema-validator'; + +describe('schema-validator', () => { + describe('validateSchema', () => { + it('validates a minimal valid schema', () => { + const result = validateSchema({ type: 'form' }); + expect(result.valid).toBe(true); + expect(result.errors).toHaveLength(0); + }); + + it('rejects schema without type', () => { + const result = validateSchema({} as any); + expect(result.valid).toBe(false); + expect(result.errors.length).toBeGreaterThan(0); + }); + + it('validates CRUD schema with columns', () => { + const result = validateSchema({ + type: 'crud', + columns: [{ name: 'id', label: 'ID' }], + api: '/api/users', + }); + expect(result.valid).toBe(true); + }); + + it('warns about CRUD without columns', () => { + const result = validateSchema({ type: 'crud' }); + const hasColumnsIssue = [...result.errors, ...result.warnings].some( + (e) => e.message.toLowerCase().includes('column'), + ); + expect(hasColumnsIssue).toBe(true); + }); + + it('validates form with fields', () => { + const result = validateSchema({ + type: 'form', + fields: [ + { name: 'email', label: 'Email', type: 'string' }, + ], + }); + expect(result.valid).toBe(true); + }); + + it('detects duplicate field names in forms', () => { + const result = validateSchema({ + type: 'form', + fields: [ + { name: 'email', label: 'Email', type: 'string' }, + { name: 'email', label: 'Email 2', type: 'string' }, + ], + }); + const hasDuplicateWarning = [...result.errors, ...result.warnings].some( + (e) => e.message.toLowerCase().includes('duplicate'), + ); + expect(hasDuplicateWarning).toBe(true); + }); + + it('validates nested children', () => { + const result = validateSchema({ + type: 'grid', + children: [ + { type: 'button', label: 'OK' }, + ], + }); + expect(result.valid).toBe(true); + }); + }); + + describe('isValidSchema', () => { + it('returns true for valid schema', () => { + expect(isValidSchema({ type: 'form' })).toBe(true); + }); + + it('returns false for invalid schema', () => { + expect(isValidSchema({})).toBe(false); + }); + + it('returns false for empty object', () => { + expect(isValidSchema({} as any)).toBe(false); + }); + + it('returns false for non-object values', () => { + expect(isValidSchema('string' as any)).toBe(false); + expect(isValidSchema(42 as any)).toBe(false); + }); + }); + + describe('assertValidSchema', () => { + it('does not throw for valid schema', () => { + expect(() => assertValidSchema({ type: 'form' })).not.toThrow(); + }); + + it('throws for invalid schema', () => { + expect(() => assertValidSchema({} as any)).toThrow(); + }); + }); + + describe('formatValidationErrors', () => { + it('formats validation errors', () => { + const result = validateSchema({} as any); + const formatted = formatValidationErrors(result); + expect(typeof formatted).toBe('string'); + expect(formatted.length).toBeGreaterThan(0); + }); + + it('returns empty string for valid schemas', () => { + const result = validateSchema({ type: 'form' }); + const formatted = formatValidationErrors(result); + expect(formatted).toBe(''); + }); + }); +}); diff --git a/packages/i18n/package.json b/packages/i18n/package.json new file mode 100644 index 00000000..f3c73ec5 --- /dev/null +++ b/packages/i18n/package.json @@ -0,0 +1,48 @@ +{ + "name": "@object-ui/i18n", + "version": "0.5.0", + "type": "module", + "license": "MIT", + "description": "Internationalization (i18n) support for Object UI with 10+ language packs, RTL layout, and date/currency formatting.", + "homepage": "https://www.objectui.org", + "repository": { + "type": "git", + "url": "https://github.com/objectstack-ai/objectui.git", + "directory": "packages/i18n" + }, + "bugs": { + "url": "https://github.com/objectstack-ai/objectui/issues" + }, + "main": "./dist/index.js", + "module": "./dist/index.js", + "types": "./dist/index.d.ts", + "exports": { + ".": { + "types": "./dist/index.d.ts", + "import": "./dist/index.js" + }, + "./locales/*": { + "types": "./dist/locales/*.d.ts", + "import": "./dist/locales/*.js" + } + }, + "scripts": { + "build": "tsc", + "test": "vitest run", + "type-check": "tsc --noEmit", + "lint": "eslint ." + }, + "dependencies": { + "i18next": "^25.8.4", + "react-i18next": "^16.5.4" + }, + "peerDependencies": { + "react": "^18.0.0 || ^19.0.0" + }, + "devDependencies": { + "@types/react": "^19.1.8", + "react": "^19.1.0", + "typescript": "^5.9.3", + "vitest": "^4.0.18" + } +} diff --git a/packages/i18n/src/__tests__/i18n.test.ts b/packages/i18n/src/__tests__/i18n.test.ts new file mode 100644 index 00000000..8ee01902 --- /dev/null +++ b/packages/i18n/src/__tests__/i18n.test.ts @@ -0,0 +1,228 @@ +import { describe, it, expect, beforeEach } from 'vitest'; +import { + createI18n, + getDirection, + getAvailableLanguages, + builtInLocales, + isRTL, + RTL_LANGUAGES, + formatDate, + formatDateTime, + formatCurrency, + formatNumber, +} from '../index'; + +describe('@object-ui/i18n', () => { + describe('createI18n', () => { + it('creates an i18next instance with default config', () => { + const i18n = createI18n({ detectBrowserLanguage: false }); + expect(i18n).toBeDefined(); + expect(i18n.language).toBe('en'); + }); + + it('creates an instance with specified default language', () => { + const i18n = createI18n({ defaultLanguage: 'zh', detectBrowserLanguage: false }); + expect(i18n.language).toBe('zh'); + }); + + it('loads all built-in locales', () => { + const i18n = createI18n({ detectBrowserLanguage: false }); + const langs = getAvailableLanguages(i18n); + expect(langs).toContain('en'); + expect(langs).toContain('zh'); + expect(langs).toContain('ja'); + expect(langs).toContain('ko'); + expect(langs).toContain('de'); + expect(langs).toContain('fr'); + expect(langs).toContain('es'); + expect(langs).toContain('pt'); + expect(langs).toContain('ru'); + expect(langs).toContain('ar'); + expect(langs.length).toBeGreaterThanOrEqual(10); + }); + + it('translates common keys in English', () => { + const i18n = createI18n({ defaultLanguage: 'en', detectBrowserLanguage: false }); + expect(i18n.t('common.save')).toBe('Save'); + expect(i18n.t('common.cancel')).toBe('Cancel'); + expect(i18n.t('common.delete')).toBe('Delete'); + expect(i18n.t('common.loading')).toBe('Loading...'); + }); + + it('translates common keys in Chinese', () => { + const i18n = createI18n({ defaultLanguage: 'zh', detectBrowserLanguage: false }); + expect(i18n.t('common.save')).toBe('保存'); + expect(i18n.t('common.cancel')).toBe('取消'); + expect(i18n.t('common.delete')).toBe('删除'); + expect(i18n.t('common.loading')).toBe('加载中...'); + }); + + it('translates common keys in Japanese', () => { + const i18n = createI18n({ defaultLanguage: 'ja', detectBrowserLanguage: false }); + expect(i18n.t('common.save')).toBe('保存'); + expect(i18n.t('common.cancel')).toBe('キャンセル'); + }); + + it('translates common keys in Korean', () => { + const i18n = createI18n({ defaultLanguage: 'ko', detectBrowserLanguage: false }); + expect(i18n.t('common.save')).toBe('저장'); + expect(i18n.t('common.cancel')).toBe('취소'); + }); + + it('supports interpolation in validation messages', () => { + const i18n = createI18n({ defaultLanguage: 'en', detectBrowserLanguage: false }); + expect(i18n.t('validation.required', { field: 'Name' })).toBe('Name is required'); + expect(i18n.t('validation.minLength', { field: 'Password', min: 8 })).toBe( + 'Password must be at least 8 characters', + ); + }); + + it('supports interpolation in Chinese', () => { + const i18n = createI18n({ defaultLanguage: 'zh', detectBrowserLanguage: false }); + expect(i18n.t('validation.required', { field: '姓名' })).toBe('姓名不能为空'); + }); + + it('falls back to English for unknown language', () => { + const i18n = createI18n({ defaultLanguage: 'xx', fallbackLanguage: 'en', detectBrowserLanguage: false }); + expect(i18n.t('common.save')).toBe('Save'); + }); + + it('merges custom resources with built-in locales', () => { + const i18n = createI18n({ + defaultLanguage: 'en', + detectBrowserLanguage: false, + resources: { + en: { custom: { greeting: 'Hello!' } }, + }, + }); + expect(i18n.t('custom.greeting')).toBe('Hello!'); + // Built-in translations still work + expect(i18n.t('common.save')).toBe('Save'); + }); + + it('changes language dynamically', async () => { + const i18n = createI18n({ defaultLanguage: 'en', detectBrowserLanguage: false }); + expect(i18n.t('common.save')).toBe('Save'); + + await i18n.changeLanguage('zh'); + expect(i18n.language).toBe('zh'); + expect(i18n.t('common.save')).toBe('保存'); + + await i18n.changeLanguage('ja'); + expect(i18n.language).toBe('ja'); + expect(i18n.t('common.save')).toBe('保存'); + }); + }); + + describe('getDirection', () => { + it('returns ltr for English', () => { + expect(getDirection('en')).toBe('ltr'); + }); + + it('returns ltr for Chinese', () => { + expect(getDirection('zh')).toBe('ltr'); + }); + + it('returns rtl for Arabic', () => { + expect(getDirection('ar')).toBe('rtl'); + }); + + it('returns ltr for unknown languages', () => { + expect(getDirection('xx')).toBe('ltr'); + }); + }); + + describe('isRTL', () => { + it('returns true for Arabic', () => { + expect(isRTL('ar')).toBe(true); + }); + + it('returns false for English', () => { + expect(isRTL('en')).toBe(false); + }); + + it('returns false for Chinese', () => { + expect(isRTL('zh')).toBe(false); + }); + }); + + describe('RTL_LANGUAGES', () => { + it('includes Arabic', () => { + expect(RTL_LANGUAGES).toContain('ar'); + }); + + it('includes Hebrew', () => { + expect(RTL_LANGUAGES).toContain('he'); + }); + }); + + describe('builtInLocales', () => { + it('has 10 built-in language packs', () => { + expect(Object.keys(builtInLocales).length).toBe(10); + }); + + it('all locales have the same top-level keys', () => { + const enKeys = Object.keys(builtInLocales.en).sort(); + for (const [lang, locale] of Object.entries(builtInLocales)) { + const keys = Object.keys(locale).sort(); + expect(keys).toEqual(enKeys); + } + }); + + it('all locales have common section keys matching English', () => { + const enCommonKeys = Object.keys(builtInLocales.en.common).sort(); + for (const [lang, locale] of Object.entries(builtInLocales)) { + const keys = Object.keys(locale.common).sort(); + expect(keys).toEqual(enCommonKeys); + } + }); + }); + + describe('formatDate', () => { + it('formats a date with default options', () => { + const result = formatDate(new Date(2026, 0, 15), { locale: 'en' }); + expect(result).toContain('Jan'); + expect(result).toContain('15'); + expect(result).toContain('2026'); + }); + + it('formats a date with short style', () => { + const result = formatDate(new Date(2026, 0, 15), { locale: 'en', style: 'short' }); + expect(result).toContain('15'); + }); + + it('returns string for invalid dates', () => { + const result = formatDate('invalid-date'); + expect(result).toBe('invalid-date'); + }); + }); + + describe('formatCurrency', () => { + it('formats USD by default', () => { + const result = formatCurrency(1234.56, { locale: 'en' }); + expect(result).toContain('1,234.56'); + }); + + it('formats EUR', () => { + const result = formatCurrency(1234.56, { locale: 'de', currency: 'EUR' }); + expect(result).toContain('1.234,56'); + }); + + it('formats CNY', () => { + const result = formatCurrency(1234.56, { locale: 'zh', currency: 'CNY' }); + expect(result).toContain('1,234.56'); + }); + }); + + describe('formatNumber', () => { + it('formats a number with default locale', () => { + const result = formatNumber(1234567.89, { locale: 'en' }); + expect(result).toContain('1,234,567.89'); + }); + + it('formats with compact notation', () => { + const result = formatNumber(1234567, { locale: 'en', notation: 'compact' }); + expect(result).toContain('M'); // e.g. 1.2M + }); + }); +}); diff --git a/packages/i18n/src/i18n.ts b/packages/i18n/src/i18n.ts new file mode 100644 index 00000000..3ff5defe --- /dev/null +++ b/packages/i18n/src/i18n.ts @@ -0,0 +1,98 @@ +/** + * @object-ui/i18n - Core i18n configuration and initialization + * + * Wraps i18next with Object UI defaults and built-in locale support. + */ +import i18next, { type i18n as I18nInstance } from 'i18next'; +import { builtInLocales, isRTL } from './locales/index'; +import type { TranslationKeys } from './locales/en'; + +export interface I18nConfig { + /** Default language (default: 'en') */ + defaultLanguage?: string; + /** Fallback language (default: 'en') */ + fallbackLanguage?: string; + /** Additional translation resources to merge with built-in locales */ + resources?: Record>; + /** Whether to detect browser language automatically (default: true) */ + detectBrowserLanguage?: boolean; + /** i18next interpolation options */ + interpolation?: { + escapeValue?: boolean; + prefix?: string; + suffix?: string; + }; +} + +/** + * Create and initialize an i18next instance with Object UI defaults + */ +export function createI18n(config: I18nConfig = {}): I18nInstance { + const { + defaultLanguage = 'en', + fallbackLanguage = 'en', + resources = {}, + detectBrowserLanguage = true, + interpolation, + } = config; + + // Merge built-in locales with user-provided resources + const mergedResources: Record }> = {}; + + for (const [lang, translations] of Object.entries(builtInLocales)) { + mergedResources[lang] = { + translation: { + ...translations, + ...(resources[lang] || {}), + }, + }; + } + + // Add any additional languages from resources not in built-in locales + for (const [lang, translations] of Object.entries(resources)) { + if (!mergedResources[lang]) { + mergedResources[lang] = { translation: translations as Record }; + } + } + + // Detect browser language if enabled + let lng = defaultLanguage; + if (detectBrowserLanguage && typeof navigator !== 'undefined') { + const browserLang = navigator.language?.split('-')[0]; + if (browserLang && mergedResources[browserLang]) { + lng = browserLang; + } + } + + const instance = i18next.createInstance(); + + instance.init({ + lng, + fallbackLng: fallbackLanguage, + resources: mergedResources, + interpolation: { + escapeValue: false, // React already escapes + ...interpolation, + }, + returnNull: false, + }); + + return instance; +} + +/** + * Get the text direction for the current language + */ +export function getDirection(lang: string): 'ltr' | 'rtl' { + return isRTL(lang) ? 'rtl' : 'ltr'; +} + +/** + * Get available languages from an i18n instance + */ +export function getAvailableLanguages(instance: I18nInstance): string[] { + const resources = instance.options.resources; + return resources ? Object.keys(resources) : []; +} + +export type { TranslationKeys }; diff --git a/packages/i18n/src/index.ts b/packages/i18n/src/index.ts new file mode 100644 index 00000000..2ec045c8 --- /dev/null +++ b/packages/i18n/src/index.ts @@ -0,0 +1,63 @@ +/** + * @object-ui/i18n + * + * Internationalization (i18n) support for Object UI. + * Provides 10+ built-in language packs, RTL support, and date/currency formatting. + * + * @example + * ```tsx + * import { I18nProvider, useObjectTranslation } from '@object-ui/i18n'; + * + * function App() { + * return ( + * + * + * + * ); + * } + * + * function MyComponent() { + * const { t, language, changeLanguage, direction } = useObjectTranslation(); + * return ( + *
+ *

{t('common.save')}

+ * + * + *
+ * ); + * } + * ``` + * + * @packageDocumentation + */ + +// Core i18n setup +export { createI18n, getDirection, getAvailableLanguages, type I18nConfig, type TranslationKeys } from './i18n'; + +// React integration +export { I18nProvider, useObjectTranslation, useI18nContext, type I18nProviderProps } from './provider'; + +// Locale packs +export { builtInLocales, isRTL, RTL_LANGUAGES } from './locales/index'; +export { default as en } from './locales/en'; +export { default as zh } from './locales/zh'; +export { default as ja } from './locales/ja'; +export { default as ko } from './locales/ko'; +export { default as de } from './locales/de'; +export { default as fr } from './locales/fr'; +export { default as es } from './locales/es'; +export { default as pt } from './locales/pt'; +export { default as ru } from './locales/ru'; +export { default as ar } from './locales/ar'; + +// Formatting utilities +export { + formatDate, + formatDateTime, + formatRelativeTime, + formatCurrency, + formatNumber, + type DateFormatOptions, + type CurrencyFormatOptions, + type NumberFormatOptions, +} from './utils/index'; diff --git a/packages/i18n/src/locales/ar.ts b/packages/i18n/src/locales/ar.ts new file mode 100644 index 00000000..cf58e582 --- /dev/null +++ b/packages/i18n/src/locales/ar.ts @@ -0,0 +1,113 @@ +/** + * العربية (ar) - Arabic language pack for Object UI + * Note: Arabic is an RTL (Right-to-Left) language + */ +const ar = { + common: { + loading: 'جاري التحميل...', + save: 'حفظ', + cancel: 'إلغاء', + delete: 'حذف', + edit: 'تعديل', + create: 'إنشاء', + search: 'بحث', + filter: 'تصفية', + reset: 'إعادة تعيين', + confirm: 'تأكيد', + close: 'إغلاق', + back: 'رجوع', + next: 'التالي', + previous: 'السابق', + submit: 'إرسال', + refresh: 'تحديث', + export: 'تصدير', + import: 'استيراد', + yes: 'نعم', + no: 'لا', + ok: 'موافق', + actions: 'إجراءات', + more: 'المزيد', + selectAll: 'تحديد الكل', + clearAll: 'مسح الكل', + noData: 'لا توجد بيانات', + noResults: 'لم يتم العثور على نتائج', + required: 'مطلوب', + optional: 'اختياري', + }, + validation: { + required: '{{field}} مطلوب', + minLength: '{{field}} يجب أن يكون {{min}} حرفاً على الأقل', + maxLength: '{{field}} يجب ألا يتجاوز {{max}} حرفاً', + min: '{{field}} يجب أن يكون {{min}} على الأقل', + max: '{{field}} يجب ألا يتجاوز {{max}}', + email: 'يرجى إدخال بريد إلكتروني صالح', + url: 'يرجى إدخال رابط صالح', + pattern: 'صيغة {{field}} غير صالحة', + unique: '{{field}} يجب أن يكون فريداً', + type: '{{field}} يجب أن يكون {{type}} صالحاً', + }, + form: { + addItem: 'إضافة عنصر', + removeItem: 'إزالة عنصر', + fieldRequired: 'هذا الحقل مطلوب', + invalidFormat: 'صيغة غير صالحة', + saveSuccess: 'تم الحفظ بنجاح', + saveError: 'فشل في الحفظ', + unsavedChanges: 'لديك تغييرات غير محفوظة. هل أنت متأكد أنك تريد المغادرة؟', + stepOf: 'الخطوة {{current}} من {{total}}', + }, + table: { + rowsPerPage: 'صفوف في الصفحة', + showing: 'عرض {{from}} إلى {{to}} من {{total}}', + noRows: 'لا توجد صفوف للعرض', + sortAsc: 'ترتيب تصاعدي', + sortDesc: 'ترتيب تنازلي', + filterColumn: 'تصفية {{column}}', + columns: 'الأعمدة', + exportCSV: 'تصدير CSV', + exportExcel: 'تصدير Excel', + selectRow: 'تحديد صف', + selectAllRows: 'تحديد جميع الصفوف', + expandRow: 'توسيع الصف', + collapseRow: 'طي الصف', + }, + calendar: { + today: 'اليوم', + month: 'شهر', + week: 'أسبوع', + day: 'يوم', + agenda: 'جدول أعمال', + allDay: 'طوال اليوم', + noEvents: 'لا توجد أحداث', + newEvent: 'حدث جديد', + }, + kanban: { + addCard: 'إضافة بطاقة', + addColumn: 'إضافة عمود', + moveCard: 'نقل بطاقة', + deleteCard: 'حذف بطاقة', + deleteColumn: 'حذف عمود', + }, + chart: { + noData: 'لا تتوفر بيانات للرسم البياني', + loading: 'جاري تحميل الرسم البياني...', + }, + dashboard: { + addWidget: 'إضافة أداة', + removeWidget: 'إزالة أداة', + editLayout: 'تعديل التخطيط', + saveLayout: 'حفظ التخطيط', + resetLayout: 'إعادة تعيين التخطيط', + }, + errors: { + networkError: 'خطأ في الشبكة. يرجى التحقق من اتصالك.', + serverError: 'خطأ في الخادم. يرجى المحاولة مرة أخرى لاحقاً.', + notFound: 'المورد غير موجود.', + unauthorized: 'ليس لديك صلاحية لتنفيذ هذا الإجراء.', + forbidden: 'تم رفض الوصول.', + timeout: 'انتهت مهلة الطلب. يرجى المحاولة مرة أخرى.', + unknown: 'حدث خطأ غير متوقع.', + }, +} as const; + +export default ar; diff --git a/packages/i18n/src/locales/de.ts b/packages/i18n/src/locales/de.ts new file mode 100644 index 00000000..8abc1f60 --- /dev/null +++ b/packages/i18n/src/locales/de.ts @@ -0,0 +1,112 @@ +/** + * Deutsch (de) - German language pack for Object UI + */ +const de = { + common: { + loading: 'Wird geladen...', + save: 'Speichern', + cancel: 'Abbrechen', + delete: 'Löschen', + edit: 'Bearbeiten', + create: 'Erstellen', + search: 'Suchen', + filter: 'Filtern', + reset: 'Zurücksetzen', + confirm: 'Bestätigen', + close: 'Schließen', + back: 'Zurück', + next: 'Weiter', + previous: 'Zurück', + submit: 'Absenden', + refresh: 'Aktualisieren', + export: 'Exportieren', + import: 'Importieren', + yes: 'Ja', + no: 'Nein', + ok: 'OK', + actions: 'Aktionen', + more: 'Mehr', + selectAll: 'Alle auswählen', + clearAll: 'Alle löschen', + noData: 'Keine Daten', + noResults: 'Keine Ergebnisse gefunden', + required: 'Erforderlich', + optional: 'Optional', + }, + validation: { + required: '{{field}} ist erforderlich', + minLength: '{{field}} muss mindestens {{min}} Zeichen lang sein', + maxLength: '{{field}} darf höchstens {{max}} Zeichen lang sein', + min: '{{field}} muss mindestens {{min}} sein', + max: '{{field}} darf höchstens {{max}} sein', + email: 'Bitte geben Sie eine gültige E-Mail-Adresse ein', + url: 'Bitte geben Sie eine gültige URL ein', + pattern: '{{field}} hat ein ungültiges Format', + unique: '{{field}} muss eindeutig sein', + type: '{{field}} muss ein gültiger {{type}} sein', + }, + form: { + addItem: 'Element hinzufügen', + removeItem: 'Element entfernen', + fieldRequired: 'Dieses Feld ist erforderlich', + invalidFormat: 'Ungültiges Format', + saveSuccess: 'Erfolgreich gespeichert', + saveError: 'Speichern fehlgeschlagen', + unsavedChanges: 'Sie haben nicht gespeicherte Änderungen. Möchten Sie die Seite wirklich verlassen?', + stepOf: 'Schritt {{current}} von {{total}}', + }, + table: { + rowsPerPage: 'Zeilen pro Seite', + showing: '{{from}} bis {{to}} von {{total}} angezeigt', + noRows: 'Keine Zeilen vorhanden', + sortAsc: 'Aufsteigend sortieren', + sortDesc: 'Absteigend sortieren', + filterColumn: '{{column}} filtern', + columns: 'Spalten', + exportCSV: 'CSV exportieren', + exportExcel: 'Excel exportieren', + selectRow: 'Zeile auswählen', + selectAllRows: 'Alle Zeilen auswählen', + expandRow: 'Zeile erweitern', + collapseRow: 'Zeile reduzieren', + }, + calendar: { + today: 'Heute', + month: 'Monat', + week: 'Woche', + day: 'Tag', + agenda: 'Agenda', + allDay: 'Ganztägig', + noEvents: 'Keine Termine', + newEvent: 'Neuer Termin', + }, + kanban: { + addCard: 'Karte hinzufügen', + addColumn: 'Spalte hinzufügen', + moveCard: 'Karte verschieben', + deleteCard: 'Karte löschen', + deleteColumn: 'Spalte löschen', + }, + chart: { + noData: 'Keine Diagrammdaten verfügbar', + loading: 'Diagramm wird geladen...', + }, + dashboard: { + addWidget: 'Widget hinzufügen', + removeWidget: 'Widget entfernen', + editLayout: 'Layout bearbeiten', + saveLayout: 'Layout speichern', + resetLayout: 'Layout zurücksetzen', + }, + errors: { + networkError: 'Netzwerkfehler. Bitte überprüfen Sie Ihre Verbindung.', + serverError: 'Serverfehler. Bitte versuchen Sie es später erneut.', + notFound: 'Ressource nicht gefunden.', + unauthorized: 'Sie sind nicht berechtigt, diese Aktion auszuführen.', + forbidden: 'Zugriff verweigert.', + timeout: 'Zeitüberschreitung. Bitte versuchen Sie es erneut.', + unknown: 'Ein unerwarteter Fehler ist aufgetreten.', + }, +} as const; + +export default de; diff --git a/packages/i18n/src/locales/en.ts b/packages/i18n/src/locales/en.ts new file mode 100644 index 00000000..9b99a2cf --- /dev/null +++ b/packages/i18n/src/locales/en.ts @@ -0,0 +1,113 @@ +/** + * English (en) - Default language pack for Object UI + */ +const en = { + common: { + loading: 'Loading...', + save: 'Save', + cancel: 'Cancel', + delete: 'Delete', + edit: 'Edit', + create: 'Create', + search: 'Search', + filter: 'Filter', + reset: 'Reset', + confirm: 'Confirm', + close: 'Close', + back: 'Back', + next: 'Next', + previous: 'Previous', + submit: 'Submit', + refresh: 'Refresh', + export: 'Export', + import: 'Import', + yes: 'Yes', + no: 'No', + ok: 'OK', + actions: 'Actions', + more: 'More', + selectAll: 'Select All', + clearAll: 'Clear All', + noData: 'No data', + noResults: 'No results found', + required: 'Required', + optional: 'Optional', + }, + validation: { + required: '{{field}} is required', + minLength: '{{field}} must be at least {{min}} characters', + maxLength: '{{field}} must be at most {{max}} characters', + min: '{{field}} must be at least {{min}}', + max: '{{field}} must be at most {{max}}', + email: 'Please enter a valid email address', + url: 'Please enter a valid URL', + pattern: '{{field}} format is invalid', + unique: '{{field}} must be unique', + type: '{{field}} must be a valid {{type}}', + }, + form: { + addItem: 'Add item', + removeItem: 'Remove item', + fieldRequired: 'This field is required', + invalidFormat: 'Invalid format', + saveSuccess: 'Saved successfully', + saveError: 'Failed to save', + unsavedChanges: 'You have unsaved changes. Are you sure you want to leave?', + stepOf: 'Step {{current}} of {{total}}', + }, + table: { + rowsPerPage: 'Rows per page', + showing: 'Showing {{from}} to {{to}} of {{total}}', + noRows: 'No rows to display', + sortAsc: 'Sort ascending', + sortDesc: 'Sort descending', + filterColumn: 'Filter {{column}}', + columns: 'Columns', + exportCSV: 'Export CSV', + exportExcel: 'Export Excel', + selectRow: 'Select row', + selectAllRows: 'Select all rows', + expandRow: 'Expand row', + collapseRow: 'Collapse row', + }, + calendar: { + today: 'Today', + month: 'Month', + week: 'Week', + day: 'Day', + agenda: 'Agenda', + allDay: 'All Day', + noEvents: 'No events', + newEvent: 'New event', + }, + kanban: { + addCard: 'Add card', + addColumn: 'Add column', + moveCard: 'Move card', + deleteCard: 'Delete card', + deleteColumn: 'Delete column', + }, + chart: { + noData: 'No chart data available', + loading: 'Loading chart...', + }, + dashboard: { + addWidget: 'Add widget', + removeWidget: 'Remove widget', + editLayout: 'Edit layout', + saveLayout: 'Save layout', + resetLayout: 'Reset layout', + }, + errors: { + networkError: 'Network error. Please check your connection.', + serverError: 'Server error. Please try again later.', + notFound: 'Resource not found.', + unauthorized: 'You are not authorized to perform this action.', + forbidden: 'Access denied.', + timeout: 'Request timed out. Please try again.', + unknown: 'An unexpected error occurred.', + }, +} as const; + +export default en; +export type TranslationKeys = typeof en; diff --git a/packages/i18n/src/locales/es.ts b/packages/i18n/src/locales/es.ts new file mode 100644 index 00000000..0d2e74f5 --- /dev/null +++ b/packages/i18n/src/locales/es.ts @@ -0,0 +1,112 @@ +/** + * Español (es) - Spanish language pack for Object UI + */ +const es = { + common: { + loading: 'Cargando...', + save: 'Guardar', + cancel: 'Cancelar', + delete: 'Eliminar', + edit: 'Editar', + create: 'Crear', + search: 'Buscar', + filter: 'Filtrar', + reset: 'Restablecer', + confirm: 'Confirmar', + close: 'Cerrar', + back: 'Atrás', + next: 'Siguiente', + previous: 'Anterior', + submit: 'Enviar', + refresh: 'Actualizar', + export: 'Exportar', + import: 'Importar', + yes: 'Sí', + no: 'No', + ok: 'Aceptar', + actions: 'Acciones', + more: 'Más', + selectAll: 'Seleccionar todo', + clearAll: 'Borrar todo', + noData: 'Sin datos', + noResults: 'No se encontraron resultados', + required: 'Obligatorio', + optional: 'Opcional', + }, + validation: { + required: '{{field}} es obligatorio', + minLength: '{{field}} debe tener al menos {{min}} caracteres', + maxLength: '{{field}} debe tener como máximo {{max}} caracteres', + min: '{{field}} debe ser al menos {{min}}', + max: '{{field}} debe ser como máximo {{max}}', + email: 'Por favor, introduzca un correo electrónico válido', + url: 'Por favor, introduzca una URL válida', + pattern: 'El formato de {{field}} no es válido', + unique: '{{field}} debe ser único', + type: '{{field}} debe ser un {{type}} válido', + }, + form: { + addItem: 'Añadir elemento', + removeItem: 'Eliminar elemento', + fieldRequired: 'Este campo es obligatorio', + invalidFormat: 'Formato no válido', + saveSuccess: 'Guardado correctamente', + saveError: 'Error al guardar', + unsavedChanges: 'Tiene cambios sin guardar. ¿Está seguro de que desea salir?', + stepOf: 'Paso {{current}} de {{total}}', + }, + table: { + rowsPerPage: 'Filas por página', + showing: 'Mostrando {{from}} a {{to}} de {{total}}', + noRows: 'No hay filas para mostrar', + sortAsc: 'Ordenar ascendente', + sortDesc: 'Ordenar descendente', + filterColumn: 'Filtrar {{column}}', + columns: 'Columnas', + exportCSV: 'Exportar CSV', + exportExcel: 'Exportar Excel', + selectRow: 'Seleccionar fila', + selectAllRows: 'Seleccionar todas las filas', + expandRow: 'Expandir fila', + collapseRow: 'Contraer fila', + }, + calendar: { + today: 'Hoy', + month: 'Mes', + week: 'Semana', + day: 'Día', + agenda: 'Agenda', + allDay: 'Todo el día', + noEvents: 'Sin eventos', + newEvent: 'Nuevo evento', + }, + kanban: { + addCard: 'Añadir tarjeta', + addColumn: 'Añadir columna', + moveCard: 'Mover tarjeta', + deleteCard: 'Eliminar tarjeta', + deleteColumn: 'Eliminar columna', + }, + chart: { + noData: 'No hay datos de gráfico disponibles', + loading: 'Cargando gráfico...', + }, + dashboard: { + addWidget: 'Añadir widget', + removeWidget: 'Eliminar widget', + editLayout: 'Editar diseño', + saveLayout: 'Guardar diseño', + resetLayout: 'Restablecer diseño', + }, + errors: { + networkError: 'Error de red. Por favor, compruebe su conexión.', + serverError: 'Error del servidor. Por favor, inténtelo de nuevo más tarde.', + notFound: 'Recurso no encontrado.', + unauthorized: 'No está autorizado para realizar esta acción.', + forbidden: 'Acceso denegado.', + timeout: 'Tiempo de espera agotado. Por favor, inténtelo de nuevo.', + unknown: 'Ha ocurrido un error inesperado.', + }, +} as const; + +export default es; diff --git a/packages/i18n/src/locales/fr.ts b/packages/i18n/src/locales/fr.ts new file mode 100644 index 00000000..8a435f16 --- /dev/null +++ b/packages/i18n/src/locales/fr.ts @@ -0,0 +1,112 @@ +/** + * Français (fr) - French language pack for Object UI + */ +const fr = { + common: { + loading: 'Chargement...', + save: 'Enregistrer', + cancel: 'Annuler', + delete: 'Supprimer', + edit: 'Modifier', + create: 'Créer', + search: 'Rechercher', + filter: 'Filtrer', + reset: 'Réinitialiser', + confirm: 'Confirmer', + close: 'Fermer', + back: 'Retour', + next: 'Suivant', + previous: 'Précédent', + submit: 'Soumettre', + refresh: 'Actualiser', + export: 'Exporter', + import: 'Importer', + yes: 'Oui', + no: 'Non', + ok: 'OK', + actions: 'Actions', + more: 'Plus', + selectAll: 'Tout sélectionner', + clearAll: 'Tout effacer', + noData: 'Aucune donnée', + noResults: 'Aucun résultat trouvé', + required: 'Obligatoire', + optional: 'Facultatif', + }, + validation: { + required: '{{field}} est obligatoire', + minLength: '{{field}} doit contenir au moins {{min}} caractères', + maxLength: '{{field}} doit contenir au plus {{max}} caractères', + min: '{{field}} doit être au moins {{min}}', + max: '{{field}} doit être au plus {{max}}', + email: 'Veuillez saisir une adresse e-mail valide', + url: 'Veuillez saisir une URL valide', + pattern: 'Le format de {{field}} est invalide', + unique: '{{field}} doit être unique', + type: '{{field}} doit être un {{type}} valide', + }, + form: { + addItem: 'Ajouter un élément', + removeItem: 'Supprimer un élément', + fieldRequired: 'Ce champ est obligatoire', + invalidFormat: 'Format invalide', + saveSuccess: 'Enregistré avec succès', + saveError: 'Échec de l\'enregistrement', + unsavedChanges: 'Vous avez des modifications non enregistrées. Voulez-vous vraiment quitter ?', + stepOf: 'Étape {{current}} sur {{total}}', + }, + table: { + rowsPerPage: 'Lignes par page', + showing: 'Affichage de {{from}} à {{to}} sur {{total}}', + noRows: 'Aucune ligne à afficher', + sortAsc: 'Tri croissant', + sortDesc: 'Tri décroissant', + filterColumn: 'Filtrer {{column}}', + columns: 'Colonnes', + exportCSV: 'Exporter en CSV', + exportExcel: 'Exporter en Excel', + selectRow: 'Sélectionner la ligne', + selectAllRows: 'Sélectionner toutes les lignes', + expandRow: 'Développer la ligne', + collapseRow: 'Réduire la ligne', + }, + calendar: { + today: 'Aujourd\'hui', + month: 'Mois', + week: 'Semaine', + day: 'Jour', + agenda: 'Agenda', + allDay: 'Toute la journée', + noEvents: 'Aucun événement', + newEvent: 'Nouvel événement', + }, + kanban: { + addCard: 'Ajouter une carte', + addColumn: 'Ajouter une colonne', + moveCard: 'Déplacer la carte', + deleteCard: 'Supprimer la carte', + deleteColumn: 'Supprimer la colonne', + }, + chart: { + noData: 'Aucune donnée de graphique disponible', + loading: 'Chargement du graphique...', + }, + dashboard: { + addWidget: 'Ajouter un widget', + removeWidget: 'Supprimer un widget', + editLayout: 'Modifier la mise en page', + saveLayout: 'Enregistrer la mise en page', + resetLayout: 'Réinitialiser la mise en page', + }, + errors: { + networkError: 'Erreur réseau. Veuillez vérifier votre connexion.', + serverError: 'Erreur serveur. Veuillez réessayer plus tard.', + notFound: 'Ressource introuvable.', + unauthorized: 'Vous n\'êtes pas autorisé à effectuer cette action.', + forbidden: 'Accès refusé.', + timeout: 'Délai d\'attente dépassé. Veuillez réessayer.', + unknown: 'Une erreur inattendue s\'est produite.', + }, +} as const; + +export default fr; diff --git a/packages/i18n/src/locales/index.ts b/packages/i18n/src/locales/index.ts new file mode 100644 index 00000000..85840b50 --- /dev/null +++ b/packages/i18n/src/locales/index.ts @@ -0,0 +1,42 @@ +/** + * @object-ui/i18n - Locale index + * Exports all 10 built-in language packs + */ +export { default as en, type TranslationKeys } from './en'; +export { default as zh } from './zh'; +export { default as ja } from './ja'; +export { default as ko } from './ko'; +export { default as de } from './de'; +export { default as fr } from './fr'; +export { default as es } from './es'; +export { default as pt } from './pt'; +export { default as ru } from './ru'; +export { default as ar } from './ar'; + +/** + * Map of all built-in locales keyed by language code + */ +import en from './en'; +import zh from './zh'; +import ja from './ja'; +import ko from './ko'; +import de from './de'; +import fr from './fr'; +import es from './es'; +import pt from './pt'; +import ru from './ru'; +import ar from './ar'; + +export const builtInLocales = { en, zh, ja, ko, de, fr, es, pt, ru, ar } as const; + +/** + * List of RTL language codes + */ +export const RTL_LANGUAGES = ['ar', 'he', 'fa', 'ur'] as const; + +/** + * Check if a language code is RTL + */ +export function isRTL(lang: string): boolean { + return (RTL_LANGUAGES as readonly string[]).includes(lang); +} diff --git a/packages/i18n/src/locales/ja.ts b/packages/i18n/src/locales/ja.ts new file mode 100644 index 00000000..bdee8048 --- /dev/null +++ b/packages/i18n/src/locales/ja.ts @@ -0,0 +1,112 @@ +/** + * 日本語 (ja) - Japanese language pack for Object UI + */ +const ja = { + common: { + loading: '読み込み中...', + save: '保存', + cancel: 'キャンセル', + delete: '削除', + edit: '編集', + create: '作成', + search: '検索', + filter: 'フィルター', + reset: 'リセット', + confirm: '確認', + close: '閉じる', + back: '戻る', + next: '次へ', + previous: '前へ', + submit: '送信', + refresh: '更新', + export: 'エクスポート', + import: 'インポート', + yes: 'はい', + no: 'いいえ', + ok: 'OK', + actions: '操作', + more: 'もっと見る', + selectAll: 'すべて選択', + clearAll: 'すべてクリア', + noData: 'データがありません', + noResults: '結果が見つかりません', + required: '必須', + optional: '任意', + }, + validation: { + required: '{{field}}は必須です', + minLength: '{{field}}は{{min}}文字以上で入力してください', + maxLength: '{{field}}は{{max}}文字以下で入力してください', + min: '{{field}}は{{min}}以上にしてください', + max: '{{field}}は{{max}}以下にしてください', + email: '有効なメールアドレスを入力してください', + url: '有効なURLを入力してください', + pattern: '{{field}}の形式が正しくありません', + unique: '{{field}}は一意である必要があります', + type: '{{field}}は有効な{{type}}である必要があります', + }, + form: { + addItem: '項目を追加', + removeItem: '項目を削除', + fieldRequired: 'この項目は必須です', + invalidFormat: '形式が正しくありません', + saveSuccess: '保存しました', + saveError: '保存に失敗しました', + unsavedChanges: '保存されていない変更があります。このページを離れますか？', + stepOf: 'ステップ {{current}} / {{total}}', + }, + table: { + rowsPerPage: '1ページの行数', + showing: '{{total}}件中{{from}}〜{{to}}件を表示', + noRows: '表示するデータがありません', + sortAsc: '昇順', + sortDesc: '降順', + filterColumn: '{{column}}でフィルター', + columns: '列', + exportCSV: 'CSVエクスポート', + exportExcel: 'Excelエクスポート', + selectRow: '行を選択', + selectAllRows: 'すべての行を選択', + expandRow: '行を展開', + collapseRow: '行を折りたたむ', + }, + calendar: { + today: '今日', + month: '月', + week: '週', + day: '日', + agenda: '予定表', + allDay: '終日', + noEvents: '予定はありません', + newEvent: '新しい予定', + }, + kanban: { + addCard: 'カードを追加', + addColumn: 'カラムを追加', + moveCard: 'カードを移動', + deleteCard: 'カードを削除', + deleteColumn: 'カラムを削除', + }, + chart: { + noData: 'チャートデータがありません', + loading: 'チャート読み込み中...', + }, + dashboard: { + addWidget: 'ウィジェットを追加', + removeWidget: 'ウィジェットを削除', + editLayout: 'レイアウトを編集', + saveLayout: 'レイアウトを保存', + resetLayout: 'レイアウトをリセット', + }, + errors: { + networkError: 'ネットワークエラーです。接続を確認してください。', + serverError: 'サーバーエラーです。後でもう一度お試しください。', + notFound: 'リソースが見つかりません。', + unauthorized: 'この操作を実行する権限がありません。', + forbidden: 'アクセスが拒否されました。', + timeout: 'リクエストがタイムアウトしました。もう一度お試しください。', + unknown: '予期しないエラーが発生しました。', + }, +} as const; + +export default ja; diff --git a/packages/i18n/src/locales/ko.ts b/packages/i18n/src/locales/ko.ts new file mode 100644 index 00000000..b3704ad9 --- /dev/null +++ b/packages/i18n/src/locales/ko.ts @@ -0,0 +1,112 @@ +/** + * 한국어 (ko) - Korean language pack for Object UI + */ +const ko = { + common: { + loading: '로딩 중...', + save: '저장', + cancel: '취소', + delete: '삭제', + edit: '편집', + create: '생성', + search: '검색', + filter: '필터', + reset: '초기화', + confirm: '확인', + close: '닫기', + back: '뒤로', + next: '다음', + previous: '이전', + submit: '제출', + refresh: '새로고침', + export: '내보내기', + import: '가져오기', + yes: '예', + no: '아니오', + ok: '확인', + actions: '작업', + more: '더보기', + selectAll: '모두 선택', + clearAll: '모두 지우기', + noData: '데이터 없음', + noResults: '결과를 찾을 수 없습니다', + required: '필수', + optional: '선택', + }, + validation: { + required: '{{field}}은(는) 필수입니다', + minLength: '{{field}}은(는) 최소 {{min}}자 이상이어야 합니다', + maxLength: '{{field}}은(는) 최대 {{max}}자까지 가능합니다', + min: '{{field}}은(는) {{min}} 이상이어야 합니다', + max: '{{field}}은(는) {{max}} 이하여야 합니다', + email: '유효한 이메일 주소를 입력해주세요', + url: '유효한 URL을 입력해주세요', + pattern: '{{field}} 형식이 올바르지 않습니다', + unique: '{{field}}은(는) 고유해야 합니다', + type: '{{field}}은(는) 유효한 {{type}}이어야 합니다', + }, + form: { + addItem: '항목 추가', + removeItem: '항목 제거', + fieldRequired: '이 필드는 필수입니다', + invalidFormat: '형식이 올바르지 않습니다', + saveSuccess: '저장되었습니다', + saveError: '저장에 실패했습니다', + unsavedChanges: '저장하지 않은 변경사항이 있습니다. 페이지를 떠나시겠습니까?', + stepOf: '{{total}}단계 중 {{current}}단계', + }, + table: { + rowsPerPage: '페이지당 행 수', + showing: '{{total}}개 중 {{from}}~{{to}} 표시', + noRows: '표시할 데이터가 없습니다', + sortAsc: '오름차순 정렬', + sortDesc: '내림차순 정렬', + filterColumn: '{{column}} 필터', + columns: '열', + exportCSV: 'CSV 내보내기', + exportExcel: 'Excel 내보내기', + selectRow: '행 선택', + selectAllRows: '모든 행 선택', + expandRow: '행 펼치기', + collapseRow: '행 접기', + }, + calendar: { + today: '오늘', + month: '월', + week: '주', + day: '일', + agenda: '일정', + allDay: '종일', + noEvents: '일정이 없습니다', + newEvent: '새 일정', + }, + kanban: { + addCard: '카드 추가', + addColumn: '열 추가', + moveCard: '카드 이동', + deleteCard: '카드 삭제', + deleteColumn: '열 삭제', + }, + chart: { + noData: '차트 데이터가 없습니다', + loading: '차트 로딩 중...', + }, + dashboard: { + addWidget: '위젯 추가', + removeWidget: '위젯 제거', + editLayout: '레이아웃 편집', + saveLayout: '레이아웃 저장', + resetLayout: '레이아웃 초기화', + }, + errors: { + networkError: '네트워크 오류입니다. 연결을 확인해주세요.', + serverError: '서버 오류입니다. 나중에 다시 시도해주세요.', + notFound: '리소스를 찾을 수 없습니다.', + unauthorized: '이 작업을 수행할 권한이 없습니다.', + forbidden: '접근이 거부되었습니다.', + timeout: '요청 시간이 초과되었습니다. 다시 시도해주세요.', + unknown: '예기치 않은 오류가 발생했습니다.', + }, +} as const; + +export default ko; diff --git a/packages/i18n/src/locales/pt.ts b/packages/i18n/src/locales/pt.ts new file mode 100644 index 00000000..b883ebac --- /dev/null +++ b/packages/i18n/src/locales/pt.ts @@ -0,0 +1,112 @@ +/** + * Português (pt) - Portuguese language pack for Object UI + */ +const pt = { + common: { + loading: 'Carregando...', + save: 'Salvar', + cancel: 'Cancelar', + delete: 'Excluir', + edit: 'Editar', + create: 'Criar', + search: 'Pesquisar', + filter: 'Filtrar', + reset: 'Redefinir', + confirm: 'Confirmar', + close: 'Fechar', + back: 'Voltar', + next: 'Próximo', + previous: 'Anterior', + submit: 'Enviar', + refresh: 'Atualizar', + export: 'Exportar', + import: 'Importar', + yes: 'Sim', + no: 'Não', + ok: 'OK', + actions: 'Ações', + more: 'Mais', + selectAll: 'Selecionar tudo', + clearAll: 'Limpar tudo', + noData: 'Sem dados', + noResults: 'Nenhum resultado encontrado', + required: 'Obrigatório', + optional: 'Opcional', + }, + validation: { + required: '{{field}} é obrigatório', + minLength: '{{field}} deve ter pelo menos {{min}} caracteres', + maxLength: '{{field}} deve ter no máximo {{max}} caracteres', + min: '{{field}} deve ser pelo menos {{min}}', + max: '{{field}} deve ser no máximo {{max}}', + email: 'Por favor, insira um endereço de e-mail válido', + url: 'Por favor, insira uma URL válida', + pattern: 'O formato de {{field}} é inválido', + unique: '{{field}} deve ser único', + type: '{{field}} deve ser um {{type}} válido', + }, + form: { + addItem: 'Adicionar item', + removeItem: 'Remover item', + fieldRequired: 'Este campo é obrigatório', + invalidFormat: 'Formato inválido', + saveSuccess: 'Salvo com sucesso', + saveError: 'Falha ao salvar', + unsavedChanges: 'Você tem alterações não salvas. Tem certeza de que deseja sair?', + stepOf: 'Etapa {{current}} de {{total}}', + }, + table: { + rowsPerPage: 'Linhas por página', + showing: 'Mostrando {{from}} a {{to}} de {{total}}', + noRows: 'Nenhuma linha para exibir', + sortAsc: 'Ordenar crescente', + sortDesc: 'Ordenar decrescente', + filterColumn: 'Filtrar {{column}}', + columns: 'Colunas', + exportCSV: 'Exportar CSV', + exportExcel: 'Exportar Excel', + selectRow: 'Selecionar linha', + selectAllRows: 'Selecionar todas as linhas', + expandRow: 'Expandir linha', + collapseRow: 'Recolher linha', + }, + calendar: { + today: 'Hoje', + month: 'Mês', + week: 'Semana', + day: 'Dia', + agenda: 'Agenda', + allDay: 'Dia inteiro', + noEvents: 'Sem eventos', + newEvent: 'Novo evento', + }, + kanban: { + addCard: 'Adicionar cartão', + addColumn: 'Adicionar coluna', + moveCard: 'Mover cartão', + deleteCard: 'Excluir cartão', + deleteColumn: 'Excluir coluna', + }, + chart: { + noData: 'Nenhum dado de gráfico disponível', + loading: 'Carregando gráfico...', + }, + dashboard: { + addWidget: 'Adicionar widget', + removeWidget: 'Remover widget', + editLayout: 'Editar layout', + saveLayout: 'Salvar layout', + resetLayout: 'Redefinir layout', + }, + errors: { + networkError: 'Erro de rede. Por favor, verifique sua conexão.', + serverError: 'Erro no servidor. Por favor, tente novamente mais tarde.', + notFound: 'Recurso não encontrado.', + unauthorized: 'Você não tem permissão para realizar esta ação.', + forbidden: 'Acesso negado.', + timeout: 'Tempo limite excedido. Por favor, tente novamente.', + unknown: 'Ocorreu um erro inesperado.', + }, +} as const; + +export default pt; diff --git a/packages/i18n/src/locales/ru.ts b/packages/i18n/src/locales/ru.ts new file mode 100644 index 00000000..5fcff6e4 --- /dev/null +++ b/packages/i18n/src/locales/ru.ts @@ -0,0 +1,112 @@ +/** + * Русский (ru) - Russian language pack for Object UI + */ +const ru = { + common: { + loading: 'Загрузка...', + save: 'Сохранить', + cancel: 'Отмена', + delete: 'Удалить', + edit: 'Редактировать', + create: 'Создать', + search: 'Поиск', + filter: 'Фильтр', + reset: 'Сбросить', + confirm: 'Подтвердить', + close: 'Закрыть', + back: 'Назад', + next: 'Далее', + previous: 'Назад', + submit: 'Отправить', + refresh: 'Обновить', + export: 'Экспорт', + import: 'Импорт', + yes: 'Да', + no: 'Нет', + ok: 'ОК', + actions: 'Действия', + more: 'Ещё', + selectAll: 'Выбрать все', + clearAll: 'Очистить все', + noData: 'Нет данных', + noResults: 'Результаты не найдены', + required: 'Обязательно', + optional: 'Необязательно', + }, + validation: { + required: 'Поле {{field}} обязательно для заполнения', + minLength: '{{field}} должно содержать не менее {{min}} символов', + maxLength: '{{field}} должно содержать не более {{max}} символов', + min: '{{field}} должно быть не менее {{min}}', + max: '{{field}} должно быть не более {{max}}', + email: 'Пожалуйста, введите корректный адрес электронной почты', + url: 'Пожалуйста, введите корректный URL', + pattern: 'Неверный формат поля {{field}}', + unique: '{{field}} должно быть уникальным', + type: '{{field}} должно быть допустимым {{type}}', + }, + form: { + addItem: 'Добавить элемент', + removeItem: 'Удалить элемент', + fieldRequired: 'Это поле обязательно', + invalidFormat: 'Неверный формат', + saveSuccess: 'Успешно сохранено', + saveError: 'Ошибка сохранения', + unsavedChanges: 'У вас есть несохранённые изменения. Вы уверены, что хотите покинуть страницу?', + stepOf: 'Шаг {{current}} из {{total}}', + }, + table: { + rowsPerPage: 'Строк на странице', + showing: 'Показано с {{from}} по {{to}} из {{total}}', + noRows: 'Нет строк для отображения', + sortAsc: 'Сортировка по возрастанию', + sortDesc: 'Сортировка по убыванию', + filterColumn: 'Фильтр по {{column}}', + columns: 'Столбцы', + exportCSV: 'Экспорт в CSV', + exportExcel: 'Экспорт в Excel', + selectRow: 'Выбрать строку', + selectAllRows: 'Выбрать все строки', + expandRow: 'Развернуть строку', + collapseRow: 'Свернуть строку', + }, + calendar: { + today: 'Сегодня', + month: 'Месяц', + week: 'Неделя', + day: 'День', + agenda: 'Расписание', + allDay: 'Весь день', + noEvents: 'Нет событий', + newEvent: 'Новое событие', + }, + kanban: { + addCard: 'Добавить карточку', + addColumn: 'Добавить колонку', + moveCard: 'Переместить карточку', + deleteCard: 'Удалить карточку', + deleteColumn: 'Удалить колонку', + }, + chart: { + noData: 'Нет данных для графика', + loading: 'Загрузка графика...', + }, + dashboard: { + addWidget: 'Добавить виджет', + removeWidget: 'Удалить виджет', + editLayout: 'Редактировать макет', + saveLayout: 'Сохранить макет', + resetLayout: 'Сбросить макет', + }, + errors: { + networkError: 'Ошибка сети. Проверьте подключение к интернету.', + serverError: 'Ошибка сервера. Попробуйте позже.', + notFound: 'Ресурс не найден.', + unauthorized: 'У вас нет прав для выполнения этого действия.', + forbidden: 'Доступ запрещён.', + timeout: 'Время ожидания истекло. Попробуйте снова.', + unknown: 'Произошла непредвиденная ошибка.', + }, +} as const; + +export default ru; diff --git a/packages/i18n/src/locales/zh.ts b/packages/i18n/src/locales/zh.ts new file mode 100644 index 00000000..d7382e20 --- /dev/null +++ b/packages/i18n/src/locales/zh.ts @@ -0,0 +1,112 @@ +/** + * 中文 (zh) - Chinese language pack for Object UI + */ +const zh = { + common: { + loading: '加载中...', + save: '保存', + cancel: '取消', + delete: '删除', + edit: '编辑', + create: '新建', + search: '搜索', + filter: '筛选', + reset: '重置', + confirm: '确认', + close: '关闭', + back: '返回', + next: '下一步', + previous: '上一步', + submit: '提交', + refresh: '刷新', + export: '导出', + import: '导入', + yes: '是', + no: '否', + ok: '确定', + actions: '操作', + more: '更多', + selectAll: '全选', + clearAll: '清除全部', + noData: '暂无数据', + noResults: '未找到结果', + required: '必填', + optional: '选填', + }, + validation: { + required: '{{field}}不能为空', + minLength: '{{field}}至少需要{{min}}个字符', + maxLength: '{{field}}最多{{max}}个字符', + min: '{{field}}不能小于{{min}}', + max: '{{field}}不能大于{{max}}', + email: '请输入有效的邮箱地址', + url: '请输入有效的URL', + pattern: '{{field}}格式不正确', + unique: '{{field}}必须唯一', + type: '{{field}}必须是有效的{{type}}', + }, + form: { + addItem: '添加项目', + removeItem: '移除项目', + fieldRequired: '此字段为必填项', + invalidFormat: '格式不正确', + saveSuccess: '保存成功', + saveError: '保存失败', + unsavedChanges: '您有未保存的更改，确定要离开吗？', + stepOf: '第{{current}}步，共{{total}}步', + }, + table: { + rowsPerPage: '每页行数', + showing: '显示第{{from}}到{{to}}条，共{{total}}条', + noRows: '暂无数据', + sortAsc: '升序排列', + sortDesc: '降序排列', + filterColumn: '筛选{{column}}', + columns: '列', + exportCSV: '导出CSV', + exportExcel: '导出Excel', + selectRow: '选择行', + selectAllRows: '选择所有行', + expandRow: '展开行', + collapseRow: '折叠行', + }, + calendar: { + today: '今天', + month: '月', + week: '周', + day: '日', + agenda: '日程', + allDay: '全天', + noEvents: '暂无事件', + newEvent: '新建事件', + }, + kanban: { + addCard: '添加卡片', + addColumn: '添加列', + moveCard: '移动卡片', + deleteCard: '删除卡片', + deleteColumn: '删除列', + }, + chart: { + noData: '暂无图表数据', + loading: '图表加载中...', + }, + dashboard: { + addWidget: '添加组件', + removeWidget: '移除组件', + editLayout: '编辑布局', + saveLayout: '保存布局', + resetLayout: '重置布局', + }, + errors: { + networkError: '网络错误，请检查网络连接。', + serverError: '服务器错误，请稍后重试。', + notFound: '资源未找到。', + unauthorized: '您没有权限执行此操作。', + forbidden: '访问被拒绝。', + timeout: '请求超时，请重试。', + unknown: '发生未知错误。', + }, +} as const; + +export default zh; diff --git a/packages/i18n/src/provider.tsx b/packages/i18n/src/provider.tsx new file mode 100644 index 00000000..3eaa12b3 --- /dev/null +++ b/packages/i18n/src/provider.tsx @@ -0,0 +1,125 @@ +/** + * @object-ui/i18n - React integration + * + * Provides I18nProvider and useObjectTranslation hook for React components. + */ +import React, { createContext, useContext, useEffect, useMemo, useState } from 'react'; +import { I18nextProvider, useTranslation } from 'react-i18next'; +import type { i18n as I18nInstance } from 'i18next'; +import { createI18n, getDirection, type I18nConfig } from './i18n'; + +interface I18nContextValue { + /** Current language code */ + language: string; + /** Change the active language */ + changeLanguage: (lang: string) => Promise; + /** Current text direction ('ltr' or 'rtl') */ + direction: 'ltr' | 'rtl'; + /** The underlying i18next instance */ + i18n: I18nInstance; +} + +const ObjectI18nContext = createContext(null); + +export interface I18nProviderProps { + /** i18n configuration options */ + config?: I18nConfig; + /** Pre-created i18next instance (overrides config) */ + instance?: I18nInstance; + /** Children to render */ + children: React.ReactNode; +} + +/** + * I18nProvider - Wraps your app with i18n support + * + * @example + * ```tsx + * + * + * + * ``` + */ +export function I18nProvider({ config, instance: externalInstance, children }: I18nProviderProps) { + const i18nInstance = useMemo( + () => externalInstance || createI18n(config), + [externalInstance], // eslint-disable-line react-hooks/exhaustive-deps + ); + + const [language, setLanguage] = useState(i18nInstance.language || 'en'); + const direction = getDirection(language); + + useEffect(() => { + const handleLanguageChanged = (lng: string) => { + setLanguage(lng); + // Update document direction for RTL support + if (typeof document !== 'undefined') { + document.documentElement.dir = getDirection(lng); + document.documentElement.lang = lng; + } + }; + + i18nInstance.on('languageChanged', handleLanguageChanged); + return () => { + i18nInstance.off('languageChanged', handleLanguageChanged); + }; + }, [i18nInstance]); + + const contextValue = useMemo( + () => ({ + language, + changeLanguage: async (lang: string) => { + await i18nInstance.changeLanguage(lang); + }, + direction, + i18n: i18nInstance, + }), + [language, direction, i18nInstance], + ); + + return React.createElement( + ObjectI18nContext.Provider, + { value: contextValue }, + React.createElement(I18nextProvider, { i18n: i18nInstance }, children), + ); +} + +/** + * Hook to access Object UI i18n context + * + * @example + * ```tsx + * function MyComponent() { + * const { t, language, changeLanguage, direction } = useObjectTranslation(); + * return
{t('common.save')}
; + * } + * ``` + */ +export function useObjectTranslation(ns?: string) { + const context = useContext(ObjectI18nContext); + const { t, i18n } = useTranslation(ns); + + return { + /** Translation function */ + t, + /** Current language code */ + language: context?.language || i18n.language || 'en', + /** Change the active language */ + changeLanguage: context?.changeLanguage || (async (lang: string) => { await i18n.changeLanguage(lang); }), + /** Current text direction */ + direction: context?.direction || 'ltr', + /** The underlying i18next instance */ + i18n, + }; +} + +/** + * Hook to access the i18n context directly + */ +export function useI18nContext(): I18nContextValue { + const context = useContext(ObjectI18nContext); + if (!context) { + throw new Error('useI18nContext must be used within an I18nProvider'); + } + return context; +} diff --git a/packages/i18n/src/utils/formatting.ts b/packages/i18n/src/utils/formatting.ts new file mode 100644 index 00000000..40e70b82 --- /dev/null +++ b/packages/i18n/src/utils/formatting.ts @@ -0,0 +1,136 @@ +/** + * @object-ui/i18n - Date and currency formatting utilities + * + * Uses the native Intl API for locale-aware formatting. + */ + +export interface DateFormatOptions { + locale?: string; + style?: 'short' | 'medium' | 'long' | 'full'; + dateStyle?: Intl.DateTimeFormatOptions['dateStyle']; + timeStyle?: Intl.DateTimeFormatOptions['timeStyle']; +} + +export interface CurrencyFormatOptions { + locale?: string; + currency?: string; + style?: 'currency' | 'decimal' | 'percent'; + minimumFractionDigits?: number; + maximumFractionDigits?: number; +} + +export interface NumberFormatOptions { + locale?: string; + style?: 'decimal' | 'percent' | 'unit'; + minimumFractionDigits?: number; + maximumFractionDigits?: number; + notation?: 'standard' | 'scientific' | 'engineering' | 'compact'; +} + +/** + * Format a date according to locale conventions + */ +export function formatDate( + date: Date | string | number, + options: DateFormatOptions = {}, +): string { + const { locale = 'en', style = 'medium' } = options; + const d = date instanceof Date ? date : new Date(date); + + if (isNaN(d.getTime())) { + return String(date); + } + + const styleMap: Record = { + short: { year: '2-digit', month: 'numeric', day: 'numeric' }, + medium: { year: 'numeric', month: 'short', day: 'numeric' }, + long: { year: 'numeric', month: 'long', day: 'numeric' }, + full: { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }, + }; + + const formatOptions = options.dateStyle + ? { dateStyle: options.dateStyle, timeStyle: options.timeStyle } + : styleMap[style] || styleMap.medium; + + return new Intl.DateTimeFormat(locale, formatOptions).format(d); +} + +/** + * Format a date and time according to locale conventions + */ +export function formatDateTime( + date: Date | string | number, + options: DateFormatOptions = {}, +): string { + const { locale = 'en', style = 'medium' } = options; + const d = date instanceof Date ? date : new Date(date); + + if (isNaN(d.getTime())) { + return String(date); + } + + const styleMap: Record = { + short: { year: '2-digit', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric' }, + medium: { year: 'numeric', month: 'short', day: 'numeric', hour: 'numeric', minute: 'numeric' }, + long: { year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric' }, + full: { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric', timeZoneName: 'short' }, + }; + + return new Intl.DateTimeFormat(locale, styleMap[style] || styleMap.medium).format(d); +} + +/** + * Format a relative time (e.g., "2 days ago", "in 3 hours") + */ +export function formatRelativeTime( + date: Date | string | number, + locale = 'en', +): string { + const d = date instanceof Date ? date : new Date(date); + const now = new Date(); + const diffMs = d.getTime() - now.getTime(); + const diffSec = Math.round(diffMs / 1000); + const diffMin = Math.round(diffSec / 60); + const diffHour = Math.round(diffMin / 60); + const diffDay = Math.round(diffHour / 24); + + const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' }); + + if (Math.abs(diffSec) < 60) return rtf.format(diffSec, 'second'); + if (Math.abs(diffMin) < 60) return rtf.format(diffMin, 'minute'); + if (Math.abs(diffHour) < 24) return rtf.format(diffHour, 'hour'); + if (Math.abs(diffDay) < 30) return rtf.format(diffDay, 'day'); + + const diffMonth = Math.round(diffDay / 30); + if (Math.abs(diffMonth) < 12) return rtf.format(diffMonth, 'month'); + + return rtf.format(Math.round(diffDay / 365), 'year'); +} + +/** + * Format a currency value according to locale conventions + */ +export function formatCurrency( + value: number, + options: CurrencyFormatOptions = {}, +): string { + const { locale = 'en', currency = 'USD', minimumFractionDigits, maximumFractionDigits } = options; + + return new Intl.NumberFormat(locale, { + style: 'currency', + currency, + minimumFractionDigits, + maximumFractionDigits, + }).format(value); +} + +/** + * Format a number according to locale conventions + */ +export function formatNumber( + value: number, + options: NumberFormatOptions = {}, +): string { + const { locale = 'en', ...rest } = options; + return new Intl.NumberFormat(locale, rest).format(value); +} diff --git a/packages/i18n/src/utils/index.ts b/packages/i18n/src/utils/index.ts new file mode 100644 index 00000000..667dc921 --- /dev/null +++ b/packages/i18n/src/utils/index.ts @@ -0,0 +1,10 @@ +export { + formatDate, + formatDateTime, + formatRelativeTime, + formatCurrency, + formatNumber, + type DateFormatOptions, + type CurrencyFormatOptions, + type NumberFormatOptions, +} from './formatting'; diff --git a/packages/i18n/tsconfig.json b/packages/i18n/tsconfig.json new file mode 100644 index 00000000..2a86bf02 --- /dev/null +++ b/packages/i18n/tsconfig.json @@ -0,0 +1,12 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "dist", + "rootDir": "src", + "noEmit": false, + "declaration": true, + "composite": true + }, + "include": ["src"], + "exclude": ["src/**/*.test.ts", "src/**/*.test.tsx"] +} diff --git a/packages/react/src/LazyPluginLoader.tsx b/packages/react/src/LazyPluginLoader.tsx index c13cd40e..14c2b6c4 100644 --- a/packages/react/src/LazyPluginLoader.tsx +++ b/packages/react/src/LazyPluginLoader.tsx @@ -6,13 +6,83 @@ * LICENSE file in the root directory of this source tree. */ -import React, { lazy, Suspense } from 'react'; +import React, { lazy, Suspense, Component } from 'react'; export interface LazyPluginOptions { /** * Fallback component to show while loading */ fallback?: React.ReactNode; + /** + * Number of retry attempts on load failure (default: 2) + */ + retries?: number; + /** + * Delay in ms between retries (default: 1000) + */ + retryDelay?: number; + /** + * Custom error fallback component + */ + errorFallback?: React.ComponentType<{ error: Error; retry: () => void }>; +} + +/** + * Error boundary for lazy-loaded plugins + */ +interface ErrorBoundaryState { + hasError: boolean; + error: Error | null; +} + +class PluginErrorBoundary extends Component< + { fallback?: React.ComponentType<{ error: Error; retry: () => void }>; children: React.ReactNode }, + ErrorBoundaryState +> { + state: ErrorBoundaryState = { hasError: false, error: null }; + + static getDerivedStateFromError(error: Error): ErrorBoundaryState { + return { hasError: true, error }; + } + + handleRetry = () => { + this.setState({ hasError: false, error: null }); + }; + + render() { + if (this.state.hasError && this.state.error) { + const FallbackComponent = this.props.fallback; + if (FallbackComponent) { + return ; + } + return null; + } + return this.props.children; + } +} + +/** + * Create a lazy-loaded import function with retry support + */ +function createRetryImport

( + importFn: () => Promise<{ default: React.ComponentType

}>, + retries: number, + retryDelay: number, +): () => Promise<{ default: React.ComponentType

}> { + return () => { + let attempt = 0; + const tryImport = (): Promise<{ default: React.ComponentType

}> => + importFn().catch((err) => { + attempt++; + if (attempt <= retries) { + return new Promise((resolve) => + setTimeout(() => resolve(tryImport()), retryDelay), + ); + } + throw err; + }); + return tryImport(); + }; } /** @@ -34,19 +104,71 @@ export interface LazyPluginOptions { * () => import('@object-ui/plugin-grid'), * { fallback:

Loading grid...
} * ); + * + * // With retry and error handling + * const ObjectGrid = createLazyPlugin( + * () => import('@object-ui/plugin-grid'), + * { + * retries: 3, + * errorFallback: ({ error, retry }) => ( + *
+ *

Failed to load: {error.message}

+ * + *
+ * ), + * } + * ); * ``` */ export function createLazyPlugin

( importFn: () => Promise<{ default: React.ComponentType

}>, options?: LazyPluginOptions ): React.ComponentType

{ - const LazyComponent = lazy(importFn); + const { retries = 2, retryDelay = 1000, errorFallback } = options || {}; + + const retryImport = retries > 0 + ? createRetryImport(importFn, retries, retryDelay) + : importFn; + + const LazyComponent = lazy(retryImport); - const PluginWrapper: React.FC

= (props) => ( - - - - ); + const PluginWrapper: React.FC

= (props) => { + const content = ( + + + + ); + + if (errorFallback) { + return ( + + {content} + + ); + } + + return content; + }; return PluginWrapper; } + +/** + * Preload a plugin module without rendering it. + * Useful for preloading plugins that will be needed soon. + * + * @param importFn - Dynamic import function + * @returns Promise that resolves when the module is loaded + * + * @example + * ```tsx + * // Preload on hover + * const loadGrid = () => import('@object-ui/plugin-grid'); + * + * ``` + */ +export function preloadPlugin( + importFn: () => Promise, +): Promise { + return importFn(); +} diff --git a/playwright.config.ts b/playwright.config.ts new file mode 100644 index 00000000..74a04106 --- /dev/null +++ b/playwright.config.ts @@ -0,0 +1,61 @@ +import { defineConfig, devices } from '@playwright/test'; + +/** + * Playwright E2E test configuration for Object UI + * @see https://playwright.dev/docs/test-configuration + */ +export default defineConfig({ + testDir: './e2e', + /* Run tests in files in parallel */ + fullyParallel: true, + /* Fail the build on CI if you accidentally left test.only in the source code */ + forbidOnly: !!process.env.CI, + /* Retry on CI only */ + retries: process.env.CI ? 2 : 0, + /* Opt out of parallel tests on CI */ + workers: process.env.CI ? 1 : undefined, + /* Reporter to use */ + reporter: process.env.CI ? 'github' : 'html', + /* Shared settings for all projects */ + use: { + /* Base URL to use in actions like `await page.goto('/')` */ + baseURL: 'http://localhost:5173', + /* Collect trace when retrying the failed test */ + trace: 'on-first-retry', + /* Screenshot on failure */ + screenshot: 'only-on-failure', + }, + + /* Configure projects for major browsers */ + projects: [ + { + name: 'chromium', + use: { ...devices['Desktop Chrome'] }, + }, + { + name: 'firefox', + use: { ...devices['Desktop Firefox'] }, + }, + { + name: 'webkit', + use: { ...devices['Desktop Safari'] }, + }, + /* Test against mobile viewports */ + { + name: 'Mobile Chrome', + use: { ...devices['Pixel 5'] }, + }, + { + name: 'Mobile Safari', + use: { ...devices['iPhone 12'] }, + }, + ], + + /* Run your local dev server before starting the tests */ + webServer: { + command: 'pnpm run dev:console', + url: 'http://localhost:5173', + reuseExistingServer: !process.env.CI, + timeout: 120 * 1000, + }, +}); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 20eaa06e..a33bec8a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -57,6 +57,9 @@ importers: '@objectstack/runtime': specifier: ^1.1.0 version: 1.1.0(pino@8.21.0) + '@playwright/test': + specifier: ^1.58.2 + version: 1.58.2 '@storybook/addon-essentials': specifier: ^8.6.14 version: 8.6.14(@types/react@19.2.10)(storybook@8.6.15(prettier@3.8.1)) @@ -411,19 +414,19 @@ importers: version: 35.0.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4) fumadocs-core: specifier: 16.5.0 - version: 16.5.0(@types/react@19.2.10)(lucide-react@0.563.0(react@19.2.4))(next@16.1.6(@babel/core@7.29.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react-router@7.13.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)(zod@4.3.6) + version: 16.5.0(@types/react@19.2.10)(lucide-react@0.563.0(react@19.2.4))(next@16.1.6(@babel/core@7.29.0)(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react-router@7.13.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)(zod@4.3.6) fumadocs-mdx: specifier: 14.2.6 - version: 14.2.6(@types/react@19.2.10)(fumadocs-core@16.5.0(@types/react@19.2.10)(lucide-react@0.563.0(react@19.2.4))(next@16.1.6(@babel/core@7.29.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react-router@7.13.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)(zod@4.3.6))(next@16.1.6(@babel/core@7.29.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)(vite@7.3.1(@types/node@25.2.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)) + version: 14.2.6(@types/react@19.2.10)(fumadocs-core@16.5.0(@types/react@19.2.10)(lucide-react@0.563.0(react@19.2.4))(next@16.1.6(@babel/core@7.29.0)(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react-router@7.13.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)(zod@4.3.6))(next@16.1.6(@babel/core@7.29.0)(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)(vite@7.3.1(@types/node@25.2.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)) fumadocs-ui: specifier: 16.5.0 - version: 16.5.0(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(fumadocs-core@16.5.0(@types/react@19.2.10)(lucide-react@0.563.0(react@19.2.4))(next@16.1.6(@babel/core@7.29.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react-router@7.13.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)(zod@4.3.6))(next@16.1.6(@babel/core@7.29.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(tailwindcss@4.1.18) + version: 16.5.0(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(fumadocs-core@16.5.0(@types/react@19.2.10)(lucide-react@0.563.0(react@19.2.4))(next@16.1.6(@babel/core@7.29.0)(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react-router@7.13.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)(zod@4.3.6))(next@16.1.6(@babel/core@7.29.0)(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(tailwindcss@4.1.18) lucide-react: specifier: ^0.563.0 version: 0.563.0(react@19.2.4) next: specifier: 16.1.6 - version: 16.1.6(@babel/core@7.29.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4) + version: 16.1.6(@babel/core@7.29.0)(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4) react: specifier: 19.2.4 version: 19.2.4 @@ -955,6 +958,28 @@ importers: specifier: ^4.5.4 version: 4.5.4(@types/node@25.2.0)(rollup@4.57.1)(typescript@5.9.3)(vite@7.3.1(@types/node@25.2.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)) + packages/i18n: + dependencies: + i18next: + specifier: ^25.8.4 + version: 25.8.4(typescript@5.9.3) + react-i18next: + specifier: ^16.5.4 + version: 16.5.4(i18next@25.8.4(typescript@5.9.3))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3) + devDependencies: + '@types/react': + specifier: 19.2.10 + version: 19.2.10 + react: + specifier: 19.2.4 + version: 19.2.4 + typescript: + specifier: ^5.9.3 + version: 5.9.3 + vitest: + specifier: ^4.0.18 + version: 4.0.18(@types/node@25.2.0)(@vitest/ui@4.0.18)(happy-dom@20.4.0)(jiti@2.6.1)(jsdom@28.0.0(@noble/hashes@1.8.0))(lightningcss@1.30.2)(msw@2.12.7(@types/node@25.2.0)(typescript@5.9.3))(tsx@4.21.0) + packages/layout: dependencies: '@object-ui/components': @@ -3583,6 +3608,11 @@ packages: resolution: {integrity: sha512-QNqXyfVS2wm9hweSYD2O7F0G06uurj9kZ96TRQE5Y9hU7+tgdZwIkbAKc5Ocy1HxEY2kuDQa6cQ1WRs/O5LFKA==} engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0} + '@playwright/test@1.58.2': + resolution: {integrity: sha512-akea+6bHYBBfA9uQqSYmlJXn61cTa+jbO87xVLCWbTqbWadRVmhxlXATaOjOgcBaWU4ePo0wB41KMFv3o35IXA==} + engines: {node: '>=18'} + hasBin: true + '@polka/url@1.0.0-next.29': resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==} @@ -7432,6 +7462,9 @@ packages: html-escaper@2.0.2: resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==} + html-parse-stringify@3.0.1: + resolution: {integrity: sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==} + html-url-attributes@3.0.1: resolution: {integrity: sha512-ol6UPyBWqsrO6EJySPz2O7ZSr856WDrEzM5zMqp+FJJLGMW35cLYmmZnl0vztAZxRUoNZJFTCohfjuIJ8I4QBQ==} @@ -7472,6 +7505,14 @@ packages: resolution: {integrity: sha512-eKCa6bwnJhvxj14kZk5NCPc6Hb6BdsU9DZcOnmQKSnO1VKrfV0zCvtttPZUsBvjmNDn8rpcJfpwSYnHBjc95MQ==} engines: {node: '>=18.18.0'} + i18next@25.8.4: + resolution: {integrity: sha512-a9A0MnUjKvzjEN/26ZY1okpra9kA8MEwzYEz1BNm+IyxUKPRH6ihf0p7vj8YvULwZHKHl3zkJ6KOt4hewxBecQ==} + peerDependencies: + typescript: ^5 + peerDependenciesMeta: + typescript: + optional: true + iconv-lite@0.4.24: resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==} engines: {node: '>=0.10.0'} @@ -9042,11 +9083,21 @@ packages: engines: {node: '>=18'} hasBin: true + playwright-core@1.58.2: + resolution: {integrity: sha512-yZkEtftgwS8CsfYo7nm0KE8jsvm6i/PTgVtB8DL726wNf6H2IMsDuxCpJj59KDaxCtSnrWan2AeDqM7JBaultg==} + engines: {node: '>=18'} + hasBin: true + playwright@1.58.1: resolution: {integrity: sha512-+2uTZHxSCcxjvGc5C891LrS1/NlxglGxzrC4seZiVjcYVQfUa87wBL6rTDqzGjuoWNjnBzRqKmF6zRYGMvQUaQ==} engines: {node: '>=18'} hasBin: true + playwright@1.58.2: + resolution: {integrity: sha512-vA30H8Nvkq/cPBnNw4Q8TWz1EJyqgpuinBcHET0YVJVFldr8JDNiU9LaWAE1KqSkRYazuaBhTpB5ZzShOezQ6A==} + engines: {node: '>=18'} + hasBin: true + pluralize@2.0.0: resolution: {integrity: sha512-TqNZzQCD4S42De9IfnnBvILN7HAW7riLqsCyp8lgjXeysyPlX5HhqKAcJHHHb9XskE4/a+7VGC9zzx8Ls0jOAw==} @@ -9266,6 +9317,22 @@ packages: peerDependencies: react: 19.2.4 + react-i18next@16.5.4: + resolution: {integrity: sha512-6yj+dcfMncEC21QPhOTsW8mOSO+pzFmT6uvU7XXdvM/Cp38zJkmTeMeKmTrmCMD5ToT79FmiE/mRWiYWcJYW4g==} + peerDependencies: + i18next: '>= 25.6.2' + react: 19.2.4 + react-dom: '*' + react-native: '*' + typescript: ^5 + peerDependenciesMeta: + react-dom: + optional: true + react-native: + optional: true + typescript: + optional: true + react-is@16.13.1: resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} @@ -10700,6 +10767,10 @@ packages: jsdom: optional: true + void-elements@3.1.0: + resolution: {integrity: sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==} + engines: {node: '>=0.10.0'} + vscode-uri@3.1.0: resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==} @@ -11861,9 +11932,9 @@ snapshots: '@formatjs/fast-memoize': 3.1.0 tslib: 2.8.1 - '@fumadocs/ui@16.5.0(@types/react@19.2.10)(fumadocs-core@16.5.0(@types/react@19.2.10)(lucide-react@0.563.0(react@19.2.4))(next@16.1.6(@babel/core@7.29.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react-router@7.13.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)(zod@4.3.6))(next@16.1.6(@babel/core@7.29.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(tailwindcss@4.1.18)': + '@fumadocs/ui@16.5.0(@types/react@19.2.10)(fumadocs-core@16.5.0(@types/react@19.2.10)(lucide-react@0.563.0(react@19.2.4))(next@16.1.6(@babel/core@7.29.0)(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react-router@7.13.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)(zod@4.3.6))(next@16.1.6(@babel/core@7.29.0)(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(tailwindcss@4.1.18)': dependencies: - fumadocs-core: 16.5.0(@types/react@19.2.10)(lucide-react@0.563.0(react@19.2.4))(next@16.1.6(@babel/core@7.29.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react-router@7.13.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)(zod@4.3.6) + fumadocs-core: 16.5.0(@types/react@19.2.10)(lucide-react@0.563.0(react@19.2.4))(next@16.1.6(@babel/core@7.29.0)(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react-router@7.13.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)(zod@4.3.6) next-themes: 0.4.6(react-dom@19.2.4(react@19.2.4))(react@19.2.4) postcss-selector-parser: 7.1.1 react: 19.2.4 @@ -11871,7 +11942,7 @@ snapshots: tailwind-merge: 3.4.0 optionalDependencies: '@types/react': 19.2.10 - next: 16.1.6(@babel/core@7.29.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4) + next: 16.1.6(@babel/core@7.29.0)(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4) tailwindcss: 4.1.18 '@hapi/address@5.1.1': @@ -12667,6 +12738,10 @@ snapshots: '@pkgr/core@0.2.9': {} + '@playwright/test@1.58.2': + dependencies: + playwright: 1.58.2 + '@polka/url@1.0.0-next.29': {} '@radix-ui/number@1.1.1': {} @@ -16581,7 +16656,7 @@ snapshots: fsevents@2.3.3: optional: true - fumadocs-core@16.5.0(@types/react@19.2.10)(lucide-react@0.563.0(react@19.2.4))(next@16.1.6(@babel/core@7.29.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react-router@7.13.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)(zod@4.3.6): + fumadocs-core@16.5.0(@types/react@19.2.10)(lucide-react@0.563.0(react@19.2.4))(next@16.1.6(@babel/core@7.29.0)(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react-router@7.13.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)(zod@4.3.6): dependencies: '@formatjs/intl-localematcher': 0.8.1 '@orama/orama': 3.1.18 @@ -16605,7 +16680,7 @@ snapshots: optionalDependencies: '@types/react': 19.2.10 lucide-react: 0.563.0(react@19.2.4) - next: 16.1.6(@babel/core@7.29.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4) + next: 16.1.6(@babel/core@7.29.0)(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4) react: 19.2.4 react-dom: 19.2.4(react@19.2.4) react-router: 7.13.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4) @@ -16613,14 +16688,14 @@ snapshots: transitivePeerDependencies: - supports-color - fumadocs-mdx@14.2.6(@types/react@19.2.10)(fumadocs-core@16.5.0(@types/react@19.2.10)(lucide-react@0.563.0(react@19.2.4))(next@16.1.6(@babel/core@7.29.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react-router@7.13.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)(zod@4.3.6))(next@16.1.6(@babel/core@7.29.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)(vite@7.3.1(@types/node@25.2.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)): + fumadocs-mdx@14.2.6(@types/react@19.2.10)(fumadocs-core@16.5.0(@types/react@19.2.10)(lucide-react@0.563.0(react@19.2.4))(next@16.1.6(@babel/core@7.29.0)(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react-router@7.13.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)(zod@4.3.6))(next@16.1.6(@babel/core@7.29.0)(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)(vite@7.3.1(@types/node@25.2.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)): dependencies: '@mdx-js/mdx': 3.1.1 '@standard-schema/spec': 1.1.0 chokidar: 5.0.0 esbuild: 0.27.2 estree-util-value-to-estree: 3.5.0 - fumadocs-core: 16.5.0(@types/react@19.2.10)(lucide-react@0.563.0(react@19.2.4))(next@16.1.6(@babel/core@7.29.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react-router@7.13.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)(zod@4.3.6) + fumadocs-core: 16.5.0(@types/react@19.2.10)(lucide-react@0.563.0(react@19.2.4))(next@16.1.6(@babel/core@7.29.0)(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react-router@7.13.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)(zod@4.3.6) js-yaml: 4.1.1 mdast-util-to-markdown: 2.1.2 picocolors: 1.1.1 @@ -16635,15 +16710,15 @@ snapshots: zod: 4.3.6 optionalDependencies: '@types/react': 19.2.10 - next: 16.1.6(@babel/core@7.29.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4) + next: 16.1.6(@babel/core@7.29.0)(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4) react: 19.2.4 vite: 7.3.1(@types/node@25.2.0)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0) transitivePeerDependencies: - supports-color - fumadocs-ui@16.5.0(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(fumadocs-core@16.5.0(@types/react@19.2.10)(lucide-react@0.563.0(react@19.2.4))(next@16.1.6(@babel/core@7.29.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react-router@7.13.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)(zod@4.3.6))(next@16.1.6(@babel/core@7.29.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(tailwindcss@4.1.18): + fumadocs-ui@16.5.0(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(fumadocs-core@16.5.0(@types/react@19.2.10)(lucide-react@0.563.0(react@19.2.4))(next@16.1.6(@babel/core@7.29.0)(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react-router@7.13.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)(zod@4.3.6))(next@16.1.6(@babel/core@7.29.0)(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(tailwindcss@4.1.18): dependencies: - '@fumadocs/ui': 16.5.0(@types/react@19.2.10)(fumadocs-core@16.5.0(@types/react@19.2.10)(lucide-react@0.563.0(react@19.2.4))(next@16.1.6(@babel/core@7.29.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react-router@7.13.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)(zod@4.3.6))(next@16.1.6(@babel/core@7.29.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(tailwindcss@4.1.18) + '@fumadocs/ui': 16.5.0(@types/react@19.2.10)(fumadocs-core@16.5.0(@types/react@19.2.10)(lucide-react@0.563.0(react@19.2.4))(next@16.1.6(@babel/core@7.29.0)(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react-router@7.13.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)(zod@4.3.6))(next@16.1.6(@babel/core@7.29.0)(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(tailwindcss@4.1.18) '@radix-ui/react-accordion': 1.2.12(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4) '@radix-ui/react-collapsible': 1.1.12(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4) '@radix-ui/react-dialog': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4) @@ -16655,7 +16730,7 @@ snapshots: '@radix-ui/react-slot': 1.2.4(@types/react@19.2.10)(react@19.2.4) '@radix-ui/react-tabs': 1.1.13(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4) class-variance-authority: 0.7.1 - fumadocs-core: 16.5.0(@types/react@19.2.10)(lucide-react@0.563.0(react@19.2.4))(next@16.1.6(@babel/core@7.29.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react-router@7.13.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)(zod@4.3.6) + fumadocs-core: 16.5.0(@types/react@19.2.10)(lucide-react@0.563.0(react@19.2.4))(next@16.1.6(@babel/core@7.29.0)(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react-router@7.13.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)(zod@4.3.6) lucide-react: 0.563.0(react@19.2.4) next-themes: 0.4.6(react-dom@19.2.4(react@19.2.4))(react@19.2.4) react: 19.2.4 @@ -16664,7 +16739,7 @@ snapshots: scroll-into-view-if-needed: 3.1.0 optionalDependencies: '@types/react': 19.2.10 - next: 16.1.6(@babel/core@7.29.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4) + next: 16.1.6(@babel/core@7.29.0)(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4) tailwindcss: 4.1.18 transitivePeerDependencies: - '@types/react-dom' @@ -16964,6 +17039,10 @@ snapshots: html-escaper@2.0.2: {} + html-parse-stringify@3.0.1: + dependencies: + void-elements: 3.1.0 + html-url-attributes@3.0.1: {} html-void-elements@3.0.0: {} @@ -17014,6 +17093,12 @@ snapshots: human-signals@8.0.1: {} + i18next@25.8.4(typescript@5.9.3): + dependencies: + '@babel/runtime': 7.28.6 + optionalDependencies: + typescript: 5.9.3 + iconv-lite@0.4.24: dependencies: safer-buffer: 2.1.2 @@ -18603,7 +18688,7 @@ snapshots: react: 19.2.4 react-dom: 19.2.4(react@19.2.4) - next@16.1.6(@babel/core@7.29.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4): + next@16.1.6(@babel/core@7.29.0)(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4): dependencies: '@next/env': 16.1.6 '@swc/helpers': 0.5.15 @@ -18622,6 +18707,7 @@ snapshots: '@next/swc-linux-x64-musl': 16.1.6 '@next/swc-win32-arm64-msvc': 16.1.6 '@next/swc-win32-x64-msvc': 16.1.6 + '@playwright/test': 1.58.2 sharp: 0.34.5 transitivePeerDependencies: - '@babel/core' @@ -19031,12 +19117,20 @@ snapshots: playwright-core@1.58.1: {} + playwright-core@1.58.2: {} + playwright@1.58.1: dependencies: playwright-core: 1.58.1 optionalDependencies: fsevents: 2.3.2 + playwright@1.58.2: + dependencies: + playwright-core: 1.58.2 + optionalDependencies: + fsevents: 2.3.2 + pluralize@2.0.0: {} pluralize@8.0.0: {} @@ -19269,6 +19363,17 @@ snapshots: dependencies: react: 19.2.4 + react-i18next@16.5.4(i18next@25.8.4(typescript@5.9.3))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3): + dependencies: + '@babel/runtime': 7.28.6 + html-parse-stringify: 3.0.1 + i18next: 25.8.4(typescript@5.9.3) + react: 19.2.4 + use-sync-external-store: 1.6.0(react@19.2.4) + optionalDependencies: + react-dom: 19.2.4(react@19.2.4) + typescript: 5.9.3 + react-is@16.13.1: {} react-is@17.0.2: {} @@ -20946,6 +21051,8 @@ snapshots: - tsx - yaml + void-elements@3.1.0: {} + vscode-uri@3.1.0: {} vue-template-compiler@2.7.16: diff --git a/vitest.config.mts b/vitest.config.mts index cbfaf4b1..95803026 100644 --- a/vitest.config.mts +++ b/vitest.config.mts @@ -11,7 +11,7 @@ export default defineConfig({ environment: 'happy-dom', testTimeout: 15000, // Increase default timeout for integration tests with MSW setupFiles: [path.resolve(__dirname, 'vitest.setup.tsx')], - exclude: ['**/node_modules/**', '**/dist/**', '**/cypress/**', '**/.{idea,git,cache,output,temp}/**'], + exclude: ['**/node_modules/**', '**/dist/**', '**/cypress/**', '**/e2e/**', '**/.{idea,git,cache,output,temp}/**'], passWithNoTests: true, coverage: { provider: 'v8', @@ -39,6 +39,7 @@ export default defineConfig({ }, resolve: { alias: { + '@object-ui/i18n': path.resolve(__dirname, './packages/i18n/src'), '@object-ui/core': path.resolve(__dirname, './packages/core/src'), '@object-ui/types/zod': path.resolve(__dirname, './packages/types/src/zod/index.zod.ts'), '@object-ui/types': path.resolve(__dirname, './packages/types/src'),