| name | lucca-front-all |
| description | Design system Lucca Front / Prisme (Angular) — toutes versions. À charger pour tout fichier d'un projet qui dépend de @lucca-front/ng ou @lucca-front/scss, ou contenant des sélecteurs lu-*, pr-* ou des directives commençant par 'lu' (ex: luButton, luTooltip, luForm).
|
Design System Prisme — Lucca Front (toutes versions)
RÈGLE : Avant toute génération ou modification de code impliquant lu-*, luX ou pr-*, détecte la version du projet (§1) puis consulte la documentation de cette version. Sans cette consultation, toute réponse est invalide.
1. Version
- Lis la version de
@lucca-front/ng installée :
- en priorité
node_modules/@lucca-front/ng/package.json → champ version (version résolue exacte) ;
- à défaut, la dépendance
@lucca-front/ng (ou @lucca-front/scss) dans le package.json du projet (ex: ^21.2.1 → 21.2.1).
- Le segment de version est ce numéro (ex:
21.2.1). Tous les chemins ci-dessous en dépendent.
- Si la version exacte est absente de la liste, prends le plus haut patch disponible ≤ la version installée, dans la même mineure.
Versions disponibles : 21.3.0, 21.2.5, 21.2.4, 21.2.2, 21.2.1, 21.2.0, 21.1.4, 21.1.3, 21.1.2, 21.1.1, 21.1.0, 21.0.5, 21.0.4, 21.0.3, 21.0.2, 21.0.1, 21.0.0
Si la version ne peut pas être déterminée → s'arrêter et demander à l'utilisateur. Ne jamais supposer une version par défaut.
2. Chemins
Compose le chemin à partir du slug du composant et de la version détectée (<version> = ex: 21.2.1).
Ne devine jamais un chemin : seuls les fichiers réellement présents font foi. Si un chemin composé n'existe pas, vérifie le slug (§6) et la version (§1) — un composant peut ne pas exister dans toutes les versions.
Composant <slug>
| Fichier | Chemin |
|---|
| API Angular | ./references/<version>/components/<slug>/<slug>.md |
| Exemples (Angular + HTML) | ./references/<version>/components/<slug>/<slug>.component.md |
| Design (do/don't, usage) | ./references/<version>/components/<slug>/design/_index.md |
| Figma (variantes, node IDs) | ./references/<version>/components/<slug>/<slug>.figma.md |
| Changelog | ./references/<version>/components/<slug>/<slug>.changelog.md |
Types partagés
Certaines propriétés d'API référencent un type énuméré documenté à part (ex: LuccaIcon, BubbleIllustration) :
./references/<version>/types/<TypeName>.md
Le lien exact (nom et chemin du type) est donné dans la section « Type definitions » du fichier API du composant. Tous les composants n'ont pas de types partagés.
Documentation transverse
./references/<version>/documentation/<dossier>/<slug>.md
Outils
./references/<version>/tools/<slug>.md
Slugs : animations, mixins, numbers, scrollbox, utilitaires
Migrations (montée de version)
./references/<version>/migrations.md — codemods de migration (ng generate @lucca-front/ng:<nom>) cumulatifs jusqu'à cette version, avec leur version d'introduction.
Exemple
Projet en 21.3.0, bouton → API : ./references/21.3.0/components/button/button.md, Figma : ./references/21.3.0/components/button/button.figma.md
3. Quand consulter quoi
| Cas d'usage | Consulter |
|---|
| Écrire du code Angular | API (.md) → Exemples (.component.md) → Changelog |
| Intégrer depuis maquette Figma | Figma (.figma.md) → Tokens → Guidelines dev UI |
| Créer une maquette Figma (Code → Figma) | Figma (.figma.md) → Design (design/_index.md) |
| Review de code | API → Guidelines dev UI → Contenu (si textes) → Patterns (si UX) |
| Conventions de rédaction | Contenu (dossier content/) |
| Design patterns | Patterns (dossier patterns/) |
| Tokens CSS | Tokens (dossier tokens/) |
| Mixins / animations SCSS | Outils (dossier tools/) |
| Composant déprécié | ./references/<version>/documentation/deprecated/deprecated.md |
| Monter de version | ./references/<version>/migrations.md + le <slug>.changelog.md de chaque composant touché |
4. Workflow Code
- Détecte la version (§1).
- Lis l'API du composant (
<slug>.md) — selectors, inputs, types exacts.
- Consulte les exemples (
<slug>.component.md).
- Vérifie le changelog si comportement inattendu.
⚠️ Ne te fie jamais à ta mémoire pour les noms de propriétés ou types. Seul le .md fait foi.
5. Workflow Code → Figma
- Lis le fichier Figma (
<slug>.figma.md) — variantes, node IDs, liens Figma.
- Utilise les noms Figma (pas Angular) pour les propriétés. Ils peuvent différer.
- Pour les guidelines visuelles →
design/_index.md.
⚠️ Les .figma.md reflètent l'état actuel de Figma.
6. Composants
Liste consolidée toutes versions. Un composant peut ne pas exister dans la version détectée — seul le fichier réellement présent fait foi (§2).
- activity-feed
- animations
- api-select
- app-layout
- avatar
- box
- breadcrumbs
- bubble-icon
- bubble-illustration
- button
- calendar
- calendar2
- callout
- callout-disclosure
- callout-popover
- card
- checkbox
- chip
- clear
- code
- color
- color-input
- color-picker
- colorpicker
- comment
- container
- core-select-department
- core-select-establishment
- core-select-job-qualification
- core-select-occupation-category
- core-select-user
- data-presentation
- data-table
- date
- dateinput
- daterangeinput
- departmentselect
- dialog
- divider
- dropdown
- duration-picker
- empty-state
- errorpage
- establishmentselect
- fancy-dialog
- fancybox
- fieldset
- filedropzone
- fileentry
- fileupload
- filterbar
- filterpills
- footer
- form
- form-field
- form-header
- form-label
- gauge
- grid
- highlight-data
- highlight-text
- horizontalnavigation
- icons
- impersonation
- index-table
- inlinemessage
- input-framed
- link
- listbox
- listing
- loading
- main-layout
- mobile-push
- mobileheader
- mobilenavigation
- modal
- multi-select
- multilanguagefield
- newbadge
- number-format-input
- number-input
- numbers
- numericbadge
- onboarding-empty-state
- pageheader
- pagination
- phonenumberfield
- plg-push
- popover
- popover2
- progress-bar
- progress-stepper
- radiofield
- readmore
- resource-card
- richtextinput
- scroll
- scrollbox
- section-empty-state
- segmented-control-tabs
- segmentedcontrol
- select
- select-templating
- sidepanel
- simple-select
- skeleton
- skiplinks
- software-icon
- sortable-list
- statusbadge
- switchfield
- tableofcontent
- tags
- text-flow
- textareafield
- textfield
- tile
- time
- time-picker
- timelines
- title-and-text
- toasts
- tooltip
- treeselect
- user-select
- userpopover
- verticalnavigation
7. Documentation transverse
- Tokens (dossier
tokens/) : Couleurs (couleurs), Typographie (typographie), Espacements (espacements), Élévations (elevations), Arrondis (arrondis), Design tokens (design-tokens), Noms de logiciels (noms-de-logiciels)
- Contenu & Rédaction (dossier
content/) : Notre voix, 100 % humaine (voix-humaine), Règles de ponctuation, de typographie (ponctuation-typographie), Grammaire, orthographe (grammaire-orthographe), Singulier ou pluriel ? (singulier-pluriel), Possessifs et pronoms (possessifs-pronoms), Infinitif ou impératif ? (infinitif-imperatif), Verbes d'action à utiliser (verbes-action), Nombres (nombres), Dates (dates), Accessibilité (accessibilite-contenu), 4 critères essentiels pour notre contenu (criteres-essentiels), Blocage sur le contenu ? (blocage-contenu), Face au jargon, que faire ? (jargon), Ressources pour définitions (ressources-definitions), Tester clarté et efficacité du contenu (tester-clarte), Messages d'erreur (messages-erreur)
- Guidelines (dossier
guidelines/) : Guidelines dev UI (guidelines-dev-ui)
- Design Patterns (dossier
patterns/) : Règles d'or (regles-or), Identification des pages (identification-pages), Card et box (card-et-box), Dialogs de confirmation (dialogs-confirmation), Actions de suppression (actions-suppression), Emails (emails), Feedback (feedback), Vues, filtres et navigation dans une page (vues-filtres-navigation), Structure en accordéon (structure-accordeon), Responsive design (responsive-design), Pattern IA (pattern-ia), Widgets (widgets), Parcours de création de ressource (parcours-creation-ressource), Conception d'un formulaire (conception-formulaire), Gestion des erreurs (gestion-erreurs-formulaire), Champs conditionnels (champs-conditionnels), Quitter un formulaire (quitter-formulaire), Aide contextuelle (aide-contextuelle), Champs effaçables (champs-effacables), Placeholders (placeholders), Modes d'affichage (modes-affichage), Traduction d'un formulaire (traduction-formulaire), Navigation mobile (navigation-mobile), Push Notification mobile (push-notification-mobile)
8. Composants dépréciés
Consulte ./references/<version>/documentation/deprecated/deprecated.md avant d'utiliser un composant inconnu.
Ne génère jamais de code utilisant un composant déprécié — propose son remplacement.
