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>
2026-04-06 23:46:44 +02:00
parent 4b2bb6998a
commit 97a3c84625
163 changed files with 6008 additions and 6310 deletions
@@ -1,57 +1,92 @@
-import * as React from "react"
-import { Popover as PopoverPrimitive } from "@base-ui/react/popover"
-import { cn } from "../core/cn"
+import * as React from 'react'
+import { Popover as MantinePopover, Box, Text } from '@mantine/core'

-function Popover({ ...props }: PopoverPrimitive.Root.Props) {
-  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+interface PopoverProps {
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+  children: React.ReactNode
 }

-function PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {
-  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
-}
-
-function PopoverPortal({ ...props }: PopoverPrimitive.Portal.Props) {
-  return <PopoverPrimitive.Portal data-slot="popover-portal" {...props} />
-}
-
-function PopoverContent({ className, sideOffset = 4, ...props }: PopoverPrimitive.Positioner.Props) {
+function Popover({ open, defaultOpen, onOpenChange, children }: PopoverProps) {
  return (
-    <PopoverPortal>
-      <PopoverPrimitive.Positioner
-        data-slot="popover-content"
-        sideOffset={sideOffset}
-        className={cn("z-50", className)}
-        {...props}
-      >
-        <PopoverPrimitive.Popup
-          className={cn(
-            "w-72 rounded-xl border bg-popover p-4 text-popover-foreground shadow-md outline-none",
-            "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
-            "data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-            "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
-          )}
-        >
-          {props.children}
-        </PopoverPrimitive.Popup>
-      </PopoverPrimitive.Positioner>
-    </PopoverPortal>
+    <MantinePopover
+      opened={open}
+      defaultOpened={defaultOpen}
+      onChange={onOpenChange}
+      withArrow
+      shadow="md"
+      radius="md"
+    >
+      {children}
+    </MantinePopover>
  )
 }

-function PopoverClose({ ...props }: PopoverPrimitive.Close.Props) {
-  return <PopoverPrimitive.Close data-slot="popover-close" {...props} />
+function PopoverTrigger({ children }: React.ComponentProps<'div'>) {
+  return (
+    <MantinePopover.Target>
+      {React.isValidElement(children) ? (
+        children
+      ) : (
+        <button type="button" data-slot="popover-trigger">{children}</button>
+      )}
+    </MantinePopover.Target>
+  )
 }

-function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return <div data-slot="popover-header" className={cn("flex flex-col gap-1.5", className)} {...props} />
+function PopoverPortal({ children }: { children: React.ReactNode }) {
+  return <>{children}</>
 }

-function PopoverTitle({ className, ...props }: React.ComponentProps<"h4">) {
-  return <h4 data-slot="popover-title" className={cn("text-sm font-semibold leading-none", className)} {...props} />
+function PopoverContent({ className, children, sideOffset, ...props }: React.ComponentProps<'div'> & { sideOffset?: number }) {
+  return (
+    <MantinePopover.Dropdown
+      data-slot="popover-content"
+      className={className}
+      {...props}
+    >
+      {children}
+    </MantinePopover.Dropdown>
+  )
 }

-function PopoverDescription({ className, ...props }: React.ComponentProps<"p">) {
-  return <p data-slot="popover-description" className={cn("text-sm text-muted-foreground", className)} {...props} />
+function PopoverClose({ children, ...props }: React.ComponentProps<'button'>) {
+  return (
+    <button type="button" data-slot="popover-close" {...props}>
+      {children}
+    </button>
+  )
+}
+
+function PopoverHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return <Box data-slot="popover-header" mb="xs" className={className} {...props} />
+}
+
+function PopoverTitle({ className, ...props }: React.ComponentProps<'h4'>) {
+  return (
+    <Text
+      component="h4"
+      data-slot="popover-title"
+      fw={600}
+      size="sm"
+      className={className}
+      {...props}
+    />
+  )
+}
+
+function PopoverDescription({ className, ...props }: React.ComponentProps<'p'>) {
+  return (
+    <Text
+      component="p"
+      data-slot="popover-description"
+      size="sm"
+      c="dimmed"
+      className={className}
+      {...props}
+    />
+  )
 }

 export { Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverHeader, PopoverPortal, PopoverTitle, PopoverTrigger }