ncore-ui-kit 1.0.0-alpha.0

package/src/context/localize.tsx

@@ -0,0 +1,213 @@
+import {
+    type ReactElement,
+    type ReactNode,
+    useContext
+} from "react";
+import type ITextProps from "../components/text/type";
+import {
+    type LocalizeContextStateType,
+    type LocalizeContextType,
+    type LocalizeType
+} from "../types";
+import NCoreContext, {
+    type ConfigType
+} from "ncore-context";
+import Text from "../components/text";
+import {
+    uuid
+} from "../utils";
+import defaultLocalesData from "../variants/locales/default.json";
+
+class NCoreUIKitLocalize<T extends LocalizeType> extends NCoreContext<LocalizeContextType, ConfigType<LocalizeContextType>> {
+    projectLocales?: NCoreUIKit.Locales = undefined;
+
+    useContext = ({
+        activeLocale
+    }: {
+        activeLocale?: keyof NCoreUIKit.LocaleKey
+    } = {}): LocalizeContextType => {
+        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: T) {
+        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 as LocalizeContextType;
+    }
+
+    prepare = (props?: {
+        activeLocale?: keyof NCoreUIKit.LocaleKey
+    }): LocalizeContextStateType => {
+        const locale = props && props.activeLocale ? props.activeLocale : this.state.activeLocale;
+
+        const defaultLocale = defaultLocalesData.find(l => l.locale === locale) ?? defaultLocalesData[0]!;
+
+        const defaultState: LocalizeContextStateType = {
+            localeKeys: defaultLocalesData.map(lDI => lDI.locale) as Array<keyof NCoreUIKit.LocaleKey>,
+            activeLocale: defaultLocale.locale as keyof NCoreUIKit.LocaleKey,
+            // 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: LocalizeContextStateType = {
+            activeLocale: currentProjectLocale.locale as keyof NCoreUIKit.LocaleKey,
+            localeKeys: dLKeys as Array<keyof NCoreUIKit.LocaleKey>,
+            // localizeWithObject: this.localizeWithObject,
+            rruleConfig: {
+                ...defaultLocale.rruleConfig,
+                ...currentProjectLocale.rruleConfig
+            },
+            isRTL: currentProjectLocale.isRTL,
+            // localize: this.localize,
+            translations: {
+                ...defaultLocale.translations,
+                ...currentProjectLocale.translations
+            }
+        };
+
+        return newState;
+    };
+
+    localizeWithObject = (
+        translation: keyof NCoreUIKit.Translation,
+        parameters?: Array<string | ReactNode | ReactElement>,
+        props?: Array<ITextProps>
+    ) => {
+        try {
+            let translatedText: string | ReactNode[] = 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] ? <Text
+                            key={uuid()}
+                            {...props[index]}
+                        >{parameters[index]}</Text> : <Text key={uuid()}>{parameters[index]}</Text>
+                    ]).slice(0, -1);
+                });
+            }
+
+            return translatedText;
+        } catch(e) {
+            console.error(e);
+            return translation;
+        }
+    };
+
+    localize = (
+        translation: keyof NCoreUIKit.Translation,
+        parameters?: Array<string | number>
+    ) => {
+        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
+    }: {
+        localeKey: keyof NCoreUIKit.LocaleKey
+    }) => {
+        const activeState = this.prepare({
+            activeLocale: localeKey
+        });
+
+        this.setState(activeState);
+    };
+
+    updateProjectLocales = (newProjectLocales: NCoreUIKit.Locales, newState?: {
+        activeLocale?: keyof NCoreUIKit.LocaleKey
+    }) => {
+        this.projectLocales = newProjectLocales;
+        const activeState = this.prepare(newState);
+
+        this.setState(activeState);
+    };
+}
+export default NCoreUIKitLocalize;

package/src/context/menu.tsx

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

package/src/context/modal.tsx

@@ -0,0 +1,116 @@
+import {
+    type ReactNode,
+    Fragment
+} from "react";
+import {
+    type ModalContextType,
+    type ModalDataType
+} from "../types/modal";
+import NCoreContext, {
+    type ConfigType
+} from "ncore-context";
+import Modal from "../components/modal";
+import {
+    uuid
+} from "../utils";
+
+class NCoreUIKitModal extends NCoreContext<ModalContextType, ConfigType<ModalContextType>> {
+    constructor({
+        data = []
+    }: {
+        data?: Array<ModalDataType>
+    }) {
+        super({
+            close: () => {},
+            open: () => {},
+            data: data
+        }, {
+            key: "NCoreUIKit-ModalContext"
+        });
+    };
+
+    open = (modalData: ModalDataType) => {
+        const currentData = this.state.data;
+
+        const modalID = modalData.id ? modalData.id : uuid();
+
+        currentData.push({
+            ...modalData,
+            id: modalID
+        });
+
+        this.setState({
+            data: currentData
+        });
+    };
+
+    close = (props?: {
+        index?: number;
+        id?: string;
+    }) => {
+        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
+    }: {
+        children: ReactNode;
+    }) => {
+        const {
+            data
+        } = this.useContext();
+
+        return <Fragment>
+            {children}
+            {data.map((item: ModalDataType) => {
+                return <Modal
+                    key={`NCoreUIKit-Modal-${item.id}`}
+                    id={item.id as string}
+                    onClosed={() => {
+                        if(item.onClosed) item.onClosed({
+                            id: item.id as string
+                        });
+
+                        if(item.isAutoClose === undefined || item.isAutoClose === true) {
+                            this.close({
+                                id: item.id
+                            });
+                        }
+                    }}
+                    {...item}
+                />;
+            })}
+        </Fragment>;
+    };
+}
+export default NCoreUIKitModal;

package/src/context/snackBar.tsx

@@ -0,0 +1,114 @@
+import {
+    type ReactNode,
+    Fragment
+} from "react";
+import {
+    type SnackBarContextType,
+    type SnackBarDataType
+} from "../types/snackBar";
+import NCoreContext, {
+    type ConfigType
+} from "ncore-context";
+import SnackBar from "../components/snackBar";
+import {
+    uuid
+} from "../utils";
+
+class NCoreUIKitSnackBar extends NCoreContext<SnackBarContextType, ConfigType<SnackBarContextType>> {
+    constructor({
+        data = []
+    }: {
+        data?: Array<SnackBarDataType>
+    }) {
+        super({
+            close: () => {},
+            open: () => "",
+            data: data
+        }, {
+            key: "NCoreUIKit-SnackBarContext"
+        });
+    };
+
+    open = (snackBarData: SnackBarDataType) => {
+        const currentData = this.state.data;
+
+        const snackBarID = snackBarData.id ? snackBarData.id : uuid();
+
+        currentData.push({
+            ...snackBarData,
+            id: snackBarID
+        });
+
+        this.setState({
+            data: currentData
+        });
+
+        return snackBarID;
+    };
+
+    close = (props?: {
+        index?: number;
+        id?: string;
+    }) => {
+        const currentData = this.state.data;
+
+        if (props && props.id) {
+            const keyIndex = currentData.findIndex((snackBar) => snackBar.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: SnackBarDataType) => {
+                return <SnackBar
+                    key={`NCoreUIKit-SnackBar-${item.id}`}
+                    {...item}
+                    id={item.id as string}
+                    onClosed={(props) => {
+                        this.close({
+                            id: item.id
+                        });
+
+                        if(item.onClosed) item.onClosed(props);
+                    }}
+                />;
+            })}
+        </Fragment>;
+    };
+}
+export default NCoreUIKitSnackBar;