ncore-ui-kit 1.0.0-alpha.0

package/lib/src/components/selectSheet/index.js

@@ -0,0 +1,179 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TouchableOpacity, View } from "react-native";
+import {} from "./type";
+import stylesheet, { useStyles } from "./stylesheet";
+import { NCoreUIKitLocalize, NCoreUIKitTheme } from "../../core/hooks";
+import { CheckIcon } from "lucide-react-native";
+import BottomSheet from "../bottomSheet";
+import TextInput from "../textInput";
+import Loading from "../loading";
+import Button from "../button";
+import Text from "../text";
+import CheckBox from "../checkBox";
+function SelectSheet({ LoadingIconComponentProp, isWorkWithRealtime, isShowTools = true, mainSelectedItems, moreLoadThreshold, isMultipleSelect, setIsMoreLoading, renderOptionIcon, bottomSheetProps, bottomSheetRef, customLocalize, setSearchText, isMoreLoading, selectBoxKey, setIsLoading, selectObject, keyExtractor, searchedData, isSearchable, customTheme, setIsActive, onMoreLoad, renderItem, searchText, maxChoice, minChoice, isLoading, selectAll, customKey, cleanAll, isActive, cancel, title, data, ok }) {
+    const { radiuses, colors, spaces } = NCoreUIKitTheme.useContext(customTheme);
+    const { localize } = NCoreUIKitLocalize.useContext(customLocalize);
+    const { moreLoadingContainer: moreLoadingContainerDynamicStyle, checkIconContainer: checkIconContainerDynamicStyle, loadingContainer: loadingContainerDynamicStyle, contentContainer: contentContainerDynamicStyle, headerContainer: headerContainerDynamicStyle, bottomContainer: bottomContainerDynamicStyle, toolsContainer: toolsContainerDynamicStyle, itemContainer: itemContainerDynamicStyle, cancelButton: cancelButtonDynamicStyle, headerTitle: headerTitleDynamicStyle, okButton: okButtonDynamicStyle } = useStyles({
+        isSearchable,
+        radiuses,
+        spaces,
+        colors
+    });
+    const renderBottomSheetContent = () => {
+        if (isLoading) {
+            return _jsx(View, { style: [
+                    stylesheet.loadingContainer,
+                    loadingContainerDynamicStyle
+                ], children: LoadingIconComponentProp ? _jsx(LoadingIconComponentProp, { color: "emphasized", size: 20 }) : _jsx(Loading, {}) });
+        }
+        const currentData = searchText && searchText.length ? searchedData : data;
+        return _jsxs(View, { style: [
+                contentContainerDynamicStyle
+            ], children: [currentData.map((item, index) => {
+                    const isSelected = mainSelectedItems.findIndex((sI) => {
+                        return sI.__key === item.__key;
+                    }) !== -1;
+                    if (renderItem) {
+                        return renderItem({
+                            key: keyExtractor(item, index),
+                            onSelect: (sItem) => {
+                                selectObject(sItem);
+                            },
+                            selectedItems: mainSelectedItems,
+                            setIsMoreLoading,
+                            setIsLoading,
+                            isSelected,
+                            searchText,
+                            index,
+                            item,
+                            data
+                        });
+                    }
+                    let isDisabled = false;
+                    if (isMultipleSelect && !isSelected && maxChoice !== -1) {
+                        if (!maxChoice) {
+                            throw new Error("If you want to use the \"isMultipleSelect\" prop, you must be provide \"maxChoice\" prop.");
+                        }
+                        if (mainSelectedItems.length >= maxChoice) {
+                            isDisabled = true;
+                        }
+                    }
+                    return _jsxs(TouchableOpacity, { disabled: isDisabled, style: [
+                            stylesheet.itemContainer,
+                            itemContainerDynamicStyle,
+                            {
+                                marginTop: index === 0 ? 0 : spaces.spacingSm,
+                                position: "relative"
+                            }
+                        ], onPress: () => {
+                            if (isDisabled) {
+                                return;
+                            }
+                            selectObject(item);
+                        }, children: [_jsxs(View, { style: [
+                                    stylesheet.itemContentContainer,
+                                    {
+                                        zIndex: 99999
+                                    }
+                                ], children: [renderOptionIcon ? renderOptionIcon({
+                                        item,
+                                        index
+                                    }) : null, _jsx(Text, { color: isSelected ? "emphasized" : undefined, children: item.__title })] }), _jsx(View, { style: [
+                                    stylesheet.checkIconContainer,
+                                    checkIconContainerDynamicStyle
+                                ], children: isSelected ?
+                                    _jsx(CheckIcon, { color: colors.content.icon.emphasized, size: 24 }) : null }), isDisabled ? _jsx(View, { style: [
+                                    {
+                                        backgroundColor: colors.system.disabled.content,
+                                        borderRadius: radiuses.actions,
+                                        position: "absolute",
+                                        zIndex: 99998,
+                                        bottom: 0,
+                                        right: 0,
+                                        left: 0,
+                                        top: 0
+                                    }
+                                ] }) : null] }, keyExtractor(item, index));
+                }), renderMoreLoading()] });
+    };
+    const renderBottomSheetSearchInput = () => {
+        if (!isSearchable) {
+            return null;
+        }
+        return _jsx(TextInput, { placeholder: localize("search"), spreadBehaviour: "stretch", onChangeText: (text) => {
+                setSearchText(text);
+            } }, `${selectBoxKey}-searchInput`);
+    };
+    const renderTools = () => {
+        if (!isShowTools) {
+            return null;
+        }
+        if (!isMultipleSelect) {
+            return null;
+        }
+        if (minChoice && maxChoice !== -1) {
+            return null;
+        }
+        return _jsxs(View, { style: [
+                stylesheet.toolsContainer,
+                toolsContainerDynamicStyle
+            ], children: [!minChoice ? _jsx(CheckBox, { isChecked: mainSelectedItems.length === 0 ? "checked" : null, title: localize("clean-all"), spreadBehaviour: "free", onPress: () => {
+                        cleanAll();
+                    } }) : null, maxChoice === -1 ? _jsx(CheckBox, { isChecked: data.length === mainSelectedItems.length ? "checked" : mainSelectedItems.length ? "partially" : null, title: localize("select-all"), spreadBehaviour: "free", isFlip: !minChoice, onPress: () => {
+                        selectAll();
+                    } }) : null] });
+    };
+    const renderBottomSheetHeader = () => {
+        return _jsxs(View, { style: [
+                stylesheet.headerContainer,
+                headerContainerDynamicStyle
+            ], children: [_jsx(Text, { variant: "titleMediumSize", style: [
+                        headerTitleDynamicStyle
+                    ], children: title }), renderBottomSheetSearchInput(), renderTools()] });
+    };
+    const renderBottomSheetBottom = () => {
+        if (isWorkWithRealtime) {
+            return null;
+        }
+        return _jsxs(View, { style: [
+                stylesheet.bottomContainer,
+                bottomContainerDynamicStyle
+            ], children: [_jsx(Button, { title: localize("cancel"), spreadBehaviour: "stretch", variant: "outline", type: "neutral", onPress: () => {
+                        cancel();
+                    }, style: {
+                        ...cancelButtonDynamicStyle
+                    } }), _jsx(Button, { spreadBehaviour: "stretch", title: localize("ok"), onPress: () => {
+                        ok();
+                    }, style: {
+                        ...okButtonDynamicStyle
+                    } })] });
+    };
+    const renderMoreLoading = () => {
+        if (!isMoreLoading) {
+            return null;
+        }
+        return _jsx(View, { style: [
+                stylesheet.moreLoadingContainer,
+                moreLoadingContainerDynamicStyle
+            ], children: _jsx(Loading, {}) });
+    };
+    return _createElement(BottomSheet, { ...bottomSheetProps, key: customKey ? customKey : `${selectBoxKey}-bottomsheet`, scrollEndThreshold: moreLoadThreshold, customKey: selectBoxKey, ref: bottomSheetRef, isAutoHeight: true, isActive: isActive, onScrollEnd: () => {
+            if (onMoreLoad)
+                onMoreLoad({
+                    selectedItems: mainSelectedItems,
+                    setIsMoreLoading,
+                    setIsLoading,
+                    searchText,
+                    data
+                });
+        }, renderBottom: () => {
+            return renderBottomSheetBottom();
+        }, renderHeader: () => {
+            return renderBottomSheetHeader();
+        }, onClosed: () => {
+            setIsActive(false);
+        } }, renderBottomSheetContent());
+}
+;
+export default SelectSheet;

package/lib/src/components/selectSheet/stylesheet.js

@@ -0,0 +1,83 @@
+import { StyleSheet } from "react-native";
+import {} from "./type";
+const stylesheet = StyleSheet.create({
+    headerContainer: {
+        flexDirection: "column",
+        width: "100%"
+    },
+    bottomContainer: {
+        flexDirection: "row",
+        alignItems: "center"
+    },
+    loadingContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        flex: 1
+    },
+    itemContainer: {
+        flexDirection: "row",
+        alignItems: "center"
+    },
+    itemContentContainer: {
+        flex: 1
+    },
+    checkIconContainer: {
+        justifyContent: "center",
+        alignItems: "center"
+    },
+    toolsContainer: {
+        justifyContent: "space-between",
+        flexDirection: "row",
+        alignItems: "center"
+    },
+    moreLoadingContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        width: "100%"
+    }
+});
+export const useStyles = ({ isSearchable, radiuses, spaces, colors }) => {
+    const styles = {
+        contentContainer: {
+            paddingVertical: spaces.spacingSm
+        },
+        headerContainer: {
+            marginBottom: spaces.spacingSm
+        },
+        headerTitle: {},
+        bottomContainer: {
+            marginTop: spaces.spacingSm,
+            padding: spaces.spacingSm
+        },
+        cancelButton: {
+            marginRight: spaces.spacingSm
+        },
+        okButton: {
+            marginLeft: spaces.spacingSm
+        },
+        itemContainer: {
+            backgroundColor: colors.content.container.mid,
+            paddingHorizontal: spaces.spacingMd,
+            paddingVertical: spaces.spacingSm,
+            borderRadius: radiuses.form
+        },
+        checkIconContainer: {
+            height: 24 + spaces.spacingSm,
+            width: 24 + spaces.spacingSm
+        },
+        loadingContainer: {
+            padding: spaces.spacingMd
+        },
+        toolsContainer: {
+            marginTop: spaces.spacingSm
+        },
+        moreLoadingContainer: {
+            padding: spaces.spacingSm
+        }
+    };
+    if (isSearchable) {
+        styles.headerTitle.marginBottom = spaces.spacingSm;
+    }
+    return styles;
+};
+export default stylesheet;

package/lib/src/components/selectSheet/type.js

@@ -0,0 +1,2 @@
+import {} from "../../types";
+;

package/lib/src/components/seperator/index.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import {} from "react";
+import { View } from "react-native";
+import stylesheet, { useStyles } from "./stylesheet";
+import { NCoreUIKitLocalize, NCoreUIKitTheme } from "../../core/hooks";
+import Text from "../text";
+const Seperator = ({ direction = "horizontal", isShowTitle, customColor, length, title, style, color, ...props }) => {
+    const { borders, colors, spaces } = NCoreUIKitTheme.useContext();
+    const { localize } = NCoreUIKitLocalize.useContext();
+    const { container: containerDynamicStyle, indicator: indicatorDynamicStyle, title: titleDynamicStyle } = useStyles({
+        customColor,
+        direction,
+        borders,
+        length,
+        colors,
+        spaces,
+        color
+    });
+    const renderIndicator = (order) => {
+        if (order === "first") {
+            if (isShowTitle) {
+                return _jsx(View, { style: [
+                        stylesheet.indicator,
+                        indicatorDynamicStyle
+                    ] });
+            }
+            else {
+                return null;
+            }
+        }
+        return _jsx(View, { style: [
+                stylesheet.indicator,
+                indicatorDynamicStyle
+            ] });
+    };
+    const renderTitle = () => {
+        if (!isShowTitle) {
+            return null;
+        }
+        return _jsx(Text, { style: {
+                ...stylesheet.title,
+                ...titleDynamicStyle
+            }, children: title ? title : localize("or") });
+    };
+    return _jsxs(View, { ...props, style: [
+            style,
+            stylesheet.container,
+            containerDynamicStyle
+        ], children: [renderIndicator("first"), renderTitle(), renderIndicator("last")] });
+};
+export default Seperator;

package/lib/src/components/seperator/stylesheet.js

@@ -0,0 +1,45 @@
+import { StyleSheet } from "react-native";
+const stylesheet = StyleSheet.create({
+    container: {
+        justifyContent: "center",
+        alignItems: "center",
+        display: "flex"
+    },
+    indicator: {
+        flex: 1
+    },
+    title: {}
+});
+export const useStyles = ({ customColor, direction, borders, length, colors, spaces, color }) => {
+    const styles = {
+        container: {},
+        indicator: {
+            backgroundColor: customColor ? customColor : color ? colors.content.border[color] : colors.content.border.subtle
+        },
+        title: {
+            marginHorizontal: spaces.spacingSm
+        }
+    };
+    if (direction === "horizontal") {
+        styles.container.flexDirection = "row";
+        styles.container.width = "90%";
+        styles.indicator.height = borders.seperator;
+        styles.indicator.width = "100%";
+    }
+    else {
+        styles.container.flexDirection = "column";
+        styles.container.height = "90%";
+        styles.indicator.width = borders.seperator;
+        styles.indicator.height = "100%";
+    }
+    if (length !== undefined) {
+        if (direction === "horizontal") {
+            styles.container.width = length;
+        }
+        else {
+            styles.container.height = length;
+        }
+    }
+    return styles;
+};
+export default stylesheet;

package/lib/src/components/seperator/type.js

@@ -0,0 +1 @@
+import {} from "react-native-svg";

package/lib/src/components/siteLogo/index.js

@@ -0,0 +1,122 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { TouchableOpacity, Image, View } from "react-native";
+import stylesheet, { getSiteLogoSize, useStyles } from "./stylesheet";
+import { NCoreUIKitLocalize, NCoreUIKitTheme } from "../../core/hooks";
+import { Home as HomeIcon } from "lucide-react-native";
+import Loading from "../loading";
+import Text from "../text";
+const SiteLogo = ({ logoBackgroundColor = "default", isWorkWithFlex1 = true, isShowBorder = false, subTitleCustomColor, isCustomImageSize, isShowIcon = true, isWorkWithAction, titleCustomColor, image: ImageProp, backgroundColor, subTitleVariant, customLocalize, icon: IconProp, size = "large", subTitleStyle, subTitleColor, titleVariant, imageSource, customTheme, borderColor, subTitleKey, titleStyle, imageSpace, isDisabled, titleColor, imageProps, isLoading, iconColor, titleKey, imageUrl, subTitle, onPress, title, style }) => {
+    const { borders, colors, spaces } = NCoreUIKitTheme.useContext(customTheme);
+    const { localize } = NCoreUIKitLocalize.useContext(customLocalize);
+    const currentSize = getSiteLogoSize({
+        spaces,
+        size
+    });
+    const [imageLoadError, setImageLoadError] = useState(false);
+    const { contentContainer: contentContainerDynamicStyle, titlesContainer: titlesContainerDynamicStyle, container: containerDynamicStyle, image: imageDynamicStyle, icon: iconDynamicStyle } = useStyles({
+        logoBackgroundColor,
+        isCustomImageSize,
+        image: ImageProp,
+        isWorkWithFlex1,
+        backgroundColor,
+        isShowBorder,
+        borderColor,
+        currentSize,
+        isDisabled,
+        imageSpace,
+        isLoading,
+        imageUrl,
+        borders,
+        colors,
+        spaces
+    });
+    const renderIcon = () => {
+        if (IconProp) {
+            return _jsx(IconProp, { size: currentSize.iconSize, customColor: iconColor, color: "default", style: {
+                    ...iconDynamicStyle
+                } });
+        }
+        return _jsx(HomeIcon, { color: iconColor ? iconColor : colors.content.icon.default, size: currentSize.iconSize, style: {
+                ...iconDynamicStyle
+            } });
+    };
+    const renderLoading = () => {
+        let loadingColor = "default";
+        if (title || titleKey) {
+            loadingColor = "onPrimary";
+        }
+        else if (imageUrl || ImageProp) {
+            loadingColor = "mid";
+        }
+        return _jsx(Loading, { color: loadingColor });
+    };
+    const renderContent = () => {
+        if (isLoading) {
+            return renderLoading();
+        }
+        if (IconProp) {
+            return renderIcon();
+        }
+        if (!ImageProp && !imageUrl) {
+            return renderIcon();
+        }
+        if ((imageUrl || ImageProp) && imageLoadError) {
+            return renderIcon();
+        }
+        if (ImageProp) {
+            return _jsx(ImageProp, { ...imageProps, onError: () => setImageLoadError(true), height: currentSize.size, width: currentSize.size, style: [
+                    stylesheet.image,
+                    imageDynamicStyle,
+                    imageProps?.style
+                ] });
+        }
+        if (imageUrl) {
+            return _jsx(Image, { ...imageProps, onError: () => setImageLoadError(true), height: currentSize.size, width: currentSize.size, source: {
+                    uri: imageUrl,
+                    ...imageSource
+                }, style: [
+                    stylesheet.image,
+                    imageDynamicStyle,
+                    imageProps?.style
+                ] });
+        }
+        return null;
+    };
+    const renderTitles = () => {
+        if (!title && !titleKey) {
+            return null;
+        }
+        return _jsxs(View, { style: [
+                stylesheet.titlesContainer,
+                titlesContainerDynamicStyle
+            ], children: [_jsx(Text, { customColor: titleCustomColor ? colors.project[titleCustomColor] : undefined, variant: titleVariant ? titleVariant : currentSize.titleSize, color: titleColor ? titleColor : "high", ellipsizeMode: "tail", numberOfLines: 1, style: {
+                        width: "100%",
+                        ...titleStyle
+                    }, children: titleKey ? localize(titleKey) : title }), subTitle || subTitleKey ?
+                    _jsx(Text, { customColor: subTitleCustomColor ? colors.project[subTitleCustomColor] : undefined, variant: subTitleVariant ? subTitleVariant : currentSize.subTitleSize, color: subTitleColor ? subTitleColor : "low", ellipsizeMode: "tail", numberOfLines: 1, style: {
+                            width: "100%",
+                            ...subTitleStyle
+                        }, children: subTitleKey ? subTitleKey : subTitle })
+                    :
+                        null] });
+    };
+    const renderContentContainer = () => {
+        if (!isShowIcon) {
+            return null;
+        }
+        return _jsx(View, { style: [
+                stylesheet.contentContainer,
+                contentContainerDynamicStyle
+            ], children: renderContent() });
+    };
+    return _jsxs(TouchableOpacity, { disabled: !isWorkWithAction || isDisabled || isLoading, onPress: !isWorkWithAction || isDisabled || isLoading ? undefined : () => {
+            if (onPress)
+                onPress();
+        }, style: [
+            style,
+            stylesheet.container,
+            containerDynamicStyle
+        ], children: [renderContentContainer(), renderTitles()] });
+};
+export default SiteLogo;

package/lib/src/components/siteLogo/stylesheet.js

@@ -0,0 +1,139 @@
+import { StyleSheet } from "react-native";
+export const SITE_LOGO_SIZES = {
+    xxSmall: {
+        subTitleSize: "labelSmallSize",
+        titleSize: "labelSmallSize",
+        iconSize: 18,
+        size: 32
+    },
+    xSmall: {
+        subTitleSize: "labelSmallSize",
+        titleSize: "labelMediumSize",
+        iconSize: 22,
+        size: 40
+    },
+    small: {
+        subTitleSize: "labelMediumSize",
+        titleSize: "labelLargeSize",
+        iconSize: 26,
+        size: 48
+    },
+    medium: {
+        subTitleSize: "labelLargeSize",
+        titleSize: "bodyLargeSize",
+        iconSize: 32,
+        size: 64
+    },
+    large: {
+        titleSize: "headlineSmallSize",
+        subTitleSize: "bodyLargeSize",
+        iconSize: 40,
+        size: 80
+    },
+    xLarge: {
+        subTitleSize: "headlineSmallSize",
+        titleSize: "headlineMediumSize",
+        iconSize: 60,
+        size: 120
+    },
+    xxLarge: {
+        subTitleSize: "headlineMediumSize",
+        titleSize: "displaySmallSize",
+        iconSize: 76,
+        size: 150
+    },
+    xxxLarge: {
+        subTitleSize: "displaySmallSize",
+        titleSize: "displayMediumSize",
+        iconSize: 96,
+        size: 180
+    }
+};
+export const getSiteLogoSize = ({ size }) => {
+    const currentSize = SITE_LOGO_SIZES[size];
+    return {
+        subTitleSize: currentSize.subTitleSize,
+        titleSize: currentSize.titleSize,
+        iconSize: currentSize.iconSize,
+        size: currentSize.size
+    };
+};
+const stylesheet = StyleSheet.create({
+    container: {
+        justifyContent: "center",
+        flexDirection: "row",
+        alignItems: "center",
+        position: "relative",
+        overflow: "visible",
+        display: "flex"
+    },
+    image: {
+        objectFit: "cover"
+    },
+    icon: {},
+    contentContainer: {
+        justifyContent: "center",
+        flexDirection: "row",
+        alignItems: "center",
+        position: "relative",
+        overflow: "visible",
+        display: "flex"
+    },
+    titlesContainer: {
+        justifyContent: "center",
+        flexDirection: "column",
+        display: "flex",
+        minWidth: 0,
+        flex: 1
+    }
+});
+export const useStyles = ({ logoBackgroundColor, isCustomImageSize, isWorkWithFlex1, backgroundColor, isShowBorder, borderColor, currentSize, isDisabled, imageSpace, isLoading, imageUrl, borders, colors, spaces, image }) => {
+    const styles = {
+        container: {},
+        image: {},
+        icon: {},
+        titlesContainer: {
+            marginLeft: spaces.spacingSm * 1.5
+        },
+        contentContainer: {}
+    };
+    if (isCustomImageSize) {
+        styles.image.width = currentSize.size * 3 - (imageSpace ? spaces[imageSpace] : 0);
+        styles.image.height = currentSize.size - (imageSpace ? spaces[imageSpace] : 0);
+        styles.contentContainer.borderRadius = currentSize.size / 2;
+        styles.contentContainer.width = currentSize.size * 3;
+        styles.contentContainer.height = currentSize.size;
+    }
+    else {
+        styles.image.borderColor = borderColor && borderColor !== "transparent" ? colors.content.border[borderColor] : logoBackgroundColor ? colors.content.container[logoBackgroundColor] : "transparent";
+        styles.image.height = currentSize.size - (imageSpace ? spaces[imageSpace] : 0);
+        styles.image.width = currentSize.size - (imageSpace ? spaces[imageSpace] : 0);
+        styles.image.borderRadius = currentSize.size / 2;
+        styles.contentContainer.borderColor = borderColor && borderColor !== "transparent" ? colors.content.border[borderColor] : logoBackgroundColor ? colors.content.container[logoBackgroundColor] : "transparent";
+        styles.contentContainer.backgroundColor = backgroundColor ? backgroundColor === "transparent" ? "transparent" : colors.content.container[backgroundColor] : colors.content.container.subtle;
+        styles.contentContainer.borderRadius = currentSize.size / 2;
+        styles.contentContainer.height = currentSize.size;
+        styles.contentContainer.width = currentSize.size;
+    }
+    if (isShowBorder) {
+        styles.contentContainer.borderWidth = borders.subtract;
+        styles.image.borderWidth = borders.subtract;
+    }
+    if (!image && !imageUrl && !backgroundColor) {
+        styles.contentContainer.backgroundColor = colors.content.container.subtle;
+        styles.contentContainer.justifyContent = "center";
+        styles.contentContainer.alignItems = "center";
+        styles.titlesContainer.marginLeft = 0;
+    }
+    if (isDisabled) {
+        styles.container.opacity = 0.33;
+    }
+    if (isLoading) {
+        styles.container.opacity = 0.33;
+    }
+    if (isWorkWithFlex1) {
+        styles.container.flex = 1;
+    }
+    return styles;
+};
+export default stylesheet;

package/lib/src/components/siteLogo/type.js

@@ -0,0 +1 @@
+import {} from "react-native";