132 lines
6.2 KiB
Markdown
132 lines
6.2 KiB
Markdown
# É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 tailles
|
|
- `Card` : Containers avec variants (default, interactive)
|
|
- `Input` : Champs de saisie avec support d'icônes
|
|
- `Textarea` : Zones de texte avec label et helperText
|
|
- `ErrorState` : Affichage d'erreurs
|
|
- `EmptyState` : États vides
|
|
- `Badge` : Badges
|
|
- `Skeleton` : Loaders skeleton
|
|
- `Modal` : Modales
|
|
- `Toast` : Notifications toast
|
|
- `MobileMenu` : 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
|
|
|
|
### Priorité haute
|
|
1. **`SeriesCard.tsx`** - Le container principal utilise encore un `div` avec styles inline
|
|
2. **`createSeriesModal/CreateSeriesModalView.tsx`** - Le container de la modal utilise un `div` avec styles inline
|
|
3. **`AuthorFilterButton.tsx`** - Le bouton principal utilise encore un `button` avec styles inline
|
|
4. **`AuthorFilterDropdown.tsx`** - Les boutons d'option utilisent encore des `button` avec styles inline
|
|
5. **`CategoryTabs.tsx`** - Les boutons d'onglets utilisent encore des `button` avec styles inline
|
|
|
|
### Priorité moyenne
|
|
6. **`CreateAccountModalSteps.tsx`** - Containers de modales avec `div` et styles inline
|
|
7. **`LanguageSettingsManager.tsx`** - Containers avec `div` et styles inline
|
|
8. **`FundingGauge.tsx`** - Containers avec `div` et styles inline
|
|
9. **`DocsContent.tsx`** - Container principal avec `div` et styles inline
|
|
10. **`DocsSidebar.tsx`** - Container avec `div` et styles inline
|
|
11. **`keyManagement/KeyManagementRecoverySection.tsx`** - Containers et boutons avec styles inline
|
|
12. **`keyManagement/KeyManagementManager.tsx`** - Containers avec `div` et styles inline
|
|
13. **`keyManagement/KeyManagementImportForm.tsx`** - Boutons avec styles inline
|
|
14. **`syncProgressBar/SyncProgressBar.tsx`** - Container avec `div` et styles inline
|
|
15. **`AlbyInstaller.tsx`** - Container avec `div` et styles inline
|
|
16. **`ConditionalPublishButton.tsx`** - Le link container utilise encore un `Link` avec styles inline
|
|
17. **`NotificationActions.tsx`** - Boutons avec styles inline
|
|
18. **`NotificationBadge.tsx`** - Bouton avec styles inline
|
|
19. **`NotificationBadgeButton.tsx`** - Bouton avec styles inline
|
|
20. **`NotificationPanelHeader.tsx`** - Boutons avec styles inline
|
|
21. **`ProfileBackButton.tsx`** - Bouton avec styles inline
|
|
22. **`unlockAccount/UnlockAccountForm.tsx`** - Formulaires et boutons
|
|
23. **`unlockAccount/UnlockAccountButtons.tsx`** - Boutons
|
|
24. **`unlockAccount/WordSuggestions.tsx`** - Suggestions
|
|
25. **`markdownEditorTwoColumns/MarkdownEditorTwoColumns.tsx`** - Boutons et labels
|
|
26. **`markdownEditorTwoColumns/PagesManager.tsx`** - Boutons et labels
|
|
27. **`ImageUploadField.tsx`** - Le label d'upload utilise encore un `span` avec styles inline
|
|
28. **`ArticleEditorForm.tsx`** - Container d'erreur avec `div` et styles inline
|
|
29. **`LanguageSelector.tsx`** - Sélecteur de langue
|
|
30. **`authorPage/AuthorPageContent.tsx`** - Container avec `div` et styles inline
|
|
31. **`UserProfile.tsx`** - Container avec `div` et styles inline
|
|
|
|
### Priorité basse
|
|
32. **`relayManager/RelayCard.tsx`** - Le container principal utilise encore un `div` avec styles inline
|
|
33. **`nip95Config/Nip95ApiCard.tsx`** - Le container principal utilise encore un `div` avec styles inline
|
|
34. **`PaymentModal.tsx`** - Le container du QR code utilise encore un `div` avec styles inline
|
|
|
|
## Erreurs corrigées
|
|
|
|
### TypeScript
|
|
- ✅ `hooks/useAuthorPresentation.ts` : Ajout de l'import manquant `nostrService`
|
|
- ✅ `lib/authorQueries.ts` : Correction du type `picture` avec `exactOptionalPropertyTypes: true`
|
|
|
|
### Linting
|
|
- ✅ Toutes les erreurs de linting ont été corrigées
|
|
|
|
## État actuel
|
|
|
|
- ✅ **TypeScript** : Aucune erreur
|
|
- ✅ **Linting** : Aucune erreur
|
|
- ✅ **Compilation** : Succès
|
|
|
|
## Prochaines étapes
|
|
|
|
1. Continuer la migration des composants restants
|
|
2. Tester l'application après chaque migration
|
|
3. Documenter les changements dans `fixKnowledge/` ou `features/`
|