David
8386679181
- Added contextual help to various forms including companies, people, departments, sites, assignments, and access accounts. - Introduced EntityHelp component to provide descriptions, examples, and guidance for each entity type. - Updated forms to include help sections before submit buttons, enhancing user understanding of each field's purpose. - Implemented help translations in Spanish and English for consistency across the application. - Created a new ContextHelp component for displaying help information in a structured format. - Added automated tests to ensure help content is correctly rendered in both languages. - Documented the new contextual help feature in ayuda-contextual.md for user reference.
65 lines
4.3 KiB
Markdown
65 lines
4.3 KiB
Markdown
# Componentes de interfaz
|
|
|
|
Metis Desk usa shadcn/ui, con Base UI y el estilo base-vega, siguiendo la organización de factuges-erp.
|
|
Los componentes viven en packages/shadcn-ui y se consumen mediante el paquete @repo/shadcn-ui.
|
|
El código se genera desde el registro oficial y queda versionado en este repositorio, sin depender del ERP.
|
|
|
|
## Componentes actuales
|
|
|
|
- Button: volver a comprobar la conexión.
|
|
- Card: bloques de información y estado.
|
|
- Select: idioma y selección de sistemas, entornos, cuentas, personas y demás relaciones, con navegación por teclado.
|
|
- Input y Label: credenciales y datos de usuario.
|
|
- Checkbox: estado activo de usuarios, compañías, personas y departamentos.
|
|
- Table: listados de usuarios, compañías, personas y departamentos.
|
|
- Textarea: dirección opcional de las sedes, con varias líneas.
|
|
- Dialog: formularios de alta y edición, con foco y cierre por teclado. FormDialog comparte el título y la cancelación traducidos.
|
|
|
|
## Convención de navegación
|
|
|
|
Los listados presentan datos, búsqueda y acciones. El botón de alta se coloca en la cabecera, a la derecha. Los formularios se abren en modal como norma general, con anchura adaptable y desplazamiento si el contenido lo requiere. No mostrar formularios junto al listado. Las ediciones se abren mediante una acción explícita. Compañías, personas, departamentos, asignaciones, sedes y usuarios siguen este criterio. Las personas, los departamentos y las asignaciones se crean y editan en modales. El historial se consulta en un diálogo. Catálogos, cuentas, grupos, recursos, permisos y necesidades siguen la misma convención. Los permisos de una necesidad se eligen mediante casillas shadcn/ui.
|
|
|
|
TanStack Table filtra el listado de compañías por nombre; React Hook Form gestiona los formularios con los contratos Zod compartidos.
|
|
|
|
El paquete exporta componentes individuales. Importar solo el componente necesario:
|
|
|
|
```tsx
|
|
import { Button } from "@repo/shadcn-ui/components/button";
|
|
```
|
|
|
|
El tema se define una sola vez en packages/shadcn-ui/src/styles/globals.css.
|
|
La aplicación importa ese CSS y declara las fuentes de Tailwind de los módulos y del paquete compartido.
|
|
Usar tokens semánticos como bg-background, text-foreground y border-border en vez de repetir colores por pantalla.
|
|
|
|
## Añadir componentes
|
|
|
|
Desde la raíz del proyecto, dentro de WSL:
|
|
|
|
```bash
|
|
pnpm --filter @repo/shadcn-ui ui:add input
|
|
```
|
|
|
|
El CLI está fijado en package.json. Revisar los archivos y dependencias añadidos antes de validar.
|
|
No usar --overwrite sin revisar las adaptaciones locales.
|
|
apps/web/components.json también permite al CLI localizar el paquete compartido desde la aplicación.
|
|
|
|
Después de generar código, separar los imports de tipos con import type y ejecutar las comprobaciones del proyecto.
|
|
No añadir todo el catálogo ni crear envoltorios sin una necesidad concreta.
|
|
|
|
## Dependencias
|
|
|
|
Base UI proporciona interacción accesible y gestión del foco.
|
|
class-variance-authority define variantes del botón; cn combina clases de Tailwind.
|
|
lucide-react aporta los iconos del selector y tw-animate-css sus transiciones.
|
|
shadcn es una herramienta de desarrollo; su hoja de estilos común se incorpora al compilar.
|
|
|
|
Guías oficiales: [monorepos](https://ui.shadcn.com/docs/monorepo) e [instalación manual](https://ui.shadcn.com/docs/installation/manual).
|
|
|
|
## Ayuda contextual
|
|
|
|
ContextHelp muestra una explicación breve y permite desplegar ejemplos y recomendaciones mediante teclado. EntityHelp aporta contenido específico en español e inglés para compañías, personas, departamentos, sedes, asignaciones y todas las secciones de cuentas y accesos. Los catálogos explican si la definición es global o exclusiva de la compañía. Los ejemplos son orientativos: nunca se convierten en valores del formulario.
|
|
|
|
El botón Ayuda de Cuentas y accesos y Catálogos informáticos permite consultar la explicación de la sección sin abrir un alta. La misma ayuda aparece dentro de los modales de alta y edición. FormDialog utiliza una variante amplia para personas y formularios con más campos; el número de campos no cambia la navegación a una página propia.
|
|
|
|
La ayuda de los formularios se coloca en su parte inferior, inmediatamente antes de FormActions. Este pie compartido reúne Guardar y Cancelar dentro del formulario, conservando el envío y el cierre accesible del diálogo. Los diálogos de consulta mantienen únicamente Cerrar.
|