Get started

Où sont les composants

Les composants vivent dans src/components/ de Pathou. Ils sont écrits en React 19 et TypeScript. Leurs styles sont dans src/styles.css, rangés par classe, et s’appuient sur des tokens en variables CSS (--panel, --accent…).

Utiliser un composant dans Pathou

Importe le fichier, puis passe les props décrites dans la « Référence de l’API » de sa page :

import Segmented from './components/Segmented';

<Segmented label="Pratique" value={pratique} options={[['route', 'Route'], ['vtt', 'VTT']]} onChange={setPratique} />

Dans les exemples de la doc, @pathou/ désigne le dossier src/ de Pathou.

Le copier dans un autre projet

  1. Copie le fichier depuis l’onglet « Installation » de sa page.
  2. Copie les tokens qu’il utilise, listés sous le code, depuis src/styles.css (blocs :root, clair et sombre).
  3. Copie les règles de src/styles.css qui portent ses classes : les styles ne sont pas encore rangés par composant.

Lancer la doc en local

pnpm ds:data
pnpm ds:dev

pnpm ds:data lit le code et les fiches, vérifie les fiches avec le validateur DSDS officiel, et prépare les données du site. Le site s’ouvre ensuite sur le port 5180.

Faire évoluer une fiche

  1. Modifie ds/content/components/<id>.dsds.yaml.
  2. Relance pnpm ds:data : une fiche invalide, ou un composant sans fiche, arrête la commande avec la liste des problèmes.
  3. Une fois une section relue, passe son marqueur pathou.review de draft à validated.

Pour publier : pnpm deploy:design.