875 lines
26 KiB
Markdown
875 lines
26 KiB
Markdown
# 🎨 Liste Exhaustive des Composants UI à Créer
|
|
|
|
> **Document de référence complet pour tous les composants UI nécessaires au frontend Veza**
|
|
>
|
|
> Ce document liste TOUS les composants UI qui doivent être créés pour couvrir l'ensemble des fonctionnalités de l'application.
|
|
|
|
---
|
|
|
|
## 📊 Statistiques
|
|
|
|
- **Total Composants**: 150+
|
|
- **Composants de Base**: 25
|
|
- **Composants Métier**: 75+
|
|
- **Composants Layout**: 15
|
|
- **Composants Formulaires**: 20+
|
|
- **Composants Data Display**: 15+
|
|
|
|
---
|
|
|
|
## 🔷 1. COMPOSANTS DE BASE (Foundation)
|
|
|
|
### 1.1 Inputs & Forms
|
|
|
|
- [x] **Input** - Champ de texte standard
|
|
- Variantes: text, email, password, number, tel, url
|
|
- États: default, focused, error, disabled, readonly
|
|
- Features: label, placeholder, icon, helper text, error message
|
|
|
|
- [x] **SearchInput** - Champ de recherche avec icône
|
|
- Features: debounce, clear button, suggestions dropdown
|
|
|
|
- [ ] **Textarea** - Zone de texte multiligne
|
|
- Features: auto-resize, character counter, max length
|
|
|
|
- [x] **Checkbox** - Case à cocher
|
|
- États: unchecked, checked, indeterminate, disabled
|
|
- Variantes: default, with label, inline
|
|
|
|
- [x] **Radio** - Bouton radio
|
|
- États: unchecked, checked, disabled
|
|
- Features: radio group, inline/stacked layout
|
|
|
|
- [x] **Switch** - Interrupteur toggle
|
|
- États: off, on, disabled
|
|
- Features: label, description
|
|
|
|
- [ ] **Select** - Menu déroulant
|
|
- Features: single/multi select, search, groups, custom options
|
|
- Variantes: native, custom styled
|
|
|
|
- [ ] **Combobox** - Input avec autocomplétion
|
|
- Features: filtering, keyboard navigation, custom rendering
|
|
|
|
- [ ] **Slider** - Curseur de valeur
|
|
- Variantes: single value, range
|
|
- Features: marks, step, min/max, tooltip
|
|
|
|
- [ ] **DatePicker** - Sélecteur de date
|
|
- Features: calendar view, range selection, min/max dates
|
|
- Variantes: single date, date range, time picker
|
|
|
|
- [ ] **TimePicker** - Sélecteur d'heure
|
|
- Features: 12h/24h format, minutes step
|
|
|
|
- [ ] **ColorPicker** - Sélecteur de couleur
|
|
- Features: hex, rgb, hsl input, palette, eyedropper
|
|
|
|
- [x] **FileUpload** - Upload de fichiers
|
|
- Features: drag & drop, preview, progress, multiple files
|
|
- Variantes: single file, multiple files, chunked upload
|
|
|
|
### 1.2 Buttons & Actions
|
|
|
|
- [x] **Button** - Bouton standard
|
|
- Variantes: primary, secondary, ghost, gaming, terminal, nature, icon
|
|
- Tailles: sm, md, lg, icon
|
|
- États: default, hover, active, disabled, loading
|
|
|
|
- [ ] **IconButton** - Bouton icône uniquement
|
|
- Variantes: default, outlined, filled
|
|
- Tailles: xs, sm, md, lg
|
|
|
|
- [ ] **ButtonGroup** - Groupe de boutons
|
|
- Orientations: horizontal, vertical
|
|
- Features: segmented control, radio group
|
|
|
|
- [ ] **DropdownButton** - Bouton avec menu déroulant
|
|
- Features: split button, menu items, dividers
|
|
|
|
- [ ] **FloatingActionButton (FAB)** - Bouton d'action flottant
|
|
- Positions: bottom-right, bottom-left, top-right, top-left
|
|
- Features: extended FAB with label
|
|
|
|
### 1.3 Display & Feedback
|
|
|
|
- [x] **Badge** - Pastille d'information
|
|
- Variantes: default, success, warning, error, info
|
|
- Tailles: sm, md, lg
|
|
- Features: dot variant, removable
|
|
|
|
- [x] **Avatar** - Photo de profil
|
|
- Tailles: xs, sm, md, lg, xl, 2xl
|
|
- Features: fallback initials, status indicator, group avatars
|
|
- Variantes: circular, square, rounded
|
|
|
|
- [x] **Card** - Conteneur de contenu
|
|
- Variantes: default, manga, gaming, glass
|
|
- Features: header, body, footer, actions, hover effects
|
|
|
|
- [ ] **Alert** - Message d'alerte
|
|
- Variantes: success, error, warning, info
|
|
- Features: title, description, icon, dismissible, actions
|
|
|
|
- [ ] **Banner** - Bannière d'information
|
|
- Positions: top, bottom
|
|
- Variantes: info, warning, error, success
|
|
- Features: dismissible, actions
|
|
|
|
- [x] **Toast** - Notification temporaire
|
|
- Variantes: success, error, warning, info
|
|
- Positions: top-right, top-left, bottom-right, bottom-left, top-center, bottom-center
|
|
- Features: auto-dismiss, progress bar, actions
|
|
|
|
- [ ] **Tooltip** - Info-bulle
|
|
- Positions: top, bottom, left, right
|
|
- Features: arrow, delay, interactive
|
|
|
|
- [ ] **Popover** - Conteneur flottant
|
|
- Positions: top, bottom, left, right
|
|
- Features: arrow, trigger (click, hover), dismissible
|
|
|
|
- [x] **Progress** - Barre de progression
|
|
- Variantes: linear, circular
|
|
- Types: determinate, indeterminate
|
|
- Features: label, percentage, color variants
|
|
|
|
- [x] **Skeleton** - Chargement placeholder
|
|
- Variantes: text, circular, rectangular, custom
|
|
- Animations: pulse, wave
|
|
|
|
- [x] **Spinner** - Indicateur de chargement
|
|
- Variantes: default, dots, bars, ring
|
|
- Tailles: xs, sm, md, lg, xl
|
|
|
|
- [ ] **Empty State** - État vide
|
|
- Features: icon, title, description, action button
|
|
- Variantes: no data, no results, error state
|
|
|
|
### 1.4 Layout & Navigation
|
|
|
|
- [x] **Divider** - Séparateur
|
|
- Orientations: horizontal, vertical
|
|
- Variantes: solid, dashed, dotted
|
|
- Features: with label
|
|
|
|
- [ ] **Accordion** - Panneau pliable
|
|
- Features: single/multiple expand, controlled/uncontrolled
|
|
- Variantes: default, bordered, separated
|
|
|
|
- [x] **Tabs** - Onglets
|
|
- Variantes: default, pills, underline
|
|
- Orientations: horizontal, vertical
|
|
- Features: icons, badges, disabled tabs
|
|
|
|
- [ ] **Stepper** - Indicateur d'étapes
|
|
- Orientations: horizontal, vertical
|
|
- Features: clickable steps, icons, descriptions
|
|
- États: completed, active, disabled, error
|
|
|
|
- [x] **Breadcrumb** - Fil d'Ariane
|
|
- Features: custom separator, max items, collapse
|
|
|
|
- [x] **Pagination** - Navigation de pages
|
|
- Variantes: default, simple, compact
|
|
- Features: page size selector, jump to page
|
|
|
|
- [ ] **Menu** - Menu contextuel
|
|
- Features: nested menus, icons, shortcuts, dividers
|
|
- Variantes: dropdown, context menu
|
|
|
|
- [ ] **Drawer** - Panneau latéral
|
|
- Positions: left, right, top, bottom
|
|
- Features: overlay, push content, persistent
|
|
|
|
- [ ] **Modal** - Fenêtre modale
|
|
- Tailles: sm, md, lg, xl, full
|
|
- Variantes: default, gaming, glass
|
|
- Features: header, footer, scrollable, nested modals
|
|
|
|
- [ ] **Dialog** - Boîte de dialogue
|
|
- Variantes: alert, confirm, prompt
|
|
- Features: custom actions, icon
|
|
|
|
### 1.5 Data Display
|
|
|
|
- [x] **Table** - Tableau de données
|
|
- Features: sorting, filtering, pagination, row selection
|
|
- Variantes: default, striped, bordered, compact
|
|
- Advanced: expandable rows, sticky headers, virtual scrolling
|
|
|
|
- [x] **List** - Liste d'éléments
|
|
- Variantes: simple, with icons, with avatars, with actions
|
|
- Features: dividers, nested lists, virtual scrolling
|
|
|
|
- [ ] **DataGrid** - Grille de données avancée
|
|
- Features: sorting, filtering, grouping, aggregation
|
|
- Advanced: column resizing, reordering, pinning
|
|
|
|
- [ ] **Tree** - Vue arborescente
|
|
- Features: expand/collapse, selection, drag & drop
|
|
- Variantes: file tree, org chart
|
|
|
|
- [ ] **Timeline** - Ligne de temps
|
|
- Orientations: vertical, horizontal
|
|
- Features: icons, colors, interactive
|
|
|
|
- [ ] **Stat Card** - Carte de statistique
|
|
- Features: value, label, trend, icon
|
|
- Variantes: default, gaming, compact
|
|
|
|
- [ ] **Chart** - Graphiques
|
|
- Types: line, bar, pie, donut, area, scatter
|
|
- Features: legend, tooltip, zoom, export
|
|
|
|
- [ ] **Calendar** - Calendrier
|
|
- Views: month, week, day, agenda
|
|
- Features: events, selection, range selection
|
|
|
|
- [ ] **Kanban Board** - Tableau Kanban
|
|
- Features: drag & drop, columns, cards, filters
|
|
|
|
---
|
|
|
|
## 🎵 2. COMPOSANTS MÉTIER VEZA (Domain-Specific)
|
|
|
|
### 2.1 Authentication & User
|
|
|
|
- [ ] **LoginForm** - Formulaire de connexion
|
|
- Fields: email, password, remember me
|
|
- Features: validation, 2FA support, OAuth buttons
|
|
|
|
- [ ] **RegisterForm** - Formulaire d'inscription
|
|
- Fields: username, email, password, confirm password
|
|
- Features: validation, password strength, terms acceptance
|
|
|
|
- [ ] **ForgotPasswordForm** - Réinitialisation mot de passe
|
|
- Fields: email
|
|
- Features: validation, success message
|
|
|
|
- [ ] **ResetPasswordForm** - Nouveau mot de passe
|
|
- Fields: password, confirm password
|
|
- Features: validation, password strength
|
|
|
|
- [ ] **TwoFactorSetup** - Configuration 2FA
|
|
- Features: QR code, backup codes, verification
|
|
|
|
- [ ] **TwoFactorVerify** - Vérification 2FA
|
|
- Fields: code
|
|
- Features: validation, remember device
|
|
|
|
- [ ] **OAuthButtons** - Boutons OAuth
|
|
- Providers: Google, GitHub, Discord
|
|
- Features: loading states, error handling
|
|
|
|
- [ ] **UserProfile** - Profil utilisateur
|
|
- Sections: info, avatar, bio, stats
|
|
- Features: edit mode, completion indicator
|
|
|
|
- [ ] **UserAvatar** - Avatar utilisateur
|
|
- Features: upload, crop, preview, delete
|
|
- Variantes: with status, with badge
|
|
|
|
- [ ] **UserCard** - Carte utilisateur
|
|
- Features: avatar, name, role, stats, actions
|
|
- Variantes: compact, detailed, horizontal
|
|
|
|
- [ ] **UserList** - Liste d'utilisateurs
|
|
- Features: search, filter, pagination, actions
|
|
- Variantes: grid, list, table
|
|
|
|
- [ ] **FollowButton** - Bouton suivre/ne plus suivre
|
|
- États: not following, following, loading
|
|
- Features: follower count
|
|
|
|
- [ ] **BlockButton** - Bouton bloquer/débloquer
|
|
- États: not blocked, blocked, loading
|
|
|
|
- [ ] **RoleBadge** - Badge de rôle
|
|
- Roles: admin, creator, premium, user
|
|
- Features: icon, tooltip
|
|
|
|
### 2.2 Tracks & Audio
|
|
|
|
- [ ] **TrackCard** - Carte de track
|
|
- Features: cover, title, artist, duration, waveform
|
|
- Actions: play, like, share, download, menu
|
|
- Variantes: compact, detailed, grid, list
|
|
|
|
- [ ] **TrackList** - Liste de tracks
|
|
- Features: play queue, drag & drop, bulk actions
|
|
- Variantes: simple, detailed, with covers
|
|
|
|
- [ ] **TrackPlayer** - Lecteur audio
|
|
- Features: play/pause, seek, volume, speed, loop, shuffle
|
|
- Displays: waveform, progress, time, metadata
|
|
- Variantes: mini, full, floating
|
|
|
|
- [ ] **Waveform** - Forme d'onde audio
|
|
- Features: interactive, zoomable, regions, markers
|
|
- Variantes: static, animated, interactive
|
|
|
|
- [ ] **TrackUploader** - Upload de track
|
|
- Features: drag & drop, chunked upload, metadata form
|
|
- Steps: file selection, upload, metadata, preview
|
|
|
|
- [ ] **TrackMetadataForm** - Formulaire métadonnées
|
|
- Fields: title, artist, album, genre, tags, description
|
|
- Features: validation, auto-fill, cover upload
|
|
|
|
- [ ] **TrackStats** - Statistiques de track
|
|
- Metrics: plays, likes, downloads, shares
|
|
- Features: charts, trends, time ranges
|
|
|
|
- [ ] **TrackVersionHistory** - Historique versions
|
|
- Features: timeline, diff, restore, download
|
|
- Displays: version number, date, changes
|
|
|
|
- [ ] **TrackComments** - Commentaires de track
|
|
- Features: add, edit, delete, reply, reactions
|
|
- Displays: avatar, username, timestamp, content
|
|
|
|
- [ ] **TrackShareDialog** - Partage de track
|
|
- Features: link generation, social media, embed code
|
|
- Options: public, private, password protected
|
|
|
|
- [ ] **AudioVisualizer** - Visualiseur audio
|
|
- Types: bars, circular, waveform, spectrum
|
|
- Features: responsive, customizable colors
|
|
|
|
- [ ] **PlaybackControls** - Contrôles de lecture
|
|
- Buttons: play, pause, next, previous, shuffle, repeat
|
|
- Features: keyboard shortcuts, tooltips
|
|
|
|
- [ ] **VolumeControl** - Contrôle de volume
|
|
- Features: slider, mute button, percentage
|
|
- Variantes: horizontal, vertical
|
|
|
|
- [ ] **SpeedControl** - Contrôle de vitesse
|
|
- Features: preset speeds, custom speed, reset
|
|
- Range: 0.25x to 2x
|
|
|
|
### 2.3 Playlists
|
|
|
|
- [ ] **PlaylistCard** - Carte de playlist
|
|
- Features: cover, title, track count, duration, creator
|
|
- Actions: play, edit, share, delete, menu
|
|
- Variantes: compact, detailed, grid, list
|
|
|
|
- [ ] **PlaylistList** - Liste de playlists
|
|
- Features: search, filter, sort, pagination
|
|
- Variantes: grid, list, table
|
|
|
|
- [ ] **PlaylistEditor** - Éditeur de playlist
|
|
- Features: add tracks, reorder, remove, metadata
|
|
- Displays: track list, drag & drop, search
|
|
|
|
- [ ] **PlaylistCollaborators** - Collaborateurs
|
|
- Features: add, remove, permissions, invitations
|
|
- Displays: avatar, name, role, actions
|
|
|
|
- [ ] **PlaylistShareLink** - Lien de partage
|
|
- Features: generate link, copy, QR code, expiration
|
|
- Options: view only, collaborative
|
|
|
|
- [ ] **PlaylistRecommendations** - Recommandations
|
|
- Features: similar playlists, based on listening
|
|
- Displays: playlist cards, reasons
|
|
|
|
### 2.4 Marketplace
|
|
|
|
- [ ] **ProductCard** - Carte de produit
|
|
- Features: image, title, price, seller, rating
|
|
- Actions: view, buy, wishlist, menu
|
|
- Variantes: compact, detailed, grid, list
|
|
|
|
- [ ] **ProductList** - Liste de produits
|
|
- Features: search, filter, sort, pagination
|
|
- Filters: price range, category, seller, rating
|
|
|
|
- [ ] **ProductDetail** - Détails produit
|
|
- Sections: images, description, specs, reviews
|
|
- Actions: buy, wishlist, share, report
|
|
|
|
- [ ] **ProductUploader** - Upload de produit
|
|
- Steps: files, metadata, pricing, preview
|
|
- Features: multiple files, preview, validation
|
|
|
|
- [ ] **OrderCard** - Carte de commande
|
|
- Features: order number, date, status, total
|
|
- Actions: view, download, support
|
|
- Variantes: compact, detailed
|
|
|
|
- [ ] **OrderList** - Liste de commandes
|
|
- Features: filter by status, search, pagination
|
|
- Displays: order cards, timeline
|
|
|
|
- [ ] **OrderDetail** - Détails commande
|
|
- Sections: items, payment, delivery, status
|
|
- Actions: download, invoice, support
|
|
|
|
- [ ] **PriceInput** - Saisie de prix
|
|
- Features: currency selector, validation
|
|
- Displays: formatted price, conversion
|
|
|
|
- [ ] **RatingDisplay** - Affichage note
|
|
- Features: stars, average, count
|
|
- Variantes: readonly, interactive
|
|
|
|
- [ ] **ReviewCard** - Carte d'avis
|
|
- Features: rating, comment, author, date
|
|
- Actions: helpful, report
|
|
|
|
### 2.5 Chat & Messaging
|
|
|
|
- [ ] **ChatWindow** - Fenêtre de chat
|
|
- Features: messages, input, typing indicator
|
|
- Displays: avatars, timestamps, read receipts
|
|
|
|
- [ ] **ChatMessage** - Message de chat
|
|
- Features: text, images, files, reactions
|
|
- Variantes: sent, received, system
|
|
|
|
- [ ] **ChatInput** - Saisie de message
|
|
- Features: text, emoji picker, file upload, mentions
|
|
- Actions: send, attach, emoji
|
|
|
|
- [ ] **ChatRoomList** - Liste de conversations
|
|
- Features: search, filter, unread count
|
|
- Displays: avatar, name, last message, timestamp
|
|
|
|
- [ ] **ChatRoomCard** - Carte de conversation
|
|
- Features: avatar, name, participants, last message
|
|
- Actions: open, archive, delete, mute
|
|
|
|
- [ ] **TypingIndicator** - Indicateur de saisie
|
|
- Features: animated dots, user names
|
|
- Variantes: single user, multiple users
|
|
|
|
- [ ] **MessageReactions** - Réactions aux messages
|
|
- Features: emoji picker, reaction count
|
|
- Displays: emoji, count, users
|
|
|
|
- [ ] **ChatParticipants** - Participants
|
|
- Features: list, add, remove, permissions
|
|
- Displays: avatar, name, status, role
|
|
|
|
### 2.6 Notifications
|
|
|
|
- [ ] **NotificationBell** - Cloche de notifications
|
|
- Features: unread count, dropdown, mark all read
|
|
- Variantes: with badge, with sound
|
|
|
|
- [ ] **NotificationList** - Liste de notifications
|
|
- Features: filter, mark as read, delete
|
|
- Displays: icon, title, message, timestamp
|
|
|
|
- [ ] **NotificationCard** - Carte de notification
|
|
- Types: follow, like, comment, mention, system
|
|
- Features: icon, avatar, message, actions
|
|
- États: read, unread
|
|
|
|
- [ ] **NotificationSettings** - Paramètres notifications
|
|
- Features: enable/disable by type, email, push
|
|
- Categories: social, tracks, marketplace, system
|
|
|
|
### 2.7 Analytics & Stats
|
|
|
|
- [ ] **DashboardStats** - Statistiques dashboard
|
|
- Metrics: users, tracks, plays, revenue
|
|
- Features: trends, comparisons, time ranges
|
|
|
|
- [ ] **AnalyticsChart** - Graphique analytics
|
|
- Types: line, bar, pie, area
|
|
- Features: zoom, export, legend, tooltip
|
|
|
|
- [ ] **PlayAnalytics** - Analytics de lecture
|
|
- Metrics: plays, unique listeners, duration
|
|
- Features: geographic, device, time-based
|
|
|
|
- [ ] **RevenueChart** - Graphique revenus
|
|
- Features: time ranges, breakdown, trends
|
|
- Displays: total, average, growth
|
|
|
|
- [ ] **UserGrowthChart** - Croissance utilisateurs
|
|
- Features: new users, active users, retention
|
|
- Displays: line chart, comparison
|
|
|
|
- [ ] **TopTracks** - Top tracks
|
|
- Features: ranking, plays, trends
|
|
- Displays: track cards, metrics
|
|
|
|
- [ ] **TopUsers** - Top utilisateurs
|
|
- Features: ranking, followers, activity
|
|
- Displays: user cards, metrics
|
|
|
|
### 2.8 Admin & Moderation
|
|
|
|
- [ ] **AdminDashboard** - Dashboard admin
|
|
- Sections: stats, recent activity, alerts
|
|
- Features: quick actions, filters
|
|
|
|
- [ ] **UserManagement** - Gestion utilisateurs
|
|
- Features: search, filter, ban, verify, roles
|
|
- Actions: edit, delete, impersonate
|
|
|
|
- [ ] **ContentModeration** - Modération contenu
|
|
- Features: reports, review, approve, reject
|
|
- Displays: content preview, reporter info
|
|
|
|
- [ ] **AuditLog** - Journal d'audit
|
|
- Features: filter, search, export
|
|
- Displays: action, user, timestamp, details
|
|
|
|
- [ ] **SystemHealth** - Santé système
|
|
- Metrics: CPU, memory, disk, network
|
|
- Features: alerts, history, thresholds
|
|
|
|
- [ ] **RoleManager** - Gestion des rôles
|
|
- Features: create, edit, delete, permissions
|
|
- Displays: role list, permission matrix
|
|
|
|
### 2.9 Settings & Preferences
|
|
|
|
- [ ] **SettingsPanel** - Panneau paramètres
|
|
- Sections: account, privacy, notifications, appearance
|
|
- Features: save, reset, validation
|
|
|
|
- [ ] **AccountSettings** - Paramètres compte
|
|
- Fields: email, username, password, 2FA
|
|
- Actions: update, verify, delete account
|
|
|
|
- [ ] **PrivacySettings** - Paramètres confidentialité
|
|
- Options: profile visibility, activity, data sharing
|
|
- Features: granular controls, explanations
|
|
|
|
- [ ] **NotificationPreferences** - Préférences notifications
|
|
- Categories: email, push, in-app
|
|
- Features: enable/disable by type, frequency
|
|
|
|
- [ ] **AppearanceSettings** - Paramètres apparence
|
|
- Options: theme, language, density, animations
|
|
- Features: preview, presets
|
|
|
|
- [ ] **ThemeSelector** - Sélecteur de thème
|
|
- Themes: dark, light, high contrast, custom
|
|
- Features: preview, custom colors
|
|
|
|
### 2.10 Search & Discovery
|
|
|
|
- [ ] **SearchBar** - Barre de recherche
|
|
- Features: autocomplete, suggestions, filters
|
|
- Scopes: all, tracks, users, playlists
|
|
|
|
- [ ] **SearchResults** - Résultats de recherche
|
|
- Categories: tracks, users, playlists, products
|
|
- Features: filter, sort, pagination
|
|
|
|
- [ ] **FilterPanel** - Panneau de filtres
|
|
- Features: multiple filters, reset, save presets
|
|
- Types: checkboxes, ranges, dates
|
|
|
|
- [ ] **SortSelector** - Sélecteur de tri
|
|
- Options: relevance, date, popularity, price
|
|
- Features: ascending/descending
|
|
|
|
- [ ] **TagCloud** - Nuage de tags
|
|
- Features: clickable, weighted, colors
|
|
- Displays: tag name, count
|
|
|
|
- [ ] **CategoryBrowser** - Navigateur de catégories
|
|
- Features: hierarchy, breadcrumb, filters
|
|
- Displays: category cards, subcategories
|
|
|
|
### 2.11 Webhooks & Integrations
|
|
|
|
- [ ] **WebhookList** - Liste de webhooks
|
|
- Features: add, edit, delete, test
|
|
- Displays: URL, events, status, stats
|
|
|
|
- [ ] **WebhookForm** - Formulaire webhook
|
|
- Fields: URL, events, secret, headers
|
|
- Features: validation, test endpoint
|
|
|
|
- [ ] **WebhookLogs** - Logs de webhooks
|
|
- Features: filter, search, retry
|
|
- Displays: timestamp, event, status, payload
|
|
|
|
- [ ] **IntegrationCard** - Carte d'intégration
|
|
- Features: logo, name, description, status
|
|
- Actions: connect, disconnect, configure
|
|
|
|
### 2.12 Sessions & Security
|
|
|
|
- [ ] **SessionList** - Liste de sessions
|
|
- Features: current session, revoke, revoke all
|
|
- Displays: device, location, IP, last active
|
|
|
|
- [ ] **SessionCard** - Carte de session
|
|
- Features: device info, location, browser
|
|
- Actions: revoke, view details
|
|
|
|
- [ ] **SecurityLog** - Journal de sécurité
|
|
- Events: login, logout, password change, 2FA
|
|
- Features: filter, export, alerts
|
|
|
|
- [ ] **PasswordStrength** - Force du mot de passe
|
|
- Features: visual indicator, requirements, suggestions
|
|
- Levels: weak, medium, strong, very strong
|
|
|
|
---
|
|
|
|
## 🎯 3. COMPOSANTS LAYOUT (Structure)
|
|
|
|
### 3.1 Application Layout
|
|
|
|
- [ ] **AppShell** - Coquille application
|
|
- Sections: header, sidebar, main, footer
|
|
- Features: responsive, collapsible sidebar
|
|
|
|
- [ ] **Header** - En-tête
|
|
- Features: logo, navigation, search, user menu
|
|
- Variantes: fixed, sticky, transparent
|
|
|
|
- [ ] **Sidebar** - Barre latérale
|
|
- Features: navigation, collapsible, responsive
|
|
- Variantes: fixed, overlay, push
|
|
|
|
- [ ] **Footer** - Pied de page
|
|
- Features: links, copyright, social media
|
|
- Variantes: simple, detailed, sticky
|
|
|
|
- [ ] **MainContent** - Contenu principal
|
|
- Features: padding, max-width, responsive
|
|
- Variantes: full-width, contained, centered
|
|
|
|
### 3.2 Navigation
|
|
|
|
- [ ] **NavBar** - Barre de navigation
|
|
- Features: links, dropdowns, mobile menu
|
|
- Variantes: horizontal, vertical
|
|
|
|
- [ ] **NavLink** - Lien de navigation
|
|
- États: default, active, disabled
|
|
- Features: icon, badge, tooltip
|
|
|
|
- [ ] **MobileMenu** - Menu mobile
|
|
- Features: hamburger, slide-in, overlay
|
|
- Variantes: left, right, full-screen
|
|
|
|
- [ ] **UserMenu** - Menu utilisateur
|
|
- Features: avatar, name, role, actions
|
|
- Actions: profile, settings, logout
|
|
|
|
### 3.3 Content Containers
|
|
|
|
- [ ] **Container** - Conteneur
|
|
- Sizes: sm, md, lg, xl, full
|
|
- Features: padding, max-width, centered
|
|
|
|
- [ ] **Section** - Section
|
|
- Features: padding, background, border
|
|
- Variantes: default, highlighted, bordered
|
|
|
|
- [ ] **Grid** - Grille
|
|
- Features: responsive columns, gap, auto-fit
|
|
- Variantes: 2-col, 3-col, 4-col, auto
|
|
|
|
- [ ] **Stack** - Pile verticale/horizontale
|
|
- Directions: vertical, horizontal
|
|
- Features: gap, alignment, wrap
|
|
|
|
- [ ] **Flex** - Conteneur flexible
|
|
- Features: direction, wrap, gap, alignment
|
|
- Variantes: row, column, wrap
|
|
|
|
---
|
|
|
|
## 📱 4. COMPOSANTS RESPONSIVE
|
|
|
|
### 4.1 Mobile-Specific
|
|
|
|
- [ ] **BottomNav** - Navigation inférieure mobile
|
|
- Features: icons, labels, badges
|
|
- Actions: 3-5 main actions
|
|
|
|
- [ ] **SwipeableCard** - Carte glissable
|
|
- Actions: swipe left/right for actions
|
|
- Features: reveal actions, snap back
|
|
|
|
- [ ] **PullToRefresh** - Tirer pour rafraîchir
|
|
- Features: loading indicator, threshold
|
|
- Variantes: default, custom indicator
|
|
|
|
- [ ] **InfiniteScroll** - Défilement infini
|
|
- Features: load more, loading indicator
|
|
- Options: threshold, batch size
|
|
|
|
### 4.2 Desktop-Specific
|
|
|
|
- [ ] **SplitPane** - Panneau divisé
|
|
- Orientations: horizontal, vertical
|
|
- Features: resizable, collapsible, min/max size
|
|
|
|
- [ ] **CommandPalette** - Palette de commandes
|
|
- Features: search, keyboard shortcuts, recent
|
|
- Trigger: Cmd+K / Ctrl+K
|
|
|
|
- [ ] **ContextMenu** - Menu contextuel
|
|
- Features: right-click, nested menus, shortcuts
|
|
- Displays: icons, labels, dividers
|
|
|
|
---
|
|
|
|
## 🎨 5. COMPOSANTS AVANCÉS
|
|
|
|
### 5.1 Rich Text & Editors
|
|
|
|
- [ ] **RichTextEditor** - Éditeur de texte riche
|
|
- Features: formatting, links, images, code
|
|
- Toolbar: bold, italic, lists, headings
|
|
|
|
- [ ] **MarkdownEditor** - Éditeur Markdown
|
|
- Features: preview, syntax highlighting, shortcuts
|
|
- Modes: edit, preview, split
|
|
|
|
- [ ] **CodeEditor** - Éditeur de code
|
|
- Features: syntax highlighting, line numbers, autocomplete
|
|
- Languages: js, ts, json, yaml, etc.
|
|
|
|
### 5.2 Media & Files
|
|
|
|
- [ ] **ImageGallery** - Galerie d'images
|
|
- Features: lightbox, thumbnails, navigation
|
|
- Layouts: grid, masonry, carousel
|
|
|
|
- [ ] **ImageCropper** - Recadrage d'image
|
|
- Features: aspect ratio, zoom, rotate
|
|
- Shapes: rectangle, circle, custom
|
|
|
|
- [ ] **VideoPlayer** - Lecteur vidéo
|
|
- Features: play, pause, seek, volume, fullscreen
|
|
- Displays: controls, progress, time
|
|
|
|
- [ ] **FileManager** - Gestionnaire de fichiers
|
|
- Features: upload, download, delete, rename, move
|
|
- Views: list, grid, tree
|
|
|
|
### 5.3 Drag & Drop
|
|
|
|
- [ ] **DraggableList** - Liste déplaçable
|
|
- Features: reorder, handle, animation
|
|
- Variantes: vertical, horizontal, grid
|
|
|
|
- [ ] **DropZone** - Zone de dépôt
|
|
- Features: drag over state, file validation
|
|
- Displays: placeholder, preview
|
|
|
|
- [ ] **SortableGrid** - Grille triable
|
|
- Features: drag & drop, reorder, animation
|
|
- Layouts: grid, masonry
|
|
|
|
### 5.4 Virtualization
|
|
|
|
- [ ] **VirtualList** - Liste virtualisée
|
|
- Features: large datasets, smooth scrolling
|
|
- Options: item height, overscan
|
|
|
|
- [ ] **VirtualGrid** - Grille virtualisée
|
|
- Features: large datasets, responsive
|
|
- Options: column count, item size
|
|
|
|
- [ ] **VirtualTable** - Tableau virtualisé
|
|
- Features: large datasets, sorting, filtering
|
|
- Options: row height, column width
|
|
|
|
---
|
|
|
|
## ✅ Statut d'Implémentation
|
|
|
|
### Légende
|
|
- [x] **Implémenté** - Composant créé et fonctionnel
|
|
- [ ] **À créer** - Composant à implémenter
|
|
- [~] **En cours** - Composant en développement
|
|
- [!] **Prioritaire** - Composant critique à créer en priorité
|
|
|
|
### Priorités
|
|
|
|
#### 🔴 P0 - Critique (MVP)
|
|
- [ ] LoginForm
|
|
- [ ] RegisterForm
|
|
- [ ] TrackCard
|
|
- [ ] TrackList
|
|
- [ ] TrackPlayer
|
|
- [ ] PlaylistCard
|
|
- [ ] UserProfile
|
|
- [ ] SearchBar
|
|
- [ ] Modal
|
|
- [ ] Select
|
|
|
|
#### 🟠 P1 - Important
|
|
- [ ] TrackUploader
|
|
- [ ] PlaylistEditor
|
|
- [ ] ProductCard
|
|
- [ ] ChatWindow
|
|
- [ ] NotificationBell
|
|
- [ ] SettingsPanel
|
|
- [ ] Accordion
|
|
- [ ] Stepper
|
|
- [ ] Menu
|
|
- [ ] Drawer
|
|
|
|
#### 🟡 P2 - Souhaitable
|
|
- [ ] AnalyticsChart
|
|
- [ ] AdminDashboard
|
|
- [ ] WebhookList
|
|
- [ ] RichTextEditor
|
|
- [ ] ImageGallery
|
|
- [ ] CommandPalette
|
|
- [ ] VirtualList
|
|
|
|
#### 🟢 P3 - Nice to Have
|
|
- [ ] VideoPlayer
|
|
- [ ] FileManager
|
|
- [ ] CodeEditor
|
|
- [ ] KanbanBoard
|
|
- [ ] Calendar
|
|
|
|
---
|
|
|
|
## 📊 Résumé par Catégorie
|
|
|
|
| Catégorie | Total | Implémentés | À créer | % Complétion |
|
|
|-----------|-------|-------------|---------|--------------|
|
|
| **Base** | 60 | 15 | 45 | 25% |
|
|
| **Métier** | 75 | 0 | 75 | 0% |
|
|
| **Layout** | 15 | 0 | 15 | 0% |
|
|
| **Responsive** | 7 | 0 | 7 | 0% |
|
|
| **Avancés** | 13 | 0 | 13 | 0% |
|
|
| **TOTAL** | **170** | **15** | **155** | **9%** |
|
|
|
|
---
|
|
|
|
## 🎯 Prochaines Étapes
|
|
|
|
1. **Phase 1 - MVP (P0)**
|
|
- Implémenter les 10 composants critiques
|
|
- Focus: Auth, Tracks, Playlists, Search
|
|
|
|
2. **Phase 2 - Core Features (P1)**
|
|
- Implémenter les 10 composants importants
|
|
- Focus: Upload, Chat, Notifications, Settings
|
|
|
|
3. **Phase 3 - Advanced (P2)**
|
|
- Implémenter les composants souhaitables
|
|
- Focus: Analytics, Admin, Webhooks
|
|
|
|
4. **Phase 4 - Polish (P3)**
|
|
- Implémenter les composants nice-to-have
|
|
- Focus: Rich editors, Media, Advanced features
|
|
|
|
---
|
|
|
|
**Version**: 1.0.0
|
|
**Dernière mise à jour**: 2026-01-05
|
|
**Auteur**: Veza Frontend Team
|