managarten/docs/archive/CHANGELOG_2025-11-24.md

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:

  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:

  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:

  // 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:

  <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:

{
  "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

<!-- Vorher -->
<script>
  import Icon from '$lib/components/Icon.svelte';
</script>

<!-- Nachher -->
<script>
  import { Icon } from '@manacore/shared-icons';
</script>

Login Page Migration

<!-- 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

// 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