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

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;
+};

package/src/helpers/portalize/Host.tsx

@@ -0,0 +1,122 @@
+import {
+    type ReactNode,
+    createContext,
+    useEffect,
+    useRef
+} from "react";
+import {
+    type ViewStyle,
+    View
+} from "react-native";
+import {
+    useKey
+} from "./hooks/useKey";
+import {
+    type IManagerHandles,
+    Manager
+} from "./Manager";
+import {
+    context
+} from "./context";
+
+interface IHostProps {
+    children: ReactNode;
+    style?: ViewStyle;
+    name?: string;
+}
+
+export interface IProvider {
+    update(key?: string, children?: ReactNode, name?: string): void;
+    mount(children: ReactNode, name?: string): string;
+    unmount(key?: string): void;
+    name?: string;
+}
+
+export const Context = createContext<IProvider | null>(null);
+
+export const Host = ({
+    children,
+    style,
+    name
+}: IHostProps): ReactNode => {
+    const managerRef = useRef<IManagerHandles>(null);
+
+    const queue: Array<{
+        type: "mount" | "update" | "unmount";
+        children?: ReactNode;
+        name?: string;
+        key: string;
+    }> = [];
+
+    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: ReactNode, _name?: string): string => {
+        const key = generateKey();
+
+        const targetName = _name ?? name;
+
+        context.mount(key, children, targetName);
+
+        return key;
+    };
+
+    const update = (key: string, children: ReactNode, _name?: string): void => {
+        const targetName = _name ?? name;
+
+        context.update(key, children, targetName);
+    };
+
+    const unmount = (key: string): void => {
+        context.unmount(key);
+
+        removeKey(key);
+    };
+
+    return <Context.Provider value={{
+        unmount,
+        update,
+        mount,
+        name
+    }}>
+        <View
+            pointerEvents="box-none"
+            collapsable={false}
+            style={[
+                {
+                    flex: 1
+                },
+                style
+            ]}
+        >
+            {children}
+        </View>
+
+        <Manager
+            ref={managerRef}
+            name={name}
+        />
+    </Context.Provider>;
+};

package/src/helpers/portalize/Manager.tsx

@@ -0,0 +1,75 @@
+import {
+    useImperativeHandle,
+    type ReactNode,
+    forwardRef,
+    useEffect,
+    useState
+} from "react";
+import {
+    StyleSheet,
+    View
+} from "react-native";
+import {
+    context
+} from "./context";
+
+export interface IManagerHandles {
+    update(key?: string, children?: ReactNode, name?: string): void;
+    mount(key: string, children: ReactNode, name?: string): void;
+    unmount(key?: string): void;
+}
+
+export const Manager = forwardRef(({
+    name
+}: {
+    name?: string;
+}, ref): Array<ReactNode> => {
+    const [
+        portals,
+        setPortals
+    ] = useState<Array<{
+        children: ReactNode;
+        name?: string;
+        key: string;
+    }>>([]);
+
+    useEffect(() => {
+        return context.subscribe((newPortals) => {
+            setPortals(newPortals);
+        });
+    }, []);
+
+    useImperativeHandle(
+        ref,
+        (): IManagerHandles => ({
+            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: number
+        ) => (
+            <View
+                key={`NCoreUIKit-Portal-${key}-${index}`}
+                style={StyleSheet.absoluteFill}
+                pointerEvents="box-none"
+                collapsable={false}
+            >
+                {children}
+            </View>
+        ));
+});

package/src/helpers/portalize/Portal.tsx

@@ -0,0 +1,30 @@
+import {
+    type ReactNode
+} from "react";
+import {
+    Consumer
+} from "./Consumer";
+import {
+    Context
+} from "./Host";
+
+interface IPortalProps {
+    children: ReactNode;
+    name?: string;
+}
+
+export const Portal = ({
+    children,
+    name
+}: IPortalProps): ReactNode => (
+    <Context.Consumer>
+        {(manager): ReactNode => {
+            return <Consumer
+                manager={manager}
+                name={name}
+            >
+                {children}
+            </Consumer>;
+        }}
+    </Context.Consumer>
+);

package/src/helpers/portalize/context/index.ts

@@ -0,0 +1,49 @@
+import type {
+    ReactNode
+} from "react";
+
+type PortalItem = {
+    children: ReactNode;
+    name?: string;
+    key: string;
+};
+
+let portals: PortalItem[] = [];
+
+const listeners: Array<(portals: PortalItem[]) => void> = [];
+
+export const context = {
+    subscribe: (listener: (portals: PortalItem[]) => void) => {
+        listeners.push(listener);
+
+        return () => {
+            listeners.splice(listeners.indexOf(listener), 1);
+        };
+    },
+    mount: (key: string, children: ReactNode, name?: string) => {
+        portals = [
+            ...portals,
+            {
+                children,
+                name,
+                key
+            }
+        ];
+
+        listeners.forEach(l => l(portals));
+    },
+    update: (key: string, children: ReactNode, name?: string) => {
+        portals = portals.map(p => p.key === key ? {
+            ...p,
+            children,
+            name
+        } : p);
+
+        listeners.forEach(l => l(portals));
+    },
+    unmount: (key: string) => {
+        portals = portals.filter(p => p.key !== key);
+
+        listeners.forEach(l => l(portals));
+    }
+};

package/src/helpers/portalize/hooks/useKey.ts

@@ -0,0 +1,49 @@
+import {
+    useRef
+} from "react";
+
+interface IUseKey {
+    removeKey(key: string): void;
+    generateKey(): string;
+}
+
+const keyGenerator = (): string => {
+    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 = (): IUseKey => {
+    const usedKeys = useRef<Array<string>>([]);
+
+    const generateKey = (): string => {
+        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: string): void => {
+        usedKeys.current = usedKeys.current.filter(k => k !== key);
+    };
+
+    return {
+        generateKey,
+        removeKey
+    };
+};

package/src/helpers/portalize/index.tsx

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

package/src/helpers/theme/palette.ts

@@ -0,0 +1,90 @@
+import {
+    type RecursiveRecord
+} from "../../types";
+
+const mergeCurrent = (defaultJSON: RecursiveRecord, projectJSON: RecursiveRecord) => {
+    const projectKeys: Array<keyof typeof projectJSON> = Object.keys(projectJSON);
+
+    const newJSON = JSON.parse(JSON.stringify(defaultJSON));
+
+    projectKeys.forEach((pKey) => {
+        if(typeof projectJSON[pKey] === "string") {
+            newJSON[pKey] = projectJSON[pKey];
+        } else {
+            if(typeof defaultJSON[pKey] !== "string") {
+                if(defaultJSON[pKey]) {
+                    newJSON[pKey] = mergeCurrent(defaultJSON[pKey], projectJSON[pKey]!);
+                } else {
+                    newJSON[pKey] = projectJSON[pKey];
+                }
+            } else {
+                throw new Error("The project theme scheme is not valid.");
+            }
+        }
+    });
+
+    return newJSON;
+};
+
+export const mergeTheme = (
+    defaultTheme: NCoreUIKit.ThemeTokens,
+    projectTheme: NCoreUIKit.ThemeTokens
+): NCoreUIKit.ThemeTokens => {
+    return {
+        content: mergeCurrent(defaultTheme.content as unknown as RecursiveRecord, projectTheme.content as unknown as RecursiveRecord),
+        system: mergeCurrent(defaultTheme.system as unknown as RecursiveRecord, projectTheme.system as unknown as RecursiveRecord)
+    };
+};
+
+export const mergePalettes = (
+    defaultPalettes: NCoreUIKit.ThemePalettes,
+    projectPalettes: NCoreUIKit.ThemePalettes,
+    activePalette: keyof NCoreUIKit.PaletteKey,
+    activeTheme: keyof NCoreUIKit.ThemeKey
+): NCoreUIKit.ThemeTokens => {
+    const defaultPalette = defaultPalettes.find(p => p.name === activePalette);
+
+    if(!defaultPalette) {
+        const projectPalette = projectPalettes.find(p => p.name === activePalette);
+
+        if(projectPalette) {
+            const projectThemeKey = Object.keys(projectPalette.themes).find(t => t === activeTheme) as keyof typeof projectPalette.themes;
+
+            if(projectThemeKey) {
+                const projectTheme = projectPalette.themes[projectThemeKey] as unknown as NCoreUIKit.ThemeTokens;
+
+                return projectTheme;
+            }
+
+            throw new Error("Theme not found!.");
+        } else {
+            throw new Error("Palette not found!.");
+        }
+    }
+
+    const projectPalette = projectPalettes.find(p => p.name === activePalette);
+
+    if(projectPalette) {
+        const defaultThemeKey = Object.keys(defaultPalette.themes).find(t => t === activeTheme) as keyof typeof defaultPalette.themes;
+
+        if(!defaultThemeKey) {
+            throw new Error("Theme not found!.");
+        }
+
+        const defaultTheme = defaultPalette.themes[defaultThemeKey as keyof typeof defaultPalette.themes] as unknown as NCoreUIKit.ThemeTokens;
+
+        const projectThemeKey = Object.keys(projectPalette.themes).find(t => t === activeTheme) as keyof typeof projectPalette.themes;
+
+        if(projectThemeKey) {
+            const projectTheme = projectPalette.themes[projectThemeKey] as unknown as NCoreUIKit.ThemeTokens;
+
+            return mergeTheme(defaultTheme, projectTheme);
+        }
+
+        return defaultTheme;
+    }
+
+    const activeT = defaultPalette.themes[activeTheme as keyof typeof defaultPalette.themes] as unknown as NCoreUIKit.ThemeTokens;
+
+    return activeT;
+};

package/src/helpers/theme/shapes.ts

@@ -0,0 +1,106 @@
+import defaultJSON from "../../variants/themes/default.json";
+
+export const mergeSpaces = (
+    defaultSpacesTokens: NCoreUIKit.Spaces,
+    projectSpacesTokens: NCoreUIKit.Spaces
+) => {
+    return {
+        ...defaultSpacesTokens,
+        ...projectSpacesTokens
+    };
+};
+
+export const mergeRadiuses = (
+    defaultRadiusesTokens: NCoreUIKit.Radiuses,
+    projectRadiusesTokens: NCoreUIKit.Radiuses
+) => {
+    return {
+        ...defaultRadiusesTokens,
+        ...projectRadiusesTokens
+    };
+};
+
+export const mergeBorders = (
+    defaultBordersTokens: NCoreUIKit.Borders,
+    projectBordersTokens: NCoreUIKit.Borders
+) => {
+    return {
+        ...defaultBordersTokens,
+        ...projectBordersTokens
+    };
+};
+
+export const mergeInlineSpaces = (
+    defaultInlineSpacesTokens: NCoreUIKit.InlineSpaces,
+    projectInlineSpacesTokens: NCoreUIKit.InlineSpaces
+) => {
+    return {
+        ...defaultInlineSpacesTokens,
+        ...projectInlineSpacesTokens
+    };
+};
+
+export const mergeShapes = ({
+    defaultShapes,
+    projectShapes
+}: {
+    defaultShapes: NCoreUIKit.Shapes;
+    projectShapes: NCoreUIKit.Shapes;
+}) => {
+    const defaultGapPropagations = Object.keys(defaultJSON.shapes.spaces) as (keyof NCoreUIKit.SpacesWithVariants)[];
+    const defaultSharpness = Object.keys(defaultJSON.shapes.radiuses) as (keyof NCoreUIKit.RadiusesWithVariants)[];
+
+    const defaultInlineSpaces = defaultShapes.inlineSpaces;
+    const defaultRadiuses = defaultShapes.radiuses;
+    const defaultBorders = defaultShapes.borders;
+    const defaultSpaces = defaultShapes.spaces;
+
+    const newShapes: NCoreUIKit.Shapes = {
+        inlineSpaces: defaultInlineSpaces,
+        radiuses: defaultRadiuses,
+        borders: defaultBorders,
+        spaces: defaultSpaces
+    };
+
+    if(!projectShapes) {
+        return newShapes;
+    }
+
+    if(projectShapes.borders) {
+        const projectBorders = projectShapes.borders;
+
+        newShapes.borders = mergeBorders(defaultBorders, projectBorders);
+    }
+
+    if(projectShapes.inlineSpaces) {
+        const projectInlineSpaces = projectShapes.inlineSpaces;
+
+        newShapes.inlineSpaces = mergeInlineSpaces(defaultInlineSpaces, projectInlineSpaces);
+    }
+
+    if(projectShapes.spaces) {
+        defaultGapPropagations.forEach((gP) => {
+            if(projectShapes.spaces[gP]) {
+                if(defaultSpaces[gP]) {
+                    newShapes.spaces[gP] = mergeSpaces(defaultSpaces[gP], projectShapes.spaces[gP]);
+                } else {
+                    newShapes.spaces[gP] = projectShapes.spaces[gP];
+                }
+            }
+        });
+    }
+
+    if(projectShapes.radiuses) {
+        defaultSharpness.forEach((s) => {
+            if(projectShapes.radiuses[s]) {
+                if(defaultRadiuses[s]) {
+                    newShapes.radiuses[s] = mergeRadiuses(defaultRadiuses[s], projectShapes.radiuses[s]);
+                } else {
+                    newShapes.radiuses[s] = projectShapes.radiuses[s];
+                }
+            }
+        });
+    }
+
+    return newShapes;
+};

package/src/helpers/theme/typography.ts

@@ -0,0 +1,46 @@
+import {
+    androidTypographyFixer
+} from "../../utils";
+import _defaultJSON from "../../variants/themes/default.json";
+
+const defaultJSON = androidTypographyFixer(_defaultJSON);
+
+export const mergeTypography = (
+    defaultSpacesTokens: NCoreUIKit.Typography,
+    projectSpacesTokens: NCoreUIKit.Typography
+) => {
+    return {
+        ...defaultSpacesTokens,
+        ...projectSpacesTokens
+    };
+};
+
+export const mergeTypographyTokens = ({
+    defaultTypographyTokens,
+    projectTypographyTokens
+}: {
+    defaultTypographyTokens: NCoreUIKit.TypographyWithVariants;
+    projectTypographyTokens: NCoreUIKit.TypographyWithVariants;
+}) => {
+    const defaultGapPropagations = Object.keys(defaultJSON.shapes.spaces) as (keyof NCoreUIKit.TypographyWithVariants)[];
+
+    const defaultTypography = defaultTypographyTokens;
+
+    const newTypography: NCoreUIKit.TypographyWithVariants = defaultTypography;
+
+    if(!projectTypographyTokens) {
+        return newTypography;
+    }
+
+    defaultGapPropagations.forEach((gP) => {
+        if(projectTypographyTokens[gP]) {
+            if(defaultTypography[gP]) {
+                newTypography[gP] = mergeTypography(defaultTypography[gP], projectTypographyTokens[gP]);
+            } else {
+                newTypography[gP] = projectTypographyTokens[gP];
+            }
+        }
+    });
+
+    return newTypography;
+};