@ogygie/ui

Le socle front du framework Ogygie (DECISIONS.md D39) : les briques d'écran que le starter prescrivait sans les livrer. Un produit les IMPORTE ; il ne les recopie plus dans apps/web/src/patterns/, qui ne garde que ses patterns propres. Le paquet livre ses sources TypeScript (comme @ogygie/core) et ne porte aucune chaîne lue par un humain : tout texte lui arrive en prop, traduit par la feature (Lingui).

| Point d'entrée | Ce qu'il porte | Peer | |---|---|---| | @ogygie/ui | ScreenState (accès refusé → erreur → chargement → vide → corps), EmptyState, ErrorBanner, EditableText, Skeleton, fetchContract / createContractFetcher, QueryLike / MutationLike et leurs fixtures | react, zod (@ogygie/core est une DÉPENDANCE, à la version du lockstep) | | @ogygie/ui/data-table | DataTable (colonnes typées, tri, chiffres alignés) + DataTable.Skeleton | @tanstack/react-table (optionnel) | | @ogygie/ui/contract-form | ContractForm (formulaire dérivé d'un contrat Zod) + formFieldsOf | react-hook-form (optionnel) | | @ogygie/ui/variance-chart | VarianceChart (constaté contre référence) + VarianceChart.Skeleton | recharts (optionnel) |

Thème

Les composants portent les utilitaires Tailwind des tokens du starter (surface, surface-raised, border, text, text-muted, accent, accent-contrast, positive, warning, danger, focus, les rayons sm/md/lg). La feuille Tailwind du produit déclare le paquet comme source, sinon ces classes ne sont pas générées :

@import "tailwindcss";
@source "../node_modules/@ogygie/ui/src";

Les couleurs du graphique passent par les variables CSS du thème (--color-accent, --color-text-muted, --color-border).

Un écran

import { ScreenState } from "@ogygie/ui";
import { DataTable } from "@ogygie/ui/data-table";

export function OrdersList() {
  return (
    <ScreenState
      query={useOrders()}
      errorTitle={<Trans>This view could not be loaded</Trans>}
      loading={<DataTable.Skeleton />}
      isEmpty={(data) => data.orders.length === 0}
      emptyState={{ title: <Trans>No order yet</Trans>, explanation: <Trans>Orders appear here once recorded.</Trans> }}
    >
      {(data) => <DataTable rows={data.orders} columns={orderColumns} rowKey={(order) => order.id} />}
    </ScreenState>
  );
}

Le corps d'un écran reçoit des QueryLike et des MutationLike, jamais un hook : il se teste en rendu, sans client de requêtes ni réseau.

Tests

Les tests du paquet tournent sous jsdom (@testing-library/react), un par état de chaque pattern : pnpm vitest run packages/ogygie-ui depuis le repo du framework.