ncore-ui-kit 1.0.0-pre-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/snackBar/index.js

@@ -0,0 +1,249 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState, useRef } from "react";
+import { TouchableWithoutFeedback, PanResponder, Platform, Animated, Easing, View } from "react-native";
+import stylesheet, { getSnackBarType, useStyles } from "./stylesheet";
+import { NCoreUIKitTheme } from "../../core/hooks";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { safeGlobal } from "../../types";
+import { X as XIcon } from "lucide-react-native";
+import { Portal } from "../../helpers/portalize";
+import { windowHeight } from "../../utils";
+import Button from "../button";
+import Text from "../text";
+const SnackBar = ({ isCloseOnPressActionButton = true, closeAnimationDelay = 350, openAnimationDelay = 200, contentContainerStyle, autoCloseDelay = 5000, isCloseOnPress = true, isShowAction = true, isFullWidth = false, isInlineSafeArea, icon: CustomIcon, type = "neutral", customTheme, onClosed, subTitle, children, onPress, action, style, title, id }) => {
+    const { radiuses, colors, spaces } = NCoreUIKitTheme.useContext(customTheme);
+    const { top } = useSafeAreaInsets();
+    const [isMeasured, setIsMeasured] = useState(false);
+    const contentHeight = useRef(windowHeight);
+    const transformAnim = useRef(new Animated.Value(-contentHeight.current + -top + -spaces.spacingSm)).current;
+    const opacityAnim = useRef(new Animated.Value(0)).current;
+    const currentType = getSnackBarType({
+        type
+    });
+    const { contentContainer: contentContainerDynamicStyle, containerObject: containerObjectDynamicStyle, iconContainer: iconContainerDynamicStyle, container: containerDynamicStyle, subTitle: subTitleDynamicStyle, action: actionDynamicStyle, title: titleDynamicStyle } = useStyles({
+        isInlineSafeArea,
+        safeAreaTop: top,
+        isFullWidth,
+        currentType,
+        radiuses,
+        spaces,
+        colors,
+        type
+    });
+    useEffect(() => {
+        if (isMeasured) {
+            transformAnim.setValue(-contentHeight.current + -top + -spaces.spacingSm);
+            Animated.parallel([
+                Animated.timing(opacityAnim, {
+                    duration: openAnimationDelay,
+                    useNativeDriver: true,
+                    easing: Easing.linear,
+                    toValue: 1
+                }),
+                Animated.timing(transformAnim, {
+                    duration: openAnimationDelay,
+                    useNativeDriver: true,
+                    easing: Easing.linear,
+                    toValue: 0
+                })
+            ]).start();
+            setTimeout(() => {
+                closeAnimation();
+            }, autoCloseDelay);
+        }
+    }, [isMeasured]);
+    const panResponder = useRef(PanResponder.create({
+        onStartShouldSetPanResponder: () => false,
+        onMoveShouldSetPanResponderCapture: (_, gestureState) => {
+            const { dy } = gestureState;
+            if (Math.abs(dy) < 20) {
+                return false;
+            }
+            return true;
+        },
+        onPanResponderMove: (_, gestureState) => {
+            const { moveY, y0, dy } = gestureState;
+            if (moveY > y0) {
+                return;
+            }
+            const op = moveY / y0;
+            opacityAnim.setValue(op);
+            transformAnim.setValue(dy);
+        },
+        onPanResponderEnd: (_, gestureState) => {
+            const { moveY, y0, vy } = gestureState;
+            if (vy < -1) {
+                closeAnimation();
+                return;
+            }
+            if (y0 - moveY > 25) {
+                closeAnimation();
+                return;
+            }
+            Animated.parallel([
+                Animated.timing(opacityAnim, {
+                    duration: openAnimationDelay,
+                    useNativeDriver: true,
+                    easing: Easing.linear,
+                    toValue: 1
+                }),
+                Animated.timing(transformAnim, {
+                    duration: openAnimationDelay,
+                    useNativeDriver: true,
+                    easing: Easing.linear,
+                    toValue: 0
+                })
+            ]).start();
+        },
+        onPanResponderTerminationRequest: () => false,
+        onShouldBlockNativeResponder: () => true
+    })).current;
+    const closeAnimation = (_onClosed) => {
+        Animated.parallel([
+            Animated.timing(transformAnim, {
+                toValue: -contentHeight.current + -top + -spaces.spacingSm,
+                duration: closeAnimationDelay,
+                useNativeDriver: true,
+                easing: Easing.linear
+            }),
+            Animated.timing(opacityAnim, {
+                duration: closeAnimationDelay,
+                useNativeDriver: true,
+                easing: Easing.linear,
+                toValue: 0
+            })
+        ]).start(({ finished }) => {
+            if (finished) {
+                if (onClosed)
+                    onClosed({
+                        id
+                    });
+                if (_onClosed)
+                    _onClosed({
+                        id
+                    });
+            }
+        });
+    };
+    const renderIcon = () => {
+        if (!CustomIcon) {
+            return null;
+        }
+        return _jsx(View, { style: [
+                stylesheet.iconContainer,
+                iconContainerDynamicStyle
+            ], children: _jsx(CustomIcon, { color: "default", size: 18 }) });
+    };
+    const renderContent = () => {
+        return _jsxs(View, { style: [
+                contentContainerStyle,
+                stylesheet.contentContainer,
+                contentContainerDynamicStyle
+            ], children: [_jsx(Text, { numberOfLines: 3, style: {
+                        ...stylesheet.title,
+                        ...titleDynamicStyle
+                    }, children: title }), subTitle ?
+                    _jsx(Text, { variant: "labelSmallSize", numberOfLines: 2, color: "low", style: {
+                            ...stylesheet.subTitle,
+                            ...subTitleDynamicStyle
+                        }, children: subTitle })
+                    :
+                        null] });
+    };
+    const renderAction = () => {
+        if (!isShowAction) {
+            return null;
+        }
+        return _jsx(Button, { title: action && action.title ? action.title : undefined, isCustomPadding: true, spreadBehaviour: "free", onPress: () => {
+                if (isCloseOnPressActionButton)
+                    closeAnimation();
+                if (action && action.onPress)
+                    action.onPress({
+                        closeAnimation: ({ onClosed: _onClosed }) => closeAnimation(_onClosed)
+                    });
+            }, icon: ({ color }) => {
+                if (action?.title) {
+                    return null;
+                }
+                return _jsx(XIcon, { color: colors.content.icon[color ? color : "default"], size: 18 });
+            }, style: {
+                ...action?.style,
+                ...actionDynamicStyle
+            }, variant: "ghost", type: "neutral", size: "small" });
+    };
+    const renderContainer = () => {
+        return _jsxs(View, { style: [
+                stylesheet.containerObject,
+                containerObjectDynamicStyle
+            ], children: [renderIcon(), renderContent(), renderAction()] });
+    };
+    return _jsx(Portal, { name: "snack-bar-system", children: _jsx(Animated.View, { ...(Platform.OS === "web" ? {} : panResponder.panHandlers), onLayout: (event) => {
+                const _contentHeight = event.nativeEvent.layout.height;
+                contentHeight.current = _contentHeight;
+                setIsMeasured(true);
+            }, onPointerDown: Platform.OS === "web" ? (evt) => {
+                const nativeEvt = evt;
+                const startY = nativeEvt.clientY;
+                let lastY = startY;
+                let lastTime = Date.now();
+                let velocityY = 0;
+                const handlePointerMove = (moveEvt) => {
+                    const dy = moveEvt.clientY - startY;
+                    if (dy > 0)
+                        return; // sadece yukarı swipe
+                    const now = Date.now();
+                    const dt = now - lastTime;
+                    if (dt > 0)
+                        velocityY = (moveEvt.clientY - lastY) / dt;
+                    lastY = moveEvt.clientY;
+                    lastTime = now;
+                    const op = Math.max(0, 1 + (dy / contentHeight.current));
+                    opacityAnim.setValue(op);
+                    transformAnim.setValue(dy);
+                };
+                const handlePointerUp = () => {
+                    safeGlobal.removeEventListener("pointermove", handlePointerMove);
+                    safeGlobal.removeEventListener("pointerup", handlePointerUp);
+                    const dy = lastY - startY;
+                    if (velocityY < -0.5 || dy < -25) {
+                        closeAnimation();
+                        return;
+                    }
+                    Animated.parallel([
+                        Animated.timing(opacityAnim, {
+                            duration: openAnimationDelay,
+                            useNativeDriver: true,
+                            easing: Easing.linear,
+                            toValue: 1
+                        }),
+                        Animated.timing(transformAnim, {
+                            duration: openAnimationDelay,
+                            useNativeDriver: true,
+                            easing: Easing.linear,
+                            toValue: 0
+                        })
+                    ]).start();
+                };
+                safeGlobal.addEventListener("pointermove", handlePointerMove);
+                safeGlobal.addEventListener("pointerup", handlePointerUp);
+            } : undefined, style: [
+                style,
+                stylesheet.container,
+                containerDynamicStyle,
+                {
+                    opacity: opacityAnim,
+                    transform: [{
+                            translateY: transformAnim
+                        }]
+                }
+            ], children: _jsx(TouchableWithoutFeedback, { onPress: () => {
+                    if (onPress)
+                        onPress({
+                            id
+                        });
+                    if (isCloseOnPress) {
+                        closeAnimation();
+                    }
+                }, children: children ? children : renderContainer() }) }) });
+};
+export default SnackBar;

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

@@ -0,0 +1,118 @@
+import { StyleSheet } from "react-native";
+import { windowWidth } from "../../utils";
+export const SNACK_BAR_TYPE_STYLES = {
+    primary: {
+        actionColor: "onPrimary",
+        iconColor: "emphasized",
+        containerColor: "mid",
+        subTitleColor: "low",
+        titleColor: "mid"
+    },
+    danger: {
+        subTitleColor: "dangerLow",
+        containerColor: "danger",
+        actionColor: "danger",
+        titleColor: "danger",
+        iconColor: "danger"
+    },
+    success: {
+        subTitleColor: "successLow",
+        containerColor: "success",
+        actionColor: "success",
+        titleColor: "success",
+        iconColor: "success"
+    },
+    warning: {
+        subTitleColor: "warningLow",
+        containerColor: "warning",
+        actionColor: "warning",
+        titleColor: "warning",
+        iconColor: "warning"
+    },
+    info: {
+        subTitleColor: "infoLow",
+        containerColor: "info",
+        actionColor: "info",
+        titleColor: "info",
+        iconColor: "info"
+    },
+    neutral: {
+        containerColor: "mid",
+        subTitleColor: "low",
+        actionColor: "mid",
+        titleColor: "mid",
+        iconColor: "mid"
+    }
+};
+export const getSnackBarType = ({ type }) => {
+    const currentType = SNACK_BAR_TYPE_STYLES[type];
+    return currentType;
+};
+const stylesheet = StyleSheet.create({
+    container: {
+        position: "absolute",
+        alignSelf: "center",
+        zIndex: 99998
+    },
+    containerObject: {
+        flexDirection: "row",
+        alignItems: "center"
+    },
+    contentContainer: {
+        justifyContent: "center",
+        alignItems: "flex-start",
+        flexDirection: "column",
+        flexShrink: 1,
+        flex: 1
+    },
+    iconContainer: {
+        justifyContent: "center",
+        alignItems: "center"
+    },
+    title: {
+        textAlign: "left"
+    },
+    subTitle: {
+        textAlign: "left"
+    }
+});
+export const useStyles = ({ isInlineSafeArea, isFullWidth, safeAreaTop, currentType, radiuses, colors, spaces }) => {
+    const styles = {
+        container: {
+            backgroundColor: colors.content.container[currentType.containerColor],
+            width: windowWidth - (spaces.spacingMd * 2),
+            top: safeAreaTop + spaces.spacingSm,
+            borderRadius: radiuses.lg
+        },
+        containerObject: {
+            paddingHorizontal: spaces.spacingLg,
+            paddingVertical: spaces.spacingMd
+        },
+        contentContainer: {},
+        title: {},
+        subTitle: {
+            marginTop: spaces.spacingXs
+        },
+        iconContainer: {
+            paddingRight: spaces.spacingSm,
+            marginRight: spaces.spacingSm
+        },
+        action: {
+            paddingBottom: spaces.spacingSm,
+            paddingRight: spaces.spacingSm,
+            paddingLeft: spaces.spacingMd,
+            paddingTop: spaces.spacingSm,
+            marginLeft: spaces.spacingMd
+        }
+    };
+    if (isFullWidth) {
+        styles.container.width = windowWidth;
+        styles.container.borderRadius = 0;
+    }
+    if (isInlineSafeArea) {
+        styles.container.paddingTop = safeAreaTop;
+        styles.container.top = 0;
+    }
+    return styles;
+};
+export default stylesheet;

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

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