till/managarten
1
0
Fork 0
mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-15 20:19:39 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 4
managarten/apps/picture/packages/mobile-ui/MIGRATION.md
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

3.3 KiB
Raw Permalink Blame History

Migration: @memoro/ui → @memoro/mobile-ui

Date: 2025-10-08 Reason: Clarify framework compatibility in monorepo structure

What Changed

Package Rename

  • Old: @memoro/ui
  • New: @memoro/mobile-ui
  • Directory: packages/memoro-ui/ → packages/mobile-ui/

Framework Scope

The package is now explicitly React Native only.

Compatible:

  • ✅ React Native (Expo)
  • ✅ Expo Router
  • ✅ React Native apps

Not Compatible:

  • ❌ SvelteKit (Web app)
  • ❌ Astro (Landing page)
  • ❌ Next.js / React DOM
  • ❌ Any web framework

Why This Change?

Monorepo Structure

The picture project uses a monorepo with multiple apps:

picture/
├── apps/
│   ├── mobile/          # React Native (Expo) ✅ Can use @memoro/mobile-ui
│   ├── web/             # SvelteKit ❌ Cannot use
│   └── landing/         # Astro ❌ Cannot use
└── packages/
    └── mobile-ui/       # React Native components only

Technical Reason

All 17 components use React Native primitives:

  • View, Pressable, Text (not DOM elements)
  • react-native-reanimated
  • react-native-safe-area-context
  • NativeWind (Tailwind for React Native)

These dependencies are not compatible with web frameworks.

What Was Updated

Files Changed

  1. Package name:

    • package.json → name: "@memoro/mobile-ui"
    • registry.json → name: "@memoro/mobile-ui"

  2. Documentation:

    • README.md - Added framework compatibility warning
    • STATUS.md - Added target apps section
    • SUMMARY.md - Added compatibility table
    • CLI.md - Added React Native-only note

  3. All path references:

    • packages/memoro-ui/ → packages/mobile-ui/

No Breaking Changes

  • Component code unchanged
  • CLI tool works the same
  • Import paths unchanged (still @/components/ui/Button)
  • Registry structure unchanged

For Developers

If Using Mobile App (@picture/mobile)

No action needed. Everything works as before.

# Still works exactly the same
node packages/mobile-ui/cli/bin/cli.js list
node packages/mobile-ui/cli/bin/cli.js add button

If Using Web App (@picture/web) or Landing

Cannot use this library. Build Svelte/Astro components instead.

Consider:

  • Create apps/web/src/lib/components/ui/ for Svelte components
  • Create apps/landing/src/components/ for Astro components
  • Share design tokens (colors, spacing) via separate package

Future: Shared Design Tokens

If UI consistency becomes important across all apps:

packages/
├── mobile-ui/           # React Native components
├── design-tokens/       # Shared colors, spacing, typography (NEW)
│   ├── colors.ts
│   ├── spacing.ts
│   └── tailwind.preset.js
└── shared/              # Supabase types (existing)

Then:

  • Mobile app uses @memoro/mobile-ui + design tokens
  • Web app builds Svelte components using same design tokens
  • Landing builds Astro components using same design tokens

Notes

  • No NPM publish yet - Still embedded in picture monorepo
  • Future extraction: Will move to github.com/memoro/mobile-ui
  • CLI location: packages/mobile-ui/cli/bin/cli.js

Questions?

See: