managarten/picture/packages
Till-JS c712a2504a feat: integrate uload and picture, unify package naming
- Add uload project with apps/web structure
  - Reorganize from flat to monorepo structure
  - Remove PocketBase binary and local data
  - Update to pnpm and @uload/web namespace

- Add picture project to monorepo
  - Remove embedded git repository

- Unify all package names to @{project}/{app} schema:
  - @maerchenzauber/* (was @storyteller/*)
  - @manacore/* (was manacore-*, manacore)
  - @manadeck/* (was web, backend, manadeck)
  - @memoro/* (was memoro-web, landing, memoro)
  - @picture/* (already unified)
  - @uload/web

- Add convenient dev scripts for all apps:
  - pnpm dev:{project}:web
  - pnpm dev:{project}:landing
  - pnpm dev:{project}:mobile
  - pnpm dev:{project}:backend

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-25 04:00:36 +01:00
..
design-tokens feat: integrate uload and picture, unify package naming 2025-11-25 04:00:36 +01:00
mobile-ui feat: integrate uload and picture, unify package naming 2025-11-25 04:00:36 +01:00
shared feat: integrate uload and picture, unify package naming 2025-11-25 04:00:36 +01:00
README.md feat: integrate uload and picture, unify package naming 2025-11-25 04:00:36 +01:00

Picture - Shared Packages

This directory contains shared packages used across the picture monorepo.

Packages

@memoro/mobile-ui

React Native UI component library

  • Framework: React Native (Expo) only
  • Components: 17 UI + Navigation components
  • Target: Mobile app (@picture/mobile)
  • Status: Ready to use

Compatible Apps:

  • Mobile (apps/mobile/)
  • Web (apps/web/) - Not compatible
  • Landing (apps/landing/) - Not compatible

Usage:

# From project root
node packages/mobile-ui/cli/bin/cli.js list
node packages/mobile-ui/cli/bin/cli.js add button

Documentation:


@picture/shared

Shared backend logic and types

  • Framework: Framework-agnostic (TypeScript)
  • Content: Supabase types, API client, utilities
  • Target: All apps

Compatible Apps:

  • Mobile (apps/mobile/)
  • Web (apps/web/)
  • Landing (apps/landing/)

Usage:

import { supabase } from '@picture/shared';
import type { Database } from '@picture/shared/types';

Framework Compatibility Matrix

Package Mobile (RN) Web (Svelte) Landing (Astro)
@memoro/mobile-ui Yes No No
@picture/shared Yes Yes Yes

Why Different Compatibility?

@memoro/mobile-ui - React Native Only

Uses React Native primitives that don't work on web:

import { View, Pressable, Text } from 'react-native';
import Animated from 'react-native-reanimated';

@picture/shared - Framework Agnostic

Pure TypeScript/JavaScript, no UI dependencies:

import { createClient } from '@supabase/supabase-js';
export const supabase = createClient(...);

UI Component Strategy

Mobile App

Uses: @memoro/mobile-ui

  • 17 React Native components
  • CLI tool for installation
  • Path: packages/mobile-ui/

Web App

Uses: Own Svelte components

  • Custom Svelte components
  • Path: apps/web/src/lib/components/ui/
  • Examples: Button.svelte, Card.svelte

Landing Page

Uses: Own Astro components

  • Custom Astro components
  • Path: apps/landing/src/components/
  • Examples: Hero.astro, CTA.astro

Future Packages

@memoro/design-tokens (Planned)

Shared design tokens for visual consistency:

packages/design-tokens/
├── colors.ts        # Brand colors
├── spacing.ts       # Spacing scale
├── typography.ts    # Font styles
└── tailwind.preset.js

Would be used by all apps to maintain consistent branding.

Questions?