Étape 1 – Le décor : un Storybook, un Angular, un objectif
Imaginez une boîte à outils visuelle pour vos composants Angular : vous ouvrez une page web, et là, tous vos boutons, champs, menus apparaissent, joliment rangés, testables, commentés, prêts à l'emploi. C’est ça, Storybook.
Ce projet est basé sur Angular 18 et il a pour but de centraliser des composants UI que vous pouvez voir, tester, documenter et réutiliser, sans vous arracher les cheveux à chaque nouveau projet.
Étape 2 – Avant de se lancer, on prépare le terrain
Avant d’écrire une ligne de code, voici ce qu’il vous faut :
Node.js v20 ou plus
npm (le gestionnaire de paquets)
Angular CLI v18
Sass (pour les styles qui ont du style)
Installez tout ça. Prenez un café. On passe aux choses sérieuses.
Étape 3 – Clone, install, enjoy
Dans votre terminal :
git clone <repository-name>
cd <repository-name>
<npm install>Puis si ce n’est pas déjà fait :
<npm install sass --save-dev>Par défaut, le projet s’appelle common-controls-lib. Mais rien ne vous empêche de lui donner un nom plus stylé (genre awesome-ui-kit). Attention : si vous changez le nom, pensez à le mettre à jour dans les fichiers comme angular.json et les chemins de projects/.
Étape 4 – Démarrez Storybook (et ouvrez vos yeux)
La magie commence ici :
<npm run storybook>Une belle interface s’ouvre dans votre navigateur pour prendre des patterns UI. C’est votre showroom de composants. Cliquez, testez, explorez.
Étape 5 – L’accessibilité, ce n’est pas optionnel
Vous voulez que vos composants soient utilisables avec un lecteur d’écran, au clavier, et conformes aux standards ? Ajoutez l’addon a11y de Storybook :
<npm install @storybook/addon-a11y --save-dev>
Puis, dans main.ts :
module.exports = {
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: ['@storybook/addon-a11y'],
};Et voilà : Storybook vous alertera si un bouton manque d’un label ARIA ou si votre contraste est douteux.
Étape 6 – Le bouton, ce héros du quotidien
Premier composant star de la bibliothèque : le bouton.
Pourquoi lui ? Parce qu’il est partout, tout le temps. Et mal fait, il peut ruiner toute une interface.
Ce qu’il sait faire :
Trois variantes :
primary,secondary,textPeut afficher une icône (gauche ou droite, comme vous voulez)
Gère l’état disabled, le focus clavier, les labels ARIA…
Testé et validé :
Branché dans une appli Angular réelle
Comportements testés (clic, focus, accessibilité)
Comparé à d’anciens composants pour s’assurer qu’il est isofonctionnel
Étape 7 – Créer votre bibliothèque Angular
Envie d’emballer vos composants comme une vraie lib pro ? Voici comment :
<ng generate library nom-de-la-bibliotheque>Vous obtenez :
<projects/
└── < nom-de-la-bibliothèque >/
├── src/
│ └── lib/
│ ├── nom-de-la-bibliotheque.component.ts
│ ├── nom-de-la-bibliotheque.service.ts
│ └── public-api.ts
├── ng-package.json
└── package.json>
Ensuite, copiez vos composants dans common-controls, mettez à jour le public-api.ts :
</*
* Public API Surface of common-controls-lib
*/
export * from './lib/common-controls/button/button.module';
export * from './lib/common-controls/button/button.component';>Et précisez le fichier d’entrée dans ng-package.json :
"lib": {
"entryFile": "index.ts"
}Étape 8 – Build et packaging : on emballe le tout
Prêt à générer un package installable dans d’autres projets ?
<npm run build:lib>Angular va compiler tout ça dans dist/nom-de-la-bibliotheque/.
Puis, créez l’archive :
<cd dist/nom-de-la-bibliotheque>
<npm pack>Vous verrez apparaître un joli .tgz prêt à être importé ailleurs.
Étape 9 – Réutiliser la bibliothèque dans un autre projet
Dans votre projet cible :
<npm install ../chemin/vers/nom-de-la-bibliotheque-1.0.0.tgz>Et dans app.module.ts :
import { ButtonModule } from 'nom-de-la-bibliotheque';
@NgModule({
imports: [ButtonModule],
})
export class AppModule {}Et voilà, votre composant bouton est prêt à servir dans un nouveau projet.
Étape 10 – Structure finale (ou comment rester organisé)
En résumé, votre projet ressemblera à ça :
<storybook/
├── src/
│ └── lib/
│ └── common-controls/
│ └── button/
├── projects/
│ └── nom-de-la-bibliothèque/
│ └── src/lib/common-controls/
│ └── button/
└── dist/
└── nom-de-la-bibliothèque/
└── .tgz generé>Claire, modulaire, documentée, accessible. On ne fait pas mieux.
En conclusion
Créer un design system propre, testable et accessible avec Angular + Storybook, c’est non seulement faisable, mais hautement recommandé. Vous gagnez du temps, de la cohérence, et vous offrez une meilleure expérience aux utilisateurs. Et avec cette structure, vous êtes prêt à scaler vos projets sans tout casser.
