@dropi/react-native-design-system 0.3.18 → 0.3.20

package/lib/atoms/Buttons/DefaultButton.d.ts

@@ -1,7 +1,12 @@
-import { TouchableOpacityProps } from 'react-native';
-import { IconName } from 'dropi-lib-icons';
-export type Variant = 'primary' | 'secondary' | 'tertiary';
-type Size = 'small' | 'normal' | 'large';
+import { TouchableOpacityProps } from "react-native";
+import { IconName } from "dropi-lib-icons";
+export type Variant = "primary" | "secondary" | "tertiary" | "success" | "error" | "warning" | "info";
+type Size = "small" | "normal" | "large";
+type ButtonConfig = {
+    backgroundColor: string;
+    labelColor: string;
+    borderColor: string;
+};
 interface Props extends TouchableOpacityProps {
     label: string;
     variant: Variant;
@@ -10,6 +15,7 @@ interface Props extends TouchableOpacityProps {
     postIcon?: IconName;
     disabled?: boolean;
     isMakingRequest?: boolean;
+    buttonConfig?: ButtonConfig;
 }
-export declare const DefaultButton: ({ label, variant, size, preIcon, postIcon, disabled, isMakingRequest, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const DefaultButton: ({ label, variant, size, preIcon, postIcon, disabled, isMakingRequest, buttonConfig, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/atoms/Buttons/DefaultButton.js

@@ -18,55 +18,125 @@ const DefaultButton = ({
   postIcon,
   disabled,
   isMakingRequest,
+  buttonConfig,
   ...rest
 }) => {
-  const textVariant = size === 'small' ? 's' : size === 'large' ? 'l' : 'm';
-  const iconSize = size === 'small' ? 12 : size === 'large' ? 16 : 14;
-  const tabletIconSize = size === 'small' ? 20 : size === 'large' ? 24 : 22;
-  const labelColor = variant === 'primary' ? _constants.colors.White.light : variant === 'secondary' ? _constants.colors['Primary-500'].light : _constants.colors['Gray-500'].light;
+  const getTextVariant = () => {
+    if (size === "small") return "s";
+    if (size === "large") return "l";
+    return "m";
+  };
+  const getIconSize = () => {
+    if (size === "small") return 12;
+    if (size === "large") return 16;
+    return 14;
+  };
+  const getTabletIconSize = () => {
+    if (size === "small") return 20;
+    if (size === "large") return 24;
+    return 22;
+  };
+  const getButtonConfig = () => {
+    if (buttonConfig) {
+      return buttonConfig;
+    }
+    switch (variant) {
+      case "secondary":
+        return {
+          backgroundColor: "transparent",
+          labelColor: _constants.colors["Primary-500"].light,
+          borderColor: _constants.colors["Primary-500"].light
+        };
+      case "tertiary":
+        return {
+          backgroundColor: "transparent",
+          labelColor: _constants.colors["Gray-500"].light,
+          borderColor: _constants.colors["Gray-500"].light
+        };
+      case "success":
+        return {
+          backgroundColor: _constants.colors["Success-500"].light,
+          labelColor: _constants.colors.White.light,
+          borderColor: _constants.colors["Success-500"].light
+        };
+      case "error":
+        return {
+          backgroundColor: _constants.colors["Error-500"].light,
+          labelColor: _constants.colors.White.light,
+          borderColor: _constants.colors["Error-500"].light
+        };
+      case "warning":
+        return {
+          backgroundColor: _constants.colors["Warning-500"].light,
+          labelColor: _constants.colors.White.light,
+          borderColor: _constants.colors["Warning-500"].light
+        };
+      case "info":
+        return {
+          backgroundColor: _constants.colors["Info-500"].light,
+          labelColor: _constants.colors.White.light,
+          borderColor: _constants.colors["Info-500"].light
+        };
+      default:
+        // Primary variant
+        return {
+          backgroundColor: _constants.colors["Primary-500"].light,
+          labelColor: _constants.colors.White.light,
+          borderColor: _constants.colors["Primary-500"].light
+        };
+    }
+  };
+  const getPaddingVertical = () => {
+    if (size === "small") return _constants.spacing["size-2"];
+    if (size === "large") return _constants.spacing["size-4"];
+    return _constants.spacing["size-3"];
+  };
+  const textVariant = getTextVariant();
+  const iconSize = getIconSize();
+  const tabletIconSize = getTabletIconSize();
+  const currentButtonConfig = getButtonConfig();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
     style: {
-      backgroundColor: variant == 'primary' ? _constants.colors['Primary-500'].light : 'transparent',
-      paddingVertical: size === 'small' ? _constants.spacing['size-2'] : size === 'large' ? _constants.spacing['size-4'] : _constants.spacing['size-3'],
-      paddingHorizontal: _constants.spacing['size-4'],
-      borderRadius: _constants.radius['border-2'],
-      alignItems: 'center',
-      justifyContent: 'center',
+      backgroundColor: currentButtonConfig.backgroundColor,
+      paddingVertical: getPaddingVertical(),
+      paddingHorizontal: _constants.spacing["size-4"],
+      borderRadius: _constants.radius["border-2"],
+      alignItems: "center",
+      justifyContent: "center",
       opacity: disabled ? 0.5 : 1,
-      borderWidth: variant === 'primary' ? 0 : 1,
-      borderColor: variant === 'secondary' ? _constants.colors['Primary-500'].light : _constants.colors['Gray-500'].light,
-      flexDirection: 'row'
+      borderWidth: 1,
+      borderColor: currentButtonConfig.borderColor,
+      flexDirection: "row"
     },
     disabled: disabled || isMakingRequest,
     ...rest,
     children: [preIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: {
-        marginRight: _constants.spacing['size-2']
+        marginRight: _constants.spacing["size-2"]
       },
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative2.Icon, {
         name: preIcon,
-        size: !_utils.isTablet ? iconSize : tabletIconSize,
-        color: labelColor
+        size: _utils.isTablet ? tabletIconSize : iconSize,
+        color: currentButtonConfig.labelColor
       })
-    }), !isMakingRequest ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Label, {
+    }), isMakingRequest ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
+      color: currentButtonConfig.labelColor
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Label, {
       type: textVariant,
       style: {
-        color: labelColor
+        color: currentButtonConfig.labelColor
       },
       children: label
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
-      color: labelColor
     }), postIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: {
-        marginLeft: _constants.spacing['size-2']
+        marginLeft: _constants.spacing["size-2"]
       },
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative2.Icon, {
         name: postIcon,
-        size: !_utils.isTablet ? iconSize : tabletIconSize,
-        color: labelColor
+        size: _utils.isTablet ? tabletIconSize : iconSize,
+        color: currentButtonConfig.labelColor
       })
     })]
   });
 };
-exports.DefaultButton = DefaultButton;
-const styles = _reactNative.StyleSheet.create({});
+exports.DefaultButton = DefaultButton;

package/lib/molecules/DialogModal/DialogModal.d.ts

@@ -1,7 +1,8 @@
 import { FC } from "react";
-export type DialogModalTypes = 'success' | 'error' | 'warning' | 'info';
+export type DialogModalTypes = "success" | "error" | "warning" | "info";
 export type DialogModalConfig = {
     variant: DialogModalTypes;
+    isWhiteBrand?: boolean;
     title: string;
     message: string;
     buttonText?: string;

package/lib/molecules/DialogModal/DialogModal.js

@@ -15,16 +15,55 @@ var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const DialogModal = ({
   variant,
+  isWhiteBrand = false,
   title,
   message,
-  buttonText = 'Aceptar',
+  buttonText = "Aceptar",
   secondButtonText,
   handlePrimaryBtn,
   handleSecundaryBtn,
   setShowAlert
 }) => {
   const animation = (0, _react.useRef)(null);
-  const lottieFile = variant === 'success' ? require('../../../assets/lottie/afirmacion.json') : variant === 'error' ? require('../../../assets/lottie/buscando.json') : variant === 'warning' ? require('../../../assets/lottie/alerta.json') : require('../../../assets/lottie/pregunta.json');
+  const getDialogConfig = () => {
+    switch (variant) {
+      case "success":
+        return {
+          lottieFile: require("../../assets/Lottie/afirmacion.json"),
+          iconName: "check-circle",
+          color: _constants.colors["Success-500"].light
+        };
+      case "error":
+        return {
+          lottieFile: require("../../assets/Lottie/buscando.json"),
+          iconName: "cross-circle",
+          color: _constants.colors["Error-500"].light
+        };
+      case "warning":
+        return {
+          lottieFile: require("../../assets/Lottie/alerta.json"),
+          iconName: "warning-circle",
+          color: _constants.colors["Warning-500"].light
+        };
+      case "info":
+        return {
+          lottieFile: require("../../assets/Lottie/pregunta.json"),
+          iconName: "info",
+          color: _constants.colors["Info-500"].light
+        };
+      default:
+        return {
+          lottieFile: require("../../assets/Lottie/pregunta.json"),
+          iconName: "info",
+          color: _constants.colors["Gray-400"].light
+        };
+    }
+  };
+  const {
+    lottieFile,
+    iconName,
+    color
+  } = getDialogConfig();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     style: styles.backgroundContainer,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -39,7 +78,21 @@ const DialogModal = ({
             color: _constants.colors["Gray-800"].light
           })
         })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_lottieReactNative.default, {
+      }), isWhiteBrand ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          width: 84,
+          height: 84,
+          borderRadius: 42,
+          justifyContent: "center",
+          alignItems: "center",
+          backgroundColor: color
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative2.default, {
+          name: iconName,
+          size: 28,
+          color: _constants.colors["White"].light
+        })
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_lottieReactNative.default, {
         autoPlay: true,
         ref: animation,
         style: styles.lottieAnimation,
@@ -60,7 +113,15 @@ const DialogModal = ({
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.btnsContainer,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.DefaultButton, {
+        children: [isWhiteBrand ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.DefaultButton, {
+          variant: variant,
+          size: "normal",
+          label: buttonText,
+          onPress: () => {
+            handlePrimaryBtn?.();
+            setShowAlert(false);
+          }
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.DefaultButton, {
           variant: "primary",
           size: "normal",
           label: buttonText,
@@ -70,7 +131,20 @@ const DialogModal = ({
           }
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
           style: styles.buttonSpacer
-        }), secondButtonText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.DefaultButton, {
+        }), secondButtonText && (isWhiteBrand ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.DefaultButton, {
+          variant: variant,
+          size: "normal",
+          label: secondButtonText,
+          onPress: () => {
+            handleSecundaryBtn?.();
+            setShowAlert(false);
+          },
+          buttonConfig: {
+            backgroundColor: "transparent",
+            labelColor: color,
+            borderColor: color
+          }
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.DefaultButton, {
           variant: "secondary",
           size: "normal",
           label: secondButtonText,
@@ -78,7 +152,7 @@ const DialogModal = ({
             handleSecundaryBtn?.();
             setShowAlert(false);
           }
-        })]
+        }))]
       })]
     })
   });
@@ -95,41 +169,41 @@ const styles = _reactNative.StyleSheet.create({
     alignItems: "center"
   },
   dialogContainer: {
-    padding: _constants.spacing['size-5'],
+    padding: _constants.spacing["size-5"],
     backgroundColor: "white",
     borderRadius: _constants.radius["border-3"],
     width: "90%",
     maxWidth: 600,
-    alignItems: 'center'
+    alignItems: "center"
   },
   titleContainer: {
-    marginTop: _constants.spacing['size-6']
+    marginTop: _constants.spacing["size-6"]
   },
   titleText: {
-    textAlign: 'center'
+    textAlign: "center"
   },
   messageContainer: {
-    marginTop: _constants.spacing['size-3']
+    marginTop: _constants.spacing["size-3"]
   },
   descriptionText: {
     color: _constants.colors["Gray-400"].light,
-    textAlign: 'center'
+    textAlign: "center"
   },
   closeButtonContainer: {
-    width: '100%',
-    flexDirection: 'row',
-    justifyContent: 'flex-end'
+    width: "100%",
+    flexDirection: "row",
+    justifyContent: "flex-end"
   },
   lottieAnimation: {
     width: 100,
     height: 100,
-    backgroundColor: '#fff'
+    backgroundColor: "#fff"
   },
   btnsContainer: {
-    width: '100%',
-    marginTop: _constants.spacing['size-6']
+    width: "100%",
+    marginTop: _constants.spacing["size-6"]
   },
   buttonSpacer: {
-    height: _constants.spacing['size-3']
+    height: _constants.spacing["size-3"]
   }
 });

package/lib/molecules/Toasts/ToastProvider/ToastProvider.js

@@ -12,7 +12,7 @@ var _utils = require("../../../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const ToastContext = exports.ToastContext = /*#__PURE__*/(0, _react.createContext)(undefined);
-const DEFAULT_DURATION = 4000;
+const DEFAULT_DURATION = 3000;
 const ToastProvider = ({
   children
 }) => {
@@ -121,21 +121,6 @@ const ToastProvider = ({
     animateInRef.current = animateIn;
   }, [animateIn]);
 
-  // Auto-process queue when currentToast is null and queue has items
-  (0, _react.useEffect)(() => {
-    if (!currentToast && !isAnimating && queue.length > 0) {
-      // Defer to avoid state update during render
-      setTimeout(() => {
-        setQueue(prevQueue => {
-          if (prevQueue.length === 0) return prevQueue;
-          const [nextToast, ...remainingQueue] = prevQueue;
-          setCurrentToast(nextToast);
-          return remainingQueue;
-        });
-      }, 0);
-    }
-  }, [currentToast, isAnimating, queue.length]);
-
   // Handle auto-dismiss - only depends on currentToast
   (0, _react.useEffect)(() => {
     if (!currentToast) return;

package/package.json

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