@janiscommerce/ui-native 1.24.0 → 1.25.0

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

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ErrorFallback: React.FC;
+export default ErrorFallback;

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import Typography from '../../../../atoms/Typography';
+import { StyleSheet, View } from 'react-native';
+import { palette } from '../../../../../theme/palette';
+import Icon from '../../../../atoms/Icon';
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    errorMessageText: {
+        marginLeft: 4,
+        color: palette.error.main,
+    },
+});
+const ErrorFallback = () => {
+    return (<View style={styles.container}>
+			<Icon name="exclamation_circle" color={palette.error.main} size={20}/>
+			<Typography type="body" size="medium" style={styles.errorMessageText}>
+				Something went wrong.
+			</Typography>
+		</View>);
+};
+export default ErrorFallback;

package/dist/components/{organisms → molecules}/ErrorBoundary/index.d.ts

@@ -1,8 +1,6 @@
 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;

package/dist/components/{organisms → molecules}/ErrorBoundary/index.js

@@ -29,7 +29,7 @@ class ErrorBoundary extends React.Component {
             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 <ErrorFallback />;
         }
         return this.props.children;
     }

package/dist/index.d.ts

@@ -30,7 +30,7 @@ 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 ErrorBoundary from './components/molecules/ErrorBoundary';
 import ProductDetail from './components/organisms/ProductDetail';
 import { palette } from './theme/palette';
 import * as getScale from './scale';

package/dist/index.js

@@ -33,7 +33,7 @@ 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 ErrorBoundary from './components/molecules/ErrorBoundary';
 import ProductDetail from './components/organisms/ProductDetail';
 // Misc
 import { palette } from './theme/palette';

package/package.json

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

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

@@ -1,9 +0,0 @@
-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

@@ -1,81 +0,0 @@
-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 && isDebug && <Typography color={palette.error.main}>{error}</Typography>}
-			{isDebug && (<Collapsible wrapperStyle={styles.collapsibleWrapper} header={ShowErrorDetailsButton} content={ErrorDetails} data={data} pressableComponent={TouchableOpacity}/>)}
-		</View>);
-};
-export default ErrorFallback;