Botech Library

Una biblioteca de componentes React para sistemas escolares.

Componentes

Header

El componente Header muestra información del sistema y la página actual.

Props

• title: Título de la página actual
• description: Descripción de la página actual
• systemName: Nombre del sistema (por defecto: "PASS")
• systemSubtitle: Subtítulo del sistema (por defecto: "Sistema Escolar")
• showPageInfo: Controla si se muestra la información de la página en el lado derecho (por defecto: true)
• onMenuToggle: Función que se ejecuta al hacer clic en el botón de menú

Uso

<Header
  title="Dashboard"
  description="Panel principal del sistema"
  systemName="PASS"
  systemSubtitle="Sistema Escolar"
  onMenuToggle={() => setIsSidebarOpen(true)}
  showPageInfo={true}
/>

Notas importantes

• La descripción se muestra en dos lugares:
  1. Lado izquierdo: systemSubtitle aparece debajo del nombre del sistema
  2. Lado derecho: description aparece cuando showPageInfo es true (solo visible en pantallas medianas y grandes por la clase hidden sm:block)

Sidebar

El componente Sidebar proporciona navegación lateral con soporte para carpetas y elementos de menú.

Props

• isOpen: Controla si el sidebar está abierto
• onClose: Función que se ejecuta al cerrar el sidebar
• menuItems: Array de elementos del menú
• overlayClassName: Clases CSS para el overlay (por defecto: "fixed inset-0 bg-black bg-opacity-25 z-40")

Uso

<Sidebar
  isOpen={isSidebarOpen}
  onClose={() => setIsSidebarOpen(false)}
  menuItems={menuItems}
  systemName="PASS"
  activePath="/"
  onNavigate={(path) => console.log('Navegando a:', path)}
/>

Problemas Solucionados

1. Overlay del Sidebar

Problema: El overlay estaba completamente negro en lugar de ser semi-transparente.

Solución: Cambiado de bg-opacity-50 a bg-opacity-25 para que sea menos oscuro.

// Antes
overlayClassName = "fixed inset-0 bg-black bg-opacity-50 z-40"

// Después
overlayClassName = "fixed inset-0 bg-black bg-opacity-25 z-40"

2. Descripción del Header

Problema: La descripción no aparecía en el Header.

Solución: La descripción se muestra en dos lugares diferentes:

1. systemSubtitle: En el lado izquierdo debajo del nombre del sistema
2. description: En el lado derecho cuando showPageInfo es true

Importante: La descripción del lado derecho solo es visible en pantallas medianas y grandes debido a la clase hidden sm:block.

Instalación

npm install botech-library

Uso

import { Header, Sidebar } from 'botech-library';

// Tu componente aquí...

Desarrollo

npm install
npm run build

Estructura del Proyecto

src/
├── components/
│   ├── Header/
│   │   ├── Header.tsx
│   │   ├── types.ts
│   │   └── index.ts
│   ├── Sidebar/
│   │   ├── Sidebar.tsx
│   │   ├── types.ts
│   │   └── index.ts
│   └── index.ts