Design system: sa mise en place
Après avoir vu ce qu’était un design system et parcouru ses avantages lors de notre précédent article sur le sujet, nous allons maintenant nous pencher sur sa mise en place à travers un exemple rapide.
L’objectif de cet exemple est d’obtenir un projet de design system fonctionnel contenant un premier composant testé et interactif.
Nous allons voir tout celà étape par étape.
- Initialisation du projet
Pour commencer, il faut créer le projet dans notre répertoire de travail.
Si ce n’est pas déjà fait, il est nécessaire d’installer create-react-app qui permettra d’initialiser et de pré-configurer le nouveau projet.
Puis exécuter la commande permettant de créer ce nouveau projet.
Une fois l’ensemble des dépendances installées, notre répertoire projet est prêt.
Il faut maintenant installer notre technologie principale pour le rendu: Storybook. Elle permettra d’afficher et de gérer l’ensemble des composants de notre design system sous forme d’une bibliothèque.
Il faut se placer dans notre répertoire projet et exécuter la commande suivante:
On obtient alors cette architecture:
Pour avoir une première idée du rendu de notre design system, nous pouvons démarrer et tester le projet.
Il est possible de parcourir nos composants depuis le panel de gauche et de tester ses différentes formes et interactions.
- Configuration du projet
Maintenant que le projet est installé et initialisé. Il faut le configurer pour qu’il corresponde à nos besoins et qu’il soit simple d’utilisation.
Tout d’abord, après avoir testé Storybook en fonctionnement, on peut maintenant supprimer l’intégralité de ce que contient le répertoire src. Il n’est pas nécessaire de conserver les fichiers pré-générés pour la suite de l’exemple.
Ce qui nous intéresse ici, c’est obtenir un répertoire src où chaque sous-répertoire est un composant contenant son code fonctionnel, ses styles, ses tests et ses différents cas de rendus.
Nous y reviendrons plus tard avec la création d’un composant d’exemple.
Pour le moment, nous allons installer et configurer les différentes technos de notre projet.
Dans notre cas, nous souhaitons baser nos composants sur Typescript.
Ça nous permettra d’ajouter une couche de tests statiques et d’exporter les interfaces avec les props utilisables sur nos projets exploitant le design system.
Il ne faut pas oublier d’ajouter le fichier de configuration tsconfig.json à la racine. Il permet de définir quels fichiers Typescript doit prendre en compte et les règles avec lesquelles il va agir.
Il faut également aller modifier le fichier de configuration main.js de Storybook afin qu’il puisse interpréter Typescript au moment de son démarrage.
Maintenant, pour simplifier la manipulation du projet, nous allons modifier le fichier package.json et plus particulièrement la partie y contenant les scripts.
Pour notre utilisation, nous n’avons pas besoin des commandes start et build comme telles.
Les commandes provenant de Storybook suffiront à compiler et afficher nos composants pour notre besoin.
Pour tester nos composants, nous allons utiliser le framework Jest. Nous pouvons donc l’installer avec ses dépendances pour Typescript.
Puis ajouter les fichiers de configuration jest.config.js et jest.setup.ts à la racine du projet permettant à Jest de cibler et tester les composants.
Après cela, il faut à nouveau modifier les scripts du package.json pour mettre à jour les commandes de test avec les nouvelles mises à disposition par Jest.
On en a enfin terminé avec la configuration du projet. On peut maintenant passer à la partie création d’un composant.
- Création d’un composant
Pour en terminer avec cet exemple et tester l’ensemble de notre configuration, nous allons créer un composant bouton simple, testé et exportable vers nos autres projets.
Pour cela, on créer dans le répertoire src un sous-répertoire Button qui sera le répertoire qui contiendra l’ensemble des fichiers de notre bouton.
index.tsx contenant le composant, son interface de typage et ses styles.
stories.tsx contenant les différents états et cas de rendus du bouton avec Storybook.
test.tsx contenant les tests unitaires des différents états et intéractions du composant.
Notre composant est prêt, il ne reste plus qu’à le tester.
- Démarrage du projet
Félicitations, vous venez de créer votre projet de design system ! Vous pouvez maintenant continuer à y ajouter de nouveaux composants ou de nouveaux add-ons Storybook permettant de rendre vos composants encore plus interactifs.
Dans un prochain article, nous verrons comment versionner et exporter les composants de notre design system sous forme d’un package npm pouvant être publié et importé dans nos autres projets.
Photo by Vanessa Bucceri on Unsplash