Design System pour talan (DST)

Consulter en ligne la bibliothèque de composant pour pouvoir développer : https://gitlab.ruche-labs.net/talanlabs/innovation/rep-analyzer/design-system-talan

Disclamer

Avant la version 1.0.0 cette bibliothèque est considérée comme une beta, c'est à dire que des changements à fort impact peuvent arriver à tout moment sans aucune aide de migration.

Charte

https://www.figma.com/design/sNHdItWxGdG6KFOMXpmYk8/Projet-CIR---RFP-Analyzer?node-id=0-1&p=f&t=4Fx5mXcoZTptrP1l-0

Objectifs du projet DST

Cette bibliothèque et sa documentation ont été créées afin de faciliter la mise en place des interfaces graphiques, et d'uniformiser ses implémentations dans les projets TALAN.

Elle contient une collection de composants HTML/CSS les plus communément utilisés et respectant la charte TALN.

Elle est prévue pour être intégrée au application de groupe TALAN et être facilement surchargeable afin d'accélérer la production d'écrans.

Elle n'est pas une bibliothèque de composants métiers, ses composants sont et resteront agnostiques par rapport au métier.

Composants Angular

Design System Angular

Une librairie de composants interactifs et réutilisables est disponible. Elle continuera de grandir au fil du temps.

Documentation :

Dépôt :

Installation

Commande

Prérequis

Installer

npm install @talan/design-system

Créer une nouvelle version release

• Créer une branche à partir de la master
• Ajouter les évolutions
• Incrémenter la version dans le fichier package.json
• Documenter le changelog avec les évolutions
• Merger les évolutions dans la master
• Créer une branche production/x.x.x (x.x.x correspondant à la nouvelle version - identique à celle du fichier package.json)
• Sur la pipeline de cette dernière, déclencher manuellement la publication de la version

Comment utiliser ?

Thème et variables

Afin de garantir la continuité du thème et le respect de la charte TALAN même dans le code spécifique à votre projet, nous vous invitons à exploiter dans vos propres fichiers SCSS les variables disponibles dans le DST.

En début de fichier .scss il vous suffit de faire :

@import "./1-settings/index";

Ces variables n'apparaîtront pas après la transpilation finale vers du CSS en production, et n'augmenteront donc pas la taille de vos livrables.

Nous vous conseillons de limiter les surcharges du DST à du ponctuel. Il faut s'interroger sur les besoins couverts par le code UI que vous vous retrouvez à développer en plus du DST : Y a t'il un/des ticket(s) d'anomalie ou d'amélioration à créer dans le DST ? S'agit-il d'un/de composant(s) non encore identifié(s) dans le périmètre TALAN ?

Faire évoluer le projet

Récupérer et installer les sources

Afin de commencer à utiliser le DST, cloner sur votre poste le dépôt.

git clone https://gitlab.ruche-labs.net/talanlabs/innovation/rep-analyzer/design-system-talan.git

Le DST fonctionne avec l'outil de documentation Storybook développé en JS.
Il faut donc après tirage du dépôt, installer les dépendances afin de pouvoir compiler le projet.

npm ci

Par exemple, la bibliothèque DST est dépendante de deux polices de caractères, l'une pour le texte et l'autre pour les icônes : Google Material.

Corriger / Modifier quelque chose

Ne modifiez jamais directement la branche master !
Pour émettre une requête ou proposer du code, créez un ticket d'issue Gitlab, et poussez une branche qui contient votre numéro de ticket dans son nom (un ticket sur votre projet et/ou le numéro d'issue Gitlab). Ouvrez ensuite une Merge Request vers master.

Lancer le Storybook en local pour contribuer

La commande npm run storybook vous permet de lancer en mode watch la documentation vivante du projet. C'est à travers cette interface que vous pourrez voir tous les composants existants.

Modifier la documentation ou ajouter des composants nécessite de toucher aux fichiers .stories.js. Regardez les fichiers existants pour trouver rapidement comment construire le vôtre.

N'hésitez pas à fouiller également la documentation officielle de Storybook.

Insérer le nouveau code au bon endroit

Voici la description de l'arborescence des sources, fondée sur l'architecture ITCSS.

• settings - Variables fondamentales et paramètres du thème
• elements - Styles de bas niveau fondés sur les balises HTML natives (input, textarea...)
• objects - Utilitaires de mise en page et gabarits, permettant de structurer le comportement / le flux sans visuel ni décor
• components - Composants graphiques identifiés par une classe + des modifiers .component, .is-visible
• utilities - Classes utilitaires permettant d'appliquer ponctuellement un effet unitaire précis .is-text-primary