refactor: migrate frontend from shadcn/Tailwind to Mantine v9

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:
2026-04-06 23:46:44 +02:00
parent 4b2bb6998a
commit 97a3c84625
163 changed files with 6008 additions and 6310 deletions
+35 -92
View File
@@ -1,100 +1,43 @@
import * as React from "react"
import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"
import { cn } from "../core/cn"
import { buttonVariants } from "./button"
import { Pagination as MantinePagination } from "@mantine/core"
function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
interface PaginationProps {
total: number
value?: number
defaultValue?: number
onChange?: (page: number) => void
siblings?: number
boundaries?: number
withEdges?: boolean
className?: string
}
function Pagination({
total,
value,
defaultValue,
onChange,
siblings,
boundaries,
withEdges = false,
className,
...props
}: PaginationProps) {
return (
<nav
<MantinePagination
data-slot="pagination"
role="navigation"
aria-label="pagination"
className={cn("mx-auto flex w-full justify-center", className)}
total={total}
value={value}
defaultValue={defaultValue}
onChange={onChange}
siblings={siblings}
boundaries={boundaries}
withEdges={withEdges}
className={className}
size="sm"
{...props}
/>
)
}
function PaginationContent({ className, ...props }: React.ComponentProps<"ul">) {
return (
<ul
data-slot="pagination-content"
className={cn("flex flex-row items-center gap-1", className)}
{...props}
/>
)
}
function PaginationItem({ ...props }: React.ComponentProps<"li">) {
return <li data-slot="pagination-item" {...props} />
}
type PaginationLinkProps = {
isActive?: boolean
disabled?: boolean
size?: "icon" | "default" | "sm" | "lg"
} & React.ComponentProps<"a">
function PaginationLink({ className, isActive, disabled, size = "icon", ...props }: PaginationLinkProps) {
return (
<a
data-slot="pagination-link"
aria-current={isActive ? "page" : undefined}
aria-disabled={disabled}
className={cn(
buttonVariants({ variant: isActive ? "outline" : "ghost", size }),
disabled && "pointer-events-none opacity-50",
isActive && "border-border font-medium",
className
)}
{...props}
/>
)
}
function PaginationPrevious({ className, ...props }: React.ComponentProps<"a">) {
return (
<PaginationLink
data-slot="pagination-previous"
aria-label="Go to previous page"
size="default"
className={cn("gap-1 px-2.5 pl-2", className)}
{...props}
>
<ChevronLeftIcon className="size-4" />
<span>Previous</span>
</PaginationLink>
)
}
function PaginationNext({ className, ...props }: React.ComponentProps<"a">) {
return (
<PaginationLink
data-slot="pagination-next"
aria-label="Go to next page"
size="default"
className={cn("gap-1 px-2.5 pr-2", className)}
{...props}
>
<span>Next</span>
<ChevronRightIcon className="size-4" />
</PaginationLink>
)
}
function PaginationEllipsis({ className, ...props }: React.ComponentProps<"span">) {
return (
<span
data-slot="pagination-ellipsis"
aria-hidden
className={cn("flex size-8 items-center justify-center text-muted-foreground", className)}
{...props}
>
<MoreHorizontalIcon className="size-4" />
<span className="sr-only">More pages</span>
</span>
)
}
export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious }
export type { PaginationLinkProps }
export { Pagination }
export type { PaginationProps }