Installation

Intègre le système de design ePassLive dans un projet Next.js 15 + Tailwind v4.

Prérequis

Node.js 20+ (LTS)
Next.js 15 avec App Router
Tailwind CSS v4 (configuration CSS d'abord)
TypeScript 5.4+ en mode strict

1. Installe le paquet

# Using pnpm (recommended)
pnpm add @epasslive/design-system

# Or npm
npm install @epasslive/design-system

2. Configure Tailwind

Importe le préréglage du système de design dans ton :tailwind.config.ts:

import type { Config } from 'tailwindcss'
import epasslivePreset from '@epasslive/design-system/tailwind.config'

export default {
  presets: [epasslivePreset],
  content: [
    './app/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    './node_modules/@epasslive/design-system/**/*.{ts,tsx}',
  ],
} satisfies Config

3. Importe les styles globaux

Ajoute le CSS du système de design à la racine de ton :app/layout.tsx:

// app/layout.tsx
import '@epasslive/design-system/globals.css'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

4. Installe les icônes (optionnel)

Le système de design utilise les icônes Lucide. Installe-les pour les composants d'icônes :

pnpm add lucide-react

5. Vérifie l'installation

Dépose un Button dans :app/page.tsx:

import { Button } from '@epasslive/design-system'

export default function Home() {
  return <Button aria-label="Test button">Hello ePassLive</Button>
}

Tu devrais voir un bouton primaire sarcelle. Si tu vois le bouton par défaut du navigateur, vérifie que :

L'import CSS est à la racine de ton layout
Le préréglage Tailwind est chargé
Le tableau content inclut le chemin du système de design

Distribution interne

Le paquet est actuellement distribué via le registre interne ePassLive. La publication publique sur npm est prévue pour la v3.2.0.