Shared Packages

`@mrrmlab/shared-types`

Zweck: Single Source of Truth für alle API-Datenstrukturen.

Zod-Schemas werden definiert → TypeScript-Typen werden automatisch abgeleitet. Backend nutzt sie zur Validierung, Frontend für Typsicherheit.

Export-Conditions:

react-native → ./src/*.ts (TypeScript-Quellcode, für Metro)
default → ./dist/*.js (kompiliert, für Node/Web-Bundler)

Wichtig: Das dist/-Verzeichnis muss vor dem mobilen Build erzeugt werden:

pnpm exec turbo run build --filter=@mrrmlab/shared-types

`@mrrmlab/api-client`

Zweck: Typisierter HTTP-Client für alle Frontends.

const api = new ApiClient({ baseUrl: 'https://api.mrrm.de', getToken: auth.getAccessToken });
const lists = await api.lists.getAll();        // ListDto[]
const list  = await api.lists.getById(id);    // ListWithItemsDto
await api.lists.create({ type: 'shopping', title: 'Einkauf' });

Alle Responses werden gegen Zod-Schemas validiert. Bei Validierungsfehler wird ApiResponseValidationError geworfen.

`@mrrmlab/auth`

Zweck: Cross-Platform OIDC Authorization Code Flow + PKCE.

Plattformunabhängig — funktioniert in Web, React Native und Node.js.

const auth = new AuthClient({
  config: {
    issuer: 'https://auth.mrrm.de/realms/mmlab',
    clientId: 'mrrmlab-android',
    redirectUri: 'mrrmlab://auth/callback',
    scopes: ['openid', 'profile', 'email', 'offline_access'],
  },
  store: new ExpoSecureStoreTokenStore(),
});

const url = await auth.startLogin();   // Authorization URL generieren
await auth.handleCallback(callbackUrl); // Code gegen Token tauschen
const token = await auth.getAccessToken(); // Gültigen Token holen (ggf. refresh)

Token-Speicherung via TokenStore-Interface:

InMemoryTokenStore — für Tests
WebStorageTokenStore — Web (localStorage)
ExpoSecureStoreTokenStore — Mobile (verschlüsselt)

SHA-256 für PKCE: Nutzt @noble/hashes/sha256 (pure JS, kein crypto.subtle nötig → React Native kompatibel).

`@mrrmlab/ui`

Zweck: Geteiltes Tamagui Design System.

Identische Komponenten auf Web und React Native. Konfiguration in tamagui.config:

Farben, Fonts, Spacing-Skala
Dark/Light Mode (userInterfaceStyle: 'automatic')

import { Button, Input, Text } from '@mrrmlab/ui';
// Funktioniert in Web (React) und Mobile (React Native)

`@mrrmlab/config`

Geteilte Tooling-Konfigurationen:

// tsconfig.json in einem Package
{ "extends": "@mrrmlab/config/tsconfig/library.json" }

Verfügbare tsconfig-Presets: base, react, node, library
ESLint-Presets: base, react, node