@one-nexty/components-web

Composants React stylés avec le thème du design system.

Package « just-in-time » (pas de build)

exports pointe directement sur src/index.ts. C'est volontaire :

• pas d'étape de build à attendre en développement, le HMR traverse les packages ;
• une seule source de vérité pour les types (pas de .d.ts généré à resynchroniser) ;
• le bundler de l'application (Vite, Next…) compile et tree-shake le TypeScript.

Contrepartie : l'application consommatrice doit être capable de compiler du TS/JSX depuis node_modules. C'est le cas de Vite, Next et Rspack — les seuls consommateurs prévus pour l'instant (apps internes Nexty). Le package est publié tel quel (files: ["src"]) sur GitHub Packages : pas de dist/. Si un consommateur externe incapable de compiler du TS/JSX apparaît un jour, il faudra ajouter un build (tsup src/index.ts --format esm --dts) et faire pointer exports/files vers dist/.

Deux conditions pour que le style s'applique

1. Importer le thème dans le CSS de l'application :

   @import "tailwindcss";
   @import "@one-nexty/tailwind-config/theme.css";

2. Déclarer ce package comme source à scanner. Tailwind v4 n'analyse pas node_modules par défaut ; sans cette ligne, les classes des composants ne sont jamais générées et les boutons arrivent nus :

   @source "../../../packages/components-web/src";

Conventions

• Tokens sémantiques uniquement (bg-accent, text-fg-muted), jamais de valeur arbitraire (bg-[#635BFF]) : c'est ce qui rend le thème sombre et le rebranding gratuits.
• Variantes via cva, jamais de if sur des chaînes de classes.
• className toujours accepté et fusionné en dernier via cn(), pour que l'application puisse ajuster sans forker le composant.
• Accessibilité par défaut : focus-visible visible, aria-* correct, cible ≥ 32px.

Mouvement : les règles suivies ici

• Durées et courbes viennent des tokens. duration-fast, ease-spring — jamais duration-[120ms] ni ease-[cubic-bezier(...)].
• On liste les propriétés animées. transition-[background-color,transform] et non transition-all, qui animerait aussi la hauteur et provoquerait des saccades au moindre reflow.
• On anime transform et opacity en priorité. Ce sont les deux seules propriétés que le compositeur gère sans recalcul de mise en page. L'indicateur d'onglets utilise translate plutôt que left pour cette raison.
• Transition plutôt que keyframe pour un état réversible. Une case qui se coche et se décoche doit s'animer dans les deux sens ; une animation ne joue que dans un.
• ease-spring est réservé aux bascules binaires. Le dépassement confirme physiquement une action ; sur un déplacement de mise en page, il ressemble à un bug de calcul.
• Le retour tactile reste sous 100 ms. Au-delà, l'enfoncement n'est plus perçu comme causé par le clic.

Le piège des classes dynamiques

Tailwind analyse le texte source. Une classe assemblée à l'exécution n'existe dans aucun fichier et n'est donc jamais générée — sans le moindre message d'erreur :

// ✘ La classe n'existe pas dans le CSS compilé
<div className={`animate-${name}`} />

// ✔ Écrire la classe en entier, même au prix d'un peu de verbosité
const ANIMATIONS = [{ className: "animate-fade-in" }, { className: "animate-pop" }];