@janiscommerce/ui-native 1.16.0 → 1.17.0

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

@@ -7,7 +7,6 @@ interface BaseInputPropsExtended extends BaseInputProps {
     variant?: InputVariant;
     onChangeText?: (text: string) => void;
     totalValue?: number;
-    placeholder?: string;
 }
 type AmountTotalProps = BaseInputPropsExtended & {
     variant: 'amountTotal';

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

@@ -1,11 +1,11 @@
 import React, { forwardRef, useState, useRef } from 'react';
-import { StyleSheet, View, TouchableWithoutFeedback, Keyboard, Platform, } from 'react-native';
+import { StyleSheet, View, TouchableWithoutFeedback, Keyboard } from 'react-native';
 import BaseInput from '../../atoms/BaseInput';
 import { palette } from '../../../theme/palette';
 import { moderateScale, scaledForDevice } from '../../../scale';
 import handleChangeText from './utils/handleChangeText';
 import Typography from '../../atoms/Typography';
-const isWeb = Platform.OS === 'web';
+import typography from '../../../theme/typography';
 var InputType;
 (function (InputType) {
     InputType["currency"] = "numeric";
@@ -18,9 +18,8 @@ var InputType;
     InputType["amountTotal"] = "numeric";
     InputType["numeric"] = "numeric";
 })(InputType || (InputType = {}));
-const Input = forwardRef(({ style, type, variant = 'default', totalValue, placeholder, onChangeText, ...props }, ref) => {
+const Input = forwardRef(({ style, type, variant = 'default', totalValue, onChangeText, ...props }, ref) => {
     const [value, setValue] = useState('');
-    const isPlaceholderBeingShown = !value;
     const isAmountTotalVariant = variant === 'amountTotal';
     const internalRef = useRef(null);
     const inputRef = ref ?? internalRef;
@@ -42,24 +41,24 @@ const Input = forwardRef(({ style, type, variant = 'default', totalValue, placeh
             width: '100%',
         },
         input: {
+            ...typography.display.medium,
             color: palette.black.main,
-            fontSize: scaledForDevice(42, moderateScale),
             height: '100%',
             textAlign: 'center',
             textAlignVertical: 'center',
             includeFontPadding: false,
             paddingVertical: 0,
-            ...(isPlaceholderBeingShown && { marginLeft: scaledForDevice(-12, moderateScale) }),
-            ...(isWeb && { flex: 1, maxWidth: isPlaceholderBeingShown ? '1%' : undefined }),
         },
         totalValue: {
             color: palette.primary.main,
         },
-        placeholder: {
-            color: '#A8AAAC',
-            marginLeft: scaledForDevice(-12, moderateScale),
-        },
     });
+    const getTextAlignment = () => {
+        if (value) {
+            return isAmountTotalVariant ? 'right' : 'center';
+        }
+        return 'left';
+    };
     const changeTextCb = (text) => {
         const transformedText = handleChangeText(text, variant);
         setValue(transformedText);
@@ -83,18 +82,9 @@ const Input = forwardRef(({ style, type, variant = 'default', totalValue, placeh
         }
         return InputType.default;
     })();
-    const renderPlaceholder = () => {
-        if (value.length > 0) {
-            return null;
-        }
-        return (<Typography type="display" style={styles.placeholder}>
-					{placeholder}
-				</Typography>);
-    };
     return (<TouchableWithoutFeedback onPress={handlePress}>
 				<View style={[styles.container, style]}>
-					<BaseInput testID="input" style={styles.input} ref={inputRef} value={value} keyboardType={resolvedKeyboardType} onChangeText={changeTextCb} {...props}/>
-					{renderPlaceholder()}
+					<BaseInput testID="input" style={styles.input} textAlign={getTextAlignment()} ref={inputRef} value={value} keyboardType={resolvedKeyboardType} onChangeText={changeTextCb} {...props}/>
 					{isAmountTotalVariant && (<Typography style={styles.totalValue} type="display">
 							{`/${totalValue?.toString()}`}
 						</Typography>)}

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.0",
+	"version": "1.17.0",
 	"description": "components library for Janis app",
 	"main": "dist/index.js",
 	"typings": "dist/index.d.ts",
@@ -25,7 +25,8 @@
 		"update-stories": "sb-rn-get-stories --config-path .ondevice",
 		"storybook-web": "node scripts/set-app-mode.js web && npm run storybook-web-build && start-storybook -p 6006 --config-dir ./.storybook",
 		"storybook-web-build": "node scripts/set-app-mode.js web && build-storybook --config-dir ./.storybook --output-dir ./.storybook_static",
-		"storybook-web-docs": "build-storybook --config-dir ./.storybook --output-dir ./docs"
+		"storybook-web-docs": "build-storybook --config-dir ./.storybook --output-dir ./docs",
+		"preversion": "npm run test:coverage"
 	},
 	"repository": {
 		"type": "git",