Period UI

Librería de componentes de UI para React basada en el Design System de Period UI, creado por Billo.

💡 ¿Qué es?

Period UI es una librería de componentes reutilizables, accesibles y alineados 100% al design system de Billo. Pensada para uso interno en productos y prototipos.

• Componentes escritos en React + TypeScript.
• Totalmente tipados, con sugerencias de props en IDE.
• Estilos con Tailwind + Sass.
• Incluye sistema de iconos propio vía fuente (BilloIcon).
• Soporte a dark mode, responsive y test unitarios.

Figma Design System: Solicítalo a Fernanda López para acceso.

📦 Uso básico

import { Button } from 'period-ui';
import 'period-ui/dist/index.css';

<Button variant="primary">Hola Billo</Button>

🚀 Instalación

1. Instala el paquete:

yarn add period-ui
# o
npm install period-ui

2. Importa los estilos globales (necesario para los iconos y fuentes):

Importante: Para que los íconos y fuentes personalizadas funcionen correctamente, debes importar el archivo de estilos global (index.css) de la librería.

Next.js (Recomendado para Next 13+ o 14+):

En tu archivo global de estilos (por ejemplo src/app/globals.css o src/styles/globals.css), agrega al inicio:

@import '../../node_modules/period-ui/dist/index.css';

Nota: Asegúrate de ajustar la ruta relativa según dónde esté tu archivo de estilos. Por ejemplo, si tu CSS está en src/app/globals.css y tu node_modules está en la raíz, la ruta anterior funcionará.

No es necesario importar el CSS en tu archivo TypeScript/JSX (import 'period-ui/dist/index.css'), ya que Next.js 13/14 en modo app router puede tener problemas resolviendo archivos CSS fuera de /src o /public vía JS.

Vite o CRA (Create React App):

En el entry point de tu app (por ejemplo, src/main.tsx o src/index.tsx):

import 'period-ui/dist/index.css';

o bien puedes usar @import en tu propio archivo CSS, igual que arriba.

📚 Storybook (Probar localmente)

Para ver todos los componentes y ejemplos:

yarn storybook

🛠️ Desarrollo

Si vas a contribuir o agregar un nuevo componente:

• Componentes puros y bien escritos:

  • Solo lógica relacionada al UI, sin side effects, ni dependencias externas innecesarias.

• Basados 100% en el Design System de Billo:

  • Debes consultar y seguir los lineamientos de Figma (pide acceso a flopez).

• Unit tests obligatorios:

  • Usa Vitest y Testing Library. Todo nuevo componente debe tener coverage.

• Stories en Storybook obligatorias:

  • Cada estado/variante debe estar documentado.

• Exportar correctamente el tipo de los props para mejor DX.

Build y publicación

• Build: yarn build
• Subir versión: npm version patch (o minor, major según el cambio)
• Publicar (solo mfernandez o haraya): npm publish

NOTA: Para publicar, debes solicitarlo a Mario Fernández o Hans Araya.

El design system de Figma solo puede ser editado por Fernanda López.

📝 Notas adicionales

• Si tu app no renderiza iconos, verifica que los fonts estén correctamente servidos desde /public/fonts y que index.css esté importado en el entrypoint.
• Si tienes dudas o mejoras, abre un PR o contacta a los responsables.

Built with ❤ by Billo