@janiscommerce/ui-native 1.8.1 → 1.10.0

package/dist/components/{LayoutWithBottomButtons → molecules/LayoutWithBottomButtons}/utils/index.js

@@ -1,12 +1,13 @@
-import { moderateScale, scaledForDevice } from '../../../scale';
-import { palette } from '../../../theme/palette';
+import { moderateScale, scaledForDevice } from '../../../../scale';
+import { palette } from '../../../../theme/palette';
 export const validVariants = {
     squared: 'squared',
     rounded: 'rounded',
+    roundedOnTop: 'roundedOnTop',
     default: 'squared',
 };
 const buttonVariantStyles = (variant) => ({
-    ...(variant === 'rounded' && {
+    ...((variant === 'rounded' || variant === 'roundedOnTop') && {
         borderRadius: scaledForDevice(48, moderateScale),
         height: scaledForDevice(48, moderateScale),
     }),
@@ -27,6 +28,9 @@ export const buttonWrapperVariantStyles = (variant) => ({
     ...(variant === 'rounded' && {
         padding: scaledForDevice(16, moderateScale),
     }),
+    ...(variant === 'roundedOnTop' && {
+        padding: scaledForDevice(16, moderateScale),
+    }),
 });
 const validWidth = (width) => {
     if (typeof width === 'number' && !Number.isNaN(width)) {
@@ -43,7 +47,7 @@ export const parseButtonsStyles = (buttons, variant) => {
     }
     const currentVariant = validVariants[variant] || validVariants.default;
     const newButtons = [...buttons].slice(0, 3);
-    const areButtonsRounded = currentVariant === validVariants.rounded;
+    const areButtonsRounded = currentVariant === validVariants.rounded || currentVariant === validVariants.roundedOnTop;
     if (newButtons.length === 3 && areButtonsRounded) {
         const parsedButtons = newButtons.map((btn, idx) => {
             const { backgroundColor, pressedColor } = getBackgroundColor(btn);
@@ -73,17 +77,26 @@ export const parseButtonsStyles = (buttons, variant) => {
         return parsedButtons;
     }
     if (newButtons.length === 2 && areButtonsRounded) {
+        let isThereAnOnlyIconBtn = false;
         const parsedButtons = newButtons.map((btn, idx) => {
             const { backgroundColor, pressedColor } = getBackgroundColor(btn);
-            if (idx === 0 && btn.width === '100%') {
+            if (!isThereAnOnlyIconBtn) {
+                isThereAnOnlyIconBtn = !!btn.icon && !btn.value;
+            }
+            if (idx === 0) {
                 return {
                     ...btn,
                     pressedColor,
                     style: {
                         ...btn?.style,
                         backgroundColor,
-                        width: btn.width,
-                        marginBottom: scaledForDevice(10, moderateScale),
+                        width: isThereAnOnlyIconBtn
+                            ? 'auto'
+                            : currentVariant === 'roundedOnTop'
+                                ? '100%'
+                                : '58%',
+                        paddingHorizontal: scaledForDevice(24, moderateScale),
+                        marginBottom: scaledForDevice(currentVariant === 'roundedOnTop' ? 8 : 0, moderateScale),
                         ...buttonVariantStyles(currentVariant),
                     },
                 };
@@ -94,7 +107,7 @@ export const parseButtonsStyles = (buttons, variant) => {
                 style: {
                     ...btn?.style,
                     backgroundColor,
-                    width: validWidth(btn.width) ?? '49%',
+                    width: currentVariant === 'roundedOnTop' ? '100%' : isThereAnOnlyIconBtn ? '75%' : '40%',
                     ...buttonVariantStyles(currentVariant),
                 },
             };

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

@@ -0,0 +1,14 @@
+import { FC, ReactNode } from 'react';
+import { ViewProps } from 'react-native';
+export interface Block {
+    component: ReactNode;
+    hasSeparator?: boolean;
+}
+export interface MainCardListProps extends ViewProps {
+    displayId: string;
+    children?: ReactNode;
+    blocks?: Block[];
+    isSelected?: boolean;
+}
+declare const MainCardList: FC<MainCardListProps>;
+export default MainCardList;

package/dist/components/molecules/MainCardList/index.js

@@ -0,0 +1,60 @@
+import BaseCardList from '../../atoms/BaseCardList';
+import Text from '../../atoms/Text';
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { palette } from '../../../theme/palette';
+const MainCardList = ({ displayId, children, blocks, isSelected, style, ...props }) => {
+    if (!displayId || typeof displayId !== 'string') {
+        return null;
+    }
+    const styles = StyleSheet.create({
+        innerContainer: {},
+        blockContainer: {
+            marginTop: 12,
+            paddingTop: 12,
+        },
+        blockWithSeparator: {
+            borderTopWidth: 1,
+            borderTopColor: palette.white.main,
+        },
+        displayIdText: {
+            fontFamily: 'Roboto',
+            fontWeight: '700',
+            fontSize: 18,
+            color: palette.black.main,
+        },
+        selectedDisplayIdText: {
+            color: palette.primary.main,
+        },
+        childrenContainer: {
+            marginTop: 4,
+        },
+    });
+    const renderBlocks = () => {
+        if (!blocks || !Array.isArray(blocks) || !blocks.length) {
+            return null;
+        }
+        return blocks.map((block, idx) => {
+            const { component, hasSeparator = true } = block;
+            const activeBlockStyles = [
+                styles.blockContainer,
+                hasSeparator && styles.blockWithSeparator,
+            ].filter(Boolean);
+            return (<View key={idx} style={activeBlockStyles}>
+					{component}
+				</View>);
+        });
+    };
+    const activeDisplayIdStyles = [
+        styles.displayIdText,
+        isSelected && styles.selectedDisplayIdText,
+    ].filter(Boolean);
+    return (<BaseCardList isSelected={isSelected} style={style && style} {...props}>
+			<View>
+				<Text style={activeDisplayIdStyles}>{displayId}</Text>
+				{children && <View style={styles.childrenContainer}>{children}</View>}
+				<View>{renderBlocks()}</View>
+			</View>
+		</BaseCardList>);
+};
+export default MainCardList;

package/dist/components/{ProgressBar → molecules/ProgressBar}/index.js

@@ -1,9 +1,9 @@
 /* istanbul ignore file */
 import React, { useEffect, useRef } from 'react';
 import { View, StyleSheet, Animated, Easing } from 'react-native';
-import { palette } from '../../theme/palette';
+import { palette } from '../../../theme/palette';
 import { getBarColor, getPercentage } from './utils';
-import { moderateScale, scaledForDevice } from '../../scale';
+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;

package/dist/components/{ProgressBar → molecules/ProgressBar}/utils/index.js

@@ -1,4 +1,4 @@
-import { palette } from '../../../theme/palette';
+import { palette } from '../../../../theme/palette';
 const THRESHOLD = {
     warning: 25,
     alert: 50,

package/dist/components/{Select → molecules/Select}/Components/Dropdown/index.d.ts

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { DropdownMeasures } from '../..';
+import { DropdownMeasures } from '../../';
 export interface DropdownProps {
     show: boolean;
     setShow: (isShowed: boolean) => void;

package/dist/components/{Select → molecules/Select}/Components/Modal/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Modal as ModalComponent, StyleSheet, View } from 'react-native';
-import { base } from '../../../../theme/palette';
-import { moderateScale, scaledForDevice } from '../../../../scale';
+import { base } from '../../../../../theme/palette';
+import { moderateScale, scaledForDevice } from '../../../../../scale';
 import Button from '../../../Button';
 const Modal = ({ show, setShow, isMulti, modalAcceptText, children }) => {
     const validBottom = scaledForDevice(20, moderateScale);

package/dist/components/{Select → molecules/Select}/Components/Options/index.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { CustomOptionComponent, DropdownMeasures, Option, VariantOptions } from '../..';
+import { CustomOptionComponent, DropdownMeasures, Option, VariantOptions } from '../../';
 interface OptionsProps {
     variantOptions: VariantOptions;
     dropdownMeasures: DropdownMeasures;

package/dist/components/{Select → molecules/Select}/Components/Options/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, StyleSheet, TouchableOpacity, ScrollView, Text } from 'react-native';
-import { base, black, grey, primary, white } from '../../../../theme/palette';
+import { base, black, grey, primary, white } from '../../../../../theme/palette';
 import SwitcherComponent from '../SwitcherComponent';
 const Options = (props) => {
     const { variantOptions, dropdownMeasures, isShowedOptions, setIsShowedOptions, filteredOptions, callbackOption, selectedOptions, noOptionsMessage, optionStyles, customOptionComponent = null, isMulti, modalAcceptText, } = props;

package/dist/components/{Select → molecules/Select}/Components/SwitcherComponent/index.d.ts

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { DropdownMeasures, VariantOptions } from '../..';
+import { DropdownMeasures, VariantOptions } from '../../';
 interface SwitcherProps {
     show: boolean;
     isMulti: boolean;

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

@@ -1,11 +1,11 @@
 /* istanbul ignore file */
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { Keyboard, Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
-import { black, grey, primary } from '../../theme/palette';
+import { black, grey, primary } from '../../../theme/palette';
 import { formatPlaceholderMulti } from './utils';
 import Options from './Components/Options';
-import Icon from '../Icon';
-import { horizontalScale, moderateScale, scaledForDevice } from '../../scale';
+import Icon from '../../atoms/Icon';
+import { horizontalScale, moderateScale, scaledForDevice } from '../../../scale';
 var KeyboardTypes;
 (function (KeyboardTypes) {
     KeyboardTypes["Default"] = "default";

package/dist/components/{Select → molecules/Select}/utils/index.d.ts

@@ -1,2 +1,2 @@
-import { Option } from '..';
+import { Option } from '../';
 export declare const formatPlaceholderMulti: (options: Option[], optionsText: string | null) => string;

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

@@ -0,0 +1,11 @@
+import { FC, Ref } from 'react';
+import { SwipeUpProps } from '../../atoms/SwipeUp';
+import { ButtonProps } from '../Button';
+import BottomSheet, { BottomSheetProps } from '@gorhom/bottom-sheet';
+export interface SwipeListProps extends SwipeUpProps, BottomSheetProps {
+    ref?: Ref<BottomSheet>;
+    renderHeader?: () => void;
+    actions?: ButtonProps[];
+}
+declare const SwipeList: FC<SwipeListProps>;
+export default SwipeList;

package/dist/components/molecules/SwipeList/index.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import SwipeUp from '../../atoms/SwipeUp';
+import Button from '../Button';
+import { SwipeUpScrollView } from '../../atoms/SwipeUp/childComponents';
+import { StyleSheet, View } from 'react-native';
+import { verticalScale } from '../../../scale';
+const styles = StyleSheet.create({
+    footerContainer: {
+        padding: verticalScale(17),
+    },
+});
+const SwipeList = React.forwardRef(({ renderHeader = () => { }, actions = [], children, ...props }, ref) => {
+    if (!children) {
+        return null;
+    }
+    const isRenderHeaderValid = typeof renderHeader === 'function';
+    const areThereValidActions = Array.isArray(actions) && actions.length > 0;
+    const renderActions = () => {
+        if (!areThereValidActions) {
+            return null;
+        }
+        return (<View style={styles.footerContainer}>
+					{actions?.map((action, idx) => (<Button key={idx} {...action}/>))}
+				</View>);
+    };
+    return (<SwipeUp ref={ref} footerComponent={renderActions} {...props}>
+				{isRenderHeaderValid && renderHeader()}
+				<SwipeUpScrollView>{children}</SwipeUpScrollView>
+			</SwipeUp>);
+});
+export default SwipeList;

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

@@ -0,0 +1,23 @@
+import { FC, ReactNode } from 'react';
+import { ViewStyle } from 'react-native';
+interface Scene {
+    title: string;
+    scene: ReactNode;
+    disabled?: boolean;
+}
+export declare const positions: {
+    top: string;
+    bottom: string;
+};
+export type positionsType = typeof positions;
+export type keyPosition = keyof positionsType;
+interface TabsProps {
+    scenes: Scene[];
+    initialTab?: number | null;
+    position?: keyPosition;
+    onPressTabCb?: (activeTab: number) => void;
+    scrollContentStyle?: ViewStyle;
+    style?: ViewStyle;
+}
+declare const Tabs: FC<TabsProps>;
+export default Tabs;

package/dist/components/molecules/Tabs/index.js

@@ -0,0 +1,112 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import React, { useEffect, useRef, useState } from 'react';
+import { StyleSheet, View, ScrollView, FlatList } from 'react-native';
+import { moderateScale, scaledForDevice, viewportWidth } from '../../../scale';
+import { base, black, grey, primary } from '../../../theme/palette';
+import BaseButton from '../../atoms/BaseButton';
+import Text from '../../atoms/Text';
+import { isObject } from '../../../utils';
+export const positions = {
+    top: 'top',
+    bottom: 'bottom',
+};
+const Tabs = ({ scenes, initialTab = null, position = positions.top, onPressTabCb = () => { }, scrollContentStyle = {}, style = {}, ...props }) => {
+    if (!scenes || !Array.isArray(scenes) || !scenes.length) {
+        return null;
+    }
+    const [activeTab, setActiveTab] = useState(0);
+    const scrollViewRef = useRef(null);
+    const validScenes = scenes.filter(({ scene, title }) => scene && title);
+    const areScenesValid = !!validScenes && Array.isArray(validScenes) && !!validScenes.length;
+    const isValidCurrentScene = !!validScenes[activeTab] &&
+        isObject(validScenes[activeTab]) &&
+        !!Object.keys(validScenes[activeTab]).length;
+    const contentDirection = position === positions.bottom ? 'column-reverse' : 'column';
+    const quantityScenes = scenes?.length;
+    const isScrollViewTab = quantityScenes && quantityScenes > 3;
+    const calculateTabs = isScrollViewTab ? { width: viewportWidth / 3 } : { flex: 1 };
+    const contentMargin = position === positions.bottom ? { marginBottom: 45 } : { marginTop: 45 };
+    const styles = StyleSheet.create({
+        wrapper: {
+            flex: 1,
+            position: 'relative',
+            flexDirection: contentDirection,
+        },
+        wrapperTab: {
+            position: 'absolute',
+            width: '100%',
+            height: scaledForDevice(48, moderateScale),
+            flexDirection: 'row',
+            backgroundColor: base.white,
+            zIndex: 1,
+            elevation: scaledForDevice(5, moderateScale),
+        },
+        tabButton: {
+            ...calculateTabs,
+            justifyContent: 'center',
+            alignItems: 'center',
+            borderBottomWidth: scaledForDevice(2, moderateScale),
+        },
+        title: {
+            textTransform: 'uppercase',
+            fontFamily: 'Roboto-Medium',
+        },
+        content: {
+            ...contentMargin,
+        },
+    });
+    useEffect(() => {
+        if (typeof initialTab === 'number') {
+            setActiveTab(initialTab);
+        }
+    }, [initialTab]);
+    useEffect(() => {
+        if (isScrollViewTab) {
+            scrollViewRef?.current?.scrollToIndex({
+                index: activeTab,
+                animated: true,
+            });
+        }
+    }, [activeTab, isScrollViewTab]);
+    const getItemLayout = (data, index) => ({
+        length: viewportWidth / 3,
+        offset: (viewportWidth / 3) * index,
+        index,
+    });
+    const handleScrollToIndexFailed = (info) => {
+        setTimeout(() => {
+            scrollViewRef?.current?.scrollToIndex({
+                index: info.index,
+                animated: true,
+            });
+        }, 300);
+    };
+    const TitleTab = ({ title, disabled, index }) => {
+        const borderBottomColor = index === activeTab ? primary.main : base.white;
+        const inactiveText = disabled ? grey[400] : black.main;
+        const textColor = index === activeTab ? primary.main : inactiveText;
+        const handleOnPress = (idx) => {
+            setActiveTab(idx);
+            return onPressTabCb(idx);
+        };
+        return (<BaseButton key={title + index} style={{ ...styles.tabButton, borderBottomColor }} disabled={disabled} onPress={() => handleOnPress(index)}>
+				<Text style={{ ...styles.title, color: textColor }} selectable={false} numberOfLines={1}>
+					{title}
+				</Text>
+			</BaseButton>);
+    };
+    const renderItem = ({ item, index }) => (<TitleTab title={item.title} disabled={item.disabled} index={index}/>);
+    return (<View style={[styles.wrapper, style]} {...props}>
+			{!isScrollViewTab && (<View style={styles.wrapperTab}>
+					{areScenesValid &&
+                validScenes.map((scene, idx) => (<TitleTab key={scene.title} title={scene.title} disabled={scene.disabled} index={idx}/>))}
+				</View>)}
+
+			{isScrollViewTab && (<FlatList style={styles.wrapperTab} data={scenes} renderItem={renderItem} ref={scrollViewRef} horizontal pagingEnabled={true} showsHorizontalScrollIndicator={false} keyExtractor={(item, index) => item.title + index} getItemLayout={getItemLayout} onScrollToIndexFailed={handleScrollToIndexFailed} initialNumToRender={quantityScenes}/>)}
+
+			{isValidCurrentScene && (<ScrollView contentContainerStyle={scrollContentStyle} style={styles.content}>
+					{validScenes[activeTab].scene}
+				</ScrollView>)}
+		</View>);
+};
+export default Tabs;

package/dist/components/{Toast → molecules/Toast}/index.d.ts

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { TextStyle } from 'react-native';
-import { BaseToastProps } from '../BaseToast';
+import { BaseToastProps } from '../../atoms/BaseToast';
 export interface ToastProps extends BaseToastProps {
     props?: {
         showIcon?: boolean;

package/dist/components/{Toast → molecules/Toast}/index.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import { TouchableOpacity, View } from 'react-native';
 import { StyleSheet } from 'react-native';
-import { moderateScale, scaledForDevice } from '../../scale';
+import { moderateScale, scaledForDevice } from '../../../scale';
 import { defaultIcon } from './utils';
-import { base, black } from '../../theme/palette';
-import BaseToast from '../BaseToast';
+import { base, black } from '../../../theme/palette';
+import BaseToast from '../../atoms/BaseToast';
 import ToastAction from 'react-native-toast-message';
-import Text from '../Text';
-import Icon from '../Icon';
+import Text from '../../atoms/Text';
+import Icon from '../../atoms/Icon';
 const Toast = ({ type, text1, text2, style, props }) => {
     const validType = type && typeof type === 'string';
     const validTitle = text1 && typeof text1 === 'string';

package/dist/components/{Toast → molecules/Toast}/utils/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Toast from '..';
+import Toast from '../';
 export const configToast = {
     success: (props) => <Toast {...props}/>,
     notice: (props) => <Toast {...props}/>,

package/dist/components/{FullScreenMessage → organisms/FullScreenMessage}/index.js

@@ -1,9 +1,9 @@
 import React, { useEffect } from 'react';
 import { Modal, StyleSheet, View } from 'react-native';
-import { moderateScale, scaledForDevice } from '../../scale';
-import { base, primary } from '../../theme/palette';
-import Icon from '../Icon';
-import Text from '../Text';
+import { moderateScale, scaledForDevice } from '../../../scale';
+import { base, primary } from '../../../theme/palette';
+import Icon from '../../atoms/Icon';
+import Text from '../../atoms/Text';
 export var animationTypes;
 (function (animationTypes) {
     animationTypes["Slide"] = "slide";

package/dist/components/{LoadingFullScreen → organisms/LoadingFullScreen}/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ModalProps, ViewStyle } from 'react-native';
-import { Names } from '../../ts/interfaces/svgs';
+import { Names } from '../../../ts/interfaces/svgs';
 interface ILoadingFullScreen extends ModalProps {
     isLoading: boolean;
     text?: string;

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

@@ -1,9 +1,9 @@
 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';
-import { moderateScale, horizontalScale, scaledForDevice } from '../../scale';
+import Loading from '../../atoms/Loading';
+import Svg from '../../atoms/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);

package/dist/components/organisms/SwipeItemSelectionList/index.d.ts

@@ -0,0 +1,14 @@
+import React, { Ref } from 'react';
+import { SwipeListProps } from '../../molecules/SwipeList';
+import BottomSheet from '@gorhom/bottom-sheet';
+interface SwipeItemSelectionListProps extends Partial<SwipeListProps> {
+    ref?: Ref<BottomSheet>;
+    data: any[];
+    radioButton?: boolean;
+    multiselect?: boolean;
+    leftSelection?: boolean;
+    rightSelection?: boolean;
+    onSelection?: (id: string) => {};
+}
+declare const SwipeItemSelectionList: React.FC<SwipeItemSelectionListProps>;
+export default SwipeItemSelectionList;

package/dist/components/organisms/SwipeItemSelectionList/index.js

@@ -0,0 +1,37 @@
+import React, { useState } from 'react';
+import SwipeList from '../../molecules/SwipeList';
+import ItemSelectionButton from '../../molecules/ItemSelectionButton';
+const SwipeItemSelectionList = React.forwardRef(({ data, radioButton = false, multiselect = false, leftSelection = false, rightSelection = false, onSelection = () => { }, ...props }, ref) => {
+    const [selectedElementId, setSelectedElementId] = useState('');
+    const [selectedElementsIds, setSelectedElementsIds] = useState([]);
+    if (!data || !data.length) {
+        return null;
+    }
+    const checkIfElementIsSelected = (id, isElementSelected) => {
+        if (isElementSelected) {
+            return multiselect
+                ? setSelectedElementsIds((prevState) => prevState.filter((includedId) => includedId !== id)
+                // eslint-disable-next-line no-mixed-spaces-and-tabs
+                )
+                : setSelectedElementId('');
+        }
+        return multiselect
+            ? setSelectedElementsIds((prevState) => [...prevState, id])
+            : setSelectedElementId(id);
+    };
+    const renderItem = (element) => {
+        const { id, name } = element;
+        const isElementSelected = multiselect
+            ? selectedElementsIds.includes(id)
+            : selectedElementId === id;
+        const onSelectElement = () => {
+            checkIfElementIsSelected(id, isElementSelected);
+            return onSelection(id);
+        };
+        return (<ItemSelectionButton radioButton={radioButton} leftSelection={leftSelection} rightSelection={rightSelection} selected={isElementSelected} onSelection={onSelectElement} name={name}/>);
+    };
+    return (<SwipeList ref={ref} {...props}>
+				{data.map((element) => renderItem(element))}
+			</SwipeList>);
+});
+export default SwipeItemSelectionList;

package/dist/index.d.ts

@@ -1,26 +1,30 @@
-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 Icon from './components/Icon';
-import Select from './components/Select';
-import { palette } from './theme/palette';
-import RadioButton from './components/RadioButton';
-import SwipeUp from './components/SwipeUp';
-import { SwipeUpFlatList, SwipeUpScrollView, SwipeUpView } from './components/SwipeUp/childComponents';
-import Carousel from './components/Carousel';
-import ProgressBar from './components/ProgressBar';
-import List from './components/List';
-import BaseButton from './components/BaseButton';
-import Button from './components/Button/index';
-import FullScreenMessage from './components/FullScreenMessage';
-import LayoutWithBottomButtons from './components/LayoutWithBottomButtons';
+import BaseButton from './components/atoms/BaseButton';
+import CheckBox from './components/atoms/CheckBox';
+import Icon from './components/atoms/Icon';
+import Image from './components/atoms/Image';
+import Input from './components/atoms/Input';
+import List from './components/atoms/List';
+import Loading from './components/atoms/Loading';
+import RadioButton from './components/atoms/RadioButton';
+import StatusChip from './components/atoms/StatusChip';
+import Svg from './components/atoms/Svg';
+import SwipeUp from './components/atoms/SwipeUp';
+import { SwipeUpFlatList, SwipeUpScrollView, SwipeUpView } from './components/atoms/SwipeUp/childComponents';
+import Text from './components/atoms/Text';
+import Avatar from './components/molecules/Avatar';
+import Button from './components/molecules/Button';
+import Carousel from './components/molecules/Carousel';
+import LayoutWithBottomButtons from './components/molecules/LayoutWithBottomButtons';
+import ProgressBar from './components/molecules/ProgressBar';
+import Select from './components/molecules/Select';
 import Toast from 'react-native-toast-message';
-import { configToast } from './components/Toast/utils';
+import { configToast } from './components/molecules/Toast/utils';
+import SwipeList from './components/molecules/SwipeList';
+import ItemSelectionButton from './components/molecules/ItemSelectionButton';
+import MainCardList from './components/molecules/MainCardList';
+import LoadingFullScreen from './components/organisms/LoadingFullScreen';
+import FullScreenMessage from './components/organisms/FullScreenMessage';
+import SwipeItemSelectionList from './components/organisms/SwipeItemSelectionList';
+import { palette } from './theme/palette';
 import * as getScale from './scale';
-export { Text, Avatar, CheckBox, Icon, Image, Loading, Svg, StatusChip, Input, palette, LoadingFullScreen, RadioButton, Select, SwipeUp, SwipeUpFlatList, SwipeUpScrollView, SwipeUpView, Carousel, ProgressBar, List, BaseButton, Button, getScale, LayoutWithBottomButtons, FullScreenMessage, Toast, configToast, };
+export { Text, Avatar, CheckBox, Icon, Image, Loading, Svg, StatusChip, Input, palette, LoadingFullScreen, RadioButton, Select, SwipeUp, SwipeUpFlatList, SwipeUpScrollView, SwipeUpView, Carousel, ProgressBar, List, BaseButton, Button, getScale, LayoutWithBottomButtons, FullScreenMessage, Toast, configToast, SwipeList, ItemSelectionButton, SwipeItemSelectionList, MainCardList, };