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 { 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';
|
||||
|
||||
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<CheckboxItemData[]>([
|
||||
{ id: '1', text: 'Tâche complétée', isChecked: true, type: 'task' },
|
||||
{ id: '2', text: 'Réunion importante', isChecked: false, type: 'meeting' },
|
||||
@@ -1418,6 +1430,174 @@ export function UIShowcaseClient() {
|
||||
</div>
|
||||
</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 */}
|
||||
<div className="text-center pt-8 border-t border-[var(--border)]">
|
||||
<p className="text-[var(--muted-foreground)]">
|
||||
@@ -1425,6 +1605,39 @@ export function UIShowcaseClient() {
|
||||
</p>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user