till/managarten
1
0
Fork 0
mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-14 21:21:10 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 4
managarten/apps/picture/packages
History
Wuesteon d36b321d9d style: auto-format codebase with Prettier 
Applied formatting to 1487+ files using pnpm format:write
  - TypeScript/JavaScript files
  - Svelte components
  - Astro pages
  - JSON configs
  - Markdown docs

  13 files still need manual review (Astro JSX comments)
2025-11-27 18:33:16 +01:00
..
design-tokens style: auto-format codebase with Prettier 2025-11-27 18:33:16 +01:00
mobile-ui style: auto-format codebase with Prettier 2025-11-27 18:33:16 +01:00
shared style: auto-format codebase with Prettier 2025-11-27 18:33:16 +01:00
README.md refactor: restructure 2025-11-26 03:03:24 +01:00

README.md

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?