julienfroidefond/towercontrol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance Kanban components with new UI elements

Browse Source 
- Added `ColumnHeader`, `EmptyState`, and `DropZone` components to improve the Kanban UI structure and user experience.
- Refactored `KanbanColumn` to utilize the new components, enhancing readability and maintainability.
- Updated `Card` component to support flexible props for shadow, border, and background, allowing for better customization across the application.
- Adjusted `SwimlanesBase` to incorporate the new `ColumnHeader` for consistent column representation.
This commit is contained in:
Julien Froidefond
2025-09-28 22:10:12 +02:00
parent 5a3d825b8e
commit 687d02ff3a
9 changed files with 499 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
src/components/ui-showcase/UIShowcaseClient.tsx
View File

@@ -8,7 +8,7 @@ import { Alert, 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 } from '@/components/ui';
import { StatCard, ProgressBar, ActionCard, TaskCard, MetricCard, ToggleButton, SearchInput, ControlPanel, ControlSection, ControlGroup, FilterSummary, FilterChip, ColumnHeader, EmptyState, DropZone } from '@/components/ui';
import { ThemeSelector } from '@/components/ThemeSelector';
export function UIShowcaseClient() {
@@ -244,6 +244,54 @@ export function UIShowcaseClient() {
</p>
</StyledCard>
</div>
{/* Nouveaux exemples avec props flexibles */}
<div className="space-y-4">
<h3 className="text-lg font-medium text-[var(--foreground)]">Card Flexible Props</h3>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div className="space-y-2">
<div className="text-xs font-mono text-[var(--muted-foreground)] bg-[var(--card)] px-2 py-1 rounded">
shadow="lg" border="primary"
</div>
<Card shadow="lg" border="primary">
<CardHeader padding="sm">
<CardTitle size="sm">Small Header</CardTitle>
</CardHeader>
<CardContent padding="sm">
<p className="text-sm text-[var(--muted-foreground)]">Small padding content.</p>
</CardContent>
</Card>
</div>
<div className="space-y-2">
<div className="text-xs font-mono text-[var(--muted-foreground)] bg-[var(--card)] px-2 py-1 rounded">
background="column" shadow="md"
</div>
<Card background="column" shadow="md">
<CardHeader separator={false}>
<CardTitle size="lg">No Separator</CardTitle>
</CardHeader>
<CardContent padding="lg">
<p className="text-sm text-[var(--muted-foreground)]">Large padding, no separator.</p>
</CardContent>
</Card>
</div>
<div className="space-y-2">
<div className="text-xs font-mono text-[var(--muted-foreground)] bg-[var(--card)] px-2 py-1 rounded">
border="none" shadow="none"
</div>
<Card border="none" shadow="none">
<CardHeader padding="md">
<CardTitle>Minimal Card</CardTitle>
</CardHeader>
<CardContent padding="none">
<p className="text-sm text-[var(--muted-foreground)]">No border, no shadow, no padding.</p>
</CardContent>
</Card>
</div>
</div>
</div>
</section>
{/* Interactive Demo */}
@@ -797,6 +845,62 @@ export function UIShowcaseClient() {
</div>
</div>
</div>
{/* Column Components */}
<div className="space-y-6">
<h3 className="text-lg font-medium text-[var(--foreground)]">Column 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">
ColumnHeader - Header de colonne Kanban
</div>
<div className="max-w-md">
<ColumnHeader
title="En cours"
icon="🔄"
count={5}
color="blue"
accentColor="text-blue-500"
borderColor="border-blue-300"
showAddButton={true}
onAddClick={() => console.log('Add task')}
/>
</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">
EmptyState - État vide avec icône
</div>
<div className="max-w-md">
<EmptyState
icon="📋"
title="NO DATA"
accentColor="text-gray-500"
borderColor="border-gray-300"
/>
</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">
DropZone - Zone de drop avec animation
</div>
<div className="max-w-md">
<DropZone isOver={false}>
<div className="p-4 border border-[var(--border)] rounded-lg bg-[var(--card)]">
<p className="text-sm text-[var(--muted-foreground)]">Zone de drop normale</p>
</div>
</DropZone>
<DropZone isOver={true}>
<div className="p-4 border border-[var(--border)] rounded-lg bg-[var(--card)]">
<p className="text-sm text-[var(--muted-foreground)]">Zone de drop active (isOver=true)</p>
</div>
</DropZone>
</div>
</div>
</div>
</div>
</section>
{/* Footer */}