@dropi/react-native-design-system 0.1.8 → 0.1.10
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 +541 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,541 @@
|
|
|
1
|
+
#
|
|
2
|
+
-
|
|
3
|
+
|
|
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.
|
|
5
|
+
# Tokens
|
|
6
|
+
## Radius
|
|
7
|
+
Tokens de radio de borde utilizados en todos los componentes para mantener una coherencia visual en las esquinas redondeadas.
|
|
8
|
+
|
|
9
|
+
Los tokens `radius` definen los niveles estándar de redondez de esquinas dentro del sistema de diseño.
|
|
10
|
+
Son valores numéricos expresados en píxeles, pensados para ser usados en cualquier componente que soporte propiedades de radio de borde (`borderRadius`).
|
|
11
|
+
Estos tokens aseguran una identidad visual consistente y permiten ajustar globalmente la suavidad de las esquinas con facilidad.
|
|
12
|
+
|
|
13
|
+
```
|
|
14
|
+
| Token | Valor | Descripción |
|
|
15
|
+
| ---------- | ----- | --------------------------------------------------------------------------------- |
|
|
16
|
+
| `none` | `0` | Sin radio de borde (esquinas rectas). |
|
|
17
|
+
| `border-1` | `4` | Redondeo sutil para elementos pequeños como etiquetas o insignias. |
|
|
18
|
+
| `border-2` | `8` | Radio estándar para la mayoría de los componentes. |
|
|
19
|
+
| `border-3` | `12` | Redondeo visible, ideal para tarjetas o modales. |
|
|
20
|
+
| `border-4` | `24` | Esquinas más pronunciadas, usadas en contenedores grandes o interactivos. |
|
|
21
|
+
| `border-5` | `32` | Redondeo máximo estándar, da una apariencia más expresiva. |
|
|
22
|
+
| `circle` | `50` | Radio perfecto para formar círculos (por ejemplo, avatares o botones circulares). |
|
|
23
|
+
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
## Spacing
|
|
27
|
+
Tokens de espaciado que definen los márgenes y rellenos estándar utilizados en todo el sistema de diseño.
|
|
28
|
+
|
|
29
|
+
Los tokens `spacing` controlan la separación visual entre elementos (márgenes, paddings, gaps, etc.). Su objetivo es mantener una **escala modular de espacios** coherente en todas las pantallas, tanto en **teléfonos como en tabletas**.
|
|
30
|
+
El valor de cada token se adapta automáticamente dependiendo del dispositivo:
|
|
31
|
+
si es una tableta (`isTablet = true`), los valores aumentan ligeramente para mantener una proporción visual equilibrada en pantallas más grandes.
|
|
32
|
+
|
|
33
|
+
```
|
|
34
|
+
| Token | Valor base (px) | En tablet (px) | Descripción |
|
|
35
|
+
| --------- | --------------- | -------------- | ------------------------------------------------------------------ |
|
|
36
|
+
| `size-1` | 4 | 12 | Espaciado mínimo, ideal para pequeños detalles visuales. |
|
|
37
|
+
| `size-2` | 8 | 16 | Margen corto entre textos o íconos. |
|
|
38
|
+
| `size-3` | 12 | 20 | Separación común en layouts compactos. |
|
|
39
|
+
| `size-4` | 16 | 24 | Espaciado estándar para la mayoría de los componentes. |
|
|
40
|
+
| `size-5` | 24 | 32 | Espaciado medio, común entre secciones. |
|
|
41
|
+
| `size-6` | 32 | 40 | Espaciado grande, ideal para pantallas amplias o bloques visuales. |
|
|
42
|
+
| `size-7` | 40 | 48 | Separación generosa entre bloques de contenido. |
|
|
43
|
+
| `size-8` | 48 | 56 | Margen grande para layouts aireados. |
|
|
44
|
+
| `size-9` | 56 | 64 | Espaciado extra grande, usado en vistas principales. |
|
|
45
|
+
| `size-10` | 64 | 72 | Máximo espaciado estándar del sistema. |
|
|
46
|
+
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
## Sizes
|
|
50
|
+
Tokens de tamaño tipográfico utilizados en el sistema de diseño para mantener una jerarquía visual clara y consistente entre dispositivos.
|
|
51
|
+
|
|
52
|
+
Los tokens `sizes` definen una escala modular de tamaños de texto (en píxeles), que se ajusta automáticamente al ancho del dispositivo y a la configuración del usuario (por ejemplo, el escalado de fuente del sistema operativo). De esta forma, el diseño mantiene la **proporción visual correcta** sin sacrificar accesibilidad.
|
|
53
|
+
El cálculo de cada tamaño depende de dos factores:
|
|
54
|
+
* **ancho de la pantalla**`Dimensions.get("window").width`
|
|
55
|
+
* **factor de escala de fuente**`PixelRatio.getFontScale()`
|
|
56
|
+
Gracias a esto, las fuentes se adaptan suavemente en tabletas o pantallas grandes sin distorsionar el diseño original.
|
|
57
|
+
|
|
58
|
+
```
|
|
59
|
+
| Token | Valor base (px) | Descripción |
|
|
60
|
+
| ------- | --------------- | ----------------------------------------------------- |
|
|
61
|
+
| `xxs` | 10 | Texto auxiliar o etiquetas pequeñas. |
|
|
62
|
+
| `xs` | 12 | Subtítulos o texto de apoyo en componentes compactos. |
|
|
63
|
+
| `s` | 14 | Texto secundario o descripciones. |
|
|
64
|
+
| `m` | 16 | Tamaño de texto base, ideal para párrafos. |
|
|
65
|
+
| `l` | 18 | Texto destacado o títulos pequeños. |
|
|
66
|
+
| `xl` | 20 | Encabezados medianos o botones grandes. |
|
|
67
|
+
| `xxl` | 24 | Títulos principales o énfasis visual. |
|
|
68
|
+
| `xxxl` | 28 | Secciones destacadas o headers grandes. |
|
|
69
|
+
| `xxxxl` | 32 | Títulos hero o pantallas de bienvenida. |
|
|
70
|
+
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
### Escalado interno:
|
|
74
|
+
```Typescript
|
|
75
|
+
const BASE_WIDTH = 440;
|
|
76
|
+
const rawScaleFactor = width / BASE_WIDTH;
|
|
77
|
+
const multiplier = rawScaleFactor > 1 ? 1 + (rawScaleFactor - 1) * 0.3 : rawScaleFactor;
|
|
78
|
+
```
|
|
79
|
+
Esto significa que:
|
|
80
|
+
Si la pantalla es más grande que la base, el texto aumenta gradualmente (hasta un 30% adicional).
|
|
81
|
+
Si la pantalla es más pequeña, el tamaño se ajusta proporcionalmente.
|
|
82
|
+
|
|
83
|
+
## Weights
|
|
84
|
+
Tokens de peso tipográfico utilizados para controlar la jerarquía visual y el énfasis dentro de los textos del sistema.
|
|
85
|
+
|
|
86
|
+
Los tokens `weights` establecen los distintos **niveles de grosor** de las fuentes usados en todos los componentes del sistema. Permiten mantener **consistencia tipográfica** en botones, títulos, subtítulos y párrafos, evitando el uso arbitrario de valores numéricos. Estos valores siguen la escala estándar de CSS para `fontWeight`, lo que garantiza compatibilidad con cualquier fuente que soporte pesos variables.
|
|
87
|
+
|
|
88
|
+
```
|
|
89
|
+
| Token | Valor | Descripción |
|
|
90
|
+
| ---------- | ------- | ----------------------------------------------------------- |
|
|
91
|
+
| `light` | `'300'` | Ideal para textos secundarios o información complementaria. |
|
|
92
|
+
| `regular` | `'400'` | Peso base para la mayoría de los textos. |
|
|
93
|
+
| `medium` | `'500'` | Ligeramente más grueso, usado en botones o subtítulos. |
|
|
94
|
+
| `semibold` | `'600'` | Para destacar encabezados o valores clave. |
|
|
95
|
+
| `bold` | `'700'` | Peso más alto, usado en títulos o llamadas a la acción. |
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
## Colors
|
|
99
|
+
Los tokens de color definen la **paleta cromática oficial de Dropi** para interfaces móviles. Están diseñados para ofrecer **consistencia visual**, **legibilidad** y **accesibilidad** tanto en modo claro como en modo oscuro.
|
|
100
|
+
|
|
101
|
+
Cada color está organizado por **familias cromáticas** (Primary, Secondary, Gray, Success, Error, Info, Warning) y subdividido en **niveles tonales** del `50` al `900`.
|
|
102
|
+
Esto permite crear jerarquías visuales precisas —por ejemplo, usar tonos `500` para elementos principales y `100`/`900` para fondos o bordes.
|
|
103
|
+
Cada token incluye dos variantes:
|
|
104
|
+
* `light`
|
|
105
|
+
* `dark`
|
|
106
|
+
De esta forma, el sistema puede alternar entre temas sin perder coherencia cromática ni contraste visual.
|
|
107
|
+
|
|
108
|
+
```
|
|
109
|
+
| Familia | Propósito principal |
|
|
110
|
+
| ------------- | ----------------------------------------------------------------------------------------------- |
|
|
111
|
+
| **Primary** | Color de marca principal. Se usa en botones primarios, íconos destacados y elementos de acción. |
|
|
112
|
+
| **Secondary** | Color de acento o refuerzo visual para elementos secundarios. |
|
|
113
|
+
| **Gray** | Escala neutra para fondos, textos y bordes. Define la estructura visual base. |
|
|
114
|
+
| **Success** | Representa estados exitosos, confirmaciones o acciones completadas. |
|
|
115
|
+
| **Error** | Indica errores, validaciones fallidas o acciones críticas. |
|
|
116
|
+
| **Info** | Se usa para mostrar información contextual o mensajes neutrales. |
|
|
117
|
+
| **Warning** | Señala advertencias, riesgos o acciones pendientes. |
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
# Átomos
|
|
121
|
+
# Textos
|
|
122
|
+
-
|
|
123
|
+
|
|
124
|
+
|
|
125
|
+
```Typescript
|
|
126
|
+
import { Body } from '@dropi/react-native-design-system';
|
|
127
|
+
```
|
|
128
|
+
### ⚙️ Props:
|
|
129
|
+
|
|
130
|
+
```
|
|
131
|
+
| Prop | Tipo | Descripción |
|
|
132
|
+
| --------- | -------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- |
|
|
133
|
+
| `type` | `'xs-regular' \| 'xs-medium' \| 's-regular' \| 's-medium' \| 'm-regular' \| 'm-medium' \| 'l-regular' \| 'l-medium'` | Define el tamaño y el peso del texto. |
|
|
134
|
+
| `style` | `TextStyle` | (Opcional) Estilos adicionales que se aplican al texto. |
|
|
135
|
+
| `...rest` | `TextProps` | Todas las props nativas de `Text` disponibles en React Native. |
|
|
136
|
+
|
|
137
|
+
```
|
|
138
|
+
### 🧩 Ejemplo de uso:
|
|
139
|
+
```Typescript
|
|
140
|
+
<Body type="m-regular"> Este es un texto de ejemplo utilizando el componente body </Body>
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
## Caption
|
|
144
|
+
El componente `Caption` representa textos pequeños de apoyo, utilizados principalmente para mostrar **etiquetas, subtítulos, o descripciones breves** dentro de la interfaz.
|
|
145
|
+
Forma parte de la familia tipográfica del sistema y mantiene proporciones ajustadas para espacios reducidos, con un _line-height_ ligeramente más compacto para optimizar la densidad visual.
|
|
146
|
+
|
|
147
|
+
### 📦 Importación:
|
|
148
|
+
```Typescript
|
|
149
|
+
import { Caption } from '@dropi/react-native-design-system';
|
|
150
|
+
```
|
|
151
|
+
### ⚙️ Props:
|
|
152
|
+
```
|
|
153
|
+
| Prop | Tipo | Descripción |
|
|
154
|
+
| --------- | -------------------------------------- | --------------------------------------------------------------- |
|
|
155
|
+
| `type` | `'s' \| 'm' \| 's-light' \| 'm-light'` | Define el tamaño y el peso del texto. |
|
|
156
|
+
| `style` | `TextStyle` | (Opcional) Estilos adicionales para personalizar la apariencia. |
|
|
157
|
+
| `...rest` | `TextProps` | Todas las props nativas disponibles en `Text` de React Native. |
|
|
158
|
+
```
|
|
159
|
+
### 🧩 Ejemplo de uso:
|
|
160
|
+
```
|
|
161
|
+
<Caption type="m">Última actualización</Caption>
|
|
162
|
+
|
|
163
|
+
<Caption type="s-light" style={{ color: '#999' }}>2 horas atrás</Caption>
|
|
164
|
+
```
|
|
165
|
+
|
|
166
|
+
## Heading
|
|
167
|
+
El componente `Heading` representa los **encabezados tipográficos** del sistema, usados para jerarquizar títulos, secciones y bloques de contenido.
|
|
168
|
+
Cada nivel (`h1` a `h5`) conserva proporciones equilibradas entre tamaño, peso y altura de línea, asegurando legibilidad sin romper la escala visual general de la aplicación.
|
|
169
|
+
|
|
170
|
+
### 📦 Importación:
|
|
171
|
+
```Typescript
|
|
172
|
+
import { Heading } from '@dropi/react-native-design-system';
|
|
173
|
+
```
|
|
174
|
+
### ⚙️ Props:
|
|
175
|
+
```
|
|
176
|
+
| Prop | Tipo | Descripción |
|
|
177
|
+
| --------- | -------------------------------------- | ------------------------------------------------------------- |
|
|
178
|
+
| `type` | `'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5'` | Define el nivel jerárquico del título. |
|
|
179
|
+
| `style` | `TextStyle` | (Opcional) Permite agregar estilos adicionales al encabezado. |
|
|
180
|
+
| `...rest` | `TextProps` | Cualquier prop nativa del componente `Text` de React Native. |
|
|
181
|
+
```
|
|
182
|
+
### 🧩 Ejemplo de uso:
|
|
183
|
+
```
|
|
184
|
+
<Heading type="h1">Bienvenido a la experiencia Dropi</Heading>
|
|
185
|
+
|
|
186
|
+
<Heading type="h4" style={{ color: '#666' }}>Configuración avanzada</Heading>
|
|
187
|
+
```
|
|
188
|
+
|
|
189
|
+
## Label
|
|
190
|
+
El componente `Label` se utiliza para mostrar **textos cortos de énfasis o identificación**, como títulos de campos, categorías, o etiquetas de estado.
|
|
191
|
+
Su diseño mantiene un tamaño reducido con alto contraste tipográfico (peso `bold`), lo que facilita su lectura incluso en elementos pequeños o componentes interactivos.
|
|
192
|
+
### 📦 Importación:
|
|
193
|
+
```Typescript
|
|
194
|
+
import { Label } from '@dropi/react-native-design-system';
|
|
195
|
+
```
|
|
196
|
+
### ⚙️ Props:
|
|
197
|
+
```
|
|
198
|
+
| Prop | Tipo | Descripción |
|
|
199
|
+
| --------- | ------------------- | ------------------------------------------------------------ |
|
|
200
|
+
| `type` | `'s' \| 'm' \| 'l'` | Define el tamaño de la etiqueta. |
|
|
201
|
+
| `style` | `TextStyle` | (Opcional) Estilos adicionales para personalización. |
|
|
202
|
+
| `...rest` | `TextProps` | Cualquier prop nativa del componente `Text` de React Native. |
|
|
203
|
+
```
|
|
204
|
+
### 🧩 Ejemplo de usu:
|
|
205
|
+
```Typescript
|
|
206
|
+
<Label type="m">Dirección</Label>
|
|
207
|
+
|
|
208
|
+
<Label type="s" style={{ color: '#999' }}>En proceso</Label>
|
|
209
|
+
```
|
|
210
|
+
|
|
211
|
+
|
|
212
|
+
# Botones
|
|
213
|
+
### Default Button:
|
|
214
|
+
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.
|
|
215
|
+
### 📦 Importación:
|
|
216
|
+
```
|
|
217
|
+
import { DefaultButton } from '@dropi/react-native-design-system';
|
|
218
|
+
```
|
|
219
|
+
### ⚙️ Props:
|
|
220
|
+
```
|
|
221
|
+
| Prop | Tipo | Descripción |
|
|
222
|
+
| ----------------- | ---------------------------------------- | -------------------------------------------------------------------------------------------- |
|
|
223
|
+
| `label` | `string` | Texto visible del botón. |
|
|
224
|
+
| `variant` | `'primary' | 'secondary' | 'tertiary' | Define el estilo visual del botón. |
|
|
225
|
+
| `size` | `'small' | 'normal' \| 'large'` | Controla el tamaño del botón y del texto. |
|
|
226
|
+
| `preIcon` | `IconName` | (Opcional) Ícono mostrado antes del texto. |
|
|
227
|
+
| `postIcon` | `IconName` | (Opcional) Ícono mostrado después del texto. |
|
|
228
|
+
| `disabled` | `boolean` | (Opcional) Desactiva la interacción y reduce la opacidad. |
|
|
229
|
+
| `isMakingRequest` | `boolean` | (Opcional) Muestra un `ActivityIndicator` en lugar del texto mientras se realiza una acción. |
|
|
230
|
+
| `...rest` | `TouchableOpacityProps` | Props nativas de React Native para eventos o estilos adicionales. |
|
|
231
|
+
|
|
232
|
+
```
|
|
233
|
+
### 🧩 Ejemplos de uso:
|
|
234
|
+
```
|
|
235
|
+
<DefaultButton
|
|
236
|
+
label="Guardar cambios"
|
|
237
|
+
variant="primary"
|
|
238
|
+
size="normal"
|
|
239
|
+
onPress={handleSave}
|
|
240
|
+
/>
|
|
241
|
+
|
|
242
|
+
<DefaultButton
|
|
243
|
+
label="Cancelar"
|
|
244
|
+
variant="secondary"
|
|
245
|
+
size="small"
|
|
246
|
+
preIcon="IconName"
|
|
247
|
+
onPress={handleCancel}
|
|
248
|
+
/>
|
|
249
|
+
|
|
250
|
+
<DefaultButton
|
|
251
|
+
label="Cargando..."
|
|
252
|
+
variant="primary"
|
|
253
|
+
size="large"
|
|
254
|
+
isMakingRequest
|
|
255
|
+
/>
|
|
256
|
+
```
|
|
257
|
+
|
|
258
|
+
## Feedback Button
|
|
259
|
+
|
|
260
|
+
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.
|
|
261
|
+
|
|
262
|
+
### 📦 Importación:
|
|
263
|
+
```
|
|
264
|
+
import { FeedbackButton } from '@dropi/react-native-design-system'
|
|
265
|
+
```
|
|
266
|
+
### ⚙️ Props:
|
|
267
|
+
```
|
|
268
|
+
| Prop | Tipo | Descripción |
|
|
269
|
+
| ------------------- | --------------------------------------------- | -------------------------------------------------------------- |
|
|
270
|
+
| `label` | `string` | Texto visible en el botón. |
|
|
271
|
+
| `feedbackType` | `'success' \| 'error' \| 'warning' \| 'info'` | Define el tipo de feedback visual (color principal del botón). |
|
|
272
|
+
| `variant` | `'primary' \| 'secondary' \| 'text'` | Determina el estilo del botón (relleno, borde o texto plano). |
|
|
273
|
+
| `size` | `'small' \| 'normal' \| 'large'` | Ajusta padding, tamaño de ícono y tipografía. |
|
|
274
|
+
| `preIcon` | `IconName` *(opcional)* | Ícono mostrado antes del texto. |
|
|
275
|
+
| `postIcon` | `IconName` *(opcional)* | Ícono mostrado después del texto. |
|
|
276
|
+
| `disabled` | `boolean` *(opcional)* | Desactiva interacción y aplica opacidad reducida. |
|
|
277
|
+
| `isMakingRerequest` | `boolean` *(opcional)* | Indica que hay una solicitud o acción en curso. |
|
|
278
|
+
```
|
|
279
|
+
### 🧩 Ejemplos de uso:
|
|
280
|
+
```Typescript
|
|
281
|
+
<FeedbackButton
|
|
282
|
+
label="Reintentar"
|
|
283
|
+
feedbackType="error"
|
|
284
|
+
variant="primary"
|
|
285
|
+
size="normal"
|
|
286
|
+
preIcon="refresh"
|
|
287
|
+
onPress={() => console.log('Reintentando acción...')}
|
|
288
|
+
/>
|
|
289
|
+
```
|
|
290
|
+
|
|
291
|
+
## Text Button
|
|
292
|
+
|
|
293
|
+
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.
|
|
294
|
+
|
|
295
|
+
### 📦 Importación:
|
|
296
|
+
```
|
|
297
|
+
import { TextButton } from "@dropi/react-native-design-system";
|
|
298
|
+
```
|
|
299
|
+
### ⚙️ Props:
|
|
300
|
+
```
|
|
301
|
+
| Prop | Tipo | Descripción |
|
|
302
|
+
| -------------- | -------------------------------- | ------------------------------------------------- |
|
|
303
|
+
| `label` | `string` | Texto visible dentro del botón. |
|
|
304
|
+
| `variant` | `'primary' \| 'secondary'` | Define el color base del texto e íconos. |
|
|
305
|
+
| `size` | `'small' \| 'normal' \| 'large'` | Controla el tamaño del texto e íconos. |
|
|
306
|
+
| `preIcon` | `IconName` | Ícono que aparece antes del texto. |
|
|
307
|
+
| `postIcon` | `IconName` | Ícono que aparece después del texto. |
|
|
308
|
+
| `replaceColor` | `string` | Sobrescribe el color del texto y los íconos. |
|
|
309
|
+
| `...rest` | `TouchableOpacityProps` | Hereda cualquier propiedad de `TouchableOpacity`. |
|
|
310
|
+
```
|
|
311
|
+
### 🧩 Ejemplos de uso:
|
|
312
|
+
```
|
|
313
|
+
<TextButton
|
|
314
|
+
label="Ver más"
|
|
315
|
+
variant="primary"
|
|
316
|
+
size="normal"
|
|
317
|
+
preIcon="IconName"
|
|
318
|
+
onPress={() => console.log("Ver más presionado")}
|
|
319
|
+
/>
|
|
320
|
+
|
|
321
|
+
<TextButton
|
|
322
|
+
label="Eliminar"
|
|
323
|
+
variant="secondary"
|
|
324
|
+
size="small"
|
|
325
|
+
replaceColor="#FF3B30"
|
|
326
|
+
postIcon="IconName"
|
|
327
|
+
onPress={() => console.log("Eliminar presionado")}
|
|
328
|
+
/>
|
|
329
|
+
|
|
330
|
+
```
|
|
331
|
+
|
|
332
|
+
|
|
333
|
+
-
|
|
334
|
+
|
|
335
|
+
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.
|
|
336
|
+
# Tokens
|
|
337
|
+
## Radius
|
|
338
|
+
Tokens de radio de borde utilizados en todos los componentes para mantener una coherencia visual en las esquinas redondeadas.
|
|
339
|
+
|
|
340
|
+
Los tokens `radius` definen los niveles estándar de redondez de esquinas dentro del sistema de diseño.
|
|
341
|
+
Son valores numéricos expresados en píxeles, pensados para ser usados en cualquier componente que soporte propiedades de radio de borde (`borderRadius`).
|
|
342
|
+
Estos tokens aseguran una identidad visual consistente y permiten ajustar globalmente la suavidad de las esquinas con facilidad.
|
|
343
|
+
|
|
344
|
+
```
|
|
345
|
+
| Token | Valor | Descripción |
|
|
346
|
+
| ---------- | ----- | --------------------------------------------------------------------------------- |
|
|
347
|
+
| `none` | `0` | Sin radio de borde (esquinas rectas). |
|
|
348
|
+
| `border-1` | `4` | Redondeo sutil para elementos pequeños como etiquetas o insignias. |
|
|
349
|
+
| `border-2` | `8` | Radio estándar para la mayoría de los componentes. |
|
|
350
|
+
| `border-3` | `12` | Redondeo visible, ideal para tarjetas o modales. |
|
|
351
|
+
| `border-4` | `24` | Esquinas más pronunciadas, usadas en contenedores grandes o interactivos. |
|
|
352
|
+
| `border-5` | `32` | Redondeo máximo estándar, da una apariencia más expresiva. |
|
|
353
|
+
| `circle` | `50` | Radio perfecto para formar círculos (por ejemplo, avatares o botones circulares). |
|
|
354
|
+
|
|
355
|
+
```
|
|
356
|
+
|
|
357
|
+
## Spacing
|
|
358
|
+
Tokens de espaciado que definen los márgenes y rellenos estándar utilizados en todo el sistema de diseño.
|
|
359
|
+
|
|
360
|
+
Los tokens `spacing` controlan la separación visual entre elementos (márgenes, paddings, gaps, etc.). Su objetivo es mantener una **escala modular de espacios** coherente en todas las pantallas, tanto en **teléfonos como en tabletas**.
|
|
361
|
+
El valor de cada token se adapta automáticamente dependiendo del dispositivo:
|
|
362
|
+
si es una tableta (`isTablet = true`), los valores aumentan ligeramente para mantener una proporción visual equilibrada en pantallas más grandes.
|
|
363
|
+
|
|
364
|
+
```
|
|
365
|
+
| Token | Valor base (px) | En tablet (px) | Descripción |
|
|
366
|
+
| --------- | --------------- | -------------- | ------------------------------------------------------------------ |
|
|
367
|
+
| `size-1` | 4 | 12 | Espaciado mínimo, ideal para pequeños detalles visuales. |
|
|
368
|
+
| `size-2` | 8 | 16 | Margen corto entre textos o íconos. |
|
|
369
|
+
| `size-3` | 12 | 20 | Separación común en layouts compactos. |
|
|
370
|
+
| `size-4` | 16 | 24 | Espaciado estándar para la mayoría de los componentes. |
|
|
371
|
+
| `size-5` | 24 | 32 | Espaciado medio, común entre secciones. |
|
|
372
|
+
| `size-6` | 32 | 40 | Espaciado grande, ideal para pantallas amplias o bloques visuales. |
|
|
373
|
+
| `size-7` | 40 | 48 | Separación generosa entre bloques de contenido. |
|
|
374
|
+
| `size-8` | 48 | 56 | Margen grande para layouts aireados. |
|
|
375
|
+
| `size-9` | 56 | 64 | Espaciado extra grande, usado en vistas principales. |
|
|
376
|
+
| `size-10` | 64 | 72 | Máximo espaciado estándar del sistema. |
|
|
377
|
+
|
|
378
|
+
```
|
|
379
|
+
|
|
380
|
+
## Sizes
|
|
381
|
+
Tokens de tamaño tipográfico utilizados en el sistema de diseño para mantener una jerarquía visual clara y consistente entre dispositivos.
|
|
382
|
+
|
|
383
|
+
Los tokens `sizes` definen una escala modular de tamaños de texto (en píxeles), que se ajusta automáticamente al ancho del dispositivo y a la configuración del usuario (por ejemplo, el escalado de fuente del sistema operativo). De esta forma, el diseño mantiene la **proporción visual correcta** sin sacrificar accesibilidad.
|
|
384
|
+
El cálculo de cada tamaño depende de dos factores:
|
|
385
|
+
* **ancho de la pantalla**`Dimensions.get("window").width`
|
|
386
|
+
* **factor de escala de fuente**`PixelRatio.getFontScale()`
|
|
387
|
+
Gracias a esto, las fuentes se adaptan suavemente en tabletas o pantallas grandes sin distorsionar el diseño original.
|
|
388
|
+
|
|
389
|
+
```
|
|
390
|
+
| Token | Valor base (px) | Descripción |
|
|
391
|
+
| ------- | --------------- | ----------------------------------------------------- |
|
|
392
|
+
| `xxs` | 10 | Texto auxiliar o etiquetas pequeñas. |
|
|
393
|
+
| `xs` | 12 | Subtítulos o texto de apoyo en componentes compactos. |
|
|
394
|
+
| `s` | 14 | Texto secundario o descripciones. |
|
|
395
|
+
| `m` | 16 | Tamaño de texto base, ideal para párrafos. |
|
|
396
|
+
| `l` | 18 | Texto destacado o títulos pequeños. |
|
|
397
|
+
| `xl` | 20 | Encabezados medianos o botones grandes. |
|
|
398
|
+
| `xxl` | 24 | Títulos principales o énfasis visual. |
|
|
399
|
+
| `xxxl` | 28 | Secciones destacadas o headers grandes. |
|
|
400
|
+
| `xxxxl` | 32 | Títulos hero o pantallas de bienvenida. |
|
|
401
|
+
|
|
402
|
+
```
|
|
403
|
+
|
|
404
|
+
### Escalado interno:
|
|
405
|
+
```Typescript
|
|
406
|
+
const BASE_WIDTH = 440;
|
|
407
|
+
const rawScaleFactor = width / BASE_WIDTH;
|
|
408
|
+
const multiplier = rawScaleFactor > 1 ? 1 + (rawScaleFactor - 1) * 0.3 : rawScaleFactor;
|
|
409
|
+
```
|
|
410
|
+
Esto significa que:
|
|
411
|
+
Si la pantalla es más grande que la base, el texto aumenta gradualmente (hasta un 30% adicional).
|
|
412
|
+
Si la pantalla es más pequeña, el tamaño se ajusta proporcionalmente.
|
|
413
|
+
|
|
414
|
+
## Weights
|
|
415
|
+
Tokens de peso tipográfico utilizados para controlar la jerarquía visual y el énfasis dentro de los textos del sistema.
|
|
416
|
+
|
|
417
|
+
Los tokens `weights` establecen los distintos **niveles de grosor** de las fuentes usados en todos los componentes del sistema. Permiten mantener **consistencia tipográfica** en botones, títulos, subtítulos y párrafos, evitando el uso arbitrario de valores numéricos. Estos valores siguen la escala estándar de CSS para `fontWeight`, lo que garantiza compatibilidad con cualquier fuente que soporte pesos variables.
|
|
418
|
+
|
|
419
|
+
```
|
|
420
|
+
| Token | Valor | Descripción |
|
|
421
|
+
| ---------- | ------- | ----------------------------------------------------------- |
|
|
422
|
+
| `light` | `'300'` | Ideal para textos secundarios o información complementaria. |
|
|
423
|
+
| `regular` | `'400'` | Peso base para la mayoría de los textos. |
|
|
424
|
+
| `medium` | `'500'` | Ligeramente más grueso, usado en botones o subtítulos. |
|
|
425
|
+
| `semibold` | `'600'` | Para destacar encabezados o valores clave. |
|
|
426
|
+
| `bold` | `'700'` | Peso más alto, usado en títulos o llamadas a la acción. |
|
|
427
|
+
```
|
|
428
|
+
|
|
429
|
+
## Colors
|
|
430
|
+
Los tokens de color definen la **paleta cromática oficial de Dropi** para interfaces móviles. Están diseñados para ofrecer **consistencia visual**, **legibilidad** y **accesibilidad** tanto en modo claro como en modo oscuro.
|
|
431
|
+
|
|
432
|
+
Cada color está organizado por **familias cromáticas** (Primary, Secondary, Gray, Success, Error, Info, Warning) y subdividido en **niveles tonales** del `50` al `900`.
|
|
433
|
+
Esto permite crear jerarquías visuales precisas —por ejemplo, usar tonos `500` para elementos principales y `100`/`900` para fondos o bordes.
|
|
434
|
+
Cada token incluye dos variantes:
|
|
435
|
+
* `light`
|
|
436
|
+
* `dark`
|
|
437
|
+
De esta forma, el sistema puede alternar entre temas sin perder coherencia cromática ni contraste visual.
|
|
438
|
+
|
|
439
|
+
```
|
|
440
|
+
| Familia | Propósito principal |
|
|
441
|
+
| ------------- | ----------------------------------------------------------------------------------------------- |
|
|
442
|
+
| **Primary** | Color de marca principal. Se usa en botones primarios, íconos destacados y elementos de acción. |
|
|
443
|
+
| **Secondary** | Color de acento o refuerzo visual para elementos secundarios. |
|
|
444
|
+
| **Gray** | Escala neutra para fondos, textos y bordes. Define la estructura visual base. |
|
|
445
|
+
| **Success** | Representa estados exitosos, confirmaciones o acciones completadas. |
|
|
446
|
+
| **Error** | Indica errores, validaciones fallidas o acciones críticas. |
|
|
447
|
+
| **Info** | Se usa para mostrar información contextual o mensajes neutrales. |
|
|
448
|
+
| **Warning** | Señala advertencias, riesgos o acciones pendientes. |
|
|
449
|
+
```
|
|
450
|
+
|
|
451
|
+
# Átomos
|
|
452
|
+
# Textos
|
|
453
|
+
-
|
|
454
|
+
|
|
455
|
+
|
|
456
|
+
```Typescript
|
|
457
|
+
import { Body } from '@dropi/react-native-design-system';
|
|
458
|
+
```
|
|
459
|
+
### ⚙️ Props:
|
|
460
|
+
|
|
461
|
+
```
|
|
462
|
+
| Prop | Tipo | Descripción |
|
|
463
|
+
| --------- | -------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- |
|
|
464
|
+
| `type` | `'xs-regular' \| 'xs-medium' \| 's-regular' \| 's-medium' \| 'm-regular' \| 'm-medium' \| 'l-regular' \| 'l-medium'` | Define el tamaño y el peso del texto. |
|
|
465
|
+
| `style` | `TextStyle` | (Opcional) Estilos adicionales que se aplican al texto. |
|
|
466
|
+
| `...rest` | `TextProps` | Todas las props nativas de `Text` disponibles en React Native. |
|
|
467
|
+
|
|
468
|
+
```
|
|
469
|
+
### 🧩 Ejemplo de uso:
|
|
470
|
+
```Typescript
|
|
471
|
+
<Body type="m-regular"> Este es un texto de ejemplo utilizando el componente body </Body>
|
|
472
|
+
```
|
|
473
|
+
|
|
474
|
+
## Caption
|
|
475
|
+
El componente `Caption` representa textos pequeños de apoyo, utilizados principalmente para mostrar **etiquetas, subtítulos, o descripciones breves** dentro de la interfaz.
|
|
476
|
+
Forma parte de la familia tipográfica del sistema y mantiene proporciones ajustadas para espacios reducidos, con un _line-height_ ligeramente más compacto para optimizar la densidad visual.
|
|
477
|
+
|
|
478
|
+
### 📦 Importación:
|
|
479
|
+
```Typescript
|
|
480
|
+
import { Caption } from '@dropi/react-native-design-system';
|
|
481
|
+
```
|
|
482
|
+
### ⚙️ Props:
|
|
483
|
+
```
|
|
484
|
+
| Prop | Tipo | Descripción |
|
|
485
|
+
| --------- | -------------------------------------- | --------------------------------------------------------------- |
|
|
486
|
+
| `type` | `'s' \| 'm' \| 's-light' \| 'm-light'` | Define el tamaño y el peso del texto. |
|
|
487
|
+
| `style` | `TextStyle` | (Opcional) Estilos adicionales para personalizar la apariencia. |
|
|
488
|
+
| `...rest` | `TextProps` | Todas las props nativas disponibles en `Text` de React Native. |
|
|
489
|
+
```
|
|
490
|
+
### 🧩 Ejemplo de uso:
|
|
491
|
+
```
|
|
492
|
+
<Caption type="m">Última actualización</Caption>
|
|
493
|
+
|
|
494
|
+
<Caption type="s-light" style={{ color: '#999' }}>2 horas atrás</Caption>
|
|
495
|
+
```
|
|
496
|
+
|
|
497
|
+
## Heading
|
|
498
|
+
El componente `Heading` representa los **encabezados tipográficos** del sistema, usados para jerarquizar títulos, secciones y bloques de contenido.
|
|
499
|
+
Cada nivel (`h1` a `h5`) conserva proporciones equilibradas entre tamaño, peso y altura de línea, asegurando legibilidad sin romper la escala visual general de la aplicación.
|
|
500
|
+
|
|
501
|
+
### 📦 Importación:
|
|
502
|
+
```Typescript
|
|
503
|
+
import { Heading } from '@dropi/react-native-design-system';
|
|
504
|
+
```
|
|
505
|
+
### ⚙️ Props:
|
|
506
|
+
```
|
|
507
|
+
| Prop | Tipo | Descripción |
|
|
508
|
+
| --------- | -------------------------------------- | ------------------------------------------------------------- |
|
|
509
|
+
| `type` | `'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5'` | Define el nivel jerárquico del título. |
|
|
510
|
+
| `style` | `TextStyle` | (Opcional) Permite agregar estilos adicionales al encabezado. |
|
|
511
|
+
| `...rest` | `TextProps` | Cualquier prop nativa del componente `Text` de React Native. |
|
|
512
|
+
```
|
|
513
|
+
### 🧩 Ejemplo de uso:
|
|
514
|
+
```
|
|
515
|
+
<Heading type="h1">Bienvenido a la experiencia Dropi</Heading>
|
|
516
|
+
|
|
517
|
+
<Heading type="h4" style={{ color: '#666' }}>Configuración avanzada</Heading>
|
|
518
|
+
```
|
|
519
|
+
|
|
520
|
+
## Label
|
|
521
|
+
El componente `Label` se utiliza para mostrar **textos cortos de énfasis o identificación**, como títulos de campos, categorías, o etiquetas de estado.
|
|
522
|
+
Su diseño mantiene un tamaño reducido con alto contraste tipográfico (peso `bold`), lo que facilita su lectura incluso en elementos pequeños o componentes interactivos.
|
|
523
|
+
### 📦 Importación:
|
|
524
|
+
```Typescript
|
|
525
|
+
import { Label } from '@dropi/react-native-design-system';
|
|
526
|
+
```
|
|
527
|
+
### ⚙️ Props:
|
|
528
|
+
```
|
|
529
|
+
| Prop | Tipo | Descripción |
|
|
530
|
+
| --------- | ------------------- | ------------------------------------------------------------ |
|
|
531
|
+
| `type` | `'s' \| 'm' \| 'l'` | Define el tamaño de la etiqueta. |
|
|
532
|
+
| `style` | `TextStyle` | (Opcional) Estilos adicionales para personalización. |
|
|
533
|
+
| `...rest` | `TextProps` | Cualquier prop nativa del componente `Text` de React Native. |
|
|
534
|
+
```
|
|
535
|
+
### 🧩 Ejemplo de usu:
|
|
536
|
+
```Typescript
|
|
537
|
+
<Label type="m">Dirección</Label>
|
|
538
|
+
|
|
539
|
+
<Label type="s" style={{ color: '#999' }}>En proceso</Label>
|
|
540
|
+
```
|
|
541
|
+
|