egutierrez
2d108c295a
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>
92 lines
2.7 KiB
Markdown
92 lines
2.7 KiB
Markdown
---
|
|
name: toast
|
|
kind: component
|
|
lang: ts
|
|
domain: ui
|
|
version: "1.0.0"
|
|
purity: impure
|
|
signature: "Toast(props: ToastProps): JSX.Element"
|
|
description: "Notificaciones temporales con variantes semanticas (success, error, warning, info), iconos automaticos, auto-dismiss y provider con hook useToast."
|
|
tags: [toast, notification, alert, component, ui, interactive, mantine]
|
|
uses_functions: []
|
|
uses_types: []
|
|
returns: []
|
|
returns_optional: false
|
|
error_type: ""
|
|
imports: ["@mantine/notifications", "@mantine/core"]
|
|
output: "Componente Toast que renderiza notificación temporal con variantes semánticas, auto-dismiss y hook useToast"
|
|
tested: false
|
|
tests: []
|
|
test_file_path: ""
|
|
file_path: "frontend/functions/ui/toast.tsx"
|
|
props:
|
|
- name: variant
|
|
type: "'default' | 'success' | 'error' | 'warning' | 'info'"
|
|
required: false
|
|
description: "Variante semantica con icono automatico (default: default)"
|
|
- name: title
|
|
type: "string"
|
|
required: false
|
|
description: "Titulo de la notificacion"
|
|
- name: description
|
|
type: "string"
|
|
required: false
|
|
description: "Texto descriptivo secundario"
|
|
- name: action
|
|
type: "React.ReactNode"
|
|
required: false
|
|
description: "Accion opcional (boton, link) debajo del contenido"
|
|
- name: onClose
|
|
type: "() => void"
|
|
required: false
|
|
description: "Callback al cerrar. Muestra el boton X si se provee."
|
|
- name: duration
|
|
type: "number"
|
|
required: false
|
|
description: "Duracion en ms antes del auto-dismiss (default: 5000, 0 = persistente)"
|
|
emits: [onClose]
|
|
has_state: true
|
|
framework: react
|
|
variant: [default, success, error, warning, info]
|
|
---
|
|
|
|
## Ejemplo
|
|
|
|
```tsx
|
|
// 1. Envolver la app con el provider
|
|
<ToastProvider position="bottom-right">
|
|
<App />
|
|
</ToastProvider>
|
|
|
|
// 2. Usar el hook en cualquier componente
|
|
function MyComponent() {
|
|
const { toast } = useToast()
|
|
|
|
return (
|
|
<Button onClick={() => toast({
|
|
variant: "success",
|
|
title: "Guardado",
|
|
description: "Los cambios se guardaron correctamente.",
|
|
})}>
|
|
Guardar
|
|
</Button>
|
|
)
|
|
}
|
|
|
|
// Toast con accion
|
|
toast({
|
|
variant: "error",
|
|
title: "Error al guardar",
|
|
description: "Intenta de nuevo.",
|
|
action: <Button size="sm" variant="outline">Reintentar</Button>,
|
|
duration: 0, // persistente hasta cerrar manualmente
|
|
})
|
|
|
|
// Toast individual sin provider
|
|
<Toast variant="info" title="Informacion" description="Texto descriptivo" onClose={() => {}} />
|
|
```
|
|
|
|
## Notas
|
|
|
|
Migrado a @mantine/notifications. useToast() delega a notifications.show(). ToastProvider es un passthrough (Mantine maneja el estado globalmente via Notifications en mantine_provider). Toast puede usarse como componente inline con Paper. Variantes mapean a colores Mantine: success→teal, error→red, warning→yellow, info→blue.
|