UI nativa y temas

Antes de comenzar

Abra su proyecto supastack descargado en Visual Studio Code usando Archivo → Abrir carpeta, luego elija Terminal → Nueva terminal. La raíz del repositorio es la carpeta que contiene package.json, aplicaciones y paquetes. Ejecute el comando a continuación y deje su terminal abierta. Si no se reconoce un comando, finalice la guía de instalación de la herramienta antes de continuar.

Lea primero el tutorial de la plataforma. Un servidor es el proceso de la aplicación que responde a las solicitudes del navegador o del teléfono. La web lee apps/web/.env.local, Expo lee apps/mobile/.env.local y los comandos de migración de bases de datos leen root .env. La demostración sin base de datos/panel de control está separada de las cuentas reales/de autenticación, que necesitan migrar Postgres. Un proceso de pago solo por teléfono o computadora de escritorio necesita un backend web que se ejecute por separado.

• Instale las herramientas y obtenga el código
• Aprender comandos, archivos y configuración
• Completa el tutorial de primera ejecución para dispositivos móviles

corepack pnpm --filter @supastack/mobile start

Configuración y ajustes

Las primitivas de pantalla viven en apps/mobile/src/ui — Screen, Card, Title, Detail, SectionLabel, ErrorText, AppButton — con estilos de apps/mobile/src/theme, de modo que una decisión visual tomada para la web se aplica a la interfaz nativa. En los ajustes de Apariencia, el modo «Coincidir con la aplicación web» (apps/mobile/src/theme/synced.ts mediante GET/PUT /api/mobile/appearance) aplica el paquete de colores web sincronizado del usuario conectado desde una caché local.

packages/ui-native lleva los helpers de view-model multiplataforma: createEntitlementCard convierte el estado de entitlement del servidor en el título, estado, detalle, etiqueta de acción y etiqueta de accesibilidad de una tarjeta, así que web y móvil renderizan la misma decisión de acceso.

apps/mobile/src/ui/screen.tsx exports:
  Screen, Card, H1, H2, Title, Detail,
  SectionLabel, ErrorText, AppButton

@supastack/ui-native → createEntitlementCard(input)
  → { title, status, detail, accessibilityLabel, action }

Flujo de implementación

Compón las pantallas primero desde las primitivas compartidas antes de escribir elementos nuevos; iguala los tokens y la densidad del módulo de tema en lugar de codificar tamaños y colores en duro.

Mantén la copy de producto fuera de las primitivas — renderizan etiquetas, no decisiones de copy. Lleva las etiquetas de accesibilidad a través de las filas personalizadas como hace createEntitlementCard.

Verificación y solución de problemas

Verifica una pantalla en claro y oscuro, con el mayor tamaño de texto, con etiquetas de lector de pantalla y en un dispositivo pequeño. Un componente que trunca o recorta al 200% de texto no está terminado.