dataforge/fn_registry
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

refactor: migrate frontend from shadcn/Tailwind to Mantine v9

Browse Source 
Reescribe todos los componentes UI para usar Mantine v9 en lugar de shadcn/Tailwind.
Elimina cn(), CVA, components.json, theme_provider custom y globals.css con Tailwind.
Añade 25+ componentes nuevos (AppShell, AuthForm, DatePickerInput, Dropzone, etc.)
y MantineProvider como wrapper estándar del sistema de temas.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Egutierrez
2026-04-06 23:46:44 +02:00
parent 4b2bb6998a
commit 97a3c84625
163 changed files with 6008 additions and 6310 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/functions/ui/bar_chart.tsx
+23 -29
View File
@@ -1,7 +1,6 @@
import {
BarChart as RechartsBarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend,
} from 'recharts'
import { ChartContainer, ChartTooltipContent, type Series, getSeriesColor } from './chart_container'
import { BarChart as MantineBarChart } from '@mantine/charts'
import { Paper } from '@mantine/core'
import { type Series, getSeriesColor } from './chart_container'
interface BarChartProps {
data: Record<string, unknown>[]
@@ -11,8 +10,7 @@ interface BarChartProps {
horizontal?: boolean
showGrid?: boolean
showLegend?: boolean
height?: number | string
className?: string
height?: number
xAxisFormatter?: (value: unknown) => string
yAxisFormatter?: (value: unknown) => string
valueFormatter?: (value: number) => string
@@ -20,32 +18,28 @@ interface BarChartProps {
function BarChartComponent({
data, xKey, yKey, series, horizontal = false, showGrid = true, showLegend = false,
height = 300, className, xAxisFormatter, yAxisFormatter, valueFormatter = (v) => v.toLocaleString(),
height = 300, xAxisFormatter, yAxisFormatter, valueFormatter = (v) => v.toLocaleString(),
}: BarChartProps) {
const bars = series
? series.map((s, i) => ({ dataKey: s.key, name: s.name, fill: getSeriesColor(i, s.color) }))
: yKey ? [{ dataKey: yKey, name: yKey, fill: getSeriesColor(0) }] : []
const chartSeries = series
? series.map((s, i) => ({ name: s.key, label: s.name, color: getSeriesColor(i, s.color) }))
: yKey ? [{ name: yKey, label: yKey, color: getSeriesColor(0) }] : []
return (
<ChartContainer className={className} height={height}>
<RechartsBarChart data={data} layout={horizontal ? 'vertical' : 'horizontal'} margin={{ top: 10, right: 10, left: 10, bottom: 10 }}>
{showGrid && <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />}
{horizontal ? (
<>
<XAxis type="number" tickFormatter={yAxisFormatter} className="text-xs fill-muted-foreground" />
<YAxis dataKey={xKey} type="category" tickFormatter={xAxisFormatter} width={80} className="text-xs fill-muted-foreground" />
</>
) : (
<>
<XAxis dataKey={xKey} tickFormatter={xAxisFormatter} className="text-xs fill-muted-foreground" />
<YAxis tickFormatter={yAxisFormatter} className="text-xs fill-muted-foreground" />
</>
)}
<Tooltip content={<ChartTooltipContent valueFormatter={valueFormatter} />} cursor={{ fill: 'hsl(var(--muted) / 0.3)' }} />
{showLegend && <Legend />}
{bars.map((bar) => <Bar key={bar.dataKey} dataKey={bar.dataKey} name={bar.name} fill={bar.fill} radius={horizontal ? [0, 4, 4, 0] : [4, 4, 0, 0]} />)}
</RechartsBarChart>
</ChartContainer>
<Paper p="md">
<MantineBarChart
h={height}
data={data}
dataKey={xKey}
series={chartSeries}
orientation={horizontal ? 'vertical' : 'horizontal'}
gridAxis={showGrid ? 'xy' : 'none'}
withLegend={showLegend}
withTooltip
valueFormatter={valueFormatter}
xAxisProps={xAxisFormatter ? { tickFormatter: xAxisFormatter } : undefined}
yAxisProps={yAxisFormatter ? { tickFormatter: yAxisFormatter } : undefined}
/>
</Paper>
)
}