Omnilog Design System - Storybook

Ce référentiel contient le projet Storybook permettant de créer un "design system" personnalisé pour Omnilog.

Installation

Pour utiliser ce projet localement, suivez les étapes suivantes :

1. Clonez ce référentiel en utilisant la commande suivante :

$ git clone https://git.golinmo.com/bordeaux-tma/storybook

2.Accédez au répertoire du projet :

$ cd storybook

3. Installez les dépendances nécessaires à l'aide de yarn :

$ yarn

$ yarn install --frozen-lockfile # OR (if you want to use the yarn.lock)

4. Démarrez le serveur de développement Storybook :

$ yarn run dev

5. Ouvrez votre navigateur et accédez à l'URL suivante : http://localhost:6006 pour afficher l'interface Storybook.

Documentation officielle de Storybook

La documentation officielle de Storybook peut être consultée sur le site web de Storybook : https://storybook.js.org/docs. Elle fournit des informations détaillées sur l'utilisation de Storybook et ses fonctionnalités.

Configuration du projet

Ce projet est configuré avec les outils et les bonnes pratiques suivants :

• Commitlint pour les messages de commit structurés.
• Husky pour exécuter des scripts lors des événements Git, tels que les commits.
• ESLint pour linter et vérifier la syntaxe JavaScript.
• Stylelint pour linter et vérifier les styles CSS.

Pipeline GitLab

Ce projet est configuré avec une pipeline sur GitLab qui exécute les étapes suivantes :

1. Vérification du code avec ESLint pour détecter les erreurs et les problèmes de syntaxe.
2. Vérification des styles avec Stylelint pour s'assurer de la conformité aux règles définies.
3. Construction et déploiement du design system sur un site spécialisé de staging : https://staging-storybook-offprod.golinmo.com.

Déploiement du module NPM sur un registry privé CodeArtifact d'AWS

Ce projet peut également être déployé en tant que module npm sur un registry privé CodeArtifact d'AWS.

Le déploiement sur CodeArtifact est automatique. Il suffit de créer une Merge Request depuis votre branche de développement sur la branche principale main. Une fois la Merge Request validée et mergée, la pipeline s'occupera de publier la nouvelle version sur CodeArtifact.

C'est tout ! Vous pouvez maintenant utiliser le projet Storybook pour développer et maintenir le design system d'Omnilog. N'hésitez pas à consulter la documentation officielle de Storybook pour en savoir plus sur ses fonctionnalités et son utilisation.

Génération des icônes SVG

Les icônes SVG sont générées à partir des fichiers svg présents dans le dossier src/assets/icons. Pour générer les icônes, il suffit d'exécuter la commande suivante :

$ yarn run generate-icons

Cette commande va générer une liste de fichier NomIcone.jsx dans le dossier src/components/Icons/src. Ensuite, un autre fichier Icons.jsx est généré automatiquement, permettant d'exporter tous les composants d'icônes SVG.