feat/fix(frontend): update shadcn compnents, fix debug drawer layout and font sizes
This commit is contained in:
Xin Wang
@@ -1,63 +1,37 @@
|
||||
|
||||
import React from 'react';
|
||||
import { X } from 'lucide-react';
|
||||
|
||||
// Button
|
||||
// Shadcn UI Imports
|
||||
import { Button as ShadcnButton } from './ui/button';
|
||||
import { Input as ShadcnInput } from './ui/input';
|
||||
import { Switch as ShadcnSwitch } from './ui/switch';
|
||||
import { Card as ShadcnCard } from './ui/card';
|
||||
import { Badge as ShadcnBadge } from './ui/badge';
|
||||
import { TableHeader as ShadcnTableHeader, TableRow as ShadcnTableRow, TableHead as ShadcnTableHead, TableCell as ShadcnTableCell } from './ui/table';
|
||||
import { Sheet, SheetContent, SheetHeader, SheetTitle } from './ui/sheet';
|
||||
import { Dialog as ShadcnDialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from './ui/dialog';
|
||||
|
||||
// Button Wrapper to match old API
|
||||
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive';
|
||||
size?: 'sm' | 'md' | 'lg' | 'icon';
|
||||
}
|
||||
export const Button: React.FC<ButtonProps> = ({ variant = 'primary', size = 'md', className, ...props }) => {
|
||||
const vMap: any = { primary: 'default', secondary: 'secondary', outline: 'outline', ghost: 'ghost', destructive: 'destructive' };
|
||||
const sMap: any = { sm: 'sm', md: 'default', lg: 'lg', icon: 'icon' };
|
||||
return <ShadcnButton variant={vMap[variant] || 'default'} size={sMap[size] || 'default'} className={className} {...props} />;
|
||||
}
|
||||
|
||||
export const Button: React.FC<ButtonProps> = ({
|
||||
className = '',
|
||||
variant = 'primary',
|
||||
size = 'md',
|
||||
children,
|
||||
...props
|
||||
}) => {
|
||||
const baseStyles = "inline-flex items-center justify-center rounded-md text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 active:scale-95";
|
||||
|
||||
const variants = {
|
||||
// Primary: Glow effect
|
||||
primary: "bg-primary text-primary-foreground shadow-[0_0_10px_rgba(6,182,212,0.5)] hover:bg-primary/90 hover:shadow-[0_0_15px_rgba(6,182,212,0.6)]",
|
||||
secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
|
||||
outline: "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground hover:border-primary/50",
|
||||
ghost: "hover:bg-accent hover:text-accent-foreground",
|
||||
destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
|
||||
};
|
||||
|
||||
const sizes = {
|
||||
sm: "h-8 px-3 text-xs",
|
||||
md: "h-9 px-4 py-2",
|
||||
lg: "h-10 px-8",
|
||||
icon: "h-9 w-9",
|
||||
};
|
||||
|
||||
return (
|
||||
<button className={`${baseStyles} ${variants[variant]} ${sizes[size]} ${className}`} {...props}>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
// Input - Removed border, added subtle background
|
||||
interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
|
||||
|
||||
export const Input: React.FC<InputProps> = ({ className = '', ...props }) => {
|
||||
return (
|
||||
<input
|
||||
className={`flex h-9 w-full rounded-md bg-white/5 px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50 focus-visible:bg-white/10 disabled:cursor-not-allowed disabled:opacity-50 ${className}`}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {}
|
||||
// Input and Switch match seamlessly
|
||||
export const Input = ShadcnInput;
|
||||
export const Switch = ShadcnSwitch;
|
||||
|
||||
// Native Select Wrapper to avoid breaking consumers expecting <select><option></select>
|
||||
interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> { }
|
||||
export const Select: React.FC<SelectProps> = ({ className = '', children, ...props }) => {
|
||||
return (
|
||||
<select
|
||||
className={`flex h-9 w-full rounded-md border-0 bg-white/5 px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50 [&>option]:bg-card text-foreground disabled:cursor-not-allowed disabled:opacity-50 ${className}`}
|
||||
className={`flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm [&>option]:bg-card [&>option]:text-foreground ${className}`}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
@@ -65,143 +39,40 @@ export const Select: React.FC<SelectProps> = ({ className = '', children, ...pro
|
||||
);
|
||||
};
|
||||
|
||||
interface SwitchProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
|
||||
checked: boolean;
|
||||
onCheckedChange: (checked: boolean) => void;
|
||||
}
|
||||
|
||||
export const Switch: React.FC<SwitchProps> = ({
|
||||
checked,
|
||||
onCheckedChange,
|
||||
className = '',
|
||||
disabled,
|
||||
...props
|
||||
}) => {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
role="switch"
|
||||
aria-checked={checked}
|
||||
disabled={disabled}
|
||||
onClick={() => {
|
||||
if (!disabled) onCheckedChange(!checked);
|
||||
}}
|
||||
className={`relative h-6 w-11 rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60 focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 ${checked ? 'bg-emerald-500/80' : 'bg-white/20'} ${className}`}
|
||||
{...props}
|
||||
>
|
||||
<span
|
||||
className={`absolute left-0.5 top-1/2 h-5 w-5 -translate-y-1/2 rounded-full bg-white shadow transition-transform ${checked ? 'translate-x-5' : 'translate-x-0'}`}
|
||||
/>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
// Card - Glassmorphism style, very subtle border
|
||||
interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
// Card Wrapper
|
||||
interface CardProps extends React.HTMLAttributes<HTMLDivElement> { children: React.ReactNode; }
|
||||
export const Card: React.FC<CardProps> = ({ children, className = '', ...props }) => (
|
||||
<div className={`rounded-xl border border-white/5 bg-card/40 backdrop-blur-md text-card-foreground shadow-sm ${className}`} {...props}>
|
||||
<ShadcnCard className={`bg-card/40 backdrop-blur-md ${className}`} {...props}>
|
||||
{children}
|
||||
</div>
|
||||
</ShadcnCard>
|
||||
);
|
||||
|
||||
// Badge
|
||||
// Badge Wrapper for old variants
|
||||
interface BadgeProps {
|
||||
children: React.ReactNode;
|
||||
variant?: 'default' | 'success' | 'warning' | 'outline';
|
||||
className?: string;
|
||||
}
|
||||
export const Badge: React.FC<BadgeProps> = ({ children, variant = 'default', className = '' }) => {
|
||||
const styles = {
|
||||
default: "border-transparent bg-primary/20 text-primary hover:bg-primary/30 border border-primary/20",
|
||||
success: "border-transparent bg-green-500/20 text-green-400 border border-green-500/20",
|
||||
warning: "border-transparent bg-yellow-500/20 text-yellow-400 border border-yellow-500/20",
|
||||
outline: "text-foreground border border-white/10 hover:bg-accent hover:text-accent-foreground",
|
||||
};
|
||||
return (
|
||||
<div className={`inline-flex items-center rounded-md px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 ${styles[variant]} ${className}`}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
let cName = className;
|
||||
let shadcnVariant: any = variant === 'outline' ? 'outline' : 'default';
|
||||
|
||||
if (variant === 'success') {
|
||||
cName += ' border-transparent bg-emerald-500/20 text-emerald-400 hover:bg-emerald-500/30';
|
||||
} else if (variant === 'warning') {
|
||||
cName += ' border-transparent bg-yellow-500/20 text-yellow-400 hover:bg-yellow-500/30';
|
||||
}
|
||||
|
||||
return <ShadcnBadge variant={shadcnVariant} className={cName}>{children}</ShadcnBadge>;
|
||||
};
|
||||
|
||||
// Table - Subtle borders
|
||||
export const TableHeader: React.FC<{ children: React.ReactNode }> = ({ children }) => <thead className="[&_tr]:border-b [&_tr]:border-white/5">{children}</thead>;
|
||||
// Table Exports
|
||||
export const TableHeader = ShadcnTableHeader;
|
||||
export const TableRow = ShadcnTableRow;
|
||||
export const TableHead = ShadcnTableHead;
|
||||
export const TableCell = ShadcnTableCell;
|
||||
|
||||
interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
export const TableRow: React.FC<TableRowProps> = ({ children, className = '', ...props }) => <tr className={`border-b border-white/5 transition-colors hover:bg-white/5 data-[state=selected]:bg-muted ${className}`} {...props}>{children}</tr>;
|
||||
|
||||
interface TableHeadProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
export const TableHead: React.FC<TableHeadProps> = ({ children, className = '', ...props }) => <th className={`h-10 px-4 text-left align-middle text-sm font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 ${className}`} {...props}>{children}</th>;
|
||||
|
||||
interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
export const TableCell: React.FC<TableCellProps> = ({ children, className = '', ...props }) => <td className={`p-4 align-middle text-sm [&:has([role=checkbox])]:pr-0 ${className}`} {...props}>{children}</td>;
|
||||
|
||||
interface LibraryPageShellProps {
|
||||
title: string;
|
||||
primaryAction: React.ReactNode;
|
||||
filterBar: React.ReactNode;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export const LibraryPageShell: React.FC<LibraryPageShellProps> = ({ title, primaryAction, filterBar, children }) => {
|
||||
return (
|
||||
<div className="space-y-6 animate-in fade-in py-4 pb-10">
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-2xl font-bold tracking-tight text-white">{title}</h1>
|
||||
{primaryAction}
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 bg-card/50 p-4 rounded-lg border border-white/5 shadow-sm">
|
||||
{filterBar}
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
interface TableStatusRowProps {
|
||||
colSpan: number;
|
||||
text: string;
|
||||
}
|
||||
|
||||
export const TableStatusRow: React.FC<TableStatusRowProps> = ({ colSpan, text }) => {
|
||||
return (
|
||||
<TableRow>
|
||||
<TableCell colSpan={colSpan} className="text-center py-8 text-muted-foreground">
|
||||
{text}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
};
|
||||
|
||||
interface LibraryActionCellProps {
|
||||
previewAction?: React.ReactNode;
|
||||
editAction: React.ReactNode;
|
||||
deleteAction: React.ReactNode;
|
||||
}
|
||||
|
||||
export const LibraryActionCell: React.FC<LibraryActionCellProps> = ({ previewAction, editAction, deleteAction }) => {
|
||||
return (
|
||||
<TableCell className="text-right">
|
||||
{previewAction}
|
||||
{editAction}
|
||||
{deleteAction}
|
||||
</TableCell>
|
||||
);
|
||||
};
|
||||
|
||||
// Drawer (Side Sheet)
|
||||
// Drawer (Side Sheet Wrapper)
|
||||
interface DrawerProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
@@ -209,32 +80,25 @@ interface DrawerProps {
|
||||
className?: string;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export const Drawer: React.FC<DrawerProps> = ({ isOpen, onClose, title, className, children }) => {
|
||||
if (!isOpen) return null;
|
||||
// Pass `!w-[85vw]` logic directly down from the parent to naturally override Shadcn specificities safely.
|
||||
const containerClasses = className || 'w-full max-w-md sm:max-w-lg';
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex">
|
||||
{/* Backdrop */}
|
||||
<div className="fixed inset-0 bg-black/60 backdrop-blur-sm transition-opacity" onClick={onClose} />
|
||||
|
||||
{/* Drawer Content */}
|
||||
<div className={`relative ml-auto flex h-full w-full flex-col bg-background/95 border-l border-white/10 p-6 shadow-2xl animate-in slide-in-from-right ${className || 'max-w-md sm:max-w-lg'}`}>
|
||||
<div className="flex items-center justify-between mb-4 shrink-0">
|
||||
<h2 className="text-lg font-semibold text-foreground">{title}</h2>
|
||||
<Button variant="ghost" size="icon" onClick={onClose}>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex-1 min-h-0 overflow-y-auto">
|
||||
<Sheet open={isOpen} onOpenChange={(open) => { if (!open) onClose(); }}>
|
||||
<SheetContent className={`flex flex-col p-6 bg-background/95 backdrop-blur-md border-l border-white/10 shadow-2xl [&>button]:top-5 [&>button]:right-5 ${containerClasses}`}>
|
||||
<SheetHeader className="mb-2 shrink-0 p-0 text-left">
|
||||
<SheetTitle className="text-lg font-semibold">{title}</SheetTitle>
|
||||
</SheetHeader>
|
||||
<div className="flex-1 min-h-0 overflow-y-auto custom-scrollbar flex flex-col">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
);
|
||||
};
|
||||
|
||||
// Dialog (Modal)
|
||||
// Dialog (Modal Wrapper)
|
||||
interface DialogProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
@@ -243,33 +107,66 @@ interface DialogProps {
|
||||
footer?: React.ReactNode;
|
||||
contentClassName?: string;
|
||||
}
|
||||
|
||||
export const Dialog: React.FC<DialogProps> = ({ isOpen, onClose, title, children, footer, contentClassName }) => {
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
|
||||
<div className="fixed inset-0 bg-black/80 backdrop-blur-sm transition-opacity animate-in fade-in" onClick={onClose} />
|
||||
<div className={`relative z-50 w-full max-w-lg rounded-xl border border-white/10 bg-card p-6 shadow-2xl animate-in zoom-in-95 duration-200 ${contentClassName || ''}`}>
|
||||
<div className="flex flex-col space-y-1.5 text-center sm:text-left mb-4">
|
||||
<h2 className="text-lg font-semibold leading-none tracking-tight">{title}</h2>
|
||||
</div>
|
||||
<div className="py-4">
|
||||
{children}
|
||||
</div>
|
||||
{footer && (
|
||||
<div className="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 mt-2">
|
||||
{footer}
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
<span className="sr-only">Close</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<ShadcnDialog open={isOpen} onOpenChange={(open) => { if (!open) onClose(); }}>
|
||||
<DialogContent className={`max-h-[95vh] flex flex-col ${contentClassName || ''}`}>
|
||||
<DialogHeader>
|
||||
<DialogTitle>{title}</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="py-2 flex-1 min-h-0 overflow-y-auto pr-2 custom-scrollbar">
|
||||
{children}
|
||||
</div>
|
||||
{footer && <DialogFooter>{footer}</DialogFooter>}
|
||||
</DialogContent>
|
||||
</ShadcnDialog>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
// ---------------------------------------------
|
||||
// Custom Application Layout Components
|
||||
// ---------------------------------------------
|
||||
interface LibraryPageShellProps {
|
||||
title: string;
|
||||
primaryAction: React.ReactNode;
|
||||
filterBar: React.ReactNode;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
export const LibraryPageShell: React.FC<LibraryPageShellProps> = ({ title, primaryAction, filterBar, children }) => (
|
||||
<div className="space-y-6 animate-in fade-in py-4 pb-10">
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-2xl font-bold tracking-tight text-foreground">{title}</h1>
|
||||
{primaryAction}
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 bg-card/50 p-4 rounded-lg border border-border shadow-sm">
|
||||
{filterBar}
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
||||
interface TableStatusRowProps {
|
||||
colSpan: number;
|
||||
text: string;
|
||||
}
|
||||
export const TableStatusRow: React.FC<TableStatusRowProps> = ({ colSpan, text }) => (
|
||||
<TableRow>
|
||||
<TableCell colSpan={colSpan} className="text-center py-8 text-muted-foreground">
|
||||
{text}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
|
||||
interface LibraryActionCellProps {
|
||||
previewAction?: React.ReactNode;
|
||||
editAction: React.ReactNode;
|
||||
deleteAction: React.ReactNode;
|
||||
}
|
||||
export const LibraryActionCell: React.FC<LibraryActionCellProps> = ({ previewAction, editAction, deleteAction }) => (
|
||||
<TableCell className="text-right whitespace-nowrap">
|
||||
{previewAction}
|
||||
{editAction}
|
||||
{deleteAction}
|
||||
</TableCell>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user