@janiscommerce/ui-native 1.24.0 → 1.25.1

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/components/molecules/Toast/index.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import React, { FC } from 'react';
 import { TextStyle } from 'react-native';
 import { BaseToastProps } from '../../atoms/BaseToast';
 export interface ToastProps extends BaseToastProps {
@@ -13,4 +13,11 @@ export interface ToastProps extends BaseToastProps {
     };
 }
 declare const Toast: FC<ToastProps>;
+export declare const configToast: {
+    success: (props: ToastProps) => React.JSX.Element;
+    notice: (props: ToastProps) => React.JSX.Element;
+    warning: (props: ToastProps) => React.JSX.Element;
+    error: (props: ToastProps) => React.JSX.Element;
+    action: (props: ToastProps) => React.JSX.Element;
+};
 export default Toast;

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

@@ -92,4 +92,11 @@ const Toast = ({ type, text1, text2, style, props }) => {
 			</View>
 		</BaseToast>);
 };
+export const configToast = {
+    success: (props) => <Toast {...props}/>,
+    notice: (props) => <Toast {...props}/>,
+    warning: (props) => <Toast {...props}/>,
+    error: (props) => <Toast {...props}/>,
+    action: (props) => <Toast {...props}/>,
+};
 export default Toast;

package/dist/components/molecules/Toast/utils/index.d.ts

@@ -1,12 +1,3 @@
-import React from 'react';
-import { ToastProps } from '../';
-export declare const configToast: {
-    success: (props: ToastProps) => React.JSX.Element;
-    notice: (props: ToastProps) => React.JSX.Element;
-    warning: (props: ToastProps) => React.JSX.Element;
-    error: (props: ToastProps) => React.JSX.Element;
-    action: (props: ToastProps) => React.JSX.Element;
-};
 export declare const defaultIcon: {
     success: string;
     notice: string;

package/dist/components/molecules/Toast/utils/index.js

@@ -1,12 +1,3 @@
-import React from 'react';
-import Toast from '../';
-export const configToast = {
-    success: (props) => <Toast {...props}/>,
-    notice: (props) => <Toast {...props}/>,
-    warning: (props) => <Toast {...props}/>,
-    error: (props) => <Toast {...props}/>,
-    action: (props) => <Toast {...props}/>,
-};
 export const defaultIcon = {
     success: 'check_circle_bold',
     notice: 'info_circle_bold',

package/dist/index.d.ts

@@ -21,7 +21,7 @@ import LayoutWithBottomButtons from './components/molecules/LayoutWithBottomButt
 import ProgressBar from './components/molecules/ProgressBar';
 import Select from './components/molecules/Select';
 import Toast from 'react-native-toast-message';
-import { configToast } from './components/molecules/Toast/utils';
+import { configToast } from './components/molecules/Toast';
 import SwipeList from './components/molecules/SwipeList';
 import ItemSelectionButton from './components/molecules/ItemSelectionButton';
 import MainCardList from './components/molecules/MainCardList';
@@ -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

@@ -23,7 +23,7 @@ import LayoutWithBottomButtons from './components/molecules/LayoutWithBottomButt
 import ProgressBar from './components/molecules/ProgressBar';
 import Select from './components/molecules/Select';
 import Toast from 'react-native-toast-message';
-import { configToast } from './components/molecules/Toast/utils';
+import { configToast } from './components/molecules/Toast';
 import SwipeList from './components/molecules/SwipeList';
 import ItemSelectionButton from './components/molecules/ItemSelectionButton';
 import MainCardList from './components/molecules/MainCardList';
@@ -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.1",
 	"description": "components library for Janis app",
 	"main": "dist/index.js",
 	"typings": "dist/index.d.ts",
@@ -44,8 +44,8 @@
 	},
 	"homepage": "https://github.com/janis-commerce/ui-native#readme",
 	"peerDependencies": {
-		"react": ">=17.0.2",
-		"react-native": ">=0.67.5",
+		"react": ">=17.0.2 <19.0.0",
+		"react-native": ">=0.67.5 <0.75.0",
 		"react-native-gesture-handler": ">=2.9.0",
 		"react-native-fast-image": "^8.5.11",
 		"react-native-reanimated": "2.17.0",
@@ -63,6 +63,7 @@
 		"@storybook/addon-ondevice-controls": "^6.5.4",
 		"@storybook/addon-react-native-web": "0.0.20",
 		"@storybook/builder-webpack5": "^6.5.4",
+		"@storybook/cli": "^6.5.4",
 		"@storybook/manager-webpack5": "^6.5.4",
 		"@storybook/react": "^6.5.4",
 		"@storybook/react-native": "^6.5.4",
@@ -99,6 +100,7 @@
 		"react-native": "0.67.5",
 		"react-native-fast-image": "^8.5.11",
 		"react-native-svg-transformer": "^1.0.0",
+		"react-native-web": "^0.15.0",
 		"react-test-renderer": "17.0.2",
 		"setup-env": "^2.0.0",
 		"storybook": "^6.5.4",
@@ -126,14 +128,12 @@
 		"@react-native-async-storage/async-storage": "^1.19.0",
 		"@react-native-community/datetimepicker": "^7.4.0",
 		"@react-native-community/slider": "^4.4.2",
-		"@storybook/cli": "^6.5.4",
 		"babel-plugin-module-resolver": "^5.0.2",
 		"react-native-gesture-handler": ">=2.9.0",
 		"react-native-reanimated": "2.17.0",
 		"react-native-safe-area-context": "^4.6.4",
 		"react-native-svg": "12.1.1",
 		"react-native-toast-message": ">=1.6.0",
-		"react-native-vector-icons": "^9.2.0",
-		"react-native-web": "^0.15.0"
+		"react-native-vector-icons": "^9.2.0"
 	}
 }

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;