Introduction

Démarrer

Cinq étapes pour consommer le Design System Forme® 2.0 dans une app : authentifier le registre, installer les paquets, importer les CSS dans le bon ordre, poser le thème, rendre ton premier composant. Tout part de @forme-ch/ui.

Le socle a changé. Le DS 2.0 est bâti sur Astryx (@astryxdesign/core) habillé par la charte Forme. L'ancien @forme/ui v1 (React-Aria, registry.forme.ch) est abandonné : ne l'installe plus.

1. Authentifier le registre

Les paquets @forme-ch sont publiés sur GitHub Packages. Crée un fichier .npmrc à la racine du projet qui pointe le scope vers ce registre et lit le token depuis l'environnement :

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

NODE_AUTH_TOKEN est un PAT GitHub avec la portée read:packages. En local, exporte-le dans ton shell ; en CI, passe-le par un secret (voir Installation).

2. Installer les paquets

npm install @forme-ch/ui @forme-ch/design-system @astryxdesign/core

@forme-ch/ui est la couche composants (l'API Forme sur Astryx), @forme-ch/design-system apporte les tokens et les polices Aeonik, @astryxdesign/core est le socle, et Les icônes viennent du wrapper @forme-ch/ui/icons (Lucide).

3. Importer les CSS — dans cet ordre

L'ordre est significatif : le reset d'abord, le socle Astryx ensuite, la charte Forme en dernier.

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

Inverser l'ordre casse le rendu. Si la charte Forme est importée avant Astryx, le socle réécrit les tokens et les composants perdent leur habillage. Garde toujours cette séquence.

4. Poser le thème

Déclare data-astryx-theme="forme" haut dans l'arbre (idéalement sur <html>) : c'est ce qui active la charte Forme sur toute la sous-arborescence.

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

Les polices Aeonik (.woff2) sont fournies par le paquet design-system ; son script sync-fonts les copie vers /public/fonts.

5. Ton premier composant

Chaque composant s'importe depuis un sous-chemin de @forme-ch/ui. Les contrôles vivent sous /controls :

import { Button } from "@forme-ch/ui/controls";

export function Demo() {
  return <Button label="Enregistrer" variant="primary" />;
}

Note l'API label : le nom accessible est garanti et découplé du visuel (héritage Astryx, accessibilité d'abord). C'est le même contrat sur tous les contrôles.

Et ensuite ? Lis la Doctrine pour comprendre les principes, puis Installation pour l'auth registre, la CI et les pièges.