@dropi/react-native-design-system 0.3.6 → 0.3.8

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

@@ -0,0 +1,13 @@
+import { FC } from "react";
+export type DialogModalTypes = 'success' | 'error' | 'warning' | 'info';
+export type DialogModalConfig = {
+    variant: DialogModalTypes;
+    title: string;
+    message: string;
+    buttonText?: string;
+    secondButtonText?: string;
+    setShowAlert: (flag: boolean) => void;
+    handlePrimaryBtn?: () => void;
+    handleSecundaryBtn?: () => void;
+};
+export declare const DialogModal: FC<DialogModalConfig>;

package/lib/molecules/DialogModal/DialogModal.js

@@ -0,0 +1,135 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DialogModal = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _lottieReactNative = _interopRequireDefault(require("lottie-react-native"));
+var _reactNative2 = _interopRequireDefault(require("dropi-lib-icons/react-native"));
+var _utils = require("../../utils");
+var _constants = require("../../constants");
+var _atoms = require("../../atoms");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const DialogModal = ({
+  variant,
+  title,
+  message,
+  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');
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: styles.backgroundContainer,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.dialogContainer,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.closeButtonContainer,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+          onPress: () => setShowAlert(false),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative2.default, {
+            name: "close-large",
+            size: 20,
+            color: _constants.colors["Gray-800"].light
+          })
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_lottieReactNative.default, {
+        autoPlay: true,
+        ref: animation,
+        style: styles.lottieAnimation,
+        source: lottieFile
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.titleContainer,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Heading, {
+          type: "h4",
+          style: styles.titleText,
+          children: title
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.messageContainer,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
+          type: "m-regular",
+          style: styles.descriptionText,
+          children: message
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.btnsContainer,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.DefaultButton, {
+          variant: "primary",
+          size: "normal",
+          label: buttonText,
+          onPress: () => {
+            handlePrimaryBtn?.();
+            setShowAlert(false);
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.buttonSpacer
+        }), secondButtonText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.DefaultButton, {
+          variant: "secondary",
+          size: "normal",
+          label: secondButtonText,
+          onPress: () => {
+            handleSecundaryBtn?.();
+            setShowAlert(false);
+          }
+        })]
+      })]
+    })
+  });
+};
+exports.DialogModal = DialogModal;
+const styles = _reactNative.StyleSheet.create({
+  backgroundContainer: {
+    backgroundColor: "rgba(0,0,0,0.25)",
+    position: "absolute",
+    width: _utils.windowWidth,
+    height: _utils.windowHeight,
+    zIndex: 99,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  dialogContainer: {
+    padding: _constants.spacing['size-5'],
+    backgroundColor: "white",
+    borderRadius: _constants.radius["border-3"],
+    width: "90%",
+    maxWidth: 600,
+    alignItems: 'center'
+  },
+  titleContainer: {
+    marginTop: _constants.spacing['size-6']
+  },
+  titleText: {
+    textAlign: 'center'
+  },
+  messageContainer: {
+    marginTop: _constants.spacing['size-3']
+  },
+  descriptionText: {
+    color: _constants.colors["Gray-400"].light,
+    textAlign: 'center'
+  },
+  closeButtonContainer: {
+    width: '100%',
+    flexDirection: 'row',
+    justifyContent: 'flex-end'
+  },
+  lottieAnimation: {
+    width: 100,
+    height: 100,
+    backgroundColor: '#fff'
+  },
+  btnsContainer: {
+    width: '100%',
+    marginTop: _constants.spacing['size-6']
+  },
+  buttonSpacer: {
+    height: _constants.spacing['size-3']
+  }
+});

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

@@ -0,0 +1 @@
+export * from './DialogModal';

package/lib/molecules/DialogModal/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _DialogModal = require("./DialogModal");
+Object.keys(_DialogModal).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _DialogModal[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _DialogModal[key];
+    }
+  });
+});

package/lib/molecules/Toasts/FeedbackToast/FeedbackToast.d.ts

@@ -1,11 +1,8 @@
-export type ToastTypes = 'success' | 'error' | 'warning' | 'info';
-export type ToastConfig = {
+import type { ToastTypes } from '../types';
+export type FeedbackToastProps = {
     type: ToastTypes;
     title?: string;
     message?: string;
-    setShowToast: (show: boolean) => void;
+    onClose: () => void;
 };
-export type ToastRef = {
-    animateOut: () => void;
-};
-export declare const FeedbackToast: import("react").ForwardRefExoticComponent<ToastConfig & import("react").RefAttributes<ToastRef>>;
+export declare const FeedbackToast: ({ type, title, message, onClose }: FeedbackToastProps) => import("react/jsx-runtime").JSX.Element;

package/lib/molecules/Toasts/FeedbackToast/FeedbackToast.js

@@ -12,48 +12,17 @@ var _constants = require("../../../constants");
 var _atoms = require("../../../atoms");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const FeedbackToast = exports.FeedbackToast = /*#__PURE__*/(0, _react.forwardRef)(({
+const FeedbackToast = ({
   type,
   title,
   message,
-  setShowToast
-}, ref) => {
-  const slideAnim = (0, _react.useRef)(new _reactNative.Animated.Value(-100)).current;
-  const [isAnimating, setIsAnimating] = (0, _react.useState)(false);
+  onClose
+}) => {
   const animation = (0, _react.useRef)(null);
-  const closeToast = () => {
-    if (isAnimating) return;
-    setIsAnimating(true);
-    _reactNative.Animated.timing(slideAnim, {
-      toValue: -100,
-      duration: 400,
-      useNativeDriver: false
-    }).start(() => {
-      setIsAnimating(false);
-      setShowToast(false);
-    });
-  };
-  (0, _react.useEffect)(() => {
-    // playSound()
-    _reactNative.Animated.sequence([_reactNative.Animated.timing(slideAnim, {
-      toValue: _reactNative.Platform.OS === 'ios' ? 100 : 50 + _utils.statusBarHeight,
-      duration: 300,
-      useNativeDriver: false
-    }), _reactNative.Animated.timing(slideAnim, {
-      toValue: _reactNative.Platform.OS === 'ios' ? 80 : 30 + _utils.statusBarHeight,
-      duration: 120,
-      useNativeDriver: false
-    })]).start();
-  }, []);
-  (0, _react.useImperativeHandle)(ref, () => ({
-    animateOut: closeToast
-  }));
   const lottieFile = type === 'success' ? require('../../../../assets/lottie/afirmacion.json') : type === 'error' ? require('../../../../assets/lottie/buscando.json') : type === 'warning' ? require('../../../../assets/lottie/alerta.json') : require('../../../../assets/lottie/pregunta.json');
   const bandColor = type === 'success' ? _constants.colors['Success-500'].light : type === 'error' ? _constants.colors['Error-500'].light : type === 'warning' ? _constants.colors['Warning-500'].light : _constants.colors['Info-500'].light;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
-    style: [styles.toastContainer, {
-      top: slideAnim
-    }],
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.toastContainer,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: {
         backgroundColor: bandColor,
@@ -108,15 +77,14 @@ const FeedbackToast = exports.FeedbackToast = /*#__PURE__*/(0, _react.forwardRef
         variant: "secondary",
         size: "large",
         postIcon: "close-large",
-        onPress: closeToast
+        onPress: onClose
       })]
     })]
   });
-});
+};
+exports.FeedbackToast = FeedbackToast;
 const styles = _reactNative.StyleSheet.create({
   toastContainer: {
-    position: 'absolute',
-    zIndex: 99,
     backgroundColor: '#fff',
     width: _utils.windowWidth - 32,
     maxWidth: 700,
@@ -131,7 +99,6 @@ const styles = _reactNative.StyleSheet.create({
     },
     shadowOpacity: 0.25,
     shadowRadius: _constants.radius['border-1'],
-    elevation: 5,
-    alignSelf: 'center'
+    elevation: 5
   }
 });

package/lib/molecules/Toasts/ToastProvider/ToastProvider.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { ShowToastParams } from '../types';
+type ToastContextValue = {
+    showToast: (params: ShowToastParams) => void;
+};
+export declare const ToastContext: React.Context<ToastContextValue | undefined>;
+type ToastProviderProps = {
+    children: React.ReactNode;
+};
+export declare const ToastProvider: ({ children }: ToastProviderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,159 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ToastProvider = exports.ToastContext = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _FeedbackToast = require("../FeedbackToast/FeedbackToast");
+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 ToastProvider = ({
+  children
+}) => {
+  const [currentToast, setCurrentToast] = (0, _react.useState)(null);
+  const [queue, setQueue] = (0, _react.useState)([]);
+  const [isAnimating, setIsAnimating] = (0, _react.useState)(false);
+  const slideAnim = (0, _react.useRef)(new _reactNative.Animated.Value(-100)).current;
+  const timeoutRef = (0, _react.useRef)(null);
+  const toastIdCounter = (0, _react.useRef)(0);
+
+  // Cleanup timers on unmount
+  (0, _react.useEffect)(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  // Animate in the toast
+  const animateIn = (0, _react.useCallback)(() => {
+    setIsAnimating(true);
+    _reactNative.Animated.sequence([_reactNative.Animated.timing(slideAnim, {
+      toValue: _reactNative.Platform.OS === 'ios' ? 100 : 50 + _utils.statusBarHeight,
+      duration: 300,
+      useNativeDriver: true
+    }), _reactNative.Animated.timing(slideAnim, {
+      toValue: _reactNative.Platform.OS === 'ios' ? 80 : 30 + _utils.statusBarHeight,
+      duration: 120,
+      useNativeDriver: true
+    })]).start(() => {
+      setIsAnimating(false);
+    });
+  }, [slideAnim]);
+
+  // Animate out the toast
+  const animateOut = (0, _react.useCallback)(callback => {
+    if (isAnimating) return;
+    setIsAnimating(true);
+    _reactNative.Animated.timing(slideAnim, {
+      toValue: -100,
+      duration: 400,
+      useNativeDriver: true
+    }).start(() => {
+      setIsAnimating(false);
+      setCurrentToast(null);
+      callback?.();
+    });
+  }, [slideAnim, isAnimating]);
+
+  // Process the next toast in the queue
+  const processQueue = (0, _react.useCallback)(() => {
+    setQueue(prevQueue => {
+      if (prevQueue.length === 0) return prevQueue;
+      const [nextToast, ...remainingQueue] = prevQueue;
+      setCurrentToast(nextToast);
+      return remainingQueue;
+    });
+  }, []);
+
+  // Handle auto-dismiss
+  (0, _react.useEffect)(() => {
+    if (!currentToast) return;
+
+    // Clear any existing timeout
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+
+    // Animate in
+    animateIn();
+
+    // Set auto-dismiss if duration > 0
+    if (currentToast.duration && currentToast.duration > 0) {
+      timeoutRef.current = setTimeout(() => {
+        animateOut(() => {
+          processQueue();
+        });
+      }, currentToast.duration);
+    }
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, [currentToast, animateIn, animateOut, processQueue]);
+
+  // Handle manual close
+  const handleClose = (0, _react.useCallback)(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    animateOut(() => {
+      processQueue();
+    });
+  }, [animateOut, processQueue]);
+
+  // Public API: showToast
+  const showToast = (0, _react.useCallback)(params => {
+    const newToast = {
+      id: `toast-${toastIdCounter.current++}`,
+      type: params.type,
+      title: params.title,
+      message: params.message,
+      duration: params.duration ?? DEFAULT_DURATION
+    };
+    if (!currentToast && !isAnimating) {
+      // No toast showing, show immediately
+      setCurrentToast(newToast);
+    } else {
+      // Toast already showing, add to queue
+      setQueue(prevQueue => [...prevQueue, newToast]);
+    }
+  }, [currentToast, isAnimating]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ToastContext.Provider, {
+    value: {
+      showToast
+    },
+    children: [children, currentToast && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+      style: [styles.toastWrapper, {
+        transform: [{
+          translateY: slideAnim
+        }]
+      }],
+      pointerEvents: "box-none",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FeedbackToast.FeedbackToast, {
+        type: currentToast.type,
+        title: currentToast.title,
+        message: currentToast.message,
+        onClose: handleClose
+      })
+    })]
+  });
+};
+exports.ToastProvider = ToastProvider;
+const styles = _reactNative.StyleSheet.create({
+  toastWrapper: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 9999,
+    alignItems: 'center'
+  }
+});

package/lib/molecules/Toasts/ToastProvider/index.d.ts

@@ -0,0 +1,2 @@
+export { ToastProvider } from './ToastProvider';
+export { useToast } from './useToast';

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

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ToastProvider", {
+  enumerable: true,
+  get: function () {
+    return _ToastProvider.ToastProvider;
+  }
+});
+Object.defineProperty(exports, "useToast", {
+  enumerable: true,
+  get: function () {
+    return _useToast.useToast;
+  }
+});
+var _ToastProvider = require("./ToastProvider");
+var _useToast = require("./useToast");

package/lib/molecules/Toasts/ToastProvider/useToast.d.ts

@@ -0,0 +1,3 @@
+export declare const useToast: () => {
+    showToast: (params: import("..").ShowToastParams) => void;
+};

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

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useToast = void 0;
+var _react = require("react");
+var _ToastProvider = require("./ToastProvider");
+const useToast = () => {
+  const context = (0, _react.useContext)(_ToastProvider.ToastContext);
+  if (context === undefined) {
+    throw new Error('useToast must be used within a ToastProvider');
+  }
+  return context;
+};
+exports.useToast = useToast;

package/lib/molecules/Toasts/index.d.ts

@@ -1 +1,3 @@
+export * from './types';
 export * from './FeedbackToast';
+export * from './ToastProvider';

package/lib/molecules/Toasts/index.js

@@ -3,6 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _types = require("./types");
+Object.keys(_types).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _types[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _types[key];
+    }
+  });
+});
 var _FeedbackToast = require("./FeedbackToast");
 Object.keys(_FeedbackToast).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -13,4 +24,15 @@ Object.keys(_FeedbackToast).forEach(function (key) {
       return _FeedbackToast[key];
     }
   });
+});
+var _ToastProvider = require("./ToastProvider");
+Object.keys(_ToastProvider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ToastProvider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ToastProvider[key];
+    }
+  });
 });

package/lib/molecules/Toasts/types.d.ts

@@ -0,0 +1,11 @@
+export type ToastTypes = 'success' | 'error' | 'warning' | 'info';
+export type ToastConfig = {
+    id: string;
+    type: ToastTypes;
+    title?: string;
+    message?: string;
+    duration?: number;
+};
+export type ShowToastParams = Omit<ToastConfig, 'id'> & {
+    duration?: number;
+};

package/lib/molecules/Toasts/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/molecules/index.d.ts

@@ -9,3 +9,4 @@ export * from "./Tooltip";
 export * from "./Toasts";
 export * from "./Tags";
 export * from "./InputField";
+export * from "./DialogModal";

package/lib/molecules/index.js

@@ -123,4 +123,15 @@ Object.keys(_InputField).forEach(function (key) {
       return _InputField[key];
     }
   });
+});
+var _DialogModal = require("./DialogModal");
+Object.keys(_DialogModal).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _DialogModal[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _DialogModal[key];
+    }
+  });
 });

package/lib/utils/DeviceInfo.d.ts

@@ -1,3 +1,4 @@
 export declare const windowWidth: number;
+export declare const windowHeight: number;
 export declare const isTablet: boolean;
 export declare const statusBarHeight: number;

package/lib/utils/DeviceInfo.js

@@ -3,10 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.windowWidth = exports.statusBarHeight = exports.isTablet = void 0;
+exports.windowWidth = exports.windowHeight = exports.statusBarHeight = exports.isTablet = void 0;
 var _reactNative = require("react-native");
 var _expoConstants = _interopRequireDefault(require("expo-constants"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const windowWidth = exports.windowWidth = _reactNative.Dimensions.get("window").width;
+const windowHeight = exports.windowHeight = _reactNative.Dimensions.get("window").height;
 const isTablet = exports.isTablet = windowWidth >= 768;
 const statusBarHeight = exports.statusBarHeight = _expoConstants.default.statusBarHeight;

package/package.json

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