jopijs 0.0.1

package/src/@uikit/helpers/hooks.ts

@@ -0,0 +1,133 @@
+// noinspection JSUnusedGlobalSymbols
+
+import React, {useEffect, useState} from "react";
+
+import {isServerSide} from "jopi-toolkit/jk_what";
+import {useEvent, useServerRequest} from "jopijs/ui";
+
+/**
+ * Allow refreshing the React component.
+ */
+export function useRefresh() {
+    const [_, setCount] = useState(0);
+    return () => setCount(old => old + 1);
+}
+
+export function useRefreshOnEvent(evenName: string|string[]) {
+    const [_, setCounter] = useState(0);
+    useEvent(evenName, () => { setCounter(prev => prev + 1) });
+}
+
+export function useEventValue<T = any>(evenName: string|string[], defaultProvider?: T | (() => T)): T|undefined {
+    const [value, setValue] = useState<T|undefined>(defaultProvider);
+
+    useEvent(evenName, (data) => {
+        setValue(data)
+    });
+
+    return value;
+}
+
+/**
+ * Allow submitting a form.
+ *
+ * @param onFormReturns
+ *      A function which is called when the form call returns positively.
+ * @param url
+ *      An optional url to url.
+ * @returns
+ *      Return an array of two elements:
+ *          - Set function allowing to submit the form.
+ *            It takes in arg the event sent by Form.onSubmit
+ *          - Set value of the form, or undefined if not submit.
+ */
+export function useFormSubmit<T = any>(onFormReturns?: (data: T) => void, url?: string): UseFormSubmitResponse<T> {
+    if (isServerSide) {
+        return [() => {}, undefined, false]
+    }
+
+    const [state, setState] = useState<T|undefined>(undefined);
+    const [isSending, setIsSending] = useState(false);
+
+    async function f(e: React.FormEvent<HTMLFormElement>) {
+        e.preventDefault();
+        url = url || window.location.href;
+
+        const formData = new FormData(e.currentTarget);
+        setIsSending(true);
+
+        try {
+            const response = await fetch(url!, {
+                method: 'POST',
+                body: formData,
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                let v = await response.json() as T;
+                setState(v);
+                if (onFormReturns) onFormReturns(v);
+            } else {
+                console.error("useFormSubmit - Not 200 response", response);
+            }
+        } catch (e) {
+            console.error("useFormSubmit - Network error", e);
+        }
+        finally {
+            setIsSending(false);
+        }
+    }
+
+    return [f, state, isSending];
+}
+//
+type UseFormSubmitResponse<T> = [
+    (e: React.FormEvent<HTMLFormElement>) => void,
+        T | undefined,
+    boolean
+];
+
+export function useSendJsonData<T = any>(onFormReturns?: (data: T) => void, url?: string): UseSendPostDataResponse<T> {
+    if (isServerSide) {
+        return [() => {}, undefined, false]
+    }
+
+    const [state, setState] = useState<T|undefined>(undefined);
+    const [isSending, setIsSending] = useState(false);
+
+    async function f(data: T) {
+        url = url || window.location.href;
+
+        try {
+            setIsSending(true);
+
+            const response = await fetch(url!, {
+                method: 'POST',
+                headers: {'Content-Type': 'application/json'},
+                body: JSON.stringify(data),
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                let v = await response.json() as T;
+                setState(v);
+                if (onFormReturns) onFormReturns(v);
+            } else {
+                console.error("useSendPostData - Not 200 response", response);
+            }
+        } catch (e) {
+            console.error("useSendPostData - Network error", e);
+        }
+        finally {
+            setIsSending(false);
+        }
+    }
+
+    return [f, state, isSending];
+}
+//
+type UseSendPostDataResponse<T> = [
+    (data: T) => void
+    , T | undefined,
+    boolean
+];

package/src/@uikit/helpers/index.ts

@@ -0,0 +1,2 @@
+export * from "./hooks.ts";
+export * from "./tools.ts";

package/src/@uikit/helpers/tools.ts

@@ -0,0 +1,39 @@
+import React from "react";
+
+export type UiText = string | React.ReactNode;
+
+export function ucFirst(text: string): string {
+    return text.charAt(0).toUpperCase() + text.slice(1);
+}
+
+export function IfTrue(cond: any, value: React.ReactNode) {
+    if (cond) return value;
+    return null;
+}
+
+export function UseIfDefined(value: any) {
+    if (value) return value;
+    return null;
+}
+
+export function IfFalse(cond: any, value: React.ReactNode) {
+    if (!cond) return value;
+    return null;
+}
+
+export function sendFormData(url: string, formData: FormData): Promise<Response> {
+    return fetch(url!, {
+        method: 'POST',
+        body: formData,
+        credentials: 'include'
+    });
+}
+
+export function sendJsonData(url: string, data: any): Promise<Response> {
+    return fetch(url!, {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify(data),
+        credentials: 'include'
+    });
+}

package/src/@uikit/index.ts

@@ -0,0 +1,15 @@
+import {isBrowser} from "jopi-toolkit/jk_what";
+
+// Expose all his item to simplify things.
+export * from "jopijs/ui";
+
+export * from "./helpers/index.ts";
+export * from "./forms/index.ts";
+export * from "./users/index.ts";
+export * from "./menu/index.ts";
+export * from "./core/index.ts";
+export * from "./reactRouter/index.ts";
+export * from "./variants/index.tsx";
+
+export const isBrowserSide = isBrowser;
+export const isServerSide = !isBrowser;

package/src/@uikit/menu/core.ts

@@ -0,0 +1,227 @@
+import {HierarchyBuilder} from "./internal.ts";
+import * as jk_events from "jopi-toolkit/jk_events";
+
+import {ucFirst} from "../helpers/tools.ts";
+import type {MenuItem} from "./interfaces.ts";
+
+type MenuBuilder = (menu: AppMenu) => void;
+
+export class MenuManager {
+    private isInvalid = true;
+    private allMenus: Record<string, AppMenu> = {};
+    private readonly menuBuilders: Record<string, MenuBuilder[]> = {};
+
+    constructor(private readonly mustRemoveTrailingSlashs: boolean, private readonly forceURL?: URL) {
+        jk_events.addListener("user.infosUpdated", () => {
+            this.invalidateMenus(true);
+        });
+
+        jk_events.addListener("app.router.locationUpdated", () => {
+            this.updateActiveItems();
+        });
+    }
+
+    private getUrlPathName(): string {
+        let url = (this.forceURL || new URL(window.location.href)).pathname;
+        if (!url.endsWith("/")) url += "/";
+        return url;
+    }
+
+    getMenuItems(name: string): MenuItem[] {
+        if (this.isInvalid) {
+            this.buildAllMenu();
+        }
+
+        let menu = this.allMenus[name];
+
+        if (!menu) {
+            if (this.menuBuilders[name]) {
+                this.buildAllMenu();
+            }
+        }
+
+        if (menu) {
+            const items = menu.value.items;
+            if (!items) return [];
+            return items as MenuItem[];
+        }
+
+        return [];
+    }
+
+    private isActiveItemSearched = false;
+
+    private buildAllMenu() {
+        function checkItem(item: MenuItem, breadcrumb: string[]) {
+            if (item.title) {
+                breadcrumb = breadcrumb ? [...breadcrumb, item.title!] : [item.title!];
+            }
+
+            if (item.breadcrumb===undefined) {
+                item.breadcrumb = breadcrumb;
+            }
+
+            item.reactKey = "R" + (gReactKey++) + "_"
+
+            if (item.items) {
+                for (const child of item.items) {
+                    checkItem(child, breadcrumb);
+                }
+            }
+        }
+
+        this.isInvalid = false;
+
+        for (let menuName in this.menuBuilders) {
+            let builders = this.menuBuilders[menuName];
+
+            const menu = new AppMenu({key: menuName});
+            menu.setNormalizer(this.mustRemoveTrailingSlashs ? menuNormalizer_removeTrailingSlash : menuNormalizer_addTrailingSlash);
+            this.allMenus[menuName] = menu;
+
+            for (const builder of builders) {
+                builder(menu);
+            }
+
+            checkItem(menu.value, []);
+        }
+
+        this.updateActiveItems();
+    }
+
+    private updateActiveItems() {
+        this.isActiveItemSearched = true;
+
+        //region Reset menu items
+
+        function reset(item: MenuItem) {
+            item.isActive = false;
+
+            if (item.items) {
+                for (const child of item.items) {
+                    reset(child);
+                }
+            }
+        }
+
+        for (let menuName in this.allMenus) {
+            // Will force rebuilding.
+            const menu = this.getMenuItems(menuName);
+            if (menu) menu.forEach(reset);
+        }
+
+        //endregion
+
+        for (const menuName in this.allMenus) {
+            this.searchMatchingMenuItem(menuName);
+        }
+    }
+
+    public getMatchingMenuItem(forceRefresh: boolean = false): MenuItem|undefined {
+        if (this.isInvalid) {
+            this.buildAllMenu();
+        }
+        else if (!this.isActiveItemSearched || forceRefresh) {
+            this.updateActiveItems();
+        }
+
+        return gMenuActiveItem;
+    }
+
+    private searchMatchingMenuItem(menuName?: string): MenuItem|undefined {
+        function checkItem(item: MenuItem): boolean {
+            item.isActive = false;
+            let isActive = item.url===pathName;
+
+            if (isActive) {
+                matchingMenuItem = item;
+
+                if (gMenuActiveItem!==item) {
+                    gMenuActiveItem = item;
+                    jk_events.sendEvent("app.menu.activeItemChanged", {menuName, menuItem: item});
+                }
+            }
+
+            if (item.items) {
+                for (const child of item.items) {
+                    if (checkItem(child)) {
+                        isActive = true;
+                        break;
+                    }
+                }
+            }
+
+            item.isActive = isActive;
+            return isActive;
+        }
+
+        let pathName = this.getUrlPathName();
+
+        if (this.mustRemoveTrailingSlashs) {
+            if (pathName.endsWith("/")) {
+                pathName = pathName.slice(0, -1);
+            }
+        } else {
+            if (!pathName.endsWith("/")) {
+                pathName += "/";
+            }
+        }
+
+        let matchingMenuItem: MenuItem|undefined;
+
+        if (menuName) {
+            const menu = this.allMenus[menuName];
+            if (menu) checkItem(menu.value);
+        } else {
+            for (const key in this.allMenus) {
+                const menu = this.allMenus[key];
+                checkItem(menu.value);
+            }
+        }
+
+        return matchingMenuItem;
+    }
+
+    addMenuBuilder(menuName: string, builder: (menu: AppMenu) => void) {
+        let builders = this.menuBuilders[menuName];
+        if (!builders) this.menuBuilders[menuName] = [builder];
+        else builders.push(builder);
+
+        this.invalidateMenus();
+    }
+
+    invalidateMenus(force = false) {
+        if (this.isInvalid) {
+            if (!force) return;
+        }
+
+        this.isInvalid = true;
+        this.allMenus = {};
+
+        jk_events.sendEvent("app.menu.invalided", this);
+    }
+}
+
+export class AppMenu extends HierarchyBuilder<MenuItem> {
+}
+
+function normalizeMenuItem(item: MenuItem) {
+    if (!item.title) {
+        if (item.key) {
+            item.title = ucFirst(item.key);
+        }
+    }
+}
+
+function menuNormalizer_addTrailingSlash(item: MenuItem) {
+    normalizeMenuItem(item);
+    if (item.url && !item.url.endsWith("/")) item.url += "/";
+}
+
+function menuNormalizer_removeTrailingSlash(item: MenuItem) {
+    normalizeMenuItem(item);
+    if (item.url && item.url.endsWith("/")) item.url = item.url.slice(0, -1);;
+}
+
+let gReactKey = 0;
+let gMenuActiveItem: MenuItem|undefined;

package/src/@uikit/menu/hooks.ts

@@ -0,0 +1,28 @@
+import {MenuManager} from "./core.ts";
+import {type MenuItem} from "./interfaces.ts";
+import {isServerSide} from "jopi-toolkit/jk_what";
+import {_usePage, useEvent} from "jopijs/ui";
+import {useState} from "react";
+
+export function useMenuManager(): MenuManager {
+    return _usePage().objectRegistry.getObject<MenuManager>("uikit.menuManager")!
+}
+
+export function useMatchingMenuItem(): MenuItem|undefined {
+    return useMenuManager().getMatchingMenuItem();
+}
+
+export function useMenu(name: string): MenuItem[] {
+    const menuManager = useMenuManager();
+    if (isServerSide) return menuManager.getMenuItems(name);
+
+    // Will refresh one menu change.
+    const [_, setCount] = useState(0);
+
+    useEvent(["app.menu.invalided", "app.menu.activeItemChanged"], () => {
+        console.log("useMenu - Refreshing menu", name);
+        setCount(count => count + 1)
+    });
+
+    return menuManager.getMenuItems(name);
+}

package/src/@uikit/menu/index.ts

@@ -0,0 +1,3 @@
+export * from "./interfaces.ts";
+export * from "./core.ts";
+export * from "./hooks.ts";

package/src/@uikit/menu/interfaces.ts

@@ -0,0 +1,26 @@
+import React from "react";
+
+export enum MenuName {
+    LEFT_MENU = "layout.left",
+    RIGHT_MENU = "layout.right",
+    TOP_MENU = "layout.top"
+}
+
+export interface MenuItem {
+    key: string;
+    items?: MenuItem[];
+
+    title?: string;
+    url?: string;
+    icon?: any;
+    isActive?: boolean;
+
+    breadcrumb?: string[] | React.FunctionComponent<unknown>;
+
+    /**
+     * Is used as a key for React key calculation.
+     */
+    reactKey?: string;
+
+    [key: string]: any;
+}

package/src/@uikit/menu/internal.ts

@@ -0,0 +1,218 @@
+import {MenuManager} from "./core.ts";
+
+//region HierarchyBuilder
+
+export interface WithKeyAndItems<T> {
+    key: string;
+    items?: (T & WithKeyAndItems<T>)[];
+}
+
+export class HierarchyBuilder<T extends WithKeyAndItems<T>> {
+    private normalizer: ((v: T) => void)|undefined;
+
+    constructor(private readonly root: T, public readonly offset = -1, public readonly parentItems?: T[]) {
+    }
+
+    setNormalizer(f: (v: T) => void) {
+        this.normalizer = f;
+    }
+
+    get value(): T {
+        return this.root;
+    }
+
+    set value(value: Omit<T, 'key' | 'items'>) {
+        for (let entry in value) {
+            if (value.hasOwnProperty(entry)) {
+                (this.root as any)[entry] = (value as any)[entry];
+            }
+        }
+
+        if (this.normalizer) {
+            this.applyNormalizer(this.root);
+        }
+    }
+
+    /**
+     * Return a HierarchyBuilder on the selected item.
+
+     * @param keys string[]
+     *      Traverse the hierarchy to search the item with the corresponding key.
+     *      If it doesn't exist, create it.
+     *
+     * @param keys (e: T) => boolean
+     *      Search an element in the direct item of the element.
+     *      Returns a detached HierarchyBuilder if not found.
+     */
+    selectItem(keys: string[]|((e: T) => boolean)):  HierarchyBuilder<T> {
+        if (keys instanceof Array) {
+            let keyOffset = 0;
+            const maxKeyOffset = keys.length;
+            if (!maxKeyOffset) return this;
+
+            let selected = this.root;
+            let selectedOffset = -1;
+            let selectedParent = this.parentItems;
+
+            while (true) {
+                if (keyOffset === maxKeyOffset) {
+                    const n = new HierarchyBuilder(selected, selectedOffset, selectedParent);
+                    n.normalizer = this.normalizer;
+                    return n;
+                }
+
+                const key = keys[keyOffset++];
+                if (!selected.items) selected.items = [];
+
+                let isFound = false;
+                selectedParent = selected.items;
+
+                let entryOffset = 0;
+
+                for (let entry of selected.items) {
+                    if (entry.key===key) {
+                        selected = entry;
+                        selectedOffset = entryOffset;
+                        isFound = true;
+                        break;
+                    }
+
+                    entryOffset++;
+                }
+
+                if (!isFound) {
+                    selectedOffset = selected.items!.length;
+                    selected.items!.push(selected = this.normalize({key} as T));
+                }
+            }
+        } else {
+            if (this.root.items) {
+                let entryOffset = 0;
+
+                for (let entry of this.root.items!) {
+                    if (keys(entry)) {
+                        const n = new HierarchyBuilder<T>(entry, entryOffset, this.parentItems);
+                        n.normalizer = this.normalizer;
+                        return n;
+                    }
+
+                    entryOffset++;
+                }
+            }
+
+            return gDetachedHierarchyBuilder as unknown as HierarchyBuilder<T>;
+        }
+    }
+
+    normalize(entry: T): T {
+        if (this.normalizer) this.applyNormalizer(entry);
+        return entry;
+    }
+
+    parentAddBefore(entry: T) {
+        if (this.parentItems && this.offset >= 0) {
+            if (this.normalizer) this.applyNormalizer(entry);
+            this.parentItems.splice(this.offset, 0, entry);
+        }
+    }
+
+    parentAddAfter(entry: T) {
+        if (this.parentItems && this.offset >= 0) {
+            if (this.normalizer) this.applyNormalizer(entry);
+            this.parentItems.splice(this.offset + 1, 0, entry);
+        }
+    }
+
+    parentWrap(entry: T) {
+        if (this.parentItems && this.offset >= 0) {
+            if (this.normalizer) this.applyNormalizer(entry);
+            this.parentItems.splice(this.offset + 1, 0, entry);
+            this.parentItems.splice(this.offset, 0, entry);
+        }
+    }
+
+    append(entry: T) {
+        if (this.normalizer) {
+            this.applyNormalizer(entry);
+        }
+
+        if (!this.root.items) {
+            this.root.items = [entry];
+        }
+        else {
+            let alreadyExists = this.root.items.find(e => e.key === entry.key);
+
+            if (alreadyExists) {
+                for (let key in entry) {
+                    if (entry.hasOwnProperty(key)) {
+                        (alreadyExists as any)[key] = (entry as any)[key];
+                    }
+                }
+            } else {
+                this.root.items.push(entry);
+            }
+        }
+    }
+
+    prepend(entry: T) {
+        if (this.normalizer) {
+            this.applyNormalizer(entry);
+        }
+
+        if (!this.root.items) {
+            this.root.items = [entry];
+        }
+        else {
+            let alreadyExists = this.root.items.find(e => e.key === entry.key);
+
+            if (alreadyExists) {
+                for (let key in entry) {
+                    if (entry.hasOwnProperty(key)) {
+                        (alreadyExists as any)[key] = (entry as any)[key];
+                    }
+                }
+            } else {
+                this.root.items.splice(0, 0, entry);
+            }
+        }
+    }
+
+    /**
+     * Search an element in the current items by applying a filter function.
+     * Returns the first corresponding entry.
+     */
+    searchFirstEntry(filter: (e: T) => boolean): T|undefined {
+        for (let entry of this.root.items!) {
+            if (filter(entry)) return entry;
+        }
+
+        return undefined;
+    }
+
+    private applyNormalizer(entry: T) {
+        if (this.normalizer) {
+            this.normalizer(entry);
+        }
+
+        if (entry.items) {
+            for (let item of entry.items) {
+                this.applyNormalizer(item);
+            }
+        }
+    }
+}
+
+const gDetachedHierarchyBuilder = new HierarchyBuilder({key: ""});
+
+//endregion
+
+export function getDefaultMenuManager(): MenuManager {
+    if (!gMenuManager) {
+        let mustRemoveTrailingSlashs = (window as any)["__JOPI_OPTIONS__"].removeTrailingSlashs === true
+        gMenuManager = new MenuManager(mustRemoveTrailingSlashs);
+    }
+
+    return gMenuManager;
+}
+
+let gMenuManager: MenuManager|undefined;