@janiscommerce/ui-native 1.1.1 → 1.2.0

package/dist/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/components/BaseButton/index.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Pressable, StyleSheet } from 'react-native';
+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 styles = StyleSheet.create({
+        container: {
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+            paddingHorizontal: 16,
+            paddingVertical: 10,
+            borderRadius,
+            backgroundColor: bgColor,
+        },
+        icon: {
+            color: palette.base.white,
+            paddingRight: iconPaddingRight,
+            paddingLeft: iconPaddingLeft,
+        },
+        title: {
+            fontSize: 14,
+            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/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/Input/index.js

@@ -1,7 +1,6 @@
 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
 export var keyboardTypes;
 (function (keyboardTypes) {
     keyboardTypes["default"] = "default";

package/dist/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/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/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/components/ProgressBar/index.js

@@ -0,0 +1,53 @@
+import React, { useEffect, useRef } from 'react';
+import { View, StyleSheet, Animated, Easing } from 'react-native';
+import { palette } from '../../theme/palette';
+import { getBarColor, getPercentage } from './utils';
+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 styles = StyleSheet.create({
+        container: {
+            position: 'relative',
+            width: '100%',
+            height: 4,
+            marginTop: 12,
+            borderRadius: 2,
+            backgroundColor: white.main,
+        },
+        fill: {
+            position: 'absolute',
+            left: 0,
+            height: 4,
+            borderRadius: 2,
+            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/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/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/Select/index.js

@@ -5,7 +5,6 @@ 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
 var KeyboardTypes;
 (function (KeyboardTypes) {
     KeyboardTypes["Default"] = "default";

package/dist/index.d.ts

@@ -14,4 +14,7 @@ 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';
+export { Text, Avatar, CheckBox, Icon, Image, Loading, Svg, StatusChip, Input, palette, LoadingFullScreen, RadioButton, Select, SwipeUp, SwipeUpFlatList, SwipeUpScrollView, SwipeUpView, Carousel, ProgressBar, List, BaseButton, };

package/dist/index.js

@@ -14,4 +14,7 @@ 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';
+export { Text, Avatar, CheckBox, Icon, Image, Loading, Svg, StatusChip, Input, palette, LoadingFullScreen, RadioButton, Select, SwipeUp, SwipeUpFlatList, SwipeUpScrollView, SwipeUpView, Carousel, ProgressBar, List, BaseButton, };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@janiscommerce/ui-native",
-	"version": "1.1.1",
+	"version": "1.2.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,7 +20,7 @@
 		"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",