@codeplex-sac/feedback 0.1.2 → 0.1.5
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 +227 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,227 @@
|
|
|
1
|
+
# @codeplex-sac/feedback
|
|
2
|
+
|
|
3
|
+
Componentes de retroalimentación para aplicaciones React: notificaciones, diálogos, modales y tooltips avanzados. Basado en **Material UI** con estilos premium (glassmorphism, animaciones).
|
|
4
|
+
|
|
5
|
+
## Instalación
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
bun add @codeplex-sac/feedback @codeplex-sac/tema @mui/material @emotion/react @emotion/styled
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
> [!IMPORTANT]
|
|
12
|
+
> Envuelve la aplicación con `CodeplexProveedorTema` de `@codeplex-sac/tema` para que los estilos funcionen correctamente.
|
|
13
|
+
|
|
14
|
+
---
|
|
15
|
+
|
|
16
|
+
## Componentes
|
|
17
|
+
|
|
18
|
+
---
|
|
19
|
+
|
|
20
|
+
### CodeplexNotificacion
|
|
21
|
+
|
|
22
|
+
Toast / Snackbar con barra de progreso animada y múltiples estilos visuales.
|
|
23
|
+
|
|
24
|
+
**Ejemplo:**
|
|
25
|
+
```tsx
|
|
26
|
+
import { CodeplexNotificacion } from '@codeplex-sac/feedback';
|
|
27
|
+
import { useState } from 'react';
|
|
28
|
+
|
|
29
|
+
export const Ejemplo = () => {
|
|
30
|
+
const [abierto, setAbierto] = useState(false);
|
|
31
|
+
|
|
32
|
+
return (
|
|
33
|
+
<>
|
|
34
|
+
<button onClick={() => setAbierto(true)}>Mostrar notificación</button>
|
|
35
|
+
<CodeplexNotificacion
|
|
36
|
+
abierto={abierto}
|
|
37
|
+
mensaje="Cambios guardados correctamente."
|
|
38
|
+
variante="exito"
|
|
39
|
+
estilo="cristal"
|
|
40
|
+
mostrarProgreso
|
|
41
|
+
alCerrar={() => setAbierto(false)}
|
|
42
|
+
/>
|
|
43
|
+
</>
|
|
44
|
+
);
|
|
45
|
+
};
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
**Props:**
|
|
49
|
+
| Propiedad | Tipo | Por defecto | Descripción |
|
|
50
|
+
| :--- | :--- | :--- | :--- |
|
|
51
|
+
| `abierto` | `boolean` | — | Controla la visibilidad. |
|
|
52
|
+
| `mensaje` | `string \| ReactNode` | — | Texto de la notificación. |
|
|
53
|
+
| `titulo` | `string` | — | Título en negrita sobre el mensaje. |
|
|
54
|
+
| `variante` | `'info' \| 'exito' \| 'advertencia' \| 'error'` | `'info'` | Color e icono. |
|
|
55
|
+
| `estilo` | `'solido' \| 'suave' \| 'cristal' \| 'contorno'` | `'suave'` | Acabado visual. |
|
|
56
|
+
| `posicion` | `'arriba-izquierda' \| 'arriba-centro' \| 'arriba-derecha' \| 'abajo-izquierda' \| 'abajo-centro' \| 'abajo-derecha'` | `'abajo-izquierda'` | Posición en pantalla. |
|
|
57
|
+
| `animacion` | `'deslizar' \| 'crecer' \| 'desvanecer'` | `'deslizar'` | Tipo de animación de entrada. |
|
|
58
|
+
| `duracion` | `number \| null` | `6000` | Tiempo en ms antes del auto-cierre. `null` desactiva el auto-cierre. |
|
|
59
|
+
| `mostrarProgreso` | `boolean` | `false` | Muestra barra de tiempo restante. |
|
|
60
|
+
| `cerrable` | `boolean` | `true` | Muestra botón de cierre. |
|
|
61
|
+
| `accion` | `ReactNode` | — | Slot para botón de acción personalizado. |
|
|
62
|
+
| `mostrarIcono` | `boolean` | `true` | Muestra el icono de variante. |
|
|
63
|
+
| `alCerrar` | `() => void` | — | Callback al cerrarse. |
|
|
64
|
+
|
|
65
|
+
---
|
|
66
|
+
|
|
67
|
+
### CodeplexDialogo
|
|
68
|
+
|
|
69
|
+
Ventana modal para confirmaciones y formularios, con subcomponentes de composición.
|
|
70
|
+
|
|
71
|
+
**Componentes incluidos:** `CodeplexDialogo`, `CodeplexDialogoTitulo`, `CodeplexDialogoContenido`, `CodeplexDialogoTexto`, `CodeplexDialogoAcciones`
|
|
72
|
+
|
|
73
|
+
**Ejemplo:**
|
|
74
|
+
```tsx
|
|
75
|
+
import {
|
|
76
|
+
CodeplexDialogo,
|
|
77
|
+
CodeplexDialogoTitulo,
|
|
78
|
+
CodeplexDialogoContenido,
|
|
79
|
+
CodeplexDialogoTexto,
|
|
80
|
+
CodeplexDialogoAcciones,
|
|
81
|
+
} from '@codeplex-sac/feedback';
|
|
82
|
+
import { CodeplexBoton } from '@codeplex-sac/ui';
|
|
83
|
+
|
|
84
|
+
export const Ejemplo = () => (
|
|
85
|
+
<CodeplexDialogo abierto={true} alCerrar={() => {}}>
|
|
86
|
+
<CodeplexDialogoTitulo>Confirmar eliminación</CodeplexDialogoTitulo>
|
|
87
|
+
<CodeplexDialogoContenido>
|
|
88
|
+
<CodeplexDialogoTexto>
|
|
89
|
+
¿Estás seguro de que deseas eliminar este registro? Esta acción no se puede deshacer.
|
|
90
|
+
</CodeplexDialogoTexto>
|
|
91
|
+
</CodeplexDialogoContenido>
|
|
92
|
+
<CodeplexDialogoAcciones>
|
|
93
|
+
<CodeplexBoton variante="fantasma" texto="Cancelar" alHacerClick={() => {}} />
|
|
94
|
+
<CodeplexBoton variante="peligro" texto="Eliminar" alHacerClick={() => {}} />
|
|
95
|
+
</CodeplexDialogoAcciones>
|
|
96
|
+
</CodeplexDialogo>
|
|
97
|
+
);
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
**Props de `CodeplexDialogo`:**
|
|
101
|
+
| Propiedad | Tipo | Por defecto | Descripción |
|
|
102
|
+
| :--- | :--- | :--- | :--- |
|
|
103
|
+
| `abierto` | `boolean` | — | Controla la visibilidad del diálogo. |
|
|
104
|
+
| `alCerrar` | `() => void` | — | Callback al cerrar (clic en fondo o Esc). |
|
|
105
|
+
| `anchoMaximo` | `'diminuto' \| 'pequeno' \| 'mediano' \| 'grande' \| 'enorme'` | `'pequeno'` | Ancho máximo del panel. |
|
|
106
|
+
| `anchoCompleto` | `boolean` | `false` | Ocupa el ancho máximo definido. |
|
|
107
|
+
| `pantallaCompleta` | `boolean` | `false` | Ocupa toda la pantalla. |
|
|
108
|
+
|
|
109
|
+
---
|
|
110
|
+
|
|
111
|
+
### CodeplexModal
|
|
112
|
+
|
|
113
|
+
Contenedor modal de propósito general con cabecera y botón de cierre integrados.
|
|
114
|
+
|
|
115
|
+
**Ejemplo:**
|
|
116
|
+
```tsx
|
|
117
|
+
import { CodeplexModal } from '@codeplex-sac/feedback';
|
|
118
|
+
import { useState } from 'react';
|
|
119
|
+
|
|
120
|
+
export const Ejemplo = () => {
|
|
121
|
+
const [abierto, setAbierto] = useState(false);
|
|
122
|
+
|
|
123
|
+
return (
|
|
124
|
+
<>
|
|
125
|
+
<button onClick={() => setAbierto(true)}>Abrir modal</button>
|
|
126
|
+
<CodeplexModal
|
|
127
|
+
abierto={abierto}
|
|
128
|
+
titulo="Detalles del pedido"
|
|
129
|
+
alCerrar={() => setAbierto(false)}
|
|
130
|
+
>
|
|
131
|
+
<p>Contenido del modal</p>
|
|
132
|
+
</CodeplexModal>
|
|
133
|
+
</>
|
|
134
|
+
);
|
|
135
|
+
};
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
**Props:**
|
|
139
|
+
| Propiedad | Tipo | Por defecto | Descripción |
|
|
140
|
+
| :--- | :--- | :--- | :--- |
|
|
141
|
+
| `abierto` | `boolean` | — | Controla la visibilidad. |
|
|
142
|
+
| `titulo` | `ReactNode` | — | Título de la cabecera. |
|
|
143
|
+
| `alCerrar` | `() => void` | — | Callback al cerrar. |
|
|
144
|
+
| `anchoMaximo` | `'diminuto' \| 'pequeno' \| 'mediano' \| 'grande' \| 'enorme'` | `'pequeno'` | Ancho máximo del panel. |
|
|
145
|
+
| `anchoCompleto` | `boolean` | `true` | Ocupa el ancho máximo. |
|
|
146
|
+
| `children` | `ReactNode` | — | Contenido interno del modal. |
|
|
147
|
+
|
|
148
|
+
---
|
|
149
|
+
|
|
150
|
+
### CodeplexMensajeEmergente
|
|
151
|
+
|
|
152
|
+
Tooltip avanzado con estilos cristal y múltiples animaciones (Zoom, Fade, Grow).
|
|
153
|
+
|
|
154
|
+
**Ejemplo:**
|
|
155
|
+
```tsx
|
|
156
|
+
import { CodeplexMensajeEmergente } from '@codeplex-sac/feedback';
|
|
157
|
+
import { CodeplexBoton } from '@codeplex-sac/ui';
|
|
158
|
+
|
|
159
|
+
export const Ejemplo = () => (
|
|
160
|
+
<CodeplexMensajeEmergente
|
|
161
|
+
contenido="Guarda los cambios del formulario"
|
|
162
|
+
lado="arriba"
|
|
163
|
+
color="oscuro"
|
|
164
|
+
>
|
|
165
|
+
<CodeplexBoton texto="Guardar" variante="primario" />
|
|
166
|
+
</CodeplexMensajeEmergente>
|
|
167
|
+
);
|
|
168
|
+
```
|
|
169
|
+
|
|
170
|
+
**Props:**
|
|
171
|
+
| Propiedad | Tipo | Por defecto | Descripción |
|
|
172
|
+
| :--- | :--- | :--- | :--- |
|
|
173
|
+
| `contenido` | `ReactNode` | — | Texto o elemento dentro del tooltip. |
|
|
174
|
+
| `lado` | `'arriba' \| 'abajo' \| 'izquierda' \| 'derecha'` | `'arriba'` | Posición relativa al hijo. |
|
|
175
|
+
| `color` | `'oscuro' \| 'claro' \| 'primario' \| 'azul'` | `'oscuro'` | Esquema de color del globo. |
|
|
176
|
+
| `distancia` | `number` | `8` | Separación en px del elemento base. |
|
|
177
|
+
| `children` | `ReactNode` | — | Elemento que activa el tooltip. |
|
|
178
|
+
|
|
179
|
+
---
|
|
180
|
+
|
|
181
|
+
### CodeplexVentanaEmergente
|
|
182
|
+
|
|
183
|
+
Popover completo con cabecera, contenido libre y control de posicionamiento.
|
|
184
|
+
|
|
185
|
+
**Ejemplo:**
|
|
186
|
+
```tsx
|
|
187
|
+
import { CodeplexVentanaEmergente } from '@codeplex-sac/feedback';
|
|
188
|
+
import { useState } from 'react';
|
|
189
|
+
|
|
190
|
+
export const Ejemplo = () => {
|
|
191
|
+
const [ancla, setAncla] = useState<HTMLButtonElement | null>(null);
|
|
192
|
+
|
|
193
|
+
return (
|
|
194
|
+
<>
|
|
195
|
+
<button onClick={(e) => setAncla(e.currentTarget)}>Abrir</button>
|
|
196
|
+
<CodeplexVentanaEmergente
|
|
197
|
+
abierto={Boolean(ancla)}
|
|
198
|
+
elementoAncla={ancla}
|
|
199
|
+
titulo="Filtros avanzados"
|
|
200
|
+
alCerrar={() => setAncla(null)}
|
|
201
|
+
>
|
|
202
|
+
<p>Opciones de filtro aquí</p>
|
|
203
|
+
</CodeplexVentanaEmergente>
|
|
204
|
+
</>
|
|
205
|
+
);
|
|
206
|
+
};
|
|
207
|
+
```
|
|
208
|
+
|
|
209
|
+
**Props:**
|
|
210
|
+
| Propiedad | Tipo | Por defecto | Descripción |
|
|
211
|
+
| :--- | :--- | :--- | :--- |
|
|
212
|
+
| `abierto` | `boolean` | — | Controla la visibilidad. |
|
|
213
|
+
| `elementoAncla` | `HTMLElement \| null` | — | Elemento de referencia para posicionarse. |
|
|
214
|
+
| `titulo` | `ReactNode` | — | Cabecera del panel. |
|
|
215
|
+
| `alCerrar` | `() => void` | — | Callback al cerrar. |
|
|
216
|
+
| `colocacion` | `'arriba' \| 'arriba-inicio' \| 'arriba-fin' \| 'abajo' \| 'abajo-inicio' \| 'abajo-fin' \| 'izquierda' \| 'derecha'` | `'abajo-inicio'` | Posición relativa al ancla. |
|
|
217
|
+
| `children` | `ReactNode` | — | Contenido del panel. |
|
|
218
|
+
|
|
219
|
+
---
|
|
220
|
+
|
|
221
|
+
## Personalización
|
|
222
|
+
|
|
223
|
+
Todos los componentes heredan la configuración de `CodeplexProveedorTema`. El estilo `cristal` usa `backdropFilter` y se adapta automáticamente al modo oscuro.
|
|
224
|
+
|
|
225
|
+
## Licencia
|
|
226
|
+
|
|
227
|
+
Propiedad privada de **Codeplex SAC**. Todos los derechos reservados.
|