Skip to content

Commit 73399a2

Browse files
hotlonghotlong
committed
Improve table compatibility and simplify UI styles
Normalized table column props to support legacy 'label' and 'name' keys for better backward compatibility in data-table and table renderers. Simplified and standardized UI styles for statistic and alert components, removing decorative elements and custom color schemes in favor of more consistent, minimal styling.
1 parent 7f0a630 commit 73399a2

File tree

4 files changed

+34
-70
lines changed

4 files changed

+34
-70
lines changed

‎packages/components/src/renderers/complex/data-table.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ type SortDirection = 'asc' | 'desc' | null;
7777
const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
7878
const {
7979
caption,
80-
columns: initialColumns = [],
80+
columns: rawColumns = [],
8181
data = [],
8282
pagination = true,
8383
pageSize: initialPageSize = 10,
@@ -91,6 +91,15 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
9191
className,
9292
} = schema;
9393

94+
// Normalize columns to support legacy keys (label/name) from existing JSONs
95+
const initialColumns = useMemo(() => {
96+
return rawColumns.map((col: any) => ({
97+
...col,
98+
header: col.header || col.label,
99+
accessorKey: col.accessorKey || col.name
100+
}));
101+
}, [rawColumns]);
102+
94103
// State management
95104
const [searchQuery, setSearchQuery] = useState('');
96105
const [sortColumn, setSortColumn] = useState<string | null>(null);

‎packages/components/src/renderers/complex/table.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ ComponentRegistry.register('table',
2222
<TableRow>
2323
{schema.columns?.map((col: any, index: number) => (
2424
<TableHead key={index} className={col.className} style={{ width: col.width }}>
25-
{col.header}
25+
{col.header || col.label}
2626
</TableHead>
2727
))}
2828
</TableRow>
@@ -32,7 +32,7 @@ ComponentRegistry.register('table',
3232
<TableRow key={rowIndex}>
3333
{schema.columns?.map((col: any, colIndex: number) => (
3434
<TableCell key={colIndex} className={col.cellClassName}>
35-
{row[col.accessorKey]}
35+
{row[col.accessorKey || col.name]}
3636
</TableCell>
3737
))}
3838
</TableRow>

‎packages/components/src/renderers/data-display/statistic.tsx‎

Lines changed: 16 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -6,66 +6,39 @@ import { TrendingUp, TrendingDown, Minus } from 'lucide-react';
66
const StatisticRenderer = ({ schema }: { schema: StatisticSchema }) => {
77
return (
88
<div className={cn(
9-
"group relative flex flex-col p-5 rounded-xl transition-all duration-300 overflow-hidden",
10-
"bg-slate-950/40 border border-slate-800/60 backdrop-blur-sm",
11-
"hover:bg-slate-900/60 hover:border-cyan-500/50 hover:shadow-[0_0_30px_-10px_rgba(6,182,212,0.3)]",
9+
"group relative flex flex-col p-6 rounded-xl border bg-card text-card-foreground shadow-sm",
1210
schema.className
1311
)}>
14-
{/* Decorative scanner line */}
15-
<div className="absolute top-0 left-0 w-full h-[1px] bg-linear-to-r from-transparent via-cyan-500/50 to-transparent -translate-x-full group-hover:animate-[shimmer_1.5s_infinite]" />
16-
<div className="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-5 pointer-events-none" />
17-
1812
{/* Label */}
1913
{schema.label && (
2014
<div className="flex items-center gap-2 mb-2">
21-
<div className="w-1 h-3 bg-cyan-500 rounded-full shadow-[0_0_8px_cyan]" />
22-
<p className="text-[10px] font-mono font-bold uppercase tracking-[0.2em] text-cyan-600/80 group-hover:text-cyan-400 transition-colors">
15+
<p className="text-sm font-medium text-muted-foreground">
2316
{schema.label}
2417
</p>
2518
</div>
2619
)}
2720

2821
{/* Value Area */}
29-
<div className="flex items-baseline gap-3 my-1 relative z-10">
30-
<h3 className={cn(
31-
"text-4xl font-black tracking-tight text-white transition-all duration-300",
32-
"drop-shadow-[0_0_10px_rgba(255,255,255,0.3)]",
33-
"group-hover:scale-110 group-hover:text-cyan-100 group-hover:drop-shadow-[0_0_15px_rgba(6,182,212,0.6)] group-hover:-translate-y-1"
34-
)}>
22+
<div className="flex items-baseline gap-2">
23+
<h3 className="text-2xl font-bold tracking-tight">
3524
{schema.value}
3625
</h3>
26+
</div>
3727

38-
{/* Trend Indicator */}
39-
{schema.trend && (
40-
<div className={cn(
41-
"flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold border backdrop-blur-md transition-all",
42-
schema.trend === 'up' && "text-emerald-400 border-emerald-500/30 bg-emerald-950/30 shadow-[0_0_10px_-4px_rgba(52,211,153,0.5)]",
43-
schema.trend === 'down' && "text-rose-400 border-rose-500/30 bg-rose-950/30 shadow-[0_0_10px_-4px_rgba(251,113,133,0.5)]",
44-
schema.trend === 'neutral' && "text-amber-400 border-amber-500/30 bg-amber-950/30 shadow-[0_0_10px_-4px_rgba(251,191,36,0.5)]",
45-
"group-hover:scale-105"
46-
)}>
47-
{schema.trend === 'up' && <TrendingUp className="mr-1 h-3 w-3" />}
48-
{schema.trend === 'down' && <TrendingDown className="mr-1 h-3 w-3" />}
28+
{/* Footer / Trend */}
29+
{(schema.trend || schema.description) && (
30+
<div className="mt-1 flex items-center text-xs text-muted-foreground">
31+
{schema.trend === 'up' && <TrendingUp className="mr-1 h-3 w-3 text-emerald-500" />}
32+
{schema.trend === 'down' && <TrendingDown className="mr-1 h-3 w-3 text-rose-500" />}
4933
{schema.trend === 'neutral' && <Minus className="mr-1 h-3 w-3" />}
50-
{schema.description && <span className="max-w-[100px] truncate">{schema.description}</span>}
34+
<span className={cn(
35+
schema.trend === 'up' && "text-emerald-500 font-medium",
36+
schema.trend === 'down' && "text-rose-500 font-medium",
37+
)}>
38+
{schema.description}
39+
</span>
5140
</div>
52-
)}
53-
</div>
54-
55-
{/* Footer / Description Text if needed below (optional, mostly handled by trend pill now, but keeping separate if text is long) */}
56-
{schema.description && !schema.trend && (
57-
<p className="text-xs text-slate-500 font-mono mt-1 group-hover:text-slate-400 transition-colors">
58-
{schema.description}
59-
</p>
6041
)}
61-
62-
{/* Decorative accent corners */}
63-
<div className="absolute right-0 bottom-0 w-8 h-8 opacity-20 group-hover:opacity-100 transition-opacity">
64-
<svg viewBox="0 0 24 24" fill="none" className="w-full h-full text-cyan-500" stroke="currentColor" strokeWidth="1">
65-
<path d="M22 22L12 22L22 12Z" fill="currentColor" fillOpacity="0.2" />
66-
<path d="M22 17L22 22L17 22" strokeLinecap="round" strokeLinejoin="round" />
67-
</svg>
68-
</div>
6942
</div>
7043
);
7144
};

‎packages/components/src/ui/alert.tsx‎

Lines changed: 6 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -4,24 +4,13 @@ import { cva, type VariantProps } from "class-variance-authority"
44
import { cn } from "../lib/utils"
55

66
const alertVariants = cva(
7-
"relative w-full rounded-r-lg border-l-4 px-4 py-4 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current transition-all duration-300 backdrop-blur-md overflow-hidden group/alert",
7+
"relative w-full rounded-lg border px-4 py-4 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
88
{
99
variants: {
1010
variant: {
11-
default: [
12-
"bg-slate-950/80 border-l-cyan-500 border-y border-r border-y-cyan-900/30 border-r-cyan-900/30 text-cyan-100",
13-
"shadow-[0_0_20px_-5px_rgba(6,182,212,0.2)]",
14-
"[&>svg]:text-cyan-400 [&>svg]:drop-shadow-[0_0_8px_rgba(6,182,212,0.6)]",
15-
"hover:shadow-[0_0_30px_-5px_rgba(6,182,212,0.4)] hover:bg-slate-900/90",
16-
"after:absolute after:inset-0 after:bg-linear-to-r after:from-cyan-500/10 after:to-transparent after:opacity-0 after:transition-opacity hover:after:opacity-100 after:pointer-events-none"
17-
],
18-
destructive: [
19-
"bg-red-950/80 border-l-red-600 border-y border-r border-y-red-900/30 border-r-red-900/30 text-red-100",
20-
"shadow-[0_0_20px_-5px_rgba(239,68,68,0.2)]",
21-
"[&>svg]:text-red-500 [&>svg]:drop-shadow-[0_0_8px_rgba(239,68,68,0.6)]",
22-
"hover:shadow-[0_0_30px_-5px_rgba(239,68,68,0.4)] hover:bg-red-950/90",
23-
"after:absolute after:inset-0 after:bg-linear-to-r after:from-red-500/10 after:to-transparent after:opacity-0 after:transition-opacity hover:after:opacity-100 after:pointer-events-none"
24-
],
11+
default: "bg-background text-foreground",
12+
destructive:
13+
"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
2514
},
2615
},
2716
defaultVariants: {
@@ -49,11 +38,7 @@ function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
4938
return (
5039
<div
5140
data-slot="alert-title"
52-
className={cn(
53-
"col-start-2 line-clamp-1 min-h-4 font-mono font-bold tracking-widest uppercase text-xs mb-1 drop-shadow-[0_0_2px_currentColor]",
54-
"group-[.destructive]/alert:text-red-400 group-[.default]/alert:text-cyan-400",
55-
className
56-
)}
41+
className={cn("mb-1 font-medium leading-none tracking-tight", className)}
5742
{...props}
5843
/>
5944
)
@@ -66,10 +51,7 @@ function AlertDescription({
6651
return (
6752
<div
6853
data-slot="alert-description"
69-
className={cn(
70-
"col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed font-sans opacity-90",
71-
className
72-
)}
54+
className={cn("text-sm [&_p]:leading-relaxed", className)}
7355
{...props}
7456
/>
7557
)

0 commit comments

Comments
 (0)