Características y Guías

El desarrollo y la validación en @lynx/ui se apoyan en Storybook, Vitest y plantillas automatizadas.

Comandos del Paquete

Operaciones comunes a realizar dentro del entorno de @lynx/ui. Se recomienda ejecutar estos comandos mediante pnpm o vía Turbo en la raíz.

| Comando | Descripción | | :------------------- | :------------------------------------------------------------------------------------------------- | | pnpm dev | Inicia el servidor de desarrollo local para compilar componentes continuamente. | | pnpm dev:storybook | Inicia el servidor local de Storybook para desarrollar y probar componentes en aislamiento. | | pnpm build | Compila los componentes y estilos de React para producción. | | pnpm test | Ejecuta las pruebas unitarias y de integración de componentes usando Vitest. | | pnpm lint | Analiza el código buscando posibles errores de estilo o de lógica de TypeScript. | | pnpm stylelint | Ejecuta Stylelint para validar las hojas de estilo CSS/SCSS. | | pnpm generate | Utiliza Plop para generar de forma interactiva una plantilla vacía para un nuevo componente de UI. |

Desarrollo de Componentes Nuevos

Para añadir un componente nuevo al sistema de diseño, sigue estos pasos:

1. Scaffold: Ejecuta pnpm generate (o pnpm --filter=@lynx/ui generate desde la raíz) para crear la plantilla del componente usando Plop.
2. Implementar: Escribe el código de tu componente en src/components/TuComponente/TuComponente.tsx. Recuerda destructurar las propiedades (props) directamente en la firma de la función.
3. Estilar: Define los estilos en un archivo .module.css local importándolo en tu componente. No utilices estilos en línea (style={{...}}).
4. Documentar: Escribe una historia de Storybook (TuComponente.stories.tsx) para registrar los diferentes estados de uso y parámetros.
5. Verificar: Ejecuta pnpm dev:storybook para revisar visualmente tu componente y asegúrate de que pasa las pruebas automáticas.