@vertesia/ui 0.56.0 → 0.57.0

package/src/router/Router.tsx

@@ -0,0 +1,216 @@
+import { createContext, useContext, useEffect } from "react";
+import { HistoryNavigator, LocationChangeEvent, NavigateOptions } from "./HistoryNavigator";
+import { PathMatch, PathMatcher } from "./PathMatcher";
+import { isRootPath, joinPath } from "./path";
+
+export type LazyImportFn = () => Promise<any>;
+export interface ComponentRoute {
+    path: string;
+    Component: React.ComponentType<any>;
+}
+export interface LazyComponentRoute {
+    path: string;
+    LazyComponent: LazyImportFn;
+}
+export type Route = ComponentRoute | LazyComponentRoute;
+
+export interface RouteMatch extends PathMatch<Route> {
+    state: any;
+}
+
+export interface NavigationPrompt {
+    message: string;
+    when?: boolean;
+}
+
+export abstract class BaseRouter {
+    // the path to use when navigating to the root of the router
+    index?: string;
+    matcher: PathMatcher<Route> = new PathMatcher();
+    constructor(routes: Route[], index?: string) {
+        this.index = index;
+        for (const route of routes) {
+            this.matcher.addPath(route.path, route);
+        }
+    }
+
+    abstract getTopRouter(): Router;
+
+    match(path: string): PathMatch<Route> | null {
+        const useIndex = isRootPath(path) && this.index;
+        return this.matcher.match(useIndex ? this.index! : path);
+    }
+
+    abstract navigate(path: string, options?: NavigateOptions): void;
+}
+
+export class Router extends BaseRouter {
+    prompt?: NavigationPrompt;
+    observer?: (event: LocationChangeEvent) => void;
+    navigator: HistoryNavigator = new HistoryNavigator();
+    constructor(routes: Route[], updateState: (route: RouteMatch | null) => void) {
+        super(routes);
+        this.navigator.addListener((event: LocationChangeEvent) => {
+            if (event.isCancelable && this.prompt && !!this.prompt.when) {
+                if (!window.confirm(this.prompt.message)) return;
+            }
+            if (this.observer) {
+                this.observer(event);
+            }
+            // only process afterChange events
+            if (event.name === "afterChange") {
+                const match = this.match(event.location.pathname);
+                if (match && match.value) {
+                    updateState({
+                        ...match,
+                        state: event.state,
+                    });
+                } else {
+                    updateState(null);
+                }
+            }
+        });
+    }
+
+    getTopRouter(): Router {
+        return this;
+    }
+
+    /**
+     * Subsequent navigations will preserve the given params in the query string.
+     * Use null to clear the sticky params.
+     * @param params
+     */
+    setStickyParams(params: Record<string, string> | null) {
+        this.navigator.stickyParams = params != null ? params : undefined;
+    }
+
+    withObserver(observer?: ((event: LocationChangeEvent) => void) | undefined) {
+        this.observer = observer;
+        return this;
+    }
+
+    start() {
+        this.navigator.start();
+        // initialize with the current location
+        this.navigator.firePageLoad();
+    }
+
+    stop() {
+        this.navigator.stop();
+    }
+
+    navigate(path: string, options?: NavigateOptions) {
+        this.navigator.navigate(path, options);
+    }
+}
+
+export class NestedRouter extends BaseRouter {
+    constructor(
+        public parent: BaseRouter,
+        public basePath: string,
+        routes: Route[],
+    ) {
+        super(routes);
+    }
+
+    getTopRouter(): Router {
+        if (this.parent instanceof Router) {
+            return this.parent;
+        } else {
+            return (this.parent as NestedRouter).getTopRouter();
+        }
+    }
+
+    navigate(path: string, options?: NavigateOptions | undefined): void {
+         // base path is nested by default in a NestedRouter unless explicitly set to false by caller
+        const isBasePathNested = options?.isBasePathNested ?? true;
+        let basePath: string;
+
+        if (isBasePathNested) {
+            const childBasePath = options?.basePath;
+            // e.g. "/store" + "/objects/123" => "/store/objects/123"
+            basePath = childBasePath ? joinPath(this.basePath, childBasePath) : this.basePath;
+        } else {
+            // e.g. "/store" + "/studio" => "/studio"
+            basePath = options?.basePath ?? this.basePath;
+        }
+
+        this.parent.navigate(path, {
+            ...options,
+            basePath,
+        });
+    }
+}
+
+export interface RouterContext {
+    location: Location;
+    route: Route;
+    router: BaseRouter;
+    params: Record<string, string>;
+    state: any;
+    /**
+     * The path that matched the route. For wildcard `/*` paths this does not include the wildcard part.
+     * You can get the wildcard path from `remainingPath`.
+     */
+    matchedRoutePath: string;
+    remainingPath?: string;
+    navigate: (path: string, options?: NavigateOptions) => void;
+}
+
+const ReactRouterContext = createContext<RouterContext | undefined>(undefined);
+export { ReactRouterContext };
+
+export function useRouterContext() {
+    const ctx = useContext(ReactRouterContext);
+    if (!ctx) {
+        throw new Error("useRouter must be used within a RouterProvider");
+    }
+    return ctx;
+}
+
+export function useNavigate() {
+    const { navigate } = useRouterContext();
+    return navigate;
+}
+
+type UseParamsReturn<T> = T extends string ? string : Record<string, string>;
+export function useParams<T>(arg?: T): UseParamsReturn<T> {
+    const { params } = useRouterContext();
+    if (arg) {
+        return params[arg as string] as UseParamsReturn<T>;
+    } else {
+        return params as UseParamsReturn<T>;
+    }
+}
+
+export function useLocation() {
+    const { location } = useRouterContext();
+    return location;
+}
+
+export function useNavigationPrompt(prompt: NavigationPrompt) {
+    const { router } = useRouterContext();
+    useEffect(() => {
+        router.getTopRouter().prompt = prompt;
+        return () => {
+            router.getTopRouter().prompt = undefined;
+        };
+    }, []);
+
+    useEffect(() => {
+        if (prompt.when) {
+            const doBlock = prompt.when;
+            const listener = function (ev: Event) {
+                if (doBlock) {
+                    ev.preventDefault();
+                    (ev as any).returnValue = "";
+                }
+            };
+            window.addEventListener("beforeunload", listener);
+            return () => {
+                window.removeEventListener("beforeunload", listener);
+            };
+        }
+    }, [prompt.when]);
+}

package/src/router/RouterProvider.tsx

@@ -0,0 +1,55 @@
+import { useSafeLayoutEffect } from "@vertesia/ui/core";
+//import { useSafeLayoutEffect } from "../core";
+import React, { useMemo, useState } from "react";
+import { RouteComponent } from "./RouteComponent";
+import { ReactRouterContext, Route, Router, RouterContext } from "./Router";
+import { createRoute404 } from "./Route404";
+import { LocationChangeEvent, NavigateOptions } from "./HistoryNavigator";
+
+
+interface RouterProviderProps {
+    routes: Route[],
+    /**
+     * The path to use for the root resource. Defaults to '/'. Cannot contains path variables or wildcards
+     */
+    index?: string;
+    children?: React.ReactNode
+    onChange?: (event: LocationChangeEvent) => void;
+}
+export function RouterProvider({ routes, index, onChange, children }: RouterProviderProps) {
+    const [state, setState] = useState<RouterContext | undefined>(undefined);
+    const router = useMemo(() => {
+        if (typeof window === 'undefined') return null;
+        const router = new Router(routes, (match) => {
+            if (match === null) {
+                match = createRoute404();
+            }
+            setState({
+                location: window.location,
+                route: match.value,
+                params: match.params,
+                state: match.state,
+                router: router,
+                matchedRoutePath: '/' + match.matchedSegments.join('/'),
+                remainingPath: match.remainingSegments ? '/' + match.remainingSegments.join('/') : undefined,
+                navigate: (to: string, options?: NavigateOptions) => {
+                    return router.navigate(to, options);
+                }
+            });
+        }).withObserver(onChange);
+        router.index = index;
+        return router;
+    }, []);
+    useSafeLayoutEffect(() => {
+        router && router.start();
+        return () => {
+            router && router.stop();
+        }
+    }, []);
+
+    return state && (
+        <ReactRouterContext.Provider value={state}>
+            {children ? children : <RouteComponent />}
+        </ReactRouterContext.Provider>
+    )
+}

package/src/router/index.ts

@@ -1,8 +1,10 @@
-// router impl
-console.log('router impl');
-export interface Route {
-    xxx: boolean
-}
-export function xxx() {
-    console.log('xxx');
-}
+export * from "./FixLinks.js"
+export * from "./HistoryNavigator.js"
+export * from "./Nav.js"
+export * from "./NestedNavigationContext.js"
+export * from "./NestedRouterProvider.js"
+export * as Path from "./path.js"
+export * from "./PathMatcher.js"
+export * from "./RouteComponent.js"
+export * from "./Router.js"
+export * from "./RouterProvider.js"

package/src/router/path.ts

@@ -0,0 +1,151 @@
+export type PathMatchParams = Record<string, string> & {
+    _?: string[];
+}
+
+export function isRootPath(path: string) {
+    return path === '/' || path === '';
+}
+
+export function joinPath(path1: string, path2: string) {
+    if (path1.endsWith('/') && path2.startsWith('/')) {
+        path2 = path1 + path2.substring(1);
+    } else if (path1.endsWith('/')) {
+        path2 = path1 + path2;
+    } else if (path2.startsWith('/')) {
+        path2 = path1 + path2;
+    } else {
+        path2 = path1 + '/' + path2;
+    }
+    return path2;
+}
+
+export function getPathSegments(path: string) {
+    if (path === '' || path === '/') {
+        return [];
+    }
+    let s = 0, e = path.length;
+    if (path.startsWith('./')) {
+        s = 2;
+    } else if (path.startsWith('/')) {
+        s = 1;
+    }
+    if (path.endsWith('/')) {
+        e = path.length - 1;
+    }
+    return (s > 0 || e < path.length ? path.substring(s, e) : path).split('/');
+}
+
+export function toSegments(path: string | string[]) {
+    if (typeof path === 'string') {
+        return getPathSegments(path);
+    } else if (Array.isArray(path)) {
+        return path;
+    } else {
+        throw new Error(`Unsupported path object: ${path}`);
+    }
+}
+
+// export class Path {
+
+//     static parse(path: string, abs = false) {
+//         if (abs !== undefined) {
+//             abs = path.startsWith('/');
+//         }
+//         return new Path(getPathSegments(path), abs);
+//     }
+
+//     constructor(public segments: string[], public isAbsolute = false) {
+//     }
+
+//     getParameters() {
+//         const out = [];
+//         for (const segment of this.segments) {
+//             if (segment[0] === ':') {
+//                 out.push(segment.substring(1));
+//             }
+//         }
+//         if (this.segments[this.segments.length - 1] === '*') {
+//             out.push('_');
+//         }
+//         return out;
+//     }
+
+//     resolveParameters(path: string) {
+//         const params: PathMatchParams = {};
+//         const resolvedSegments = getPathSegments(path);
+//         if (resolvedSegments.length < this.segments.length) {
+//             return null;
+//         }
+//         const segments = this.segments;
+//         for (let i = 0, l = segments.length; i < l; i++) {
+//             const seg = segments[i];
+//             if (seg[0] === ':') {
+//                 params[seg.substring(1)] = resolvedSegments[i];
+//             }
+//         }
+//         if (resolvedSegments.length - this.segments.length) {
+//             params._ = resolvedSegments.slice(this.segments.length);
+//         }
+//         return params;
+//     }
+
+//     match(path: string | string[] | Path) {
+//         const segments = toSegments(path);
+//         if (segments.length < this.segments.length) {
+//             return false;
+//         }
+//         let params: PathMatchParams | undefined;
+//         const mySegments = this.segments;
+//         for (let i = 0, l = mySegments.length; i < l; i++) {
+//             const segment = mySegments[i];
+//             if (segment === ':') {
+//                 if (!params) params = {};
+//                 params[segment.substring(1)] = segment;
+//             } else if (segment !== segments[i]) {
+//                 if (i === l - 1 && segment === '*') {
+//                     if (!params) params = {};
+//                     params._ = segments.slice(i);
+//                     return params;
+//                 }
+//                 return false;
+//             }
+//         }
+//         return params ? params : false;
+//     }
+
+//     join(path: Path | string | string[]) {
+//         const segments = toSegments(path);
+//         return new Path(this.segments.concat(segments), this.isAbsolute);
+//     }
+
+//     getRelativePath(path: Path | string | string[], asAbsolute: boolean = false) {
+//         const segments = toSegments(path);
+//         const extraSegmentsCount = segments.length - this.segments.length;
+//         if (extraSegmentsCount <= 0) {
+//             return null;
+//         }
+//         return new Path(segments.slice(this.segments.length), asAbsolute);
+//     }
+
+//     prependSegments(segments: string[]) {
+//         this.segments = segments.concat(this.segments);
+//     }
+
+//     appendSegments(segments: string[]) {
+//         this.segments = this.segments.concat(segments);
+//     }
+
+//     toAbsolutePath() {
+//         return '/' + this.segments.join('/');
+//     }
+
+//     toRelativePath() {
+//         return this.segments.join('/');
+//     }
+
+//     toString() {
+//         const path = this.segments.join('/');
+//         return this.isAbsolute ? '/' + path : path;
+//     }
+
+// }

package/src/session/TypeRegistry.ts

@@ -0,0 +1,27 @@
+import { ContentObjectTypeItem } from "@vertesia/common";
+
+export class TypeRegistry {
+    map: Record<string, ContentObjectTypeItem> = {};
+    constructor(public types: ContentObjectTypeItem[]) {
+        //sort types
+        types.sort((a, b) => a.name.localeCompare(b.name))
+        for (const type of types) {
+            this.map[type.id] = type;
+        }
+    }
+
+    getType(id: string) {
+        return this.map[id];
+    }
+
+    getTypeLayout(id: string) {
+        const type = this.map[id];
+        return type ? type.table_layout : undefined;
+    }
+
+    getTypeName(id: string) {
+        const type = this.map[id];
+        return type ? type.name : undefined;
+    }
+
+}

package/src/session/UserSession.ts

@@ -0,0 +1,227 @@
+import { jwtDecode } from 'jwt-decode';
+import { createContext, useContext } from 'react';
+
+import { VertesiaClient } from '@vertesia/client';
+import { AuthTokenPayload } from '@vertesia/common';
+import { Env } from '@vertesia/ui/env';
+
+import { getComposableToken } from './auth/composable';
+import { getFirebaseAuth } from './auth/firebase';
+import { TypeRegistry } from './TypeRegistry';
+
+export const LastSelectedAccountId_KEY = 'composableai.lastSelectedAccountId';
+export const LastSelectedProjectId_KEY = 'composableai.lastSelectedProjectId';
+
+
+class UserSession {
+
+    isLoading = true;
+    client: VertesiaClient;
+    authError?: Error;
+    authToken?: AuthTokenPayload;
+    typeRegistry?: TypeRegistry;
+    setSession?: (session: UserSession) => void;
+    lastSelectedAccount?: string | null;
+    lastSelectedProject?: string | null;
+    onboardingComplete?: boolean;
+
+    constructor(client?: VertesiaClient, setSession?: (session: UserSession) => void) {
+
+        if (client) {
+            this.client = client;
+        } else {
+            this.client = new VertesiaClient({
+                serverUrl: Env.endpoints.studio,
+                storeUrl: Env.endpoints.zeno,
+            });
+        }
+
+        if (setSession) {
+            this.setSession = setSession;
+        }
+
+        this.logout = this.logout.bind(this);
+    }
+
+    get store() {
+        return this.client.store;
+    }
+
+    get user() { //compatibility
+        return this.authToken;
+    }
+
+    get account() { //compatibility
+        return this.authToken?.account;
+    }
+
+    get project() {
+        return this.authToken?.project;
+    }
+
+    get accounts() { //compatibility
+        return this.authToken?.accounts;
+    }
+
+    get authCallback() {
+        return this.rawAuthToken.then(token => `Bearer ${token}`);
+    }
+
+    get rawAuthToken() {
+        return getComposableToken().then(res => {
+            const token = res?.rawToken
+            if (!token) {
+                throw new Error('No token available');
+            }
+            this.authToken = jwtDecode(token) as unknown as AuthTokenPayload;
+            return token;
+        });
+    }
+
+    signOut() { //compatibility
+        this.logout();
+    }
+
+    getAccount() {
+        return this.authToken?.account;
+    }
+
+    async login(token: string) {
+        this.authError = undefined;
+        this.isLoading = false;
+        this.client.withAuthCallback(() => this.authCallback)
+        this.authToken = jwtDecode(token) as unknown as AuthTokenPayload;
+        console.log(`Logging in as ${this.authToken?.name} with account ${this.authToken?.account.name} (${this.authToken?.account.id}, and project ${this.authToken?.project?.name} (${this.authToken?.project?.id})`);
+
+        //store selected account in local storage
+        localStorage.setItem(LastSelectedAccountId_KEY, this.authToken.account.id);
+        localStorage.setItem(LastSelectedProjectId_KEY + '-' + this.authToken.account.id, this.authToken.project?.id ?? '');
+        // notify the host app of the login
+        Env.onLogin?.(this.authToken);
+
+        // Independent async calls
+        await Promise.all([
+            this._loadTypes(),
+            this.fetchOnboardingStatus(),
+        ]);
+
+        return Promise.resolve();
+
+    }
+
+    isLoggedIn() {
+        return !!this.authToken;
+    }
+
+
+    logout() {
+        console.log('Logging out');
+        if (this.authToken) {
+            getFirebaseAuth().signOut();
+        }
+        this.authError = undefined;
+        this.isLoading = false;
+        this.authToken = undefined;
+        this.typeRegistry = undefined;
+        this.setSession = undefined;
+        this.client.withAuthCallback(undefined);
+    }
+
+    async switchAccount(targetAccountId: string) {
+        localStorage.setItem(LastSelectedAccountId_KEY, targetAccountId);
+        if (this) {
+            if (this.account && this.project) {
+                localStorage.setItem(LastSelectedProjectId_KEY + '-' + this.account.id, this.project.id);
+            } else if (this.account) {
+                localStorage.removeItem(LastSelectedProjectId_KEY + '-' + this.account.id);
+            }
+        }
+
+        window.location.replace('/?a=' + targetAccountId);
+    }
+
+    async switchProject(targetProjectId: string) {
+        if (this.account) {
+            localStorage.setItem(LastSelectedProjectId_KEY + '-' + this.account.id, targetProjectId);
+        }
+
+        window.location.replace('/?a=' + this.account?.id + '&p=' + targetProjectId);
+    }
+
+    async _loadTypes() {
+        if (this.project) {
+            return this.store.types.list({}, { layout: true }).then(types => this.typeRegistry = new TypeRegistry(types)).catch(err => {
+                console.error('Failed to fetch object types', err);
+                throw err;
+            })
+        } else {
+            console.log('No project selected');
+        }
+    }
+
+    async reloadTypes() {
+        return this._loadTypes().then(() => {
+            this.setSession?.(this.clone());
+        });
+    }
+
+    async fetchAccounts() {
+        return this.client.accounts.list().then(accounts => {
+            if (!this.authToken) {
+                throw new Error('No token available');
+            }
+            this.authToken.accounts = accounts;
+            this.setSession?.(this.clone());
+        }).catch(err => {
+            console.error('Failed to fetch accounts', err);
+            throw err;
+        });
+    }
+
+    async fetchOnboardingStatus(): Promise<boolean> {
+        if (this.onboardingComplete) {
+            console.log('Onboarding already completed');
+            return false;
+        }
+        const previousStatus = this.onboardingComplete;
+        try {
+            const onboarding = await this.client.account.onboardingProgress();
+            this.onboardingComplete = Object.values(onboarding).every(value => value === true);
+            if (previousStatus !== this.onboardingComplete) {
+                return true;
+            }
+            this.setSession?.(this.clone());
+        } catch (error) {
+            console.error('Error fetching onboarding status:', error);
+            this.onboardingComplete = false;
+            this.setSession?.(this.clone());
+        }
+        return false;
+    }
+
+    clone() {
+        const session = new UserSession(this.client);
+        session.isLoading = this.isLoading;
+        session.authError = this.authError;
+        session.authToken = this.authToken;
+        session.setSession = this.setSession;
+        session.lastSelectedAccount = this.lastSelectedAccount;
+        session.switchAccount = this.switchAccount;
+        session.typeRegistry = this.typeRegistry;
+        session.onboardingComplete = this.onboardingComplete;
+        return session;
+    }
+}
+
+const UserSessionContext = createContext<UserSession>(undefined as any);
+
+export function useUserSession() {
+    const session = useContext(UserSessionContext);
+
+    if (!session) {
+        throw new Error('useUserSession must be used within a UserSessionProvider');
+    }
+    return session;
+}
+
+export { UserSession, UserSessionContext };