atomic-components

Atomic Design pour AfroCodeurs

Hiérarchie

components/
├── ui/              # shadcn/ui (généré par `npx shadcn add …` — NE PAS ÉDITER À LA MAIN)
├── atoms/           # Briques de base, cross-domaine, sans logique métier
├── molecules/       # Atomes combinés (2-4), cross-domaine
├── organisms/       # Sections complètes, peuvent lire des données (Prisma)
├── templates/       # Squelettes de page (disposition, sans données)
└── shared/          # Existant historique (Avatar, Markdown…) — ne pas
                      # dupliquer : si un composant shared/ correspond à un
                      # atome/molécule, le déplacer en atoms/molecules au lieu
                      # d'en recréer un nouveau.

features/<domaine>/
├── actions.ts       # Server Actions (mutations)
├── queries.ts       # Lectures Prisma (Server Components)
├── schema.ts        # Zod du module
└── *.tsx            # Composants SPÉCIFIQUES au domaine qui assemblent des
                      # atoms/molecules partagés (ex : ProblemForm compose
                      # FormField ; pas un composant générique réutilisable
                      # ailleurs → reste dans le module, ne monte pas en atoms/)

Règle simple pour choisir où vit un composant : générique et sans connaissance d'un domaine métier → components/. Spécifique à un domaine (forum, problems, knowledge…) → reste dans features/<domaine>/.

Règles de classification

Atoms — aucune logique métier

• Wrapper autour d'un seul élément ou d'un shadcn ui/*
• Pas de state, pas de fetch de données
• Exemples : EmptyState, Avatar (déjà en components/shared/, à migrer en atoms/ à l'occasion), un futur LevelIndicator (étoiles impact/difficulté)

// components/atoms/empty-state.tsx
export function EmptyState({ children, className }: { children: ReactNode; className?: string }) {
  return <div className={cn("rounded-lg border border-dashed border-border p-10 text-center text-sm text-muted-foreground", className)}>{children}</div>;
}