Adoption

Installation

L'installation détaillée : authentifier GitHub Packages, câbler la CI, satisfaire les peers, connaître les sous-chemins d'import et poser le thème. Si tu veux juste démarrer vite, va à Démarrer ; cette page couvre les cas réels et les pièges.

Registre : GitHub Packages

Les paquets @forme-ch sont hébergés sur npm.pkg.github.com (GitHub Packages), pas sur le npm public. Le scope doit être routé vers ce registre via .npmrc :

@forme-ch:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${NODE_AUTH_TOKEN}

Le token : un PAT read:packages

NODE_AUTH_TOKEN est un Personal Access Token GitHub avec au minimum la portée read:packages. Ne l'écris jamais en dur dans .npmrc — le fichier lit la variable d'environnement. En local :

export NODE_AUTH_TOKEN=ghp_xxxxxxxxxxxxxxxxxxxx
npm install @forme-ch/ui @forme-ch/design-system @astryxdesign/core

CI — passer le token par un secret

En CI, setup-node configure le registre et NODE_AUTH_TOKEN vient d'un secret. Le GITHUB_TOKEN automatique suffit si les paquets sont dans la même org et que le workflow a la permission packages: read :

permissions:
  contents: read
  packages: read

steps:
  - uses: actions/setup-node@v4
    with:
      node-version: 20
      registry-url: https://npm.pkg.github.com
      scope: '@forme-ch'
  - run: npm ci
    env:
      NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

Peers

Le paquet déclare des peer dependencies. Assure-toi de les satisfaire dans l'app hôte :

Sous-chemins d'import

Chaque famille a son sous-chemin. Importe depuis le plus précis :

Thème & CSS

Importe les trois feuilles dans cet ordre, puis pose l'attribut de thème haut dans l'arbre :

import "@astryxdesign/core/reset.css";
import "@astryxdesign/core/astryx.css";
import "@forme-ch/design-system/css/index.css";

<html lang="fr" data-astryx-theme="forme">

Les polices Aeonik sont fournies par @forme-ch/design-system ; lance son script sync-fonts pour les copier dans /public/fonts.

Pièges