4.7 KiB
4.7 KiB
État de la migration des composants UI
Date : 2025-01-27 Auteur : Équipe 4NK
Composants UI réutilisables créés
Les composants suivants ont été créés dans components/ui/ :
Button: Boutons avec variants (primary, secondary, success, danger, ghost) et taillesCard: Containers avec variants (default, interactive)Input: Champs de saisie avec support d'icônesTextarea: Zones de texte avec label et helperTextErrorState: Affichage d'erreursEmptyState: États videsBadge: BadgesSkeleton: Loaders skeletonModal: ModalesToast: Notifications toastMobileMenu: Menu mobile
Composants migrés
Composants principaux
- ✅
ArticlesList.tsx- ErrorState, EmptyState - ✅
AuthorsList.tsx- ErrorState, EmptyState - ✅
ArticleCard.tsx- Card - ✅
AuthorCard.tsx- Card - ✅
SearchBar.tsx- Input - ✅
ArticleFilters.tsx- Card, Button - ✅
ArticlePreview.tsx- Button - ✅
PaymentModal.tsx- Button, Card - ✅
ConnectButton.tsx- Button - ✅
ArticleFormButtons.tsx- Button - ✅
ConditionalPublishButton.tsx- Button, Card - ✅
AlbyInstaller.tsx- Button - ✅
CacheUpdateManager.tsx- Button, Card, ErrorState - ✅
UserArticlesList.tsx- Button, ErrorState - ✅
ConnectedUserMenu.tsx- Button - ✅
SeriesCard.tsx- Button - ✅
ProfileSeriesBlock.tsx- Button - ✅
SeriesSection.tsx- Button
Formulaires
- ✅
reviewForms/ReviewFormView.tsx- Button, ErrorState, Input, Textarea, Card - ✅
reviewForms/ReviewTipFormView.tsx- Button, ErrorState, Textarea, Card - ✅
reviewForms/ConnectRequiredCard.tsx- Button, Card - ✅
SponsoringForm.tsx- Button, Card, Textarea, ErrorState - ✅
authorPresentationEditor/PresentationForm.tsx- Button, Card, ErrorState - ✅
authorPresentationEditor/NoAccountView.tsx- Button, Card - ✅
authorPresentationEditor/AuthorPresentationEditor.tsx- Button - ✅
createSeriesModal/CreateSeriesModalView.tsx- Button, ErrorState, Input, Textarea - ✅
CreateAccountModalComponents.tsx- Button, Card, ErrorState, Textarea
Gestion de configuration
- ✅
relayManager/RelayManagerContent.tsx- Button, Card, Input, ErrorState - ✅
relayManager/RelayCard.tsx- Button, Input - ✅
nip95Config/Nip95ConfigContent.tsx- Button, Card, Input, ErrorState - ✅
nip95Config/Nip95ApiCard.tsx- Button, Input - ✅
keyManagement/KeyManagementImportSection.tsx- Button, Card, ErrorState - ✅
keyManagement/KeyManagementImportForm.tsx- Textarea
Autres composants
- ✅
ArticleReviews.tsx- Card, ErrorState, Button - ✅
ArticlePages.tsx- Card - ✅
authorPage/SeriesList.tsx- Button, Card, EmptyState - ✅
authorPage/SponsoringSummary.tsx- Button, Card - ✅
syncProgressBar/view.tsx- Button, ErrorState - ✅
MarkdownEditor.tsx- Button
Composants restants à migrer
Aucun composant prioritaire restant. Tous les composants principaux ont été migrés vers les composants UI réutilisables.
Priorité moyenne
ImageUploadField.tsx- Le label d'upload utilise encore unspanavec styles inline (déjà partiellement migré avec Button pour RemoveButton)
Priorité basse
PaymentModal.tsx- Le container du QR code utilise encore undivavec styles inline (déjà partiellement migré)
Composants récemment migrés
- ✅
LanguageSelector.tsx- Migration vers Button - ✅
NotificationBadge.tsx- Migration vers Button - ✅
NotificationBadgeButton.tsx- Migration vers Button - ✅
ClearButton.tsx- Migration vers Button - ✅
keyManagement/KeyManagementImportSection.tsx- Migration de KeyManagementNoAccountBanner vers Card et KeyManagementImportButton vers Button - ✅
ArticleEditor.tsx- Migration de SuccessMessage vers Card - ✅
NotificationPanel.tsx- Migration du conteneur principal vers Card - ✅
AuthorFilterButton.tsx- Migration vers Button avec support forwardRef - ✅
AuthorFilterDropdown.tsx- Migration de AuthorOption et AllAuthorsOption vers Button - ✅
components/ui/Button.tsx- Ajout du support forwardRef, aria-expanded, aria-haspopup, aria-selected, role, id
Erreurs corrigées
TypeScript
- ✅
hooks/useAuthorPresentation.ts: Ajout de l'import manquantnostrService - ✅
lib/authorQueries.ts: Correction du typepictureavecexactOptionalPropertyTypes: true
Linting
- ✅ Toutes les erreurs de linting ont été corrigées
État actuel
- ✅ TypeScript : Aucune erreur
- ✅ Linting : Aucune erreur
- ✅ Compilation : Succès
Prochaines étapes
- Continuer la migration des composants restants
- Tester l'application après chaque migration
- Documenter les changements dans
fixKnowledge/oufeatures/