@dropi/react-native-design-system 0.1.9 → 0.1.11
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 +121 -123
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,125 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
# Botones
|
|
3
|
-
### Default Button:
|
|
4
|
-
El componente `DefaultButton` es el botón base del sistema de diseño. Está diseñado para ser **consistente, flexible y accesible**, permitiendo manejar variaciones visuales (`variant`), tamaños (`size`), e iconos opcionales antes o después del texto. Además, integra estados de desactivación y carga sin perder la coherencia visual.
|
|
5
|
-
### 📦 Importación:
|
|
6
|
-
```
|
|
7
|
-
import { DefaultButton } from '@dropi/react-native-design-system';
|
|
8
|
-
```
|
|
9
|
-
### ⚙️ Props:
|
|
10
|
-
```
|
|
11
|
-
| Prop | Tipo | Descripción |
|
|
12
|
-
| ----------------- | ---------------------------------------- | -------------------------------------------------------------------------------------------- |
|
|
13
|
-
| `label` | `string` | Texto visible del botón. |
|
|
14
|
-
| `variant` | `'primary' | 'secondary' | 'tertiary' | Define el estilo visual del botón. |
|
|
15
|
-
| `size` | `'small' | 'normal' \| 'large'` | Controla el tamaño del botón y del texto. |
|
|
16
|
-
| `preIcon` | `IconName` | (Opcional) Ícono mostrado antes del texto. |
|
|
17
|
-
| `postIcon` | `IconName` | (Opcional) Ícono mostrado después del texto. |
|
|
18
|
-
| `disabled` | `boolean` | (Opcional) Desactiva la interacción y reduce la opacidad. |
|
|
19
|
-
| `isMakingRequest` | `boolean` | (Opcional) Muestra un `ActivityIndicator` en lugar del texto mientras se realiza una acción. |
|
|
20
|
-
| `...rest` | `TouchableOpacityProps` | Props nativas de React Native para eventos o estilos adicionales. |
|
|
21
|
-
|
|
22
|
-
```
|
|
23
|
-
### 🧩 Ejemplos de uso:
|
|
24
|
-
```
|
|
25
|
-
<DefaultButton
|
|
26
|
-
label="Guardar cambios"
|
|
27
|
-
variant="primary"
|
|
28
|
-
size="normal"
|
|
29
|
-
onPress={handleSave}
|
|
30
|
-
/>
|
|
31
|
-
|
|
32
|
-
<DefaultButton
|
|
33
|
-
label="Cancelar"
|
|
34
|
-
variant="secondary"
|
|
35
|
-
size="small"
|
|
36
|
-
preIcon="IconName"
|
|
37
|
-
onPress={handleCancel}
|
|
38
|
-
/>
|
|
39
|
-
|
|
40
|
-
<DefaultButton
|
|
41
|
-
label="Cargando..."
|
|
42
|
-
variant="primary"
|
|
43
|
-
size="large"
|
|
44
|
-
isMakingRequest
|
|
45
|
-
/>
|
|
46
|
-
```
|
|
47
|
-
|
|
48
|
-
## Feedback Button
|
|
49
|
-
|
|
50
|
-
El `FeedbackButton` es un botón semántico diseñado para comunicar **estados del sistema** (éxito, error, advertencia, información) a través de una codificación cromática clara y reutilizable. Combina tres variantes visuales (`primary`, `secondary`, `text`) con tres tamaños (`small`, `normal`, `large`), soporte para iconos antes y después del texto, y control de estados (deshabilitado / en proceso). Su propósito es facilitar acciones que requieren **retroalimentación inmediata** al usuario sin perder la consistencia tipográfica y espacial del sistema; por eso deriva sus colores de los tokens `Success/Error/Warning/Info` y reutiliza `Label`, `spacing` y `radius` para garantizar uniformidad en toda la interfaz.
|
|
51
|
-
|
|
52
|
-
### 📦 Importación:
|
|
53
|
-
```
|
|
54
|
-
import { FeedbackButton } from '@dropi/react-native-design-system'
|
|
55
|
-
```
|
|
56
|
-
### ⚙️ Props:
|
|
57
|
-
```
|
|
58
|
-
| Prop | Tipo | Descripción |
|
|
59
|
-
| ------------------- | --------------------------------------------- | -------------------------------------------------------------- |
|
|
60
|
-
| `label` | `string` | Texto visible en el botón. |
|
|
61
|
-
| `feedbackType` | `'success' \| 'error' \| 'warning' \| 'info'` | Define el tipo de feedback visual (color principal del botón). |
|
|
62
|
-
| `variant` | `'primary' \| 'secondary' \| 'text'` | Determina el estilo del botón (relleno, borde o texto plano). |
|
|
63
|
-
| `size` | `'small' \| 'normal' \| 'large'` | Ajusta padding, tamaño de ícono y tipografía. |
|
|
64
|
-
| `preIcon` | `IconName` *(opcional)* | Ícono mostrado antes del texto. |
|
|
65
|
-
| `postIcon` | `IconName` *(opcional)* | Ícono mostrado después del texto. |
|
|
66
|
-
| `disabled` | `boolean` *(opcional)* | Desactiva interacción y aplica opacidad reducida. |
|
|
67
|
-
| `isMakingRerequest` | `boolean` *(opcional)* | Indica que hay una solicitud o acción en curso. |
|
|
68
|
-
```
|
|
69
|
-
### 🧩 Ejemplos de uso:
|
|
70
|
-
```Typescript
|
|
71
|
-
<FeedbackButton
|
|
72
|
-
label="Reintentar"
|
|
73
|
-
feedbackType="error"
|
|
74
|
-
variant="primary"
|
|
75
|
-
size="normal"
|
|
76
|
-
preIcon="refresh"
|
|
77
|
-
onPress={() => console.log('Reintentando acción...')}
|
|
78
|
-
/>
|
|
79
|
-
```
|
|
80
|
-
|
|
81
|
-
## Text Button
|
|
82
|
-
|
|
83
|
-
El `TextButton` es un botón **ligero y no intrusivo**, pensado para acciones secundarias donde el énfasis visual debe recaer en el texto más que en el fondo. Puede incluir íconos antes o después del texto y adaptarse a diferentes tamaños (`small`, `normal`, `large`). Su diseño se basa en la simplicidad y flexibilidad: hereda la tipografía desde `Label`, respeta los espacios del sistema (`spacing`) y se ajusta automáticamente en tablets gracias a `isTablet`. Además, permite sobrescribir el color con `replaceColor` para integrarse fácilmente en contextos personalizados.
|
|
84
|
-
|
|
85
|
-
### 📦 Importación:
|
|
86
|
-
```
|
|
87
|
-
import { TextButton } from "@dropi/react-native-design-system";
|
|
88
|
-
```
|
|
89
|
-
### ⚙️ Props:
|
|
90
|
-
```
|
|
91
|
-
| Prop | Tipo | Descripción |
|
|
92
|
-
| -------------- | -------------------------------- | ------------------------------------------------- |
|
|
93
|
-
| `label` | `string` | Texto visible dentro del botón. |
|
|
94
|
-
| `variant` | `'primary' \| 'secondary'` | Define el color base del texto e íconos. |
|
|
95
|
-
| `size` | `'small' \| 'normal' \| 'large'` | Controla el tamaño del texto e íconos. |
|
|
96
|
-
| `preIcon` | `IconName` | Ícono que aparece antes del texto. |
|
|
97
|
-
| `postIcon` | `IconName` | Ícono que aparece después del texto. |
|
|
98
|
-
| `replaceColor` | `string` | Sobrescribe el color del texto y los íconos. |
|
|
99
|
-
| `...rest` | `TouchableOpacityProps` | Hereda cualquier propiedad de `TouchableOpacity`. |
|
|
100
|
-
```
|
|
101
|
-
### 🧩 Ejemplos de uso:
|
|
102
|
-
```
|
|
103
|
-
<TextButton
|
|
104
|
-
label="Ver más"
|
|
105
|
-
variant="primary"
|
|
106
|
-
size="normal"
|
|
107
|
-
preIcon="IconName"
|
|
108
|
-
onPress={() => console.log("Ver más presionado")}
|
|
109
|
-
/>
|
|
110
|
-
|
|
111
|
-
<TextButton
|
|
112
|
-
label="Eliminar"
|
|
113
|
-
variant="secondary"
|
|
114
|
-
size="small"
|
|
115
|
-
replaceColor="#FF3B30"
|
|
116
|
-
postIcon="IconName"
|
|
117
|
-
onPress={() => console.log("Eliminar presionado")}
|
|
118
|
-
/>
|
|
119
|
-
|
|
120
|
-
```
|
|
121
|
-
|
|
122
|
-
|
|
1
|
+
#
|
|
123
2
|
-
|
|
124
3
|
|
|
125
4
|
El **Design System de Dropi** para aplicaciones **React Native**. Este paquete reúne la base visual y funcional de nuestros productos móviles, ofreciendo **tokens de diseño, componentes reutilizables y patrones consistentes** para mantener la coherencia en la experiencia de usuario. Su objetivo es simplificar el desarrollo, acelerar la implementación de interfaces y garantizar que cada proyecto Dropi mantenga una identidad visual sólida y escalable.
|
|
@@ -240,7 +119,6 @@ De esta forma, el sistema puede alternar entre temas sin perder coherencia crom
|
|
|
240
119
|
|
|
241
120
|
# Átomos
|
|
242
121
|
# Textos
|
|
243
|
-
-
|
|
244
122
|
|
|
245
123
|
|
|
246
124
|
```Typescript
|
|
@@ -329,3 +207,123 @@ import { Label } from '@dropi/react-native-design-system';
|
|
|
329
207
|
<Label type="s" style={{ color: '#999' }}>En proceso</Label>
|
|
330
208
|
```
|
|
331
209
|
|
|
210
|
+
|
|
211
|
+
# Botones
|
|
212
|
+
### Default Button:
|
|
213
|
+
El componente `DefaultButton` es el botón base del sistema de diseño. Está diseñado para ser **consistente, flexible y accesible**, permitiendo manejar variaciones visuales (`variant`), tamaños (`size`), e iconos opcionales antes o después del texto. Además, integra estados de desactivación y carga sin perder la coherencia visual.
|
|
214
|
+
### 📦 Importación:
|
|
215
|
+
```
|
|
216
|
+
import { DefaultButton } from '@dropi/react-native-design-system';
|
|
217
|
+
```
|
|
218
|
+
### ⚙️ Props:
|
|
219
|
+
```
|
|
220
|
+
| Prop | Tipo | Descripción |
|
|
221
|
+
| ----------------- | ---------------------------------------- | -------------------------------------------------------------------------------------------- |
|
|
222
|
+
| `label` | `string` | Texto visible del botón. |
|
|
223
|
+
| `variant` | `'primary' | 'secondary' | 'tertiary' | Define el estilo visual del botón. |
|
|
224
|
+
| `size` | `'small' | 'normal' \| 'large'` | Controla el tamaño del botón y del texto. |
|
|
225
|
+
| `preIcon` | `IconName` | (Opcional) Ícono mostrado antes del texto. |
|
|
226
|
+
| `postIcon` | `IconName` | (Opcional) Ícono mostrado después del texto. |
|
|
227
|
+
| `disabled` | `boolean` | (Opcional) Desactiva la interacción y reduce la opacidad. |
|
|
228
|
+
| `isMakingRequest` | `boolean` | (Opcional) Muestra un `ActivityIndicator` en lugar del texto mientras se realiza una acción. |
|
|
229
|
+
| `...rest` | `TouchableOpacityProps` | Props nativas de React Native para eventos o estilos adicionales. |
|
|
230
|
+
|
|
231
|
+
```
|
|
232
|
+
### 🧩 Ejemplos de uso:
|
|
233
|
+
```
|
|
234
|
+
<DefaultButton
|
|
235
|
+
label="Guardar cambios"
|
|
236
|
+
variant="primary"
|
|
237
|
+
size="normal"
|
|
238
|
+
onPress={handleSave}
|
|
239
|
+
/>
|
|
240
|
+
|
|
241
|
+
<DefaultButton
|
|
242
|
+
label="Cancelar"
|
|
243
|
+
variant="secondary"
|
|
244
|
+
size="small"
|
|
245
|
+
preIcon="IconName"
|
|
246
|
+
onPress={handleCancel}
|
|
247
|
+
/>
|
|
248
|
+
|
|
249
|
+
<DefaultButton
|
|
250
|
+
label="Cargando..."
|
|
251
|
+
variant="primary"
|
|
252
|
+
size="large"
|
|
253
|
+
isMakingRequest
|
|
254
|
+
/>
|
|
255
|
+
```
|
|
256
|
+
|
|
257
|
+
## Feedback Button
|
|
258
|
+
|
|
259
|
+
El `FeedbackButton` es un botón semántico diseñado para comunicar **estados del sistema** (éxito, error, advertencia, información) a través de una codificación cromática clara y reutilizable. Combina tres variantes visuales (`primary`, `secondary`, `text`) con tres tamaños (`small`, `normal`, `large`), soporte para iconos antes y después del texto, y control de estados (deshabilitado / en proceso). Su propósito es facilitar acciones que requieren **retroalimentación inmediata** al usuario sin perder la consistencia tipográfica y espacial del sistema; por eso deriva sus colores de los tokens `Success/Error/Warning/Info` y reutiliza `Label`, `spacing` y `radius` para garantizar uniformidad en toda la interfaz.
|
|
260
|
+
|
|
261
|
+
### 📦 Importación:
|
|
262
|
+
```
|
|
263
|
+
import { FeedbackButton } from '@dropi/react-native-design-system'
|
|
264
|
+
```
|
|
265
|
+
### ⚙️ Props:
|
|
266
|
+
```
|
|
267
|
+
| Prop | Tipo | Descripción |
|
|
268
|
+
| ------------------- | --------------------------------------------- | -------------------------------------------------------------- |
|
|
269
|
+
| `label` | `string` | Texto visible en el botón. |
|
|
270
|
+
| `feedbackType` | `'success' \| 'error' \| 'warning' \| 'info'` | Define el tipo de feedback visual (color principal del botón). |
|
|
271
|
+
| `variant` | `'primary' \| 'secondary' \| 'text'` | Determina el estilo del botón (relleno, borde o texto plano). |
|
|
272
|
+
| `size` | `'small' \| 'normal' \| 'large'` | Ajusta padding, tamaño de ícono y tipografía. |
|
|
273
|
+
| `preIcon` | `IconName` *(opcional)* | Ícono mostrado antes del texto. |
|
|
274
|
+
| `postIcon` | `IconName` *(opcional)* | Ícono mostrado después del texto. |
|
|
275
|
+
| `disabled` | `boolean` *(opcional)* | Desactiva interacción y aplica opacidad reducida. |
|
|
276
|
+
| `isMakingRerequest` | `boolean` *(opcional)* | Indica que hay una solicitud o acción en curso. |
|
|
277
|
+
```
|
|
278
|
+
### 🧩 Ejemplos de uso:
|
|
279
|
+
```Typescript
|
|
280
|
+
<FeedbackButton
|
|
281
|
+
label="Reintentar"
|
|
282
|
+
feedbackType="error"
|
|
283
|
+
variant="primary"
|
|
284
|
+
size="normal"
|
|
285
|
+
preIcon="refresh"
|
|
286
|
+
onPress={() => console.log('Reintentando acción...')}
|
|
287
|
+
/>
|
|
288
|
+
```
|
|
289
|
+
|
|
290
|
+
## Text Button
|
|
291
|
+
|
|
292
|
+
El `TextButton` es un botón **ligero y no intrusivo**, pensado para acciones secundarias donde el énfasis visual debe recaer en el texto más que en el fondo. Puede incluir íconos antes o después del texto y adaptarse a diferentes tamaños (`small`, `normal`, `large`). Su diseño se basa en la simplicidad y flexibilidad: hereda la tipografía desde `Label`, respeta los espacios del sistema (`spacing`) y se ajusta automáticamente en tablets gracias a `isTablet`. Además, permite sobrescribir el color con `replaceColor` para integrarse fácilmente en contextos personalizados.
|
|
293
|
+
|
|
294
|
+
### 📦 Importación:
|
|
295
|
+
```
|
|
296
|
+
import { TextButton } from "@dropi/react-native-design-system";
|
|
297
|
+
```
|
|
298
|
+
### ⚙️ Props:
|
|
299
|
+
```
|
|
300
|
+
| Prop | Tipo | Descripción |
|
|
301
|
+
| -------------- | -------------------------------- | ------------------------------------------------- |
|
|
302
|
+
| `label` | `string` | Texto visible dentro del botón. |
|
|
303
|
+
| `variant` | `'primary' \| 'secondary'` | Define el color base del texto e íconos. |
|
|
304
|
+
| `size` | `'small' \| 'normal' \| 'large'` | Controla el tamaño del texto e íconos. |
|
|
305
|
+
| `preIcon` | `IconName` | Ícono que aparece antes del texto. |
|
|
306
|
+
| `postIcon` | `IconName` | Ícono que aparece después del texto. |
|
|
307
|
+
| `replaceColor` | `string` | Sobrescribe el color del texto y los íconos. |
|
|
308
|
+
| `...rest` | `TouchableOpacityProps` | Hereda cualquier propiedad de `TouchableOpacity`. |
|
|
309
|
+
```
|
|
310
|
+
### 🧩 Ejemplos de uso:
|
|
311
|
+
```
|
|
312
|
+
<TextButton
|
|
313
|
+
label="Ver más"
|
|
314
|
+
variant="primary"
|
|
315
|
+
size="normal"
|
|
316
|
+
preIcon="IconName"
|
|
317
|
+
onPress={() => console.log("Ver más presionado")}
|
|
318
|
+
/>
|
|
319
|
+
|
|
320
|
+
<TextButton
|
|
321
|
+
label="Eliminar"
|
|
322
|
+
variant="secondary"
|
|
323
|
+
size="small"
|
|
324
|
+
replaceColor="#FF3B30"
|
|
325
|
+
postIcon="IconName"
|
|
326
|
+
onPress={() => console.log("Eliminar presionado")}
|
|
327
|
+
/>
|
|
328
|
+
|
|
329
|
+
```
|