ncore-ui-kit 1.0.0-alpha.0

package/lib/src/context/dialog.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+import {} from "../types/dialog";
+import NCoreContext, {} from "ncore-context";
+import Dialog from "../components/dialog";
+import { uuid } from "../utils";
+class NCoreUIKitDialog extends NCoreContext {
+    constructor({ data = [] }) {
+        super({
+            close: () => { },
+            open: () => "",
+            data: data
+        }, {
+            key: "NCoreUIKit-DialogContext"
+        });
+    }
+    ;
+    open = (dialogData) => {
+        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) => {
+        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 }) => {
+        const { data } = this.useContext();
+        return _jsxs(Fragment, { children: [children, data.map((item) => {
+                    return _jsx(Dialog, { id: item.id, onClosed: () => {
+                            if (item.onClosed) {
+                                item.onClosed({
+                                    id: item.id
+                                });
+                            }
+                            if (item.isAutoClosed === undefined || item.isAutoClosed === true) {
+                                this.close({
+                                    id: item.id
+                                });
+                            }
+                        }, ...item }, `NCoreUIKit-Dialog-${item.id}`);
+                })] });
+    };
+}
+export default NCoreUIKitDialog;

package/lib/src/context/embeddedMenu.js

@@ -0,0 +1,177 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import {} from "react";
+import { View } from "react-native";
+import {} from "../types/embeddedMenu";
+import NCoreContext, {} from "ncore-context";
+import EmbeddedMenu from "../components/embeddedMenu";
+import { uuid } from "../utils";
+class NCoreUIKitEmbeddedMenu extends NCoreContext {
+    constructor({ data = [] }) {
+        super({
+            get: () => undefined,
+            unload: () => "",
+            update: () => { },
+            close: () => { },
+            load: () => "",
+            open: () => { },
+            data: data
+        }, {
+            key: "NCoreUIKit-MenuContext"
+        });
+    }
+    ;
+    load = (menuData) => {
+        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 }) => {
+        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 }) => {
+        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) => {
+        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) => {
+        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) => {
+        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 }) => {
+        const { data } = this.useContext();
+        const renderMenu = ({ currentMenu }) => {
+            return _createElement(EmbeddedMenu, { ...currentMenu, key: `NCoreUIKit-Menu-${currentMenu.id}`, id: currentMenu.id, 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 _jsxs(View, { style: [
+                        {
+                            flexDirection: "row",
+                            flex: 1
+                        }
+                    ], children: [renderMenu({
+                            currentMenu
+                        }), children] });
+            }
+            return renderMenu({
+                currentMenu
+            });
+        }
+        return null;
+    };
+}
+export default NCoreUIKitEmbeddedMenu;

package/lib/src/context/index.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import {} 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 {} from "../types";
+import { Host } from "../helpers/portalize";
+class CoreContext {
+    NCoreUIKitEmbeddedMenu;
+    NCoreUIKitBottomSheet;
+    NCoreUIKitLocalize;
+    NCoreUIKitSnackBar;
+    NCoreUIKitTheme;
+    NCoreUIKitDialog;
+    NCoreUIKitModal;
+    NCoreUIKitToast;
+    NCoreUIKitMenu;
+    constructor(initialState) {
+        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 }) => {
+        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 _jsx(ThemeContext.Provider, { children: _jsx(LocalizeContext.Provider, { children: _jsx(Host, { name: "snack-bar-system", children: _jsx(SnackBarContext.Provider, { children: _jsx(SnackBarContext.Render, { children: _jsx(Host, { name: "toast-system", children: _jsx(Host, { name: "modal-system", children: _jsx(ModalContext.Provider, { children: _jsx(ModalContext.Render, { children: _jsx(DialogContext.Provider, { children: _jsx(DialogContext.Render, { children: _jsx(ToastContext.Provider, { children: _jsx(ToastContext.Render, { children: _jsx(Host, { name: "bottomSheet-system", children: _jsx(BottomSheetContext.Provider, { children: _jsx(BottomSheetContext.Render, { children: _jsx(Host, { name: "menu-system", children: _jsx(MenuContext.Provider, { children: _jsx(MenuContext.Render, { children: _jsx(EmbeddedMenuContext.Provider, { children: children }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) });
+    };
+}
+;
+export default CoreContext;

package/lib/src/context/localize.js

@@ -0,0 +1,145 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import {} from "../types";
+import NCoreContext, {} from "ncore-context";
+import Text from "../components/text";
+import { uuid } from "../utils";
+import defaultLocalesData from "../variants/locales/default.json";
+class NCoreUIKitLocalize extends NCoreContext {
+    projectLocales = undefined;
+    useContext = ({ activeLocale } = {}) => {
+        const currentState = useContext(this.stateContext);
+        if (activeLocale) {
+            const activeState = this.prepare({
+                activeLocale: activeLocale ? activeLocale : currentState.activeLocale
+            });
+            return {
+                ...currentState,
+                ...activeState,
+                localizeWithObject: this.localizeWithObject,
+                localize: this.localize
+            };
+        }
+        return {
+            ...currentState,
+            localizeWithObject: this.localizeWithObject,
+            localize: this.localize
+        };
+    };
+    constructor(initialState) {
+        const { initialSelectedLocale, projectLocales } = initialState;
+        const initialLanguage = defaultLocalesData.find(l => l.locale === "tr-TR");
+        if (!initialLanguage) {
+            throw new Error("Initial Locale error!.");
+        }
+        super({
+            localizeWithObject: () => "Localization is loading...",
+            activeLocale: initialSelectedLocale ?? "tr-TR",
+            localize: () => "Localization is loading...",
+            translations: initialLanguage.translations,
+            rruleConfig: initialLanguage.rruleConfig,
+            isRTL: initialLanguage.isRTL,
+            localeKeys: []
+        }, {
+            key: "NCoreUIKitLocalize"
+        });
+        this.projectLocales = projectLocales;
+        const activeState = this.prepare({
+            activeLocale: initialSelectedLocale ?? "tr-TR"
+        });
+        this.state = activeState;
+    }
+    prepare = (props) => {
+        const locale = props && props.activeLocale ? props.activeLocale : this.state.activeLocale;
+        const defaultLocale = defaultLocalesData.find(l => l.locale === locale) ?? defaultLocalesData[0];
+        const defaultState = {
+            localeKeys: defaultLocalesData.map(lDI => lDI.locale),
+            activeLocale: defaultLocale.locale,
+            // localizeWithObject: this.localizeWithObject,
+            translations: defaultLocale.translations,
+            rruleConfig: defaultLocale.rruleConfig,
+            isRTL: defaultLocale.isRTL
+            // localize: this.localize
+        };
+        if (!this.projectLocales || (this.projectLocales && !this.projectLocales.length)) {
+            return defaultState;
+        }
+        const currentProjectLocale = this.projectLocales.find(l => l.locale === locale);
+        if (!currentProjectLocale) {
+            return defaultState;
+        }
+        const dLKeys = [...new Set([
+                ...defaultLocalesData.map(p => p.locale),
+                ...this.projectLocales.map(p => p.locale)
+            ])];
+        const newState = {
+            activeLocale: currentProjectLocale.locale,
+            localeKeys: dLKeys,
+            // localizeWithObject: this.localizeWithObject,
+            rruleConfig: {
+                ...defaultLocale.rruleConfig,
+                ...currentProjectLocale.rruleConfig
+            },
+            isRTL: currentProjectLocale.isRTL,
+            // localize: this.localize,
+            translations: {
+                ...defaultLocale.translations,
+                ...currentProjectLocale.translations
+            }
+        };
+        return newState;
+    };
+    localizeWithObject = (translation, parameters, props) => {
+        try {
+            let translatedText = String(this.state.translations[translation]);
+            if (!translatedText) {
+                return translation;
+            }
+            if (parameters && parameters.length) {
+                parameters.forEach((_item, index) => {
+                    if (typeof translatedText !== "string")
+                        return;
+                    translatedText = translatedText.split(`{{${index}}}`).flatMap((item) => [
+                        item,
+                        props && props[index] ? _jsx(Text, { ...props[index], children: parameters[index] }, uuid()) : _jsx(Text, { children: parameters[index] }, uuid())
+                    ]).slice(0, -1);
+                });
+            }
+            return translatedText;
+        }
+        catch (e) {
+            console.error(e);
+            return translation;
+        }
+    };
+    localize = (translation, parameters) => {
+        try {
+            let translatedText = this.state.translations[translation];
+            if (!translatedText) {
+                return translation;
+            }
+            if (parameters && parameters.length) {
+                parameters.forEach((item, index) => {
+                    translatedText = translatedText.replace(`{{${index}}}`, String(item));
+                });
+            }
+            return translatedText;
+        }
+        catch (e) {
+            console.error(e);
+            return translation;
+        }
+    };
+    switch = ({ localeKey }) => {
+        const activeState = this.prepare({
+            activeLocale: localeKey
+        });
+        this.setState(activeState);
+    };
+    updateProjectLocales = (newProjectLocales, newState) => {
+        this.projectLocales = newProjectLocales;
+        const activeState = this.prepare(newState);
+        this.setState(activeState);
+    };
+}
+export default NCoreUIKitLocalize;

package/lib/src/context/menu.js

@@ -0,0 +1,148 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+import {} from "../types/menu";
+import NCoreContext, {} from "ncore-context";
+import Menu from "../components/menu";
+import { uuid } from "../utils";
+class NCoreUIKitMenu extends NCoreContext {
+    constructor({ data = [] }) {
+        super({
+            get: () => undefined,
+            unload: () => "",
+            update: () => { },
+            close: () => { },
+            load: () => "",
+            open: () => { },
+            data: data
+        }, {
+            key: "NCoreUIKit-MenuContext"
+        });
+    }
+    ;
+    load = (menuData) => {
+        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 }) => {
+        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 }) => {
+        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) => {
+        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) => {
+        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) => {
+        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 = ({ children }) => {
+        const { data } = this.useContext();
+        return _jsxs(Fragment, { children: [children, data.map((item, index) => {
+                    return _jsx(Menu, { id: item.id, close: () => {
+                            if (item.isAutoClosed) {
+                                this.close({
+                                    index: index,
+                                    id: item.id
+                                });
+                            }
+                        }, onClosed: () => {
+                            if (item.onClosed) {
+                                item.onClosed({
+                                    id: item.id
+                                });
+                            }
+                            if (item.isAutoClosedOnClosed === undefined || item.isAutoClosedOnClosed === true) {
+                                this.close({
+                                    index: index,
+                                    id: item.id
+                                });
+                            }
+                        }, ...item }, `NCoreUIKit-Menu-${item.id}`);
+                })] });
+    };
+}
+export default NCoreUIKitMenu;

package/lib/src/context/modal.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+import {} from "../types/modal";
+import NCoreContext, {} from "ncore-context";
+import Modal from "../components/modal";
+import { uuid } from "../utils";
+class NCoreUIKitModal extends NCoreContext {
+    constructor({ data = [] }) {
+        super({
+            close: () => { },
+            open: () => { },
+            data: data
+        }, {
+            key: "NCoreUIKit-ModalContext"
+        });
+    }
+    ;
+    open = (modalData) => {
+        const currentData = this.state.data;
+        const modalID = modalData.id ? modalData.id : uuid();
+        currentData.push({
+            ...modalData,
+            id: modalID
+        });
+        this.setState({
+            data: currentData
+        });
+    };
+    close = (props) => {
+        const currentData = this.state.data;
+        if (props && props.id) {
+            const keyIndex = currentData.findIndex((modal) => modal.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 }) => {
+        const { data } = this.useContext();
+        return _jsxs(Fragment, { children: [children, data.map((item) => {
+                    return _jsx(Modal, { id: item.id, onClosed: () => {
+                            if (item.onClosed)
+                                item.onClosed({
+                                    id: item.id
+                                });
+                            if (item.isAutoClose === undefined || item.isAutoClose === true) {
+                                this.close({
+                                    id: item.id
+                                });
+                            }
+                        }, ...item }, `NCoreUIKit-Modal-${item.id}`);
+                })] });
+    };
+}
+export default NCoreUIKitModal;