initial: mirror of @fn_library from fn_registry

75 components + DESIGN_SYSTEM.md + sync script. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-21 19:06:49 +02:00
commit 5a824c2eee
157 changed files with 11539 additions and 0 deletions
@@ -0,0 +1,94 @@
+---
+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.