@dropi/react-native-design-system 0.1.25 → 0.2.1

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

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

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

@@ -0,0 +1,136 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FeedbackToast = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _lottieReactNative = _interopRequireDefault(require("lottie-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 FeedbackToast = exports.FeedbackToast = /*#__PURE__*/(0, _react.forwardRef)(({
+  type,
+  title,
+  message,
+  setShowToast
+}, ref) => {
+  const slideAnim = (0, _react.useRef)(new _reactNative.Animated.Value(-100)).current;
+  const [isAnimating, setIsAnimating] = (0, _react.useState)(false);
+  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
+    }],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        backgroundColor: bandColor,
+        height: '100%',
+        width: 12,
+        borderTopLeftRadius: _constants.radius['border-2'],
+        borderBottomLeftRadius: _constants.radius['border-2']
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        paddingVertical: _constants.spacing['size-4']
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_lottieReactNative.default, {
+        autoPlay: true,
+        ref: animation,
+        style: {
+          width: !_utils.isTablet ? 60 : 80,
+          height: !_utils.isTablet ? 60 : 80,
+          backgroundColor: '#fff',
+          marginHorizontal: _constants.spacing['size-4']
+        },
+        source: lottieFile
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: {
+        flexDirection: 'row',
+        flex: 1,
+        paddingVertical: _constants.spacing['size-4']
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: {
+          flexShrink: 1,
+          marginRight: _constants.spacing['size-4']
+        },
+        children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Heading, {
+          type: "h5",
+          style: {
+            color: _constants.colors['Gray-700'].light
+          },
+          children: title
+        }), message && /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
+          type: "m-regular",
+          style: {
+            marginTop: _constants.spacing['size-1'],
+            color: _constants.colors['Gray-600'].light
+          },
+          children: message
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.TextButton, {
+        label: "",
+        variant: "secondary",
+        size: "large",
+        postIcon: "close-large",
+        onPress: closeToast
+      })]
+    })]
+  });
+});
+const styles = _reactNative.StyleSheet.create({
+  toastContainer: {
+    position: 'absolute',
+    zIndex: 99,
+    backgroundColor: '#fff',
+    width: _utils.windowWidth - 32,
+    maxWidth: 700,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingRight: _constants.spacing['size-5'],
+    borderRadius: _constants.radius['border-2'],
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: _constants.radius['border-1'],
+    elevation: 5,
+    alignSelf: 'center'
+  }
+});

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

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

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

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

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

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

package/lib/molecules/Toasts/index.js

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

package/lib/molecules/index.d.ts

@@ -3,3 +3,4 @@ export * from './EmptyState';
 export * from './RadioButtons';
 export * from './Search';
 export * from './Tooltip';
+export * from './Toasts';

package/lib/molecules/index.js

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

package/lib/utils/DeviceInfo.d.ts

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

package/lib/utils/DeviceInfo.js

@@ -3,7 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.windowWidth = exports.isTablet = void 0;
+exports.windowWidth = 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 isTablet = exports.isTablet = windowWidth >= 768;
+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.1.25",
+  "version": "0.2.1",
   "description": "A React Native package built from scratch",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -22,7 +22,9 @@
     "react": ">=19.0.0",
     "react-native": ">=0.79.5",
     "dropi-lib-icons": ">=1.2.5",
-    "expo-image": ">=2.4.0"
+    "expo-image": ">=2.4.0",
+    "lottie-react-native": ">=7.2.2",
+    "expo-constants": ">=17.1.7"
   },
   "devDependencies": {
     "@babel/cli": "^7.28.3",
@@ -35,6 +37,8 @@
     "react-native": "^0.82.1",
     "typescript": "^5.6.0",
     "dropi-lib-icons": "^1.2.5",
-    "expo-image": ">=2.4.0"
+    "expo-image": ">=2.4.0",
+    "lottie-react-native": ">=7.2.2",
+    "expo-constants": ">=17.1.7"
   }
 }