39b2b642d2
Plan UI premium 6–8 semaines (design system, shell, Storybook, a11y): - Design system: DESIGN_TOKENS.md, APP_SHELL.md, FULL_LAYOUT_PAGE.md. Single source for layout/shell (index.css), shadows (design-system.css), durations/easing. - Tokens: shadow-cover-depth, shadow-gold-glow, shadow-fab-glow; layout max-height (max-h-layout-drawer, max-h-layout-panel, max-h-layout-list). All duration-200/300/500 replaced by --duration-fast/normal/slow. Arbitrary shadows replaced by token classes. - Shell & player: Sidebar, Header, GlobalPlayer, MiniPlayer, PlayerQueue, PlayerControls, AudioPlayer use tokens; focus-visible on Sidebar, PlayerQueue, DropdownMenuTrigger/Item, TabsTrigger. Typography: text-[10px]/[9px] → text-xs where applicable. - ESLint: no-restricted-syntax (warn) for w-/h-/rounded-/shadow-/text-/spacing arbitrary. - Scripts: report-arbitrary-values.mjs, capture/compare/generate visual; visual-complete.spec.ts. - Stories full layout: Dashboard, Playlists, Library, Settings, Profile in DashboardLayout.stories. - .cursorrules + README: DESIGN_TOKENS, APP_SHELL, visual commands, no arbitrary without justification. - apps/web/.gitignore: e2e test artifacts (test-results-visual, playwright-report-visual). Co-authored-by: Cursor <cursoragent@cursor.com>
104 lines
2.7 KiB
TypeScript
104 lines
2.7 KiB
TypeScript
import * as React from 'react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
/**
|
|
* TextareaProps - Propriétés du composant Textarea
|
|
*
|
|
* @interface TextareaProps
|
|
* @extends React.TextareaHTMLAttributes<HTMLTextAreaElement>
|
|
*/
|
|
export interface TextareaProps
|
|
extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
|
|
/**
|
|
* Label à afficher au-dessus du champ de texte
|
|
*
|
|
* @example
|
|
* ```tsx
|
|
* <Textarea label="Description" />
|
|
* ```
|
|
*/
|
|
label?: string;
|
|
|
|
/**
|
|
* Message d'erreur à afficher sous le champ
|
|
* Si fourni, la bordure devient rouge et le message s'affiche
|
|
*
|
|
* @example
|
|
* ```tsx
|
|
* <Textarea
|
|
* error={errors.description}
|
|
* label="Description"
|
|
* />
|
|
* ```
|
|
*/
|
|
error?: string;
|
|
}
|
|
|
|
/**
|
|
* Textarea - Composant de zone de texte avec design system Kodo
|
|
*
|
|
* Composant de zone de texte multiligne avec support pour les labels et les messages d'erreur.
|
|
* Utilise le design system Kodo avec des styles cohérents et une hauteur minimale de 100px.
|
|
*
|
|
* @example
|
|
* ```tsx
|
|
* // Textarea simple
|
|
* <Textarea placeholder="Entrez votre message..." />
|
|
*
|
|
* // Textarea avec label
|
|
* <Textarea label="Description" placeholder="Décrivez..." />
|
|
*
|
|
* // Textarea avec validation d'erreur
|
|
* <Textarea
|
|
* label="Commentaire"
|
|
* error={errors.comment}
|
|
* value={comment}
|
|
* onChange={(e) => setComment(e.target.value)}
|
|
* />
|
|
*
|
|
* // Textarea contrôlée
|
|
* <Textarea
|
|
* value={value}
|
|
* onChange={(e) => setValue(e.target.value)}
|
|
* rows={5}
|
|
* />
|
|
* ```
|
|
*
|
|
* @component
|
|
* @param {TextareaProps} props - Propriétés du composant
|
|
* @returns {JSX.Element} Élément textarea stylisé avec label et erreur optionnels
|
|
*/
|
|
|
|
const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
|
|
({ label, error, className, ...props }, ref) => {
|
|
return (
|
|
<div className="w-full">
|
|
{label && (
|
|
<label className="block text-sm font-medium text-kodo-content-dim mb-2 font-body">
|
|
{label}
|
|
</label>
|
|
)}
|
|
<textarea
|
|
ref={ref}
|
|
className={cn(
|
|
'w-full px-4 py-4',
|
|
'bg-kodo-graphite border',
|
|
error ? 'border-kodo-red' : 'border-kodo-steel',
|
|
'text-white placeholder-gray-500',
|
|
'font-body text-base',
|
|
'rounded-lg',
|
|
'focus:outline-none focus:border-kodo-steel focus:ring-1 focus:ring-kodo-steel',
|
|
'transition-all duration-[var(--duration-fast)]',
|
|
'min-h-[100px] resize-y',
|
|
className,
|
|
)}
|
|
{...props}
|
|
/>
|
|
{error && <p className="mt-1 text-xs text-kodo-red">{error}</p>}
|
|
</div>
|
|
);
|
|
},
|
|
);
|
|
Textarea.displayName = 'Textarea';
|
|
|
|
export { Textarea };
|