0.1.0 • Published 2d ago

billy-layout

Licence

—

Version

0.1.0

Deps

Size

1.5 MB

Vulns

Weekly

Summary Dependency Versions

billy-layout

Layout + design system BILLy : shell applicatif (topbar, sidebar, notifications, barre de navigation mobile), tokens & mixins SCSS, champs de formulaire, panneaux, dialogues et composants de feedback.

Extraite de billy-client sans dépendance Bootstrap ni dépendance au code métier — voir library-migration.md à la racine du workspace pour l'historique et les décisions.

Documentation développeur : docs/README.md — une fiche par composant (API, exemples, theming, pièges). Guidelines UX : docs/ux-guidelines.md — conventions d'assemblage des écrans (boutons de header, listes, consult-card, save-bar).

La documentation est embarquée dans le paquet publié : une fois la librairie installée, tout est lisible dans node_modules/billy-layout/docs/ (assistants IA compris — commencez par docs/README.md puis docs/ux-guidelines.md).

Arborescence

src/lib/ est organisé par catégories (miroir de docs/) :

Dossier	Contenu
`core/`	briques transverses : billy-icon, click-outside, autofocus, utils TVA/IBAN/email
`layout/`	shell applicatif (topbar/sidebar/notifications) + action-bar mobile
`inputs/`	champs de saisie CVA : datepicker, dropdown, code-field, input-emails, input-password, button-switch, attachment-button
`forms/`	structure de formulaires : form-creation, default-form-signal, save-bar, form-side-panel
`buttons/`	tuiles d'action : button-ajout, button-upload
`dialogs/`	moteur `Dialog`, dialog-form, delete-dialog
`feedback/`	toastr, snackbar, loaders, empty-state
`display/`	billy-panel, consult-card, page-header, header-action-bar, tabs, filter-toggle-buttons
`viewers/`	visionneuses de fichiers (pdf/image/xml)
`styles/`	SCSS partagés : tokens, reboot, mixins (assets publiés sous `styles/`)

Consommation dans le workspace

TypeScript : import { … } from 'billy-layout' — le tsconfig.json racine mappe le paquet sur projects/billy-layout/src/public-api.ts (compilation par les sources, pas besoin de builder la lib en dev).

SCSS : les feuilles partagées vivent dans src/lib/styles/ et sont résolues par stylePreprocessorOptions.includePaths (angular.json) :

@use 'billy-forms' as forms;   // mixins des champs/boutons
@use 'billy-cards' as cards;   // mixins des cartes/sections
@use 'billy-code-field' as code;
@use 'billy-tokens';           // variables CSS --billy-* (:root + dark)
@use 'billy-dialog';           // coque modale .billy-modal*
@use 'billy-reboot';           // normalisation globale (box-sizing…)

À la publication, ces fichiers sont expédiés dans billy-layout/styles/ (assets ng-packagr) : un consommateur externe ajoute ce dossier à ses includePaths.

Prérequis côté application

Fonts (chargées par l'application, cf. src/index.html) : « Plus Jakarta Sans » (shell + design system). « Source Sans Pro » n'est requise que par la couche de compat legacy de billy-client (billy-reboot l'utilise comme police de base des pages métier).
Tokens & thème : charger billy-tokens dans les styles globaux ; le mode sombre repose sur la classe body.dark-mode, gérée par BillyDarkModeService (clé localStorage billy_dark_mode).
Providers (voir app.config.ts de billy-client pour l'exemple complet) :
- BILLY_SHELL_CONFIG — liens du menu, version, homeLink, logout, badges, synchro des notifications ;
- BILLY_DIALOG_ROUTER (optionnel) — fermeture des overlays routés pour billy-dialog-form ;
- BILLY_FILE_SOURCE — source de contenu des viewers app-file-viewer-*.

Shell : slots

<billy-shell> projette trois zones métier vers la topbar :

<billy-shell>
  <app-billy-search shell-search />
  <billy-notifications shell-notifications>
    <!-- catégories : composants qui étendent BillyNotifCategory -->
  </billy-notifications>
  <app-billy-account-menu shell-account />
  <router-outlet />
</billy-shell>

Build & publication

ng build billy-layout   # ng-packagr → dist/billy-layout (FESM + DTS + styles/)
cd dist/billy-layout && npm publish