feat: add additional UI components to UIShowcaseClient
- Integrated new components including TagDisplay, TagInput, DateTimeInput, FormField, LoadingSpinner, PrioritySelector, StatusBadge, KeyboardShortcutsModal, and Modal for enhanced user interaction. - Organized components into sections for better structure and usability, improving overall UI showcase experience.
This commit is contained in:
Julien Froidefond
@@ -18,11 +18,23 @@ import { Header } from '@/components/ui/Header';
|
|||||||
import { TabItem } from '@/components/ui/Tabs';
|
import { TabItem } from '@/components/ui/Tabs';
|
||||||
import { AchievementData } from '@/components/ui/AchievementCard';
|
import { AchievementData } from '@/components/ui/AchievementCard';
|
||||||
import { ChallengeData } from '@/components/ui/ChallengeCard';
|
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';
|
||||||
|
|
||||||
export function UIShowcaseClient() {
|
export function UIShowcaseClient() {
|
||||||
const [inputValue, setInputValue] = useState('');
|
const [inputValue, setInputValue] = useState('');
|
||||||
const [selectedDate, setSelectedDate] = useState(new Date());
|
const [selectedDate, setSelectedDate] = useState(new Date());
|
||||||
const [selectedPeriod, setSelectedPeriod] = useState('7d');
|
const [selectedPeriod, setSelectedPeriod] = useState('7d');
|
||||||
|
const [showModal, setShowModal] = useState(false);
|
||||||
|
const [showKeyboardModal, setShowKeyboardModal] = useState(false);
|
||||||
const [checkboxItems, setCheckboxItems] = useState<CheckboxItemData[]>([
|
const [checkboxItems, setCheckboxItems] = useState<CheckboxItemData[]>([
|
||||||
{ id: '1', text: 'Tâche complétée', isChecked: true, type: 'task' },
|
{ id: '1', text: 'Tâche complétée', isChecked: true, type: 'task' },
|
||||||
{ id: '2', text: 'Réunion importante', isChecked: false, type: 'meeting' },
|
{ id: '2', text: 'Réunion importante', isChecked: false, type: 'meeting' },
|
||||||
@@ -1418,6 +1430,174 @@ export function UIShowcaseClient() {
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
{/* Additional UI Components Section */}
|
||||||
|
<section className="space-y-8">
|
||||||
|
<h2 className="text-2xl font-mono font-semibold text-[var(--foreground)] border-b border-[var(--border)] pb-3">
|
||||||
|
Additional UI Components
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||||
|
{/* TagDisplay & TagInput */}
|
||||||
|
<div className="space-y-6">
|
||||||
|
<h3 className="text-lg font-medium text-[var(--foreground)]">Tag Components</h3>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="text-xs font-mono text-[var(--muted-foreground)] bg-[var(--card)] px-2 py-1 rounded">
|
||||||
|
TagDisplay - Affichage de tags
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<TagDisplay
|
||||||
|
tags={['Frontend', 'UI', 'React']}
|
||||||
|
availableTags={[
|
||||||
|
{ id: '1', name: 'Frontend', color: '#3b82f6' },
|
||||||
|
{ id: '2', name: 'UI', color: '#10b981' },
|
||||||
|
{ id: '3', name: 'React', color: '#8b5cf6' }
|
||||||
|
]}
|
||||||
|
maxTags={2}
|
||||||
|
showColors={true}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="text-xs font-mono text-[var(--muted-foreground)] bg-[var(--card)] px-2 py-1 rounded">
|
||||||
|
TagInput - Input avec suggestions de tags
|
||||||
|
</div>
|
||||||
|
<TagInput
|
||||||
|
tags={['refactoring', 'ui']}
|
||||||
|
onChange={(tags: string[]) => console.log('Tags changed:', tags)}
|
||||||
|
placeholder="Ajouter des tags..."
|
||||||
|
maxTags={5}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Form Components */}
|
||||||
|
<div className="space-y-6">
|
||||||
|
<h3 className="text-lg font-medium text-[var(--foreground)]">Form Components</h3>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="text-xs font-mono text-[var(--muted-foreground)] bg-[var(--card)] px-2 py-1 rounded">
|
||||||
|
DateTimeInput - Input de date et heure
|
||||||
|
</div>
|
||||||
|
<DateTimeInput
|
||||||
|
value={selectedDate}
|
||||||
|
onChange={(date) => date && setSelectedDate(date)}
|
||||||
|
placeholder="Sélectionner une date"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="text-xs font-mono text-[var(--muted-foreground)] bg-[var(--card)] px-2 py-1 rounded">
|
||||||
|
FormField - Champ de formulaire avec label
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="block text-sm font-medium text-[var(--foreground)]">
|
||||||
|
Nom du projet
|
||||||
|
</label>
|
||||||
|
<FormField
|
||||||
|
placeholder="Entrez le nom du projet"
|
||||||
|
value={inputValue}
|
||||||
|
onChange={setInputValue}
|
||||||
|
/>
|
||||||
|
<p className="text-xs text-[var(--destructive)]">Ce champ est requis</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Status & Priority Components */}
|
||||||
|
<div className="space-y-6">
|
||||||
|
<h3 className="text-lg font-medium text-[var(--foreground)]">Status & Priority</h3>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="text-xs font-mono text-[var(--muted-foreground)] bg-[var(--card)] px-2 py-1 rounded">
|
||||||
|
StatusBadge - Badge de statut
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
<StatusBadge status="todo" />
|
||||||
|
<StatusBadge status="in_progress" />
|
||||||
|
<StatusBadge status="done" />
|
||||||
|
<StatusBadge status="done" />
|
||||||
|
<StatusBadge status="freeze" />
|
||||||
|
<StatusBadge status="archived" />
|
||||||
|
<StatusBadge status="cancelled" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="text-xs font-mono text-[var(--muted-foreground)] bg-[var(--card)] px-2 py-1 rounded">
|
||||||
|
PrioritySelector - Sélecteur de priorité
|
||||||
|
</div>
|
||||||
|
<PrioritySelector
|
||||||
|
value="high"
|
||||||
|
onChange={(priority) => console.log('Priority changed:', priority)}
|
||||||
|
title="Sélectionner une priorité"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Loading & Modal Components */}
|
||||||
|
<div className="space-y-6">
|
||||||
|
<h3 className="text-lg font-medium text-[var(--foreground)]">Loading & Modal</h3>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="text-xs font-mono text-[var(--muted-foreground)] bg-[var(--card)] px-2 py-1 rounded">
|
||||||
|
LoadingSpinner - Indicateur de chargement
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-4 items-center">
|
||||||
|
<LoadingSpinner size="sm" />
|
||||||
|
<LoadingSpinner size="md" />
|
||||||
|
<LoadingSpinner size="lg" />
|
||||||
|
<LoadingSpinner size="sm" text="Chargement..." />
|
||||||
|
<LoadingSpinner size="sm" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="text-xs font-mono text-[var(--muted-foreground)] bg-[var(--card)] px-2 py-1 rounded">
|
||||||
|
Modal - Fenêtre modale
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Button
|
||||||
|
onClick={() => setShowModal(true)}
|
||||||
|
variant="primary"
|
||||||
|
>
|
||||||
|
Ouvrir Modal
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
onClick={() => setShowKeyboardModal(true)}
|
||||||
|
variant="secondary"
|
||||||
|
>
|
||||||
|
Raccourcis Clavier
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Utility Components */}
|
||||||
|
<div className="space-y-6 lg:col-span-2">
|
||||||
|
<h3 className="text-lg font-medium text-[var(--foreground)]">Utility Components</h3>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="text-xs font-mono text-[var(--muted-foreground)] bg-[var(--card)] px-2 py-1 rounded">
|
||||||
|
FontSizeToggle - Toggle de taille de police
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<FontSizeToggle />
|
||||||
|
<span className="text-sm text-[var(--muted-foreground)]">
|
||||||
|
Utilisez ce toggle pour ajuster la taille de police
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
{/* Footer */}
|
{/* Footer */}
|
||||||
<div className="text-center pt-8 border-t border-[var(--border)]">
|
<div className="text-center pt-8 border-t border-[var(--border)]">
|
||||||
<p className="text-[var(--muted-foreground)]">
|
<p className="text-[var(--muted-foreground)]">
|
||||||
@@ -1425,6 +1605,39 @@ export function UIShowcaseClient() {
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Modals */}
|
||||||
|
<Modal
|
||||||
|
isOpen={showModal}
|
||||||
|
onClose={() => setShowModal(false)}
|
||||||
|
title="Exemple de Modal"
|
||||||
|
size="md"
|
||||||
|
>
|
||||||
|
<div className="p-4">
|
||||||
|
<p className="text-[var(--foreground)] mb-4">
|
||||||
|
Ceci est un exemple de modal avec du contenu personnalisé.
|
||||||
|
</p>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Button variant="primary" onClick={() => setShowModal(false)}>
|
||||||
|
Fermer
|
||||||
|
</Button>
|
||||||
|
<Button variant="secondary" onClick={() => setShowModal(false)}>
|
||||||
|
Annuler
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
|
||||||
|
<KeyboardShortcutsModal
|
||||||
|
isOpen={showKeyboardModal}
|
||||||
|
onClose={() => 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' }
|
||||||
|
]}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user