@janiscommerce/ui-native 1.17.0 → 1.19.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;
+}
+export interface ModalMethods {
+    open?: () => void;
+    close?: () => void;
+}
+declare const Modal: React.ForwardRefExoticComponent<UIModalProps & React.RefAttributes<ModalMethods>>;
+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/molecules/BaseDetail/components/BaseDetailModal/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ModalMethods } from '../../../../atoms/Modal';
+declare const BaseDetailModal: React.ForwardRefExoticComponent<{
+    componentType: "modal";
+} & import("../../../../atoms/Modal").UIModalProps & {
+    scrollProps?: import("react-native").ScrollViewProps | undefined;
+} & React.RefAttributes<ModalMethods>>;
+export default BaseDetailModal;

package/dist/components/molecules/BaseDetail/components/BaseDetailModal/index.js

@@ -0,0 +1,12 @@
+import React, { forwardRef } from 'react';
+import Modal from '../../../../atoms/Modal';
+import { ScrollView } from 'react-native';
+const BaseDetailModal = forwardRef((props, ref) => {
+    const { children, scrollProps = {}, ...rest } = props;
+    return (<Modal ref={ref} {...rest}>
+			<ScrollView showsVerticalScrollIndicator={false} {...scrollProps}>
+				{children}
+			</ScrollView>
+		</Modal>);
+});
+export default BaseDetailModal;

package/dist/components/molecules/BaseDetail/components/BaseDetailSwipe/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare const BaseDetailSwipe: React.ForwardRefExoticComponent<{
+    componentType: "swipe";
+} & import("../../../../atoms/SwipeUp").SwipeUpProps & {
+    scrollProps?: import("@gorhom/bottom-sheet/lib/typescript/components/bottomSheetScrollable/types").BottomSheetScrollViewProps | undefined;
+} & React.RefAttributes<import("@gorhom/bottom-sheet/lib/typescript/types").BottomSheetMethods>>;
+export default BaseDetailSwipe;

package/dist/components/molecules/BaseDetail/components/BaseDetailSwipe/index.js

@@ -0,0 +1,12 @@
+import React, { forwardRef } from 'react';
+import SwipeUp from '../../../../atoms/SwipeUp';
+import { SwipeUpScrollView } from '../../../../atoms/SwipeUp/childComponents';
+const BaseDetailSwipe = forwardRef((props, ref) => {
+    const { children, scrollProps = {}, ...rest } = props;
+    return (<SwipeUp ref={ref} {...rest}>
+			<SwipeUpScrollView showsVerticalScrollIndicator={false} {...scrollProps}>
+				{children}
+			</SwipeUpScrollView>
+		</SwipeUp>);
+});
+export default BaseDetailSwipe;

package/dist/components/molecules/BaseDetail/components/index.d.ts

@@ -0,0 +1,3 @@
+import BaseDetailModal from './BaseDetailModal';
+import BaseDetailSwipe from './BaseDetailSwipe';
+export { BaseDetailModal, BaseDetailSwipe };

package/dist/components/molecules/BaseDetail/components/index.js

@@ -0,0 +1,3 @@
+import BaseDetailModal from './BaseDetailModal';
+import BaseDetailSwipe from './BaseDetailSwipe';
+export { BaseDetailModal, BaseDetailSwipe };

package/dist/components/molecules/BaseDetail/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { BaseModalProps, BaseSwipeUpProps } from './types';
+import { ModalMethods } from '../../atoms/Modal';
+import { BottomSheetMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
+type BaseDetailProps = BaseModalProps | BaseSwipeUpProps;
+export type BaseDetailMethods = ModalMethods & BottomSheetMethods;
+declare const BaseDetail: React.ForwardRefExoticComponent<BaseDetailProps & React.RefAttributes<BaseDetailMethods>>;
+export default BaseDetail;

package/dist/components/molecules/BaseDetail/index.js

@@ -0,0 +1,9 @@
+import React, { forwardRef } from 'react';
+import { BaseDetailModal, BaseDetailSwipe } from './components';
+const BaseDetail = forwardRef((props, ref) => {
+    if (props.componentType === 'swipe') {
+        return <BaseDetailSwipe {...props} ref={ref} enablePanDownToClose index={-1}/>;
+    }
+    return <BaseDetailModal {...props} fullScreen componentType="modal" ref={ref}/>;
+});
+export default BaseDetail;

package/dist/components/molecules/BaseDetail/types/index.d.ts

@@ -0,0 +1,15 @@
+import { BottomSheetScrollViewProps } from '@gorhom/bottom-sheet/lib/typescript/components/bottomSheetScrollable/types';
+import { UIModalProps } from '../../../atoms/Modal';
+import { SwipeUpProps } from '../../../atoms/SwipeUp';
+import { ScrollViewProps } from 'react-native';
+export type ComponentType = 'modal' | 'swipe';
+export type BaseModalProps = {
+    componentType: 'modal';
+} & UIModalProps & {
+    scrollProps?: ScrollViewProps;
+};
+export type BaseSwipeUpProps = {
+    componentType: 'swipe';
+} & SwipeUpProps & {
+    scrollProps?: BottomSheetScrollViewProps;
+};

package/dist/components/molecules/BaseDetail/types/index.js

@@ -0,0 +1 @@
+export {};

package/dist/components/organisms/ProductDetail/components/ProductInfo/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface ProductProps {
+    brand?: string;
+    productName?: string;
+    refId?: string;
+    image?: string;
+}
+declare const ProductInfo: ({ brand, productName, refId, image }: ProductProps) => React.JSX.Element;
+export default ProductInfo;

package/dist/components/organisms/ProductDetail/components/ProductInfo/index.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import Image from '../../../../atoms/Image';
+import Typography from '../../../../atoms/Typography';
+import { View, StyleSheet } from 'react-native';
+import { horizontalScale, moderateScale, verticalScale } from '../../../../../scale';
+import { palette } from '../../../../../theme/palette';
+const styles = StyleSheet.create({
+    Wrapper: {
+        flex: 1,
+        alignItems: 'center',
+        paddingBottom: verticalScale(12),
+        marginHorizontal: horizontalScale(24),
+    },
+    productImage: {
+        height: moderateScale(312),
+        width: moderateScale(312),
+        marginTop: verticalScale(16),
+    },
+    productInfo: {
+        height: 'auto',
+        width: moderateScale(312),
+        marginTop: verticalScale(24),
+    },
+    productName: {
+        marginTop: verticalScale(16),
+    },
+    referenceId: {
+        marginTop: verticalScale(16),
+    },
+});
+const ProductInfo = ({ brand, productName, refId, image }) => {
+    return (<View style={styles.Wrapper}>
+			{!!image && <Image source={{ uri: String(image) }} style={styles.productImage}/>}
+			<View style={styles.productInfo}>
+				{!!brand && (<Typography color={palette.primary.main} type="overline" size="large">
+						{String(brand)}
+					</Typography>)}
+				{!!productName && (<Typography color={palette.black.main} type="heading" size="medium" style={styles.productName}>
+						{String(productName)}
+					</Typography>)}
+				{!!refId && (<Typography color={palette.black.main} type="heading" size="small" style={styles.referenceId}>{`# ${String(refId)}`}</Typography>)}
+			</View>
+		</View>);
+};
+export default ProductInfo;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { BaseModalProps, BaseSwipeUpProps } from '../../molecules/BaseDetail/types';
+import { ProductProps } from './components/ProductInfo';
+import { ModalMethods } from '../../atoms/Modal';
+import { BottomSheetMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
+type ProductDetailProps = (ProductProps & BaseModalProps) | (ProductProps & BaseSwipeUpProps);
+type BaseDetailMethods = ModalMethods & BottomSheetMethods;
+declare const ProductDetail: React.ForwardRefExoticComponent<ProductDetailProps & React.RefAttributes<BaseDetailMethods>>;
+export default ProductDetail;

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

@@ -0,0 +1,10 @@
+import React, { forwardRef } from 'react';
+import BaseDetail from '../../molecules/BaseDetail';
+import ProductInfo from './components/ProductInfo';
+const ProductDetail = forwardRef((props, ref) => {
+    const { brand, productName, refId, image, ...rest } = props;
+    return (<BaseDetail ref={ref} {...rest}>
+			<ProductInfo image={image} refId={refId} productName={productName} brand={brand}/>
+		</BaseDetail>);
+});
+export default ProductDetail;

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';
@@ -25,10 +26,12 @@ import SwipeList from './components/molecules/SwipeList';
 import ItemSelectionButton from './components/molecules/ItemSelectionButton';
 import MainCardList from './components/molecules/MainCardList';
 import Input from './components/molecules/Input';
+import BaseDetail from './components/molecules/BaseDetail';
 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 ProductDetail from './components/organisms/ProductDetail';
 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, ErrorBoundary, };
+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, BaseDetail, ProductDetail, };

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';
@@ -27,12 +28,14 @@ import SwipeList from './components/molecules/SwipeList';
 import ItemSelectionButton from './components/molecules/ItemSelectionButton';
 import MainCardList from './components/molecules/MainCardList';
 import Input from './components/molecules/Input';
+import BaseDetail from './components/molecules/BaseDetail';
 // Organisms
 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 ProductDetail from './components/organisms/ProductDetail';
 // 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, ErrorBoundary, };
+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, BaseDetail, ProductDetail, };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@janiscommerce/ui-native",
-	"version": "1.17.0",
+	"version": "1.19.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",