@janiscommerce/ui-native 1.16.2 → 1.17.0

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

@@ -28,6 +28,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, };

package/dist/index.js

@@ -31,7 +31,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, };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@janiscommerce/ui-native",
-	"version": "1.16.2",
+	"version": "1.17.0",
 	"description": "components library for Janis app",
 	"main": "dist/index.js",
 	"typings": "dist/index.d.ts",