ui-kit

Bibliothèque de composants Angular 18 (standalone, signaux) partagée entre les applications de l'entreprise, avec son application de catalogue.

Projet	Rôle
projects/ui-kit	La bibliothèque publiée (ng-packagr)
projects/demo-ui-kit	Catalogue : chaque composant avec son extrait de code, thème clair/sombre

Commandes

pnpm install
pnpm build        # construit la bibliothèque dans dist/ui-kit
pnpm start        # construit en développement puis lance le catalogue (http://localhost:4200)
pnpm watch        # reconstruit la bibliothèque à chaque modification
pnpm test         # tests de la bibliothèque
pnpm test:demo    # tests du catalogue
pnpm build:demo   # build de production du catalogue

Utilisation dans une application

1. Ajouter la dépendance (en local, avant publication sur le registre privé) :
   "ui-kit": "link:../ui-kit/dist/ui-kit" et, dans angular.json, "preserveSymlinks": true pour les cibles build et test.
2. Installer les pairs : @angular/forms et leaflet (pour ui-map, avec allowedCommonJsDependencies: ["leaflet"]).
3. Importer les styles dans styles.css :

@import 'leaflet/dist/leaflet.css'; /* uniquement avec ui-map */
@import 'ui-kit/styles/theme.css';

1. Importer les composants là où ils servent : import { UiButtonComponent } from 'ui-kit';

Composants

ui-button · ui-badge · ui-card · ui-stat · ui-rating · ui-field · ui-segmented · ui-page-header · ui-notice · ui-empty-state · ui-legend · ui-map

Le thème repose sur des variables --ui-* (clair/sombre automatique, forçable avec data-theme="light|dark" sur <html>).