@vertesia/ui 0.54.0

package/LICENSE

@@ -0,0 +1,13 @@
+Copyright 2024 Composable Prompts
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -0,0 +1 @@
+# Composable Prompts hooks for React

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@vertesia/ui",
+  "version": "0.54.0",
+  "description": "Vertesia UI components and and hooks",
+  "type": "module",
+  "main": "./lib/index.js",
+  "files": [
+    "lib",
+    "src"
+  ],
+  "license": "Apache-2.0",
+  "homepage": "https://docs.vertesiahq.com",
+  "keywords": [
+    "vertesia",
+    "UI",
+    "react",
+    "components",
+    "hooks"
+  ],
+  "devDependencies": {
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.1",
+    "typescript": "^5.0.2"
+  },
+  "peerDependencies": {
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0"
+  },
+  "optionalDependencies": {
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0"
+  },
+  "types": "./lib/index.d.ts",
+  "dependencies": {
+    "@vertesia/client": "0.54.0",
+    "@vertesia/common": "0.54.0"
+  },
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "default": "./lib/index.js"
+    },
+    "./host": {
+      "types": "./lib/host/index.d.ts",
+      "default": "./lib/host/index.js"
+    },
+    "./context": {
+      "types": "./lib/context/index.d.ts",
+      "default": "./lib/context/index.js"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      ".": [
+        "./lib/index.d.ts"
+      ],
+      "host": [
+        "./lib/host.d.ts"
+      ],
+      "context": [
+        "./lib/context/index.d.ts"
+      ]
+    }
+  },
+  "scripts": {
+    "eslint": "eslint './src/**/*.{jsx,js,tsx,ts}'",
+    "build": "rm -rf ./lib ./tsconfig.tsbuildinfo && tsc --build",
+    "clean": "rimraf ./node_modules ./lib ./tsconfig.tsbuildinfo"
+  }
+}

package/src/context/HostContext.ts

@@ -0,0 +1,73 @@
+import type { VertesiaClient, ZenoClient } from "@vertesia/client";
+import type { AccountRef, AuthTokenPayload, ProjectRef } from "@vertesia/common";
+
+export const HOST_CONTEXT_VAR = '__vetesia_host_context__';
+
+// TODO This file redeclare some types from the composable UI / router
+// we need to make these pblics and move shared composable-ui parts here.
+
+export interface UserSession {
+    isLoading: boolean;
+    client: VertesiaClient;
+    authError?: Error;
+    authToken?: AuthTokenPayload;
+    lastSelectedAccount?: string | null;
+    lastSelectedProject?: string | null;
+    onboardingComplete?: boolean;
+    store: ZenoClient;
+    user?: AuthTokenPayload;
+    account?: AccountRef;
+    accounts?: AccountRef[];
+    project?: ProjectRef;
+    rawAuthToken: Promise<string>
+}
+export interface NavigateOptions {
+    replace?: boolean;
+    state?: any;
+    /**
+     * if defined prepend the basePath to the `to` argument
+     */
+    basePath?: string;
+}
+
+export interface RouterContext {
+    location: Location,
+    // route: Route,
+    // router: BaseRouter,
+    params: Record<string, string>,
+    state: any,
+    /**
+     * The path that matched the route. For widlcard `/*` paths this doens;t include the wildcard part.
+     * You can get the wildcard path from `remainingPath`.
+     */
+    matchedRoutePath: string,
+    remainingPath?: string,
+    navigate: (path: string, options?: NavigateOptions) => void;
+}
+type LazyImportFn = () => Promise<any>;
+interface ComponentRoute {
+    path: string;
+    Component: React.ComponentType<any>;
+}
+interface LazyComponentRoute {
+    path: string;
+    LazyComponent: LazyImportFn;
+}
+type Route = ComponentRoute | LazyComponentRoute;
+export interface MultiPagePluginProps {
+    title: string;
+    routes: Route[],
+    /**
+     * The path to use for the root resource. Defaults to '/'. Cannot contains path vairables or wildcards
+     */
+    index?: string;
+    children?: React.ReactNode;
+    fixLinks?: boolean;
+}
+export interface HostContext {
+    useUserSession: () => UserSession;
+    useRouterContext: () => RouterContext;
+    useNavigate: () => (path: string, options?: NavigateOptions) => void;
+    useLocation: () => Location;
+    MultiPagePlugin: React.ComponentType<MultiPagePluginProps>;
+}

package/src/context/index.ts

@@ -0,0 +1,20 @@
+/**
+ * This file contains the host context which is a set of live components and hooks shared
+ * with the plugins.
+ * The plugin must import a component or hook from the host context by using:
+ * import {SomeComponnet, useSomeHook } from '@vetesia/ui-extension-sdk/context';
+ */
+
+import { HOST_CONTEXT_VAR, HostContext } from "./HostContext.js";
+
+const context = (globalThis as any)[HOST_CONTEXT_VAR] as HostContext;
+
+export const {
+    useUserSession,
+    useRouterContext,
+    useNavigate,
+    useLocation,
+    MultiPagePlugin,
+} = context;
+
+export * from "./HostContext.js";

package/src/host/PluginHost.tsx

@@ -0,0 +1,37 @@
+import { useEffect, useInsertionEffect, useState } from "react";
+import { usePluginModule } from "./PluginManager.js";
+import { HOST_CONTEXT_VAR, HostContext } from "../context/HostContext.js";
+
+function createSharedContext(context: HostContext): HostContext {
+    (globalThis as any)[HOST_CONTEXT_VAR] = context;
+    return context;
+}
+
+export function PluginHost({ pluginId, slot, context }: { pluginId: string, slot: string, context: HostContext }) {
+    const [contextCreated, setContextCreated] = useState(false);
+    useEffect(() => {
+        createSharedContext(context);
+        setContextCreated(true);
+    }, []);
+    return contextCreated && <_PluginHost pluginId={pluginId} slot={slot} />
+}
+
+function _PluginHost({ pluginId, slot }: { pluginId: string, slot: string }) {
+    const { plugin, module, error } = usePluginModule(pluginId);
+    useInsertionEffect(() => {
+        if (module) {
+            plugin!.install();
+        }
+    }, [module]);
+
+    if (!plugin) {
+        return <div>Plugin {pluginId} not found</div>
+    } else if (error) {
+        return <div>Failed to load plugin {plugin.manifest.name} from {plugin.manifest.src}: {error.message}</div>
+    } else if (module) {
+        return module.mount(slot)
+    } else {
+        return <div>Loading ...</div>
+    }
+
+}

package/src/host/PluginManager.tsx

@@ -0,0 +1,197 @@
+import React, { createContext, useContext, useEffect, useMemo, useState } from "react";
+import { PluginManifest } from "@vertesia/common";
+
+export enum PluginInstanceStatus {
+    registered,
+    loading,
+    loaded,
+    error, //loading error
+    installed,
+}
+
+export interface PluginModule {
+    mount(slot: string): React.ReactNode;
+    css?: string;
+}
+
+export class PluginInstance {
+    status: PluginInstanceStatus = PluginInstanceStatus.registered;
+    _module?: PluginModule;
+    error?: Error;
+
+    constructor(public manifest: PluginManifest) {
+    }
+
+    get isInstalled() {
+        return this.status === PluginInstanceStatus.installed;
+    }
+
+    get isLoading() {
+        return this.status === PluginInstanceStatus.loading;
+    }
+
+    get styleId() {
+        return `plugin-style-${this.manifest.id}`;
+    }
+
+    async _load() {
+        if (this.status === PluginInstanceStatus.registered) {
+            try {
+                const module = await import(/* @vite-ignore */ this.manifest.src);
+                this.status = PluginInstanceStatus.loading;
+                if (typeof module.mount !== "function") {
+                    throw new Error(`Plugin ${this.manifest.id} does not provide a mount function`);
+                }
+                this._module = module;
+                this.status = PluginInstanceStatus.loaded;
+            } catch (err) {
+                this.status = PluginInstanceStatus.error;
+                throw err;
+            }
+        } else {
+            throw new Error(`Plugin ${this.manifest.id} was already loaded`);
+        }
+    }
+
+    async getModule(): Promise<PluginModule> {
+        if (!this._module) {
+            await this._load();
+        }
+        return this._module!;
+    }
+
+    install() {
+        if (this.status === PluginInstanceStatus.loaded && this._module) {
+            const module = this._module;
+            if (module.css) {
+                // inject css
+                let style = document.getElementById(this.styleId) as HTMLStyleElement;
+                if (!style) {
+                    style = document.createElement('style');
+                    style.id = this.styleId;
+                    style.appendChild(document.createTextNode(module.css));
+                    document.head.appendChild(style);
+                    this.status = PluginInstanceStatus.installed;
+                }
+            }
+        } else if (this.status !== PluginInstanceStatus.installed) {
+            throw new Error(`Plugin ${this.manifest.id} is not loaded: ` + this.status);
+        }
+    }
+
+    async uninstall() {
+        if (this.status === PluginInstanceStatus.installed) {
+            const style = document.getElementById(this.styleId);
+            if (style) {
+                style.remove();
+                this.status = PluginInstanceStatus.loaded;
+            }
+        }
+    }
+}
+
+export class PluginManager {
+    plugins: Record<string, PluginInstance> = {};
+    constructor(manifests: PluginManifest[] = []) {
+        this.addAll(manifests);
+    }
+    addAll(manifests: PluginManifest[]) {
+        return manifests.map(manifest => this.add(manifest));
+    }
+    add(manifest: PluginManifest) {
+        const instance = new PluginInstance(manifest);
+        this.plugins[manifest.id] = instance;
+        return instance;
+    }
+    remove(id: string) {
+        const instance = this.plugins[id];
+        if (instance) {
+            instance.uninstall();
+            delete this.plugins[id];
+        }
+    }
+    get(id: string) {
+        return this.plugins[id];
+    }
+}
+
+export interface PluginManagerState {
+    manager: PluginManager;
+    refresh(): void;
+}
+
+const PluginManagerContext = createContext<PluginManagerState | null>(null);
+
+interface PluginsProviderProps {
+    plugins: PluginManifest[];
+    children?: React.ReactNode | React.ReactNode[];
+}
+export function PluginsProvider({ plugins, children }: PluginsProviderProps) {
+    const [key, setKey] = useState(0);
+    const manager = useMemo(() => new PluginManager(plugins), [plugins]);
+    const ctx = {
+        manager,
+        refresh: () => setKey(key + 1),
+    }
+    return <PluginManagerContext.Provider key={key} value={ctx}>
+        {children}
+    </PluginManagerContext.Provider>
+}
+
+export function usePluginManager() {
+    const ctx = useContext(PluginManagerContext);
+    if (!ctx) {
+        throw new Error('No PluginManagerContext found');
+    }
+    return ctx;
+}
+
+export function usePluginInstance(id: string) {
+    return usePluginManager().manager.get(id);
+}
+
+/**
+ * Get the plugin instance and load the module. Returns null if the plugin is not yet loaded.
+ * When the plugin loads then returns the plugin instance
+ * @param id
+ * @returns
+ */
+export function usePluginModule(id: string): {
+    plugin: PluginInstance | null,
+    module: PluginModule | null,
+    error: Error | null,
+} {
+    const [module, setModule] = useState<PluginModule | null>(null);
+    const { manager } = usePluginManager();
+    const plugin = manager.get(id);
+    useEffect(() => {
+        if (plugin) {
+            plugin.getModule().then(setModule);
+        }
+    }, [plugin]);
+    if (!plugin) {
+        return {
+            plugin: null,
+            module: null,
+            error: new Error(`Plugin ${id} not found`),
+        }
+    } else if (plugin.error) {
+        return {
+            plugin: plugin,
+            module: plugin._module || null,
+            error: plugin.error,
+        };
+    } else if (module) {
+        return {
+            plugin: plugin,
+            module: module,
+            error: null,
+        };
+    } else {
+        return {
+            plugin: plugin,
+            module: module,
+            error: plugin.error || null,
+        };
+    }
+}

package/src/host/index.ts

@@ -0,0 +1,2 @@
+export * from "./PluginHost.js";
+export * from "./PluginManager.js";

package/src/index.ts

@@ -0,0 +1 @@
+// TODO export here common components, hooks and utility functions