@dropi/react-native-design-system 0.1.16 → 0.1.17
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
CHANGED
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
#
|
|
2
|
-
-
|
|
3
|
-
|
|
4
1
|
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
2
|
# Tokens
|
|
6
3
|
## Radius
|
|
@@ -380,13 +377,13 @@ import { EmptyState } from "@dropi/react-native-design-system";
|
|
|
380
377
|
|
|
381
378
|
## ⚙️ Props:
|
|
382
379
|
```
|
|
383
|
-
| Prop | Tipo | Descripción
|
|
384
|
-
| ---------------- | ------------------------ |
|
|
380
|
+
| Prop | Tipo | Descripción |
|
|
381
|
+
| ---------------- | ------------------------ | -------------------------------------------------------------------- |
|
|
385
382
|
| `imageSource` | `string \| number` | Imagen opcional (URL o require local) mostrada en la parte superior. |
|
|
386
|
-
| `title` | `string` | Título corto que introduce el estado vacío.
|
|
387
|
-
| `message` | `string` (obligatorio) | Texto principal explicando el estado.
|
|
388
|
-
| `buttonLabel` | `string` | Texto del botón opcional.
|
|
389
|
-
| `onButtonPress` | `() => void` | Callback del botón. Si existe, el botón se muestra.
|
|
383
|
+
| `title` | `string` | Título corto que introduce el estado vacío. |
|
|
384
|
+
| `message` | `string` (obligatorio) | Texto principal explicando el estado. |
|
|
385
|
+
| `buttonLabel` | `string` | Texto del botón opcional. |
|
|
386
|
+
| `onButtonPress` | `() => void` | Callback del botón. Si existe, el botón se muestra. |
|
|
390
387
|
```
|
|
391
388
|
|
|
392
389
|
## 🧩 Ejemplos de uso:
|
|
@@ -404,4 +401,45 @@ import { EmptyState } from "@dropi/react-native-design-system";
|
|
|
404
401
|
buttonLabel="Explorar productos"
|
|
405
402
|
onButtonPress={() => console.log("Ir a explorar")}
|
|
406
403
|
/>
|
|
404
|
+
```
|
|
405
|
+
|
|
406
|
+
## Title Description
|
|
407
|
+
|
|
408
|
+
El TitleDescription es un componente de selección diseñado para mostrar opciones con un título principal, una descripción opcional, una imagen y un indicador visual circular que refleja si la opción está activa. Es ideal para flujos donde el usuario debe elegir entre varias alternativas.
|
|
409
|
+
Adapta automáticamente tamaños en tablets usando isTablet, mantiene una disposición horizontal limpia y un estilo consistente con el design system.
|
|
410
|
+
|
|
411
|
+
## 📦 Importación:
|
|
412
|
+
```
|
|
413
|
+
import { TitleDescription } from "@dropi/react-native-design-system";
|
|
414
|
+
```
|
|
415
|
+
|
|
416
|
+
## ⚙️ Props:
|
|
417
|
+
```
|
|
418
|
+
| Prop | Tipo | Descripción |
|
|
419
|
+
| -------------- | ------------------------ | ------------------------------------------------------------------------------ |
|
|
420
|
+
| `title` | `string` | Título principal de la opción. |
|
|
421
|
+
| `label` | `string` | Texto descriptivo o subtítulo opcional. |
|
|
422
|
+
| `imageSource` | `string | number` | Imagen opcional (URL o require local) que acompaña la opción. |
|
|
423
|
+
| `isActive` | `boolean` | Indica si la opción está seleccionada. Cambia estilos y muestra el inner dot. |
|
|
424
|
+
| `isDisabled` | `boolean` | Desactiva la interacción y reduce opacidad. |
|
|
425
|
+
| `...rest` | `TouchableOpacityProps` | Props adicionales del contenedor presionable. |
|
|
426
|
+
```
|
|
427
|
+
|
|
428
|
+
## 🧩 Ejemplos de uso:
|
|
429
|
+
```
|
|
430
|
+
<TitleDescription
|
|
431
|
+
title="Domicilio"
|
|
432
|
+
label="Entrega en tu dirección registrada"
|
|
433
|
+
imageSource={require("../../assets/location.png")}
|
|
434
|
+
isActive={selected === "home"}
|
|
435
|
+
onPress={() => setSelected("home")}
|
|
436
|
+
/>
|
|
437
|
+
|
|
438
|
+
<TitleDescription
|
|
439
|
+
title="Punto de recogida"
|
|
440
|
+
label="Elige una tienda cercana"
|
|
441
|
+
imageSource="https://example.com/pickup.png"
|
|
442
|
+
isActive={false}
|
|
443
|
+
isDisabled={true}
|
|
444
|
+
/>
|
|
407
445
|
```
|
|
@@ -10,6 +10,16 @@ var _utils = require("../../../utils");
|
|
|
10
10
|
var _constants = require("../../../constants");
|
|
11
11
|
var _atoms = require("../../../atoms");
|
|
12
12
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
13
|
+
const OptionSelector = ({
|
|
14
|
+
isActive
|
|
15
|
+
}) => {
|
|
16
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
17
|
+
style: isActive ? styles.selectedOptionSelector : styles.optionSelector,
|
|
18
|
+
children: isActive && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
19
|
+
style: styles.innerSelector
|
|
20
|
+
})
|
|
21
|
+
});
|
|
22
|
+
};
|
|
13
23
|
const TitleDescription = ({
|
|
14
24
|
title,
|
|
15
25
|
label,
|
|
@@ -18,50 +28,29 @@ const TitleDescription = ({
|
|
|
18
28
|
isDisabled,
|
|
19
29
|
...rest
|
|
20
30
|
}) => {
|
|
21
|
-
return /*#__PURE__*/(0, _jsxRuntime.
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
})]
|
|
31
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
|
|
32
|
+
style: [isActive ? styles.selectedOption : styles.option, {
|
|
33
|
+
opacity: isDisabled ? 0.5 : 1
|
|
34
|
+
}],
|
|
35
|
+
disabled: isActive || isDisabled,
|
|
36
|
+
...rest,
|
|
37
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(OptionSelector, {
|
|
38
|
+
isActive: isActive
|
|
39
|
+
}), imageSource && /*#__PURE__*/(0, _jsxRuntime.jsx)(_expoImage.Image, {
|
|
40
|
+
source: imageSource,
|
|
41
|
+
style: styles.image
|
|
42
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
43
|
+
style: styles.textContainer,
|
|
44
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
|
|
45
|
+
type: "m-regular",
|
|
46
|
+
style: styles.titleText,
|
|
47
|
+
children: title
|
|
48
|
+
}), label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
|
|
49
|
+
type: "s-regular",
|
|
50
|
+
style: styles.optionText,
|
|
51
|
+
children: label
|
|
43
52
|
})]
|
|
44
|
-
})
|
|
45
|
-
style: styles.option,
|
|
46
|
-
...rest,
|
|
47
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
48
|
-
style: styles.optionSelector
|
|
49
|
-
}), imageSource && /*#__PURE__*/(0, _jsxRuntime.jsx)(_expoImage.Image, {
|
|
50
|
-
source: imageSource,
|
|
51
|
-
style: styles.image
|
|
52
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
53
|
-
style: styles.textContainer,
|
|
54
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
|
|
55
|
-
type: "m-regular",
|
|
56
|
-
style: styles.optionText,
|
|
57
|
-
children: title
|
|
58
|
-
}), label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
|
|
59
|
-
type: "s-regular",
|
|
60
|
-
style: styles.optionText,
|
|
61
|
-
children: label
|
|
62
|
-
})]
|
|
63
|
-
})]
|
|
64
|
-
})
|
|
53
|
+
})]
|
|
65
54
|
});
|
|
66
55
|
};
|
|
67
56
|
exports.TitleDescription = TitleDescription;
|
|
@@ -110,18 +99,18 @@ const styles = _reactNative.StyleSheet.create({
|
|
|
110
99
|
backgroundColor: _constants.colors["Primary-500"].light
|
|
111
100
|
},
|
|
112
101
|
image: {
|
|
113
|
-
width: 32,
|
|
114
|
-
height: 32,
|
|
102
|
+
width: !_utils.isTablet ? 32 : 32 * 1.5,
|
|
103
|
+
height: !_utils.isTablet ? 32 : 32 * 1.5,
|
|
115
104
|
marginRight: _constants.spacing['size-3'],
|
|
116
105
|
borderRadius: _constants.radius.circle
|
|
117
106
|
},
|
|
118
107
|
textContainer: {
|
|
119
108
|
flexDirection: 'column'
|
|
120
109
|
},
|
|
121
|
-
|
|
110
|
+
titleText: {
|
|
122
111
|
color: _constants.colors['Gray-700'].light
|
|
123
112
|
},
|
|
124
|
-
|
|
113
|
+
optionText: {
|
|
125
114
|
color: _constants.colors['Gray-600'].light
|
|
126
115
|
}
|
|
127
116
|
});
|