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/skeleton.tsx
+26 -26
View File
@@ -1,53 +1,53 @@
import * as React from "react"
import { cn } from "../core/cn"
import { Skeleton as MantineSkeleton, Group, Stack } from "@mantine/core"
function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
return <div data-slot="skeleton" className={cn("animate-pulse rounded-md bg-muted", className)} {...props} />
function Skeleton({ className, style, ...props }: React.HTMLAttributes<HTMLDivElement>) {
return <MantineSkeleton data-slot="skeleton" className={className} style={style} {...props} />
}
function SkeletonText({ className, lines = 3, ...props }: React.HTMLAttributes<HTMLDivElement> & { lines?: number }) {
return (
<div className={cn("space-y-2", className)} {...props}>
<Stack gap="xs" className={className} data-slot="skeleton-text" {...props}>
{Array.from({ length: lines }).map((_, i) => (
<Skeleton key={i} className={cn("h-4", i === lines - 1 ? "w-4/5" : "w-full")} />
<MantineSkeleton key={i} h={16} w={i === lines - 1 ? "80%" : "100%"} />
))}
</div>
</Stack>
)
}
function SkeletonCard({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
return (
<div className={cn("space-y-3", className)} {...props}>
<Skeleton className="h-[180px] w-full rounded-lg" />
<Skeleton className="h-4 w-3/4" />
<Skeleton className="h-4 w-1/2" />
</div>
<Stack gap="xs" className={className} data-slot="skeleton-card" {...props}>
<MantineSkeleton h={180} w="100%" radius="md" />
<MantineSkeleton h={16} w="75%" />
<MantineSkeleton h={16} w="50%" />
</Stack>
)
}
const avatarSizeMap = { xs: 24, sm: 32, md: 40, lg: 48, xl: 64 }
function SkeletonAvatar({ className, size = "md", ...props }: React.HTMLAttributes<HTMLDivElement> & { size?: "xs" | "sm" | "md" | "lg" | "xl" }) {
const sizeClasses = { xs: "size-6", sm: "size-8", md: "size-10", lg: "size-12", xl: "size-16" }
return <Skeleton className={cn("rounded-full", sizeClasses[size], className)} {...props} />
const px = avatarSizeMap[size]
return <MantineSkeleton data-slot="skeleton-avatar" circle h={px} w={px} className={className} {...props} />
}
function SkeletonButton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
return <Skeleton className={cn("h-8 w-24 rounded-lg", className)} {...props} />
return <MantineSkeleton data-slot="skeleton-button" h={32} w={96} radius="md" className={className} {...props} />
}
function SkeletonTable({ className, rows = 5, columns = 4, ...props }: React.HTMLAttributes<HTMLDivElement> & { rows?: number; columns?: number }) {
return (
<div className={cn("space-y-3", className)} {...props}>
<div className="flex gap-4">
{Array.from({ length: columns }).map((_, i) => <Skeleton key={i} className="h-4 flex-1" />)}
</div>
<div className="space-y-2">
{Array.from({ length: rows }).map((_, rowIndex) => (
<div key={rowIndex} className="flex gap-4">
{Array.from({ length: columns }).map((_, colIndex) => <Skeleton key={colIndex} className="h-4 flex-1" />)}
</div>
))}
</div>
</div>
<Stack gap="xs" className={className} data-slot="skeleton-table" {...props}>
<Group gap="sm">
{Array.from({ length: columns }).map((_, i) => <MantineSkeleton key={i} h={16} style={{ flex: 1 }} />)}
</Group>
{Array.from({ length: rows }).map((_, rowIndex) => (
<Group key={rowIndex} gap="sm">
{Array.from({ length: columns }).map((_, colIndex) => <MantineSkeleton key={colIndex} h={16} style={{ flex: 1 }} />)}
</Group>
))}
</Stack>
)
}