Design System

Configuration de votre espace de travail

Demander l'accès au repo

Contactez l'équipe DevOps en leur précisant votre identifiant GitLab. Ils vous ajouteront en tant que collaborateur sur le repo.

Cloner le repo

git clone https://github.com/xxxxxx.git

Créer votre branche

Créez une branche dédiée à votre contribution en utilisant une convention de nommage explicite comme :

feat/mon-nouveau-composant

Installer les dependances

# Avec npm

npm install

Créer le composant

Initialiser le composant

components/
└── ui/
├── Button.tsx
└── Badge.tsx ← votre fichier

Dans le cas ou vous voulez ajouter un variant à un composant déjà initialisé vous avez juste à modifier le fichier.

Faire les imports nécéssaires

Exemple avec le composant Badge :

import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { Slot } from "@radix-ui/react-slot";
import { cn } from "@/lib/utils";

Définir les variantes aveccva

Si ajout de variant d'un composant préexistant, ajouter la définition de votre variant sinon intialiser la définition des variantes

Exemple avec le composant Badge :

export const badgeVariants = cva(
  "inline-flex items-center justify-center ...", // Classes de base — styles communs à toutes les variantes
  {
    variants: { // Définir à la suite les axes de variations
      variant: { // Ici première axe de variation puis définir les valeurs possibles de l'axe
        default: // Ici première valeur possible de l'axe
          "bg-gradient-to-r from-[#C41E3A] to-[#A01830] ...",
        secondary: // Deuxième valeur possible de l'axe
          "border border-[#D1D5DB] text-[#4B5563] disabled:text-[#D1D5DB] ... ",
      },
      size: {  //Définir les autres axes de variations s'il y en a par exemple par taille
      },
    },
    defaultVariants: { //Ajout des valeurs par défauts des axes de variation
      variant: "default",
      size: "default",
    },
  },
);

Définir le type de paramètre que le composant accepte

Exemple avec le composant Badge :

export interface BadgeProps
extends React.ComponentProps<"span">, VariantProps<typeof badgeVariants> {
asChild?: boolean;
}

Rendu du composant

Mise en place de la fonction qui reçoit les props et retourne le HTML final. Elle assemble les classes générées par cva, choisit l'élément à rendre et transmet le reste des props au DOM.

Exemple avec le composant Badge :

import { Badge, badgeVariants } from "@/components/ui/Badge";
import { JSX } from "react";

const text: string = "Absent";
const variant = "absent";

export const BadgeAbsentPreview = (): JSX.Element => {
  return <Badge variant={variant}>{text}</Badge>;
};

const badgeClass = badgeVariants({ variant });

export const badgeAbsentCode = `<span class="${badgeClass}">
  ${text}
</span>`;

Créer les previews

Initialiser les previews

components/
└── previews/
├── button
└── badge ← votre dossier

Créer fichier dédié pour chaque variante

Pour chaque variante, créer un fichier dédié [Composant][Variante]Preview.tsx qui implémente le type Variant :

name → nom de la variante

props → props passées au composant

code → snippet HTML généré via badgeVariants() à afficher dans la doc

Preview → fonction qui rend le composant visuellement

Exemple avec la variante absent du Badge :

import { Badge, badgeVariants } from "@/components/ui/Badge";
import { JSX } from "react";

const text: string = "Absent";
const variant = "absent";

export const BadgeAbsentPreview = (): JSX.Element => {
  return <Badge variant={variant}>{text}</Badge>;
};

const badgeClass = badgeVariants({ variant });

export const badgeAbsentCode = `<span class="${badgeClass}">
  ${text}
</span>`;

Barrel file

Créer le fichier index.ts dans le dossier previews/badge qui centralise et ré-exporte tous les modules d'un dossier. Permet d'importer depuis un seul point d'entrée au lieu de cibler chaque fichier individuellement.

components/
└── previews/
    └── badge ← votre dossier
        └── BadgeAbsentPreview.tsx
        └── index.ts ← le barrel file est ici

Exemple pour le index.ts du dossier badge

export * from "./BadgeAbsentPreview";
export * from "./BadgeDefaultPreview";
export * from "./BadgeDestructivePreview";

Créer le registry

Initialiser le fichier registry

registry/
└── [autre-composant].ts
└── index.ts
└── badge.ts

Enregistrement du composant en GalleryComponent

Chaque composant a son propre registry qui enregistre donc chaque variante dans un même type de component GalleryComponent

Exemple pour le index.ts du dossier badge

import {
  badgeAbsentCode,
  BadgeAbsentPreview,
  //code et preview d'autres variantes
   } from "@/components/previews/badge";
import { GalleryComponent } from "@/types/component";
import { Tag } from "lucide-react"; 
export const badgeComponent: GalleryComponent = {
  slug: "badge", // L'identifiant unique du composant dans l'URL
  title: "Badge", //Le nom explicite du composant 
  description: "Affiche un badge ou un composant qui ressemble à un badge.",
  icon: Tag, //ajouter une icone Lucid pour être affiché dans le catalogue de la page d'acceuil
  variants: [
    {
      name: "Par défaut",
      code: badgeDefaultCode,
      Preview: BadgeDefaultPreview,
    },
    //autres variantes si il en existe
      ],
};

Barrel file

Dans le fichier index.ts ajouter l'export du fichier badge

Exemple de contenu de index.ts du dossier /registry

export * from "./badge";
export * from "./button";
export * from "./input";

Enregistrer les modifications

Prévisualiser vos changements

Si vous aviez suivi toutes les étapes. Vous devriez être en mesure de voir votre nouveau composante dans la page d'acceuil et prévisualiser toutes les variantes.

Pull Request

Vous pouvez maintenant visualiser votre contribution. ADD, COMMIT, PULL, PUSH et PULL REQUEST

Merci

Vous avez fait du bon travail. A la prochaine!

Et sur ce, bonne journée!