Fragment Component (Fragmento de Tela)

Diferente do React Fragment nativo, o Fragment Component (ou Fragmento de Tela) é um padrão arquitetural utilizado em nosso projeto para lidar com telas complexas e extensas.

---

1. O que é um Fragmento de Tela?

Um Fragmento de Tela é um componente React "burro" (stateless ou com estado mínimo de UI) que representa uma parte isolada de uma tela específica.

• Escopo: Ele nasce e vive dentro do contexto de uma única tela.
• Localização: Deve ser armazenado em uma pasta fragments/ dentro do diretório da tela correspondente.
• Responsabilidade: Receber dados via props e renderizar uma parte da interface.

---

2. Por que usar este padrão?

Telas de saúde (como o prontuário ou o cockpit médico) costumam ter centenas de campos e seções. Manter tudo em um único arquivo de Screen torna o código:

• Impossível de manter.
• Difícil de testar.
• Lento para carregar no editor.

Dividir em fragmentos permite que a Screen atue apenas como uma orquestradora.

---

3. Regras de Ouro dos Fragmentos

Para garantir a separação de preocupações (SoC), os fragmentos devem seguir regras rigorosas:

1. Nunca acessam estados globais: Um fragmento não deve usar useSelector, useQuery ou useSaga. Ele recebe os dados da tela pai.
2. Nunca realizam chamadas de API: Toda busca de dados deve ser feita no hook da Screen (*-screen.hooks.ts).
3. Comunicação via Props: Se o fragmento precisa disparar uma ação, ele recebe uma função de callback (ex: onSave, onCancel) via props.
4. Sintaxe Obrigatória: Sempre use function, nunca const.

---

4. Exemplo Prático de Organização

Estrutura de Pastas:

src/screens/PatientDetail/
├── patient-detail.screen.tsx       (Orquestrador)
├── patient-detail-screen.hooks.ts  (Lógica e Dados)
└── fragments/                      (Partes da UI)
    ├── patient-header.tsx
    ├── patient-vitals-card.tsx
    └── patient-history-list.tsx

Exemplo do Fragmento:

// ✅ Como fazer: Fragmento burro e tipado
interface PatientHeaderProps {
  name: string;
  status: 'active' | 'inactive';
  onEdit: () => void;
}

export function PatientHeader({ name, status, onEdit }: PatientHeaderProps) {
  return (
    <View style={styles.container}>
      <Text>{name}</Text>
      <Badge type={status === 'active' ? 'success' : 'error'} />
      <Button onPress={onEdit}>Editar</Button>
    </View>
  );
}

Exemplo da Screen (Orquestradora):

export function PatientDetailScreen() {
  const { patient, isLoading, handleEdit } = usePatientDetailScreen();

  if (isLoading) return <LoadingScreen />;

  return (
    <ScrollView>
      {/* A Screen apenas distribui os dados para os fragmentos */}
      <PatientHeader 
        name={patient.name} 
        status={patient.status} 
        onEdit={handleEdit} 
      />
      <PatientVitalsCard data={patient.vitals} />
      <PatientHistoryList history={patient.history} />
    </ScrollView>
  );
}

---

5. Quando criar um Fragmento?

Crie um fragmento sempre que:

• A função de renderização da sua Screen ultrapassar 200 linhas.
• Uma seção da tela tiver um layout muito complexo que polui a leitura do orquestrador.
• Você quiser isolar uma parte da interface que será exibida condicionalmente (ex: um fragmento para o estado de erro, outro para a listagem).

---

6. Diferença entre Fragmento e Componente Comum

Característica	Componente (Design System)	Fragmento (Tela)
Reutilização	Alta (usado em todo o app)	Baixa (específico de uma tela)
Localização	src/components/	src/screens/NomeDaTela/fragments/
Estilo	Genérico e parametrizado	Pode ter estilos específicos daquela tela
Exemplo	Button, TextField, Card	ProfileMedicalHistory, BillingAddress