ncore-ui-kit 1.0.0-alpha.0

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,154 @@
+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 === (initialSelectedPalette ?? "nibgat"));
+        if (!initialPalette) {
+            throw new Error("Initial Theme error!.");
+        }
+        const initialTheme = initialPalette.themes[initialSelectedTheme ?? "light"];
+        super({
+            paletteKeys: defaultPaletteData.palettes.map(p => p.name),
+            themeKeys: Object.keys(initialPalette.themes),
+            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,
+            configs: {
+                headerSpace: 0
+            }
+        }, {
+            key: "NCoreUIKitTheme"
+        });
+        this.projectThemes = projectThemes;
+        const activeState = this.prepare({
+            activeGapPropagation: initialSelectedGapPropagation ?? "compact",
+            activeSharpness: initialSelectedActiveSharpness ?? "soft",
+            activePalette: initialSelectedPalette ?? "nibgat",
+            activeTheme: initialSelectedTheme ?? "dark"
+        });
+        this.state = activeState;
+    }
+    updateConfigs = (configs) => {
+        this.setState({
+            configs: {
+                ...this.state.configs,
+                ...configs
+            }
+        });
+    };
+    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 = {
+            paletteKeys: defaultPaletteData.palettes.map(p => p.name),
+            themeKeys: Object.keys(defaultPalette.themes),
+            typography: defaultPaletteData.typography[gapPropagation],
+            spaces: defaultPaletteData.shapes.spaces[gapPropagation],
+            radiuses: defaultPaletteData.shapes.radiuses[sharpness],
+            inlineSpaces: defaultPaletteData.shapes.inlineSpaces,
+            borders: defaultPaletteData.shapes.borders,
+            activeGapPropagation: gapPropagation,
+            configs: this.state.configs,
+            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 dPKeys = [...new Set([
+                ...Object.keys(defaultPaletteData.palettes[0]?.themes ?? currentProjectPalette.themes),
+                ...Object.keys(this.projectThemes.palettes[0]?.themes ?? currentProjectPalette.themes)
+            ])];
+        const dPPKeys = [...new Set([
+                ...defaultPaletteData.palettes.map(p => p.name),
+                ...this.projectThemes.palettes.map(p => p.name)
+            ])];
+        const newState = {
+            paletteKeys: dPPKeys,
+            themeKeys: dPKeys,
+            typography: typography[gapPropagation],
+            spaces: shapes.spaces[gapPropagation],
+            activeGapPropagation: gapPropagation,
+            radiuses: shapes.radiuses[sharpness],
+            inlineSpaces: shapes.inlineSpaces,
+            configs: this.state.configs,
+            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,20 @@
+export let NCoreUIKitLocalize;
+export let NCoreUIKitEmbeddedMenu;
+export let NCoreUIKitBottomSheet;
+export let NCoreUIKitTheme;
+export let NCoreUIKitSnackBar;
+export let NCoreUIKitDialog;
+export let NCoreUIKitModal;
+export let NCoreUIKitToast;
+export let NCoreUIKitMenu;
+export const initializeInstances = (NCoreUIKit) => {
+    NCoreUIKitEmbeddedMenu = NCoreUIKit.NCoreUIKitContext.NCoreUIKitEmbeddedMenu;
+    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;
+    NCoreUIKitMenu = NCoreUIKit.NCoreUIKitContext.NCoreUIKitMenu;
+};

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,56 @@
+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, { collapsable: false, style: [
+                    {
+                        pointerEvents: "box-none",
+                        flex: 1
+                    },
+                    style
+                ], children: children }), _jsx(Manager, { ref: managerRef, name: name })] });
+};

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

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useImperativeHandle, forwardRef, useEffect, useState } from "react";
+import { StyleSheet, View } from "react-native";
+import { context } from "./context";
+export const Manager = forwardRef(({ name }, ref) => {
+    const [portals, setPortals] = useState([]);
+    useEffect(() => {
+        return context.subscribe((newPortals) => {
+            setPortals(newPortals);
+        });
+    }, []);
+    useImperativeHandle(ref, () => ({
+        unmount: context.unmount,
+        update: context.update,
+        mount: context.mount
+    }));
+    return portals
+        .filter(item => {
+        if (item.name) {
+            return item.name === name;
+        }
+        return !name;
+    })
+        .map(({ children, key }, index) => (_jsx(View, { style: [
+            StyleSheet.absoluteFill,
+            {
+                pointerEvents: "box-none"
+            }
+        ], collapsable: false, children: children }, `NCoreUIKit-Portal-${key}-${index}`)));
+});

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import {} from "react";
+import { Consumer } from "./Consumer";
+import { Context } from "./Host";
+export const Portal = ({ children, name }) => (_jsx(Context.Consumer, { children: (manager) => {
+        return _jsx(Consumer, { manager: manager, name: name, children: children });
+    } }));

package/lib/src/helpers/portalize/context/index.js

@@ -0,0 +1,33 @@
+let portals = [];
+const listeners = [];
+export const context = {
+    subscribe: (listener) => {
+        listeners.push(listener);
+        return () => {
+            listeners.splice(listeners.indexOf(listener), 1);
+        };
+    },
+    mount: (key, children, name) => {
+        portals = [
+            ...portals,
+            {
+                children,
+                name,
+                key
+            }
+        ];
+        listeners.forEach(l => l(portals));
+    },
+    update: (key, children, name) => {
+        portals = portals.map(p => p.key === key ? {
+            ...p,
+            children,
+            name
+        } : p);
+        listeners.forEach(l => l(portals));
+    },
+    unmount: (key) => {
+        portals = portals.filter(p => p.key !== key);
+        listeners.forEach(l => l(portals));
+    }
+};

package/lib/src/helpers/portalize/hooks/useKey.js

@@ -0,0 +1,33 @@
+import { useRef } from "react";
+const keyGenerator = () => {
+    return `portalize_${Math.random().toString(36).substr(2, 16)}-${Math.random()
+        .toString(36)
+        .substr(2, 16)}-${Math.random().toString(36).substr(2, 16)}`;
+};
+export const useKey = () => {
+    const usedKeys = useRef([]);
+    const generateKey = () => {
+        let foundUniqueKey = false;
+        let newKey = "";
+        let tries = 0;
+        while (!foundUniqueKey && tries < 3) {
+            tries++;
+            newKey = keyGenerator();
+            if (!usedKeys.current.includes(newKey)) {
+                foundUniqueKey = true;
+            }
+        }
+        if (!foundUniqueKey) {
+            newKey = `portalize_${Date.now()}_${Math.floor(Math.random() * 1000)}`;
+        }
+        usedKeys.current.push(newKey);
+        return newKey;
+    };
+    const removeKey = (key) => {
+        usedKeys.current = usedKeys.current.filter(k => k !== key);
+    };
+    return {
+        generateKey,
+        removeKey
+    };
+};

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

@@ -0,0 +1,4 @@
+export { Consumer } from "./Consumer";
+export { Host } from "./Host";
+export { Manager } from "./Manager";
+export { Portal } from "./Portal";