Menu
Migre le Deprecated Textfield vers le Textfield Angular moderne de Lucca Front, avec stratégie anti-régression.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Produit une analyse des bugs de Lucca Front sur une période donnée (trimestre, mois…) en croisant deux populations : les issues de type `Bug` (demande) et les PR labellisées FIX (livraison) — volumes ouverts/traités/restants, criticité, sujets et comparatif trimestriel.
Règles d’écriture du SCSS Lucca Front : nommage type BEM à plat, modifiers/états, layers, tokens, propriétés logiques, structure de fichiers et enregistrement highlight-prisme. À utiliser pour écrire ou modifier du SCSS dans packages/scss, packages/ng ou les stories.
Génère ou complète des tests Storybook (`play`) pour les stories Lucca Front.
Génère une story QA à partir de guidelines et du contrat d’interface d’un composant.
Design system Lucca Front / Prisme (Angular). À 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 Lucca Front / Prisme (Angular). À 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).
| name | textfield |
| description | Migre le Deprecated Textfield vers le Textfield Angular moderne de Lucca Front, avec stratégie anti-régression. |
Ce skill migre les anciens textfields (markup CSS legacy) vers les composants Angular modernes Lucca Front, en minimisant les regressions.
Le composant cible Angular est :
FormFieldComponent depuis @lucca-front/ng/form-fieldTextInputComponent depuis @lucca-front/ng/formsNumberInputComponent depuis @lucca-front/ng/forms (pour les champs numeriques).html et templates inline TS).Chercher en priorite les patterns suivants :
<label class="textfield ...">
<input class="textfield-input" ... />
<span class="textfield-label">...</span>
</label>
textfield, textfield-input, textfield-label, textfield-messages<label class="textfield ..."> avec input texte natif<label class="textfield ..."> avec input[type="number"]formControlName, [formControl], [(ngModel)], placeholder, aria-requireddiv.textfield avec composant custom interne (ex: app-i18n-input, app-form-input-*) et messages textfield-messagesmod-noLabel) ou label masque (.textfield-label.pr-u-mask)lu-form-field avec hiddenLabel et [label]="''" + label.textfield-label externe)textarea)textfield contenant un select (natif ou composant de selection, incluant simple-select, lu-select, multi-select)textfield contenant un selecteur de date (ex: lu-date-input, lu-date-range-input, input[type="date"], composants date custom)Appliquer directement les regles de transformation ci-dessous, fichier par fichier, pour conserver un controle fin et eviter les regressions.
Cas texte :
<lu-form-field label="Mon label">
<lu-text-input [placeholder]="placeholder" formControlName="name" />
</lu-form-field>
Cas numerique :
<lu-form-field label="Montant">
<lu-number-input formControlName="amount" [min]="0" [step]="1" />
</lu-form-field>
Preference : ne pas utiliser ng-template pour le label quand une chaine simple suffit.
Utiliser ng-template uniquement pour un label riche (ex: icone, contenu structure, tooltip complexe).
input[type="text"] legacy -> lu-text-inputinput[type="number"] legacy -> lu-number-inputspan.textfield-label -> label de lu-form-field (chaine directe en priorite)hiddenLabel sur lu-form-field avec un label technique non videplaceholder -> conserver tel quel sur le controle cibleformControlName -> conserver sur le controle cible[formControl] -> conserver sur le controle cible[(ngModel)] -> conserver sur le controle cibletype (text, email, password, url) -> conserverautocomplete -> conserverdisabled -> conservertype="number", conserver aussi min, max, step et les bindings associes (si inputmode est present et important, classer le cas en migration manuelle : lu-number-input ne l’expose pas)mod-search, utiliser hasSearchIcon sur lu-text-inputmod-compact, ne pas migrer automatiquement le style ; proposer une migration optionnelle et prevenir explicitement que le rendu UI sera different si l'utilisateur acceptetextfield, supprimer la classe mod-block,sans ajouter de classe utilitaire de remplacementtextfield, supprimer la classe mod-outlinedtextfield, supprimer la classe palette-neutraltextfield, supprimer la classe mod-whitelu-form-fieldLes largeurs legacy textfield sont definies en rem.
Les largeurs lu-form-field sont discretes via width (20, 30, 40, 50, 60) et correspondent a :
20 -> 10rem30 -> 15rem40 -> 20rem50 -> 25rem60 -> 30remTable de migration recommandee (valeur la plus proche visuellement) :
| Deprecated textfield | Largeur legacy | lu-form-field width | Largeur cible |
|---|---|---|---|
mod-shortest | 3rem | 20 | 10rem |
mod-shorter | 6rem | 20 | 10rem |
mod-short | 9rem | 20 | 10rem |
mod-standard / mod-default | 13rem | 30 | 15rem |
mod-long | 17rem | 30 | 15rem |
mod-longer | 22rem | 40 | 20rem |
mod-longest | 28rem | 60 | 30rem |
Regles pratiques :
mod-shortest, mod-shorter, mod-short, mod-standard, mod-default, mod-long, mod-longer, mod-longest) apres migrationlu-form-field via l'input width (ex: <lu-form-field width="30" ...>)Cas particulier mod-compact :
mod-compact et ouvrir une decision explicite avec l'utilisateurlu-form-field + controle LF en supprimant mod-compactmod-compact"Pour les champs numeriques, tenir compte des references Prisme suivantes :
Regles de migration pour type="number" :
lu-number-input (et non lu-text-input)min, max, stepformControlName, [formControl], [(ngModel)], disabled) — si readonly / name / id sont utilises, classer le cas en migration manuelle (non supportes nativement + lu-form-field regenere l’id)Pour les champs multiline, tenir compte de la reference Prisme suivante :
Regles de migration pour textarea :
textarea vers lu-text-inputlu-textarea-input quand la migration est validee manuellementformControlName, [formControl], [(ngModel)], placeholder, rows, maxlength, disabled) — si readonly / name / id sont utilises, classer le cas en migration manuelle (non supportes nativement)select, simple-select, lu-select, multi-select) ou un selecteur de date, ne pas migrer et classer en manuellu-text-input, lu-number-input, lu-textarea-input)textfield par lu-form-fieldmod-search, ajouter hasSearchIcon sur le lu-text-input migremod-block du wrapper legacy lors de la migrationmod-outlined du wrapper legacy lors de la migrationpalette-neutral du wrapper legacy lors de la migrationmod-white du wrapper legacy lors de la migration[(ngModel)], formControlName, (ngModelChange), (blur)).textfield-label.pr-u-mask) existe, reutiliser son contenu comme label de lu-form-fieldmod-noLabel, migrer vers hiddenLabel avec un label technique non videlabel de lu-form-field[label]="''" hiddenLabel + label externe par label="..." hiddenLabellabel.textfield-label externes devenus redondantsAjouter si necessaire :
import { FormFieldComponent } from '@lucca-front/ng/form-field';
import { NumberInputComponent, TextInputComponent, TextareaInputComponent } from '@lucca-front/ng/forms';
En standalone Angular, ajouter ces composants dans imports du composant.
Quand le textfield legacy n'a pas de label exploitable, la migration reste possible :
<lu-form-field label="Champ sans label visible" hiddenLabel>
<lu-text-input [placeholder]="placeholder" formControlName="name" />
</lu-form-field>
Regles pour ce cas :
label videpr-u-mask), le reutiliser en priorite comme label techniqueToujours respecter les contraintes suivantes :
FormControl, FormGroup, validators, observables).formControlName) ni les modeles (ngModel).placeholder, type, autocomplete, disabled, readonly, name, id).textarea vers lu-text-input ; utiliser lu-textarea-input uniquement en migration validee.hiddenLabel et renseigner un label technique non vide.inlineMessage / errorInlineMessage de lu-form-fieldapp-i18n-input, app-form-input-*), conserver la semantique de validation/evenements lors de la migration du wrapper.pr-u-mask), conserver l'intention accessibilite en la transferant dans label + hiddenLabel si necessaire.textfield-label apres migration pour eviter les divergences.mod-compact, ne migrer vers le rendu moderne qu'apres validation explicite de l'utilisateur, avec avertissement sur le changement visuel.textfield contenant un selecteur (select, simple-select) un selecteur de date ou un selecteur angular de type lu-*, ne faire aucune modification automatique.Marquer comme manuel si l'un des points suivants est detecte :
@if, @for, @switch, @defer au coeur du textfield legacymod-compact non valide explicitement par l'utilisateurtextfield contenant un select (natif ou composant de selection, incluant simple-select)textfield contenant un selecteur de datetype="number" ambigu par rapport aux references Prisme 284b5f et 394429textarea ambigu par rapport a la reference Prisme 65eb4bRegle stricte pour ces cas :
Annotation recommandee a ajouter a proximite du code :
<!--
IA textfield
migration partielle : verification manuelle requise
-->
Apres migration, executer ces controles :
ng build ou equivalent).npm run lint si disponible).min/maxsteptextarea) :
rows/maxlength/readonlyProduire un rapport en 3 sections :
Migrations automatiques
Migrations partielles
Migrations manuelles restantes