mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-14 21:41:09 +02:00
feat: add i18n localization with language switcher to all web apps
- Add svelte-i18n configuration with SSR support to all web apps - Create LanguageSelector component for each app with brand colors - Add German and English locale files - Integrate language switcher into login pages via headerControls snippet - Fix Tailwind v4 @source directives for shared package scanning - Update AppSlider styling to match login container design Apps updated: - Memoro (gold #f8d62b) - Märchenzauber (pink #FF6B9D) - ManaDeck (purple #8b5cf6) - ManaCore (indigo #6366f1) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Till-JS
parent
bd869dfe09
commit
926ca231b5
147 changed files with 7090 additions and 2276 deletions
356
docs/CHANGELOG_2025-11-24.md
Normal file
356
docs/CHANGELOG_2025-11-24.md
Normal file
|
|
@ -0,0 +1,356 @@
|
|||
# Changelog - Shared Packages Integration (2025-11-24)
|
||||
|
||||
## Übersicht
|
||||
|
||||
Dieses Update führt eine umfassende **Shared Packages Architektur** ein, die gemeinsamen Code über alle vier Web-Apps im Monorepo vereinheitlicht. Die Änderungen reduzieren duplizierter Code erheblich (ca. 3.000 LOC gelöscht), verbessern die Wartbarkeit und sorgen für konsistentes Verhalten und Design.
|
||||
|
||||
---
|
||||
|
||||
## Neue Shared Packages
|
||||
|
||||
### 1. `@manacore/shared-auth` (Neu)
|
||||
**Pfad**: `packages/shared-auth/`
|
||||
|
||||
Einheitliche Authentifizierungslogik für alle Web-Apps:
|
||||
|
||||
- **Core Services**:
|
||||
- `authService.ts` - Login, Logout, Register, Passwort-Reset
|
||||
- `tokenManager.ts` - JWT Token Storage, Refresh, Validierung
|
||||
- `jwtUtils.ts` - Token-Dekodierung, Ablaufprüfung, B2B-Erkennung
|
||||
|
||||
- **Adapter-Pattern für Plattformunabhängigkeit**:
|
||||
- `storage` - LocalStorage/Memory-Adapter
|
||||
- `device` - Geräte-Info für Token-Binding
|
||||
- `network` - Netzwerk-Status-Erkennung
|
||||
|
||||
- **Interceptor**:
|
||||
- `fetchInterceptor.ts` - Automatische Token-Injection in API-Calls
|
||||
|
||||
- **API**:
|
||||
```typescript
|
||||
import { initializeWebAuth } from '@manacore/shared-auth';
|
||||
|
||||
const { authService, tokenManager } = initializeWebAuth({
|
||||
baseUrl: 'https://api.example.com',
|
||||
});
|
||||
```
|
||||
|
||||
### 2. `@manacore/shared-auth-ui` (Neu)
|
||||
**Pfad**: `packages/shared-auth-ui/`
|
||||
|
||||
Wiederverwendbare Auth-UI-Komponenten:
|
||||
|
||||
- **Pages**:
|
||||
- `LoginPage.svelte` - Vollständige Login-Seite mit OAuth
|
||||
- `RegisterPage.svelte` - Vollständige Registrierungs-Seite
|
||||
- `ResetPasswordPage.svelte` - Passwort-Reset-Flow
|
||||
|
||||
- **Components**:
|
||||
- `GoogleSignInButton.svelte` - Google OAuth Button
|
||||
- `AppleSignInButton.svelte` - Apple OAuth Button
|
||||
- `PasswordInput.svelte` - Passwort-Input mit Validierung
|
||||
|
||||
- **Icons**:
|
||||
- Google/Apple Logos als Svelte-Komponenten
|
||||
|
||||
- **Konfiguration**:
|
||||
```typescript
|
||||
import { setGoogleClientId, setAppleConfig } from '@manacore/shared-auth-ui';
|
||||
|
||||
setGoogleClientId('your-client-id');
|
||||
setAppleConfig({ clientId: '...', redirectUri: '...' });
|
||||
```
|
||||
|
||||
### 3. `@manacore/shared-tailwind` (Neu)
|
||||
**Pfad**: `packages/shared-tailwind/`
|
||||
|
||||
Einheitliche Tailwind-Konfiguration mit 4 Theme-Varianten:
|
||||
|
||||
- **Themes**:
|
||||
- `lume` - Gold & Modern (Primary: #f8d62b)
|
||||
- `nature` - Grün & Beruhigend (Primary: #4CAF50)
|
||||
- `stone` - Slate & Elegant (Primary: #607D8B)
|
||||
- `ocean` - Blau & Tranquil (Primary: #039BE5)
|
||||
|
||||
- **Features**:
|
||||
- Light/Dark Mode für jedes Theme
|
||||
- 13+ semantische Farb-Tokens pro Theme
|
||||
- CSS-Variable-basiertes Theming
|
||||
- Fertige Component-Utilities
|
||||
|
||||
- **Verwendung**:
|
||||
```javascript
|
||||
// tailwind.config.js
|
||||
import preset from '@manacore/shared-tailwind/preset';
|
||||
|
||||
export default {
|
||||
presets: [preset],
|
||||
content: ['./src/**/*.{html,js,svelte,ts}'],
|
||||
};
|
||||
```
|
||||
|
||||
### 4. `@manacore/shared-icons` (Neu)
|
||||
**Pfad**: `packages/shared-icons/`
|
||||
|
||||
Einheitliche Icon-Bibliothek basierend auf Phosphor Icons:
|
||||
|
||||
- **Komponente**:
|
||||
```svelte
|
||||
<script>
|
||||
import { Icon } from '@manacore/shared-icons';
|
||||
</script>
|
||||
|
||||
<Icon name="play" size={24} class="text-primary" />
|
||||
```
|
||||
|
||||
- **Icons**: 40+ häufig verwendete Icons (play, pause, settings, user, etc.)
|
||||
|
||||
### 5. `@manacore/shared-ui` (Erweitert)
|
||||
**Pfad**: `packages/shared-ui/`
|
||||
|
||||
Atomic Design System für Svelte-Komponenten:
|
||||
|
||||
- **Atoms** (`src/atoms/`):
|
||||
- `Text.svelte` - Typography mit Varianten
|
||||
- `Button.svelte` - Primary, Secondary, Ghost, Danger
|
||||
- `Badge.svelte` - Status-Badges
|
||||
|
||||
- **Molecules** (`src/molecules/`):
|
||||
- `Toggle.svelte` - Toggle-Switch
|
||||
- `Input.svelte` - Text-Input mit Label & Validation
|
||||
|
||||
- **Organisms** (`src/organisms/`):
|
||||
- `Modal.svelte` - Overlay-Modal mit Slots
|
||||
|
||||
### 6. `@manacore/shared-types` (Erweitert)
|
||||
**Pfad**: `packages/shared-types/`
|
||||
|
||||
Neue Type-Module hinzugefügt:
|
||||
|
||||
- `auth.ts` - Auth-bezogene Types (User, Session, Token)
|
||||
- `theme.ts` - Theme-Konfiguration Types
|
||||
- `ui.ts` - UI-Komponenten Types
|
||||
- `common.ts` - Gemeinsame Utility Types
|
||||
|
||||
### 7. `@manacore/shared-utils` (Erweitert)
|
||||
**Pfad**: `packages/shared-utils/`
|
||||
|
||||
Neue Utility-Module hinzugefügt:
|
||||
|
||||
- `format.ts` - formatDuration, formatFileSize, formatNumber, formatCurrency
|
||||
- `validation.ts` - isValidEmail, isValidUrl, validatePassword
|
||||
|
||||
### 8. `@manacore/shared-i18n` (Neu)
|
||||
**Pfad**: `packages/shared-i18n/`
|
||||
|
||||
Einheitliche Internationalisierung:
|
||||
|
||||
- Locale-Detection
|
||||
- Common Translations (Buttons, Errors)
|
||||
- svelte-i18n Integration
|
||||
|
||||
### 9. `@manacore/shared-config` (Neu)
|
||||
**Pfad**: `packages/shared-config/`
|
||||
|
||||
Environment-Konfiguration:
|
||||
|
||||
- Zod-basierte Env-Validierung
|
||||
- Typsichere Config-Objekte
|
||||
|
||||
### 10. `@manacore/shared-subscription-types` (Neu) / `@manacore/shared-subscription-ui` (Neu)
|
||||
**Pfad**: `packages/shared-subscription-types/`, `packages/shared-subscription-ui/`
|
||||
|
||||
Subscription-bezogene Types und UI-Komponenten (Vorbereitung für zukünftige Integration).
|
||||
|
||||
---
|
||||
|
||||
## App-Spezifische Änderungen
|
||||
|
||||
### Memoro Web (`memoro/apps/web/`)
|
||||
|
||||
**Gelöschte Dateien** (Migration zu Shared Packages):
|
||||
- `src/lib/components/AppleSignInButton.svelte` → `@manacore/shared-auth-ui`
|
||||
- `src/lib/components/GoogleSignInButton.svelte` → `@manacore/shared-auth-ui`
|
||||
- `src/lib/components/Modal.svelte` → `@manacore/shared-ui`
|
||||
- `src/lib/components/Toggle.svelte` → `@manacore/shared-ui`
|
||||
- `src/lib/components/BillingToggle.svelte` → Nicht mehr benötigt
|
||||
- `src/lib/components/CostCard.svelte` → Refactored
|
||||
- `src/lib/components/PackageCard.svelte` → Refactored
|
||||
- `src/lib/components/SubscriptionCard.svelte` → Refactored
|
||||
- `src/lib/components/SubscriptionButton.svelte` → Refactored
|
||||
- `src/lib/components/UsageCard.svelte` → Refactored
|
||||
- `src/lib/components/ManaIcon.svelte` → `@manacore/shared-icons`
|
||||
- `src/lib/components/atoms/Text.svelte` → `@manacore/shared-ui`
|
||||
- `src/lib/components/icons/` → `@manacore/shared-icons`
|
||||
- `src/lib/utils/appleAuth.ts` → `@manacore/shared-auth-ui`
|
||||
- `src/lib/utils/googleAuth.ts` → `@manacore/shared-auth-ui`
|
||||
|
||||
**Modifizierte Dateien**:
|
||||
- `tailwind.config.js` - Reduziert von 165 auf 12 Zeilen (nutzt shared-tailwind preset)
|
||||
- `src/app.css` - Drastisch reduziert (nutzt shared-tailwind CSS)
|
||||
- `src/routes/(public)/login/+page.svelte` - Von 549 auf 46 Zeilen (nutzt LoginPage)
|
||||
- `src/routes/(public)/register/+page.svelte` - Von 400+ auf 50 Zeilen (nutzt RegisterPage)
|
||||
- 30+ Komponenten - Icon-Import auf `@manacore/shared-icons` umgestellt
|
||||
|
||||
### ManaCore Web (`manacore/apps/web/`)
|
||||
|
||||
**Gelöschte Dateien**:
|
||||
- `src/routes/(auth)/login/+page.server.ts` → Client-side Auth
|
||||
- `src/routes/(auth)/register/+page.server.ts` → Client-side Auth
|
||||
|
||||
**Neue Dateien**:
|
||||
- `src/lib/stores/authStore.svelte.ts` - Auth-Store mit shared-auth
|
||||
- `src/lib/components/Icon.svelte` - Icon-Wrapper
|
||||
- `src/lib/components/ManaCoreLogo.svelte` - Logo-Komponente
|
||||
- `src/lib/components/ThemeToggle.svelte` - Theme-Umschalter
|
||||
- `src/lib/components/AppSlider.svelte` - App-Slider
|
||||
|
||||
**Modifizierte Dateien**:
|
||||
- `tailwind.config.js` - Nutzt shared-tailwind preset
|
||||
- `src/routes/(auth)/login/+page.svelte` - Nutzt LoginPage von shared-auth-ui
|
||||
- `src/routes/(auth)/register/+page.svelte` - Nutzt RegisterPage von shared-auth-ui
|
||||
|
||||
### ManaDeck Web (`manadeck/apps/web/`)
|
||||
|
||||
**Gelöschte Dateien**:
|
||||
- `src/lib/services/authService.ts` → `@manacore/shared-auth`
|
||||
- `src/lib/services/tokenManager.ts` → `@manacore/shared-auth`
|
||||
- `src/lib/services/deviceManager.ts` → `@manacore/shared-auth`
|
||||
- `src/lib/utils/jwt.ts` → `@manacore/shared-auth`
|
||||
|
||||
**Neue Dateien**:
|
||||
- `src/lib/auth.ts` - Auth-Initialisierung mit shared-auth
|
||||
- `src/lib/components/Icon.svelte` - Icon-Wrapper
|
||||
- `src/lib/components/ManaDeckLogo.svelte` - Logo-Komponente
|
||||
|
||||
**Modifizierte Dateien**:
|
||||
- `tailwind.config.js` - Nutzt shared-tailwind
|
||||
- `src/lib/stores/authStore.svelte.ts` - Nutzt shared-auth
|
||||
- `src/routes/(auth)/login/+page.svelte` - Nutzt LoginPage
|
||||
- `src/routes/(auth)/register/+page.svelte` - Nutzt RegisterPage
|
||||
|
||||
### Märchenzauber Web (`maerchenzauber/apps/web/`)
|
||||
|
||||
**Neue Dateien**:
|
||||
- `src/lib/auth.ts` - Auth-Setup
|
||||
- `src/lib/stores/` - Store-Implementierungen
|
||||
- `src/lib/components/` - Komponenten
|
||||
- `src/lib/utils/` - Utilities
|
||||
- `src/lib/types/` - Type-Definitionen
|
||||
- `src/routes/(auth)/` - Auth-Routen
|
||||
- `src/app.css` - App-Styles
|
||||
- `postcss.config.js` - PostCSS-Config
|
||||
- `.env.example` - Environment-Template
|
||||
|
||||
---
|
||||
|
||||
## Quantitative Zusammenfassung
|
||||
|
||||
| Metrik | Vorher | Nachher | Einsparung |
|
||||
|--------|--------|---------|------------|
|
||||
| Dateien geändert | - | 102 | - |
|
||||
| Zeilen hinzugefügt | - | ~1,400 | - |
|
||||
| Zeilen gelöscht | - | ~4,300 | ~3,000 LOC |
|
||||
| Login-Page LOC (Memoro) | 549 | 46 | 92% |
|
||||
| Tailwind Config LOC (Memoro) | 165 | 12 | 93% |
|
||||
|
||||
---
|
||||
|
||||
## Abhängigkeiten
|
||||
|
||||
Neue Dependencies in App `package.json`:
|
||||
```json
|
||||
{
|
||||
"dependencies": {
|
||||
"@manacore/shared-auth": "workspace:*",
|
||||
"@manacore/shared-auth-ui": "workspace:*",
|
||||
"@manacore/shared-icons": "workspace:*",
|
||||
"@manacore/shared-tailwind": "workspace:*",
|
||||
"@manacore/shared-types": "workspace:*",
|
||||
"@manacore/shared-ui": "workspace:*",
|
||||
"@manacore/shared-utils": "workspace:*"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Breaking Changes
|
||||
|
||||
1. **Icon-Import-Pfade** - Alle Icons müssen von `@manacore/shared-icons` importiert werden
|
||||
2. **Modal-Import** - Modal kommt jetzt von `@manacore/shared-ui`
|
||||
3. **Auth-Services** - Lokale authService/tokenManager durch shared-auth ersetzt
|
||||
4. **OAuth-Buttons** - Konfiguration erfolgt über `setGoogleClientId()` / `setAppleConfig()`
|
||||
|
||||
---
|
||||
|
||||
## Migration Guide
|
||||
|
||||
### Icon Migration
|
||||
```svelte
|
||||
<!-- Vorher -->
|
||||
<script>
|
||||
import Icon from '$lib/components/Icon.svelte';
|
||||
</script>
|
||||
|
||||
<!-- Nachher -->
|
||||
<script>
|
||||
import { Icon } from '@manacore/shared-icons';
|
||||
</script>
|
||||
```
|
||||
|
||||
### Login Page Migration
|
||||
```svelte
|
||||
<!-- Vorher: 500+ Zeilen eigener Code -->
|
||||
|
||||
<!-- Nachher -->
|
||||
<script>
|
||||
import { LoginPage } from '@manacore/shared-auth-ui';
|
||||
import MyLogo from '$lib/components/MyLogo.svelte';
|
||||
import { authStore } from '$lib/stores/authStore';
|
||||
|
||||
async function handleSignIn(email, password) {
|
||||
return authStore.signIn(email, password);
|
||||
}
|
||||
</script>
|
||||
|
||||
<LoginPage
|
||||
onSignIn={handleSignIn}
|
||||
onForgotPassword={handleForgotPassword}
|
||||
registerUrl="/register"
|
||||
>
|
||||
{#snippet logo()}
|
||||
<MyLogo />
|
||||
{/snippet}
|
||||
</LoginPage>
|
||||
```
|
||||
|
||||
### Tailwind Config Migration
|
||||
```javascript
|
||||
// Vorher: 150+ Zeilen mit Theme-Definitionen
|
||||
|
||||
// Nachher
|
||||
import preset from '@manacore/shared-tailwind/preset';
|
||||
|
||||
export default {
|
||||
presets: [preset],
|
||||
content: ['./src/**/*.{html,js,svelte,ts}'],
|
||||
};
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Nächste Schritte
|
||||
|
||||
1. **Testing** - Alle Apps auf Funktionalität prüfen
|
||||
2. **Type-Checking** - `pnpm run type-check` in allen Apps ausführen
|
||||
3. **Build-Verification** - Production Builds testen
|
||||
4. **Dokumentation** - README-Dateien für neue Packages erstellen
|
||||
|
||||
---
|
||||
|
||||
## Referenzen
|
||||
|
||||
- `SHARED_PACKAGES_ROADMAP.md` - Vollständige Roadmap der Shared Packages
|
||||
- `packages/shared-auth/src/index.ts` - Auth-API Dokumentation
|
||||
- `packages/shared-tailwind/src/preset.js` - Theme-Konfiguration
|
||||
312
docs/SHARED_PACKAGES_ROADMAP.md
Normal file
312
docs/SHARED_PACKAGES_ROADMAP.md
Normal file
|
|
@ -0,0 +1,312 @@
|
|||
# Shared Packages Roadmap
|
||||
|
||||
This document outlines the plan to unify common code across all web apps in the monorepo.
|
||||
|
||||
## Current Shared Packages
|
||||
|
||||
- [x] `@manacore/shared-icons` - Unified Phosphor Icons for all web apps
|
||||
- [x] `@manacore/shared-ui` - Unified UI Components (Text, Button, Badge, Toggle, Input, Modal, Card, Navigation, Forms)
|
||||
- [x] `@manacore/shared-auth` - Unified Auth Logic (Supabase client, token management)
|
||||
- [x] `@manacore/shared-auth-ui` - Unified Auth UI (LoginPage, RegisterPage, OAuth buttons)
|
||||
- [x] `@manacore/shared-tailwind` - Unified Tailwind Config (HSL colors, preset, themes.css)
|
||||
- [x] `@manacore/shared-theme` - Unified Theme Store (Svelte 5, 4 variants, light/dark/system)
|
||||
- [x] `@manacore/shared-theme-ui` - Theme UI Components (ThemeToggle, ThemeSelector)
|
||||
- [x] `@manacore/shared-utils` - Unified Utilities (formatting, validation, async, date, keyboard)
|
||||
- [x] `@manacore/shared-types` - Unified TypeScript Types
|
||||
- [x] `@manacore/shared-supabase` - Unified Supabase Client Factory
|
||||
- [x] `@manacore/shared-i18n` - Unified i18n (languages, locale detection, translations)
|
||||
- [x] `@manacore/shared-config` - Unified Config (env validation)
|
||||
- [x] `@manacore/shared-branding` - **NEW** Unified App Branding (logos, colors, app config)
|
||||
- [x] `@manacore/shared-subscription-types` - Subscription Type Definitions
|
||||
- [x] `@manacore/shared-subscription-ui` - Subscription UI Components
|
||||
|
||||
---
|
||||
|
||||
## Recently Completed (2025-11-24)
|
||||
|
||||
### App Migration to Shared Packages
|
||||
|
||||
All web apps now use the shared packages consistently:
|
||||
|
||||
**Logo Components** - Migrated to `@manacore/shared-branding`:
|
||||
- `memoro/apps/web/src/lib/components/MemoroLogo.svelte` → uses `AppLogo`
|
||||
- `manadeck/apps/web/src/lib/components/ManaDeckLogo.svelte` → uses `AppLogo`
|
||||
- `manacore/apps/web/src/lib/components/ManaCoreLogo.svelte` → uses `AppLogo`
|
||||
- `maerchenzauber/apps/web/src/lib/components/StorytellerLogo.svelte` → uses `AppLogo`
|
||||
|
||||
**Formatter Functions** - Migrated to `@manacore/shared-utils`:
|
||||
- `memoro/apps/web/src/lib/components/memo/AdditionalRecordings.svelte` → uses `formatDurationFromMs`, `formatFileSize`
|
||||
- `memoro/apps/web/src/lib/components/RecordingButton.svelte` → uses `formatDuration`
|
||||
- `memoro/apps/web/src/lib/components/statistics/OverviewCard.svelte` → uses `formatDurationWithUnits`
|
||||
- `memoro/apps/web/src/lib/components/statistics/InsightsCard.svelte` → uses `formatDurationWithUnits`
|
||||
- `memoro/apps/web/src/lib/components/statistics/ProductivityCard.svelte` → uses `formatDurationWithUnits`
|
||||
|
||||
---
|
||||
|
||||
## Planned Shared Packages
|
||||
|
||||
### 1. Shared UI Components (`@manacore/shared-ui`)
|
||||
|
||||
**Status**: Done
|
||||
**Priority**: High
|
||||
**Estimated LOC Savings**: 500-800 per app
|
||||
|
||||
**Components to unify**:
|
||||
- `Button.svelte` - Primary, secondary, ghost, danger variants
|
||||
- `Input.svelte` - Text input with label, error states
|
||||
- `Text.svelte` - Typography component with variants
|
||||
- `Modal.svelte` - Overlay modal with header, body, footer slots
|
||||
- `Spinner.svelte` - Loading indicator
|
||||
- `Toast.svelte` - Notification toasts
|
||||
- `Badge.svelte` - Status badges
|
||||
- `Card.svelte` - Content container
|
||||
- `Dropdown.svelte` - Select/dropdown menus
|
||||
|
||||
**Apps using these**:
|
||||
- ManaCore Web
|
||||
- Memoro Web
|
||||
- Maerchenzauber Web
|
||||
- ManaDeck Web
|
||||
|
||||
---
|
||||
|
||||
### 2. Shared Auth (`@manacore/shared-auth`)
|
||||
|
||||
**Status**: Done
|
||||
**Priority**: High
|
||||
**Estimated LOC Savings**: 800-1200 per app
|
||||
|
||||
**Modules to unify**:
|
||||
- `tokenManager.ts` - JWT token storage, refresh, validation
|
||||
- `authService.ts` - Login, logout, register, password reset
|
||||
- `supabaseClient.ts` - Authenticated Supabase client factory
|
||||
- `authStore.ts` - Svelte store for auth state
|
||||
- `authGuard.ts` - Route protection utilities
|
||||
|
||||
**Considerations**:
|
||||
- Each app may have different Supabase projects
|
||||
- Token storage strategy (localStorage vs cookies)
|
||||
- OAuth providers per app
|
||||
|
||||
---
|
||||
|
||||
### 3. Shared Tailwind Config (`@manacore/shared-tailwind`)
|
||||
|
||||
**Status**: Done
|
||||
**Priority**: High
|
||||
**Estimated Benefit**: Consistent branding, easier theme updates
|
||||
|
||||
**Config unified**:
|
||||
- Color palette (primary, secondary, accent colors)
|
||||
- Theme variants (Lume, Nature, Stone, Ocean) with light/dark modes
|
||||
- Typography scale (font sizes, line heights)
|
||||
- Border radius tokens
|
||||
- Shadow tokens
|
||||
- CSS variable-based theming system
|
||||
|
||||
**Structure**:
|
||||
```
|
||||
packages/shared-tailwind/
|
||||
├── package.json
|
||||
├── src/
|
||||
│ ├── index.js # Main exports
|
||||
│ ├── preset.js # Tailwind preset with all tokens
|
||||
│ ├── colors.js # Color definitions (4 themes)
|
||||
│ ├── theme-variables.css # CSS variables for themes
|
||||
│ └── components.css # Component utilities
|
||||
```
|
||||
|
||||
**Apps using this**:
|
||||
- Memoro Web (full migration with theme.css + components.css)
|
||||
- ManaCore Web (preset only, keeps local colors)
|
||||
- ManaDeck Web (colors import, HSL-based system)
|
||||
- Maerchenzauber Web (dependency added)
|
||||
|
||||
---
|
||||
|
||||
### 4. Shared Utilities (`@manacore/shared-utils`)
|
||||
|
||||
**Status**: Done
|
||||
**Priority**: Medium
|
||||
**Estimated LOC Savings**: 200-400 per app
|
||||
|
||||
**Utilities included**:
|
||||
- `date.ts` - formatDate, formatRelativeTime, toISOString
|
||||
- `format.ts` - formatDuration, formatFileSize, formatNumber, formatCurrency, formatPercent
|
||||
- `validation.ts` - isValidEmail, isValidUrl, isValidPhone, validatePassword, isValidUuid
|
||||
- `string.ts` - truncate, capitalize, generateId, slugify
|
||||
- `async.ts` - sleep, retry, debounce
|
||||
|
||||
---
|
||||
|
||||
### 5. Shared Types (`@manacore/shared-types`)
|
||||
|
||||
**Status**: Planned
|
||||
**Priority**: Medium
|
||||
**Estimated Benefit**: Type safety across packages
|
||||
|
||||
**Types to unify**:
|
||||
- `User` - Common user type
|
||||
- `ApiResponse<T>` - Standard API response wrapper
|
||||
- `PaginatedResponse<T>` - Pagination types
|
||||
- `Theme` - Theme configuration types
|
||||
- `Locale` - i18n locale types
|
||||
|
||||
**Note**: App-specific database types (Supabase generated) should remain in each app.
|
||||
|
||||
---
|
||||
|
||||
### 6. Shared i18n (`@manacore/shared-i18n`)
|
||||
|
||||
**Status**: Done
|
||||
**Priority**: Medium
|
||||
**Estimated LOC Savings**: 100-300 per app
|
||||
|
||||
**Modules to unify**:
|
||||
- `i18n.ts` - svelte-i18n setup and initialization
|
||||
- `detectLocale.ts` - Browser language detection
|
||||
- Common translations:
|
||||
- Error messages
|
||||
- UI labels (Save, Cancel, Delete, etc.)
|
||||
- Date/time formats
|
||||
- Validation messages
|
||||
|
||||
**Structure**:
|
||||
```
|
||||
packages/shared-i18n/
|
||||
├── package.json
|
||||
├── src/
|
||||
│ ├── index.ts
|
||||
│ ├── setup.ts
|
||||
│ ├── detectLocale.ts
|
||||
│ └── translations/
|
||||
│ ├── common/
|
||||
│ │ ├── en.json
|
||||
│ │ └── de.json
|
||||
│ └── errors/
|
||||
│ ├── en.json
|
||||
│ └── de.json
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 7. Shared Config (`@manacore/shared-config`)
|
||||
|
||||
**Status**: Planned
|
||||
**Priority**: Low
|
||||
**Estimated Benefit**: Consistent env handling
|
||||
|
||||
**Config to unify**:
|
||||
- Environment variable validation (Zod schemas)
|
||||
- API endpoint construction
|
||||
- Feature flag utilities
|
||||
- App metadata (version, name, etc.)
|
||||
|
||||
---
|
||||
|
||||
## Implementation Order
|
||||
|
||||
1. **Phase 1** (Completed)
|
||||
- [x] `@manacore/shared-icons`
|
||||
- [x] `@manacore/shared-ui`
|
||||
|
||||
2. **Phase 2** (Completed)
|
||||
- [x] `@manacore/shared-auth`
|
||||
- [x] `@manacore/shared-auth-ui`
|
||||
- [x] `@manacore/shared-tailwind`
|
||||
|
||||
3. **Phase 3** (Completed)
|
||||
- [x] `@manacore/shared-utils`
|
||||
- [x] `@manacore/shared-types`
|
||||
- [x] `@manacore/shared-supabase`
|
||||
|
||||
4. **Phase 4** (Completed)
|
||||
- [x] `@manacore/shared-i18n`
|
||||
- [x] `@manacore/shared-config`
|
||||
|
||||
---
|
||||
|
||||
## Guidelines for Shared Packages
|
||||
|
||||
### Package Structure
|
||||
```
|
||||
packages/shared-{name}/
|
||||
├── package.json
|
||||
├── tsconfig.json
|
||||
├── src/
|
||||
│ ├── index.ts # Public exports
|
||||
│ └── ...
|
||||
└── README.md
|
||||
```
|
||||
|
||||
### Package.json Template
|
||||
```json
|
||||
{
|
||||
"name": "@manacore/shared-{name}",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"main": "./src/index.ts",
|
||||
"types": "./src/index.ts",
|
||||
"exports": {
|
||||
".": "./src/index.ts"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"svelte": "^5.0.0"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Best Practices
|
||||
1. **Keep it minimal** - Only share truly common code
|
||||
2. **Document props** - Use TypeScript interfaces with JSDoc
|
||||
3. **Version carefully** - Coordinate updates across apps
|
||||
4. **Test thoroughly** - Changes affect all apps
|
||||
5. **Avoid breaking changes** - Use deprecation warnings
|
||||
|
||||
---
|
||||
|
||||
## Package Details
|
||||
|
||||
### `@manacore/shared-branding`
|
||||
|
||||
Centralized branding configuration for all Mana ecosystem apps.
|
||||
|
||||
**Exports**:
|
||||
- `AppLogo` - SVG logo component that renders app-specific logo
|
||||
- `AppLogoWithName` - Logo with app name and tagline
|
||||
- `ManaIcon` - Generic Mana icon component
|
||||
- `APP_BRANDING` - Configuration object with colors, names, taglines
|
||||
- `AppId` type - Union type of all app IDs
|
||||
|
||||
**Usage**:
|
||||
```svelte
|
||||
<script>
|
||||
import { AppLogo } from '@manacore/shared-branding';
|
||||
</script>
|
||||
|
||||
<AppLogo app="memoro" size={32} />
|
||||
<AppLogo app="manacore" size={55} color="#fff" />
|
||||
```
|
||||
|
||||
### `@manacore/shared-utils/format`
|
||||
|
||||
Duration and formatting utilities.
|
||||
|
||||
**Exports**:
|
||||
- `formatDuration(seconds)` - Returns `MM:SS` or `HH:MM:SS`
|
||||
- `formatDurationFromMs(ms)` - Converts milliseconds first
|
||||
- `formatDurationWithUnits(seconds, locale)` - Returns `2h 30m` style
|
||||
- `formatDurationHumanReadable(seconds, locale)` - Returns `2 Stunden 30 Minuten`
|
||||
- `formatFileSize(bytes)` - Returns `1.5 MB`
|
||||
- `formatNumber(num, locale)` - Locale-aware number formatting
|
||||
- `formatCurrency(amount, currency, locale)` - Currency formatting
|
||||
- `formatPercent(value, decimals, locale)` - Percentage formatting
|
||||
|
||||
---
|
||||
|
||||
## Notes
|
||||
|
||||
- Created: 2025-11-24
|
||||
- Last Updated: 2025-11-24
|
||||
- Author: Claude Code
|
||||
Loading…
Add table
Add a link
Reference in a new issue