Menu
Migre le Deprecated Textfield vers le Textfield Angular moderne de Lucca Front, avec stratégie anti-régression.
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Baseado na classificação ocupacional SOC
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