botech-library 0.0.62 → 0.0.64
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +124 -124
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/types/Button/Button.d.ts +9 -9
- package/dist/types/Button/index.d.ts +1 -1
- package/dist/types/Header/Header.d.ts +17 -17
- package/dist/types/Header/index.d.ts +2 -2
- package/dist/types/Header/types.d.ts +14 -14
- package/dist/types/Sidebar/Sidebar.d.ts +4 -4
- package/dist/types/Sidebar/index.d.ts +2 -2
- package/dist/types/Sidebar/types.d.ts +55 -55
- package/dist/types/components/Button/Button.test.d.ts +1 -1
- package/dist/types/services/studentService.d.ts.map +1 -1
- package/package.json +57 -57
package/README.md
CHANGED
|
@@ -1,125 +1,125 @@
|
|
|
1
|
-
# Botech Library
|
|
2
|
-
|
|
3
|
-
Una biblioteca de componentes React para sistemas escolares.
|
|
4
|
-
|
|
5
|
-
## Componentes
|
|
6
|
-
|
|
7
|
-
### Header
|
|
8
|
-
|
|
9
|
-
El componente Header muestra información del sistema y la página actual.
|
|
10
|
-
|
|
11
|
-
#### Props
|
|
12
|
-
|
|
13
|
-
- `title`: Título de la página actual
|
|
14
|
-
- `description`: Descripción de la página actual
|
|
15
|
-
- `systemName`: Nombre del sistema (por defecto: "PASS")
|
|
16
|
-
- `systemSubtitle`: Subtítulo del sistema (por defecto: "Sistema Escolar")
|
|
17
|
-
- `showPageInfo`: Controla si se muestra la información de la página en el lado derecho (por defecto: true)
|
|
18
|
-
- `onMenuToggle`: Función que se ejecuta al hacer clic en el botón de menú
|
|
19
|
-
|
|
20
|
-
#### Uso
|
|
21
|
-
|
|
22
|
-
```jsx
|
|
23
|
-
<Header
|
|
24
|
-
title="Dashboard"
|
|
25
|
-
description="Panel principal del sistema"
|
|
26
|
-
systemName="PASS"
|
|
27
|
-
systemSubtitle="Sistema Escolar"
|
|
28
|
-
onMenuToggle={() => setIsSidebarOpen(true)}
|
|
29
|
-
showPageInfo={true}
|
|
30
|
-
/>
|
|
31
|
-
```
|
|
32
|
-
|
|
33
|
-
#### Notas importantes
|
|
34
|
-
|
|
35
|
-
- La descripción se muestra en **dos lugares**:
|
|
36
|
-
1. **Lado izquierdo**: `systemSubtitle` aparece debajo del nombre del sistema
|
|
37
|
-
2. **Lado derecho**: `description` aparece cuando `showPageInfo` es `true` (solo visible en pantallas medianas y grandes por la clase `hidden sm:block`)
|
|
38
|
-
|
|
39
|
-
### Sidebar
|
|
40
|
-
|
|
41
|
-
El componente Sidebar proporciona navegación lateral con soporte para carpetas y elementos de menú.
|
|
42
|
-
|
|
43
|
-
#### Props
|
|
44
|
-
|
|
45
|
-
- `isOpen`: Controla si el sidebar está abierto
|
|
46
|
-
- `onClose`: Función que se ejecuta al cerrar el sidebar
|
|
47
|
-
- `menuItems`: Array de elementos del menú
|
|
48
|
-
- `overlayClassName`: Clases CSS para el overlay (por defecto: "fixed inset-0 bg-black bg-opacity-25 z-40")
|
|
49
|
-
|
|
50
|
-
#### Uso
|
|
51
|
-
|
|
52
|
-
```jsx
|
|
53
|
-
<Sidebar
|
|
54
|
-
isOpen={isSidebarOpen}
|
|
55
|
-
onClose={() => setIsSidebarOpen(false)}
|
|
56
|
-
menuItems={menuItems}
|
|
57
|
-
systemName="PASS"
|
|
58
|
-
activePath="/"
|
|
59
|
-
onNavigate={(path) => console.log('Navegando a:', path)}
|
|
60
|
-
/>
|
|
61
|
-
```
|
|
62
|
-
|
|
63
|
-
## Problemas Solucionados
|
|
64
|
-
|
|
65
|
-
### 1. Overlay del Sidebar
|
|
66
|
-
|
|
67
|
-
**Problema**: El overlay estaba completamente negro en lugar de ser semi-transparente.
|
|
68
|
-
|
|
69
|
-
**Solución**: Cambiado de `bg-opacity-50` a `bg-opacity-25` para que sea menos oscuro.
|
|
70
|
-
|
|
71
|
-
```jsx
|
|
72
|
-
// Antes
|
|
73
|
-
overlayClassName = "fixed inset-0 bg-black bg-opacity-50 z-40"
|
|
74
|
-
|
|
75
|
-
// Después
|
|
76
|
-
overlayClassName = "fixed inset-0 bg-black bg-opacity-25 z-40"
|
|
77
|
-
```
|
|
78
|
-
|
|
79
|
-
### 2. Descripción del Header
|
|
80
|
-
|
|
81
|
-
**Problema**: La descripción no aparecía en el Header.
|
|
82
|
-
|
|
83
|
-
**Solución**: La descripción se muestra en dos lugares diferentes:
|
|
84
|
-
|
|
85
|
-
1. **systemSubtitle**: En el lado izquierdo debajo del nombre del sistema
|
|
86
|
-
2. **description**: En el lado derecho cuando `showPageInfo` es `true`
|
|
87
|
-
|
|
88
|
-
**Importante**: La descripción del lado derecho solo es visible en pantallas medianas y grandes debido a la clase `hidden sm:block`.
|
|
89
|
-
|
|
90
|
-
## Instalación
|
|
91
|
-
|
|
92
|
-
```bash
|
|
93
|
-
npm install botech-library
|
|
94
|
-
```
|
|
95
|
-
|
|
96
|
-
## Uso
|
|
97
|
-
|
|
98
|
-
```jsx
|
|
99
|
-
import { Header, Sidebar } from 'botech-library';
|
|
100
|
-
|
|
101
|
-
// Tu componente aquí...
|
|
102
|
-
```
|
|
103
|
-
|
|
104
|
-
## Desarrollo
|
|
105
|
-
|
|
106
|
-
```bash
|
|
107
|
-
npm install
|
|
108
|
-
npm run build
|
|
109
|
-
```
|
|
110
|
-
|
|
111
|
-
## Estructura del Proyecto
|
|
112
|
-
|
|
113
|
-
```
|
|
114
|
-
src/
|
|
115
|
-
├── components/
|
|
116
|
-
│ ├── Header/
|
|
117
|
-
│ │ ├── Header.tsx
|
|
118
|
-
│ │ ├── types.ts
|
|
119
|
-
│ │ └── index.ts
|
|
120
|
-
│ ├── Sidebar/
|
|
121
|
-
│ │ ├── Sidebar.tsx
|
|
122
|
-
│ │ ├── types.ts
|
|
123
|
-
│ │ └── index.ts
|
|
124
|
-
│ └── index.ts
|
|
1
|
+
# Botech Library
|
|
2
|
+
|
|
3
|
+
Una biblioteca de componentes React para sistemas escolares.
|
|
4
|
+
|
|
5
|
+
## Componentes
|
|
6
|
+
|
|
7
|
+
### Header
|
|
8
|
+
|
|
9
|
+
El componente Header muestra información del sistema y la página actual.
|
|
10
|
+
|
|
11
|
+
#### Props
|
|
12
|
+
|
|
13
|
+
- `title`: Título de la página actual
|
|
14
|
+
- `description`: Descripción de la página actual
|
|
15
|
+
- `systemName`: Nombre del sistema (por defecto: "PASS")
|
|
16
|
+
- `systemSubtitle`: Subtítulo del sistema (por defecto: "Sistema Escolar")
|
|
17
|
+
- `showPageInfo`: Controla si se muestra la información de la página en el lado derecho (por defecto: true)
|
|
18
|
+
- `onMenuToggle`: Función que se ejecuta al hacer clic en el botón de menú
|
|
19
|
+
|
|
20
|
+
#### Uso
|
|
21
|
+
|
|
22
|
+
```jsx
|
|
23
|
+
<Header
|
|
24
|
+
title="Dashboard"
|
|
25
|
+
description="Panel principal del sistema"
|
|
26
|
+
systemName="PASS"
|
|
27
|
+
systemSubtitle="Sistema Escolar"
|
|
28
|
+
onMenuToggle={() => setIsSidebarOpen(true)}
|
|
29
|
+
showPageInfo={true}
|
|
30
|
+
/>
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
#### Notas importantes
|
|
34
|
+
|
|
35
|
+
- La descripción se muestra en **dos lugares**:
|
|
36
|
+
1. **Lado izquierdo**: `systemSubtitle` aparece debajo del nombre del sistema
|
|
37
|
+
2. **Lado derecho**: `description` aparece cuando `showPageInfo` es `true` (solo visible en pantallas medianas y grandes por la clase `hidden sm:block`)
|
|
38
|
+
|
|
39
|
+
### Sidebar
|
|
40
|
+
|
|
41
|
+
El componente Sidebar proporciona navegación lateral con soporte para carpetas y elementos de menú.
|
|
42
|
+
|
|
43
|
+
#### Props
|
|
44
|
+
|
|
45
|
+
- `isOpen`: Controla si el sidebar está abierto
|
|
46
|
+
- `onClose`: Función que se ejecuta al cerrar el sidebar
|
|
47
|
+
- `menuItems`: Array de elementos del menú
|
|
48
|
+
- `overlayClassName`: Clases CSS para el overlay (por defecto: "fixed inset-0 bg-black bg-opacity-25 z-40")
|
|
49
|
+
|
|
50
|
+
#### Uso
|
|
51
|
+
|
|
52
|
+
```jsx
|
|
53
|
+
<Sidebar
|
|
54
|
+
isOpen={isSidebarOpen}
|
|
55
|
+
onClose={() => setIsSidebarOpen(false)}
|
|
56
|
+
menuItems={menuItems}
|
|
57
|
+
systemName="PASS"
|
|
58
|
+
activePath="/"
|
|
59
|
+
onNavigate={(path) => console.log('Navegando a:', path)}
|
|
60
|
+
/>
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
## Problemas Solucionados
|
|
64
|
+
|
|
65
|
+
### 1. Overlay del Sidebar
|
|
66
|
+
|
|
67
|
+
**Problema**: El overlay estaba completamente negro en lugar de ser semi-transparente.
|
|
68
|
+
|
|
69
|
+
**Solución**: Cambiado de `bg-opacity-50` a `bg-opacity-25` para que sea menos oscuro.
|
|
70
|
+
|
|
71
|
+
```jsx
|
|
72
|
+
// Antes
|
|
73
|
+
overlayClassName = "fixed inset-0 bg-black bg-opacity-50 z-40"
|
|
74
|
+
|
|
75
|
+
// Después
|
|
76
|
+
overlayClassName = "fixed inset-0 bg-black bg-opacity-25 z-40"
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
### 2. Descripción del Header
|
|
80
|
+
|
|
81
|
+
**Problema**: La descripción no aparecía en el Header.
|
|
82
|
+
|
|
83
|
+
**Solución**: La descripción se muestra en dos lugares diferentes:
|
|
84
|
+
|
|
85
|
+
1. **systemSubtitle**: En el lado izquierdo debajo del nombre del sistema
|
|
86
|
+
2. **description**: En el lado derecho cuando `showPageInfo` es `true`
|
|
87
|
+
|
|
88
|
+
**Importante**: La descripción del lado derecho solo es visible en pantallas medianas y grandes debido a la clase `hidden sm:block`.
|
|
89
|
+
|
|
90
|
+
## Instalación
|
|
91
|
+
|
|
92
|
+
```bash
|
|
93
|
+
npm install botech-library
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
## Uso
|
|
97
|
+
|
|
98
|
+
```jsx
|
|
99
|
+
import { Header, Sidebar } from 'botech-library';
|
|
100
|
+
|
|
101
|
+
// Tu componente aquí...
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
## Desarrollo
|
|
105
|
+
|
|
106
|
+
```bash
|
|
107
|
+
npm install
|
|
108
|
+
npm run build
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
## Estructura del Proyecto
|
|
112
|
+
|
|
113
|
+
```
|
|
114
|
+
src/
|
|
115
|
+
├── components/
|
|
116
|
+
│ ├── Header/
|
|
117
|
+
│ │ ├── Header.tsx
|
|
118
|
+
│ │ ├── types.ts
|
|
119
|
+
│ │ └── index.ts
|
|
120
|
+
│ ├── Sidebar/
|
|
121
|
+
│ │ ├── Sidebar.tsx
|
|
122
|
+
│ │ ├── types.ts
|
|
123
|
+
│ │ └── index.ts
|
|
124
|
+
│ └── index.ts
|
|
125
125
|
```
|