From 94145c1ffd5aa733b0458bd3a0fd402b766539f7 Mon Sep 17 00:00:00 2001 From: Julien Froidefond Date: Sat, 4 Oct 2025 10:38:37 +0200 Subject: [PATCH] feat: integrate lucide-react icons in DailyAddForm and DailySection - Replaced text icons with lucide-react icons for 'task' and 'meeting' options in DailyAddForm and DailySection for improved visual consistency. - Updated DailyAddForm to use ToggleButton for better UI interaction and added default icons for options. - Enhanced FormsSection to reflect these changes in the DailyAddForm usage. --- TODO.md | 2 +- src/components/daily/DailySection.tsx | 5 +- .../ui-showcase/sections/FormsSection.tsx | 8 +- src/components/ui/DailyAddForm.tsx | 76 +++++++++---------- 4 files changed, 49 insertions(+), 42 deletions(-) diff --git a/TODO.md b/TODO.md index d0a00ed..f574fb3 100644 --- a/TODO.md +++ b/TODO.md @@ -16,7 +16,7 @@ - [x] **Tâches récentes** - Revoir l'affichage et la logique des tâches récentes - [x] **Header dépasse en tablet** - Corriger le débordement du header sur tablette - [x] **Icônes agenda et filtres** - Améliorer les icônes de l'agenda et des filtres dans desktop controls (utiliser une lib) -- [ ] **Réunion/tâche design** - Revoir le design des bouton dans dailySectrion : les toggles avoir un compposant ui +- [x] **Réunion/tâche design** - Revoir le design des bouton dans dailySectrion : les toggles avoir un compposant ui - [ ] **Légende calendrier et padding** - Corriger l'espacement et la légende du calendrier dans daily - [ ] **EditModal task couleur calendrier** - Problème de couleur en ajout de taches dans tous les icones calendriers; colmler au thème - [ ] **Weekly deux boutons actualiser** - Corriger la duplication des boutons d'actualisation diff --git a/src/components/daily/DailySection.tsx b/src/components/daily/DailySection.tsx index d035ca5..ff4b623 100644 --- a/src/components/daily/DailySection.tsx +++ b/src/components/daily/DailySection.tsx @@ -6,6 +6,7 @@ import { Button } from '@/components/ui/Button'; import { DailyCheckboxSortable } from './DailyCheckboxSortable'; import { CheckboxItem, CheckboxItemData } from '@/components/ui/CheckboxItem'; import { DailyAddForm, AddFormOption } from '@/components/ui/DailyAddForm'; +import { CheckSquare2, Calendar } from 'lucide-react'; import { DndContext, closestCenter, DragEndEvent, DragOverlay, DragStartEvent } from '@dnd-kit/core'; import { SortableContext, verticalListSortingStrategy, arrayMove } from '@dnd-kit/sortable'; import { useState } from 'react'; @@ -82,8 +83,8 @@ export function DailySection({ // Options pour le formulaire d'ajout const addFormOptions: AddFormOption[] = [ - { value: 'task', label: 'Tâche', icon: '✅', color: 'green' }, - { value: 'meeting', label: 'Réunion', icon: '🗓️', color: 'blue' } + { value: 'meeting', label: 'Réunion', icon: , color: 'blue' }, + { value: 'task', label: 'Tâche', icon: , color: 'green' } ]; // Convertir les checkboxes en format CheckboxItemData diff --git a/src/components/ui-showcase/sections/FormsSection.tsx b/src/components/ui-showcase/sections/FormsSection.tsx index 80b0bfc..cc08b33 100644 --- a/src/components/ui-showcase/sections/FormsSection.tsx +++ b/src/components/ui-showcase/sections/FormsSection.tsx @@ -1,6 +1,7 @@ 'use client'; import { useState } from 'react'; +import { CheckSquare2, Calendar, Circle } from 'lucide-react'; import { Input } from '@/components/ui/Input'; import { SearchInput } from '@/components/ui/SearchInput'; import { TagInput } from '@/components/ui/TagInput'; @@ -137,7 +138,12 @@ export function FormsSection() {

Daily Add Form

console.log('Add item')} + onAdd={async (text, option) => console.log('Add item:', text, option)} + options={[ + { value: 'task', label: 'Task', icon: , color: 'green' }, + { value: 'meeting', label: 'Meeting', icon: , color: 'blue' }, + { value: 'event', label: 'Event', icon: , color: 'gray' } + ]} /> diff --git a/src/components/ui/DailyAddForm.tsx b/src/components/ui/DailyAddForm.tsx index 37b42aa..1c7a7b9 100644 --- a/src/components/ui/DailyAddForm.tsx +++ b/src/components/ui/DailyAddForm.tsx @@ -1,13 +1,15 @@ 'use client'; import { useState, useRef } from 'react'; +import { CheckSquare2, Calendar, Circle, PlayCircle } from 'lucide-react'; import { Button } from '@/components/ui/Button'; import { Input } from '@/components/ui/Input'; +import { ToggleButton } from '@/components/ui/ToggleButton'; export interface AddFormOption { value: string; label: string; - icon?: string; + icon?: React.ReactNode; color?: string; } @@ -69,42 +71,41 @@ export function DailyAddForm({ return placeholder; }; - const getOptionColor = (option: AddFormOption) => { - if (option.color) return option.color; + const getDefaultIcon = (value: string): React.ReactNode => { + switch (value) { + case 'task': + return ; + case 'meeting': + return ; + case 'event': + return ; + default: + return ; + } + }; + + const getToggleVariant = (option: AddFormOption): 'primary' | 'accent' | 'secondary' => { + if (option.color) { + switch (option.color.toLowerCase()) { + case 'green': + case 'blue': + return 'primary'; + case 'yellow': + case 'orange': + return 'accent'; + default: + return 'secondary'; + } + } // Couleurs par défaut selon le type switch (option.value) { case 'task': - return 'green'; + return 'primary'; case 'meeting': - return 'blue'; + return 'primary'; default: - return 'gray'; - } - }; - - const getOptionClasses = (option: AddFormOption) => { - const color = getOptionColor(option); - const isSelected = selectedOption === option.value; - - if (isSelected) { - switch (color) { - case 'green': - return 'border-l-green-500 bg-green-500/30 text-white font-medium'; - case 'blue': - return 'border-l-blue-500 bg-blue-500/30 text-white font-medium'; - default: - return 'border-l-gray-500 bg-gray-500/30 text-white font-medium'; - } - } else { - switch (color) { - case 'green': - return 'border-l-green-300 hover:border-l-green-400 opacity-70 hover:opacity-90'; - case 'blue': - return 'border-l-blue-300 hover:border-l-blue-400 opacity-70 hover:opacity-90'; - default: - return 'border-l-gray-300 hover:border-l-gray-400 opacity-70 hover:opacity-90'; - } + return 'secondary'; } }; @@ -114,18 +115,17 @@ export function DailyAddForm({ {options.length > 0 && (
{options.map((option) => ( - + {option.label} + ))}
)}