@tervior-tech/la-voz-de-ellas-shared-ui

Componentes React Native (átomos, moléculas, organismos) para a app La voz de ellas. Consome tokens do @tervior-tech/la-voz-de-ellas-design-system via useTheme().

Instalação

pnpm add @tervior-tech/la-voz-de-ellas-shared-ui @tervior-tech/la-voz-de-ellas-design-system

Peer dependencies: react >= 18.2, react-native >= 0.74, @expo/vector-icons >= 14, @tervior-tech/la-voz-de-ellas-design-system.

@expo/vector-icons já vem no Expo SDK, então apps Expo (todas as targets do projeto) recebem essa dep automaticamente. Em projetos RN puros, instalar manualmente.

Pré-requisito

A app deve envolver a árvore com <ThemeProvider> do design-system antes de usar qualquer componente:

import { ThemeProvider } from '@tervior-tech/la-voz-de-ellas-design-system';

export default function App() {
  return (
    <ThemeProvider brand="la-voz-de-ellas" mode="system">
      {/* componentes do shared-ui */}
    </ThemeProvider>
  );
}

Catálogo v0.1

| Camada | Componente | Status | |--------|-----------|--------| | Átomo (foundation) | Box | ✓ v0.1 — View tipada com tokens (p/m/bg/borderRadius/shadow/flex) | | Átomo (foundation) | Stack, VStack, HStack | ✓ v0.1 — layouts com spacing/align/justify | | Átomo (foundation) | Text | ✓ v0.1 — typography tokens via variant | | Átomo | Button | ✓ v0.1 | | Átomo | Badge | ✓ v0.1 | | Átomo | Icon | ✓ v0.1 | | Átomo | IconButton | ✓ v0.1 | | Átomo | Spinner | ✓ v0.1 | | Átomo | TextField | ✓ v0.1 | | Átomo | Avatar | ✓ v0.1 | | Átomo | Card | ✓ v0.1 | | Átomo | EmptyState | ✓ v0.1 | | Átomo | Skeleton | ✓ v0.1 | | Átomo | Alert | ✓ v0.1 — 4 variants (info/success/warning/destructive) | | Átomo | EscapeButton | ✓ v0.1 (específico do produto) | | Átomo | PINInput | ✓ v0.1 (específico do produto) | | Átomo | DiscreetText | ✓ v0.1 (específico do produto) | | Molécula | SearchBar | ✓ v0.1 | | Molécula | ListItem | ✓ v0.1 | | Molécula | WeatherCard | ✓ v0.1 (específico do produto) | | Molécula | ConsentToggle | ✓ v0.1 (específico do produto) | | Molécula | WorldClockItem | ✓ v0.1 (específico do produto — gateway secreto via onLongPress) | | Organismo | Header | ✓ v0.1 | | Organismo | AudioWarningBanner | ✓ v0.1 (específico do produto) | | Hook | useEscape | ✓ v0.1 — orquestra cleanup + onEscape | | Hook | useReducedMotion | ✓ v0.1 | | Hook | useScreenReader | ✓ v0.1 |

Exemplos

import {
  Button, Badge, IconButton, Spinner,
  TextField, Avatar,
  EscapeButton, PINInput, DiscreetText,
} from '@tervior-tech/la-voz-de-ellas-shared-ui';

// Básicos
<Button label="Continuar" variant="primary" onPress={() => {}} />
<Button label="Salvando…" variant="primary" isLoading onPress={() => {}} />
<Badge label="Nuevo" variant="brand" />
<Icon name="cloud" size="lg" />
<IconButton icon={<Icon name="chevron-back" />} accessibilityLabel="Voltar" onPress={() => {}} />
<Spinner accessibilityLabel="Carregando previsão" />

// Forms / display
<TextField
  label="Email"
  variant="default"
  errorMessage={hasError ? 'campo obrigatório' : undefined}
  onChangeText={setEmail}
/>
<Avatar name="María Solano" src={{ uri: avatarUrl }} size="lg" />

// Específicos do produto
<EscapeButton context="vault" onEscape={(ctx) => navigation.reset('/weather')} />
<PINInput
  onComplete={(pin) => {
    // pin é "0000" para abrir o gateway; app hashifica + valida
    if (verifyPinHash(pin)) navigation.navigate('/secure');
  }}
/>
<DiscreetText value={vaultEntry.body} variant="body" />

Padrões

• forwardRef em todos os átomos para integração com gestos, foco programático, e libs de form.
• Acessibilidade obrigatória — accessibilityRole, accessibilityLabel, accessibilityState. Touch targets ≥ 44×44pt.
• Sem valores literais — toda cor/espaçamento vem do tema via useTheme().
• Tipagem completa — variantes e tamanhos são union types literais, sem any.

Disfarce / segurança nos componentes específicos do produto

• EscapeButton — accessibilityLabel default é "Volver" (neutro). Aciona onEscape(context) em um único toque, sem confirmação, sem modal. Nunca cite escape, vault, salida no label.
• PINInput — accessibilityLabel default é "Ajuste de hora". Visualmente é um relógio HH:MM. Retorna o PIN em texto plano via onComplete — a app é responsável por hashear antes de validar ou persistir.
• DiscreetText — ouve AppState e limpa o conteúdo visível assim que o app perde foco (background/inactive). Previne screenshot do switcher de apps. Restaurado automaticamente quando volta para active.

Testes

pnpm test           # roda Jest + Testing Library
pnpm test:watch
pnpm test:coverage

Stack: Jest + @testing-library/react-native + matchers do @testing-library/jest-native. Use o helper tests/render-with-theme.tsx em todo teste — sem ThemeProvider, useTheme() lança.

Documentação completa

Ver docs/management/LaVozDeEllas_PRD_shared-ui_v1.0.md.