ncore-ui-kit 1.0.0-alpha.0

package/src/context/theme.tsx

@@ -0,0 +1,248 @@
+import {
+    useContext
+} from "react";
+import {
+    type ThemeContextStateType,
+    type GapPropagationType,
+    type ThemeContextType,
+    type SharpnessType,
+    type ThemesType,
+    type ThemeConfigs
+} from "../types";
+import NCoreContext, {
+    type ConfigType
+} 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<T extends ThemesType> extends NCoreContext<ThemeContextType, ConfigType<ThemeContextType>> {
+    projectThemes?: NCoreUIKit.Palette = defaultPaletteData;
+
+    useContext = ({
+        gapPropagation,
+        paletteKey,
+        sharpness,
+        themeKey
+    }: {
+        paletteKey?: keyof NCoreUIKit.PaletteKey;
+        themeKey?: keyof NCoreUIKit.ThemeKey;
+        gapPropagation?: GapPropagationType;
+        sharpness?: SharpnessType;
+    } = {}): ThemeContextType => {
+        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: T) {
+        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) as Array<keyof NCoreUIKit.PaletteKey>,
+            themeKeys: Object.keys(initialPalette.themes) as Array<keyof NCoreUIKit.ThemeKey>,
+            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 as ThemeContextType;
+    }
+
+    updateConfigs = (configs: Partial<ThemeConfigs>) => {
+        this.setState({
+            configs: {
+                ...this.state.configs,
+                ...configs
+            }
+        });
+    };
+
+    prepare = (props?: {
+        activePalette?: keyof NCoreUIKit.PaletteKey;
+        activeGapPropagation?: GapPropagationType;
+        activeTheme?: keyof NCoreUIKit.ThemeKey;
+        activeSharpness?: SharpnessType;
+    }): ThemeContextStateType => {
+        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 as keyof typeof defaultPalette.themes] ?? defaultPalette.themes.dark;
+
+        const defaultState: ThemeContextStateType = {
+            paletteKeys: defaultPaletteData.palettes.map(p => p.name) as Array<keyof NCoreUIKit.PaletteKey>,
+            themeKeys: Object.keys(defaultPalette.themes) as Array<keyof NCoreUIKit.ThemeKey>,
+            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: ThemeContextStateType = {
+            paletteKeys: dPPKeys as Array<keyof NCoreUIKit.PaletteKey>,
+            themeKeys: dPKeys as Array<keyof NCoreUIKit.ThemeKey>,
+            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
+    }: {
+        paletteKey?: keyof NCoreUIKit.PaletteKey;
+        themeKey?: keyof NCoreUIKit.ThemeKey;
+        gapPropagation?: GapPropagationType;
+        sharpness?: SharpnessType;
+    }) => {
+        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: NCoreUIKit.Palette, newState?: {
+        activePalette?: keyof NCoreUIKit.PaletteKey;
+        activeGapPropagation?: GapPropagationType;
+        activeTheme?: keyof NCoreUIKit.ThemeKey;
+        activeSharpness?: SharpnessType;
+    }) => {
+        this.projectThemes = newProjectThemes;
+        const activeState = this.prepare(newState);
+
+        this.setState(activeState);
+    };
+}
+export default NCoreUIKitTheme;

package/src/context/toast.tsx

@@ -0,0 +1,114 @@
+import {
+    type ReactNode,
+    Fragment
+} from "react";
+import {
+    type ToastContextType,
+    type ToastDataType
+} from "../types/toast";
+import NCoreContext, {
+    type ConfigType
+} from "ncore-context";
+import Toast from "../components/toast";
+import {
+    uuid
+} from "../utils";
+
+class NCoreUIKitToast extends NCoreContext<ToastContextType, ConfigType<ToastContextType>> {
+    constructor({
+        data = []
+    }: {
+        data?: Array<ToastDataType>
+    }) {
+        super({
+            close: () => {},
+            open: () => "",
+            data: data
+        }, {
+            key: "NCoreUIKit-ToastContext"
+        });
+    };
+
+    open = (toastData: ToastDataType) => {
+        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?: {
+        index?: number;
+        id?: string;
+    }) => {
+        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
+    }: {
+        children: ReactNode;
+    }) => {
+        const {
+            data
+        } = this.useContext();
+
+        return <Fragment>
+            {children}
+            {data.map((item: ToastDataType) => {
+                return <Toast
+                    key={`NCoreUIKit-Toast-${item.id}`}
+                    {...item}
+                    id={item.id as string}
+                    onClosed={(props) => {
+                        this.close({
+                            id: item.id
+                        });
+
+                        if(item.onClosed) item.onClosed(props);
+                    }}
+                />;
+            })}
+        </Fragment>;
+    };
+}
+export default NCoreUIKitToast;

package/src/core/hooks.ts

@@ -0,0 +1,39 @@
+import type {
+    NCoreUIKitBase
+} from ".";
+import type {
+    NCoreUIKitConfig,
+    LocalizeType,
+    ThemesType
+} from "../types";
+import type NCoreUIKitEmbeddedMenuClass from "../context/embeddedMenu";
+import type NCoreUIKitBottomSheetClass from "../context/bottomSheet";
+import type NCoreUIKitLocalizeClass from "../context/localize";
+import type NCoreUIKitSnackBarClass from "../context/snackBar";
+import type NCoreUIKitDialogClass from "../context/dialog";
+import type NCoreUIKitModalClass from "../context/modal";
+import type NCoreUIKitToastClass from "../context/toast";
+import type NCoreUIKitThemeClass from "../context/theme";
+import type NCoreUIKitMenuClass from "../context/menu";
+
+export let NCoreUIKitLocalize: NCoreUIKitLocalizeClass<LocalizeType>;
+export let NCoreUIKitEmbeddedMenu: NCoreUIKitEmbeddedMenuClass;
+export let NCoreUIKitBottomSheet: NCoreUIKitBottomSheetClass;
+export let NCoreUIKitTheme: NCoreUIKitThemeClass<ThemesType>;
+export let NCoreUIKitSnackBar: NCoreUIKitSnackBarClass;
+export let NCoreUIKitDialog: NCoreUIKitDialogClass;
+export let NCoreUIKitModal: NCoreUIKitModalClass;
+export let NCoreUIKitToast: NCoreUIKitToastClass;
+export let NCoreUIKitMenu: NCoreUIKitMenuClass;
+
+export const initializeInstances = (NCoreUIKit: NCoreUIKitBase<NCoreUIKitConfig>) => {
+    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/src/core/index.tsx

@@ -0,0 +1,126 @@
+import {
+    type ReactNode
+} from "react";
+import {
+    Platform
+} from "react-native";
+import {
+    initializeInstances
+} from "./hooks";
+import type {
+    NCoreUIKitConfig
+} from "../types";
+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<T extends NCoreUIKitConfig> {
+    NCoreUIKitContext: CoreContext<T>;
+
+    constructor(initialState: T) {
+        this.NCoreUIKitContext = new CoreContext(initialState);
+    }
+
+    Provider = ({
+        children
+    }: {
+        children: ReactNode;
+    }) => {
+        const NCoreUIKitContext = this.NCoreUIKitContext;
+
+        return <SafeAreaProvider>
+            <NCoreUIKitContext.Provider>
+                {children}
+            </NCoreUIKitContext.Provider>
+        </SafeAreaProvider>;
+    };
+};
+
+let NCoreUIKit!: NCoreUIKitBase<NCoreUIKitConfig>;
+
+export const setupNCoreUIKit = (initialState: NCoreUIKitConfig, isCustom: boolean = false) => {
+    if(isCustom) {
+        return new NCoreUIKitBase(initialState);
+    } else {
+        NCoreUIKit = new NCoreUIKitBase(initialState);
+
+        initializeInstances(NCoreUIKit);
+
+        if (Platform.OS === "web") {
+            const globalRef = globalThis as unknown as { document?: unknown };
+
+            if (globalRef && typeof globalRef.document === "object" && globalRef.document !== null) {
+                const doc = globalRef.document as {
+                    getElementById?: (id: string) => unknown;
+                    createElement?: (tagName: string) => unknown;
+                    head?: unknown;
+                };
+
+                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") as {
+                            id?: string;
+                            type?: string;
+                            innerHTML?: string;
+                        };
+
+                        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 as { appendChild?: (node: unknown) => void };
+
+                            if (typeof head.appendChild === "function") {
+                                head.appendChild(style);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        return NCoreUIKit;
+    }
+};

package/src/helpers/index.ts

@@ -0,0 +1,20 @@
+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/src/helpers/locale/index.ts

@@ -0,0 +1,28 @@
+export const parseRRuleConfig = (rawConfig: NCoreUIKit.GeneratedRRuleConfigsForReturn) => {
+    const tokens: {
+        [key: string]: RegExp;
+    } = {
+    };
+
+    Object.keys(rawConfig.tokens).forEach((key) => {
+        let pattern = rawConfig.tokens[key as keyof typeof rawConfig.tokens];
+        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/src/helpers/portalize/Consumer.tsx

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