VSB CDS React

BAAM! Design System by Cegid - Extension React du Cegid Design System

VSB CDS React est une bibliothèque de composants React spécialisée, extension du Cegid Design System. Elle fournit des composants UI optimisés pour les applications BIM! avec un thème VSB personnalisé et une architecture modulaire.

Installation

Depuis le registre Cegid Artifactory

npm install @cegid/vsb-cds-react

Peer Dependencies requises

npm install react@^18.3.1 react-dom@^18.3.1 @mui/material@^5.0.0 @emotion/react@^11.0.0 @emotion/styled@^11.0.0 @cegid/cds-react@^3.26.1

Configuration

1. Importer les styles requis

import '@cegid/vsb-cds-react/fonts.css';
import '@cegid/vsb-cds-react/icons.css';

2. Wrapper l'application avec le ThemeProvider

import React from 'react';
import { VSBThemeProvider } from '@cegid/vsb-cds-react';
import '@cegid/vsb-cds-react/fonts.css';
import '@cegid/vsb-cds-react/icons.css';

function App() {
  return (
    <VSBThemeProvider>
      {/* Vos composants */}
    </VSBThemeProvider>
  );
}

export default App;

3. Import des composants

// Import groupé
import { Button, TextField, Icon } from '@cegid/vsb-cds-react';

// Import individuel (tree-shaking optimisé)
import Button from '@cegid/vsb-cds-react/components/Button';
import TextField from '@cegid/vsb-cds-react/components/TextField';

Composants disponibles

Formulaires et Inputs (14 composants)

Composant	Description
`TextField`	Champ de texte avec label, états d'erreur et debounce
`Select`	Liste déroulante de sélection
`AutoComplete`	Champ avec autocomplétion
`Checkbox`	Case à cocher
`Radio`	Bouton radio
`Switch`	Interrupteur toggle
`DatePicker`	Sélecteur de date (architecture modulaire)
`InputSearch`	Champ de recherche
`InputAdornment`	Décorateur pour inputs
`FormControl`	Wrapper de contrôle de formulaire
`FormControlLabel`	Label pour contrôles de formulaire
`FormGroup`	Groupe de contrôles
`SegmentedControl`	Contrôle segmenté

Boutons et Interactions (3 composants)

Composant	Description
`Button`	Bouton principal (4 variantes: contained, outlined, text, tonal)
`IconButton`	Bouton icône uniquement
`ButtonSplit`	Bouton avec menu déroulant

Navigation et Layout (10 composants)

Composant	Description
`NavigationBar`	Barre de navigation responsive avec sidebar
`Header`	En-tête de page
`Breadcrumbs`	Fil d'Ariane
`Tabs` / `Tab`	Navigation par onglets
`Stack`	Layout flexbox empilé
`Box`	Conteneur générique
`Row`	Conteneur en ligne
`Column`	Conteneur en colonne

Affichage de données (15 composants)

Composant	Description
`Table`	Tableau de données avec prop `bordered`
`TableHead` / `TableBody` / `TableFooter`	Sections de tableau
`TableRow` / `TableCell`	Ligne et cellule de tableau
`TableContainer`	Conteneur de tableau
`TableFilter`	Filtrage avancé pour tableaux
`List` / `ListItem` / `ListItemButton`	Listes
`Chart`	Graphiques (intégration Chart.js)
`Typography`	Composant typographique
`Icon`	Icônes (HugeIcons - 8 variantes)
`Avatar`	Avatar utilisateur
`Badge`	Badge/indicateur
`Chip` / `IAChip`	Étiquettes
`Status`	Indicateur de statut

Feedback et Notifications (7 composants)

Composant	Description
`Alert`	Alerte/notification
`Dialog`	Modal de dialogue
`Tooltip`	Info-bulle
`Snackbar`	Notification temporaire
`ToasterProvider`	Système de toast (avec hook `useToaster`)
`ProgressBar`	Barre de progression
`SystemBanner`	Bannière système

Système de design

Palette de couleurs

Les couleurs sont importées depuis @cegid/vsb-cds-tokens avec 11 niveaux (10-99) :

import { colorPalettes } from '@cegid/vsb-cds-react';

const { primary, secondary, neutral, success, critical, warning, info } = colorPalettes;

// Utilisation
primary[50]   // Couleur primaire niveau 50
neutral[10]   // Gris foncé
critical[80]  // Rouge erreur

Palette	Usage
`primary`	Bleu - Actions principales
`secondary`	Orange - Actions secondaires
`neutral`	Gris - Textes et bordures
`success`	Vert - Succès
`critical`	Rouge - Erreurs
`warning`	Jaune - Avertissements
`info`	Bleu clair - Information

Typographie

Police : DM Sans

import typography from '@cegid/vsb-cds-react/theme/typography';

// Variantes disponibles
typography.displayMRegular
typography.headlineMSemiBold
typography.bodyMRegular
typography.bodySMedium
typography.captionRegular

Espacement

Basé sur des multiples de 4px :

import { SPACING } from '@cegid/vsb-cds-react';

// 4, 8, 12, 16, 20, 24, 28, 32, 40, 48, 56, 64, 80, 96, 112, 128

Icônes

8 variantes de style HugeIcons disponibles :

import { Icon } from '@cegid/vsb-cds-react';

<Icon size={24} color="primary/50" variant="stroke" style="rounded">
  home-01
</Icon>

// Variantes: bulk, duotone, solid, stroke, twotone
// Styles: rounded, sharp, standard

Exemples d'utilisation

Bouton avec icône

import { Button, Icon } from '@cegid/vsb-cds-react';

<Button
  variant="contained"
  color="primary"
  startIcon={<Icon>add-01</Icon>}
>
  Ajouter
</Button>

TextField avec debounce

import { TextField } from '@cegid/vsb-cds-react';

<TextField
  label="Recherche"
  placeholder="Rechercher..."
  value={query}
  onChange={(e) => setQuery(e.target.value)}
  onDebouncedChange={(e) => performSearch(e.target.value)}
  debounceDelay={500}
/>

Table avec bordures

import { Table, TableHead, TableBody, TableRow, TableCell } from '@cegid/vsb-cds-react';

<Table bordered>
  <TableHead>
    <TableRow>
      <TableCell>Nom</TableCell>
      <TableCell>Valeur</TableCell>
    </TableRow>
  </TableHead>
  <TableBody>
    <TableRow>
      <TableCell>Item 1</TableCell>
      <TableCell>100</TableCell>
    </TableRow>
  </TableBody>
</Table>

Système de notifications

import { ToasterProvider, useToaster } from '@cegid/vsb-cds-react';

// Dans App.tsx
<ToasterProvider>
  <MyApp />
</ToasterProvider>

// Dans un composant
const MyComponent = () => {
  const { showToast } = useToaster();

  const handleSuccess = () => {
    showToast('Opération réussie', { severity: 'success' });
  };

  return <Button onClick={handleSuccess}>Sauvegarder</Button>;
};

Navigation

import { NavigationBar } from '@cegid/vsb-cds-react';

<NavigationBar
  headerNavItems={[
    { label: 'Accueil', href: '/', icon: 'home-01' },
    { label: 'Projets', href: '/projects', icon: 'folder-01' }
  ]}
  bodyNavItems={[
    { label: 'Paramètres', href: '/settings', icon: 'settings-01' }
  ]}
  userFirstName="Jean"
  userLastName="Dupont"
  userTrigram="JD"
  onLogOut={() => logout()}
/>

Développement

Prérequis

Node.js >= 18
npm >= 9

Installation locale

# Cloner le repo
git clone <repo-url>
cd vsb-cds-react

# Installer les dépendances
npm install

# Lancer Storybook
npm run storybook

Storybook sera accessible sur http://localhost:6006

Scripts disponibles

Script	Description
`npm start`	Lance Storybook en développement
`npm run storybook`	Lance Storybook (port 6006)
`npm run build`	Build complet : clean + tsc + vite + optimize
`npm run build:dev`	Build développement
`npm run build:optimize`	Nettoyage post-build
`npm run clean`	Supprime le dossier dist
`npm run build-storybook`	Build Storybook statique
`npm run analyze`	Analyse de la taille du bundle
`npm run release-notes`	Génère les notes de release

Architecture du projet

vsb-cds-react/
├── .github/
│   └── workflows/
│       ├── build-publish-package.yaml    # CI/CD publication npm
│       └── build-app-deploy-infra.yaml   # CI/CD déploiement Storybook
├── .storybook/                           # Configuration Storybook
├── src/
│   ├── components/                       # ~50 composants UI
│   │   ├── Button/
│   │   │   ├── Button.tsx
│   │   │   ├── Button.stories.tsx
│   │   │   └── index.ts
│   │   ├── DatePicker/
│   │   │   ├── components/               # Sous-composants modulaires
│   │   │   ├── hooks/                    # Hooks personnalisés
│   │   │   └── DatePicker.tsx
│   │   ├── Table/
│   │   ├── TextField/
│   │   └── ...
│   ├── theme/
│   │   ├── colors.ts                     # Palettes de couleurs
│   │   ├── typography.ts                 # Système typographique
│   │   ├── spacing.ts                    # Échelle d'espacement
│   │   ├── shadows.ts                    # Élévations
│   │   ├── radius.ts                     # Border radius
│   │   ├── fonts/                        # Fichiers DM Sans
│   │   ├── icons/                        # Fichiers HugeIcons
│   │   └── theme.tsx                     # VSBThemeProvider
│   ├── stories/                          # Documentation Storybook
│   └── index.ts                          # Point d'entrée principal
├── package.json
├── tsconfig.json
├── vite.config.ts
└── README.md

Publication du package

Processus automatisé (GitHub Actions)

La publication est automatisée via GitHub Actions lors de la création d'une release.

1. Préparer la release

# Mettre à jour la version dans package.json
npm version patch   # ou minor / major

# Générer les notes de release
npm run release-notes

# Commit et push
git add .
git commit -m "chore: release v1.x.x"
git push origin main

2. Créer une release GitHub

Aller sur GitHub > Releases > Create a new release
Créer un nouveau tag (ex: v1.24.0)
Renseigner le titre et les notes de release
Cliquer sur Publish release

3. Pipeline automatique

Le workflow .github/workflows/build-publish-package.yaml s'exécute automatiquement :

# Déclencheurs
on:
  release:
    types: [created]           # Automatique sur création de release
  workflow_dispatch:           # Déclenchement manuel possible

Étapes du pipeline :

Étape	Description
1. Checkout	Récupération du code source
2. Setup Node	Configuration Node.js 20
3. Install	Installation des dépendances
4. Build	Build du package (`npm run build`)
5. Pack	Création de l'archive (`npm pack`)
6. Publish	Publication sur Artifactory

Scan de sécurité (optionnel) :

Le job blackduck-scan analyse les vulnérabilités des dépendances. Il peut être activé via le paramètre ACTIVATE_BLACKDUCK_DETECT.

Publication manuelle

Si nécessaire, la publication peut être faite manuellement :

# 1. Build du package
npm run build

# 2. Créer l'archive
npm pack

# 3. Configurer l'authentification (.npmrc)
cat > .npmrc << EOF
email=votre@email.com
always-auth=true
registryCegid=https://cegid.jfrog.io/artifactory/api/npm/vsb-cds-react/
//cegid.jfrog.io/artifactory/api/npm/vsb-cds-react/:_authToken=VOTRE_TOKEN
EOF

# 4. Publier
npm publish --scope registryCegid

Secrets GitHub requis

Pour que le pipeline fonctionne, les secrets suivants doivent être configurés dans GitHub :

Secret	Description	Obligatoire
`VSB_NPM_AUTH_TOKEN`	Token d'authentification JFrog Artifactory	Oui
`VSB_NPM_AUTH_EMAIL`	Email associé au compte npm	Oui
`VSB_BLACKDUCK_API_TOKEN`	Token API BlackDuck	Non
`VSB_BLACKDUCK_URL`	URL du serveur BlackDuck	Non

Configuration des secrets

Aller dans Settings > Secrets and variables > Actions
Cliquer sur New repository secret
Ajouter chaque secret avec son nom et sa valeur

Registre de publication

Paramètre	Valeur
URL	`https://cegid.jfrog.io/artifactory/api/npm/vsb-cds-react/`
Scope	`@cegid`
Package	`@cegid/vsb-cds-react`

Déploiement Storybook

Le Storybook est automatiquement déployé sur Azure via le workflow build-app-deploy-infra.yaml :

Déclencheur : Push sur la branche main
URL : https://my-storybook.chazam.tech/
Infrastructure : Azure Container Registry + Azure Container Apps

Conventions de commit

Ce projet suit la spécification Conventional Commits.

Format

<type>(<scope>): <description>

[corps optionnel]
[footer optionnel]

Types

Type	Description
`feat`	Nouvelle fonctionnalité
`fix`	Correction de bug
`style`	Changements de style (CSS, design)
`refactor`	Refactorisation sans changement fonctionnel
`perf`	Amélioration de performance
`test`	Ajout ou modification de tests
`docs`	Documentation
`build`	Changements du système de build
`ci`	Changements CI/CD
`chore`	Autres changements (maintenance)

Scope

Le scope est le nom du composant en PascalCase :

feat(Button): add loading state
fix(TextField): fix debounce memory leak
style(Table): update bordered style
refactor(DatePicker): extract hooks

Exemples

# Nouvelle fonctionnalité
feat(TextField): add onDebouncedChange callback

# Correction de bug
fix(Table): fix border-radius on first/last row

# Refactorisation
refactor(DatePicker): modularize with sub-components

# Changement global (sans scope)
chore: update dependencies

Validation

Les commits sont validés automatiquement par commitlint via un hook git (husky). Un commit invalide sera rejeté avec un message d'erreur explicatif.

Contribution

Workflow de développement

Créer une branche : git checkout -b feature/ma-fonctionnalite
Développer le composant avec TypeScript
Ajouter des stories Storybook
Tester dans Storybook : npm run storybook
Vérifier le build : npm run build
Commit avec convention : git commit -m "feat(Component): description"
Push et créer une Pull Request

Guidelines pour les composants

Suivre les patterns existants
TypeScript strict obligatoire
Stories Storybook pour chaque variante
Accessibilité (a11y) obligatoire
Utiliser les design tokens VSB (@cegid/vsb-cds-tokens)
Documenter les props avec JSDoc

Générer les notes de release

# Génère automatiquement les notes depuis les commits
npm run release-notes

# Les notes sont mises à jour dans src/stories/ReleaseNotes.stories.tsx

Ressources

Ressource	URL
Storybook live	https://my-storybook.chazam.tech/
Cegid Design System	https://cds-website.azurewebsites.net/
Design Tokens	`@cegid/vsb-cds-tokens`

Support navigateurs

Navigateur	Version minimum
Chrome	>= 88
Firefox	>= 88
Safari	>= 14
Edge	>= 88

Licence

ISC © Cegid

Name		Name	Last commit message	Last commit date
Latest commit History 473 Commits
.github/workflows		.github/workflows
.husky		.husky
.storybook		.storybook
infra		infra
scripts		scripts
src		src
.dockerignore		.dockerignore
.env.local.example		.env.local.example
.gitignore		.gitignore
.npmignore		.npmignore
.release-notes.example.json		.release-notes.example.json
COMMIT_GUIDELINES.md		COMMIT_GUIDELINES.md
Dockerfile		Dockerfile
Dockerfile.local		Dockerfile.local
README.md		README.md
commitlint.config.js		commitlint.config.js
package-lock.json		package-lock.json
package.json		package.json
tsconfig.json		tsconfig.json
vite.config.ts		vite.config.ts

cegid/vsb-cds-react

Folders and files

Latest commit

History

Repository files navigation

VSB CDS React

Table des matières

Installation

Depuis le registre Cegid Artifactory

Peer Dependencies requises

Configuration

1. Importer les styles requis

2. Wrapper l'application avec le ThemeProvider

3. Import des composants

Composants disponibles

Formulaires et Inputs (14 composants)

Boutons et Interactions (3 composants)

Navigation et Layout (10 composants)

Affichage de données (15 composants)

Feedback et Notifications (7 composants)

Système de design

Palette de couleurs

Typographie

Espacement

Icônes

Exemples d'utilisation

Bouton avec icône

TextField avec debounce

Table avec bordures

Système de notifications

Navigation

Développement

Prérequis

Installation locale

Scripts disponibles

Architecture du projet

Publication du package

Processus automatisé (GitHub Actions)

1. Préparer la release

2. Créer une release GitHub

3. Pipeline automatique

Publication manuelle

Secrets GitHub requis

Configuration des secrets

Registre de publication

Déploiement Storybook

Conventions de commit

Format

Types

Scope

Exemples

Validation

Contribution

Workflow de développement

Guidelines pour les composants

Générer les notes de release

Ressources

Support navigateurs

Licence

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases 1

Packages 0

Uh oh!

Contributors 7

Uh oh!

Languages

Packages