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:
+110
-85
@@ -1,118 +1,143 @@
|
||||
import * as React from "react"
|
||||
import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
import { XIcon } from "lucide-react"
|
||||
import { cn } from "../core/cn"
|
||||
import * as React from 'react'
|
||||
import { Drawer, Box, Text, Group } from '@mantine/core'
|
||||
|
||||
function Sheet({ ...props }: DialogPrimitive.Root.Props) {
|
||||
return <DialogPrimitive.Root data-slot="sheet" {...props} />
|
||||
type SheetSide = 'top' | 'bottom' | 'left' | 'right'
|
||||
|
||||
interface SheetProps {
|
||||
open?: boolean
|
||||
onOpenChange?: (open: boolean) => void
|
||||
children: React.ReactNode
|
||||
}
|
||||
|
||||
function SheetTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
|
||||
return <DialogPrimitive.Trigger data-slot="sheet-trigger" {...props} />
|
||||
}
|
||||
|
||||
function SheetClose({ ...props }: DialogPrimitive.Close.Props) {
|
||||
return <DialogPrimitive.Close data-slot="sheet-close" {...props} />
|
||||
}
|
||||
|
||||
function SheetPortal({ ...props }: DialogPrimitive.Portal.Props) {
|
||||
return <DialogPrimitive.Portal data-slot="sheet-portal" {...props} />
|
||||
}
|
||||
|
||||
function SheetOverlay({ className, ...props }: DialogPrimitive.Backdrop.Props) {
|
||||
return (
|
||||
<DialogPrimitive.Backdrop
|
||||
data-slot="sheet-overlay"
|
||||
className={cn(
|
||||
"fixed inset-0 z-50 bg-black/50",
|
||||
"data-open:animate-in data-open:fade-in-0",
|
||||
"data-closed:animate-out data-closed:fade-out-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const sheetVariants = cva(
|
||||
"fixed z-50 flex flex-col gap-4 bg-background p-6 shadow-lg transition ease-in-out",
|
||||
{
|
||||
variants: {
|
||||
side: {
|
||||
top: "inset-x-0 top-0 border-b data-open:animate-in data-open:slide-in-from-top data-closed:animate-out data-closed:slide-out-to-top",
|
||||
bottom: "inset-x-0 bottom-0 border-t data-open:animate-in data-open:slide-in-from-bottom data-closed:animate-out data-closed:slide-out-to-bottom",
|
||||
left: "inset-y-0 left-0 h-full w-3/4 border-r data-open:animate-in data-open:slide-in-from-left data-closed:animate-out data-closed:slide-out-to-left sm:max-w-sm",
|
||||
right: "inset-y-0 right-0 h-full w-3/4 border-l data-open:animate-in data-open:slide-in-from-right data-closed:animate-out data-closed:slide-out-to-right sm:max-w-sm",
|
||||
},
|
||||
},
|
||||
defaultVariants: { side: "right" },
|
||||
}
|
||||
)
|
||||
|
||||
interface SheetContentProps
|
||||
extends DialogPrimitive.Popup.Props,
|
||||
VariantProps<typeof sheetVariants> {
|
||||
interface SheetContentProps extends React.ComponentProps<'div'> {
|
||||
side?: SheetSide
|
||||
showCloseButton?: boolean
|
||||
children?: React.ReactNode
|
||||
}
|
||||
|
||||
function SheetContent({ className, children, side = "right", showCloseButton = true, ...props }: SheetContentProps) {
|
||||
const SheetContext = React.createContext<{
|
||||
open: boolean
|
||||
setOpen: (open: boolean) => void
|
||||
}>({ open: false, setOpen: () => {} })
|
||||
|
||||
function Sheet({ open: controlledOpen, onOpenChange, children }: SheetProps) {
|
||||
const [internalOpen, setInternalOpen] = React.useState(false)
|
||||
const open = controlledOpen ?? internalOpen
|
||||
const setOpen = React.useCallback(
|
||||
(v: boolean) => {
|
||||
onOpenChange?.(v)
|
||||
if (controlledOpen === undefined) setInternalOpen(v)
|
||||
},
|
||||
[controlledOpen, onOpenChange],
|
||||
)
|
||||
return (
|
||||
<SheetPortal>
|
||||
<SheetOverlay />
|
||||
<DialogPrimitive.Popup
|
||||
data-slot="sheet-content"
|
||||
className={cn(sheetVariants({ side }), className)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
{showCloseButton && (
|
||||
<DialogPrimitive.Close
|
||||
data-slot="sheet-close-button"
|
||||
className="absolute top-4 right-4 inline-flex size-7 items-center justify-center rounded-md opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
||||
>
|
||||
<XIcon className="size-4" />
|
||||
<span className="sr-only">Close</span>
|
||||
</DialogPrimitive.Close>
|
||||
)}
|
||||
</DialogPrimitive.Popup>
|
||||
</SheetPortal>
|
||||
<SheetContext.Provider value={{ open, setOpen }}>
|
||||
{children}
|
||||
</SheetContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return <div data-slot="sheet-header" className={cn("flex flex-col gap-1.5", className)} {...props} />
|
||||
function SheetTrigger({ children, ...props }: React.ComponentProps<'button'>) {
|
||||
const { setOpen } = React.useContext(SheetContext)
|
||||
return (
|
||||
<button type="button" data-slot="sheet-trigger" onClick={() => setOpen(true)} {...props}>
|
||||
{children}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||
function SheetClose({ children, ...props }: React.ComponentProps<'button'>) {
|
||||
const { setOpen } = React.useContext(SheetContext)
|
||||
return (
|
||||
<div
|
||||
<button type="button" data-slot="sheet-close" onClick={() => setOpen(false)} {...props}>
|
||||
{children}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
function SheetPortal({ children }: { children: React.ReactNode }) {
|
||||
return <>{children}</>
|
||||
}
|
||||
|
||||
function SheetOverlay() {
|
||||
return null
|
||||
}
|
||||
|
||||
const sizeMap: Record<SheetSide, string> = {
|
||||
left: 'sm',
|
||||
right: 'sm',
|
||||
top: 'md',
|
||||
bottom: 'md',
|
||||
}
|
||||
|
||||
function SheetContent({ side = 'right', showCloseButton = true, children, className, ...props }: SheetContentProps) {
|
||||
const { open, setOpen } = React.useContext(SheetContext)
|
||||
return (
|
||||
<Drawer
|
||||
opened={open}
|
||||
onClose={() => setOpen(false)}
|
||||
position={side}
|
||||
withCloseButton={showCloseButton}
|
||||
size={sizeMap[side]}
|
||||
padding="md"
|
||||
data-slot="sheet-content"
|
||||
className={className}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</Drawer>
|
||||
)
|
||||
}
|
||||
|
||||
function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
|
||||
return <Box data-slot="sheet-header" mb="xs" className={className} {...props} />
|
||||
}
|
||||
|
||||
function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
|
||||
return (
|
||||
<Group
|
||||
data-slot="sheet-footer"
|
||||
className={cn("mt-auto flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
|
||||
justify="flex-end"
|
||||
gap="sm"
|
||||
mt="auto"
|
||||
pt="sm"
|
||||
className={className}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SheetTitle({ className, ...props }: DialogPrimitive.Title.Props) {
|
||||
function SheetTitle({ className, children, ...props }: React.ComponentProps<'div'>) {
|
||||
return (
|
||||
<DialogPrimitive.Title
|
||||
<Text
|
||||
component="div"
|
||||
data-slot="sheet-title"
|
||||
className={cn("text-base font-semibold leading-none", className)}
|
||||
fw={600}
|
||||
size="md"
|
||||
className={className}
|
||||
{...props}
|
||||
/>
|
||||
>
|
||||
{children}
|
||||
</Text>
|
||||
)
|
||||
}
|
||||
|
||||
function SheetDescription({ className, ...props }: DialogPrimitive.Description.Props) {
|
||||
function SheetDescription({ className, children, ...props }: React.ComponentProps<'div'>) {
|
||||
return (
|
||||
<DialogPrimitive.Description
|
||||
<Text
|
||||
component="div"
|
||||
data-slot="sheet-description"
|
||||
className={cn("text-sm text-muted-foreground", className)}
|
||||
size="sm"
|
||||
c="dimmed"
|
||||
className={className}
|
||||
{...props}
|
||||
/>
|
||||
>
|
||||
{children}
|
||||
</Text>
|
||||
)
|
||||
}
|
||||
|
||||
const sheetVariants = {} as const
|
||||
|
||||
export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, sheetVariants }
|
||||
export type { SheetContentProps }
|
||||
|
||||
Reference in New Issue
Block a user