ui-kit

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

# 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

```bash
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` :

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

4. 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>`).