From 43c141d3cd9c64f205c829cbb6cfa668ef6fbbbc Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Tue, 30 Sep 2025 21:23:30 +0200
Subject: [PATCH] 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.

---
 .../ui-showcase/UIShowcaseClient.tsx          | 213 ++++++++++++++++++
 1 file changed, 213 insertions(+)

diff --git a/src/components/ui-showcase/UIShowcaseClient.tsx b/src/components/ui-showcase/UIShowcaseClient.tsx
index 8c32d0d..71cd30d 100644
--- a/src/components/ui-showcase/UIShowcaseClient.tsx
+++ b/src/components/ui-showcase/UIShowcaseClient.tsx
@@ -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>
   );
 }