ncore-ui-kit 1.0.0-pre-alpha.0

package/lib/src/context/localize.js

@@ -0,0 +1,135 @@
+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
+        }, {
+            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 = {
+            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 newState = {
+            activeLocale: currentProjectLocale.locale,
+            // localizeWithObject: this.localizeWithObject,
+            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/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;

package/lib/src/context/snackBar.js

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

package/lib/src/context/theme.js

@@ -0,0 +1,127 @@
+import { useContext } from "react";
+import {} from "../types";
+import NCoreContext, {} from "ncore-context";
+import { mergeTypographyTokens, mergePalettes, mergeShapes } from "../helpers";
+import _defaultPaletteData from "../variants/themes/default.json";
+import { androidTypographyFixer } from "../utils";
+const defaultPaletteData = androidTypographyFixer(_defaultPaletteData);
+class NCoreUIKitTheme extends NCoreContext {
+    projectThemes = defaultPaletteData;
+    useContext = ({ gapPropagation, paletteKey, sharpness, themeKey } = {}) => {
+        const currentState = useContext(this.stateContext);
+        if (gapPropagation ||
+            paletteKey ||
+            sharpness ||
+            themeKey) {
+            const activeState = this.prepare({
+                activeGapPropagation: gapPropagation ? gapPropagation : currentState.activeGapPropagation,
+                activeSharpness: sharpness ? sharpness : currentState.activeSharpness,
+                activePalette: paletteKey ? paletteKey : currentState.activePalette,
+                activeTheme: themeKey ? themeKey : currentState.activeTheme
+            });
+            return {
+                ...currentState,
+                ...activeState
+            };
+        }
+        return currentState;
+    };
+    constructor(initialState) {
+        const { projectThemes, initialSelectedActiveSharpness, initialSelectedGapPropagation, initialSelectedPalette, initialSelectedTheme } = initialState;
+        const initialPalette = defaultPaletteData.palettes.find(p => p.name === "nibgat");
+        if (!initialPalette) {
+            throw new Error("Initial Theme error!.");
+        }
+        const initialTheme = initialPalette.themes[initialSelectedTheme];
+        super({
+            activeGapPropagation: initialSelectedGapPropagation ?? "compact",
+            activeSharpness: initialSelectedActiveSharpness ?? "soft",
+            inlineSpaces: defaultPaletteData.shapes.inlineSpaces,
+            typography: defaultPaletteData.typography.spacious,
+            radiuses: defaultPaletteData.shapes.radiuses.soft,
+            spaces: defaultPaletteData.shapes.spaces.spacious,
+            activePalette: initialSelectedPalette ?? "nibgat",
+            activeTheme: initialSelectedTheme ?? "dark",
+            borders: defaultPaletteData.shapes.borders,
+            colors: initialTheme
+        }, {
+            key: "NCoreUIKitTheme"
+        });
+        this.projectThemes = projectThemes;
+        const activeState = this.prepare({
+            activeGapPropagation: initialSelectedGapPropagation ?? "compact",
+            activeSharpness: initialSelectedActiveSharpness ?? "soft",
+            activePalette: initialSelectedPalette ?? "nibgat",
+            activeTheme: initialSelectedTheme ?? "dark"
+        });
+        this.state = activeState;
+    }
+    prepare = (props) => {
+        const gapPropagation = props && props.activeGapPropagation ? props.activeGapPropagation : this.state.activeGapPropagation;
+        const sharpness = props && props.activeSharpness ? props.activeSharpness : this.state.activeSharpness;
+        const palette = props && props.activePalette ? props.activePalette : this.state.activePalette;
+        const theme = props && props.activeTheme ? props.activeTheme : this.state.activeTheme;
+        const defaultPalette = defaultPaletteData.palettes.find(p => p.name === palette) ?? defaultPaletteData.palettes[0];
+        const defaultTheme = defaultPalette.themes[theme] ?? defaultPalette.themes.dark;
+        const defaultState = {
+            typography: defaultPaletteData.typography[gapPropagation],
+            spaces: defaultPaletteData.shapes.spaces[gapPropagation],
+            radiuses: defaultPaletteData.shapes.radiuses[sharpness],
+            inlineSpaces: defaultPaletteData.shapes.inlineSpaces,
+            borders: defaultPaletteData.shapes.borders,
+            activeGapPropagation: gapPropagation,
+            activeSharpness: sharpness,
+            activePalette: palette,
+            colors: defaultTheme,
+            activeTheme: theme
+        };
+        if (!this.projectThemes || (this.projectThemes && !this.projectThemes.palettes.length)) {
+            return defaultState;
+        }
+        const currentProjectPalette = this.projectThemes.palettes.find(p => p.name === palette);
+        if (!currentProjectPalette) {
+            return defaultState;
+        }
+        const currentProjectTheme = currentProjectPalette.themes[theme];
+        if (!currentProjectTheme) {
+            return defaultState;
+        }
+        const shapes = mergeShapes({
+            projectShapes: this.projectThemes.shapes,
+            defaultShapes: defaultPaletteData.shapes
+        });
+        const typography = mergeTypographyTokens({
+            defaultTypographyTokens: defaultPaletteData.typography,
+            projectTypographyTokens: this.projectThemes.typography
+        });
+        const colors = mergePalettes(defaultPaletteData.palettes, this.projectThemes.palettes, palette, theme);
+        const newState = {
+            typography: typography[gapPropagation],
+            spaces: shapes.spaces[gapPropagation],
+            activeGapPropagation: gapPropagation,
+            radiuses: shapes.radiuses[sharpness],
+            inlineSpaces: shapes.inlineSpaces,
+            activeSharpness: sharpness,
+            borders: shapes.borders,
+            activePalette: palette,
+            activeTheme: theme,
+            colors: colors
+        };
+        return newState;
+    };
+    switch = ({ gapPropagation, paletteKey, sharpness, themeKey }) => {
+        const activeState = this.prepare({
+            activeGapPropagation: gapPropagation ?? this.state.activeGapPropagation,
+            activeSharpness: sharpness ?? this.state.activeSharpness,
+            activePalette: paletteKey ?? this.state.activePalette,
+            activeTheme: themeKey ?? this.state.activeTheme
+        });
+        this.setState(activeState);
+    };
+    updateProjectTheme = (newProjectThemes, newState) => {
+        this.projectThemes = newProjectThemes;
+        const activeState = this.prepare(newState);
+        this.setState(activeState);
+    };
+}
+export default NCoreUIKitTheme;

package/lib/src/context/toast.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+import {} from "../types/toast";
+import NCoreContext, {} from "ncore-context";
+import Toast from "../components/toast";
+import { uuid } from "../utils";
+class NCoreUIKitToast extends NCoreContext {
+    constructor({ data = [] }) {
+        super({
+            close: () => { },
+            open: () => "",
+            data: data
+        }, {
+            key: "NCoreUIKit-ToastContext"
+        });
+    }
+    ;
+    open = (toastData) => {
+        const currentData = this.state.data;
+        const toastID = toastData.id ? toastData.id : uuid();
+        currentData.push({
+            ...toastData,
+            id: toastID
+        });
+        this.setState({
+            data: currentData
+        });
+        return toastID;
+    };
+    close = (props) => {
+        const currentData = this.state.data;
+        if (props && props.id) {
+            const keyIndex = currentData.findIndex((toast) => toast.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(Toast, { ...item, id: item.id, onClosed: (props) => {
+                            this.close({
+                                id: item.id
+                            });
+                            if (item.onClosed)
+                                item.onClosed(props);
+                        } }, `NCoreUIKit-Toast-${item.id}`);
+                })] });
+    };
+}
+export default NCoreUIKitToast;

package/lib/src/core/hooks.js

@@ -0,0 +1,16 @@
+export let NCoreUIKitBottomSheet;
+export let NCoreUIKitLocalize;
+export let NCoreUIKitTheme;
+export let NCoreUIKitSnackBar;
+export let NCoreUIKitDialog;
+export let NCoreUIKitModal;
+export let NCoreUIKitToast;
+export const initializeInstances = (NCoreUIKit) => {
+    NCoreUIKitBottomSheet = NCoreUIKit.NCoreUIKitContext.NCoreUIKitBottomSheet;
+    NCoreUIKitLocalize = NCoreUIKit.NCoreUIKitContext.NCoreUIKitLocalize;
+    NCoreUIKitSnackBar = NCoreUIKit.NCoreUIKitContext.NCoreUIKitSnackBar;
+    NCoreUIKitDialog = NCoreUIKit.NCoreUIKitContext.NCoreUIKitDialog;
+    NCoreUIKitTheme = NCoreUIKit.NCoreUIKitContext.NCoreUIKitTheme;
+    NCoreUIKitModal = NCoreUIKit.NCoreUIKitContext.NCoreUIKitModal;
+    NCoreUIKitToast = NCoreUIKit.NCoreUIKitContext.NCoreUIKitToast;
+};

package/lib/src/core/index.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import {} from "react";
+import { Platform } from "react-native";
+import { initializeInstances } from "./hooks";
+import { SafeAreaProvider } from "react-native-safe-area-context";
+import packageJSON from "../../package.json";
+import CoreContext from "../context";
+export const getNCoreUIKitVersion = () => packageJSON.version;
+export class NCoreUIKitBase {
+    NCoreUIKitContext;
+    constructor(initialState) {
+        this.NCoreUIKitContext = new CoreContext(initialState);
+    }
+    Provider = ({ children }) => {
+        const NCoreUIKitContext = this.NCoreUIKitContext;
+        return _jsx(SafeAreaProvider, { children: _jsx(NCoreUIKitContext.Provider, { children: children }) });
+    };
+}
+;
+let NCoreUIKit;
+export const setupNCoreUIKit = (initialState, isCustom = false) => {
+    if (isCustom) {
+        return new NCoreUIKitBase(initialState);
+    }
+    else {
+        NCoreUIKit = new NCoreUIKitBase(initialState);
+        initializeInstances(NCoreUIKit);
+        if (Platform.OS === "web") {
+            const globalRef = globalThis;
+            if (globalRef && typeof globalRef.document === "object" && globalRef.document !== null) {
+                const doc = globalRef.document;
+                const styleId = "cl-rnw-touchable-fix";
+                if (typeof doc.getElementById === "function" && !doc.getElementById(styleId)) {
+                    if (typeof doc.createElement === "function" && doc.head && typeof doc.head === "object") {
+                        const style = doc.createElement("style");
+                        if (style) {
+                            style.id = styleId;
+                            style.type = "text/css";
+                            style.innerHTML = `
+                                html, body, #root {
+                                    touch-action: none;
+                                    overflow: hidden;
+                                }
+
+                                [role="button"],
+                                [data-focusable="true"],
+                                div[tabindex="0"] {
+                                    cursor: pointer !important;
+                                    transition: opacity 0.15s ease-in-out, transform 0.1s ease-in-out !important;
+                                }
+
+                                [role="button"]:not([data-disable-pressable-hover-effect="true"]):hover,
+                                [data-focusable="true"]:not([data-disable-pressable-hover-effect="true"]):hover,
+                                div[tabindex="0"]:not([data-disable-pressable-hover-effect="true"]):hover {
+                                    opacity: 0.8 !important;
+                                }
+
+                                [role="button"]:not([data-disable-pressable-down-effect="true"]):active,
+                                [data-focusable="true"]:not([data-disable-pressable-down-effect="true"]):active,
+                                div[tabindex="0"]:not([data-disable-pressable-down-effect="true"]):active {
+                                    opacity: 0.5 !important;
+                                    transform: translateY(2px) !important;
+                                }
+
+                                input,
+                                textarea,
+                                select,
+                                [role="textinput"],
+                                div[tabindex]:focus {
+                                    outline: none !important;
+                                    box-shadow: none !important;
+                                }
+                            `;
+                            const head = doc.head;
+                            if (typeof head.appendChild === "function") {
+                                head.appendChild(style);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        return NCoreUIKit;
+    }
+};

package/lib/src/helpers/index.js

@@ -0,0 +1,4 @@
+export { mergeRadiuses, mergeBorders, mergeSpaces, mergeShapes } from "./theme/shapes";
+export { mergeTypographyTokens, mergeTypography } from "./theme/typography";
+export { mergePalettes, mergeTheme } from "./theme/palette";
+export { parseRRuleConfig } from "./locale";

package/lib/src/helpers/locale/index.js

@@ -0,0 +1,20 @@
+export const parseRRuleConfig = (rawConfig) => {
+    const tokens = {};
+    Object.keys(rawConfig.tokens).forEach((key) => {
+        let pattern = rawConfig.tokens[key];
+        let flags = "";
+        if (pattern.endsWith("/i")) {
+            pattern = pattern.slice(0, -2).replace(/^\^?/, "^");
+            flags = "i";
+        }
+        if (pattern.startsWith("/") && pattern.endsWith("/")) {
+            pattern = pattern.slice(1, -1);
+        }
+        tokens[key] = new RegExp(pattern, flags);
+    });
+    return {
+        monthNames: rawConfig.monthNames,
+        dayNames: rawConfig.dayNames,
+        tokens: tokens
+    };
+};

package/lib/src/helpers/portalize/Consumer.js

@@ -0,0 +1,31 @@
+import { useEffect, useRef } from "react";
+import {} from "./Host";
+;
+export const Consumer = ({ children, manager, name }) => {
+    const key = useRef(undefined);
+    const checkManager = () => {
+        if (!manager) {
+            throw new Error("No portal manager defined");
+        }
+    };
+    const handleInit = () => {
+        checkManager();
+        key.current = manager?.mount(children, name);
+    };
+    useEffect(() => {
+        checkManager();
+        manager?.update(key.current, children, name);
+    }, [
+        children,
+        manager,
+        name
+    ]);
+    useEffect(() => {
+        handleInit();
+        return () => {
+            checkManager();
+            manager?.unmount(key.current);
+        };
+    }, []);
+    return null;
+};

package/lib/src/helpers/portalize/Host.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useEffect, useRef } from "react";
+import { View } from "react-native";
+import { useKey } from "./hooks/useKey";
+import { Manager } from "./Manager";
+import { context } from "./context";
+export const Context = createContext(null);
+export const Host = ({ children, style, name }) => {
+    const managerRef = useRef(null);
+    const queue = [];
+    const { generateKey, removeKey } = useKey();
+    useEffect(() => {
+        while (queue.length && managerRef.current) {
+            const action = queue.pop();
+            if (action) {
+                switch (action.type) {
+                    case "mount":
+                        managerRef.current?.mount(action.key, action.children, action.name);
+                        break;
+                    case "update":
+                        managerRef.current?.update(action.key, action.children, action.name);
+                        break;
+                    case "unmount":
+                        managerRef.current?.unmount(action.key);
+                        break;
+                }
+            }
+        }
+    }, []);
+    const mount = (children, _name) => {
+        const key = generateKey();
+        const targetName = _name ?? name;
+        context.mount(key, children, targetName);
+        return key;
+    };
+    const update = (key, children, _name) => {
+        const targetName = _name ?? name;
+        context.update(key, children, targetName);
+    };
+    const unmount = (key) => {
+        context.unmount(key);
+        removeKey(key);
+    };
+    return _jsxs(Context.Provider, { value: {
+            unmount,
+            update,
+            mount,
+            name
+        }, children: [_jsx(View, { pointerEvents: "box-none", collapsable: false, style: [
+                    {
+                        flex: 1
+                    },
+                    style
+                ], children: children }), _jsx(Manager, { ref: managerRef, name: name })] });
+};