@janiscommerce/ui-native 1.0.1

package/README.md

@@ -0,0 +1,34 @@
+# @janiscommerce/ui-native
+
+![janis-logo](brand-logo.png)
+
+Library components for Janis Apps
+
+[![Coverage Status](https://github.com/janis-commerce/ui-native/actions/workflows/coverage-status.yml/badge.svg)](https://github.com/janis-commerce/ui-native/actions/workflows/coverage-status.yml)
+[![npm version](https://badge.fury.io/js/%40janiscommerce%2Fui-native.svg)](https://badge.fury.io/js/%40janiscommerce%2Fui-native)
+
+## Installation
+
+The minimum required versions for using the package are **react: 17.0.2** and **react-native: 0.67.5**.
+
+```sh
+npm install @janiscommerce/ui-native
+```
+
+## Usage Example
+
+A quick example of how to import a component and start using **@janiscommerce/ui-native**:
+
+```sh
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Avatar from '@janiscommerce/ui-native/Avatar';
+
+function App() {
+  return <Avatar size="sm" placeholder="Janis" bgColor="#2979FF" />;
+}
+
+ReactDOM.render(<App />, document.querySelector('#app'));
+```
+
+[Documentation](https://janis-commerce.github.io/ui-native)

package/dist/components/Avatar/index.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+export declare const sizeValues: {
+    sm: number;
+    md: number;
+    lg: number;
+};
+export type sizeType = typeof sizeValues;
+export type sizeKeys = keyof sizeType;
+export interface AvatarProps {
+    placeholder: string;
+    textColor?: string;
+    bgColor?: string;
+    size?: sizeKeys;
+    customSize?: number;
+    imageUrl?: string;
+    onErrorImg?: () => void;
+    style?: ViewStyle;
+}
+export declare const getSize: (size: sizeKeys, customSize?: number) => number;
+declare const Avatar: ({ size, textColor, bgColor, imageUrl, placeholder, customSize, onErrorImg, style, ...props }: AvatarProps) => React.JSX.Element | null;
+export default Avatar;

package/dist/components/Avatar/index.js

@@ -0,0 +1,56 @@
+import React, { useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import Image from '../Image';
+import Text from '../Text';
+import { formatPlaceholder } from './utils/formatPlaceholder/index';
+export const sizeValues = {
+    sm: 24,
+    md: 36,
+    lg: 60,
+};
+const styles = StyleSheet.create({
+    container: {
+        justifyContent: 'center',
+        overflow: 'hidden',
+    },
+    text: {
+        textAlign: 'center',
+        textTransform: 'uppercase',
+    },
+});
+export const getSize = (size, customSize) => customSize || sizeValues[size];
+const Avatar = ({ size = 'sm', textColor = '#FFFFFF', bgColor = '#E8EAF6', imageUrl = '', placeholder, customSize, onErrorImg, style, ...props }) => {
+    const [showInitials, setShowInitials] = useState(false);
+    if (!placeholder) {
+        return null;
+    }
+    const initials = formatPlaceholder(String(placeholder));
+    const handleOnErrorImage = () => {
+        setShowInitials(true);
+        if (onErrorImg) {
+            onErrorImg();
+        }
+    };
+    return (<View style={[
+            styles.container,
+            {
+                backgroundColor: bgColor,
+                borderRadius: getSize(size, customSize) / 2,
+                height: getSize(size, customSize),
+                width: getSize(size, customSize),
+            },
+            style,
+        ]} {...props}>
+			{!!imageUrl && !showInitials && (<Image accessibilityRole="image" onError={handleOnErrorImage} onLoad={() => setShowInitials(false)} source={{
+                uri: imageUrl,
+            }} style={{
+                height: getSize(size, customSize),
+                width: getSize(size, customSize),
+            }}/>)}
+
+			{(showInitials || !imageUrl) && !!initials.length && (<Text style={[styles.text, { color: textColor, fontSize: getSize(size, customSize) * 0.4 }]}>
+					{initials}
+				</Text>)}
+		</View>);
+};
+export default Avatar;

package/dist/components/Avatar/utils/formatPlaceholder/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Checks if the placeholder provided is single or compound and returns either the first two letters,
+ * or the initials of the two first words.
+ * @param {string} placeholder
+ * @return {string} An array with the first two leters of the placeholder, or initials of the
+ * first two words in uppercase
+ * @example formatPlaceholder('Juan') // returns 'JU'
+ * @example formatPlaceholder('Juan Perez') // returns 'JP'
+ * @example formatPlaceholder('Juan Perez Rodriguez') // returns 'JP'
+ * @example formatPlaceholder('') // returns ''
+ */
+export declare const formatPlaceholder: (placeholder?: string) => string;

package/dist/components/Avatar/utils/formatPlaceholder/index.js

@@ -0,0 +1,20 @@
+/**
+ * Checks if the placeholder provided is single or compound and returns either the first two letters,
+ * or the initials of the two first words.
+ * @param {string} placeholder
+ * @return {string} An array with the first two leters of the placeholder, or initials of the
+ * first two words in uppercase
+ * @example formatPlaceholder('Juan') // returns 'JU'
+ * @example formatPlaceholder('Juan Perez') // returns 'JP'
+ * @example formatPlaceholder('Juan Perez Rodriguez') // returns 'JP'
+ * @example formatPlaceholder('') // returns ''
+ */
+export const formatPlaceholder = (placeholder = '') => {
+    const names = placeholder.split(' ');
+    if (names.length > 1) {
+        const firstLetter = names[0].substring(0, 1).toUpperCase();
+        const secondLetter = names[1].substring(0, 1).toUpperCase();
+        return `${firstLetter}${secondLetter}`;
+    }
+    return placeholder.substring(0, 2).toUpperCase();
+};

package/dist/components/CheckBox/icon/CheckedIcon.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface IconProps {
+    color?: string;
+    size?: number;
+}
+declare const CheckedIcon: {
+    ({ color, size }: IconProps): React.JSX.Element;
+    defaultProps: {
+        color: string;
+        size: number;
+    };
+};
+export default CheckedIcon;

package/dist/components/CheckBox/icon/CheckedIcon.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { View } from 'react-native';
+import { base } from '../../../theme/palette';
+import Svg, { Path } from 'react-native-svg';
+const CheckedIcon = ({ color, size }) => (<View>
+		<Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+			<Path d="M3 0H3ZM4 8.0534L7.05987 11L12 5.28272L10.5916 4L6.93119 8.22932L5.29401 6.64607L4 8.0534Z" fill={color}/>
+		</Svg>
+	</View>);
+CheckedIcon.defaultProps = {
+    color: base.white,
+    size: 16,
+};
+export default CheckedIcon;

package/dist/components/CheckBox/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+interface CheckBoxProps {
+    checked: boolean;
+    customSize?: number;
+    checkOnColor?: string;
+    checkOffColor?: string;
+    iconCheckColor?: string;
+    borderRadius?: number;
+    disabled?: boolean;
+    style?: ViewStyle;
+}
+declare const CheckBox: ({ checked, customSize, checkOnColor, checkOffColor, iconCheckColor, borderRadius, disabled, style, ...props }: CheckBoxProps) => React.JSX.Element;
+export default CheckBox;

package/dist/components/CheckBox/index.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { View, TouchableOpacity, StyleSheet } from 'react-native';
+import { base, grey, primary } from '../../theme/palette';
+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 styles = StyleSheet.create({
+        touchableOpacity: {
+            width: customSize,
+            height: customSize,
+            borderRadius: hasBorderRadius,
+        },
+        checkOn: {
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            backgroundColor: !disabled ? checkOnColor : grey[200],
+            width: customSize,
+            height: customSize,
+            borderRadius: hasBorderRadius,
+        },
+        checkOff: {
+            borderWidth: getCheckBoxScale(customSize, 16),
+            borderColor: !disabled ? checkOffColor : grey[200],
+            width: customSize,
+            height: customSize,
+            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>
+		</TouchableOpacity>);
+};
+export default CheckBox;

package/dist/components/Image/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ImageProps as ImageRNProps, ImageSourcePropType } from 'react-native';
+interface ImageProps extends ImageRNProps {
+    source: ImageSourcePropType;
+}
+declare const Image: ({ source, ...props }: ImageProps) => React.JSX.Element | null;
+export default Image;

package/dist/components/Image/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Image as ImageComp } from 'react-native';
+const Image = ({ source, ...props }) => {
+    if (!source || typeof source !== 'object' || !Object.keys(source).length) {
+        return null;
+    }
+    const sourceKeys = Object.keys(source);
+    if (!sourceKeys.includes('uri')) {
+        return null;
+    }
+    return <ImageComp source={source} {...props}/>;
+};
+export default Image;

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import { TextInput, KeyboardType, TextStyle } from 'react-native';
+import { Status } from './utils';
+export declare enum keyboardTypes {
+    default = "default",
+    numberPad = "number-pad",
+    decimalPad = "decimal-pad",
+    numeric = "numeric",
+    emailAddress = "email-address",
+    phonePad = "phone-pad",
+    url = "url"
+}
+interface InputProps {
+    disabled?: boolean;
+    readOnly?: boolean;
+    label: string;
+    placeholder: string;
+    value?: number | string;
+    inputColor?: string;
+    valueColor?: string;
+    status?: Status;
+    statusMessage?: string;
+    keyboardType?: KeyboardType;
+    onChange?: () => void;
+    onSubmitEditing?: () => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    style?: TextStyle;
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<TextInput>>;
+export default Input;

package/dist/components/Input/index.js

@@ -0,0 +1,88 @@
+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";
+    keyboardTypes["numberPad"] = "number-pad";
+    keyboardTypes["decimalPad"] = "decimal-pad";
+    keyboardTypes["numeric"] = "numeric";
+    keyboardTypes["emailAddress"] = "email-address";
+    keyboardTypes["phonePad"] = "phone-pad";
+    keyboardTypes["url"] = "url";
+})(keyboardTypes || (keyboardTypes = {}));
+const Input = React.forwardRef(({ disabled = false, readOnly = false, label, placeholder, value = '', inputColor = '#2979FF', valueColor = '#2F2F2F', status = 'error', statusMessage = '', keyboardType = keyboardTypes.default, onChange = () => { }, onSubmitEditing = () => { }, onFocus = () => { }, onBlur = () => { }, style, ...props }, ref) => {
+    const [inputState, setInputState] = useState('incomplete');
+    useEffect(() => {
+        setInputState(getInputInitialState(value?.toString()));
+    }, [value]);
+    if (!label || !placeholder) {
+        return null;
+    }
+    const onFocusHandler = () => {
+        setInputState('focus');
+        return onFocus();
+    };
+    const onEndEditingHandler = ({ nativeEvent, }) => {
+        const { text = '' } = nativeEvent;
+        if (text) {
+            setInputState('complete');
+            return onBlur();
+        }
+        setInputState('incomplete');
+        return onBlur();
+    };
+    const hasMessage = !!statusMessage;
+    const isLabelVisible = !disabled && !readOnly && (inputState !== 'incomplete' || hasMessage);
+    const validBorderColor = getBorderColor({ inputState, hasMessage, status, inputColor });
+    const validLabelColor = getLabelColor({
+        disabled,
+        readOnly,
+        inputColor,
+        inputState,
+        statusMessage,
+        status,
+    });
+    const validStatusMessageColor = getStatusMessageColor(status);
+    const styles = StyleSheet.create({
+        container: {
+            width: '100%',
+        },
+        inputWrapper: {
+            height: 50,
+            borderBottomColor: validBorderColor,
+            borderBottomWidth: 1,
+            justifyContent: 'flex-end',
+        },
+        label: {
+            color: validLabelColor,
+            fontSize: 16,
+            letterSpacing: 0,
+            lineHeight: 19,
+            position: 'absolute',
+            bottom: raiseLabel({ disabled, hasMessage, inputState }) ? 25 : 0,
+        },
+        input: {
+            color: valueColor,
+            fontSize: 16,
+            letterSpacing: 0,
+            lineHeight: 19,
+            padding: 0,
+        },
+        statusMessage: {
+            color: validStatusMessageColor,
+            marginTop: 5,
+        },
+    });
+    return (<View style={styles.container}>
+				<View style={styles.inputWrapper}>
+					{isLabelVisible && <Text style={styles.label}>{label}</Text>}
+					<TextInput style={[styles.input, style]} ref={ref} onFocus={onFocusHandler} onEndEditing={onEndEditingHandler} onChange={onChange} onSubmitEditing={onSubmitEditing} placeholder={placeholder} editable={!(readOnly || disabled)} selectionColor={inputColor} keyboardType={keyboardType} value={value?.toString()} {...props}/>
+				</View>
+				{showStatusMessage(hasMessage, inputState) && (<View>
+						<Text style={styles.statusMessage}>{statusMessage}</Text>
+					</View>)}
+			</View>);
+});
+export default Input;

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

@@ -0,0 +1,28 @@
+import { palette } from '../../../theme/palette';
+export type Status = keyof typeof palette;
+interface getBorderColorProps {
+    inputState: string;
+    hasMessage: boolean;
+    status: Status;
+    inputColor: string;
+}
+interface getLabelColorProps {
+    disabled: boolean;
+    readOnly: boolean;
+    inputColor: string;
+    inputState: string;
+    statusMessage: string;
+    status: Status;
+}
+interface raiseLabelProps {
+    disabled: boolean;
+    hasMessage: boolean;
+    inputState: string;
+}
+export declare const getInputInitialState: (value: string) => "incomplete" | "complete";
+export declare const getBorderColor: ({ inputState, hasMessage, status, inputColor, }: getBorderColorProps) => string;
+export declare const getLabelColor: ({ disabled, readOnly, inputColor, inputState, statusMessage, status, }: getLabelColorProps) => string;
+export declare const raiseLabel: ({ disabled, hasMessage, inputState }: raiseLabelProps) => boolean;
+export declare const showStatusMessage: (hasMessage: boolean, inputState: string) => boolean;
+export declare const getStatusMessageColor: (status: Status) => string;
+export {};

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

@@ -0,0 +1,44 @@
+import { palette } from '../../../theme/palette';
+export const getInputInitialState = (value) => {
+    if (!value) {
+        return 'incomplete';
+    }
+    return 'complete';
+};
+export const getBorderColor = ({ inputState, hasMessage, status, inputColor, }) => {
+    if (inputState === 'focus') {
+        return inputColor;
+    }
+    if (hasMessage) {
+        const colorPalette = palette[status];
+        if ('main' in colorPalette) {
+            return colorPalette.main;
+        }
+        return palette.error.main;
+    }
+    return palette.grey[500];
+};
+export const getLabelColor = ({ disabled, readOnly, inputColor, inputState, statusMessage, status, }) => {
+    if (disabled || readOnly) {
+        return palette.grey[500];
+    }
+    if (inputState === 'focus') {
+        return inputColor;
+    }
+    if (statusMessage) {
+        const colorPalette = palette[status];
+        if ('main' in colorPalette) {
+            return colorPalette.main;
+        }
+    }
+    return palette.grey[500];
+};
+export const raiseLabel = ({ disabled, hasMessage, inputState }) => !disabled && (inputState !== 'incomplete' || !!hasMessage);
+export const showStatusMessage = (hasMessage, inputState) => !!hasMessage && inputState !== 'focus';
+export const getStatusMessageColor = (status) => {
+    const colorPalette = palette[status];
+    if ('main' in colorPalette) {
+        return colorPalette.main;
+    }
+    return palette.error.main;
+};

package/dist/components/Loading/index.d.ts

@@ -0,0 +1,12 @@
+import React, { FC } from 'react';
+import { ColorValue, ViewStyle } from 'react-native';
+interface Props {
+    isLoading: boolean;
+    color?: ColorValue;
+    size?: number;
+    duration?: number;
+    children?: React.ReactNode | null;
+    style?: ViewStyle;
+}
+declare const Loading: FC<Props>;
+export default Loading;

package/dist/components/Loading/index.js

@@ -0,0 +1,59 @@
+import React, { useEffect, useRef } from 'react';
+import { StyleSheet, View, Animated, Easing } from 'react-native';
+import { primary, white } from '../../theme/palette';
+const startRotationAnimation = ({ duration, rotationDegree, timingAnimation }) => Animated.loop(Animated.timing(rotationDegree, {
+    duration,
+    toValue: 360,
+    easing: timingAnimation,
+    useNativeDriver: true,
+})).start();
+const Loading = ({ isLoading, color = primary.main, size = 64, duration = 1000, children = null, style, ...props }) => {
+    const rotationDegree = useRef(new Animated.Value(0)).current;
+    const styles = StyleSheet.create({
+        container: {
+            position: 'relative',
+            justifyContent: 'center',
+            alignItems: 'center',
+            width: size,
+            height: size,
+        },
+        spinner: {
+            position: 'absolute',
+            width: size,
+            height: size,
+            borderTopColor: white.dark,
+            borderLeftColor: color,
+            borderRightColor: color,
+            borderBottomColor: color,
+            borderRadius: size / 2,
+            borderWidth: 3.5,
+        },
+    });
+    const animationSpinnerStyle = {
+        transform: [
+            {
+                rotateZ: rotationDegree.interpolate({
+                    inputRange: [0, 360],
+                    outputRange: ['0deg', '360deg'],
+                }),
+            },
+        ],
+    };
+    useEffect(() => {
+        if (isLoading) {
+            startRotationAnimation({
+                duration,
+                rotationDegree,
+                timingAnimation: Easing.linear,
+            });
+        }
+    }, [isLoading, duration, rotationDegree]);
+    if (!isLoading) {
+        return <></>;
+    }
+    return (<View style={[styles.container, style]} {...props}>
+			<Animated.View style={{ ...styles.spinner, ...animationSpinnerStyle }}/>
+			{children}
+		</View>);
+};
+export default Loading;

package/dist/components/LoadingFullScreen/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ModalProps, ViewStyle } from 'react-native';
+import { Names } from '../../ts/interfaces/svgs';
+interface ILoadingFullScreen extends ModalProps {
+    isLoading: boolean;
+    text?: string;
+    svgName?: Names;
+    spinnerDuration?: number;
+    style?: ViewStyle;
+}
+declare const LoadingFullScreen: ({ text, isLoading, svgName, spinnerDuration, style, ...props }: ILoadingFullScreen) => React.JSX.Element;
+export default LoadingFullScreen;

package/dist/components/LoadingFullScreen/index.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { StyleSheet, Modal, Text, View } from 'react-native';
+import Loading from '../Loading';
+import Svg from '../Svg';
+import { grey, white } from '../../theme/palette';
+const styles = StyleSheet.create({
+    ContainerStyles: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: white.semiTransparent,
+    },
+    TextStyles: {
+        fontSize: 16,
+        lineHeight: 24,
+        fontFamily: 'Roboto',
+        color: grey[700],
+        textAlign: 'center',
+        fontWeight: '500',
+        width: '50%',
+        marginTop: 25,
+    },
+});
+const LoadingFullScreen = ({ text, isLoading, svgName = 'janis-logo', spinnerDuration = 2000, style, ...props }) => {
+    const hasTextPassed = typeof text === 'string' && Boolean(text);
+    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}/>
+				</Loading>
+				{hasTextPassed && <Text style={styles.TextStyles}>{text}</Text>}
+			</View>
+		</Modal>);
+};
+export default LoadingFullScreen;

package/dist/components/StatusChip/index.d.ts

@@ -0,0 +1,8 @@
+import React, { ReactElement } from 'react';
+import { ViewProps } from 'react-native';
+interface StatusChipProps extends ViewProps {
+    children?: ReactElement | string;
+    background?: string;
+}
+declare const StatusChip: ({ children, ...props }: StatusChipProps) => React.JSX.Element | null;
+export default StatusChip;

package/dist/components/StatusChip/index.js

@@ -0,0 +1,37 @@
+import React, { isValidElement } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { base, grey, primary } from '../../theme/palette';
+import Text from '../Text';
+const styles = ({ background }) => StyleSheet.create({
+    ViewStyles: {
+        height: 24,
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingLeft: 12,
+        paddingRight: 12,
+        borderRadius: 12,
+        backgroundColor: background ?? base.white,
+        borderWidth: 1,
+        borderColor: background ?? grey['300'],
+    },
+    TextStyles: {
+        fontSize: 13,
+        lineHeight: 18,
+        fontFamily: 'Roboto',
+        fontWeight: '900',
+        textAlign: 'center',
+        color: background ? base.white : primary.main,
+    },
+});
+const StatusChip = ({ children, ...props }) => {
+    const isChildrenAString = typeof children === 'string';
+    const isCustomComponent = isValidElement(children);
+    const hasToRenderStatusChip = !children || (!isChildrenAString && !isCustomComponent);
+    if (hasToRenderStatusChip) {
+        return null;
+    }
+    return (<View style={styles(props).ViewStyles} {...props}>
+			{isCustomComponent ? children : <Text style={styles(props).TextStyles}>{children}</Text>}
+		</View>);
+};
+export default StatusChip;

package/dist/components/Svg/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Isvg } from '../../ts/interfaces/svgs';
+declare const Svg: ({ name, width, height, size, ...props }: Isvg) => React.JSX.Element | null;
+export default Svg;

package/dist/components/Svg/index.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { View } from 'react-native';
+import { svgsNames } from '../../ts/interfaces/svgs';
+import EmptyIllustration from './svgs/EmptyIllustration';
+import EmptyListIllustration from './svgs/EmptyListIllustration';
+import JanisLogo from './svgs/JanisLogo';
+import JanisLogoColor from './svgs/JanisLogoColor';
+import LoginIllustration from './svgs/LoginIllustration';
+import NoNotifications from './svgs/NoNotifications';
+const svgs = {
+    'empty-illustration': EmptyIllustration,
+    'empty-list-illustration': EmptyListIllustration,
+    'janis-logo': JanisLogo,
+    'janis-logo-color': JanisLogoColor,
+    'login-illustration': LoginIllustration,
+    'no-notifications': NoNotifications,
+};
+const Svg = ({ name, width, height, size, ...props }) => {
+    if (!name || !svgsNames.includes(name)) {
+        return null;
+    }
+    const SvgSelected = svgs[name];
+    return (<View {...props}>
+			<SvgSelected width={size ?? width} height={size ?? height} {...props}/>
+		</View>);
+};
+export default Svg;

package/dist/components/Svg/svgs/EmptyIllustration/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { Isvg } from '../../../../ts/interfaces/svgs';
+declare const EmptyIllustration: ({ ...props }: Isvg) => React.JSX.Element;
+export default EmptyIllustration;

package/dist/components/Svg/svgs/EmptyIllustration/index.js

@@ -0,0 +1,23 @@
+import Svg, { Circle, Ellipse, G, Path } from 'react-native-svg';
+import React from 'react';
+import { View } from 'react-native';
+const EmptyIllustration = ({ ...props }) => (<View {...props}>
+		<Svg xmlns="http://www.w3.org/2000/svg" width="110" height="114" viewBox="0 0 110 114" {...props}>
+			<G fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
+				<G transform="translate(-6 -6)">
+					<Ellipse cx="46" cy="109.5" fill="#D0D3E3" rx="34" ry="4.5"/>
+					<G>
+						<Circle cx="45.743" cy="45.742" r="32.387" fill="#E8EAF6" fillRule="nonzero" transform="rotate(-34.722 45.743 45.742)"/>
+						<G fill="#FFF" fillRule="nonzero" transform="translate(9.3 15.35)">
+							<Path d="M13.043 0.277H41.043V10.277H13.043z"/>
+							<Path d="M3.043 14.676H41.043V28.737000000000002H3.043z"/>
+							<Path d="M0.59452381 34.4135714L41.0430952 34.4135714 41.0430952 48.4743651 7.08626984 48.4743651z"/>
+							<Path d="M13.0786508 54.1515873L41.0430952 54.1515873 41.0430952 66.8260317 33.1222222 66.8260317z"/>
+						</G>
+						<Path fill="#2979FF" d="M45.743 7.857a37.886 37.886 0 0137.886 37.886c0 9.43-3.446 18.057-9.148 24.688l5.264 4.853a7.147 7.147 0 017.194 1.412l17.03 15.297a7.149 7.149 0 01-9.555 10.636l-17.03-15.297a7.151 7.151 0 01-1.962-7.708l-5.238-4.84-.05-.05a37.734 37.734 0 01-24.391 8.895c-20.924 0-37.886-16.962-37.886-37.886 0-20.924 16.962-37.886 37.886-37.886zm0 7.984c-16.514 0-29.902 13.388-29.902 29.902 0 16.514 13.388 29.901 29.902 29.901a29.902 29.902 0 0029.902-29.901c0-16.514-13.388-29.902-29.902-29.902z"/>
+					</G>
+				</G>
+			</G>
+		</Svg>
+	</View>);
+export default EmptyIllustration;

package/dist/components/Svg/svgs/EmptyListIllustration/index.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import type { Isvg } from '../../../../ts/interfaces/svgs';
+declare const EmptyListIllustration: ({ ...props }: Isvg) => React.JSX.Element;
+export default EmptyListIllustration;

package/dist/components/Svg/svgs/EmptyListIllustration/index.js

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import Svg, { Path, Defs, LinearGradient, Stop } from 'react-native-svg';
+const EmptyListIllustration = ({ ...props }) => (<View {...props}>
+		<Svg width={213} height={162} viewBox="0 0 213 162" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+			<Defs>
+				<LinearGradient id="paint0_linear_10149_116403" x1={108} y1={153.5} x2={170.993} y2={153.5} gradientUnits="userSpaceOnUse">
+					<Stop stopColor="white" stopOpacity={0}/>
+					<Stop offset={0.05} stopColor="#EFF2FE" stopOpacity={0.19}/>
+					<Stop offset={0.09} stopColor="#E1E7FD" stopOpacity={0.35}/>
+					<Stop offset={0.15} stopColor="#D4DCFD" stopOpacity={0.51}/>
+					<Stop offset={0.21} stopColor="#C9D3FD" stopOpacity={0.64}/>
+					<Stop offset={0.27} stopColor="#C0CCFC" stopOpacity={0.75}/>
+					<Stop offset={0.35} stopColor="#B8C6FC" stopOpacity={0.85}/>
+					<Stop offset={0.43} stopColor="#B3C1FC" stopOpacity={0.92}/>
+					<Stop offset={0.53} stopColor="#AEBEFC" stopOpacity={0.96}/>
+					<Stop offset={0.67} stopColor="#ACBCFC" stopOpacity={0.99}/>
+					<Stop offset={1} stopColor="#ACBCFC"/>
+				</LinearGradient>
+				<LinearGradient id="paint1_linear_10149_116403" gradientUnits="userSpaceOnUse">
+					<Stop stopColor="#CFD4E8" stopOpacity={0.5}/>
+					<Stop offset={1} stopColor="#ACBCFC"/>
+				</LinearGradient>
+				<LinearGradient id="paint2_linear_10149_116403" gradientUnits="userSpaceOnUse">
+					<Stop stopColor="#CFD4E8" stopOpacity={0.5}/>
+					<Stop offset={1} stopColor="#ACBCFC"/>
+				</LinearGradient>
+				<LinearGradient id="paint3_linear_10149_116403" gradientUnits="userSpaceOnUse">
+					<Stop stopColor="#CFD4E8" stopOpacity={0.5}/>
+					<Stop offset={1} stopColor="#ACBCFC"/>
+				</LinearGradient>
+				<LinearGradient id="paint4_linear_10149_116403" x1={158.269} y1={38.1773} x2={146.841} y2={38.1773} gradientUnits="userSpaceOnUse">
+					<Stop stopColor="#F7C6A4"/>
+					<Stop offset={0.39} stopColor="#F5C09A"/>
+					<Stop offset={0.99} stopColor="#F2B483"/>
+				</LinearGradient>
+				<LinearGradient id="paint5_linear_10149_116403" x1={166.361} y1={32.0986} x2={148.204} y2={32.0986} gradientUnits="userSpaceOnUse">
+					<Stop stopColor="#305069"/>
+					<Stop offset={1} stopColor="#273947"/>
+				</LinearGradient>
+				<LinearGradient id="paint6_linear_10149_116403" x1={135.302} y1={89.985} x2={163.468} y2={89.985} gradientUnits="userSpaceOnUse">
+					<Stop stopColor="#305069"/>
+					<Stop offset={1} stopColor="#273947"/>
+				</LinearGradient>
+			</Defs>
+			<Path opacity={0.31} d="M139.5 162C156.897 162 171 158.194 171 153.5C171 148.806 156.897 145 139.5 145C122.103 145 108 148.806 108 153.5C108 158.194 122.103 162 139.5 162Z" fill="url(#paint0_linear_10149_116403)"/>
+			<Path d="M88 141L3 141" stroke="url(#paint1_linear_10149_116403)" strokeWidth={5} strokeMiterlimit={10} strokeLinecap="round"/>
+			<Path d="M100 157L55 157" stroke="url(#paint2_linear_10149_116403)" strokeWidth={5} strokeMiterlimit={10} strokeLinecap="round"/>
+			<Path d="M210 141L182 141" stroke="url(#paint3_linear_10149_116403)" strokeWidth={5} strokeMiterlimit={10} strokeLinecap="round"/>
+			<Path d="M99.8942 52H39.008C38.4513 52 38 52.6077 38 53.3574V80.9128C38 81.6625 38.4513 82.2702 39.008 82.2702H99.8942C100.451 82.2702 100.902 81.6625 100.902 80.9128V53.3574C100.902 52.6077 100.451 52 99.8942 52Z" fill="white"/>
+			<Path d="M43.8073 59.1059C44.4208 58.8286 60.6811 59.1059 60.6811 59.1059" stroke="#E4ECFA" strokeWidth={4} strokeMiterlimit={10} strokeLinecap="round"/>
+			<Path d="M43.4845 74.5012C44.4935 74.5012 95.9869 74.5012 95.9869 74.5012" stroke="#D0D3E3" strokeWidth={3} strokeMiterlimit={10} strokeLinecap="round"/>
+			<Path d="M43.4845 67.1111C44.4935 67.1111 95.9869 67.1111 95.9869 67.1111" stroke="#D0D3E3" strokeWidth={3} strokeMiterlimit={10} strokeLinecap="round"/>
+			<Path d="M99.8942 89H39.008C38.4513 89 38 89.6077 38 90.3574V117.913C38 118.662 38.4513 119.27 39.008 119.27H99.8942C100.451 119.27 100.902 118.662 100.902 117.913V90.3574C100.902 89.6077 100.451 89 99.8942 89Z" fill="white"/>
+			<Path d="M43.8073 96.1059C44.4208 95.8286 60.6811 96.1059 60.6811 96.1059" stroke="#E4ECFA" strokeWidth={4} strokeMiterlimit={10} strokeLinecap="round"/>
+			<Path d="M43.4845 111.501C44.4935 111.501 95.9869 111.501 95.9869 111.501" stroke="#D0D3E3" strokeWidth={3} strokeMiterlimit={10} strokeLinecap="round"/>
+			<Path d="M43.4845 104.111C44.4935 104.111 95.9869 104.111 95.9869 104.111" stroke="#D0D3E3" strokeWidth={3} strokeMiterlimit={10} strokeLinecap="round"/>
+			<Path d="M138.702 0H60.2981C59.5812 0 59 0.782996 59 1.74888V37.2511C59 38.217 59.5812 39 60.2981 39H138.702C139.419 39 140 38.217 140 37.2511V1.74888C140 0.782996 139.419 0 138.702 0Z" fill="white"/>
+			<Path d="M66 9C66.8 9 88 9 88 9" stroke="#5393FF" strokeWidth={4} strokeMiterlimit={10} strokeLinecap="round"/>
+			<Path d="M66 30C67.3068 30 134 30 134 30" stroke="#D0D3E3" strokeWidth={4} strokeMiterlimit={10} strokeLinecap="round"/>
+			<Path d="M66 20C67.3068 20 134 20 134 20" stroke="#D0D3E3" strokeWidth={4} strokeMiterlimit={10} strokeLinecap="round"/>
+			<Path d="M157.604 144.551L157.611 146.619L150.392 147.404L149.282 149.385L150.074 151.287H163.88L163.127 144.709L157.604 144.551Z" fill="#979797"/>
+			<Path d="M125.217 148L125.209 149.791L117.11 150.829L116 152.811L116.793 154.713H129.885L130.028 148.135L125.217 148Z" fill="#979797"/>
+			<Path d="M171.909 69.0224C171.758 68.0556 171.37 67.2313 171.021 66.3358C170.601 65.2738 170.173 64.2197 169.713 63.1815C168.762 61.01 167.756 58.783 166.385 56.8413C166.028 56.342 165.648 55.8427 165.18 55.4543C165.18 55.4543 166.86 62.5237 166.543 68.4597L163.524 78.8894C163.524 78.8894 158.61 81.053 165.687 80.8945C170.252 80.7915 171.726 75.648 171.972 71.8914C172.036 70.9483 172.059 69.9893 171.917 69.0462C171.917 69.0383 171.917 69.0304 171.917 69.0224H171.909Z" fill="#2979FF"/>
+			<Path d="M120.878 42.5045V40.7847C120.878 40.7847 123.255 37.2976 119.927 33.3349C119.927 33.3349 117.708 27.4702 117.232 27.4702C116.757 27.4702 116.701 30.1093 118.445 33.6519C118.445 33.6519 114.537 32.3839 112.952 35.237C111.367 38.0901 112.374 37.1945 112.374 37.1945C112.374 37.1945 113.903 41.8942 115.013 42.449C115.116 42.5045 115.243 42.7105 115.378 43.0434" fill="#F7C5A0"/>
+			<Path d="M148.521 27.6604C148.521 27.6604 144.027 35.6332 149.726 47.4419L158.261 48.6862C158.261 48.6862 157.477 34.3176 148.521 27.6604V27.6604Z" fill="url(#paint4_linear_10149_116403)"/>
+			<Path d="M165.18 55.4545C162.691 48.0681 157.817 48.0839 157.817 48.0839L155.685 48.2107L149.734 47.4499L147.832 48.5594C143.568 51.1986 139.011 53.4097 134.2 54.8442C131.402 55.6764 128.613 56.5878 125.799 57.4358C125.799 57.4358 122.312 50.937 120.886 43.8043V42.5125L115.385 43.0514C116.661 46.1977 119.063 60.6534 119.063 63.3084C119.063 64.7587 121.844 64.8459 122.78 64.9093C125.197 65.0758 127.622 64.9172 130.039 64.7746C132.441 64.624 134.89 64.7508 137.243 64.2119C138.297 63.9662 139.359 63.673 140.382 63.3163L135.31 89.6283C150.051 93.5909 163.207 89.6283 163.207 89.6283C167.597 71.4318 167.114 61.2161 165.18 55.4703V55.4545Z" fill="#2979FF"/>
+			<Path d="M157.952 45.4685L158.586 43.5665C158.586 43.5665 166.195 39.9208 166.353 33.6599C166.512 27.3989 163.896 22.5645 161.439 22.1682C158.982 21.7719 156.209 20.2661 155.733 19.3943C155.258 18.5226 149.884 17.5715 149.322 23.1985C148.759 28.8254 148.204 27.7951 148.204 27.7951C148.204 27.7951 149.258 29.3009 149.322 30.252C149.385 31.203 149.948 30.3312 151.612 32.8673C153.276 35.4034 153.673 37.5432 152.88 40.3964C152.087 43.2495 152.246 45.4685 152.246 45.4685H157.952V45.4685Z" fill="url(#paint5_linear_10149_116403)"/>
+			<Path d="M163.215 89.5332C163.215 89.5332 156.93 91.6413 135.318 89.5332C135.318 89.5332 131.196 100.787 130.245 106.335C129.294 111.883 125.015 121.393 125.015 149.29H129.77C129.77 149.29 130.721 123.136 150.217 103.482C150.217 103.482 146.571 111.407 157.508 146.437L163.215 146.595C163.215 146.595 158.459 98.7265 163.215 89.5332V89.5332Z" fill="#2F2F2F"/>
+			<Path d="M135.524 88.4634L135.302 89.6125C135.302 89.6125 148.109 93.8605 162.937 89.6125C163.064 89.5808 163.199 89.6125 163.199 89.6125L163.46 88.503C163.46 88.503 150.756 92.1883 135.516 88.4713L135.524 88.4634Z" fill="url(#paint6_linear_10149_116403)"/>
+		</Svg>
+	</View>);
+export default EmptyListIllustration;

package/dist/components/Svg/svgs/JanisLogo/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { Isvg } from '../../../../ts/interfaces/svgs';
+declare const JanisLogo: ({ ...props }: Isvg) => React.JSX.Element;
+export default JanisLogo;

package/dist/components/Svg/svgs/JanisLogo/index.js

@@ -0,0 +1,9 @@
+import Svg, { Path } from 'react-native-svg';
+import React from 'react';
+import { View } from 'react-native';
+const JanisLogo = ({ ...props }) => (<View {...props}>
+		<Svg width="65" height="47" viewBox="0 0 65 47" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+			<Path fill-rule="evenodd" clip-rule="evenodd" d="M50.1841 16.9578C46.4571 16.9578 43.6747 17.9474 41.1548 20.1724C40.9028 20.4012 40.6498 20.6386 40.3915 20.8812C40.1384 21.1217 39.8938 21.3622 39.6534 21.5974C39.6482 21.6027 39.6113 21.6388 39.607 21.6441L24.0672 38.2278C22.6459 39.7027 21.076 40.5842 20.6353 40.8152L20.455 40.9063C20.4466 40.9106 20.4381 40.9148 20.4297 40.919C18.9747 41.6194 17.5387 41.9605 16.0395 41.9605C9.66072 41.9605 4.47234 36.9045 4.47234 30.6882C4.47234 27.7512 5.7291 24.5482 7.75238 22.3306C9.88951 19.9923 12.7436 18.4761 15.3889 18.2737C15.4111 18.2716 15.4322 18.2684 15.4543 18.2642L15.4754 18.2599C16.709 18.1646 18.1228 18.2101 19.5662 18.3913C20.668 18.5301 21.7171 18.7388 22.7197 19.0185L22.9622 19.0662C23.2321 19.1001 23.4968 19.0546 23.7192 18.9423C23.8363 18.8861 23.9459 18.8098 24.0556 18.7081C24.0693 18.6954 24.0819 18.6827 24.0935 18.6689L24.4615 18.2525C24.4805 18.2324 24.4995 18.2112 24.5279 18.1783L24.7261 17.9431C24.7377 17.9293 24.7483 17.9145 24.7588 17.8997L24.7926 17.8509C24.9412 17.6359 25.0203 17.3837 25.0203 17.123C25.0203 16.5604 24.6629 16.0805 24.1041 15.8993L23.754 15.7912C23.7182 15.7785 23.6845 15.7679 23.6338 15.7541C22.3001 15.3452 20.8525 15.04 19.3321 14.8472C19.0812 14.8164 18.825 14.7878 18.5583 14.7624C19.4112 12.2058 21.3596 9.69256 23.987 7.78646C26.9898 5.60489 30.5028 4.43517 33.8778 4.5051C37.919 4.58244 41.5702 5.91533 44.1576 8.25584C44.7048 8.75064 45.2119 9.2751 45.7106 9.85996C45.9099 10.092 46.1471 10.2467 46.4613 10.3293C46.7575 10.3834 47.0559 10.3378 47.3132 10.2033C47.4102 10.1535 47.503 10.0888 47.6295 9.97333L47.7075 9.89599C47.7349 9.8695 47.7613 9.84301 47.7771 9.825L47.9479 9.63852C47.9742 9.61415 48.0038 9.58449 48.0417 9.54317L48.3106 9.23484C48.4171 9.1024 48.5605 8.88943 48.5847 8.56204C48.6047 8.27173 48.5215 7.98354 48.3496 7.74408C48.3348 7.72077 48.319 7.69852 48.3 7.67839L48.2621 7.63389C48.163 7.51205 48.0575 7.38914 47.9669 7.28848C44.497 3.02388 38.9112 0.407896 33.0122 0.290288C32.8772 0.288169 32.7433 0.287109 32.6083 0.287109C23.9164 0.287109 15.5661 6.73541 13.7811 14.7433C13.6082 14.7603 13.4437 14.7804 13.275 14.8037L13.2476 14.8111C9.7166 15.2954 6.49455 17.0383 3.9283 19.8503C1.31038 22.7152 0.0367432 26.2043 0.0367432 30.5166C0.0367432 39.2905 7.04702 46.1626 15.9952 46.1626C19.3142 46.1626 22.5131 45.065 25.2617 42.9756C25.9428 42.4172 26.7663 41.6406 27.7141 40.6626L40.6403 26.8326C41.9572 25.2804 42.9693 24.2876 43.5893 23.726L43.9108 23.4294C45.6484 21.8909 47.9331 21.0783 50.5194 21.0783C56.0631 21.0783 60.7465 25.9277 60.7465 31.6683C60.7465 34.2133 59.5677 37.0846 57.672 39.1634C55.9071 41.0949 53.2164 42.4161 50.6491 42.6122C50.6364 42.6132 50.6038 42.6185 50.5774 42.6238C49.4598 42.7118 48.1851 42.6704 46.8872 42.5051C45.912 42.3844 44.9673 42.1979 44.0405 41.9404L43.836 41.8991C43.8181 41.8959 43.8001 41.8927 43.7822 41.8917C43.5313 41.8673 43.2951 41.9097 43.0737 42.0199C42.9598 42.0771 42.8607 42.146 42.75 42.253L42.361 42.662C42.3262 42.6916 42.2966 42.7213 42.2713 42.7499L41.9972 43.0667C41.8401 43.2797 41.7526 43.5287 41.7442 43.7872C41.7262 44.3477 42.0647 44.8382 42.6172 45.0417L43.0842 45.2038C43.409 45.315 43.7464 45.3892 44.0711 45.457C44.9757 45.6837 45.9373 45.8628 46.9294 45.9899C47.3511 46.0429 47.7887 46.0853 48.2378 46.1203C48.6691 46.1478 49.1182 46.1658 49.5895 46.1754C49.7287 46.1775 49.8668 46.1785 50.0028 46.1785C50.3223 46.1785 50.6333 46.1722 50.9359 46.1616C51.1805 46.151 51.4356 46.1362 51.6939 46.1128C51.9407 46.0906 52.1789 46.0662 52.4541 46.0238C55.7795 45.5672 58.8729 43.9323 61.1672 41.4191C63.5521 38.8095 64.7118 35.633 64.7118 31.7096C64.7118 23.5756 58.195 16.9578 50.1841 16.9578Z" fill="#2979FF"/>
+		</Svg>
+	</View>);
+export default JanisLogo;

package/dist/components/Svg/svgs/JanisLogoColor/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { Isvg } from '../../../../ts/interfaces/svgs';
+declare const JanisLogoColor: ({ ...props }: Isvg) => React.JSX.Element;
+export default JanisLogoColor;

package/dist/components/Svg/svgs/JanisLogoColor/index.js

@@ -0,0 +1,12 @@
+import Svg, { G, Path } from 'react-native-svg';
+import React from 'react';
+import { View } from 'react-native';
+const JanisLogoColor = ({ ...props }) => (<View {...props}>
+		<Svg width="152" height="36" viewBox="0 0 152 36" xmlns="http://www.w3.org/2000/svg" {...props}>
+			<G fill="none" fillRule="evenodd">
+				<Path d="M12.443 3.544v19.774c0 2.679.108 5.056-.913 7-1.02 1.945-2.497 3.373-4.306 4.417-1.812 1.042-4.189.923-6.51.987v-4.39c2.29-.125 4.42-.255 5.767-1.733 1.346-1.48 1.462-3.619 1.462-6.42V3.543h4.5zm15.023 6.93a9.8 9.8 0 011.505.125c.754.096 4.181.65 5.672 3.04.006.009.008.016.015.024l-.001-2.396h4.316v19.331h-4.315v-2.48c-1.16 1.59-3.192 2.29-4.471 2.585a11.523 11.523 0 01-.798.157c-.488.083-1.136.174-1.778.202a.864.864 0 01-.183-.005c-.051.001-.097.008-.148.008-1.826 0-3.473-.397-4.941-1.19-1.47-.794-2.63-1.953-3.48-3.48-.852-1.525-1.276-3.345-1.276-5.461 0-2.117.44-3.962 1.32-5.535.884-1.57 2.074-2.784 3.575-3.64 1.5-.857 3.163-1.285 4.988-1.285zm57.04.094c1.36 0 2.566.17 3.618.512a8.83 8.83 0 012.924 1.635l-.059.092-2.106 2.154a5.478 5.478 0 00-1.431-.844c-.76-.311-1.478-.484-2.159-.515-.865 0-1.609.21-2.226.63-.62.422-.93.99-.93 1.705 0 .59.203 1.081.604 1.47.403.39.82.671 1.254.84.433.173 1.283.46 2.552.865 1.577.53 2.807 1.215 3.688 2.055.883.841 1.323 1.978 1.323 3.408 0 1.867-.648 3.407-1.95 4.622-1.298 1.213-3.14 1.82-5.52 1.82-1.424 0-2.777-.248-4.061-.746-1.283-.497-2.325-1.228-3.128-2.19l2.18-2.232c.674.603 1.376 1.087 2.108 1.434.851.405 1.694.606 2.53.606 1.02 0 1.856-.2 2.506-.606.649-.404.974-1.028.974-1.869 0-.652-.203-1.18-.605-1.586a3.723 3.723 0 00-1.368-.887 60.925 60.925 0 00-2.575-.84c-3.28-1.06-4.917-2.943-4.917-5.651 0-1.617.594-3.002 1.784-4.155 1.19-1.151 2.855-1.727 4.99-1.727zm-29.238-.074c4.203 0 7.611 2.925 7.633 6.539v13.516h-4.337V19.437c0-1.941-.168-3.345-1.28-4.329-.41-.36-.907-.631-1.443-.86-2.125-.723-3.848.29-4.817 1.124-1.34 1.148-2.011 2.783-2.011 4.915v10.32h-4.338v-19.35h4.156v2.268c1.361-1.807 3.75-3.03 6.437-3.03zm17.648.773v19.33H68.6v-19.33h4.316zm-44.618 2.77c-1.224 0-2.318.275-3.288.825-.97.547-1.735 1.328-2.298 2.342-.566 1.015-.846 2.18-.846 3.49 0 1.314.28 2.477.846 3.49.563 1.014 1.327 1.803 2.298 2.362.97.562 2.064.841 3.288.841 1.197 0 2.286-.28 3.27-.84a5.906 5.906 0 002.297-2.362c.551-1.014.826-2.177.826-3.491 0-1.31-.275-2.475-.826-3.49a5.779 5.779 0 00-2.298-2.342c-.983-.55-2.072-.824-3.27-.824zm42.45-10.54c.68 0 1.277.233 1.786.7.511.466.766 1.043.766 1.727 0 .685-.255 1.26-.766 1.727a2.556 2.556 0 01-1.786.701 2.638 2.638 0 01-1.808-.701c-.528-.466-.79-1.042-.79-1.727 0-.684.262-1.26.79-1.726.525-.468 1.127-.702 1.808-.702z" fill="#2F2F2F"/>
+				<Path d="M140.74 12.974c-2.777 0-4.85.739-6.728 2.399-.188.17-.377.348-.57.529-.188.18-.37.359-.55.534l-.034.035-11.58 12.375a10.64 10.64 0 01-2.558 1.93l-.134.069-.02.01c-1.084.522-2.154.776-3.271.776-4.754 0-8.62-3.773-8.62-8.411 0-2.192.937-4.582 2.444-6.237 1.593-1.745 3.72-2.876 5.691-3.027a.517.517 0 00.049-.007l.016-.003c.919-.071 1.973-.037 3.048.098a16.3 16.3 0 012.35.468l.181.035a.982.982 0 00.843-.296l.274-.31.05-.056.148-.176a.497.497 0 00.024-.032l.025-.036a.954.954 0 00-.513-1.456l-.26-.081a19.207 19.207 0 00-3.872-.768c.635-1.908 2.087-3.783 4.045-5.206 2.237-1.627 4.855-2.5 7.37-2.448 3.012.058 5.733 1.052 7.661 2.799.408.369.786.76 1.158 1.197.148.173.325.288.559.35a.984.984 0 00.87-.266l.059-.057.052-.053.127-.14c.02-.018.042-.04.07-.07l.2-.23a.878.878 0 00.204-.503.936.936 0 00-.212-.66l-.028-.032a6.972 6.972 0 00-.22-.258C136.502 2.577 132.34.625 127.943.537l-.3-.003c-6.478 0-12.7 4.812-14.031 10.788a9.461 9.461 0 00-.377.045l-.02.005c-2.632.362-5.033 1.662-6.945 3.76-1.951 2.138-2.9 4.742-2.9 7.96 0 6.547 5.224 11.675 11.892 11.675 2.473 0 4.857-.82 6.906-2.378.507-.417 1.12-.997 1.827-1.726l9.633-10.32c.981-1.159 1.736-1.9 2.198-2.318l.24-.222c1.294-1.148 2.997-1.754 4.924-1.754 4.132 0 7.622 3.618 7.622 7.902 0 1.9-.879 4.042-2.291 5.593-1.316 1.441-3.32 2.427-5.234 2.573a.646.646 0 00-.054.01 13.69 13.69 0 01-2.75-.09c-.726-.09-1.43-.229-2.121-.42l-.152-.032-.04-.005a.954.954 0 00-.77.27l-.29.305a.665.665 0 00-.066.065l-.205.237a.956.956 0 00-.188.537c-.014.419.239.785.65.936l.348.121c.242.083.494.139.736.19a18.418 18.418 0 003.105.494 23.121 23.121 0 001.315.044c.238 0 .47-.005.696-.013.182-.008.372-.019.565-.036a10.806 10.806 0 007.06-3.502c1.776-1.948 2.64-4.318 2.64-7.246 0-6.07-4.856-11.008-10.826-11.008" fill="#2979FF"/>
+			</G>
+		</Svg>
+	</View>);
+export default JanisLogoColor;

package/dist/components/Svg/svgs/LoginIllustration/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { Isvg } from '../../../../ts/interfaces/svgs';
+declare const LoginIllustration: ({ ...props }: Isvg) => React.JSX.Element;
+export default LoginIllustration;

package/dist/components/Svg/svgs/LoginIllustration/index.js

@@ -0,0 +1,31 @@
+import Svg, { G, Stop, Path, Defs, LinearGradient } from 'react-native-svg';
+import React from 'react';
+import { View } from 'react-native';
+const LoginIllustration = ({ ...props }) => (<View {...props}>
+		<Svg width={100} height={98} viewBox="0 0 100 98" xmlns="http://www.w3.org/2000/svg" {...props}>
+			<Defs>
+				<LinearGradient x1="50.017%" y1="99.985%" x2="50.017%" y2="0002.025%" id="prefix__a">
+					<Stop stopColor="#E1EAFF" offset="0%"/>
+					<Stop stopColor="#FFF" offset="0.002%"/>
+					<Stop stopColor="#FBFCFF" offset="23.64%"/>
+					<Stop stopColor="#F1F5FF" offset="44.82%"/>
+					<Stop stopColor="#DEE8FF" offset="65.05%"/>
+					<Stop stopColor="#C5D5FF" offset="84.6%"/>
+					<Stop stopColor="#ABC3FF" offset="99.95%"/>
+					<Stop stopColor="#ABC3FF" offset="100%"/>
+				</LinearGradient>
+			</Defs>
+			<G fill="none" fillRule="evenodd">
+				<Path d="M50.34 14.512c-9.41 0-17.12 7.654-17.12 17.12 0 9.411 7.653 17.12 17.12 17.12 9.41 0 17.12-7.652 17.12-17.12 0-9.466-7.71-17.12-17.12-17.12zM79.422 83.333c0-16.383-12.529-28.741-29.139-28.741S21.145 66.95 21.145 83.333h-2.948H82.37h-2.948z" fill="#FFF" fillRule="nonzero"/>
+				<Path fill="url(#prefix__a)" fillRule="nonzero" d="M0 98.073V0h100v98.073z"/>
+				<Path d="M50.17 48.696H50.453c9.41-.057 17.007-7.71 17.007-17.12s-7.653-17.12-17.12-17.12c-9.41 0-17.12 7.653-17.12 17.12 0 9.41 7.596 17.007 16.95 17.12z"/>
+				<Path d="M85.26 83.333v-.17c0-.51 0-.963-.056-1.417v-.397-.567c-.567-8.05-3.685-15.362-8.957-21.088-.397-.454-.793-.85-1.19-1.247-3.515-3.345-7.653-5.896-12.189-7.597 6.293-4.081 10.488-11.224 10.488-19.274 0-12.642-10.317-22.96-22.96-22.96-12.64 0-22.958 10.318-22.958 22.96 0 8.05 4.195 15.136 10.43 19.274a33.967 33.967 0 00-12.244 7.597c-.397.397-.794.85-1.19 1.247-5.273 5.669-8.448 13.038-8.958 21.088-.113.85-.113 1.814-.113 2.835 0 .963.057 1.814.17 2.55h69.784c.057-.736.057-1.587.057-2.38-.113-.17-.113-.34-.113-.454zM33.22 31.576c0-9.41 7.653-17.12 17.12-17.12 9.41 0 17.12 7.653 17.12 17.12 0 9.41-7.596 17.063-17.006 17.12H50.17c-9.354-.113-16.95-7.71-16.95-17.12zM21.259 80.782c.736-8.9 5.215-16.44 12.018-21.088 4.705-3.231 10.487-5.102 16.95-5.102H50.51c6.406.057 12.188 1.927 16.894 5.102 6.802 4.648 11.28 12.188 12.018 21.088H21.259z" fill="#2979FF" fillRule="nonzero"/>
+				<Path d="M79.308 80.782h-58.05c.737-8.9 5.216-16.44 12.019-21.088 4.705-3.231 10.487-5.102 16.95-5.102H50.51c6.406.057 12.188 1.927 16.894 5.102 6.689 4.648 11.167 12.188 11.904 21.088zM67.46 31.576c0 9.41-7.596 17.063-17.006 17.12H50.17c-9.354-.057-16.95-7.71-16.95-17.12s7.653-17.12 17.12-17.12c9.41.056 17.12 7.71 17.12 17.12z" fill="#FFF" fillRule="nonzero"/>
+				<Path fill="#2979FF" fillRule="nonzero" d="M5.896 14.116v-8.22h8.56V0H0v14.116zM94.104 5.896v8.56h5.84V0h-14.06v5.896z"/>
+				<G fill="#2979FF" fillRule="nonzero">
+					<Path d="M14.456 97.902H0V83.844h5.896v8.22h8.56zM99.943 97.902H85.884v-5.839h8.22v-8.56h5.84z"/>
+				</G>
+			</G>
+		</Svg>
+	</View>);
+export default LoginIllustration;

package/dist/components/Svg/svgs/NoNotifications/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { Isvg } from '../../../../ts/interfaces/svgs';
+declare const Notification: ({ ...props }: Isvg) => React.JSX.Element;
+export default Notification;

package/dist/components/Svg/svgs/NoNotifications/index.js

@@ -0,0 +1,17 @@
+import Svg, { G, Path, Ellipse, Circle } from 'react-native-svg';
+import React from 'react';
+import { View } from 'react-native';
+const Notification = ({ ...props }) => (<View {...props}>
+		<Svg width="81" height="117" viewBox="0 0 81 117" xmlns="http://www.w3.org/2000/svg" {...props}>
+			<G id="Bienvenida-(A)" stroke="none" stroke-width="1" fill="none" fillRule="evenodd">
+				<G id="Notification_icon">
+					<Ellipse id="Oval" fill="#D0D3E3" cx="38" cy="112.5" rx="34" ry="4.5"/>
+					<Path d="M70.3,79.7142857 L70.3,38.8571429 C70.2919528,21.8384331 57.5482806,7.54239462 40.7,5.65142857 L40.7,0 L33.3,0 L33.3,5.65142857 C16.4517194,7.54239462 3.70804719,21.8384331 3.7,38.8571429 L3.7,79.7142857 L0,79.7142857 L0,87.1428571 L74,87.1428571 L74,79.7142857 L70.3,79.7142857 Z M37,94.5714286 C32.9130929,94.5714286 29.6,91.2455439 29.6,87.1428571 L44.4,87.1428571 C44.4,91.2455439 41.0869071,94.5714286 37,94.5714286 Z M11.1,79.7142857 L11.1,38.8571429 C11.1,24.4977394 22.695825,12.8571429 37,12.8571429 C51.304175,12.8571429 62.9,24.4977394 62.9,38.8571429 L62.9,79.7142857 L11.1,79.7142857 Z" id="Shape" fill="#2979FF" fill-rule="nonzero"/>
+					<Path d="M37,97.1428571 C31.4983942,97.1428571 27.0384615,92.6657046 27.0384615,87.1428571 L46.9615385,87.1428571 C46.9615385,92.6657046 42.5016058,97.1428571 37,97.1428571 Z" id="Path" fill="#1759FF"/>
+					<Circle id="Oval" fill="#5393FF" cx="65.5" cy="30.5" r="15.5"/>
+					<Path d="M66.0043945,37.1757812 C67.4165039,37.1757812 68.4887695,36.7070312 69.2211914,35.7695312 C69.9536133,34.8320312 70.3198242,33.4785156 70.3198242,31.7089844 L70.3198242,31.7089844 L70.3198242,29.3535156 C70.3022461,27.6367188 69.9243164,26.3198242 69.1860352,25.402832 C68.4477539,24.4858398 67.3813477,24.0273438 65.9868164,24.0273438 C64.5922852,24.0273438 63.5244141,24.4902344 62.7832031,25.4160156 C62.0419922,26.3417969 61.6713867,27.6982422 61.6713867,29.4853516 L61.6713867,29.4853516 L61.6713867,31.8408203 C61.6889648,33.5576172 62.0668945,34.8759766 62.8051758,35.7958984 C63.543457,36.7158203 64.6098633,37.1757812 66.0043945,37.1757812 Z M66.0043945,35.1279297 C65.3774414,35.1279297 64.921875,34.8745117 64.6376953,34.3676758 C64.3535156,33.8608398 64.2114258,33.0859375 64.2114258,32.0429688 L64.2114258,32.0429688 L64.2114258,28.9316406 C64.2290039,27.953125 64.3798828,27.2338867 64.6640625,26.7739258 C64.9482422,26.3139648 65.3891602,26.0839844 65.9868164,26.0839844 C66.6020508,26.0839844 67.0546875,26.3256836 67.3447266,26.809082 C67.6347656,27.2924805 67.7797852,28.0644531 67.7797852,29.125 L67.7797852,29.125 L67.7797852,32.1660156 C67.7680664,33.1679688 67.6245117,33.9121094 67.3491211,34.3984375 C67.0737305,34.8847656 66.6254883,35.1279297 66.0043945,35.1279297 Z" id="0" fill="#FFFFFF" fill-rule="nonzero"/>
+				</G>
+			</G>
+		</Svg>
+	</View>);
+export default Notification;

package/dist/components/Text/index.d.ts

@@ -0,0 +1,8 @@
+import React, { ReactElement } from 'react';
+import { StyleProp, TextProps as TextComponentProps, TextStyle } from 'react-native';
+interface TextProps extends TextComponentProps {
+    children?: ReactElement | string;
+    style?: StyleProp<TextStyle>;
+}
+declare const Text: ({ children, style, ...props }: TextProps) => React.JSX.Element | null;
+export default Text;

package/dist/components/Text/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { StyleSheet, Text as TextComponent, } from 'react-native';
+const Text = ({ children, style, ...props }) => {
+    if (!children) {
+        return null;
+    }
+    const styles = StyleSheet.create({
+        TextStyles: {
+            fontSize: 13,
+            fontFamily: 'Roboto',
+        },
+    });
+    return (<TextComponent style={[styles.TextStyles, style]} {...props}>
+			{children}
+		</TextComponent>);
+};
+export default Text;

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+import Text from './components/Text';
+import Avatar from './components/Avatar';
+import CheckBox from './components/CheckBox';
+import Image from './components/Image';
+import Svg from './components/Svg';
+import Loading from './components/Loading';
+import StatusChip from './components/StatusChip';
+import Input from './components/Input';
+import LoadingFullScreen from './components/LoadingFullScreen';
+import { palette } from './theme/palette';
+export { Text, Avatar, CheckBox, Image, Loading, Svg, StatusChip, Input, palette, LoadingFullScreen };

package/dist/index.js

@@ -0,0 +1,11 @@
+import Text from './components/Text';
+import Avatar from './components/Avatar';
+import CheckBox from './components/CheckBox';
+import Image from './components/Image';
+import Svg from './components/Svg';
+import Loading from './components/Loading';
+import StatusChip from './components/StatusChip';
+import Input from './components/Input';
+import LoadingFullScreen from './components/LoadingFullScreen';
+import { palette } from './theme/palette';
+export { Text, Avatar, CheckBox, Image, Loading, Svg, StatusChip, Input, palette, LoadingFullScreen };

package/dist/theme/palette.d.ts

@@ -0,0 +1,24 @@
+import { Alert, Base, Black, Env, Error, GreyScale, Primary, Success, Warning, White } from '../ts/interfaces/colors';
+declare const primary: Primary;
+declare const black: Black;
+declare const white: White;
+declare const grey: GreyScale;
+declare const base: Base;
+declare const success: Success;
+declare const error: Error;
+declare const warning: Warning;
+declare const alert: Alert;
+declare const environment: Env;
+declare const palette: {
+    primary: Primary;
+    black: Black;
+    white: White;
+    grey: GreyScale;
+    base: Base;
+    success: Success;
+    error: Error;
+    warning: Warning;
+    alert: Alert;
+    environment: Env;
+};
+export { primary, black, white, grey, base, success, error, warning, alert, environment, palette };

package/dist/theme/palette.js

@@ -0,0 +1,61 @@
+const primary = {
+    main: '#2979FF',
+    dark: '#1759FF',
+    light: '#02BFFB',
+};
+const black = {
+    main: '#2F2F2F',
+    dark: '#050505',
+};
+const white = {
+    main: '#E8EAF6',
+    dark: '#D0D3E3',
+    light: '#F4F5FB',
+    semiTransparent: 'rgba(255, 255, 255, 0.75)',
+};
+const grey = {
+    100: '#DDDFE2',
+    200: '#D5D7DB',
+    300: '#C4C6CC',
+    400: '#A8AAAC',
+    500: '#939598',
+    600: '#747679',
+    700: '#585858',
+};
+const base = {
+    white: '#fff',
+    black: '#000',
+};
+const success = {
+    main: '#1DB779',
+    dark: '#109D59',
+};
+const error = {
+    main: '#FF4343',
+    dark: '#FF2A2A',
+};
+const warning = {
+    main: '#FF8D10',
+    dark: '#FF6E08',
+};
+const alert = {
+    main: '#FFCE17',
+    dark: '#FFBA0C',
+};
+const environment = {
+    qa: '#1DB779',
+    beta: '#F13B70',
+};
+const palette = {
+    primary,
+    black,
+    white,
+    grey,
+    base,
+    success,
+    error,
+    warning,
+    alert,
+    environment,
+};
+export { primary, black, white, grey, base, success, error, warning, alert, environment, palette };

package/dist/ts/interfaces/colors.d.ts

@@ -0,0 +1,37 @@
+export interface GreyScale {
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+}
+export interface Env {
+    qa: string;
+    beta: string;
+}
+export interface Base {
+    black: string;
+    white: string;
+}
+export interface gamaColor {
+    main: string;
+    dark: string;
+}
+export interface Black extends gamaColor {
+}
+export interface Success extends gamaColor {
+}
+export interface Error extends gamaColor {
+}
+export interface Warning extends gamaColor {
+}
+export interface Alert extends gamaColor {
+}
+export interface Primary extends gamaColor {
+    light: string;
+}
+export interface White extends Primary {
+    semiTransparent: string;
+}

package/dist/ts/interfaces/colors.js

@@ -0,0 +1 @@
+export {};

package/dist/ts/interfaces/svgs.d.ts

@@ -0,0 +1,11 @@
+import type { SvgProps } from 'react-native-svg';
+import { ViewProps } from 'react-native';
+export declare const svgsNames: readonly ["empty-illustration", "empty-list-illustration", "janis-logo", "janis-logo-color", "login-illustration", "no-notifications"];
+export type Names = (typeof svgsNames)[number];
+export interface Isvg extends SvgProps, ViewProps {
+    name?: Names;
+    width?: number;
+    height?: number;
+    size?: number;
+    xmlns?: string;
+}

package/dist/ts/interfaces/svgs.js

@@ -0,0 +1,8 @@
+export const svgsNames = [
+    'empty-illustration',
+    'empty-list-illustration',
+    'janis-logo',
+    'janis-logo-color',
+    'login-illustration',
+    'no-notifications',
+];

package/package.json

@@ -0,0 +1,121 @@
+{
+	"name": "@janiscommerce/ui-native",
+	"version": "1.0.1",
+	"description": "components library for Janis app",
+	"main": "dist/index.js",
+	"typings": "dist/index.d.ts",
+	"files": [
+		"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",
+		"start": "react-native start",
+		"test": "jest",
+		"lint": "eslint .",
+		"prepare": "husky install",
+		"validate:code": "npm run lint -- --fix && tsc --noEmit && npm t",
+		"test:commit": "jest --colors --bail --findRelatedTests",
+		"test:coverage": "tsc --noEmit && jest --collectCoverage",
+		"build": "rm -rf dist && tsc",
+		"storybook": "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-docs": "build-storybook --config-dir ./.storybook --output-dir ./docs"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/janis-commerce/ui-native.git"
+	},
+	"keywords": [
+		"janis",
+		"app",
+		"ui"
+	],
+	"author": "",
+	"license": "ISC",
+	"bugs": {
+		"url": "https://github.com/janis-commerce/ui-native/issues"
+	},
+	"homepage": "https://github.com/janis-commerce/ui-native#readme",
+	"peerDependencies": {
+		"react": ">=17.0.2 <=18.2.0",
+		"react-native": ">=0.67.5 <=0.71.5"
+	},
+	"devDependencies": {
+		"@babel/core": "^7.12.9",
+		"@babel/preset-env": "^7.22.7",
+		"@babel/runtime": "^7.22.6",
+		"@react-native-community/eslint-config": "^2.0.0",
+		"@storybook/addon-actions": "^6.5.4",
+		"@storybook/addon-controls": "^6.5.4",
+		"@storybook/addon-essentials": "^6.5.4",
+		"@storybook/addon-ondevice-actions": "^6.5.4",
+		"@storybook/addon-ondevice-controls": "^6.5.4",
+		"@storybook/addon-react-native-web": "0.0.20",
+		"@storybook/builder-webpack5": "^6.5.4",
+		"@storybook/manager-webpack5": "^6.5.4",
+		"@storybook/react": "^6.5.4",
+		"@storybook/react-native": "^6.5.4",
+		"@storybook/react-native-server": "^6.5.4",
+		"@testing-library/react-native": "^7.2.0",
+		"@types/jest": "^25.2.3",
+		"@types/react": "^17.0.2",
+		"@types/react-native": "^0.63.2",
+		"@types/react-test-renderer": "^16.9.2",
+		"@typescript-eslint/eslint-plugin": "^5.45.0",
+		"@typescript-eslint/parser": "^5.32.0",
+		"babel-jest": "^29.6.1",
+		"babel-loader": "8.2.4",
+		"babel-plugin-react-native-web": "^0.19.6",
+		"eslint": "^7.14.0",
+		"eslint-config-airbnb": "^18.2.1",
+		"eslint-config-airbnb-typescript": "^17.0.0",
+		"eslint-config-prettier": "^8.1.0",
+		"eslint-import-resolver-babel-module": "^5.2.0",
+		"eslint-plugin-react": "^7.30.1",
+		"eslint-plugin-react-hooks": "^4.6.0",
+		"eslint-plugin-react-native": "^4.0.0",
+		"eslint-plugin-storybook": "^0.6.12",
+		"husky": "^8.0.0",
+		"jest": "^26.6.3",
+		"jest-expo": "^41.0.0",
+		"lint-staged": "^13.0.3",
+		"metro-react-native-babel-preset": "^0.76.7",
+		"react": "17.0.2",
+		"react-dom": "^17.0.2",
+		"react-native": "0.67.5",
+		"react-native-svg-transformer": "^1.0.0",
+		"react-test-renderer": "17.0.2",
+		"setup-env": "^2.0.0",
+		"storybook": "^6.5.4",
+		"typescript": "^5.1.6",
+		"webpack": "^5.52.0"
+	},
+	"resolutions": {
+		"@types/react": "^16"
+	},
+	"lint-staged": {
+		"*{js,jsx,ts,tsx}": [
+			"prettier --write",
+			"eslint --fix"
+		],
+		"*.{js,jsx,ts,tsx}": [
+			"npm run test:commit"
+		],
+		"*.{ts,tsx}": [
+			"tsc --noEmit"
+		]
+	},
+	"dependencies": {
+		"@react-native-async-storage/async-storage": "^1.19.0",
+		"@react-native-community/datetimepicker": "^7.4.0",
+		"@react-native-community/slider": "^4.4.2",
+		"@storybook/cli": "^6.5.4",
+		"react-native-safe-area-context": "^4.6.4",
+		"react-native-svg": "12.1.1",
+		"react-native-web": "^0.15.0"
+	}
+}