ncore-ui-kit 1.0.0-alpha.0

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

@@ -0,0 +1,90 @@
+import { StyleSheet } from "react-native";
+import {} from "./type";
+const stylesheet = StyleSheet.create({
+    container: {
+        flexDirection: "column",
+        position: "relative",
+        overflow: "hidden",
+        maxHeight: "80%",
+        maxWidth: "85%",
+        minWidth: "23%",
+        zIndex: 99998
+    },
+    content: {
+        flexWrap: "wrap"
+    },
+    headerContainer: {
+        paddingBottom: 0
+    },
+    bottomContainer: {
+        width: "100%"
+    },
+    bottomContentContainer: {
+        justifyContent: "flex-end",
+        flexDirection: "row"
+    },
+    headerTitle: {},
+    contentText: {},
+    primaryButton: {},
+    closeIcon: {
+        position: "absolute",
+        right: 0,
+        top: 0
+    }
+});
+export const useStyles = ({ contentJustify, isVisible, radiuses, variant, colors, spaces }) => {
+    const styles = {
+        container: {
+            backgroundColor: colors.content.container.default,
+            borderRadius: radiuses.md
+        },
+        content: {
+            paddingBottom: spaces.spacingMd,
+            paddingRight: spaces.spacingMd,
+            paddingLeft: spaces.spacingMd,
+            paddingTop: spaces.spacingMd
+        },
+        headerContainer: {
+            paddingRight: spaces.spacingMd,
+            paddingLeft: spaces.spacingMd,
+            paddingTop: spaces.spacingLg
+        },
+        bottomContainer: {
+            paddingTop: spaces.spacingSm
+        },
+        bottomContentContainer: {
+            paddingBottom: spaces.spacingMd,
+            paddingRight: spaces.spacingMd,
+            paddingLeft: spaces.spacingMd
+        },
+        headerTitle: {},
+        contentText: {},
+        closeIcon: {
+            padding: spaces.spacingMd
+        },
+        primaryButton: {}
+    };
+    if (variant === "yes-no") {
+        styles.primaryButton.marginLeft = spaces.spacingMd;
+    }
+    if (isVisible === false) {
+        styles.container.display = "none";
+    }
+    if (contentJustify === "centered") {
+        styles.container.justifyContent = "center";
+        styles.container.alignItems = "center";
+        styles.content.justifyContent = "center";
+        styles.content.alignItems = "center";
+        styles.content.display = "flex";
+        styles.contentText.textAlign = "center";
+        styles.headerContainer.justifyContent = "center";
+        styles.headerContainer.alignItems = "center";
+        styles.headerContainer.display = "flex";
+        styles.headerTitle.textAlign = "center";
+    }
+    if (variant === "info") {
+        styles.content.paddingBottom = spaces.spacingLg;
+    }
+    return styles;
+};
+export default stylesheet;

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

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

package/lib/src/components/embeddedMenu/components/menuButton/index.js

@@ -0,0 +1,173 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useEffect, useState, useRef } from "react";
+import { Platform, Animated, Easing, View } from "react-native";
+import { NCoreUIKitLocalize, NCoreUIKitTheme } from "../../../../core/hooks";
+import { ChevronRightIcon, ChevronDownIcon, ChevronLeftIcon } from "lucide-react-native";
+import RowCard from "../../../rowCard";
+const getDeepActiveRouteName = (state) => {
+    if (!state?.routes?.length)
+        return undefined;
+    const activeIndex = state.index ?? 0;
+    const activeRoute = state.routes[activeIndex];
+    if (!activeRoute)
+        return undefined;
+    if (activeRoute.state) {
+        return getDeepActiveRouteName(activeRoute.state);
+    }
+    return activeRoute.name;
+};
+const isPageActive = (buttonItem, navigation) => {
+    if (!navigation)
+        return false;
+    const state = typeof navigation.getRootState === "function"
+        ? navigation.getRootState()
+        : typeof navigation.getState === "function"
+            ? navigation.getState()
+            : null;
+    if (!state?.routes)
+        return false;
+    const activeRouteName = getDeepActiveRouteName(state);
+    const targetName = buttonItem.redirectSub ?? buttonItem.redirectMain;
+    if (targetName && activeRouteName === targetName)
+        return true;
+    if (buttonItem.subButtons?.length) {
+        return buttonItem.subButtons.some(sub => isPageActive(sub, navigation));
+    }
+    return false;
+};
+const EmbeddedMenuButton = ({ updateMenuButtonCollabs, isMenuCollabs, closeAction, buttonIndex, buttonItem, navigation, depthMap, openMenu, id }) => {
+    const { colors } = NCoreUIKitTheme.useContext();
+    const { localize } = NCoreUIKitLocalize.useContext();
+    const [measure, setMeasure] = useState(null);
+    const [navStateTracker, setNavStateTracker] = useState(Date.now());
+    const [isShowSubs, setIsShowSubs] = useState(buttonItem.isCollapse);
+    const animatedCollabs = useRef(new Animated.Value(0)).current;
+    useEffect(() => {
+        if (!navigation || typeof navigation.addListener !== "function")
+            return;
+        const unsubscribeState = navigation.addListener("state", () => {
+            setNavStateTracker(Date.now());
+        });
+        const unsubscribeFocus = navigation.addListener("focus", () => {
+            setNavStateTracker(Date.now());
+        });
+        return () => {
+            if (unsubscribeState)
+                unsubscribeState();
+            if (unsubscribeFocus)
+                unsubscribeFocus();
+        };
+    }, [navigation]);
+    useLayoutEffect(() => {
+        if (isShowSubs) {
+            Animated.timing(animatedCollabs, {
+                toValue: Platform.OS === "web" ? Number(measure) : 1,
+                useNativeDriver: Platform.OS !== "web",
+                easing: Easing.linear,
+                duration: 150
+            }).start();
+        }
+    }, [isShowSubs]);
+    useLayoutEffect(() => {
+        if (!buttonItem.isCollapsible)
+            return;
+        if (Platform.OS === "web" && measure === null)
+            return;
+        if (buttonItem.isCollapse) {
+            setIsShowSubs(true);
+        }
+        else {
+            Animated.timing(animatedCollabs, {
+                useNativeDriver: Platform.OS !== "web",
+                easing: Easing.linear,
+                duration: 150,
+                toValue: 0
+            }).start(({ finished }) => {
+                if (finished) {
+                    setIsShowSubs(false);
+                }
+            });
+        }
+    }, [
+        buttonItem.isCollapse,
+        measure
+    ]);
+    const isPActive = isPageActive(buttonItem, navigation);
+    if (!isMenuCollabs && !buttonItem.icon) {
+        return null;
+    }
+    return _jsxs(View, { children: [_jsx(RowCard, { ...buttonItem.props, title: isMenuCollabs ? buttonItem.isUseLocalize ? localize(buttonItem.title) : buttonItem.title : "", rightIcon: isMenuCollabs && (buttonItem.isCollapsible || buttonItem.isShowRedirectIcon) ?
+                    () => {
+                        if (buttonItem.isCollapsible) {
+                            if (buttonItem.isCollapse) {
+                                return _jsx(ChevronDownIcon, { color: isPActive ? colors.content.icon.onPrimary : colors.content.icon.low, size: 18 });
+                            }
+                            else {
+                                return _jsx(ChevronLeftIcon, { color: isPActive ? colors.content.icon.onPrimary : colors.content.icon.low, size: 18 });
+                            }
+                        }
+                        else {
+                            return _jsx(ChevronRightIcon, { color: isPActive ? colors.content.icon.onPrimary : colors.content.icon.low, size: 18 });
+                        }
+                    }
+                    :
+                        undefined, backgroundColor: isPActive ? "primary" : undefined, titleColor: isPActive ? "onPrimary" : undefined, iconColor: isPActive ? "onPrimary" : undefined, icon: buttonItem.icon, onPress: () => {
+                    if (!isMenuCollabs && buttonItem.subButtons && buttonItem.subButtons.length) {
+                        openMenu();
+                        updateMenuButtonCollabs({
+                            status: true,
+                            buttonItem,
+                            depthMap
+                        });
+                        return;
+                    }
+                    if (buttonItem.isCollapsible) {
+                        updateMenuButtonCollabs({
+                            status: !buttonItem.isCollapse,
+                            buttonItem,
+                            depthMap
+                        });
+                    }
+                    else {
+                        if (buttonItem.redirectMain || buttonItem.redirectSub) {
+                            if (buttonItem.redirectMain && buttonItem.redirectSub) {
+                                navigation.navigate(buttonItem.redirectMain, {
+                                    screen: buttonItem.redirectSub
+                                });
+                            }
+                            else if (buttonItem.redirectMain) {
+                                navigation.navigate(buttonItem.redirectMain);
+                            }
+                        }
+                        if (buttonItem.props?.onPress)
+                            buttonItem.props.onPress();
+                    }
+                    if (closeAction && !buttonItem.isCollapsible)
+                        closeAction();
+                } }), buttonItem.subButtons && buttonItem.subButtons.length ?
+                _jsx(Animated.View, { onLayout: buttonItem.isCollapsible ? (event) => {
+                        const height = event.nativeEvent.layout.height;
+                        if (height !== 0 && measure === null)
+                            setMeasure(height);
+                    } : undefined, style: [
+                        Platform.OS === "web" ? {
+                            height: measure === null ? "auto" : animatedCollabs,
+                            overflow: "hidden"
+                        } : {
+                            display: isShowSubs ? "flex" : "none",
+                            transform: [{
+                                    scaleY: animatedCollabs
+                                }],
+                            transformOrigin: "top",
+                            overflow: "hidden"
+                        }
+                    ], children: buttonItem.subButtons.map((subButtonItem, subButtonIndex) => {
+                        return _jsx(EmbeddedMenuButton, { updateMenuButtonCollabs: updateMenuButtonCollabs, isMenuCollabs: isMenuCollabs, buttonIndex: subButtonIndex, buttonItem: subButtonItem, closeAction: closeAction, navigation: navigation, openMenu: openMenu, depthMap: [
+                                ...depthMap,
+                                subButtonIndex
+                            ], id: id }, `embedded-menu-sub-button-${id}-${subButtonIndex}`);
+                    }) })
+                :
+                    null] }, `menu-button-${id}-${buttonIndex}-${navStateTracker.toString()}`);
+};
+export default EmbeddedMenuButton;

package/lib/src/components/embeddedMenu/components/menuButton/type.js

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

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

@@ -0,0 +1,244 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useImperativeHandle, useLayoutEffect, forwardRef, useEffect, useState, Fragment, useRef } from "react";
+import { Platform, Animated, Easing, View } from "react-native";
+import {} from "./components/menuButton/type";
+import {} from "./type";
+import stylesheet, { useStyles } from "./stylesheet";
+import MenuButton from "./components/menuButton";
+import { NCoreUIKitEmbeddedMenu, NCoreUIKitTheme } from "../../core/hooks";
+import { PanelLeftClose, PanelLeftOpen } from "lucide-react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import Seperator from "../seperator";
+import SiteLogo from "../siteLogo";
+import Button from "../button";
+const Menu = ({ isWorkWithSafeAreaView = true, isWorkWithHeaderSpace = true, isWorkWithAnimation = true, renderHeader: RenderHeader, renderFooter: RenderFooter, renderHeaderSeperator, isShowSiteLogo = true, close: closeAction, renderSiteLogo, customLocalize, maxWidth = 300, minWidth = 75, siteLogoProps, headerSpace, customTheme, navigation, isCollapse, onClosed, onOpened, buttons, onClose, onOpen, style, id, ...props }, ref) => {
+    const { configs, colors, spaces } = NCoreUIKitTheme.useContext(customTheme);
+    const [isActive, setIsActive] = useState(false);
+    const { headerContentContainer: headerContentContainerDynamicStyle, headerContainer: headerContainerDynamicStyle, collapseButton: collapseButtonDynamicStyle, seperator: seperatorDynamicStyle, container: containerDynamicStyle, siteLogo: siteLogoDynamicStyle } = useStyles({
+        isCollapse: isActive,
+        colors,
+        spaces
+    });
+    const animatedX = useRef(new Animated.Value(!isCollapse ? minWidth : maxWidth)).current;
+    useImperativeHandle(ref, () => ({
+        close,
+        open
+    }), []);
+    useEffect(() => {
+        if (isCollapse !== undefined && isActive !== isCollapse)
+            setIsActive(isCollapse);
+    }, [isCollapse]);
+    useLayoutEffect(() => {
+        if (isActive) {
+            if (onOpen)
+                onOpen({
+                    id
+                });
+            if (Platform.OS !== "web") {
+                if (onOpened)
+                    onOpened({
+                        id
+                    });
+            }
+            else if (isWorkWithAnimation) {
+                openAnimation();
+            }
+            else {
+                animatedX.setValue(maxWidth);
+                if (onOpened)
+                    onOpened({
+                        id
+                    });
+            }
+        }
+        else {
+            if (onClose)
+                onClose({
+                    id
+                });
+            if (isWorkWithAnimation && Platform.OS === "web") {
+                closeAnimation();
+            }
+            else {
+                animatedX.setValue(minWidth);
+                if (onClosed)
+                    onClosed({
+                        id
+                    });
+            }
+        }
+    }, [
+        isActive
+    ]);
+    const open = () => {
+        NCoreUIKitEmbeddedMenu.open({
+            id
+        });
+    };
+    const close = () => {
+        NCoreUIKitEmbeddedMenu.close({
+            id
+        });
+    };
+    const openAnimation = () => {
+        Animated.timing(animatedX, {
+            useNativeDriver: Platform.OS !== "web",
+            easing: Easing.linear,
+            toValue: maxWidth,
+            duration: 300
+        }).start(({ finished }) => {
+            if (finished) {
+                if (onOpened)
+                    onOpened({
+                        id
+                    });
+            }
+        });
+    };
+    const closeAnimation = () => {
+        Animated.timing(animatedX, {
+            useNativeDriver: Platform.OS !== "web",
+            easing: Easing.linear,
+            toValue: minWidth,
+            duration: 300
+        }).start(({ finished }) => {
+            if (finished) {
+                if (onClosed)
+                    onClosed({
+                        id
+                    });
+            }
+        });
+    };
+    const updateMenuButtonCollabs = ({ depthMap, status }) => {
+        const state = NCoreUIKitEmbeddedMenu.get({
+            id
+        });
+        if (!state) {
+            return;
+        }
+        const recursivelyCatch = (item, index = 0) => {
+            const tIndex = depthMap[index];
+            return item.map((c_item, c_index) => {
+                if (c_index !== tIndex) {
+                    return c_item;
+                }
+                if (index === depthMap.length - 1) {
+                    return {
+                        ...c_item,
+                        isCollapse: status
+                    };
+                }
+                return {
+                    ...c_item,
+                    subButtons: recursivelyCatch(c_item.subButtons, index + 1)
+                };
+            });
+        };
+        const newButtons = recursivelyCatch(state.buttons);
+        state.buttons = newButtons;
+        NCoreUIKitEmbeddedMenu.update({
+            menuData: state,
+            id: id
+        });
+    };
+    const renderToggleCollapseForCollabsed = () => {
+        if (isActive) {
+            return null;
+        }
+        return _jsx(Button, { isCustomPadding: true, spreadBehaviour: "free", type: "neutral", size: "medium", icon: ({ color, size }) => {
+                return _jsx(PanelLeftOpen, { color: colors.content.icon[color], size: size * 2 });
+            }, style: {
+                ...collapseButtonDynamicStyle
+            }, onPress: () => {
+                if (isActive) {
+                    close();
+                }
+                else {
+                    open();
+                }
+            } });
+    };
+    const renderToggleCollapseForExpended = () => {
+        if (!isActive) {
+            return null;
+        }
+        return _jsx(Button, { isCustomPadding: true, spreadBehaviour: "free", type: "neutral", size: "medium", icon: ({ color, size }) => {
+                return _jsx(PanelLeftClose, { color: colors.content.icon[color], size: size * 2 });
+            }, style: {
+                ...collapseButtonDynamicStyle
+            }, onPress: () => {
+                if (isActive) {
+                    close();
+                }
+                else {
+                    open();
+                }
+            } });
+    };
+    const renderHeader = () => {
+        if (RenderHeader) {
+            return _jsx(RenderHeader, { isCollapse: isActive, maxWidth: maxWidth, minWidth: minWidth });
+        }
+        return _jsxs(View, { style: [
+                stylesheet.headerContainer,
+                headerContainerDynamicStyle
+            ], children: [renderToggleCollapseForCollabsed(), _jsxs(View, { style: [
+                        stylesheet.headerContentContainer,
+                        headerContentContainerDynamicStyle
+                    ], children: [isShowSiteLogo ? renderSiteLogo ? renderSiteLogo() : _jsx(SiteLogo, { customLocalize: customLocalize, customTheme: customTheme, ...siteLogoProps, title: isActive ? siteLogoProps?.title : undefined, size: isActive ? siteLogoProps?.size : "small", style: [
+                                siteLogoProps?.style,
+                                siteLogoDynamicStyle
+                            ] }) : _jsx(View, { style: {
+                                flex: 1
+                            } }), renderToggleCollapseForExpended()] }), renderHeaderSeperator ? renderHeaderSeperator() : _jsx(Seperator, { style: [
+                        stylesheet.seperator,
+                        seperatorDynamicStyle
+                    ] })] });
+    };
+    const renderButtons = () => {
+        if (!buttons || !buttons.length) {
+            return null;
+        }
+        return buttons.map((buttonItem, buttonIndex) => {
+            return _jsx(MenuButton, { updateMenuButtonCollabs: updateMenuButtonCollabs, closeAction: closeAction, buttonIndex: buttonIndex, isMenuCollabs: isActive, depthMap: [buttonIndex], buttonItem: buttonItem, navigation: navigation, openMenu: () => {
+                    open();
+                }, id: id }, `embedded-menu-button-${id}-${buttonIndex}`);
+        });
+    };
+    const renderFooter = () => {
+        if (!RenderFooter) {
+            return null;
+        }
+        return _jsx(RenderFooter, { isCollapse: isActive, maxWidth: maxWidth, minWidth: minWidth });
+    };
+    const renderSafeAreaContext = () => {
+        if (!isWorkWithSafeAreaView) {
+            return _jsxs(Fragment, { children: [isWorkWithHeaderSpace && (configs.headerSpace || headerSpace) ? _jsx(View, { style: {
+                            height: headerSpace ? headerSpace : configs.headerSpace,
+                            width: "100%"
+                        } }) : null, renderHeader(), _jsx(View, { style: [
+                            stylesheet.content
+                        ], children: renderButtons() }), renderFooter()] });
+        }
+        return _jsxs(SafeAreaView, { style: [
+                stylesheet.safeAreaView
+            ], children: [renderHeader(), _jsx(View, { style: [
+                        stylesheet.content
+                    ], children: renderButtons() }), renderFooter()] });
+    };
+    const renderContent = () => {
+        return _jsx(Animated.View, { ...props, style: [
+                style,
+                stylesheet.container,
+                containerDynamicStyle,
+                Platform.OS === "web" ? {
+                    width: animatedX
+                } : {
+                    width: isActive ? maxWidth : minWidth
+                }
+            ], children: renderSafeAreaContext() });
+    };
+    return renderContent();
+};
+export default forwardRef(Menu);

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

@@ -0,0 +1,57 @@
+import { StyleSheet } from "react-native";
+const stylesheet = StyleSheet.create({
+    container: {
+        flexDirection: "column",
+        display: "flex",
+        height: "100%"
+    },
+    content: {
+        justifyContent: "flex-start",
+        flexDirection: "column",
+        alignItems: "stretch",
+        flex: 1
+    },
+    safeAreaView: {
+        flex: 1
+    },
+    headerContainer: {
+        justifyContent: "center",
+        alignItems: "flex-start",
+        width: "100%"
+    },
+    seperator: {},
+    headerContentContainer: {
+        flexDirection: "row",
+        alignItems: "center",
+        width: "100%"
+    }
+});
+export const useStyles = ({ isCollapse, colors, spaces }) => {
+    const styles = {
+        container: {
+            backgroundColor: colors.content.container.default
+        },
+        headerContainer: {
+            paddingHorizontal: spaces.spacingMd,
+            paddingTop: spaces.spacingMd
+        },
+        seperator: {
+            marginVertical: spaces.spacingMd
+        },
+        collapseButton: {
+            marginBottom: spaces.spacingSm,
+            padding: spaces.spacingSm
+        },
+        headerContentContainer: {},
+        siteLogo: {}
+    };
+    if (isCollapse) {
+        styles.siteLogo.marginRight = spaces.spacingMd;
+    }
+    else {
+        styles.headerContainer.justifyContent = "center";
+        styles.headerContainer.alignItems = "center";
+    }
+    return styles;
+};
+export default stylesheet;

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

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