@janiscommerce/ui-native 1.23.0 → 1.25.0

package/dist/components/atoms/Collapsible/index.d.ts

@@ -1,5 +1,12 @@
 import React from 'react';
 import { ViewStyle } from 'react-native';
+interface CollapsibleHeaderProps {
+    isOpen: boolean;
+}
+interface CollapsibleContentProps {
+    index: number;
+    isOpen?: boolean;
+}
 interface CollapsibleProps<HeaderProps = {}, ContentProps = {}> {
     header: React.ComponentType<HeaderProps>;
     content: React.ComponentType<ContentProps & {
@@ -10,10 +17,8 @@ interface CollapsibleProps<HeaderProps = {}, ContentProps = {}> {
     duration?: number;
     onPressCallback?: null | (() => void);
     wrapperStyle?: ViewStyle;
+    isDefaultOpen?: boolean;
 }
-declare const Collapsible: React.FC<CollapsibleProps<{
-    isOpen: boolean;
-}, {
-    isOpen?: boolean;
-}>>;
+declare const Collapsible: React.FC<CollapsibleProps<CollapsibleHeaderProps, CollapsibleContentProps>>;
 export default Collapsible;
+export type { CollapsibleHeaderProps, CollapsibleContentProps };

package/dist/components/atoms/Collapsible/index.js

@@ -2,8 +2,8 @@ import List from '../List';
 import React, { useState } from 'react';
 import { StyleSheet, View, Pressable } from 'react-native';
 import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
-const Collapsible = ({ header: Header, content: Content, data = [], onPressCallback = null, pressableComponent: PressableComponent = Pressable, duration = 500, wrapperStyle = {}, }) => {
-    const [isOpen, setIsOpen] = useState(false);
+const Collapsible = ({ header: Header, content: Content, data = [], onPressCallback = null, pressableComponent: PressableComponent = Pressable, duration = 500, wrapperStyle = {}, isDefaultOpen = false, }) => {
+    const [isOpen, setIsOpen] = useState(isDefaultOpen);
     const [measuredHeight, setMeasuredHeight] = useState(0);
     const contentHeight = useSharedValue(0);
     const hasHeightBeenMeasured = !!measuredHeight;
@@ -41,8 +41,7 @@ const Collapsible = ({ header: Header, content: Content, data = [], onPressCallb
             opacity: 0,
         },
     });
-    const renderContent = (contentData) => {
-        const { item, index } = contentData;
+    const renderContent = ({ item, index }) => {
         return <Content {...item} index={index} isOpen={isOpen}/>;
     };
     return (<View style={[wrapperStyle, styles.wrapperView]}>
@@ -50,10 +49,10 @@ const Collapsible = ({ header: Header, content: Content, data = [], onPressCallb
 				<Header isOpen={isOpen}/>
 			</PressableComponent>
 			{!hasHeightBeenMeasured && (<View style={styles.contentWrapper} onLayout={handleContentLayout}>
-					<List data={data} renderComponent={renderContent} keyExtractor={(_, index) => String(index)} showsVerticalScrollIndicator={false}/>
+					<List data={data} renderComponent={renderContent} keyExtractor={(_, index) => String(index)} showsVerticalScrollIndicator={false} nestedScrollEnabled={true}/>
 				</View>)}
 			<Animated.View style={[styles.animatedView, bodyStyle]}>
-				<List data={data} renderComponent={renderContent} keyExtractor={(_, index) => String(index)} showsVerticalScrollIndicator={false}/>
+				<List data={data} renderComponent={renderContent} keyExtractor={(_, index) => String(index)} showsVerticalScrollIndicator={false} nestedScrollEnabled={true}/>
 			</Animated.View>
 		</View>);
 };

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.23.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;