@janiscommerce/ui-native 1.16.2 → 1.18.0

package/dist/components/atoms/Icon/index.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-interface Props {
+export interface Props {
     name: string;
     color?: string;
     size?: number;

package/dist/components/atoms/Image/index.d.ts

@@ -1,7 +1,10 @@
 import React from 'react';
-import { ImageProps as ImageRNProps, ImageSourcePropType } from 'react-native';
-interface ImageProps extends ImageRNProps {
-    source: ImageSourcePropType;
+import { Props as NativeIconProps } from '../Icon';
+import { ViewStyle } from 'react-native';
+import { FastImageProps } from 'react-native-fast-image';
+interface ImageProps extends FastImageProps {
+    iconProps?: NativeIconProps;
+    iconBackgroundStyle?: ViewStyle;
 }
-declare const Image: ({ source, ...props }: ImageProps) => React.JSX.Element | null;
+declare const Image: ({ source, iconProps, iconBackgroundStyle, onError, ...props }: ImageProps) => React.JSX.Element;
 export default Image;

package/dist/components/atoms/Image/index.js

@@ -1,13 +1,30 @@
-import React from 'react';
-import { Image as ImageComp } from 'react-native';
-const Image = ({ source, ...props }) => {
-    if (!source || typeof source !== 'object' || !Object.keys(source).length) {
-        return null;
+import React, { useState } from 'react';
+import Icon from '../Icon';
+import { palette } from '../../../theme/palette';
+import { View, StyleSheet } from 'react-native';
+import FastImage from 'react-native-fast-image';
+const Image = ({ source, iconProps, iconBackgroundStyle = {}, onError, ...props }) => {
+    const [showPlaceholderImage, setShowPlaceholderImage] = useState(false);
+    const styles = StyleSheet.create({
+        iconBackground: {
+            backgroundColor: palette.white.light,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+    });
+    const placeholderStyle = [styles.iconBackground, iconBackgroundStyle, props.style].filter(Boolean);
+    const handleError = () => {
+        if (onError) {
+            onError();
+        }
+        setShowPlaceholderImage(true);
+    };
+    if (showPlaceholderImage || !source) {
+        return (<View style={placeholderStyle}>
+				<Icon name="exclamation_circle" color={palette.white.dark} size={36} {...iconProps}/>
+			</View>);
     }
-    const sourceKeys = Object.keys(source);
-    if (!sourceKeys.includes('uri')) {
-        return null;
-    }
-    return <ImageComp source={source} {...props}/>;
+    return <FastImage onError={handleError} source={source} {...props}/>;
 };
 export default Image;

package/dist/components/atoms/Modal/index.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ModalProps as NativeModalProps, ViewStyle } from 'react-native';
+export interface UIModalProps extends NativeModalProps {
+    oncloseCallback?: () => void;
+    showCloseButton?: boolean;
+    fullScreen?: boolean;
+    modalContainerStyle?: ViewStyle;
+    canClose?: boolean;
+}
+interface RefProps {
+    open?: () => void;
+    close?: () => void;
+}
+declare const Modal: React.ForwardRefExoticComponent<UIModalProps & React.RefAttributes<RefProps>>;
+export default Modal;

package/dist/components/atoms/Modal/index.js

@@ -0,0 +1,84 @@
+import Icon from '../Icon';
+import React, { useState, forwardRef, useImperativeHandle } from 'react';
+import { Modal as NativeModal, Pressable, StyleSheet, View, } from 'react-native';
+import { horizontalScale } from '../../../scale';
+import { verticalScale, moderateScale } from '../../../scale';
+import { palette } from '../../../theme/palette';
+const styles = StyleSheet.create({
+    Overlay: {
+        flex: 1,
+        backgroundColor: 'rgba(0,0,0,0.6)',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    ModalWrapper: {
+        backgroundColor: palette.base.white,
+        alignItems: 'center',
+        justifyContent: 'center',
+        elevation: 12,
+        minWidth: horizontalScale(50),
+        width: horizontalScale(280),
+        marginHorizontal: horizontalScale(20),
+        borderRadius: verticalScale(18),
+        zIndex: 1,
+    },
+    Shadow: {
+        shadowOffset: {
+            width: 0,
+            height: 2,
+        },
+        shadowOpacity: 0.25,
+    },
+    FullScreen: {
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        backgroundColor: palette.base.white,
+        zIndex: 2,
+    },
+    HeaderWrapper: {
+        flexDirection: 'row',
+        justifyContent: 'flex-end',
+        alignItems: 'center',
+        zIndex: 3,
+        minHeight: verticalScale(52),
+        backgroundColor: palette.base.white,
+    },
+    CloseButton: {
+        position: 'absolute',
+        top: moderateScale(12),
+        right: moderateScale(12),
+    },
+});
+const Modal = forwardRef(({ children = null, oncloseCallback = undefined, showCloseButton = false, canClose = true, animationType = 'fade', transparent = true, fullScreen = false, modalContainerStyle = {}, ...props }, ref) => {
+    const [isVisible, setIsVisible] = useState(false);
+    const renderCloseButton = fullScreen && showCloseButton;
+    const handleClose = () => {
+        if (oncloseCallback) {
+            oncloseCallback();
+        }
+        setIsVisible(false);
+    };
+    useImperativeHandle(ref, () => ({
+        open: () => setIsVisible(true),
+        close: () => setIsVisible(false),
+    }));
+    return (<NativeModal visible={isVisible} transparent={transparent} animationType={animationType} {...props} {...(canClose && {
+        onRequestClose: handleClose,
+    })}>
+				<View style={styles.Overlay}>
+					{!fullScreen && (<Pressable style={StyleSheet.absoluteFill} disabled={!canClose} onPress={handleClose}/>)}
+					<View style={fullScreen
+            ? styles.FullScreen
+            : [styles.ModalWrapper, styles.Shadow, modalContainerStyle]}>
+						{renderCloseButton && canClose && (<Pressable onPress={handleClose} style={styles.HeaderWrapper} accessibilityLabel="Close modal" accessibilityRole="button">
+								<Icon name="cross_light" size={24} color={palette.black.main} style={styles.CloseButton}/>
+							</Pressable>)}
+						{children}
+					</View>
+				</View>
+			</NativeModal>);
+});
+export default Modal;

package/dist/components/organisms/ErrorBoundary/components/ErrorFallback/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface ErrorFallbackProps {
+    error?: string;
+    errorDetails?: string;
+    isDebug?: boolean;
+    errorMessage?: string;
+}
+declare const ErrorFallback: React.FC<ErrorFallbackProps>;
+export default ErrorFallback;

package/dist/components/organisms/ErrorBoundary/components/ErrorFallback/index.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import Collapsible from '../../../../atoms/Collapsible';
+import Typography from '../../../../atoms/Typography';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import { palette } from '../../../../../theme/palette';
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: palette.white.light,
+        padding: 30,
+        borderRadius: 12,
+        margin: 16,
+        shadowColor: palette.base.black,
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.2,
+        shadowRadius: 4,
+        elevation: 5,
+    },
+    errorMessageText: {
+        textAlign: 'center',
+        color: palette.error.main,
+    },
+    showErrorButton: {
+        paddingVertical: 10,
+        paddingHorizontal: 20,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: palette.error.main,
+        borderRadius: 6,
+        marginVertical: 12,
+    },
+    collapsibleWrapper: {
+        marginBottom: 35,
+    },
+    errorDetails: {
+        padding: 10,
+        backgroundColor: palette.black.main,
+        borderRadius: 8,
+        marginVertical: 10,
+    },
+    heading: {
+        marginBottom: 12,
+    },
+    goBackButtonWrapper: {
+        marginTop: 20,
+    },
+});
+const ShowErrorDetailsButton = () => {
+    return (<View style={styles.showErrorButton}>
+			<Typography color={palette.base.white}>Show error details</Typography>
+		</View>);
+};
+const ErrorDetails = ({ errorDetails }) => {
+    return (<View style={styles.errorDetails}>
+			<Typography color={palette.error.main}>{errorDetails}</Typography>
+		</View>);
+};
+const ErrorFallback = ({ error, errorDetails, isDebug, errorMessage, }) => {
+    const data = [
+        {
+            errorDetails,
+        },
+    ];
+    if (errorMessage) {
+        return (<View style={styles.container}>
+				<Typography type="heading" size="large" style={styles.errorMessageText}>
+					{errorMessage}
+				</Typography>
+			</View>);
+    }
+    return (<View style={styles.container}>
+			<Typography type="heading" size="large" style={styles.heading}>
+				Oops! Something went wrong.
+			</Typography>
+			{error && <Typography color={palette.error.main}>{error}</Typography>}
+			{isDebug && (<Collapsible wrapperStyle={styles.collapsibleWrapper} header={ShowErrorDetailsButton} content={ErrorDetails} data={data} pressableComponent={TouchableOpacity}/>)}
+		</View>);
+};
+export default ErrorFallback;

package/dist/components/organisms/ErrorBoundary/index.d.ts

@@ -0,0 +1,22 @@
+import React, { ReactNode } from 'react';
+interface ErrorBoundaryProps {
+    children: ReactNode;
+    isDebug?: boolean;
+    errorMessage?: string;
+    renderErrorComponent?: (errorMessage: string) => ReactNode;
+    onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+    onMount?: () => void;
+}
+interface ErrorBoundaryState {
+    hasError: boolean;
+    error: Error | null;
+    errorInfo: React.ErrorInfo | null;
+}
+declare class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    constructor(props: ErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState>;
+    componentDidMount(): void;
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
+    render(): React.ReactNode;
+}
+export default ErrorBoundary;

package/dist/components/organisms/ErrorBoundary/index.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import ErrorFallback from '../ErrorBoundary/components/ErrorFallback';
+class ErrorBoundary extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            hasError: false,
+            error: null,
+            errorInfo: null,
+        };
+    }
+    static getDerivedStateFromError(error) {
+        return { hasError: true, error };
+    }
+    componentDidMount() {
+        if (this.props.onMount) {
+            this.props.onMount();
+        }
+    }
+    componentDidCatch(error, errorInfo) {
+        this.setState({ errorInfo });
+        if (this.props.onError) {
+            this.props.onError(error, errorInfo);
+        }
+    }
+    render() {
+        if (this.state.hasError) {
+            const { renderErrorComponent } = this.props;
+            if (typeof renderErrorComponent === 'function') {
+                return renderErrorComponent(this.state.error?.message || '');
+            }
+            return (<ErrorFallback isDebug={this.props.isDebug} errorMessage={this.props.errorMessage} error={this.state.error?.message} errorDetails={this.state.errorInfo?.componentStack}/>);
+        }
+        return this.props.children;
+    }
+}
+export default ErrorBoundary;

package/dist/index.d.ts

@@ -13,6 +13,7 @@ import Text from './components/atoms/Text';
 import BaseInput from './components/atoms/BaseInput';
 import Typography from './components/atoms/Typography';
 import Collapsible from './components/atoms/Collapsible';
+import Modal from './components/atoms/Modal';
 import Avatar from './components/molecules/Avatar';
 import Button from './components/molecules/Button';
 import Carousel from './components/molecules/Carousel';
@@ -28,6 +29,7 @@ import Input from './components/molecules/Input';
 import LoadingFullScreen from './components/organisms/LoadingFullScreen';
 import FullScreenMessage from './components/organisms/FullScreenMessage';
 import SwipeItemSelectionList from './components/organisms/SwipeItemSelectionList';
+import ErrorBoundary from './components/organisms/ErrorBoundary';
 import { palette } from './theme/palette';
 import * as getScale from './scale';
-export { Text, Avatar, CheckBox, Icon, Image, Input, Loading, Svg, StatusChip, palette, LoadingFullScreen, RadioButton, Select, SwipeUp, SwipeUpFlatList, SwipeUpScrollView, SwipeUpView, Carousel, ProgressBar, List, BaseButton, Button, getScale, LayoutWithBottomButtons, FullScreenMessage, Toast, configToast, SwipeList, ItemSelectionButton, SwipeItemSelectionList, MainCardList, BaseInput, Typography, Collapsible, };
+export { Text, Avatar, CheckBox, Icon, Image, Input, Loading, Svg, StatusChip, palette, LoadingFullScreen, RadioButton, Select, SwipeUp, SwipeUpFlatList, SwipeUpScrollView, SwipeUpView, Carousel, ProgressBar, List, BaseButton, Button, getScale, LayoutWithBottomButtons, FullScreenMessage, Toast, configToast, SwipeList, ItemSelectionButton, SwipeItemSelectionList, MainCardList, BaseInput, Typography, Collapsible, ErrorBoundary, Modal, };

package/dist/index.js

@@ -14,6 +14,7 @@ import Text from './components/atoms/Text';
 import BaseInput from './components/atoms/BaseInput';
 import Typography from './components/atoms/Typography';
 import Collapsible from './components/atoms/Collapsible';
+import Modal from './components/atoms/Modal';
 // Molecules
 import Avatar from './components/molecules/Avatar';
 import Button from './components/molecules/Button';
@@ -31,7 +32,8 @@ import Input from './components/molecules/Input';
 import LoadingFullScreen from './components/organisms/LoadingFullScreen';
 import FullScreenMessage from './components/organisms/FullScreenMessage';
 import SwipeItemSelectionList from './components/organisms/SwipeItemSelectionList';
+import ErrorBoundary from './components/organisms/ErrorBoundary';
 // Misc
 import { palette } from './theme/palette';
 import * as getScale from './scale';
-export { Text, Avatar, CheckBox, Icon, Image, Input, Loading, Svg, StatusChip, palette, LoadingFullScreen, RadioButton, Select, SwipeUp, SwipeUpFlatList, SwipeUpScrollView, SwipeUpView, Carousel, ProgressBar, List, BaseButton, Button, getScale, LayoutWithBottomButtons, FullScreenMessage, Toast, configToast, SwipeList, ItemSelectionButton, SwipeItemSelectionList, MainCardList, BaseInput, Typography, Collapsible, };
+export { Text, Avatar, CheckBox, Icon, Image, Input, Loading, Svg, StatusChip, palette, LoadingFullScreen, RadioButton, Select, SwipeUp, SwipeUpFlatList, SwipeUpScrollView, SwipeUpView, Carousel, ProgressBar, List, BaseButton, Button, getScale, LayoutWithBottomButtons, FullScreenMessage, Toast, configToast, SwipeList, ItemSelectionButton, SwipeItemSelectionList, MainCardList, BaseInput, Typography, Collapsible, ErrorBoundary, Modal, };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@janiscommerce/ui-native",
-	"version": "1.16.2",
+	"version": "1.18.0",
 	"description": "components library for Janis app",
 	"main": "dist/index.js",
 	"typings": "dist/index.d.ts",
@@ -47,6 +47,7 @@
 		"react": ">=17.0.2",
 		"react-native": ">=0.67.5",
 		"react-native-gesture-handler": ">=2.9.0",
+		"react-native-fast-image": "^8.5.11",
 		"react-native-reanimated": "2.17.0",
 		"react-native-toast-message": ">=1.6.0"
 	},
@@ -96,6 +97,7 @@
 		"react": "17.0.2",
 		"react-dom": "^17.0.2",
 		"react-native": "0.67.5",
+		"react-native-fast-image": "^8.5.11",
 		"react-native-svg-transformer": "^1.0.0",
 		"react-test-renderer": "17.0.2",
 		"setup-env": "^2.0.0",