refactor: update theme management and enhance UI components
- Refactored theme imports in `preferences.ts` and `ThemeSelector.tsx` to use centralized `theme-config`. - Added new CSS variables for special cards in `globals.css` to improve theme consistency. - Enhanced `Header` and `TaskCard` components with theme dropdown functionality for better user experience. - Updated `ThemeProvider` to support cycling through dark themes, improving theme selection flexibility. - Cleaned up unused imports and streamlined component structures for better maintainability.
This commit is contained in:
Julien Froidefond
@@ -9,41 +9,21 @@ 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 } from '@/components/ui';
|
||||
import { ThemeSelector } from '@/components/ThemeSelector';
|
||||
import { Header } from '@/components/ui/Header';
|
||||
|
||||
export function UIShowcaseClient() {
|
||||
const [inputValue, setInputValue] = useState('');
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[var(--background)] p-8">
|
||||
<div className="max-w-6xl mx-auto space-y-16">
|
||||
{/* Header */}
|
||||
<div className="text-center space-y-6">
|
||||
<h1 className="text-4xl font-mono font-bold text-[var(--foreground)]">
|
||||
🎨 UI Components Showcase
|
||||
</h1>
|
||||
<p className="text-lg text-[var(--muted-foreground)]">
|
||||
Démonstration de tous les composants UI disponibles
|
||||
</p>
|
||||
</div>
|
||||
<div className="min-h-screen bg-[var(--background)]">
|
||||
{/* Header avec navigation et dropdown de thèmes */}
|
||||
<Header
|
||||
title="🎨 UI Showcase"
|
||||
subtitle="Démonstration de tous les composants UI disponibles"
|
||||
/>
|
||||
|
||||
<div className="max-w-6xl mx-auto p-8 space-y-16">
|
||||
|
||||
{/* Theme Selector */}
|
||||
<section className="space-y-8">
|
||||
<div className="text-center">
|
||||
<h2 className="text-2xl font-mono font-semibold text-[var(--foreground)] mb-6">
|
||||
🎨 Sélecteur de Thèmes
|
||||
</h2>
|
||||
<p className="text-[var(--muted-foreground)] mb-8">
|
||||
Changez de thème pour voir comment tous les composants s'adaptent
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="bg-[var(--card)]/30 border border-[var(--border)]/50 rounded-lg p-6 backdrop-blur-sm">
|
||||
<ThemeSelector />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Buttons Section */}
|
||||
<section className="space-y-8">
|
||||
@@ -530,43 +510,145 @@ export function UIShowcaseClient() {
|
||||
{/* Task Cards */}
|
||||
<div className="space-y-6">
|
||||
<h3 className="text-lg font-medium text-[var(--foreground)]">Task Cards</h3>
|
||||
<div className="space-y-3 max-w-2xl">
|
||||
<TaskCard
|
||||
title="Refactoriser le système de thèmes"
|
||||
description="Améliorer la gestion des thèmes avec CSS variables"
|
||||
status="En Cours"
|
||||
priority="Haute"
|
||||
tags={[
|
||||
<Badge key="tag1" variant="primary" className="text-xs">Frontend</Badge>,
|
||||
<Badge key="tag2" variant="success" className="text-xs">UI</Badge>
|
||||
]}
|
||||
metadata="Il y a 2h"
|
||||
actions={
|
||||
<button className="p-1 rounded hover:bg-[var(--muted)]/50 transition-colors">
|
||||
<svg className="w-3 h-3 text-[var(--primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
||||
</svg>
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
|
||||
<TaskCard
|
||||
title="Créer les composants UI réutilisables"
|
||||
description="Développer une bibliothèque de composants cohérente"
|
||||
status="Terminé"
|
||||
priority="Moyenne"
|
||||
tags={[
|
||||
<Badge key="tag1" variant="accent" className="text-xs">Design</Badge>
|
||||
]}
|
||||
metadata="Hier"
|
||||
actions={
|
||||
<button className="p-1 rounded hover:bg-[var(--muted)]/50 transition-colors">
|
||||
<svg className="w-3 h-3 text-[var(--primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
||||
</svg>
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
<div className="space-y-4 max-w-2xl">
|
||||
{/* Task Card Compacte */}
|
||||
<div className="space-y-2">
|
||||
<div className="text-xs font-mono text-[var(--muted-foreground)] bg-[var(--card)] px-2 py-1 rounded">
|
||||
variant="compact" - Vue compacte
|
||||
</div>
|
||||
<TaskCard
|
||||
variant="compact"
|
||||
title="🎨 Refactoriser le système de thèmes"
|
||||
description="Améliorer la gestion des thèmes avec CSS variables"
|
||||
status="in_progress"
|
||||
priority="high"
|
||||
tags={["Frontend", "UI"]}
|
||||
source="manual"
|
||||
fontSize="medium"
|
||||
availableTags={[
|
||||
{ id: "1", name: "Frontend", color: "#3b82f6" },
|
||||
{ id: "2", name: "UI", color: "#10b981" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Task Card Détaillée */}
|
||||
<div className="space-y-2">
|
||||
<div className="text-xs font-mono text-[var(--muted-foreground)] bg-[var(--card)] px-2 py-1 rounded">
|
||||
variant="detailed" - Vue détaillée
|
||||
</div>
|
||||
<TaskCard
|
||||
variant="detailed"
|
||||
title="🚀 Créer les composants UI réutilisables"
|
||||
description="Développer une bibliothèque de composants cohérente et maintenable"
|
||||
status="done"
|
||||
priority="medium"
|
||||
tags={["Design", "Components"]}
|
||||
source="manual"
|
||||
dueDate={new Date(Date.now() + 7 * 24 * 60 * 60 * 1000)}
|
||||
fontSize="medium"
|
||||
availableTags={[
|
||||
{ id: "1", name: "Design", color: "#f59e0b" },
|
||||
{ id: "2", name: "Components", color: "#8b5cf6" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Task Card Jira */}
|
||||
<div className="space-y-2">
|
||||
<div className="text-xs font-mono text-[var(--muted-foreground)] bg-[var(--card)] px-2 py-1 rounded">
|
||||
source="jira" - Tâche Jira avec styles spéciaux
|
||||
</div>
|
||||
<TaskCard
|
||||
variant="detailed"
|
||||
title="🐛 Corriger le bug de synchronisation"
|
||||
description="Résoudre le problème de synchronisation des données entre les services"
|
||||
status="todo"
|
||||
priority="urgent"
|
||||
tags={["Bug", "Backend"]}
|
||||
source="jira"
|
||||
jiraKey="PROJ-123"
|
||||
jiraProject="PROJ"
|
||||
jiraType="Bug"
|
||||
dueDate={new Date(Date.now() + 3 * 24 * 60 * 60 * 1000)}
|
||||
fontSize="medium"
|
||||
availableTags={[
|
||||
{ id: "1", name: "Bug", color: "#ef4444" },
|
||||
{ id: "2", name: "Backend", color: "#6b7280" }
|
||||
]}
|
||||
jiraConfig={{ baseUrl: "https://company.atlassian.net" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Task Card TFS */}
|
||||
<div className="space-y-2">
|
||||
<div className="text-xs font-mono text-[var(--muted-foreground)] bg-[var(--card)] px-2 py-1 rounded">
|
||||
source="tfs" - Tâche TFS avec styles spéciaux
|
||||
</div>
|
||||
<TaskCard
|
||||
variant="detailed"
|
||||
title="📦 Implémenter la nouvelle API"
|
||||
description="Développer l'API REST pour la gestion des utilisateurs"
|
||||
status="review"
|
||||
priority="high"
|
||||
tags={["API", "Backend"]}
|
||||
source="tfs"
|
||||
tfsPullRequestId={456}
|
||||
tfsProject="MyProject"
|
||||
tfsRepository="backend-api"
|
||||
fontSize="medium"
|
||||
availableTags={[
|
||||
{ id: "1", name: "API", color: "#06b6d4" },
|
||||
{ id: "2", name: "Backend", color: "#6b7280" }
|
||||
]}
|
||||
tfsConfig={{ organizationUrl: "https://dev.azure.com/company" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Task Card avec différents statuts */}
|
||||
<div className="space-y-2">
|
||||
<div className="text-xs font-mono text-[var(--muted-foreground)] bg-[var(--card)] px-2 py-1 rounded">
|
||||
Statuts spéciaux - freeze, archived, cancelled
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-3">
|
||||
<TaskCard
|
||||
variant="compact"
|
||||
title="❄️ Tâche gelée"
|
||||
status="freeze"
|
||||
priority="low"
|
||||
tags={["Maintenance"]}
|
||||
source="manual"
|
||||
fontSize="small"
|
||||
availableTags={[
|
||||
{ id: "1", name: "Maintenance", color: "#64748b" }
|
||||
]}
|
||||
/>
|
||||
<TaskCard
|
||||
variant="compact"
|
||||
title="📁 Tâche archivée"
|
||||
status="archived"
|
||||
priority="medium"
|
||||
tags={["Archive"]}
|
||||
source="manual"
|
||||
fontSize="small"
|
||||
availableTags={[
|
||||
{ id: "1", name: "Archive", color: "#6b7280" }
|
||||
]}
|
||||
/>
|
||||
<TaskCard
|
||||
variant="compact"
|
||||
title="❌ Tâche annulée"
|
||||
status="cancelled"
|
||||
priority="high"
|
||||
tags={["Cancelled"]}
|
||||
source="manual"
|
||||
fontSize="small"
|
||||
availableTags={[
|
||||
{ id: "1", name: "Cancelled", color: "#ef4444" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user