feat: unify UI components, AppSlider, and login screens across apps

SUMMARY:
Consolidate shared UI components into @manacore/shared-ui and add
AppSlider to all login screens for a consistent Mana ecosystem experience.

CHANGES:

1. UI Components Migration:
   - Added Card.svelte to @manacore/shared-ui with variants (elevated, outlined, ghost)
   - Migrated Manacore (7 files) and Manadeck (7 files) to use shared-ui
   - Removed local ui/ directories from both apps (8 components total)

2. AppSlider Unification:
   - Created shared AppSlider in @manacore/shared-ui with configurable props
   - Props: apps[], title, isDark, statusLabels, comingSoonLabel, openAppLabel, onAppClick
   - Supports both i18n and static text configurations
   - Updated Memoro AppSlider to use shared component with svelte-i18n
   - Updated Manacore AppSlider to use shared component
   - Created new AppSlider for ManaDeck and Märchenzauber

3. Login Page Enhancements:
   - Extended LoginPage in @manacore/shared-auth-ui with new snippets:
     - appSlider: Renders AppSlider at bottom (initial mode only)
     - headerControls: Renders controls (theme toggle, etc.) top-right
   - Updated all app login pages to include AppSlider:
     - ManaCore: indigo theme (#6366f1)
     - ManaDeck: violet theme (#8b5cf6)
     - Märchenzauber: pink theme (#FF6B9D)

4. Subscription Page Consolidation:
   - Created SubscriptionPage component in @manacore/shared-subscription-ui
   - Moved subscription data (plans, packages, costs) to shared package
   - Reduced subscription page code from ~100 to ~18 lines per app

FILES CHANGED:
- packages/shared-ui: Added Card, AppSlider, updated exports
- packages/shared-auth-ui: Extended LoginPage with snippets
- packages/shared-subscription-ui: Added SubscriptionPage, data files
- manacore/web: Migrated 7 files to shared-ui, updated login
- manadeck/web: Migrated 7 files to shared-ui, added AppSlider, updated login
- maerchenzauber/web: Added AppSlider, updated login
- memoro/web: Updated AppSlider to use shared component

DELETED (moved to shared packages):
- manacore/web/src/lib/components/ui/* (3 files)
- manadeck/web/src/lib/components/ui/* (5 files)
- memoro/web/src/lib/data/*.json (3 files)
- Various pnpm-lock.yaml and pnpm-workspace.yaml files

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Till-JS 2025-11-24 21:53:44 +01:00
parent 96e0aceb93
commit 22cb7d2c5f
67 changed files with 894 additions and 22131 deletions

109
docs/DEVELOPMENT_SCRIPTS.md Normal file
View file

@ -0,0 +1,109 @@
# Development Scripts
Diese Dokumentation beschreibt die verfügbaren Entwicklungsbefehle im Manacore Monorepo.
## Übersicht
Das Monorepo nutzt [Turborepo](https://turbo.build/) für parallele Builds und intelligentes Caching. Alle Befehle werden über `pnpm` ausgeführt.
## Globale Befehle
| Befehl | Beschreibung |
|--------|--------------|
| `pnpm dev` | Startet alle Apps (Web, Mobile, Landing, Backend) |
| `pnpm build` | Baut alle Packages und Apps |
| `pnpm test` | Führt alle Tests aus |
| `pnpm lint` | Führt Linting für alle Packages aus |
| `pnpm type-check` | TypeScript-Typprüfung für alle Packages |
| `pnpm clean` | Bereinigt Build-Artefakte |
| `pnpm format` | Formatiert alle Dateien mit Prettier |
| `pnpm format:check` | Prüft Formatierung ohne Änderungen |
## App-Typ Befehle
Diese Befehle starten alle Apps eines bestimmten Typs gleichzeitig:
| Befehl | Beschreibung | Apps |
|--------|--------------|------|
| `pnpm dev:web` | Startet alle Web-Apps | maerchenzauber, manacore, manadeck, memoro |
| `pnpm dev:landing` | Startet alle Landing Pages | maerchenzauber, manacore, manadeck, memoro |
| `pnpm dev:mobile` | Startet alle Mobile-Apps | maerchenzauber, manacore, manadeck, memoro |
### Beispiel
```bash
# Alle Web-Apps starten (SvelteKit)
pnpm dev:web
# Alle Landing Pages starten (Astro)
pnpm dev:landing
# Alle Mobile-Apps starten (Expo)
pnpm dev:mobile
```
## Projekt-spezifische Befehle
Diese Befehle starten ein komplettes Projekt mit allen zugehörigen Apps und Dependencies:
| Befehl | Beschreibung |
|--------|--------------|
| `pnpm maerchenzauber:dev` | Startet Maerchenzauber (Backend, Web, Mobile, Landing) |
| `pnpm manacore:dev` | Startet Manacore (Web, Mobile, Landing) |
| `pnpm manadeck:dev` | Startet Manadeck (Web, Mobile, Landing) |
| `pnpm memoro:dev` | Startet Memoro (Web, Mobile, Landing) |
## Turbo Filter
Für erweiterte Kontrolle kannst du Turbo-Filter direkt verwenden:
```bash
# Einzelne App starten
pnpm turbo run dev --filter=@storyteller/web
# Mehrere Apps kombinieren
pnpm turbo run dev --filter=manacore-web --filter=memoro-web
```
### Package-Namen Referenz
Da die Package-Namen im Monorepo unterschiedlich sind, hier eine Übersicht:
| Projekt | Web | Landing | Mobile | Backend |
|---------|-----|---------|--------|---------|
| maerchenzauber | `@storyteller/web` | `@storyteller/landing` | `@storyteller/mobile` | `@storyteller/backend` |
| manacore | `manacore-web` | `manacore-landing` | `manacore` | - |
| manadeck | `web` | `landing` | `manadeck` | - |
| memoro | `memoro-web` | `memoro-landing` | `memoro` | - |
### Filter-Syntax
| Pattern | Beschreibung |
|---------|--------------|
| `--filter=name` | Exakte Package-Übereinstimmung |
| `--filter=name...` | Package und alle Dependencies |
| `--filter='@scope/*'` | Alle Packages im Scope |
## Port-Zuweisungen
Wenn mehrere Apps gleichzeitig laufen, verwenden sie unterschiedliche Ports:
| App-Typ | Projekt | Standard-Port |
|---------|---------|---------------|
| Web | maerchenzauber | 5173 |
| Web | manacore | 5174 |
| Web | manadeck | 5175 |
| Web | memoro | 5176 |
| Landing | maerchenzauber | 4321 |
| Landing | manacore | 4322 |
| Landing | manadeck | 4323 |
| Landing | memoro | 4324 |
| Backend | maerchenzauber | 3000 |
*Hinweis: Die tatsächlichen Ports können je nach Konfiguration variieren.*
## Tipps
1. **Schnelleres Starten**: Nutze `dev:web` statt `dev` wenn du nur an Web-Apps arbeitest
2. **Parallele Entwicklung**: Turbo führt alle Tasks parallel aus und nutzt Caching
3. **Selektives Bauen**: Nutze Filter um nur relevante Packages zu bauen