@janiscommerce/ui-native 1.13.3 → 1.14.2

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+interface CollapsibleProps<HeaderProps = {}, ContentProps = {}> {
+    header: React.ComponentType<HeaderProps>;
+    content: React.ComponentType<ContentProps & {
+        index: number;
+    }>;
+    data?: Record<string, any>[];
+    pressableComponent?: React.ComponentType;
+    duration?: number;
+    onPressCallback?: null | (() => void);
+    wrapperStyle?: ViewStyle;
+}
+declare const Collapsible: React.FC<CollapsibleProps<{
+    isOpen: boolean;
+}, {
+    isOpen?: boolean;
+}>>;
+export default Collapsible;

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

@@ -0,0 +1,63 @@
+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 = useSharedValue(false);
+    const [measuredHeight, setMeasuredHeight] = useState(0);
+    const contentHeight = useSharedValue(0);
+    const hasHeightBeenMeasured = !!measuredHeight;
+    const handleOpen = () => {
+        // istanbul ignore next
+        if (!isOpen.value && measuredHeight > 0) {
+            contentHeight.value = measuredHeight;
+        }
+        isOpen.value = !isOpen.value;
+        if (onPressCallback) {
+            onPressCallback();
+        }
+    };
+    const handleContentLayout = (e) => {
+        // istanbul ignore next
+        if (measuredHeight === 0) {
+            const newHeight = e.nativeEvent.layout.height;
+            setMeasuredHeight(newHeight);
+            contentHeight.value = newHeight;
+        }
+    };
+    // istanbul ignore next
+    const bodyStyle = useAnimatedStyle(() => ({
+        maxHeight: withTiming(isOpen.value ? contentHeight.value : 0, { duration }),
+        overflow: 'hidden',
+    }));
+    const styles = StyleSheet.create({
+        wrapperView: {
+            flex: 1,
+            width: '100%',
+        },
+        animatedView: {
+            overflow: 'hidden',
+            width: '100%',
+        },
+        contentWrapper: {
+            position: 'absolute',
+            opacity: 0,
+        },
+    });
+    const renderContent = (contentData) => {
+        const { item, index } = contentData;
+        return <Content {...item} index={index} isOpen={isOpen}/>;
+    };
+    return (<View style={[wrapperStyle, styles.wrapperView]}>
+			<PressableComponent onPress={handleOpen}>
+				<Header isOpen={isOpen.value}/>
+			</PressableComponent>
+			{!hasHeightBeenMeasured && (<View style={styles.contentWrapper} onLayout={handleContentLayout}>
+					<List data={data} renderComponent={renderContent} keyExtractor={(_, index) => String(index)} showsVerticalScrollIndicator={false}/>
+				</View>)}
+			<Animated.View style={[styles.animatedView, bodyStyle]}>
+				<List data={data} renderComponent={renderContent} keyExtractor={(_, index) => String(index)} showsVerticalScrollIndicator={false}/>
+			</Animated.View>
+		</View>);
+};
+export default Collapsible;

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

@@ -7,6 +7,7 @@ interface TypographyProps extends TextProps {
     style?: StyleProp<TextStyle>;
     type?: TypographyType;
     size?: TypographySize;
+    color?: string;
 }
-declare const Typography: ({ children, style, type, size, ...props }: TypographyProps) => React.JSX.Element | null;
+declare const Typography: ({ children, style, type, size, color, ...props }: TypographyProps) => React.JSX.Element | null;
 export default Typography;

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

@@ -1,11 +1,11 @@
 import React from 'react';
 import { Text } from 'react-native';
 import getStyleByTypography from './utils/getStyleByTypography';
-const Typography = ({ children, style, type, size, ...props }) => {
+const Typography = ({ children, style, type, size, color, ...props }) => {
     if (!children) {
         return null;
     }
-    const typographyStyles = getStyleByTypography(type, size);
+    const typographyStyles = getStyleByTypography(type, size, color);
     return (<Text style={[style, typographyStyles.typography]} {...props}>
 			{children}
 		</Text>);

package/dist/components/atoms/Typography/utils/getStyleByTypography/index.d.ts

@@ -1,17 +1,8 @@
 import { TextStyle } from 'react-native';
-import { Typography } from '../../../../../theme/typography';
+import typography, { Typography } from '../../../../../theme/typography';
 type TypographyType = keyof Typography;
 type TypographySize = 'large' | 'medium' | 'small';
-export declare const defaultStyles: {
+declare const getStyleByTypography: (type?: TypographyType | string, size?: TypographySize | string, color?: string) => {
     typography: TextStyle;
 };
-declare const getStyleByTypography: (type: TypographyType | string, size: TypographySize | string) => {
-    typography: TextStyle;
-} | {
-    typography: {
-        fontWeight: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900";
-        fontSize: number;
-        lineHeight: number;
-    };
-};
 export default getStyleByTypography;

package/dist/components/atoms/Typography/utils/getStyleByTypography/index.js

@@ -1,54 +1,19 @@
 import { StyleSheet } from 'react-native';
 import typography from '../../../../../theme/typography';
-const validTypes = Object.keys(typography);
-const validSizes = ['large', 'medium', 'small'];
-export const defaultStyles = StyleSheet.create({
-    typography: {
-        fontWeight: typography.body.medium.weight,
-        fontSize: typography.body.medium.size,
-        lineHeight: typography.body.medium.lineHeight,
-    },
-});
-const getStyleByTypography = (type, size) => {
-    if (!validTypes.includes(type) ||
-        !validSizes.includes(size)) {
-        return defaultStyles;
-    }
-    const typographyType = type;
-    const typographySize = size;
-    if (typographyType === 'display') {
-        return StyleSheet.create({
-            typography: {
-                fontWeight: typography.display.weight,
-                fontSize: typography.display.size,
-                lineHeight: typography.display.lineHeight,
-            },
-        });
-    }
-    if (typographyType === 'overline' && typographySize === 'medium') {
-        return StyleSheet.create({
-            typography: {
-                fontWeight: typography.overline.large.weight,
-                fontSize: typography.overline.large.size,
-                lineHeight: typography.overline.large.lineHeight,
-                letterSpacing: typography.overline.large.spacing,
-            },
-        });
-    }
-    const typographyObject = typography[typographyType];
-    // istanbul ignore next
-    if (typographyObject && typographySize in typographyObject) {
-        const typographyStyle = typographyObject[typographySize];
-        return StyleSheet.create({
-            typography: {
-                fontWeight: typographyStyle.weight,
-                fontSize: typographyStyle.size,
-                lineHeight: typographyStyle.lineHeight,
-                letterSpacing: typographyStyle.spacing,
-            },
-        });
-    }
-    // istanbul ignore next
-    return defaultStyles;
+const getStyleByTypography = (type = 'body', size = 'medium', color) => {
+    const validType = Object.keys(typography).includes(type)
+        ? type
+        : 'body';
+    const typographyCategory = typography[validType];
+    const validSize = Object.keys(typographyCategory).includes(size)
+        ? size
+        : 'medium';
+    const typographyStyle = typographyCategory[validSize];
+    return StyleSheet.create({
+        typography: {
+            ...typographyStyle,
+            ...(color && { color }),
+        },
+    });
 };
 export default getStyleByTypography;

package/dist/components/molecules/Button/utils/getButtonStyles/utils/styleConfigs/index.js

@@ -53,31 +53,31 @@ export const colorConfig = (selectedColor) => {
         disabled: {
             background: {
                 contained: grey[200],
-                outlined: grey[100],
+                outlined: base.white,
                 text: 'transparent',
             },
             border: {
                 main: {
                     contained: 'transparent',
-                    outlined: 'transparent',
+                    outlined: grey[200],
                     text: 'transparent',
                 },
                 secondary: {
                     contained: 'transparent',
-                    outlined: grey[300],
+                    outlined: grey[200],
                     text: 'transparent',
                 },
             },
             text: {
                 main: {
-                    contained: grey[400],
-                    outlined: grey[300],
-                    text: grey[300],
+                    contained: base.white,
+                    outlined: grey[200],
+                    text: grey[200],
                 },
                 secondary: {
-                    contained: grey[400],
-                    outlined: grey[300],
-                    text: grey[300],
+                    contained: base.white,
+                    outlined: grey[200],
+                    text: grey[200],
                 },
             },
         },

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

@@ -7,6 +7,7 @@ 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,10 +1,11 @@
 import React, { forwardRef, useState, useRef } from 'react';
-import { StyleSheet, View, TouchableWithoutFeedback, Keyboard } from 'react-native';
+import { StyleSheet, View, TouchableWithoutFeedback, Keyboard, Platform, } 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';
 var InputType;
 (function (InputType) {
     InputType["currency"] = "numeric";
@@ -17,8 +18,9 @@ var InputType;
     InputType["amountTotal"] = "numeric";
     InputType["numeric"] = "numeric";
 })(InputType || (InputType = {}));
-const Input = forwardRef(({ style, type, variant = 'default', totalValue, onChangeText, ...props }, ref) => {
+const Input = forwardRef(({ style, type, variant = 'default', totalValue, placeholder, onChangeText, ...props }, ref) => {
     const [value, setValue] = useState('');
+    const isPlaceholderBeingShown = !value;
     const isAmountTotalVariant = variant === 'amountTotal';
     const internalRef = useRef(null);
     const inputRef = ref ?? internalRef;
@@ -36,14 +38,26 @@ const Input = forwardRef(({ style, type, variant = 'default', totalValue, onChan
             justifyContent: 'center',
             alignItems: 'center',
             flexDirection: 'row',
+            position: 'relative',
         },
         input: {
             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 changeTextCb = (text) => {
         const transformedText = handleChangeText(text, variant);
@@ -68,10 +82,19 @@ const Input = forwardRef(({ style, type, variant = 'default', totalValue, onChan
         }
         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}>
-					<BaseInput style={[styles.input, style]} ref={inputRef} value={value} keyboardType={resolvedKeyboardType} onChangeText={changeTextCb} {...props}/>
-					{isAmountTotalVariant && (<Typography style={styles.totalValue} type="display" size="medium">
+					<BaseInput testID="input" style={[styles.input, style].filter(Boolean)} ref={inputRef} value={value} keyboardType={resolvedKeyboardType} onChangeText={changeTextCb} {...props}/>
+					{renderPlaceholder()}
+					{isAmountTotalVariant && (<Typography style={styles.totalValue} type="display">
 							{`/${totalValue?.toString()}`}
 						</Typography>)}
 				</View>

package/dist/index.d.ts

@@ -12,6 +12,7 @@ import { SwipeUpFlatList, SwipeUpScrollView, SwipeUpView } from './components/at
 import Text from './components/atoms/Text';
 import BaseInput from './components/atoms/BaseInput';
 import Typography from './components/atoms/Typography';
+import Collapsible from './components/atoms/Collapsible';
 import Avatar from './components/molecules/Avatar';
 import Button from './components/molecules/Button';
 import Carousel from './components/molecules/Carousel';
@@ -29,4 +30,4 @@ import FullScreenMessage from './components/organisms/FullScreenMessage';
 import SwipeItemSelectionList from './components/organisms/SwipeItemSelectionList';
 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, };
+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, };

package/dist/index.js

@@ -13,6 +13,7 @@ import { SwipeUpFlatList, SwipeUpScrollView, SwipeUpView } from './components/at
 import Text from './components/atoms/Text';
 import BaseInput from './components/atoms/BaseInput';
 import Typography from './components/atoms/Typography';
+import Collapsible from './components/atoms/Collapsible';
 // Molecules
 import Avatar from './components/molecules/Avatar';
 import Button from './components/molecules/Button';
@@ -33,4 +34,4 @@ import SwipeItemSelectionList from './components/organisms/SwipeItemSelectionLis
 // 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, };
+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, };

package/dist/theme/typography.d.ts

@@ -1,11 +1,13 @@
 export type TypographyItem = {
-    weight: '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
-    size: number;
+    fontWeight: '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
+    fontSize: number;
     lineHeight: number;
-    spacing?: number;
+    letterSpacing?: number;
 };
 export type Typography = {
-    display: TypographyItem;
+    display: {
+        medium: TypographyItem;
+    };
     heading: {
         large: TypographyItem;
         medium: TypographyItem;

package/dist/theme/typography.js

@@ -1,29 +1,94 @@
 import { moderateScale, scaledForDevice } from '../scale';
+const scaleSize = (size) => scaledForDevice(size, moderateScale);
 const typography = {
-    display: { weight: '400', size: scaledForDevice(42, moderateScale), lineHeight: 50 },
+    display: {
+        medium: {
+            fontSize: scaleSize(42),
+            fontWeight: '400',
+            lineHeight: 50,
+        },
+    },
     heading: {
-        large: { weight: '500', size: scaledForDevice(34, moderateScale), lineHeight: 40 },
-        medium: { weight: '500', size: scaledForDevice(26, moderateScale), lineHeight: 32 },
-        small: { weight: '400', size: scaledForDevice(24, moderateScale), lineHeight: 28 },
+        large: {
+            fontSize: scaleSize(34),
+            fontWeight: '500',
+            lineHeight: 40,
+        },
+        medium: {
+            fontSize: scaleSize(26),
+            fontWeight: '500',
+            lineHeight: 32,
+        },
+        small: {
+            fontSize: scaleSize(24),
+            fontWeight: '400',
+            lineHeight: 28,
+        },
     },
     title: {
-        large: { weight: '400', size: scaledForDevice(20, moderateScale), lineHeight: 24 },
-        medium: { weight: '700', size: scaledForDevice(18, moderateScale), lineHeight: 22 },
-        small: { weight: '700', size: scaledForDevice(14, moderateScale), lineHeight: 16 },
+        large: {
+            fontSize: scaleSize(20),
+            fontWeight: '400',
+            lineHeight: 24,
+        },
+        medium: {
+            fontSize: scaleSize(18),
+            fontWeight: '700',
+            lineHeight: 22,
+        },
+        small: {
+            fontSize: scaleSize(14),
+            fontWeight: '700',
+            lineHeight: 16,
+        },
     },
     label: {
-        large: { weight: '500', size: scaledForDevice(16, moderateScale), lineHeight: 18 },
-        medium: { weight: '500', size: scaledForDevice(14, moderateScale), lineHeight: 16 },
-        small: { weight: '500', size: scaledForDevice(12, moderateScale), lineHeight: 14 },
+        large: {
+            fontSize: scaleSize(16),
+            fontWeight: '500',
+            lineHeight: 18,
+        },
+        medium: {
+            fontSize: scaleSize(14),
+            fontWeight: '500',
+            lineHeight: 16,
+        },
+        small: {
+            fontSize: scaleSize(12),
+            fontWeight: '500',
+            lineHeight: 14,
+        },
     },
     body: {
-        large: { weight: '400', size: scaledForDevice(16, moderateScale), lineHeight: 20 },
-        medium: { weight: '400', size: scaledForDevice(14, moderateScale), lineHeight: 18 },
-        small: { weight: '400', size: scaledForDevice(12, moderateScale), lineHeight: 16 },
+        large: {
+            fontSize: scaleSize(16),
+            fontWeight: '400',
+            lineHeight: 20,
+        },
+        medium: {
+            fontSize: scaleSize(14),
+            fontWeight: '400',
+            lineHeight: 18,
+        },
+        small: {
+            fontSize: scaleSize(12),
+            fontWeight: '400',
+            lineHeight: 16,
+        },
     },
     overline: {
-        large: { weight: '500', size: scaledForDevice(14, moderateScale), lineHeight: 16, spacing: 1 },
-        small: { weight: '500', size: scaledForDevice(12, moderateScale), lineHeight: 14, spacing: 0.7 },
+        large: {
+            fontSize: scaleSize(14),
+            fontWeight: '500',
+            lineHeight: 16,
+            letterSpacing: 1,
+        },
+        small: {
+            fontSize: scaleSize(12),
+            fontWeight: '500',
+            lineHeight: 14,
+            letterSpacing: 0.7,
+        },
     },
 };
 export default typography;

package/dist/utils/index.d.ts

@@ -1,2 +1,3 @@
 export declare const isObject: (obj: Object) => boolean;
 export declare const isDevEnv: () => boolean;
+export declare const isArray: (arr: any[]) => boolean;

package/dist/utils/index.js

@@ -4,3 +4,4 @@ export const isDevEnv = () => {
     const { NODE_ENV } = env;
     return NODE_ENV !== 'production';
 };
+export const isArray = (arr) => !!(arr instanceof Array);

package/package.json

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