dataforge/fn_registry
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity
Files
729921e16e4754815a00a9c41cb1a0af753c12b1
fn_registry/docs/capabilities/mantine.md
T
egutierrez a03675113a chore: auto-commit (286 archivos) 
- .claude/agents/fn-orquestador/SKILL.md
- .claude/commands/fn_claude.md
- .claude/rules/INDEX.md
- .claude/rules/cpp_apps.md
- .claude/rules/ids_naming.md
- CHANGELOG.md
- apps/dag_engine/README.md
- apps/dag_engine/api.go
- apps/dag_engine/dags_migrated/example.yaml
- apps/dag_engine/dags_migrated/example_lineage_tracking.yaml
- ...

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-16 16:33:22 +02:00

113 lines
15 KiB
Markdown
Raw Blame History

# Capability: mantine
Componentes y helpers Mantine v9 + `@fn_library` (alias a `frontend/functions/ui/`). Cubre: inputs (TextInput, NumberInput, Select, MultiSelect, ColorPicker), layout (Group, Stack, AppShell, Grid), feedback (Modal, Drawer, Notification, Loader), data display (Table, Card, Badge), navegacion (Tabs, Accordion, Menu), instalacion+theming (`install_mantine`, `frontend_doctor`). Tambien componentes ImGui equivalentes en `@fn_library` C++ (cpp/core).
## Funciones
| ID | Firma | Que hace |
|---|---|---|
| `accordion_ts_ui` | `Accordion(props: AccordionProps): JSX.Element` | Secciones colapsables con animaciones. Mantine Accordion. Composable: AccordionItem + AccordionTrigger + AccordionContent. |
| `action_icon_ts_ui` | `FnActionIcon(props: FnActionIconProps): JSX.Element` | Boton de icono con variantes, loading y tooltip opcional. Wrapper sobre Mantine ActionIcon. |
| `alert_ts_ui` | `Alert(props: { variant?: 'default' \| 'destructive' \| 'success' \| 'warning' \| 'info' }): JSX.Element` | Alerta accesible con 5 variantes semánticas (default, destructive, success, warning, info). Mantine Alert con slots para título, descripción y acción. |
| `app_shell_ts_ui` | `FnAppShell(props: FnAppShellProps): JSX.Element` | Layout shell con header, navbar colapsable y area principal. Wrapper sobre Mantine AppShell. |
| `area_chart_ts_ui` | `AreaChart(props: AreaChartProps): JSX.Element` | Gráfico de área @mantine/charts con gradientes automáticos, multi-series, stacking y tooltips. |
| `auth_form_ts_ui` | `AuthForm(config: AuthFormConfig): ReactElement` | Genera página de autenticación con toggle login/register, social buttons opcionales, campos extra en registro y validación. Basado en Mantine AuthenticationForm. |
| `autocomplete_ts_ui` | `Autocomplete(props: AutocompleteProps): JSX.Element` | Input con sugerencias de autocompletado. Permite valores libres a diferencia de Select. Wrapper sobre Mantine Autocomplete. |
| `avatar_ts_ui` | `Avatar(props: AvatarProps): JSX.Element` | Imagen de usuario circular con fallback a iniciales generadas automaticamente. 5 tamaños via Mantine Avatar. |
| `badge_ts_ui` | `Badge(props: BadgeProps & VariantProps<typeof badgeVariants>): JSX.Element` | Badge con 10 variantes semánticas (default, secondary, destructive, outline, ghost, link, success, warning, error, info) y 2 tamaños. Mantine Badge. |
| `bar_chart_ts_ui` | `BarChart(props: BarChartProps): JSX.Element` | Gráfico de barras @mantine/charts con multi-series, orientación horizontal/vertical y tooltips. |
| `breadcrumb_ts_ui` | `Breadcrumb(props: BreadcrumbProps): JSX.Element` | Navegacion jerarquica con separadores, elipsis para paths largos y soporte para router links via asChild. Mantine Anchor/Text. |
| `button_ts_ui` | `Button(props: ButtonProps & VariantProps<typeof buttonVariants>): JSX.Element` | Botón accesible con 6 variantes (default, outline, secondary, ghost, destructive, link) y 8 tamaños. Mantine Button. |
| `chart_container_ts_ui` | `ChartContainer(props: { children: ReactNode; height?: number \| string }): JSX.Element` | Thin wrapper Paper y utilidades de colores/series para los charts @mantine/charts. |
| `checkbox_ts_ui` | `Checkbox(props: CheckboxProps): JSX.Element` | Input booleano accesible con label opcional y variante indeterminate. Mantine Checkbox. |
| `chip_ts_ui` | `Chip(props: ChipProps): JSX.Element` | Chip seleccionable con variantes filled/outline/light. ChipGroup para selección simple o múltiple. Wrapper sobre Mantine Chip. |
| `color_bg_ts_ui` | `colorBg(color: string): string` | Genera el valor CSS color-mix para el fondo de un elemento con color Mantine. Sin color retorna dark-6. Hex: mezcla 18% con dark-6. Token Mantine (blue, red, ...): mezcla tono -9 al 18% con dark-6. |
| `color_border_ts_ui` | `colorBorder(color: string): string` | Genera el valor CSS color-mix para el borde de un elemento con color Mantine. Sin color retorna dark-4. Hex: mezcla 30% con dark-4. Token Mantine: mezcla tono -7 al 30% con dark-4. |
| `color_input_ts_ui` | `ColorInput(props: ColorInputProps): JSX.Element` | Selector de color con picker, swatches predefinidos y eye dropper. Soporta hex, rgb, hsl con alpha. Wrapper sobre Mantine ColorInput. |
| `color_picker_grid_ts_ui` | `ColorPickerGrid(props: ColorPickerGridProps): JSX.Element` | Grid de swatches de color con boton extra que abre un modal con ColorPicker de Mantine para seleccionar un hexadecimal libre. Soporta tokens Mantine y valores hex. El swatch activo recibe borde blanco + box-shadow azul; el custom-active aplica el mismo feedback visual. |
| `color_swatch_ts_ui` | `colorSwatch(color: string): string` | Genera el valor CSS para mostrar un swatch (muestra de color) Mantine. Sin color retorna dark-3. Hex: retorna el hex directamente. Token Mantine: retorna CSS var del tono -7. |
| `date_picker_input_ts_ui` | `DatePickerInput(props: DatePickerInputProps): JSX.Element` | Selector de fecha con input y calendario desplegable. Soporta fecha simple, múltiple y rango. Wrapper sobre Mantine DatePickerInput. |
| `dialog_ts_ui` | `Dialog(props: DialogRootProps): JSX.Element` | Diálogo modal accesible con close button y sistema de slots (header, footer, title, description). Mantine Modal. |
| `dropdown_menu_ts_ui` | `DropdownMenu(props: DropdownMenuProps): JSX.Element` | Menu de acciones y contexto accesible con items, checkboxes, radios, separadores y submenus. Base-UI Menu primitive. |
| `dropzone_ts_ui` | `Dropzone(props: DropzoneProps): JSX.Element` | Zona de drag-and-drop para archivos con estados idle/accept/reject, límite de tamaño y tipos MIME. Wrapper sobre Mantine Dropzone. |
| `empty_state_ts_ui` | `EmptyState(props: EmptyStateProps): JSX.Element` | Placeholder para listas y tablas vacías con icono, título, descripción y acción opcional. Tabler Icons por defecto. |
| `error_page_ts_ui` | `ErrorPage(config: ErrorPageConfig): JSX.Element` | Genera página de error con código grande, título, descripción y acciones. Soporta 404, 500, 403 y cualquier código custom. |
| `file_input_ts_ui` | `FileInput(props: FileInputProps): JSX.Element` | Input de archivos con soporte para múltiples archivos, tipos aceptados y botón de limpiar. Wrapper sobre Mantine FileInput. |
| `frontend_doctor_bash_infra` | `frontend_doctor(project_dir: string) -> diagnostics_stdout` | Diagnostica la salud de un proyecto frontend Mantine. Verifica Node, React, Mantine, PostCSS, TypeScript, vite.config y detecta residuos de shadcn/@base-ui. Imprime tabla de checks con exit code 0/1. |
| `indicator_ts_ui` | `FnIndicator(props: FnIndicatorProps): JSX.Element` | Badge indicador posicionado sobre un elemento hijo. Wrapper sobre Mantine Indicator. |
| `input_ts_ui` | `Input(props: InputHTMLAttributes): JSX.Element` | Campo de entrada accesible con soporte para iconos, grupos, validación ARIA y estados disabled/invalid. Mantine TextInput. |
| `install_mantine_bash_infra` | `install_mantine(project_dir: string) -> void` | Instala Mantine UI con todas sus dependencias (@mantine/core, hooks, charts, notifications, form) y PostCSS en un proyecto frontend. Detecta package manager por lockfile. Genera postcss.config.cjs si no existe. Idempotente. |
| `label_ts_ui` | `Label(props: LabelHTMLAttributes): JSX.Element` | Etiqueta de formulario accesible con soporte para estados disabled. Mantine Text con component=label. |
| `line_chart_ts_ui` | `LineChart(props: LineChartProps): JSX.Element` | Gráfico de líneas @mantine/charts con multi-series, 5 tipos de curva, líneas de referencia y tooltips. |
| `loading_overlay_ts_ui` | `FnLoadingOverlay(props: FnLoadingOverlayProps): JSX.Element` | Overlay de carga con blur y opacidad configurable. Wrapper sobre Mantine LoadingOverlay. |
| `mantine_provider_ts_ui` | `FnMantineProvider({ children, theme?, defaultColorScheme? })` | Provider raiz de Mantine para apps del registry. Wrappea MantineProvider con Notifications incluido. Importa los CSS de @mantine/core, charts y notifications. |
| `month_heatmap_ts_ui` | `MonthHeatmap(props: MonthHeatmapProps): JSX.Element` | Grid mensual de calor (heatmap) con inicio en lunes. Renderiza 7 columnas con header de dias de semana y celdas que muestran numero del dia, hasta dos contadores con icono, borde azul para hoy y fondo tintado segun valores primary/secondary. |
| `multi_select_ts_ui` | `MultiSelect(props: MultiSelectProps): JSX.Element` | Selector múltiple con búsqueda, pills y límite de selecciones. Wrapper sobre Mantine MultiSelect. |
| `nav_link_ts_ui` | `FnNavLink(props: FnNavLinkProps): JSX.Element` | Link de navegacion con icono, descripcion y anidamiento. Wrapper sobre Mantine NavLink. |
| `number_input_ts_ui` | `FnNumberInput(props: FnNumberInputProps): JSX.Element` | Input numerico con min/max, step, prefijo y sufijo. Wrapper sobre Mantine NumberInput. |
| `pagination_ts_ui` | `Pagination(props: PaginationProps): JSX.Element` | Controles de navegacion de paginas autocontenido. Mantine Pagination. |
| `password_input_ts_ui` | `PasswordInput(props: PasswordInputProps): JSX.Element` | Input de contraseña con toggle de visibilidad y soporte para indicador de fortaleza. Wrapper sobre Mantine PasswordInput. |
| `pie_chart_ts_ui` | `PieChart(props: PieChartProps): JSX.Element` | Gráfico de torta/dona @mantine/charts con colores automáticos, labels y tooltip. Usa DonutChart para dona, PieChart para torta. |
| `pin_input_ts_ui` | `PinInput(props: PinInputProps): JSX.Element` | Input de código PIN/OTP con campos individuales y autocompletado. Wrapper sobre Mantine PinInput. |
| `popover_ts_ui` | `Popover(props: PopoverProps): JSX.Element` | Contenido flotante posicionado accesible con animaciones. Mantine Popover. |
| `progress_bar_ts_ui` | `ProgressBar(props: ProgressBarProps): JSX.Element` | Barra de progreso con variantes de color y tamaño, buffer, animación, modo indeterminado y display de valor. Mantine Progress. |
| `radio_group_ts_ui` | `RadioGroup(props: RadioGroupProps): JSX.Element` | Grupo de opciones exclusivas accesible. Mantine Radio.Group + Radio. |
| `rating_ts_ui` | `Rating(props: RatingProps): JSX.Element` | Selector de calificación con estrellas, fracciones y símbolos custom. Wrapper sobre Mantine Rating. |
| `ring_progress_ts_ui` | `FnRingProgress(props: FnRingProgressProps): JSX.Element` | Anillo de progreso con secciones coloreadas y label central. Wrapper sobre Mantine RingProgress. |
| `segmented_control_ts_ui` | `FnSegmentedControl(props: FnSegmentedControlProps): JSX.Element` | Control segmentado para seleccion unica entre opciones. Wrapper sobre Mantine SegmentedControl. |
| `select_ts_ui` | `Select(props: SelectProps): JSX.Element` | Select dropdown con búsqueda, grupos y accesibilidad. Wrapper sobre Mantine Select con API declarativa via prop data. |
| `sheet_ts_ui` | `Sheet(props: SheetProps): JSX.Element` | Panel lateral deslizante (drawer) accesible con variantes de lado y animaciones. Mantine Drawer. |
| `skeleton_ts_ui` | `Skeleton(props: HTMLAttributes<HTMLDivElement>): JSX.Element` | Sistema de loading skeletons: base, text, card, avatar, button, table. Variantes preconfiguradas para estados de carga. Mantine Skeleton. |
| `slider_cpp_core` | `bool slider_float(const char* label, float* v, float min, float max, const char* fmt); bool slider_float_log(...); bool slider_int(const char* label, int* v, int min, int max, const char* fmt); bool slider_double(const char* label, double* v, double min, double max, const char* fmt)` | Slider ImGui con label muted arriba, estilo acorde con fn_tokens (radius, border, primary grab). Variantes float, float_log (logaritmico), int, double. Equivalente al <Slider> de Mantine / fn_library. |
| `slider_ts_ui` | `Slider(props: SliderProps): JSX.Element \| RangeSlider(props: RangeSliderProps): JSX.Element` | Deslizador de valor numérico con marcas, labels y modo rango. Incluye RangeSlider. Wrapper sobre Mantine Slider. |
| `stepper_ts_ui` | `FnStepper(props: FnStepperProps): JSX.Element` | Stepper de pasos con orientacion horizontal/vertical. Wrapper sobre Mantine Stepper. |
| `sticker_picker_ts_ui` | `StickerPicker(props: StickerPickerProps): JSX.Element` | Selector de emoji/sticker encapsulado en un Popover de Mantine. Monta emoji-mart Picker una sola vez para evitar re-creaciones en cada render. |
| `switch_toggle_ts_ui` | `SwitchToggle(props: SwitchToggleProps): JSX.Element` | Toggle on/off accesible con label opcional a izquierda o derecha. Mantine Switch. |
| `tabs_ts_ui` | `Tabs(props: TabsRootProps): JSX.Element` | Sistema de tabs con orientacion horizontal/vertical, variantes default y line. Mantine Tabs. |
| `tags_input_ts_ui` | `TagsInput(props: TagsInputProps): JSX.Element` | Input de tags libre con sugerencias opcionales. Permite crear valores custom a diferencia de MultiSelect. Wrapper sobre Mantine TagsInput. |
| `textarea_ts_ui` | `Textarea(props: TextareaProps): JSX.Element` | Input multilinea accesible con auto-resize opcional. Mantine Textarea con autosize. |
| `timeline_ts_ui` | `FnTimeline(props: FnTimelineProps): JSX.Element` | Timeline vertical con items, iconos y colores. Wrapper sobre Mantine Timeline. |
| `toast_ts_ui` | `Toast(props: ToastProps): JSX.Element` | Notificaciones temporales con variantes semanticas (success, error, warning, info), iconos automaticos, auto-dismiss y provider con hook useToast. |
| `tooltip_ts_ui` | `Tooltip(props: TooltipRootProps): JSX.Element` | Tooltip accesible con posicionamiento automático. Mantine Tooltip con delay configurable. |
## Ejemplo canonico
### Frontend nuevo desde cero
```bash
./fn run install_mantine --target frontend
./fn doctor # verifica que pnpm + node + tsx esten OK (grupo registry)
cd frontend && pnpm dev
```
### Pagina con @fn_library
```tsx
import { FnMantineProvider, FnButton, FnTextInput, FnModal } from "@fn_library";
import { Stack, Group } from "@mantine/core";
import { IconHome } from "@tabler/icons-react";
export function App() {
return (
<FnMantineProvider>
<Stack p="md">
<Group>
<IconHome />
<FnTextInput label="Nombre" placeholder="..." />
</Group>
<FnButton variant="filled" leftSection={<IconHome />}>Submit</FnButton>
</Stack>
</FnMantineProvider>
);
}
```
## Fronteras
- **NO usa Tailwind, CVA, cn(), CSS variables custom**. Solo Mantine theme system + props.
- **NO usa lucide-react ni heroicons**. Solo `@tabler/icons-react` (set nativo de Mantine).
- **NO crea componentes HTML nativos cuando hay equivalente en @fn_library**. Antes de `<button>`, usa `FnButton`. Antes de `<input>`, usa `FnTextInput`.
- **NO usa MUI, Chakra, Ant Design u otro framework**. Stack es Mantine v9 + @fn_library exclusivamente.
- Componentes ImGui (`button_cpp_core`, `modal_dialog_cpp_core`, ...) viven en `@fn_library` C++ y son el equivalente para apps nativas; comparten naming pero **son codigo separado**, no convierten entre sí.
Reference in New Issue View Git Blame Copy Permalink