@janiscommerce/ui-native 1.1.1 → 1.3.0

package/dist/env.json

@@ -0,0 +1 @@
+{ "LOAD_STORYBOOK": true, "WEB_MODE": false }

package/dist/{components → src/components}/Avatar/index.js

@@ -3,6 +3,7 @@ import { StyleSheet, View } from 'react-native';
 import Image from '../Image';
 import Text from '../Text';
 import { formatPlaceholder } from './utils/formatPlaceholder/index';
+import { horizontalScale, moderateScale, scaledForDevice } from '../../scale';
 export const sizeValues = {
     sm: 24,
     md: 36,
@@ -25,6 +26,13 @@ const Avatar = ({ size = 'sm', textColor = '#FFFFFF', bgColor = '#E8EAF6', image
         return null;
     }
     const initials = formatPlaceholder(String(placeholder));
+    const calculateBorderRadius = getSize(size, customSize) / 2;
+    const calculateSize = getSize(size, customSize);
+    const calculateFontSize = getSize(size, customSize) * 0.4;
+    const validBorderRadius = scaledForDevice(calculateBorderRadius, moderateScale);
+    const validWidth = scaledForDevice(calculateSize, horizontalScale);
+    const validHeight = scaledForDevice(calculateSize, moderateScale);
+    const validFontSize = scaledForDevice(calculateFontSize, moderateScale);
     const handleOnErrorImage = () => {
         setShowInitials(true);
         if (onErrorImg) {
@@ -35,22 +43,20 @@ const Avatar = ({ size = 'sm', textColor = '#FFFFFF', bgColor = '#E8EAF6', image
             styles.container,
             {
                 backgroundColor: bgColor,
-                borderRadius: getSize(size, customSize) / 2,
-                height: getSize(size, customSize),
-                width: getSize(size, customSize),
+                borderRadius: validBorderRadius,
+                height: validHeight,
+                width: validWidth,
             },
             style,
         ]} {...props}>
 			{!!imageUrl && !showInitials && (<Image accessibilityRole="image" onError={handleOnErrorImage} onLoad={() => setShowInitials(false)} source={{
                 uri: imageUrl,
             }} style={{
-                height: getSize(size, customSize),
-                width: getSize(size, customSize),
+                height: validHeight,
+                width: validWidth,
             }}/>)}
 
-			{(showInitials || !imageUrl) && !!initials.length && (<Text style={[styles.text, { color: textColor, fontSize: getSize(size, customSize) * 0.4 }]}>
-					{initials}
-				</Text>)}
+			{(showInitials || !imageUrl) && !!initials.length && (<Text style={[styles.text, { color: textColor, fontSize: validFontSize }]}>{initials}</Text>)}
 		</View>);
 };
 export default Avatar;

package/dist/src/components/BaseButton/index.d.ts

@@ -0,0 +1,16 @@
+import React, { FC } from 'react';
+import { PressableProps, ViewStyle } from 'react-native';
+interface BaseButtonProps extends PressableProps {
+    title?: string | null;
+    icon?: string;
+    iconRight?: boolean;
+    disabled?: boolean;
+    borderRadius?: number;
+    pressedColor?: string;
+    style?: ViewStyle;
+    iconStyle?: ViewStyle;
+    textStyle?: ViewStyle;
+    children?: React.ReactNode;
+}
+declare const BaseButton: FC<BaseButtonProps>;
+export default BaseButton;

package/dist/src/components/BaseButton/index.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Pressable, StyleSheet } from 'react-native';
+import { moderateScale, horizontalScale, scaledForDevice } from '../../scale';
+import { palette } from '../../theme/palette';
+import Text from '../Text';
+import Icon from '../Icon';
+const BaseButton = ({ title = null, icon = null, iconRight = false, disabled = false, borderRadius = 0, pressedColor, style, iconStyle, textStyle, children = null, ...props }) => {
+    if (!title && !icon && !children) {
+        return null;
+    }
+    const bgColor = !disabled ? palette.primary.main : palette.grey[200];
+    const iconPaddingLeft = iconRight && title ? 8 : 0;
+    const iconPaddingRight = !iconRight && title ? 8 : 0;
+    const validatePaddingVertical = scaledForDevice(10, moderateScale);
+    const validatePaddingHorizontal = scaledForDevice(16, horizontalScale);
+    const validateFontSize = scaledForDevice(14, moderateScale);
+    const validateBorderRadius = scaledForDevice(borderRadius, moderateScale);
+    const validatePaddingRightIcon = scaledForDevice(iconPaddingRight, horizontalScale);
+    const validatePaddingLeftIcon = scaledForDevice(iconPaddingLeft, horizontalScale);
+    const styles = StyleSheet.create({
+        container: {
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+            paddingHorizontal: validatePaddingHorizontal,
+            paddingVertical: validatePaddingVertical,
+            borderRadius: validateBorderRadius,
+            backgroundColor: bgColor,
+        },
+        icon: {
+            color: palette.base.white,
+            paddingRight: validatePaddingRightIcon,
+            paddingLeft: validatePaddingLeftIcon,
+        },
+        title: {
+            fontSize: validateFontSize,
+            fontWeight: '500',
+            textAlign: 'center',
+            color: palette.base.white,
+        },
+    });
+    const noChildren = () => (<>
+			{icon && !iconRight && <Icon name={icon} style={[styles.icon, iconStyle]} size={24}/>}
+			{title && <Text style={[styles.title, textStyle]}>{title}</Text>}
+			{icon && iconRight && <Icon name={icon} style={[styles.icon, iconStyle]} size={24}/>}
+		</>);
+    /* istanbul ignore next */
+    const PressableStyle = ({ pressed }) => {
+        const backgroundColor = pressedColor ?? palette.primary.dark;
+        const pressedBgColor = pressed ? [{ backgroundColor }] : [];
+        return [styles.container, style, ...pressedBgColor];
+    };
+    return (<Pressable style={PressableStyle} disabled={disabled} {...props}>
+			{children ?? noChildren}
+		</Pressable>);
+};
+export default BaseButton;

package/dist/{components → src/components}/CheckBox/index.js

@@ -1,36 +1,43 @@
 import React from 'react';
 import { View, TouchableOpacity, StyleSheet } from 'react-native';
 import { base, grey, primary } from '../../theme/palette';
+import { moderateScale, horizontalScale, scaledForDevice } from '../../scale';
 import Icon from './icon/CheckedIcon';
 const getCheckBoxScale = (size, divisor) => size / divisor;
 const CheckBox = ({ checked, customSize = 16, checkOnColor = primary.main, checkOffColor = grey[500], iconCheckColor = base.white, borderRadius, disabled = false, style, ...props }) => {
     const hasBorderRadius = !borderRadius ? getCheckBoxScale(customSize, 4) : borderRadius;
+    const validateIconSize = scaledForDevice(customSize, moderateScale);
+    const validWidth = scaledForDevice(customSize, horizontalScale);
+    const validHeight = scaledForDevice(customSize, moderateScale);
+    const validBorderRadius = scaledForDevice(hasBorderRadius, moderateScale);
     const styles = StyleSheet.create({
         touchableOpacity: {
-            width: customSize,
-            height: customSize,
-            borderRadius: hasBorderRadius,
+            width: validWidth,
+            height: validHeight,
+            borderRadius: validBorderRadius,
         },
         checkOn: {
             display: 'flex',
             justifyContent: 'center',
             alignItems: 'center',
             backgroundColor: !disabled ? checkOnColor : grey[200],
-            width: customSize,
-            height: customSize,
-            borderRadius: hasBorderRadius,
+            width: validWidth,
+            height: validHeight,
+            borderRadius: validBorderRadius,
         },
         checkOff: {
             borderWidth: getCheckBoxScale(customSize, 16),
             borderColor: !disabled ? checkOffColor : grey[200],
-            width: customSize,
-            height: customSize,
+            width: validWidth,
+            height: validHeight,
             borderRadius: hasBorderRadius,
         },
     });
     const isChecked = checked ? styles.checkOn : styles.checkOff;
     return (<TouchableOpacity disabled={disabled} activeOpacity={0.6} style={[styles.touchableOpacity, style]} {...props}>
-			<View style={isChecked}>{checked && <Icon color={iconCheckColor} size={customSize}/>}</View>
+			<View style={isChecked}>
+				{checked && <Icon color={iconCheckColor} size={validateIconSize}/>}
+			</View>
 		</TouchableOpacity>);
 };
 export default CheckBox;

package/dist/{components → src/components}/Icon/index.d.ts

@@ -3,6 +3,7 @@ interface Props {
     name: string;
     color?: string;
     size?: number;
+    style?: any;
 }
 declare const Icon: FC<Props>;
 export default Icon;

package/dist/{components → src/components}/Icon/index.js

@@ -2,11 +2,13 @@ import React from 'react';
 import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
 import icoMoonConfig from './assets/fonts/selection.json';
 import { primary } from '../../theme/palette';
+import { moderateScale, scaledForDevice } from '../../scale';
 const IconComponent = createIconSetFromIcoMoon(icoMoonConfig, 'janis-font-icon', 'janis-font-icon.ttf');
 const Icon = ({ name, color = primary.main, size = 16, ...props }) => {
     if (!name) {
         return null;
     }
-    return <IconComponent name={name} color={color} size={size} {...props}/>;
+    const validateSize = scaledForDevice(size, moderateScale);
+    return <IconComponent name={name} color={color} size={validateSize} {...props}/>;
 };
 export default Icon;

package/dist/{components → src/components}/Input/index.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { TextInput, StyleSheet, View, Text, } from 'react-native';
 import { getBorderColor, getInputInitialState, getLabelColor, getStatusMessageColor, raiseLabel, showStatusMessage, } from './utils';
-// eslint-disable-next-line no-shadow
+import { moderateScale, horizontalScale, scaledForDevice } from '../../scale';
 export var keyboardTypes;
 (function (keyboardTypes) {
     keyboardTypes["default"] = "default";
@@ -45,34 +45,40 @@ const Input = React.forwardRef(({ disabled = false, readOnly = false, label, pla
         status,
     });
     const validStatusMessageColor = getStatusMessageColor(status);
+    const validBottom = scaledForDevice(25, moderateScale);
+    const validHeight = scaledForDevice(50, moderateScale);
+    const validBorderBottomWidth = scaledForDevice(1, horizontalScale);
+    const validLineHeight = scaledForDevice(19, moderateScale);
+    const validFontSize = scaledForDevice(16, moderateScale);
+    const validateMarginTop = scaledForDevice(5, moderateScale);
     const styles = StyleSheet.create({
         container: {
             width: '100%',
         },
         inputWrapper: {
-            height: 50,
+            height: validHeight,
             borderBottomColor: validBorderColor,
-            borderBottomWidth: 1,
+            borderBottomWidth: validBorderBottomWidth,
             justifyContent: 'flex-end',
         },
         label: {
             color: validLabelColor,
-            fontSize: 16,
+            fontSize: validFontSize,
             letterSpacing: 0,
-            lineHeight: 19,
+            lineHeight: validLineHeight,
             position: 'absolute',
-            bottom: raiseLabel({ disabled, hasMessage, inputState }) ? 25 : 0,
+            bottom: raiseLabel({ disabled, hasMessage, inputState }) ? validBottom : 0,
         },
         input: {
             color: valueColor,
-            fontSize: 16,
+            fontSize: validFontSize,
             letterSpacing: 0,
-            lineHeight: 19,
+            lineHeight: validLineHeight,
             padding: 0,
         },
         statusMessage: {
             color: validStatusMessageColor,
-            marginTop: 5,
+            marginTop: validateMarginTop,
         },
     });
     return (<View style={styles.container}>

package/dist/src/components/List/index.d.ts

@@ -0,0 +1,20 @@
+import React, { FC } from 'react';
+import { FlatListProps, ScrollViewProps } from 'react-native';
+type TypeData = string | number | object | [] | React.ReactElement;
+type RCProps = {
+    item: TypeData;
+    index: number;
+};
+type TypeRenderComponent = ({ item, index }: RCProps) => React.ReactElement;
+export declare enum TypeList {
+    FlatList = "flatList",
+    ScrollView = "scrollView"
+}
+interface ListProps {
+    data: TypeData[] | undefined;
+    renderComponent: TypeRenderComponent;
+    type?: TypeList;
+}
+type MergedProps = ListProps & (FlatListProps<TypeData> | ScrollViewProps);
+declare const List: FC<MergedProps>;
+export default List;

package/dist/src/components/List/index.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { FlatList, ScrollView } from 'react-native';
+export var TypeList;
+(function (TypeList) {
+    TypeList["FlatList"] = "flatList";
+    TypeList["ScrollView"] = "scrollView";
+})(TypeList || (TypeList = {}));
+const List = ({ data, renderComponent, type = TypeList.FlatList, ...props }) => {
+    if (!data?.length) {
+        return null;
+    }
+    const FlatListComponent = () => <FlatList data={data} renderItem={renderComponent} {...props}/>;
+    const ScrollViewComponent = () => (<ScrollView {...props}>{data.map((item, index) => renderComponent({ item, index }))}</ScrollView>);
+    return type === TypeList.FlatList ? <FlatListComponent /> : <ScrollViewComponent />;
+};
+export default List;

package/dist/{components → src/components}/Loading/index.js

@@ -2,6 +2,7 @@ import React, { useEffect, useRef } from 'react';
 import { StyleSheet, View, Animated, Easing } from 'react-native';
 import LoadingSvg from './LoadingSvg';
 import { primary } from '../../theme/palette';
+import { horizontalScale, moderateScale, scaledForDevice } from '../../scale';
 const startRotationAnimation = ({ duration, rotationDegree, timingAnimation }) => Animated.loop(Animated.timing(rotationDegree, {
     duration,
     toValue: 360,
@@ -10,13 +11,16 @@ const startRotationAnimation = ({ duration, rotationDegree, timingAnimation }) =
 })).start();
 const Loading = ({ isLoading, color = primary.main, size = 64, duration = 1000, children = null, style, ...props }) => {
     const rotationDegree = useRef(new Animated.Value(0)).current;
+    const validWidth = scaledForDevice(size, horizontalScale);
+    const validHeight = scaledForDevice(size, moderateScale);
+    const validSize = scaledForDevice(size, moderateScale);
     const styles = StyleSheet.create({
         container: {
             position: 'relative',
             justifyContent: 'center',
             alignItems: 'center',
-            width: size,
-            height: size,
+            width: validWidth,
+            height: validHeight,
         },
         spinner: {
             position: 'absolute',
@@ -49,7 +53,7 @@ const Loading = ({ isLoading, color = primary.main, size = 64, duration = 1000,
         return <></>;
     }
     return (<View style={[styles.container, style]} {...props}>
-			<LoadingSvg style={[styles.spinner, { ...animationSpinnerStyle }]} size={size} color={color}/>
+			<LoadingSvg style={[styles.spinner, { ...animationSpinnerStyle }]} size={validSize} color={color}/>
 			{children}
 		</View>);
 };

package/dist/{components → src/components}/LoadingFullScreen/index.js

@@ -3,6 +3,12 @@ import { StyleSheet, Modal, Text, View } from 'react-native';
 import Loading from '../Loading';
 import Svg from '../Svg';
 import { grey, white } from '../../theme/palette';
+import { moderateScale, horizontalScale, scaledForDevice } from '../../scale';
+const validFontSize = scaledForDevice(16, moderateScale);
+const validLineHeight = scaledForDevice(24, moderateScale);
+const validMarginTop = scaledForDevice(25, moderateScale);
+const validWidth = scaledForDevice(36, horizontalScale);
+const validHeight = scaledForDevice(25, moderateScale);
 const styles = StyleSheet.create({
     ContainerStyles: {
         flex: 1,
@@ -11,14 +17,14 @@ const styles = StyleSheet.create({
         backgroundColor: white.semiTransparent,
     },
     TextStyles: {
-        fontSize: 16,
-        lineHeight: 24,
+        fontSize: validFontSize,
+        lineHeight: validLineHeight,
         fontFamily: 'Roboto',
         color: grey[700],
         textAlign: 'center',
         fontWeight: '500',
         width: '50%',
-        marginTop: 25,
+        marginTop: validMarginTop,
     },
 });
 const LoadingFullScreen = ({ text, isLoading, svgName = 'janis-logo', spinnerDuration = 2000, style, ...props }) => {
@@ -26,7 +32,7 @@ const LoadingFullScreen = ({ text, isLoading, svgName = 'janis-logo', spinnerDur
     return (<Modal visible={isLoading} transparent animationType="fade" testID="loading modal" {...props}>
 			<View style={[styles.ContainerStyles, style]}>
 				<Loading isLoading={isLoading} duration={spinnerDuration}>
-					<Svg name={svgName} width={36} height={25}/>
+					<Svg name={svgName} width={validWidth} height={validHeight}/>
 				</Loading>
 				{hasTextPassed && <Text style={styles.TextStyles}>{text}</Text>}
 			</View>

package/dist/src/components/ProgressBar/index.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { ViewStyle } from 'react-native';
+interface ProgressBarProps {
+    value: number;
+    totalValue: number;
+    isAnimated?: boolean;
+    duration?: number;
+    style?: ViewStyle;
+}
+declare const ProgressBar: FC<ProgressBarProps>;
+export default ProgressBar;

package/dist/src/components/ProgressBar/index.js

@@ -0,0 +1,58 @@
+/* istanbul ignore file */
+import React, { useEffect, useRef } from 'react';
+import { View, StyleSheet, Animated, Easing } from 'react-native';
+import { palette } from '../../theme/palette';
+import { getBarColor, getPercentage } from './utils';
+import { moderateScale, scaledForDevice } from '../../scale';
+const ProgressBar = ({ value, totalValue, isAnimated = false, duration = 300, style, ...props }) => {
+    const { white } = palette;
+    const widthAnimation = useRef(new Animated.Value(0)).current;
+    const availableTimeDuration = isAnimated && typeof duration === 'number';
+    const timeDuration = availableTimeDuration ? duration : 0;
+    const percentValue = getPercentage(value, totalValue);
+    const colorValue = getBarColor(percentValue);
+    useEffect(() => {
+        if (isAnimated) {
+            Animated.timing(widthAnimation, {
+                toValue: percentValue,
+                duration: timeDuration,
+                easing: Easing.linear,
+                useNativeDriver: false,
+            }).start();
+        }
+        else {
+            widthAnimation.setValue(percentValue);
+        }
+    }, [isAnimated, percentValue, timeDuration, widthAnimation]);
+    const validHeight = scaledForDevice(4, moderateScale);
+    const validBorderRadius = scaledForDevice(2, moderateScale);
+    const validMarginTop = scaledForDevice(12, moderateScale);
+    const styles = StyleSheet.create({
+        container: {
+            position: 'relative',
+            width: '100%',
+            height: validHeight,
+            marginTop: validMarginTop,
+            borderRadius: validBorderRadius,
+            backgroundColor: white.main,
+        },
+        fill: {
+            position: 'absolute',
+            left: 0,
+            height: validHeight,
+            borderRadius: validBorderRadius,
+            zIndex: 10,
+            backgroundColor: colorValue,
+        },
+    });
+    const animationProgress = {
+        width: widthAnimation.interpolate({
+            inputRange: [0, 100],
+            outputRange: ['0%', '100%'],
+        }),
+    };
+    return (<View style={[styles.container, style]} {...props}>
+			<Animated.View style={[styles.fill, animationProgress]}/>
+		</View>);
+};
+export default ProgressBar;

package/dist/src/components/ProgressBar/utils/index.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @name getPercentage
+ * @description return the percentage form a partial value and a total value,
+ * rounded to the nearest integer
+ * @param {number} value the partial value
+ * @param {number} totalValue the total value
+ * @returns {number|null} the percentage in the range 0-100, or null if receives an invalid param
+ * @example getPercentage(45,100) // 45
+ * @example getPercentage(22,150) // 15
+ */
+export declare const getPercentage: (value: number, totalValue: number) => number;
+/**
+ * @name getBarColor
+ * @description Devuelve una función que recibe un objeto con un campo "percentage" y devuelve el color de la barra correcto
+ * considerando los diferentes umbrales (25, 50 y 75).
+ * @returns {Function} - Una función que recibe un objeto con un campo "percentage" y devuelve el color de la barra correcto.
+ * @example getBarColor(30) // '#FF8D10' (naranja)
+ * @example getBarColor(90) // '#1DB779' (verde)
+ */
+export declare const getBarColor: (percentage: number) => string;

package/dist/src/components/ProgressBar/utils/index.js

@@ -0,0 +1,52 @@
+import { palette } from '../../../theme/palette';
+const THRESHOLD = {
+    warning: 25,
+    alert: 50,
+    success: 75,
+};
+/**
+ * @name getPercentage
+ * @description return the percentage form a partial value and a total value,
+ * rounded to the nearest integer
+ * @param {number} value the partial value
+ * @param {number} totalValue the total value
+ * @returns {number|null} the percentage in the range 0-100, or null if receives an invalid param
+ * @example getPercentage(45,100) // 45
+ * @example getPercentage(22,150) // 15
+ */
+export const getPercentage = (value, totalValue) => {
+    if (typeof totalValue !== 'number' || typeof value !== 'number' || totalValue < 0 || value < 0) {
+        return 0;
+    }
+    if (value >= totalValue) {
+        return totalValue;
+    }
+    return Math.round(100 * (value / totalValue));
+};
+/**
+ * @name getBarColor
+ * @description Devuelve una función que recibe un objeto con un campo "percentage" y devuelve el color de la barra correcto
+ * considerando los diferentes umbrales (25, 50 y 75).
+ * @returns {Function} - Una función que recibe un objeto con un campo "percentage" y devuelve el color de la barra correcto.
+ * @example getBarColor(30) // '#FF8D10' (naranja)
+ * @example getBarColor(90) // '#1DB779' (verde)
+ */
+export const getBarColor = (percentage) => {
+    if (typeof percentage !== 'number') {
+        return palette.white.main;
+    }
+    let barColor = '';
+    if (percentage >= THRESHOLD.success) {
+        barColor = palette.success.main;
+    }
+    else if (percentage >= THRESHOLD.alert) {
+        barColor = palette.alert.main;
+    }
+    else if (percentage >= THRESHOLD.warning) {
+        barColor = palette.warning.main;
+    }
+    else {
+        barColor = palette.error.main;
+    }
+    return barColor;
+};

package/dist/{components → src/components}/RadioButton/index.js

@@ -2,17 +2,21 @@ import React from 'react';
 import { View, TouchableOpacity, StyleSheet } from 'react-native';
 import Text from '../Text';
 import CheckBox from '../CheckBox';
+import { horizontalScale, moderateScale, scaledForDevice } from '../../scale';
 const checkLocation = ['left', 'right'];
 const CheckSizeValues = {
     sm: 16,
     md: 24,
     lg: 32,
 };
+const validPaddingHorizontal = scaledForDevice(16, horizontalScale);
+const validMarginVertical = scaledForDevice(10, moderateScale);
+const validMarginHorizontal = scaledForDevice(15, horizontalScale);
 const styles = StyleSheet.create({
     container: {
         alignItems: 'center',
-        paddingHorizontal: 16,
-        marginVertical: 10,
+        paddingHorizontal: validPaddingHorizontal,
+        marginVertical: validMarginVertical,
         height: 'auto',
     },
     row: {
@@ -24,10 +28,10 @@ const styles = StyleSheet.create({
         justifyContent: 'space-between',
     },
     checkToLeft: {
-        marginLeft: 15,
+        marginLeft: validMarginHorizontal,
     },
     checkToRight: {
-        marginRight: 15,
+        marginRight: validMarginHorizontal,
     },
 });
 const RadioButton = ({ children, onPress, selected = false, checkPosition = 'left', checkSize = 'sm', disabled = false, style, ...props }) => {
@@ -39,7 +43,7 @@ const RadioButton = ({ children, onPress, selected = false, checkPosition = 'lef
     const checkLeft = checkPosition === 'left';
     const customSize = CheckSizeValues[checkSize];
     return (<TouchableOpacity style={[container, checkLeft ? row : reverseRow, style]} disabled={disabled} onPress={onPress} {...props}>
-			<CheckBox checked={selected} disabled={disabled} customSize={customSize} borderRadius={customSize / 2}/>
+			<CheckBox checked={selected} disabled={disabled} customSize={customSize} borderRadius={customSize / 2} onPress={onPress}/>
 			<View style={checkLeft ? checkToLeft : checkToRight}>
 				{isStringChild ? <Text>{children}</Text> : children}
 			</View>

package/dist/{components → src/components}/Select/Components/Dropdown/index.js

@@ -1,45 +1,57 @@
 import React from 'react';
 import { View, StyleSheet, TouchableOpacity, ScrollView, Text } from 'react-native';
 import { base, black, grey, primary, white } from '../../../../theme/palette';
+import { horizontalScale, moderateScale, scaledForDevice } from '../../../../scale';
 const Dropdown = (props) => {
     const { isShowedDropdown, filteredOptions, callbackOption, selectedOptions, noOptionsMessage, optionStyles, customOptionComponent = null, } = props;
     if (!isShowedDropdown) {
         return null;
     }
     const handleSelectedOption = (option) => callbackOption(option);
+    const validPadding = scaledForDevice(8, moderateScale);
+    const validMaxHeight = scaledForDevice(168, moderateScale);
+    const validTop = scaledForDevice(60, moderateScale);
+    const validMarginBottom = scaledForDevice(20, moderateScale);
+    const validElevation = scaledForDevice(5, moderateScale);
+    const validHeight = scaledForDevice(42, moderateScale);
+    const validLeft = scaledForDevice(8, horizontalScale);
+    const validFontSize = scaledForDevice(14, moderateScale);
+    const validPaddingVertical = scaledForDevice(10, moderateScale);
     const styles = StyleSheet.create({
         container: {
             width: '100%',
-            padding: 8,
+            padding: validPadding,
         },
         optionWrapper: {
             position: 'absolute',
-            maxHeight: 168,
+            maxHeight: validMaxHeight,
             borderColor: grey[200],
             backgroundColor: base.white,
             width: '100%',
-            top: 60,
-            marginBottom: 20,
-            elevation: 5,
+            top: validTop,
+            marginBottom: validMarginBottom,
+            elevation: validElevation,
             zIndex: 10,
             flex: 1,
         },
         option: {
             width: '100%',
-            height: 42,
+            height: validHeight,
             justifyContent: 'center',
             alignItems: 'stretch',
-            paddingLeft: 8,
+            paddingLeft: validLeft,
         },
         optionText: {
+            fontSize: validFontSize,
             color: black.main,
             fontWeight: '400',
         },
         noOptionText: {
+            fontSize: validFontSize,
             color: grey[500],
             fontWeight: '400',
-            paddingLeft: 8,
-            paddingVertical: 10,
+            paddingLeft: validLeft,
+            paddingVertical: validPaddingVertical,
         },
     });
     const renderOptions = filteredOptions?.length &&

package/dist/{components → src/components}/Select/Components/Icons/Chevron/index.d.ts

@@ -11,7 +11,6 @@ declare const Chevron: {
     ({ style, color, size, onPress, ...props }: IconProps): React.JSX.Element;
     defaultProps: {
         color: string;
-        size: number;
         onPress: () => void;
     };
 };

package/dist/{components → src/components}/Select/Components/Icons/Chevron/index.js

@@ -2,10 +2,12 @@ import React from 'react';
 import { Pressable, View } from 'react-native';
 import { primary } from '../../../../../theme/palette';
 import Svg, { Path } from 'react-native-svg';
-const Chevron = ({ style, color, size, onPress, ...props }) => {
+import { moderateScale, scaledForDevice } from '../../../../../scale';
+const Chevron = ({ style, color, size = 21, onPress, ...props }) => {
+    const validSize = scaledForDevice(size, moderateScale);
     return (<Pressable onPress={onPress} style={style} {...props}>
 			<View>
-				<Svg width={size} height={size} viewBox="0 0 16 16">
+				<Svg width={validSize} height={validSize} viewBox="0 0 16 16">
 					<Path d="M8.17432 11.1055L3 6.49316L4.33106 5L8.17627 8.42773L12.0132 5.01904L13.3413 6.51416L8.17432 11.1055Z" fill={color}/>
 				</Svg>
 			</View>
@@ -13,7 +15,6 @@ const Chevron = ({ style, color, size, onPress, ...props }) => {
 };
 Chevron.defaultProps = {
     color: primary.main,
-    size: 21,
     onPress: () => { },
 };
 export default Chevron;

package/dist/{components → src/components}/Select/Components/Icons/Delete/index.d.ts

@@ -11,7 +11,6 @@ declare const Delete: {
     ({ style, color, size, onPress, ...props }: IconProps): React.JSX.Element;
     defaultProps: {
         color: string;
-        size: number;
         onPress: () => void;
     };
 };

package/dist/{components → src/components}/Select/Components/Icons/Delete/index.js

@@ -2,10 +2,12 @@ import React from 'react';
 import { Pressable, View } from 'react-native';
 import { black } from '../../../../../theme/palette';
 import Svg, { Path } from 'react-native-svg';
-const Delete = ({ style, color, size, onPress, ...props }) => {
+import { moderateScale, scaledForDevice } from '../../../../../scale';
+const Delete = ({ style, color, size = 21, onPress, ...props }) => {
+    const validSize = scaledForDevice(size, moderateScale);
     return (<Pressable onPress={onPress} style={style} {...props}>
 			<View>
-				<Svg width={size} height={size} viewBox="0 0 16 16">
+				<Svg width={validSize} height={validSize} viewBox="0 0 16 16">
 					<Path fill-rule="evenodd" clip-rule="evenodd" d="M1 8C1 4.13403 4.13397 1 8 1C11.866 1 15 4.13403 15 8C15 11.866 11.866 15 8 15C4.13397 15 1 11.866 1 8ZM10.03 11.4441L11.4441 10.03L9.41406 8L11.4441 5.96997L10.03 4.55591L8 6.58594L5.96997 4.55591L4.55591 5.96997L6.58594 8L4.55591 10.03L5.96997 11.4441L8 9.41406L10.03 11.4441Z" fill={color}/>
 				</Svg>
 			</View>
@@ -13,7 +15,6 @@ const Delete = ({ style, color, size, onPress, ...props }) => {
 };
 Delete.defaultProps = {
     color: black.main,
-    size: 21,
     onPress: () => { },
 };
 export default Delete;

package/dist/{components → src/components}/Select/index.js

@@ -1,3 +1,4 @@
+/* istanbul ignore file */
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { Keyboard, StyleSheet, Text, TextInput, View } from 'react-native';
 import { black, grey, primary } from '../../theme/palette';
@@ -5,7 +6,7 @@ import { formatPlaceholderMulti } from './utils';
 import ChevronIcon from './Components/Icons/Chevron';
 import DeleteIcon from './Components/Icons/Delete';
 import Dropdown from './Components/Dropdown';
-// eslint-disable-next-line no-shadow
+import { horizontalScale, moderateScale, scaledForDevice } from '../../scale';
 var KeyboardTypes;
 (function (KeyboardTypes) {
     KeyboardTypes["Default"] = "default";
@@ -84,10 +85,20 @@ const Select = ({ options, label, value = null, placeholder = '', optionStyles =
             setInputValue(value);
         }
     }, [hasDefaultValue, value]);
+    const moveLabel = isMoveLabel ? 38 : 10;
+    const validFontSize = scaledForDevice(16, moderateScale);
+    const validMarginBottom = scaledForDevice(10, moderateScale);
+    const validMarginTop = scaledForDevice(18, moderateScale);
+    const validHeightLabel = scaledForDevice(19, moderateScale);
+    const validPadding = scaledForDevice(8, moderateScale);
+    const validBottomLabel = scaledForDevice(moveLabel, moderateScale);
+    const validHeightInput = scaledForDevice(38, moderateScale);
+    const validRight = scaledForDevice(30, horizontalScale);
+    const validBorderBottomWidth = scaledForDevice(1, moderateScale);
     const styles = StyleSheet.create({
         wrapper: {
             width: '100%',
-            marginBottom: 10,
+            marginBottom: validMarginBottom,
             position: 'relative',
             zIndex: isShowedDropdown ? 10 : 0,
         },
@@ -95,32 +106,32 @@ const Select = ({ options, label, value = null, placeholder = '', optionStyles =
             position: 'relative',
             width: '100%',
             marginBottom: 0,
-            marginTop: 18,
+            marginTop: validMarginTop,
         },
         label: {
             position: 'absolute',
             color: isMoveLabel && !isDisabled ? primary.main : black.main,
-            fontSize: 16,
-            lineHeight: 19,
+            fontSize: validFontSize,
+            lineHeight: validHeightLabel,
             letterSpacing: 0,
             left: 0,
             fontWeight: isMoveLabel ? '600' : '400',
-            bottom: isMoveLabel ? 38 : 10,
+            bottom: validBottomLabel,
         },
         input: {
             width: '100%',
-            height: 38,
+            height: validHeightInput,
             padding: 0,
-            fontSize: 16,
-            lineHeight: 19,
+            fontSize: validFontSize,
+            lineHeight: validHeightLabel,
             letterSpacing: 0,
-            borderBottomWidth: 1,
+            borderBottomWidth: validBorderBottomWidth,
             color: black.main,
             borderBottomColor: isShowedDropdown ? primary.main : grey[200],
         },
         arrowIcon: {
             position: 'absolute',
-            padding: 8,
+            padding: validPadding,
             right: 0,
             bottom: 0,
             zIndex: 1,
@@ -128,8 +139,8 @@ const Select = ({ options, label, value = null, placeholder = '', optionStyles =
         },
         deleteIcon: {
             position: 'absolute',
-            padding: 8,
-            right: 30,
+            padding: validPadding,
+            right: validRight,
             bottom: 0,
             zIndex: 1,
         },

package/dist/{components → src/components}/StatusChip/index.js

@@ -2,21 +2,28 @@ import React, { isValidElement } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { base, grey, primary } from '../../theme/palette';
 import Text from '../Text';
+import { horizontalScale, moderateScale, scaledForDevice } from '../../scale';
+const validHeight = scaledForDevice(24, moderateScale);
+const validPadding = scaledForDevice(12, horizontalScale);
+const validBorderRadius = scaledForDevice(12, moderateScale);
+const validBorderWidth = scaledForDevice(1, moderateScale);
+const validFontSize = scaledForDevice(13, moderateScale);
+const validLineHeight = scaledForDevice(18, moderateScale);
 const styles = ({ background }) => StyleSheet.create({
     ViewStyles: {
-        height: 24,
+        height: validHeight,
         flexDirection: 'row',
         alignItems: 'center',
-        paddingLeft: 12,
-        paddingRight: 12,
-        borderRadius: 12,
+        paddingLeft: validPadding,
+        paddingRight: validPadding,
+        borderRadius: validBorderRadius,
         backgroundColor: background ?? base.white,
-        borderWidth: 1,
+        borderWidth: validBorderWidth,
         borderColor: background ?? grey['300'],
     },
     TextStyles: {
-        fontSize: 13,
-        lineHeight: 18,
+        fontSize: validFontSize,
+        lineHeight: validLineHeight,
         fontFamily: 'Roboto',
         fontWeight: '900',
         textAlign: 'center',

package/dist/{components → src/components}/Svg/index.js

@@ -7,6 +7,7 @@ import JanisLogo from './svgs/JanisLogo';
 import JanisLogoColor from './svgs/JanisLogoColor';
 import LoginIllustration from './svgs/LoginIllustration';
 import NoNotifications from './svgs/NoNotifications';
+import { horizontalScale, moderateScale, scaledForDevice } from '../../scale';
 const svgs = {
     'empty-illustration': EmptyIllustration,
     'empty-list-illustration': EmptyListIllustration,
@@ -20,8 +21,14 @@ const Svg = ({ name, width, height, size, ...props }) => {
         return null;
     }
     const SvgSelected = svgs[name];
+    const selectedWidth = size ?? width;
+    const selectedHeight = size ?? height;
+    const parseSelectedWidth = selectedWidth || 0;
+    const parseSelectedHeight = selectedHeight || 0;
+    const validateWidth = scaledForDevice(parseSelectedWidth, horizontalScale);
+    const validateHeight = scaledForDevice(parseSelectedHeight, moderateScale);
     return (<View {...props}>
-			<SvgSelected width={size ?? width} height={size ?? height} {...props}/>
+			<SvgSelected width={validateWidth} height={validateHeight} {...props}/>
 		</View>);
 };
 export default Svg;

package/dist/{components → src/components}/Text/index.js

@@ -1,12 +1,14 @@
 import React from 'react';
 import { StyleSheet, Text as TextComponent, } from 'react-native';
+import { moderateScale, scaledForDevice } from '../../scale';
 const Text = ({ children, style, ...props }) => {
     if (!children) {
         return null;
     }
+    const validFontSize = scaledForDevice(13, moderateScale);
     const styles = StyleSheet.create({
         TextStyles: {
-            fontSize: 13,
+            fontSize: validFontSize,
             fontFamily: 'Roboto',
         },
     });

package/dist/{index.d.ts → src/index.d.ts}

@@ -14,4 +14,8 @@ import RadioButton from './components/RadioButton';
 import SwipeUp from './components/SwipeUp';
 import { SwipeUpFlatList, SwipeUpScrollView, SwipeUpView } from './components/SwipeUp/childComponents';
 import Carousel from './components/Carousel';
-export { Text, Avatar, CheckBox, Icon, Image, Loading, Svg, StatusChip, Input, palette, LoadingFullScreen, RadioButton, Select, SwipeUp, SwipeUpFlatList, SwipeUpScrollView, SwipeUpView, Carousel, };
+import ProgressBar from './components/ProgressBar';
+import List from './components/List';
+import BaseButton from './components/BaseButton';
+import * as getScale from './scale';
+export { Text, Avatar, CheckBox, Icon, Image, Loading, Svg, StatusChip, Input, palette, LoadingFullScreen, RadioButton, Select, SwipeUp, SwipeUpFlatList, SwipeUpScrollView, SwipeUpView, Carousel, ProgressBar, List, BaseButton, getScale, };

package/dist/{index.js → src/index.js}

@@ -14,4 +14,8 @@ import RadioButton from './components/RadioButton';
 import SwipeUp from './components/SwipeUp';
 import { SwipeUpFlatList, SwipeUpScrollView, SwipeUpView, } from './components/SwipeUp/childComponents';
 import Carousel from './components/Carousel';
-export { Text, Avatar, CheckBox, Icon, Image, Loading, Svg, StatusChip, Input, palette, LoadingFullScreen, RadioButton, Select, SwipeUp, SwipeUpFlatList, SwipeUpScrollView, SwipeUpView, Carousel, };
+import ProgressBar from './components/ProgressBar';
+import List from './components/List';
+import BaseButton from './components/BaseButton';
+import * as getScale from './scale';
+export { Text, Avatar, CheckBox, Icon, Image, Loading, Svg, StatusChip, Input, palette, LoadingFullScreen, RadioButton, Select, SwipeUp, SwipeUpFlatList, SwipeUpScrollView, SwipeUpView, Carousel, ProgressBar, List, BaseButton, getScale, };

package/dist/src/scale/index.d.ts

@@ -0,0 +1,8 @@
+declare const isIOS: boolean;
+declare const viewportWidth: number, viewportHeight: number;
+declare const isSmallDevice: (minWidth?: number) => boolean;
+declare const horizontalScale: (size: number) => number;
+declare const verticalScale: (size: number) => number;
+declare const moderateScale: (size: number, factor?: number) => number;
+declare const scaledForDevice: (size: number, scaleCallback: (size: number) => number) => number;
+export { isIOS, viewportWidth, viewportHeight, isSmallDevice, horizontalScale, verticalScale, moderateScale, scaledForDevice, };

package/dist/src/scale/index.js

@@ -0,0 +1,13 @@
+import { Dimensions, PixelRatio, Platform } from 'react-native';
+import { WEB_MODE } from '../../env.json';
+const guidelineBaseWidth = 360;
+const guidelineBaseHeight = 720;
+const isIOS = Platform.OS === 'ios';
+const { width: viewportWidth, height: viewportHeight } = Dimensions.get('window');
+const isSmallDevice = (minWidth = 365) => viewportWidth <= minWidth;
+const horizontalScale = (size) => PixelRatio.roundToNearestPixel((viewportWidth / guidelineBaseWidth) * size);
+const verticalScale = (size) => PixelRatio.roundToNearestPixel((viewportHeight / guidelineBaseHeight) * size);
+const moderateScale = (size, factor = 1) => size + (horizontalScale(size) - size) * factor;
+/* istanbul ignore next */
+const scaledForDevice = (size, scaleCallback) => WEB_MODE ? size : scaleCallback(size);
+export { isIOS, viewportWidth, viewportHeight, isSmallDevice, horizontalScale, verticalScale, moderateScale, scaledForDevice, };

package/dist/{theme → src/theme}/palette.js

@@ -6,12 +6,13 @@ const primary = {
 const black = {
     main: '#2F2F2F',
     dark: '#050505',
+    semiTransparent: '#0000001a',
 };
 const white = {
     main: '#E8EAF6',
     dark: '#D0D3E3',
     light: '#F4F5FB',
-    semiTransparent: 'rgba(255, 255, 255, 0.75)',
+    semiTransparent: '#ffffffbf',
 };
 const grey = {
     100: '#DDDFE2',

package/dist/{ts → src/ts}/interfaces/colors.d.ts

@@ -19,8 +19,6 @@ export interface gamaColor {
     main: string;
     dark: string;
 }
-export interface Black extends gamaColor {
-}
 export interface Success extends gamaColor {
 }
 export interface Error extends gamaColor {
@@ -35,3 +33,6 @@ export interface Primary extends gamaColor {
 export interface White extends Primary {
     semiTransparent: string;
 }
+export interface Black extends gamaColor {
+    semiTransparent: string;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@janiscommerce/ui-native",
-	"version": "1.1.1",
+	"version": "1.3.0",
 	"description": "components library for Janis app",
 	"main": "dist/index.js",
 	"typings": "dist/index.d.ts",
@@ -8,8 +8,10 @@
 		"dist"
 	],
 	"scripts": {
-		"android": "sb-rn-get-stories --config-path .ondevice && react-native run-android",
-		"ios": "sb-rn-get-stories --config-path .ondevice && react-native run-ios",
+		"android": "node scripts/set-app-mode.js app && react-native run-android",
+		"ios": "node scripts/set-app-mode.js app && react-native run-ios",
+		"storybook:android": "node scripts/set-app-mode.js storybook && sb-rn-get-stories --config-path .ondevice && react-native run-android",
+		"storybook:ios": "node scripts/set-app-mode.js storybook && sb-rn-get-stories --config-path .ondevice && react-native run-ios",
 		"start": "react-native start",
 		"test": "jest",
 		"lint": "eslint .",
@@ -18,11 +20,11 @@
 		"test:commit": "jest --colors --bail --findRelatedTests",
 		"test:coverage": "tsc --noEmit && jest --collectCoverage --detectOpenHandles",
 		"build": "rm -rf dist && tsc && cp -r android ios dist",
-		"storybook": "react-native-storybook-server",
+		"storybook-server": "react-native-storybook-server",
 		"storybook-watcher": "sb-rn-watcher --config-path .ondevice",
 		"update-stories": "sb-rn-get-stories --config-path .ondevice",
-		"storybook-web": " npm run storybook-web-build && start-storybook -p 6006 --config-dir ./.storybook",
-		"storybook-web-build": "build-storybook --config-dir ./.storybook --output-dir ./.storybook_static",
+		"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"
 	},
 	"repository": {