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>
95 lines
2.6 KiB
Markdown
95 lines
2.6 KiB
Markdown
---
|
|
name: rating
|
|
kind: component
|
|
lang: ts
|
|
domain: ui
|
|
version: "1.0.0"
|
|
purity: impure
|
|
signature: "Rating(props: RatingProps): JSX.Element"
|
|
description: "Selector de calificación con estrellas, fracciones y símbolos custom. Wrapper sobre Mantine Rating."
|
|
tags: [rating, stars, feedback, input, component, ui, mantine]
|
|
uses_functions: []
|
|
uses_types: []
|
|
returns: []
|
|
returns_optional: false
|
|
error_type: ""
|
|
imports: ["@mantine/core"]
|
|
output: "Componente Rating que renderiza un selector de estrellas interactivo con soporte para fracciones, modo solo lectura y símbolos personalizados"
|
|
tested: false
|
|
tests: []
|
|
test_file_path: ""
|
|
file_path: "frontend/functions/ui/rating.tsx"
|
|
props:
|
|
- name: count
|
|
type: "number"
|
|
required: false
|
|
description: "Número de estrellas/símbolos a mostrar (por defecto 5)"
|
|
- name: fractions
|
|
type: "number"
|
|
required: false
|
|
description: "Divisiones por estrella — 2 para mitades, 4 para cuartos"
|
|
- name: value
|
|
type: "number"
|
|
required: false
|
|
description: "Calificación actual (controlled)"
|
|
- name: onChange
|
|
type: "(value: number) => void"
|
|
required: false
|
|
description: "Callback al cambiar la calificación"
|
|
- name: readOnly
|
|
type: "boolean"
|
|
required: false
|
|
description: "Modo solo lectura — muestra la calificación sin permitir cambios"
|
|
- name: highlightSelectedOnly
|
|
type: "boolean"
|
|
required: false
|
|
description: "Solo resalta el símbolo seleccionado, no los anteriores"
|
|
- name: size
|
|
type: "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
|
|
required: false
|
|
description: "Tamaño de los símbolos"
|
|
- name: color
|
|
type: "string"
|
|
required: false
|
|
description: "Color de los símbolos activos (color de Mantine o CSS)"
|
|
emits: [onChange]
|
|
has_state: true
|
|
framework: react
|
|
variant: [default]
|
|
---
|
|
|
|
## Ejemplo
|
|
|
|
```tsx
|
|
import { Rating } from '@fn_library'
|
|
|
|
// Rating básico de 5 estrellas
|
|
<Rating value={rating} onChange={setRating} />
|
|
|
|
// Con medias estrellas
|
|
<Rating
|
|
fractions={2}
|
|
value={3.5}
|
|
onChange={setRating}
|
|
/>
|
|
|
|
// Solo lectura para mostrar calificación
|
|
<Rating value={4.2} fractions={10} readOnly />
|
|
|
|
// Con más estrellas y color custom
|
|
<Rating
|
|
count={10}
|
|
value={score}
|
|
onChange={setScore}
|
|
color="yellow"
|
|
size="lg"
|
|
/>
|
|
```
|
|
|
|
## Notas
|
|
|
|
- Wrapper directo sobre `Rating` de `@mantine/core` v9. Todas las props de Mantine Rating son válidas.
|
|
- `fractions` permite selección granular: 2 = mitades (0.5, 1, 1.5...), 4 = cuartos (0.25, 0.5...).
|
|
- En modo `readOnly` no dispara `onChange` y el cursor es el por defecto.
|
|
- Accesible via teclado con soporte para lectores de pantalla.
|