ncore-ui-kit 1.0.0-alpha.0

package/src/context/bottomSheet.tsx

@@ -0,0 +1,121 @@
+import {
+    type ReactNode,
+    Fragment
+} from "react";
+import {
+    type BottomSheetContextType,
+    type BottomSheetDataType
+} from "../types/bottomSheet";
+import NCoreContext, {
+    type ConfigType
+} from "ncore-context";
+import BottomSheet from "../components/bottomSheet";
+import {
+    uuid
+} from "../utils";
+
+class NCoreUIKitBottomSheet extends NCoreContext<BottomSheetContextType, ConfigType<BottomSheetContextType>> {
+    constructor({
+        data = []
+    }: {
+        data?: Array<BottomSheetDataType>
+    }) {
+        super({
+            close: () => {},
+            open: () => "",
+            data: data
+        }, {
+            key: "NCoreUIKit-BottomSheetContext"
+        });
+    };
+
+    open = (dialogData: BottomSheetDataType) => {
+        const currentData = this.state.data;
+
+        const dialogID = dialogData.id ? dialogData.id : uuid();
+
+        currentData.push({
+            ...dialogData,
+            id: dialogID
+        });
+
+        this.setState({
+            data: currentData
+        });
+
+        return dialogID;
+    };
+
+    close = (props?: {
+        index?: number;
+        id?: string;
+    }) => {
+        const currentData = this.state.data;
+
+        if (props && props.id) {
+            const keyIndex = currentData.findIndex((bottomSheet) => bottomSheet.id === props.id);
+
+            if (keyIndex !== -1) {
+                currentData.splice(keyIndex, 1);
+
+                this.setState({
+                    data: currentData
+                });
+            }
+
+            return;
+        }
+
+        if (props && props.index !== undefined) {
+            currentData.splice(props.index, 1);
+
+            this.setState({
+                data: currentData
+            });
+
+            return;
+        }
+
+        currentData.pop();
+
+        this.setState({
+            data: currentData
+        });
+    };
+
+    Render = ({
+        children
+    }: {
+        children: ReactNode;
+    }) => {
+        const {
+            data
+        } = this.useContext();
+
+        return <Fragment>
+            {children}
+            {data.map((item: BottomSheetDataType) => {
+                return <BottomSheet
+                    key={`NCoreUIKit-BottomSheet-${item.id}`}
+                    id={item.id as string}
+                    isActive={true}
+                    onClosed={() => {
+                        if(item.onClosed) {
+                            item.onClosed({
+                                id: item.id as string
+                            });
+                        }
+
+                        if(item.isAutoClosed === undefined || item.isAutoClosed === true) {
+                            this.close({
+                                id: item.id
+                            });
+                        }
+                    }}
+                    {...item}
+                />;
+            })}
+        </Fragment>;
+    };
+}
+export default NCoreUIKitBottomSheet;

package/src/context/dialog.tsx

@@ -0,0 +1,120 @@
+import {
+    type ReactNode,
+    Fragment
+} from "react";
+import {
+    type DialogContextType,
+    type DialogDataType
+} from "../types/dialog";
+import NCoreContext, {
+    type ConfigType
+} from "ncore-context";
+import Dialog from "../components/dialog";
+import {
+    uuid
+} from "../utils";
+
+class NCoreUIKitDialog extends NCoreContext<DialogContextType, ConfigType<DialogContextType>> {
+    constructor({
+        data = []
+    }: {
+        data?: Array<DialogDataType>
+    }) {
+        super({
+            close: () => {},
+            open: () => "",
+            data: data
+        }, {
+            key: "NCoreUIKit-DialogContext"
+        });
+    };
+
+    open = (dialogData: DialogDataType) => {
+        const currentData = this.state.data;
+
+        const dialogID = dialogData.id ? dialogData.id : uuid();
+
+        currentData.push({
+            ...dialogData,
+            id: dialogID
+        });
+
+        this.setState({
+            data: currentData
+        });
+
+        return dialogID;
+    };
+
+    close = (props?: {
+        index?: number;
+        id?: string;
+    }) => {
+        const currentData = this.state.data;
+
+        if (props && props.id) {
+            const keyIndex = currentData.findIndex((dialog) => dialog.id === props.id);
+
+            if (keyIndex !== -1) {
+                currentData.splice(keyIndex, 1);
+
+                this.setState({
+                    data: currentData
+                });
+            }
+
+            return;
+        }
+
+        if (props && props.index !== undefined) {
+            currentData.splice(props.index, 1);
+
+            this.setState({
+                data: currentData
+            });
+
+            return;
+        }
+
+        currentData.pop();
+
+        this.setState({
+            data: currentData
+        });
+    };
+
+    Render = ({
+        children
+    }: {
+        children: ReactNode;
+    }) => {
+        const {
+            data
+        } = this.useContext();
+
+        return <Fragment>
+            {children}
+            {data.map((item: DialogDataType) => {
+                return <Dialog
+                    key={`NCoreUIKit-Dialog-${item.id}`}
+                    id={item.id as string}
+                    onClosed={() => {
+                        if(item.onClosed) {
+                            item.onClosed({
+                                id: item.id as string
+                            });
+                        }
+
+                        if(item.isAutoClosed === undefined || item.isAutoClosed === true) {
+                            this.close({
+                                id: item.id
+                            });
+                        }
+                    }}
+                    {...item}
+                />;
+            })}
+        </Fragment>;
+    };
+}
+export default NCoreUIKitDialog;

package/src/context/embeddedMenu.tsx

@@ -0,0 +1,292 @@
+import {
+    type ReactNode
+} from "react";
+import {
+    View
+} from "react-native";
+import {
+    type EmbeddedMenuContextType,
+    type EmbeddedMenuDataType
+} from "../types/embeddedMenu";
+import NCoreContext, {
+    type ConfigType
+} from "ncore-context";
+import EmbeddedMenu from "../components/embeddedMenu";
+import {
+    uuid
+} from "../utils";
+
+class NCoreUIKitEmbeddedMenu extends NCoreContext<EmbeddedMenuContextType, ConfigType<EmbeddedMenuContextType>> {
+    constructor({
+        data = []
+    }: {
+        data?: Array<EmbeddedMenuDataType>
+    }) {
+        super({
+            get: () => undefined,
+            unload: () => "",
+            update: () => {},
+            close: () => {},
+            load: () => "",
+            open: () => {},
+            data: data
+        }, {
+            key: "NCoreUIKit-MenuContext"
+        });
+    };
+
+    load = (menuData: EmbeddedMenuDataType) => {
+        const currentData = this.state.data;
+
+        const menuID = menuData.id ? menuData.id : uuid();
+
+        currentData.push({
+            ...menuData,
+            id: menuID
+        });
+
+        this.setState({
+            data: currentData
+        });
+
+        return menuID;
+    };
+
+    get = ({
+        index,
+        id
+    }: {
+        index?: number;
+        id?: string;
+    }) => {
+        const currentData = this.state.data;
+
+        if(id) {
+            const currentIndex = currentData.findIndex(cI => cI.id === id);
+
+            return currentData[currentIndex];
+        }
+
+        if(index) {
+            return currentData[index];
+        }
+
+        return undefined;
+    };
+
+    update = ({
+        menuData,
+        index,
+        id
+    }: {
+        menuData: EmbeddedMenuDataType;
+        index?: number;
+        id?: string;
+    }) => {
+        const currentData = this.state.data;
+
+        if(id) {
+            const currentIndex = currentData.findIndex(cI => cI.id === id);
+
+            currentData[currentIndex] = menuData;
+        }
+
+        if(index) {
+            currentData[index] = menuData;
+        }
+
+        this.setState({
+            data: currentData
+        });
+    };
+
+    open = (props?: {
+        index?: number;
+        id?: string;
+    }) => {
+        const currentData = this.state.data;
+
+        if (props && props.id) {
+            const keyIndex = currentData.findIndex((menu) => menu.id === props.id);
+
+            if (keyIndex !== -1) {
+                currentData[keyIndex]!.isCollapse = true;
+
+                this.setState({
+                    data: currentData
+                });
+            }
+
+            return;
+        }
+
+        if (props && props.index !== undefined && currentData[props.index]) {
+            currentData[props.index!]!.isCollapse = true;
+
+            this.setState({
+                data: currentData
+            });
+
+            return;
+        }
+    };
+
+    close = (props?: {
+        index?: number;
+        id?: string;
+    }) => {
+        const currentData = this.state.data;
+
+        if (props && props.id) {
+            const keyIndex = currentData.findIndex((menu) => menu.id === props.id);
+
+            if (keyIndex !== -1) {
+                currentData[keyIndex]!.isCollapse = false;
+
+                this.setState({
+                    data: currentData
+                });
+            }
+
+            return;
+        }
+
+        if (props && props.index !== undefined && currentData[props.index]) {
+            currentData[props.index!]!.isCollapse = false;
+
+            this.setState({
+                data: currentData
+            });
+
+            return;
+        }
+    };
+
+    unload = (props?: {
+        index?: number;
+        id?: string;
+    }) => {
+        const currentData = this.state.data;
+
+        if (props && props.id) {
+            const keyIndex = currentData.findIndex((menu) => menu.id === props.id);
+
+            if (keyIndex !== -1) {
+                currentData.splice(keyIndex, 1);
+
+                this.setState({
+                    data: currentData
+                });
+            }
+
+            return;
+        }
+
+        if (props && props.index !== undefined) {
+            currentData.splice(props.index, 1);
+
+            this.setState({
+                data: currentData
+            });
+
+            return;
+        }
+
+        currentData.pop();
+
+        this.setState({
+            data: currentData
+        });
+    };
+
+    Render = ({
+        headerSpace,
+        navigation,
+        children,
+        index,
+        id
+    }: {
+        navigation: NCoreUIKit.Navigation;
+        children?: ReactNode;
+        headerSpace?: number;
+        index?: number;
+        id?: string;
+    }) => {
+        const {
+            data
+        } = this.useContext();
+
+        const renderMenu = ({
+            currentMenu
+        }: {
+            currentMenu: EmbeddedMenuDataType;
+        }) => {
+            return <EmbeddedMenu
+                {...currentMenu}
+                key={`NCoreUIKit-Menu-${currentMenu.id}`}
+                id={currentMenu.id as string}
+                headerSpace={headerSpace}
+                close={() => {
+                    if(currentMenu.isAutoClosed) {
+                        this.close({
+                            id: currentMenu.id,
+                            index: index
+                        });
+                    }
+                }}
+                onClosed={() => {
+                    if(currentMenu.onClosed) {
+                        currentMenu.onClosed({
+                            id: currentMenu.id
+                        });
+                    }
+
+                    if(currentMenu.isAutoClosedOnClosed === undefined || currentMenu.isAutoClosedOnClosed === true) {
+                        this.close({
+                            id: currentMenu.id,
+                            index: index
+                        });
+                    }
+                }}
+                navigation={navigation}
+            />;
+        };
+
+        if(id || index) {
+            const currentMenu = data.find((dItem, dIndex) => {
+                if(id) {
+                    return dItem.id === id;
+                } else {
+                    return dIndex === index;
+                }
+            });
+
+            if(!currentMenu) {
+                return null;
+            }
+
+            if(children) {
+                return <View
+                    style={[
+                        {
+                            flexDirection: "row",
+                            flex: 1
+                        }
+                    ]}
+                >
+                    {renderMenu({
+                        currentMenu
+                    })}
+                    {children}
+                </View>;
+            }
+
+            return renderMenu({
+                currentMenu
+            });
+        }
+
+        return null;
+    };
+}
+export default NCoreUIKitEmbeddedMenu;

package/src/context/index.tsx

@@ -0,0 +1,132 @@
+import {
+    type ReactNode
+} from "react";
+import NCoreUIKitEmbeddedMenu from "./embeddedMenu";
+import NCoreUIKitBottomSheet from "./bottomSheet";
+import NCoreUIKitLocalize from "./localize";
+import NCoreUIKitSnackBar from "./snackBar";
+import NCoreUIKitDialog from "./dialog";
+import NCoreUIKitModal from "./modal";
+import NCoreUIKitTheme from "./theme";
+import NCoreUIKitToast from "./toast";
+import NCoreUIKitMenu from "./menu";
+import {
+    type NCoreUIKitConfig
+} from "../types";
+import {
+    Host
+} from "../helpers/portalize";
+
+class CoreContext<T extends NCoreUIKitConfig> {
+    NCoreUIKitEmbeddedMenu: NCoreUIKitEmbeddedMenu;
+    NCoreUIKitBottomSheet: NCoreUIKitBottomSheet;
+    NCoreUIKitLocalize: NCoreUIKitLocalize<T>;
+    NCoreUIKitSnackBar: NCoreUIKitSnackBar;
+    NCoreUIKitTheme: NCoreUIKitTheme<T>;
+    NCoreUIKitDialog: NCoreUIKitDialog;
+    NCoreUIKitModal: NCoreUIKitModal;
+    NCoreUIKitToast: NCoreUIKitToast;
+    NCoreUIKitMenu: NCoreUIKitMenu;
+
+    constructor(initialState: T) {
+        this.NCoreUIKitTheme = new NCoreUIKitTheme({
+            initialSelectedActiveSharpness: initialState.initialSelectedActiveSharpness,
+            initialSelectedGapPropagation: initialState.initialSelectedGapPropagation,
+            initialSelectedPalette: initialState.initialSelectedPalette,
+            initialSelectedTheme: initialState.initialSelectedTheme,
+            projectThemes: initialState.projectThemes
+        });
+
+        this.NCoreUIKitLocalize = new NCoreUIKitLocalize({
+            initialSelectedLocale: initialState.initialSelectedLocale,
+            projectLocales: initialState.projectLocales
+        });
+
+        this.NCoreUIKitModal = new NCoreUIKitModal({
+            data: []
+        });
+
+        this.NCoreUIKitToast = new NCoreUIKitToast({
+            data: []
+        });
+
+        this.NCoreUIKitSnackBar = new NCoreUIKitSnackBar({
+            data: []
+        });
+
+        this.NCoreUIKitDialog = new NCoreUIKitDialog({
+            data: []
+        });
+
+        this.NCoreUIKitBottomSheet = new NCoreUIKitBottomSheet({
+            data: []
+        });
+
+        this.NCoreUIKitMenu = new NCoreUIKitMenu({
+            data: []
+        });
+
+        this.NCoreUIKitEmbeddedMenu = new NCoreUIKitEmbeddedMenu({
+            data: []
+        });
+    }
+
+    Provider = ({
+        children
+    }: {
+        children: ReactNode
+    }) => {
+        const EmbeddedMenuContext = this.NCoreUIKitEmbeddedMenu;
+        const BottomSheetContext = this.NCoreUIKitBottomSheet;
+        const LocalizeContext = this.NCoreUIKitLocalize;
+        const SnackBarContext = this.NCoreUIKitSnackBar;
+        const DialogContext = this.NCoreUIKitDialog;
+        const ModalContext = this.NCoreUIKitModal;
+        const ToastContext = this.NCoreUIKitToast;
+        const ThemeContext = this.NCoreUIKitTheme;
+        const MenuContext = this.NCoreUIKitMenu;
+
+        return <ThemeContext.Provider>
+            <LocalizeContext.Provider>
+                <Host name="snack-bar-system">
+                    <SnackBarContext.Provider>
+                        <SnackBarContext.Render>
+                            <Host name="toast-system">
+                                <Host name="modal-system">
+                                    <ModalContext.Provider>
+                                        <ModalContext.Render>
+                                            <DialogContext.Provider>
+                                                <DialogContext.Render>
+                                                    <ToastContext.Provider>
+                                                        <ToastContext.Render>
+                                                            <Host name="bottomSheet-system">
+                                                                <BottomSheetContext.Provider>
+                                                                    <BottomSheetContext.Render>
+                                                                        <Host name="menu-system">
+                                                                            <MenuContext.Provider>
+                                                                                <MenuContext.Render>
+                                                                                    <EmbeddedMenuContext.Provider>
+                                                                                        {children}
+                                                                                    </EmbeddedMenuContext.Provider>
+                                                                                </MenuContext.Render>
+                                                                            </MenuContext.Provider>
+                                                                        </Host>
+                                                                    </BottomSheetContext.Render>
+                                                                </BottomSheetContext.Provider>
+                                                            </Host>
+                                                        </ToastContext.Render>
+                                                    </ToastContext.Provider>
+                                                </DialogContext.Render>
+                                            </DialogContext.Provider>
+                                        </ModalContext.Render>
+                                    </ModalContext.Provider>
+                                </Host>
+                            </Host>
+                        </SnackBarContext.Render>
+                    </SnackBarContext.Provider>
+                </Host>
+            </LocalizeContext.Provider>
+        </ThemeContext.Provider>;
+    };
+};
+export default CoreContext;