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

@@ -0,0 +1,110 @@
+import {
+    type ReactNode
+} from "react";
+import NCoreUIKitBottomSheet from "./bottomSheet";
+import NCoreUIKitDialog from "./dialog";
+import NCoreUIKitLocalize from "./localize";
+import NCoreUIKitModal from "./modal";
+import NCoreUIKitSnackBar from "./snackBar";
+import NCoreUIKitTheme from "./theme";
+import NCoreUIKitToast from "./toast";
+import {
+    type NCoreUIKitConfig
+} from "../types";
+import {
+    Host
+} from "../helpers/portalize";
+
+class CoreContext<T extends NCoreUIKitConfig> {
+    NCoreUIKitBottomSheet: NCoreUIKitBottomSheet;
+    NCoreUIKitLocalize: NCoreUIKitLocalize<T>;
+    NCoreUIKitSnackBar: NCoreUIKitSnackBar;
+    NCoreUIKitTheme: NCoreUIKitTheme<T>;
+    NCoreUIKitDialog: NCoreUIKitDialog;
+    NCoreUIKitModal: NCoreUIKitModal;
+    NCoreUIKitToast: NCoreUIKitToast;
+
+    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: []
+        });
+    }
+
+    Provider = ({
+        children
+    }: {
+        children: ReactNode
+    }) => {
+        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;
+
+        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>
+                                                                        {children}
+                                                                    </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;

package/src/context/localize.tsx

@@ -0,0 +1,202 @@
+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
+        }, {
+            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 = {
+            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 newState: LocalizeContextStateType = {
+            activeLocale: currentProjectLocale.locale as keyof NCoreUIKit.LocaleKey,
+            // localizeWithObject: this.localizeWithObject,
+            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/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;