@dropi/react-native-design-system 0.2.29 → 0.2.31

package/README.md

@@ -31,6 +31,8 @@ El **Design System de Dropi** para aplicaciones **React Native**. Este paquete r
     - [Default Button](#default-button)
     - [Feedback Button](#feedback-button)
     - [Text Button](#text-button)
+  - [Imágenes](#imágenes)
+    - [Custom Image](#custom-image)
 
 - [🧪 Moléculas](#moléculas)
   - [Alert](#alert)
@@ -58,22 +60,63 @@ Tu proyecto debe tener instaladas estas dependencias mínimas:
 ```JSON
 "react": ">=19.0.0",
 "react-native": ">=0.79.5",
-"dropi-lib-icons": ">=1.2.5",
-"expo-image": ">=2.4.0"
+"dropi-lib-icons": ">=1.3.4",
+"expo-image": ">=2.4.0",
+"expo-constants": ">=17.1.7",
+"lottie-react-native": ">=7.2.2",
+"react-native-gesture-handler": ">=2.24.0",
+"react-native-reanimated": ">=3.19.1",
+"@gorhom/bottom-sheet": ">=5.2.6"
 ```
 
+### 📦 Instalación de dependencias base
 
-Si no estás seguro, instálalas con:
+Instala las dependencias principales:
 
 ```sh
-npm install react@latest react-native@latest
-npm install dropi-lib-icons expo-image
+npm install dropi-lib-icons expo-image expo-constants lottie-react-native
 ```
 
+O con yarn:
+```sh
+yarn add dropi-lib-icons expo-image expo-constants lottie-react-native
+```
+
+### ⚙️ Instalación de dependencias de animación e interacción
+
+Estas dependencias son necesarias para componentes como **Bottom Sheet**, **animaciones Lottie** y **gestos interactivos**:
+
+```sh
+npm install react-native-reanimated react-native-gesture-handler @gorhom/bottom-sheet
+```
 
 O con yarn:
 ```sh
-yarn add dropi-lib-icons expo-image
+yarn add react-native-reanimated react-native-gesture-handler @gorhom/bottom-sheet
+```
+
+#### 🔧 Configuración de react-native-reanimated
+
+Añade el plugin de Reanimated en tu `babel.config.js`:
+
+```javascript
+module.exports = {
+  presets: ['module:@react-native/babel-preset'],
+  plugins: [
+    'react-native-reanimated/plugin', // Debe ser el último plugin
+  ],
+};
+```
+
+#### 🔧 Configuración de react-native-gesture-handler
+
+En tu archivo de entrada principal (usualmente `App.tsx` o `index.js`), importa gesture-handler al inicio:
+
+```typescript
+import 'react-native-gesture-handler';
+import { AppRegistry } from 'react-native';
+import App from './App';
+// ...
 ```
 
 ## 2️⃣ Instalación del Design System
@@ -88,23 +131,69 @@ yarn add @dropi/react-native-design-system
 ```
 
 ## 3️⃣ Configuración adicional según tu entorno
+
 ### 🔹 Si usas Expo
 
-Nada más que instalar: Expo ya incluye soporte para expo-image, así que todo funcionará out of the box.
+La mayoría de las dependencias ya están incluidas en Expo. Solo asegúrate de tener las versiones mínimas:
+
+```sh
+npx expo install expo-image expo-constants lottie-react-native react-native-reanimated react-native-gesture-handler @gorhom/bottom-sheet
+```
+
+**Importante:** Aunque Expo incluye muchas de estas librerías, debes añadir el plugin de Reanimated en tu `babel.config.js` como se explicó anteriormente.
 
 ### 🔹 Si usas React Native CLI
 
-Debes asegurarte de instalar y configurar:
+Debes instalar y configurar todas las dependencias manualmente:
+
+#### 1. Instala las dependencias nativas:
+```sh
+npm install expo-image expo-constants lottie-react-native react-native-reanimated react-native-gesture-handler @gorhom/bottom-sheet
+```
+
+#### 2. Para iOS, instala los pods:
+```sh
+cd ios && pod install && cd ..
+```
 
-`expo-image`
+#### 3. Configura react-native-reanimated:
+Añade el plugin en tu `babel.config.js` (debe ser el último plugin):
+```javascript
+module.exports = {
+  presets: ['module:@react-native/babel-preset'],
+  plugins: ['react-native-reanimated/plugin'],
+};
+```
 
-`react-native-svg` (solo si tus íconos o componentes lo requieren)
+#### 4. Configura react-native-gesture-handler:
+En tu archivo de entrada (`index.js` o `App.tsx`), importa al inicio:
+```typescript
+import 'react-native-gesture-handler';
+```
 
-Instala manualmente si no lo tienes:
+#### 5. Limpia y reconstruye:
 ```sh
-npm install expo-image
+# Android
+npx react-native start --reset-cache
+npx react-native run-android
+
+# iOS
+npx react-native start --reset-cache
+npx react-native run-ios
 ```
 
+### 📚 Información adicional sobre las dependencias
+
+| Dependencia | Propósito | Componentes que la usan |
+| :---------- | :-------- | :---------------------- |
+| **dropi-lib-icons** | Sistema de íconos de Dropi | Todos los componentes con íconos |
+| **expo-image** | Carga optimizada de imágenes | CustomImage |
+| **expo-constants** | Información del dispositivo | Tokens de spacing y sizes |
+| **lottie-react-native** | Animaciones Lottie | EmptyState, componentes con animaciones |
+| **react-native-reanimated** | Animaciones fluidas de alto rendimiento | BottomSheet, transiciones |
+| **react-native-gesture-handler** | Gestos táctiles avanzados | BottomSheet, componentes interactivos |
+| **@gorhom/bottom-sheet** | Modales deslizables desde abajo | BottomSheetComponent, Select |
+
 # Tokens
 
 ## Radius
@@ -412,6 +501,70 @@ import { TextButton } from "@dropi/react-native-design-system";
 
 ```
 
+## Imágenes
+
+## Custom Image
+
+El componente `CustomImage` es un wrapper optimizado del componente `Image` de `expo-image` que agrega **soporte automático para imágenes de respaldo (fallback)** en caso de error de carga. Está diseñado para manejar elegantemente errores de carga de imágenes, mostrando una imagen alternativa cuando la fuente principal falla o no está disponible. Incluye transiciones suaves, soporte para placeholders, y manejo inteligente de fuentes locales y remotas.
+
+### 📦 Importación:
+```Typescript
+import { CustomImage } from '@dropi/react-native-design-system';
+```
+
+### ⚙️ Props:
+| Prop            | Tipo                      | Descripción                                                                                  |
+| :-------------- | :------------------------ | :------------------------------------------------------------------------------------------- |
+| source          | string \| number           | Fuente principal de la imagen. Puede ser una URI (string) o un recurso local (require).       |
+| fallbackSource  | string \| number           | *(Opcional)* Imagen de respaldo mostrada si `source` falla o está vacía.                      |
+| contentFit      | ContentFit                | *(Opcional)* Modo de ajuste de la imagen. Por defecto: `'cover'`.                            |
+| ...rest         | ImageProps (expo-image)   | Todas las props nativas del componente Image de expo-image.                                  |
+
+### 🔧 Características:
+- **Fallback automático**: Si la imagen principal no carga o falla, muestra automáticamente `fallbackSource`.
+- **Placeholder inteligente**: Usa `fallbackSource` como placeholder mientras carga la imagen principal.
+- **Transición suave**: Incluye una transición de 200ms entre estados de carga.
+- **Manejo de errores**: Detecta errores de carga mediante el evento `onError` y cambia a la imagen de respaldo.
+- **Normalización de fuentes**: Maneja tanto URIs (strings) como recursos locales (require) de forma transparente.
+- **Renderizado condicional**: No renderiza nada si no hay fuente válida disponible.
+
+### 🧩 Ejemplos de uso:
+```Typescript
+// Imagen con fallback remoto
+<CustomImage
+  source="https://example.com/product.jpg"
+  fallbackSource="https://example.com/placeholder.jpg"
+  style={{ width: 200, height: 200 }}
+  contentFit="cover"
+/>
+
+// Imagen con fallback local
+<CustomImage
+  source={{ uri: profileImageUrl }}
+  fallbackSource={require('./assets/default-avatar.png')}
+  style={{ width: 100, height: 100, borderRadius: 50 }}
+  contentFit="cover"
+/>
+
+// Imagen que solo usa fallback si source está vacío
+<CustomImage
+  source={product.imageUrl || ''}
+  fallbackSource={require('./assets/no-image.png')}
+  style={{ width: 300, height: 200 }}
+  contentFit="contain"
+/>
+
+// Con todas las props de expo-image
+<CustomImage
+  source="https://api.example.com/image.jpg"
+  fallbackSource="https://example.com/fallback.jpg"
+  style={{ width: '100%', height: 400 }}
+  contentFit="cover"
+  transition={500}
+  cachePolicy="memory-disk"
+/>
+```
+
 ## Moléculas
 
 ## Alert

package/lib/molecules/InputField/molecules/InputLabel.js

@@ -6,13 +6,18 @@ Object.defineProperty(exports, "__esModule", {
 exports.InputLabel = void 0;
 var _atoms = require("../../../atoms");
 var _constants = require("../../../constants");
+var _reactNative = require("react-native");
 var _jsxRuntime = require("react/jsx-runtime");
 const InputLabel = ({
   text
 }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
   type: "m-regular",
   style: {
-    color: _constants.colors["Gray-600"].light
+    color: _constants.colors["Gray-600"].light,
+    marginBottom: _constants.spacing["size-1"],
+    ...(_reactNative.Platform.OS === 'android' && {
+      includeFontPadding: false
+    })
   },
   children: text
 });

package/lib/molecules/InputField/styles.d.ts

@@ -9,7 +9,6 @@ declare const _default: {
         borderWidth: number;
         justifyContent: "space-between";
         flexDirection: "row";
-        marginTop: number;
         height: number;
         paddingHorizontal: number;
         paddingVertical: number;

package/lib/molecules/InputField/styles.js

@@ -17,7 +17,6 @@ var _default = exports.default = _reactNative.StyleSheet.create({
     borderWidth: 1,
     justifyContent: "space-between",
     flexDirection: "row",
-    marginTop: _constants.spacing["size-2"],
     height: 48,
     paddingHorizontal: _constants.spacing["size-3"],
     paddingVertical: _constants.spacing["size-2"]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dropi/react-native-design-system",
-  "version": "0.2.29",
+  "version": "0.2.31",
   "description": "A React Native package built from scratch",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",