@dropi/react-native-design-system 0.1.14 → 0.1.16

package/README.md

@@ -326,4 +326,82 @@ import { TextButton } from "@dropi/react-native-design-system";
   onPress={() => console.log("Eliminar presionado")}
 />
 
+```
+# Moléculas
+## 🚨 Alert
+
+El componente Alert muestra un mensaje contextual acompañado de un ícono y colores que representan su nivel de severidad. Está diseñado para comunicar información relevante al usuario: advertencias, errores, confirmaciones o simples avisos informativos.
+
+Cada variante (info, warning, error, success) aplica automáticamente colores de fondo, borde e ícono usando el sistema de tokens (colors, sizes, radius, spacing). Además, permite incluir un botón de acción secundaria y un botón de cierre opcional.
+
+## 📦 Importación:
+```
+import { Alert } from "@dropi/react-native-design-system";
+
+```
+## ⚙️ Props:
+```
+| Prop            | Tipo                                               | Descripción                                                         |
+|---------------- |--------------------------------------------------- |---------------------------------------------------------------------|
+| `message`       | `string`                                           | Texto principal que describe la alerta.                             |
+| `variant`       | `'info' \| 'warning' \| 'error' \| 'success'`      | Define los colores, ícono y estilo visual general.                  |
+| `buttonLabel`   | `string`                                           | Texto del botón opcional dentro de la alerta.                       |
+| `onButtonPress` | `() => void`                                       | Acción ejecutada al presionar el botón opcional.                    |
+| `onClosePress`  | `() => void`                                       | Acción ejecutada al presionar el botón de cierre (`close-small`).   |
+
+```
+
+## 🧩 Ejemplos de uso:
+```Typescript
+<Alert
+  message="Tu información ha sido guardada correctamente."
+  variant="success"
+  onClosePress={() => console.log("Cerrar alerta")}
+/>
+
+<Alert
+  message="No pudimos procesar tu solicitud."
+  variant="error"
+  buttonLabel="Reintentar"
+  onButtonPress={() => console.log("Reintentar")}
+  onClosePress={() => console.log("Cerrar")}
+ />
+
+ ```
+
+ ## Empty State
+
+El EmptyState es un componente visual diseñado para mostrar pantallas vacías en escenarios donde no hay datos disponibles, ocurrió un estado inicial o se requiere una primera acción del usuario. Puede incluir una imagen, un título opcional, un mensaje descriptivo y un botón configurable. Mantiene una composición centrada y un diseño minimalista, usando automáticamente tamaños distintos para tablet gracias a isTablet.
+
+## 📦 Importación:
+```
+import { EmptyState } from "@dropi/react-native-design-system";
+```
+
+## ⚙️ Props:
+```
+| Prop            | Tipo                      | Descripción                                                   |
+| ---------------- | ------------------------ | ------------------------------------------------------------- |
+| `imageSource`    | `string \| number`       | Imagen opcional (URL o require local) mostrada en la parte superior. |
+| `title`          | `string`                 | Título corto que introduce el estado vacío.                   |
+| `message`        | `string` (obligatorio)   | Texto principal explicando el estado.                         |
+| `buttonLabel`    | `string`                 | Texto del botón opcional.                                     |
+| `onButtonPress`  | `() => void`             | Callback del botón. Si existe, el botón se muestra.           |
+```
+
+## 🧩 Ejemplos de uso:
+
+```
+<EmptyState
+  imageSource={require("../../assets/empty-orders.png")}
+  title="Sin pedidos todavía"
+  message="Cuando tengas pedidos activos aparecerán aquí."
+/>
+
+<EmptyState
+  imageSource="https://example.com/empty.png"
+  message="Aún no has guardado favoritos."
+  buttonLabel="Explorar productos"
+  onButtonPress={() => console.log("Ir a explorar")}
+/>
 ```

package/lib/constants/text.js

@@ -19,7 +19,7 @@ const baseSizes = {
   xxxl: 28,
   xxxxl: 32
 };
-const BASE_WIDTH = 360;
+const BASE_WIDTH = 414;
 const rawScaleFactor = width / BASE_WIDTH;
 const multiplier = rawScaleFactor > 1 ? 1 + (rawScaleFactor - 1) * 0.2 : rawScaleFactor;
 const fontScale = _reactNative.PixelRatio.getFontScale();

package/lib/molecules/EmptyState/EmptyState.js

@@ -8,6 +8,7 @@ var _reactNative = require("react-native");
 var _expoImage = require("expo-image");
 var _constants = require("../../constants");
 var _atoms = require("../../atoms");
+var _utils = require("../../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const EmptyState = ({
   imageSource,
@@ -17,40 +18,21 @@ const EmptyState = ({
   onButtonPress
 }) => {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: {
-      paddingVertical: _constants.spacing['size-4']
-    },
+    style: styles.container,
     children: [imageSource && /*#__PURE__*/(0, _jsxRuntime.jsx)(_expoImage.Image, {
-      source: imageSource
-      //TODO: change hardcoded sizes
-      ,
-      style: {
-        width: 51,
-        height: 48,
-        alignSelf: 'center',
-        marginBottom: _constants.spacing['size-4']
-      },
+      source: imageSource,
+      style: styles.image,
       contentFit: "contain"
     }), title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
       type: "l-medium",
-      style: {
-        color: _constants.colors['Gray-700'].light,
-        textAlign: 'center',
-        marginBottom: _constants.spacing['size-2']
-      },
+      style: styles.title,
       children: title
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
       type: "m-regular",
-      style: {
-        color: _constants.colors['Gray-500'].light,
-        textAlign: 'center'
-      },
+      style: styles.message,
       children: message
     }), buttonLabel && onButtonPress && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: {
-        marginTop: 24,
-        alignItems: 'center'
-      },
+      style: styles.buttonContainer,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.DefaultButton, {
         label: buttonLabel,
         onPress: onButtonPress,
@@ -60,4 +42,28 @@ const EmptyState = ({
     })]
   });
 };
-exports.EmptyState = EmptyState;
+exports.EmptyState = EmptyState;
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    paddingVertical: _constants.spacing['size-4']
+  },
+  image: {
+    width: !_utils.isTablet ? 51 : 72,
+    height: !_utils.isTablet ? 48 : 68,
+    alignSelf: 'center',
+    marginBottom: _constants.spacing['size-4']
+  },
+  title: {
+    color: _constants.colors['Gray-700'].light,
+    textAlign: 'center',
+    marginBottom: _constants.spacing['size-2']
+  },
+  message: {
+    color: _constants.colors['Gray-500'].light,
+    textAlign: 'center'
+  },
+  buttonContainer: {
+    marginTop: _constants.spacing['size-5'],
+    alignItems: 'center'
+  }
+});

package/package.json

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