diff --git a/src/components/ui-showcase/UIShowcaseClient.tsx b/src/components/ui-showcase/UIShowcaseClient.tsx index ada5dbc..f70c0a2 100644 --- a/src/components/ui-showcase/UIShowcaseClient.tsx +++ b/src/components/ui-showcase/UIShowcaseClient.tsx @@ -1,131 +1,18 @@ -/* eslint-disable react/no-unescaped-entities */ 'use client'; -import { useState } from 'react'; -import { Button } from '@/components/ui/Button'; -import { Badge } from '@/components/ui/Badge'; -import { Alert as ShadcnAlert, AlertTitle, AlertDescription } from '@/components/ui/Alert'; -import { Input } from '@/components/ui/Input'; -import { StyledCard } from '@/components/ui/StyledCard'; -import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'; -import { StatCard, ProgressBar, ActionCard, TaskCard, MetricCard, ToggleButton, SearchInput, ControlPanel, ControlSection, ControlGroup, FilterSummary, FilterChip, ColumnHeader, EmptyState, DropZone, Tabs, PriorityBadge, AchievementCard, ChallengeCard, PeriodSelector, SkeletonCard, SkeletonGrid, MetricsGrid } from '@/components/ui'; -import { CheckboxItem, CheckboxItemData } from '@/components/ui/CheckboxItem'; -import { Calendar } from '@/components/ui/Calendar'; -import { DailyAddForm } from '@/components/ui/DailyAddForm'; -import { AlertBanner, AlertItem } from '@/components/ui/AlertBanner'; -import { CollapsibleSection, CollapsibleItem } from '@/components/ui/CollapsibleSection'; import { Header } from '@/components/ui/Header'; -import { TabItem } from '@/components/ui/Tabs'; -import { AchievementData } from '@/components/ui/AchievementCard'; -import { ChallengeData } from '@/components/ui/ChallengeCard'; -import { TagDisplay } from '@/components/ui/TagDisplay'; -import { TagInput } from '@/components/ui/TagInput'; -import { DateTimeInput } from '@/components/ui/DateTimeInput'; -import { FormField } from '@/components/ui/FormField'; -import { LoadingSpinner } from '@/components/ui/LoadingSpinner'; -import { PrioritySelector } from '@/components/ui/PrioritySelector'; -import { StatusBadge } from '@/components/ui/StatusBadge'; -import { KeyboardShortcutsModal } from '@/components/ui/KeyboardShortcutsModal'; -import { Modal } from '@/components/ui/Modal'; -import { FontSizeToggle } from '@/components/ui/FontSizeToggle'; import { TableOfContents } from './TableOfContents'; +import { + ButtonsSection, + BadgesSection, + CardsSection, + FormsSection, + NavigationSection, + FeedbackSection, + DataDisplaySection +} from './sections'; export function UIShowcaseClient() { - const [inputValue, setInputValue] = useState(''); - const [selectedDate, setSelectedDate] = useState(new Date()); - const [selectedPeriod, setSelectedPeriod] = useState('7d'); - const [showModal, setShowModal] = useState(false); - const [showKeyboardModal, setShowKeyboardModal] = useState(false); - const [checkboxItems, setCheckboxItems] = useState([ - { id: '1', text: 'Tâche complétée', isChecked: true, type: 'task' }, - { id: '2', text: 'Réunion importante', isChecked: false, type: 'meeting' }, - { id: '3', text: 'Tâche en cours', isChecked: false, type: 'task' } - ]); - const [alertItems] = useState([ - { id: '1', title: 'Tâche critique', icon: '🔴', urgency: 'critical', metadata: 'Dans 1 jour' }, - { id: '2', title: 'Réunion urgente', icon: '🟠', urgency: 'high', metadata: 'Dans 2 jours' }, - { id: '3', title: 'Rappel', icon: '🟡', urgency: 'medium', metadata: 'Dans 5 jours' } - ]); - const [collapsibleItems] = useState([ - { - id: '1', - title: 'Tâche en attente', - subtitle: '15 Jan 2024', - metadata: 'Il y a 2 jours', - isChecked: false, - icon: '📋', - actions: [ - { label: 'Déplacer', icon: '📅', onClick: () => console.log('Move'), variant: 'primary' }, - { label: 'Supprimer', icon: '🗑️', onClick: () => console.log('Delete'), variant: 'destructive' } - ] - } - ]); - - // Données pour les composants Weekly Manager - const [activeTab, setActiveTab] = useState('tab1'); - const tabItems: TabItem[] = [ - { id: 'tab1', label: 'Vue Executive', icon: '📝' }, - { id: 'tab2', label: 'Accomplissements', icon: '✅', count: 5 }, - { id: 'tab3', label: 'Enjeux', icon: '🎯', count: 3 }, - { id: 'tab4', label: 'Métriques', icon: '📊' } - ]; - - const sampleAchievements: AchievementData[] = [ - { - id: '1', - title: 'Refactoring de la page Daily', - description: 'Migration vers les composants UI génériques', - impact: 'high', - completedAt: new Date(), - updatedAt: new Date(), - tags: ['refactoring', 'ui'], - todosCount: 8 - }, - { - id: '2', - title: 'Implémentation du système de thèmes', - description: 'Ajout de 10 nouveaux thèmes avec CSS variables', - impact: 'medium', - completedAt: new Date(Date.now() - 86400000), - updatedAt: new Date(Date.now() - 86400000), - tags: ['themes', 'css'], - todosCount: 3 - } - ]; - - const sampleChallenges: ChallengeData[] = [ - { - id: '1', - title: 'Migration vers Next.js 15', - description: 'Mise à jour majeure avec nouvelles fonctionnalités', - priority: 'high', - deadline: new Date(Date.now() + 7 * 86400000), - tags: ['migration', 'nextjs'], - todosCount: 12, - blockers: ['Tests à mettre à jour'] - }, - { - id: '2', - title: 'Optimisation des performances', - description: 'Réduction du temps de chargement', - priority: 'medium', - deadline: new Date(Date.now() + 14 * 86400000), - tags: ['performance', 'optimization'], - todosCount: 5 - } - ]; - - const sampleTags = [ - { id: '1', name: 'refactoring', color: '#3b82f6', usage: 5 }, - { id: '2', name: 'ui', color: '#10b981', usage: 8 }, - { id: '3', name: 'themes', color: '#8b5cf6', usage: 3 }, - { id: '4', name: 'css', color: '#f59e0b', usage: 4 }, - { id: '5', name: 'migration', color: '#ef4444', usage: 2 }, - { id: '6', name: 'nextjs', color: '#06b6d4', usage: 3 }, - { id: '7', name: 'performance', color: '#84cc16', usage: 6 }, - { id: '8', name: 'optimization', color: '#f97316', usage: 2 } - ]; - return (
{/* Header avec navigation et dropdown de thèmes */} @@ -143,1512 +30,16 @@ export function UIShowcaseClient() { {/* Contenu principal */}
- - - {/* Buttons Section */} -
-

- Buttons -

- -
-
-

Variants

-
- - - - - - -
-
- -
-

Sizes

-
- - - -
-
- -
-

States

-
- - - -
-
-
-
- - {/* Badges Section */} -
-

- Badges -

- -
-
- Default Badge - Primary Badge - Success Badge - Destructive Badge - Accent Badge - Purple Badge - Yellow Badge - Green Badge - Blue Badge - Gray Badge -
-
-
- - {/* Alerts Section */} -
-

- Alerts -

- -
- - Information - - Ceci est une alerte par défaut avec des informations importantes. - - - - - Succès - - Opération terminée avec succès ! Toutes les données ont été sauvegardées. - - - - - Erreur - - Une erreur s'est produite lors du traitement de votre demande. - - - - - Attention - - Veuillez vérifier vos informations avant de continuer. - - - - - Conseil - - Astuce : Vous pouvez utiliser les raccourcis clavier pour naviguer plus rapidement. - - -
-
- - {/* Inputs Section */} -
-

- Inputs -

- -
-
-

Types

-
- - - - - -
-
- -
-

États

-
- - - - - setInputValue(e.target.value)} placeholder="État avec valeur" /> -
-
-
-
- - {/* Cards Section */} -
-

- Cards -

- -
- {/* Standard Cards */} - - - Card Standard - - -

- Ceci est une carte standard avec header et contenu. -

- - - - - - Card Élevée - - -

- Cette carte a une ombre plus prononcée. -

- - - - - - Card Bordée - - -

- Cette carte a une bordure colorée. -

- - - - {/* Styled Cards */} - -

Styled Card Primary

-

- Carte avec couleur primaire et fond subtil. -

- - - -

Styled Card Success

-

- Carte avec couleur de succès. -

- - - -

Styled Card Destructive

-

- Carte avec couleur destructive. -

- -
- - {/* Nouveaux exemples avec props flexibles */} -
-

Card Flexible Props

-
-
-
- shadow="lg" border="primary" -
- - - Small Header - - -

Small padding content.

- - -
- -
-
- background="column" shadow="md" -
- - - No Separator - - -

Large padding, no separator.

- - -
- -
-
- border="none" shadow="none" -
- - - Minimal Card - - -

No border, no shadow, no padding.

- - -
-
-
-
- - {/* Interactive Demo */} -
-

- Démonstration Interactive -

- -
- - - Formulaire d'exemple - - -
- - -
- -
- - -
- -
- -
- Actif - En attente -
-
- -
- - -
- - - - - - Notifications - - - - Bienvenue ! - - Votre compte a été créé avec succès. - - - - - Mise à jour disponible - - Une nouvelle version de l'application est disponible. - - - -
- - -
- - -
-
- - {/* Dashboard Components Section */} -
-

- Dashboard Components -

- - {/* Stat Cards */} -
-

Stat Cards

-
-
-
- color="default" -
- -
-
-
- color="primary" -
- -
-
-
- color="success" -
- -
-
-
- color="warning" -
- -
-
-
- - {/* Progress Bars */} -
-

Progress Bars

-
-
-
- color="success" -
- -
-
-
- color="primary" -
- -
-
-
- color="warning" -
- -
-
-
- color="default" -
- -
-
-
- - {/* Action Cards */} -
-

Action Cards

-
-
-
- variant="primary" -
- - - - } - onClick={() => alert('Action clicked!')} - variant="primary" - /> -
- -
-
- variant="secondary" -
- - - - } - href="#" - variant="secondary" - /> -
- -
-
- variant="ghost" -
- - - - - } - href="#" - variant="ghost" - /> -
-
-
- - {/* Task Cards */} -
-

Task Cards

-
- {/* Task Card Compacte */} -
-
- variant="compact" - Vue compacte -
- -
- - {/* Task Card Détaillée */} -
-
- variant="detailed" - Vue détaillée -
- -
- - {/* Task Card Jira */} -
-
- source="jira" - Tâche Jira avec styles spéciaux -
- -
- - {/* Task Card TFS */} -
-
- source="tfs" - Tâche TFS avec styles spéciaux -
- -
- - {/* Task Card avec différents statuts */} -
-
- Statuts spéciaux - freeze, archived, cancelled -
-
- - - -
-
-
-
- - {/* Metric Cards */} -
-

Metric Cards

-
-
-
- color="primary" -
- -
- -
-
- color="success" -
- -
- -
-
- color="warning" -
- -
-
-
-
- - {/* Kanban Components Section */} -
-

- Kanban Components -

- - {/* Toggle Buttons */} -
-

Toggle Buttons

-
-
-
- variant="primary" isActive={true} -
- - - - } - > - Filtres - -
- -
-
- variant="primary" isActive={true} - Icône seule (padding réduit) -
- - - - } - /> -
- -
-
- variant="accent" isActive={false} -
- - - - } - > - Objectifs - -
- -
-
- variant="warning" isActive={true} -
- - - - } - > - Swimlanes - -
-
-
- - {/* Search Input */} -
-

Search Input

-
-
-
- placeholder="Rechercher des tâches..." -
- console.log('Search:', value)} - /> -
-
-
- - {/* Control Panel */} -
-

Control Panel

-
-
-
- ControlPanel + ControlSection + ControlGroup -
- - - console.log('Search:', value)} - /> - - - - - } - > - Filtres - - - - - } - > - Objectifs - - - - -
-
-
- - {/* Filter Summary */} -
-

Filter Summary

-
-
-
- Exemple avec filtres actifs -
- console.log('Clear filters')} - /> -
-
-
- - {/* Filter Chips */} -
-

Filter Chips

-
-
-
- variant="default" -
-
- console.log('Default chip')}> - Filtre par défaut - - console.log('With count')}> - Avec compteur - - console.log('With icon')}> - Avec icône - -
-
- -
-
- variant="selected" -
-
- console.log('Selected chip')}> - Filtre sélectionné - - console.log('Selected with color')}> - Avec couleur - -
-
- -
-
- variant="hidden" -
-
- console.log('Hidden chip')}> - Colonne masquée - - console.log('Hidden empty')}> - Colonne vide - -
-
- -
-
- Exemples avec icônes (Jira/TFS) -
-
- console.log('Jira project')}> - PROJ-123 - - console.log('Bug type')}> - Bug - - console.log('TFS project')}> - TFS-Projet - - console.log('Feature type')}> - Feature - -
-
-
-
- - {/* Column Components */} -
-

Column Components

-
-
-
- ColumnHeader - Header de colonne Kanban -
-
- console.log('Add task')} - /> -
-
- -
-
- EmptyState - État vide avec icône -
-
- -
-
- -
-
- DropZone - Zone de drop avec animation -
-
- -
-

Zone de drop normale

-
- - -
-

Zone de drop active (isOver=true)

-
- -
-
-
-
-
- - {/* Jira Dashboard Components Section */} -
-

- Jira Dashboard Components -

- -
- {/* PeriodSelector */} -
-

PeriodSelector

-
-
-
- PeriodSelector - Sélecteur de période -
- -
- Période sélectionnée: {selectedPeriod} -
-
-
-
- - {/* MetricsGrid */} -
-

MetricsGrid

-
-
-
- MetricsGrid - Grille de métriques -
- - - - - -
-
-
- - {/* SkeletonCard */} -
-

SkeletonCard

-
-
-
- SkeletonCard - Carte de chargement -
-
- - -
-
-
-
- - {/* SkeletonGrid */} -
-

SkeletonGrid

-
-
-
- SkeletonGrid - Grille de chargement -
- -
-
-
-
-
- - {/* Daily Components Section */} -
-

- Daily Components -

- -
- {/* CheckboxItem */} -
-

CheckboxItem

-
-
-
- CheckboxItem - Élément de liste avec checkbox -
-
- {checkboxItems.map((item) => ( - { - setCheckboxItems(prev => - prev.map(item => - item.id === id ? { ...item, isChecked: !item.isChecked } : item - ) - ); - }} - onUpdate={async (id, text) => { - setCheckboxItems(prev => - prev.map(item => - item.id === id ? { ...item, text } : item - ) - ); - }} - onDelete={async (id) => { - setCheckboxItems(prev => prev.filter(item => item.id !== id)); - }} - saving={false} - /> - ))} -
-
-
-
- - {/* Calendar */} -
-

Calendar

-
-
-
- Calendar - Calendrier avec dates marquées -
-
- -
-
-
-
- - {/* AddForm */} -
-

DailyAddForm

-
-
-
- DailyAddForm - Formulaire d'ajout avec options -
-
- { - console.log('Adding:', text, option); - const newItem: CheckboxItemData = { - id: Date.now().toString(), - text, - isChecked: false, - type: option as 'task' | 'meeting' - }; - setCheckboxItems(prev => [...prev, newItem]); - }} - placeholder="Ajouter une tâche..." - options={[ - { value: 'task', label: 'Tâche', icon: '✅', color: 'green' }, - { value: 'meeting', label: 'Réunion', icon: '🗓️', color: 'blue' } - ]} - defaultOption="task" - /> -
-
-
-
- - {/* Alert */} -
-

Alert

-
-
-
- Alert - Alerte avec éléments urgents -
-
- console.log('Clicked:', item)} - /> -
-
-
-
- - {/* CollapsibleSection */} -
-

CollapsibleSection

-
-
-
- CollapsibleSection - Section repliable avec éléments -
-
- console.log('Refresh')} - onItemToggle={(id) => console.log('Toggle:', id)} - /> -
-
-
-
-
-
- - {/* Weekly Manager Components Section */} -
-

- Weekly Manager Components -

- -
- {/* Tabs */} -
-

Tabs

-
-
-
- Tabs - Navigation par onglets -
- -
- Onglet actif: {activeTab} -
-
-
-
- - {/* PriorityBadge */} -
-

PriorityBadge

-
-
-
- PriorityBadge - Badge de priorité -
-
- - - -
-
-
-
-
- -
- {/* AchievementCard */} -
-

AchievementCard

-
-
-
- AchievementCard - Carte d'accomplissement -
-
- {sampleAchievements.map((achievement, index) => ( - - ))} -
-
-
-
- - {/* ChallengeCard */} -
-

ChallengeCard

-
-
-
- ChallengeCard - Carte de défi -
-
- {sampleChallenges.map((challenge, index) => ( - - ))} -
-
-
-
-
-
- - {/* Additional UI Components Section */} -
-

- Additional UI Components -

- -
- {/* TagDisplay & TagInput */} -
-

Tag Components

-
-
-
- TagDisplay - Affichage de tags -
-
- -
-
- -
-
- TagInput - Input avec suggestions de tags -
- console.log('Tags changed:', tags)} - placeholder="Ajouter des tags..." - maxTags={5} - /> -
-
-
- - {/* Form Components */} -
-

Form Components

-
-
-
- DateTimeInput - Input de date et heure -
- date && setSelectedDate(date)} - placeholder="Sélectionner une date" - /> -
- -
-
- FormField - Champ de formulaire avec label -
-
- - -

Ce champ est requis

-
-
-
-
- - {/* Status & Priority Components */} -
-

Status & Priority

-
-
-
- StatusBadge - Badge de statut -
-
- - - - - - - -
-
- -
-
- PrioritySelector - Sélecteur de priorité -
- console.log('Priority changed:', priority)} - title="Sélectionner une priorité" - /> -
-
-
- - {/* Loading & Modal Components */} -
-

Loading & Modal

-
-
-
- LoadingSpinner - Indicateur de chargement -
-
- - - - - -
-
- -
-
- Modal - Fenêtre modale -
-
- - -
-
-
-
- - {/* Utility Components */} -
-

Utility Components

-
-
-
- FontSizeToggle - Toggle de taille de police -
-
- - - Utilisez ce toggle pour ajuster la taille de police - -
-
-
-
-
-
- - {/* Footer */} -
-

- Cette page est accessible via /ui-showcase -

-
+ + + + + + +
- - {/* Modals */} - setShowModal(false)} - title="Exemple de Modal" - size="md" - > -
-

- Ceci est un exemple de modal avec du contenu personnalisé. -

-
- - -
-
- - - setShowKeyboardModal(false)} - shortcuts={[ - { keys: ['Ctrl', 'K'], description: 'Ouvrir la recherche', category: 'Navigation' }, - { keys: ['Ctrl', 'N'], description: 'Nouvelle tâche', category: 'Actions' }, - { keys: ['Ctrl', 'S'], description: 'Sauvegarder', category: 'Actions' }, - { keys: ['Esc'], description: 'Fermer les modales', category: 'Navigation' } - ]} - /> ); } diff --git a/src/components/ui-showcase/sections/BadgesSection.tsx b/src/components/ui-showcase/sections/BadgesSection.tsx new file mode 100644 index 0000000..7c1744d --- /dev/null +++ b/src/components/ui-showcase/sections/BadgesSection.tsx @@ -0,0 +1,64 @@ +'use client'; + +import { Badge } from '@/components/ui/Badge'; +import { PriorityBadge } from '@/components/ui/PriorityBadge'; +import { StatusBadge } from '@/components/ui/StatusBadge'; + +export function BadgesSection() { + return ( +
+

+ Badges +

+ +
+
+

Variants

+
+ Default Badge + Primary Badge + Success Badge + Destructive Badge + Accent Badge + Purple Badge + Yellow Badge + Green Badge + Blue Badge + Gray Badge + Outline Badge + Danger Badge + Warning Badge +
+
+ +
+

Tailles

+
+ Small Badge + Medium Badge + Large Badge +
+
+ +
+

Priority Badges

+
+ + + +
+
+ +
+

Status Badges

+
+ + + + +
+
+
+
+ ); +} \ No newline at end of file diff --git a/src/components/ui-showcase/sections/ButtonsSection.tsx b/src/components/ui-showcase/sections/ButtonsSection.tsx new file mode 100644 index 0000000..5f9d9da --- /dev/null +++ b/src/components/ui-showcase/sections/ButtonsSection.tsx @@ -0,0 +1,45 @@ +'use client'; + +import { Button } from '@/components/ui/Button'; + +export function ButtonsSection() { + return ( +
+

+ Buttons +

+ +
+
+

Variants

+
+ + + + + + +
+
+ +
+

Sizes

+
+ + + +
+
+ +
+

States

+
+ + + +
+
+
+
+ ); +} diff --git a/src/components/ui-showcase/sections/CardsSection.tsx b/src/components/ui-showcase/sections/CardsSection.tsx new file mode 100644 index 0000000..8259a22 --- /dev/null +++ b/src/components/ui-showcase/sections/CardsSection.tsx @@ -0,0 +1,239 @@ +'use client'; + +import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'; +import { StyledCard } from '@/components/ui/StyledCard'; +import { StatCard } from '@/components/ui/StatCard'; +import { ActionCard } from '@/components/ui/ActionCard'; +import { TaskCard } from '@/components/ui/TaskCard'; +import { MetricCard } from '@/components/ui/MetricCard'; +import { AchievementCard } from '@/components/ui/AchievementCard'; +import { ChallengeCard } from '@/components/ui/ChallengeCard'; +import { SkeletonCard } from '@/components/ui/SkeletonCard'; +import { AchievementData } from '@/components/ui/AchievementCard'; +import { ChallengeData } from '@/components/ui/ChallengeCard'; + +export function CardsSection() { + const sampleAchievements: AchievementData[] = [ + { + id: '1', + title: 'Refactoring de la page Daily', + description: 'Migration vers les composants UI génériques', + impact: 'high', + completedAt: new Date(), + updatedAt: new Date(), + tags: ['refactoring', 'ui'], + todosCount: 8 + }, + { + id: '2', + title: 'Implémentation du système de thèmes', + description: 'Ajout de 10 nouveaux thèmes avec CSS variables', + impact: 'medium', + completedAt: new Date(Date.now() - 86400000), + updatedAt: new Date(Date.now() - 86400000), + tags: ['themes', 'css'], + todosCount: 3 + } + ]; + + const sampleChallenges: ChallengeData[] = [ + { + id: '1', + title: 'Migration vers Next.js 15', + description: 'Mise à jour majeure avec nouvelles fonctionnalités', + priority: 'high', + deadline: new Date(Date.now() + 7 * 86400000), + tags: ['migration', 'nextjs'], + todosCount: 12, + blockers: ['Tests à mettre à jour'] + }, + { + id: '2', + title: 'Optimisation des performances', + description: 'Réduction du temps de chargement', + priority: 'medium', + deadline: new Date(Date.now() + 14 * 86400000), + tags: ['performance', 'optimization'], + todosCount: 5 + } + ]; + + return ( +
+

+ Cards +

+ +
+ {/* Basic Cards */} +
+

Basic Cards

+
+ + + Basic Card + + +

+ This is a basic card component with header and content. +

+ + + + +
+

Styled Card

+

+ A styled card with custom styling and hover effects. +

+
+ +
+
+ + {/* Stat Cards */} +
+

Stat Cards

+
+ + + + +
+
+ + {/* Action Cards */} +
+

Action Cards

+
+ + +
+
+ + {/* Task Cards */} +
+

Task Cards

+
+ + +
+
+ + {/* Achievement Cards */} +
+

Achievement Cards

+
+ {sampleAchievements.map((achievement, index) => ( + + ))} +
+
+ + {/* Challenge Cards */} +
+

Challenge Cards

+
+ {sampleChallenges.map((challenge, index) => ( + + ))} +
+
+ + {/* Metric Cards */} +
+

Metric Cards

+
+ + + + +
+
+ {/* Skeleton Cards */} +
+

Skeleton Cards

+
+ + + +
+
+
+
+ ); +} diff --git a/src/components/ui-showcase/sections/DataDisplaySection.tsx b/src/components/ui-showcase/sections/DataDisplaySection.tsx new file mode 100644 index 0000000..a9168d4 --- /dev/null +++ b/src/components/ui-showcase/sections/DataDisplaySection.tsx @@ -0,0 +1,291 @@ +'use client'; + +import { ControlPanel, ControlSection, ControlGroup } from '@/components/ui/ControlPanel'; +import { FilterChip } from '@/components/ui/FilterChip'; +import { FilterSummary } from '@/components/ui/FilterSummary'; +import { ColumnHeader } from '@/components/ui/ColumnHeader'; +import { MetricsGrid } from '@/components/ui/MetricsGrid'; +import { TagDisplay } from '@/components/ui/TagDisplay'; +import { CollapsibleSection, CollapsibleItem } from '@/components/ui/CollapsibleSection'; + +export function DataDisplaySection() { + const sampleTags = [ + { id: '1', name: 'refactoring', color: '#3b82f6', usage: 5 }, + { id: '2', name: 'ui', color: '#10b981', usage: 8 }, + { id: '3', name: 'themes', color: '#8b5cf6', usage: 3 }, + { id: '4', name: 'css', color: '#f59e0b', usage: 4 }, + { id: '5', name: 'migration', color: '#ef4444', usage: 2 }, + { id: '6', name: 'nextjs', color: '#06b6d4', usage: 3 }, + { id: '7', name: 'performance', color: '#84cc16', usage: 6 }, + { id: '8', name: 'optimization', color: '#f97316', usage: 2 } + ]; + + const collapsibleItems: CollapsibleItem[] = [ + { + id: '1', + title: 'Tâche en attente', + subtitle: '15 Jan 2024', + metadata: 'Il y a 2 jours', + isChecked: false, + icon: '📋', + actions: [ + { label: 'Déplacer', icon: '📅', onClick: () => console.log('Move'), variant: 'primary' }, + { label: 'Supprimer', icon: '🗑️', onClick: () => console.log('Delete'), variant: 'destructive' } + ] + }, + { + id: '2', + title: 'Réunion importante', + subtitle: '16 Jan 2024', + metadata: 'Dans 1 jour', + isChecked: true, + icon: '👥', + actions: [ + { label: 'Modifier', icon: '✏️', onClick: () => console.log('Edit'), variant: 'secondary' }, + { label: 'Dupliquer', icon: '📋', onClick: () => console.log('Duplicate'), variant: 'secondary' } + ] + } + ]; + + return ( +
+

+ Data Display & Layout +

+ +
+ {/* Control Panel */} +
+

Control Panel

+ + + +
+ +
+ Open + In Progress + Done +
+
+ + +
+ +
+ High + Medium + Low +
+
+ + + + +
+ + +
+ + + +
+ + {/* Filter Summary */} +
+

Filter Summary

+ +
+ + {/* Column Headers */} +
+

Column Headers

+
+ + + +
+
+ + {/* Tag Display */} +
+

Tag Display

+ + {/* Avec couleurs */} +
+

Avec couleurs et dots

+ +
+ + {/* Sans couleurs */} +
+

Sans couleurs

+ +
+ + {/* Différentes tailles */} +
+

Tailles différentes

+
+ + + +
+
+ + {/* Avec limite */} +
+

Avec limite (max 2)

+ +
+ + {/* Cliquable */} +
+

Cliquable

+ console.log('Clicked tag:', tag)} + /> +
+
+ + {/* Collapsible Section */} +
+

Collapsible Section

+ +
+ + {/* Metrics Grid */} +
+

Metrics Grid

+ + {/* Différentes couleurs */} +
+

Avec couleurs

+ +
+ + {/* Avec icônes et subtitles */} +
+

Avec icônes et subtitles

+ +
+ + {/* Différentes colonnes */} +
+

2 colonnes

+ +
+ +
+

3 colonnes

+ +
+ + {/* Sans couleurs */} +
+

Sans couleurs (default)

+ +
+
+ + {/* Skeleton Grid */} +
+

Skeleton Grid

+
+
+
+
+
+
+
+
+
+
+
+ ); +} diff --git a/src/components/ui-showcase/sections/FeedbackSection.tsx b/src/components/ui-showcase/sections/FeedbackSection.tsx new file mode 100644 index 0000000..5e60da3 --- /dev/null +++ b/src/components/ui-showcase/sections/FeedbackSection.tsx @@ -0,0 +1,187 @@ +'use client'; + +import { Alert as ShadcnAlert, AlertTitle, AlertDescription } from '@/components/ui/Alert'; +import { AlertBanner, AlertItem } from '@/components/ui/AlertBanner'; +import { LoadingSpinner } from '@/components/ui/LoadingSpinner'; +import { ProgressBar } from '@/components/ui/ProgressBar'; +import { EmptyState } from '@/components/ui/EmptyState'; +import { DropZone } from '@/components/ui/DropZone'; + +export function FeedbackSection() { + const alertItems: AlertItem[] = [ + { id: '1', title: 'Tâche critique', icon: '🔴', urgency: 'critical', metadata: 'Dans 1 jour' }, + { id: '2', title: 'Réunion urgente', icon: '🟠', urgency: 'high', metadata: 'Dans 2 jours' }, + { id: '3', title: 'Rappel', icon: '🟡', urgency: 'medium', metadata: 'Dans 5 jours' } + ]; + + return ( +
+

+ Feedback & States +

+ +
+ {/* Alerts */} +
+

Alerts

+
+ + Information + + This is an informational alert with some important details. + + + + + Success + + Your action was completed successfully. + + + + + Warning + + Please review this information before proceeding. + + + + + Info + + Additional information about this process. + + + + + Error + + Something went wrong. Please try again. + + +
+
+ + {/* Alert Banner */} +
+

Alert Banner

+ console.log('Dismiss alert:', id)} + onAction={(id, action) => console.log('Alert action:', id, action)} + /> +
+ + {/* Loading States */} +
+

Loading States

+
+
+

Tailles différentes

+
+ + + + Loading... +
+
+ +
+

Avec texte

+
+ + + +
+
+
+
+ + {/* Progress Bars */} +
+

Progress Bars

+
+
+

Couleurs différentes

+
+ + + + +
+
+
+

Avec et sans pourcentage

+
+ + +
+
+
+

Sans label

+ +
+
+
+ + {/* Empty States */} +
+

Empty States

+
+ + +
+
+ + {/* Drop Zone */} +
+

Drop Zone

+ +
+
📁
+

Drop files here

+

+ Or click to browse files +

+
+ +
+
+
+ ); +} diff --git a/src/components/ui-showcase/sections/FormsSection.tsx b/src/components/ui-showcase/sections/FormsSection.tsx new file mode 100644 index 0000000..4573d4c --- /dev/null +++ b/src/components/ui-showcase/sections/FormsSection.tsx @@ -0,0 +1,155 @@ +'use client'; + +import { useState } from 'react'; +import { Input } from '@/components/ui/Input'; +import { SearchInput } from '@/components/ui/SearchInput'; +import { TagInput } from '@/components/ui/TagInput'; +import { DateTimeInput } from '@/components/ui/DateTimeInput'; +import { FormField } from '@/components/ui/FormField'; +import { PrioritySelector } from '@/components/ui/PrioritySelector'; +import { DailyAddForm } from '@/components/ui/DailyAddForm'; +import { CheckboxItem, CheckboxItemData } from '@/components/ui/CheckboxItem'; + +export function FormsSection() { + const [inputValue, setInputValue] = useState(''); + const [selectedDate, setSelectedDate] = useState(new Date()); + const [checkboxItems, setCheckboxItems] = useState([ + { id: '1', text: 'Tâche complétée', isChecked: true, type: 'task' }, + { id: '2', text: 'Réunion importante', isChecked: false, type: 'meeting' }, + { id: '3', text: 'Tâche en cours', isChecked: false, type: 'task' } + ]); + + const handleAddCheckbox = (text: string) => { + const newItem: CheckboxItemData = { + id: Date.now().toString(), + text, + isChecked: false, + type: 'task' + }; + setCheckboxItems(prev => [...prev, newItem]); + }; + + const handleToggleCheckbox = (id: string) => { + setCheckboxItems(prev => + prev.map(item => + item.id === id ? { ...item, isChecked: !item.isChecked } : item + ) + ); + }; + + const handleUpdateCheckbox = (id: string, text: string) => { + setCheckboxItems(prev => + prev.map(item => + item.id === id ? { ...item, text } : item + ) + ); + }; + + return ( +
+

+ Forms & Inputs +

+ +
+ {/* Basic Inputs */} +
+

Basic Inputs

+
+
+ setInputValue(e.target.value)} + /> + + +
+
+ + +
+
+
+ + {/* Form Fields */} +
+

Form Fields

+
+ setInputValue(e)} + /> + {}} + /> +
+ + console.log('Priority:', priority)} + /> +
+
+ + date && setSelectedDate(date)} + /> +
+
+
+ + {/* Tag Input */} +
+

Tag Input

+ {}} + /> +
+ + {/* Checkbox Items */} +
+

Checkbox Items

+
+ {checkboxItems.map((item) => ( + handleToggleCheckbox(item.id)} + onUpdate={async (text) => handleUpdateCheckbox(item.id, text)} + onDelete={async () => { + setCheckboxItems(prev => prev.filter(i => i.id !== item.id)); + }} + /> + ))} +
+
+ + {/* Daily Add Form */} +
+

Daily Add Form

+ console.log('Add item')} + /> +
+
+
+ ); +} diff --git a/src/components/ui-showcase/sections/NavigationSection.tsx b/src/components/ui-showcase/sections/NavigationSection.tsx new file mode 100644 index 0000000..869eaab --- /dev/null +++ b/src/components/ui-showcase/sections/NavigationSection.tsx @@ -0,0 +1,157 @@ +'use client'; + +import { useState } from 'react'; +import { Header } from '@/components/ui/Header'; +import { Tabs, TabItem } from '@/components/ui/Tabs'; +import { Calendar } from '@/components/ui/Calendar'; +import { PeriodSelector } from '@/components/ui/PeriodSelector'; +import { ToggleButton } from '@/components/ui/ToggleButton'; +import { FontSizeToggle } from '@/components/ui/FontSizeToggle'; +import { Modal } from '@/components/ui/Modal'; +import { KeyboardShortcutsModal } from '@/components/ui/KeyboardShortcutsModal'; + +export function NavigationSection() { + const [activeTab, setActiveTab] = useState('tab1'); + const [selectedDate, setSelectedDate] = useState(new Date()); + const [selectedPeriod, setSelectedPeriod] = useState('7d'); + const [showModal, setShowModal] = useState(false); + const [showKeyboardModal, setShowKeyboardModal] = useState(false); + const [isToggled, setIsToggled] = useState(false); + + const tabItems: TabItem[] = [ + { id: 'tab1', label: 'Vue Executive', icon: '📝' }, + { id: 'tab2', label: 'Accomplissements', icon: '✅', count: 5 }, + { id: 'tab3', label: 'Enjeux', icon: '🎯', count: 3 }, + { id: 'tab4', label: 'Métriques', icon: '📊' } + ]; + + return ( + + ); +} diff --git a/src/components/ui-showcase/sections/index.ts b/src/components/ui-showcase/sections/index.ts new file mode 100644 index 0000000..9422526 --- /dev/null +++ b/src/components/ui-showcase/sections/index.ts @@ -0,0 +1,7 @@ +export { ButtonsSection } from './ButtonsSection'; +export { BadgesSection } from './BadgesSection'; +export { CardsSection } from './CardsSection'; +export { FormsSection } from './FormsSection'; +export { NavigationSection } from './NavigationSection'; +export { FeedbackSection } from './FeedbackSection'; +export { DataDisplaySection } from './DataDisplaySection';