@codenotch/codenotch.react 1.0.81

package/src/index.ts

@@ -0,0 +1,387 @@
+import ReactDOM from "react-dom";
+import { SignalR } from "./core/SignalR";
+import ProcessUtils from "./core/ProcessUtils";
+import { IDisposable } from "./models/Misc";
+import { ICodenotchApi, ICodenotchDialog, ICodenotchEnv, IProcessResult } from "./models/Codenotch";
+import { v4 } from "uuid";
+import CodeEditor from "./components/CodeEditor";
+
+var signalR: SignalR | undefined = undefined;
+
+/**
+ * The Codenotch runtime environment, populated by {@link init}.
+ * Prefer reading it through `useCodenotch().env`.
+ */
+const env: ICodenotchEnv = {};
+
+const MISSING_CLUSTER_URL_ERROR = "Codenotch cluster URL is not defined. Please set it in the Codenotch configuration.";
+const MISSING_SERVICE_NAME_ERROR = "Codenotch service name is not defined. Please set it in the Codenotch configuration.";
+const MISSING_TENANT_NAME_ERROR = "Codenotch tenant name is not defined. Please set it in the Codenotch configuration.";
+
+/**
+ * Initialize the Codenotch environment from the given key-value pairs.
+ *
+ * This is normally called once, by the page hosting the application, with the
+ * environment variables injected by the Codenotch runtime (URL parameters or
+ * any other source). It must be called before `useCodenotch()` is used.
+ *
+ * Recognized key formats:
+ * - `i18n.<key>.<language>` — a translation, stored in `env.i18n[language][key]`.
+ *   The first language found becomes the current language if none is set.
+ * - `GLOBAL.<name>` — JSON value assigned to `window[name]` (or `globalThis`).
+ * - `appManifest` / `projectManifest` — parsed as JSON into the environment.
+ * - anything else — copied as-is onto {@link env}.
+ *
+ * The UI theme is resolved from the `_theme` URL parameter, or from
+ * `prefers-color-scheme` as a fallback.
+ *
+ * @param envVariables An object containing the Codenotch environment variables as key-value pairs.
+ * @example
+ * import { init } from 'codenotch-react';
+ * init({
+ *     clusterUrl: 'https://cluster.example.com',
+ *     serviceName: 'myproject',
+ *     tenantName: 'acme',
+ *     'i18n.welcome.en': 'Welcome',
+ *     'i18n.welcome.fr': 'Bienvenue'
+ * });
+ */
+function init(envVariables: any): void {
+
+
+    // Ensure envVariables is an object
+    if (typeof envVariables === 'object' && envVariables !== null) {
+
+        let i18nLanguages = new Set<string>();
+
+        Object.keys(envVariables).forEach((key) => {
+            try {
+                if (key.startsWith('GLOBAL.')) {
+                    // Global variable, we set it directly on the window object
+                    let globalKey = key.substring('GLOBAL.'.length);
+                    let globalObject = typeof window !== 'undefined' ? window : globalThis;
+                    (globalObject as any)[globalKey] = JSON.parse(envVariables[key]);
+                    console.log(`Codenotch global variable ${globalKey} set!`);
+                    return;
+                }
+                else if (key.startsWith("i18n.")) {
+                    // Special case
+                    let parts = key.split("."); // i18n.someKey.fr
+                    let language = parts[parts.length - 1]; // fr
+                    let keyName = parts.slice(1, parts.length - 1).join("."); // someKey
+                    i18nLanguages.add(language);
+
+                    let value = `${envVariables[key]}`.trim();
+                    if (value.startsWith('"') && value.endsWith('"')) {
+                        // Parse like json
+                        value = JSON.parse(value);
+                    }
+
+                    env.i18n = env.i18n ?? {};
+                    env.i18n[language] = env.i18n[language] ?? {};
+                    env.i18n[language][keyName] = value;
+                }
+                else {
+                    (env as any)[key] = envVariables[key];
+
+                    if (['appManifest', 'projectManifest'].includes(key)) {
+                        // Must be Json
+                        try {
+                            (env as any)[key] = JSON.parse(envVariables[key]);
+                        }
+                        catch (error) {
+                            console.warn(`Codenotch environment variable ${key} is not a valid JSON string. Using raw value.`);
+                        }
+                    }
+
+                    console.log(`Codenotch environment variable ${key} set to ${(env as any)[key]}`);
+                }
+            }
+            catch (error) {
+                console.error(`Error processing Codenotch environment variable ${key}:`, error);
+            }
+        });
+
+        if (env.language === undefined) {
+            // If current language is not defined, we set it to the first language found in i18n
+            if (i18nLanguages.size > 0) {
+                env.language = Array.from(i18nLanguages)[0];
+                console.log(`Codenotch current language set to ${env.language}`);
+            }
+        }
+
+    }
+
+    // Instantiate SignalR for further use in the API
+    if (env.clusterUrl && env.serviceName) {
+        signalR = new SignalR(env.clusterUrl, env.serviceName, false, env.accessToken);
+    }
+
+    // Get theme like AEC does
+    try {
+        let urlParams = Object.fromEntries(new URLSearchParams(window.location.search).entries());
+        if (urlParams["_theme"]) {
+            let theme = urlParams["_theme"].toLowerCase();
+            if (theme === "light" || theme === "dark") {
+                env.theme = theme;
+            }
+        }
+        else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            env.theme = 'dark';
+        }
+        else {
+            env.theme = 'light';
+        }
+    }
+    catch {
+    }
+}
+
+/**
+ * Return the Codenotch client API bound to the current environment.
+ *
+ * Despite its name this is NOT a React hook — it is a plain function with no
+ * hook rules attached: it can be called anywhere (components, handlers, plain
+ * modules). `init()` must have been called first, which the Codenotch runtime
+ * does automatically when serving the application.
+ *
+ * @returns The Codenotch API: BPMN processes, SioQL queries, i18n, signals, theme…
+ * @example
+ * import { useCodenotch } from 'codenotch-react';
+ *
+ * const MyApp: React.FC = () => {
+ *     const cn = useCodenotch();
+ *     return <h1>{cn.i18n('welcome')}</h1>;
+ * };
+ */
+function useCodenotch(): ICodenotchApi {
+    return {
+        env: env,
+        uuid: () => v4(),
+        getProjectFileUrl: (relativePath: string): string => {
+            if (env.clusterUrl === undefined) throw new Error(MISSING_CLUSTER_URL_ERROR);
+            if (env.serviceName === undefined) throw new Error(MISSING_SERVICE_NAME_ERROR);
+            relativePath = relativePath.replace(/\\/g, "/");
+            if (relativePath.startsWith("/")) relativePath = relativePath.substring(1);
+            let url = `${env.clusterUrl}/${env.serviceName}/project/file?name=""&path=${encodeURIComponent(relativePath)}`;
+            return url;
+        },
+        getProjectFile: async (relativePath: string): Promise<string | undefined> => {
+            let url = useCodenotch().getProjectFileUrl(relativePath);
+            let resp = await fetch(url);
+            if (resp.status.toString().startsWith('2') === false) {
+                throw new Error(`Failed to fetch file content: ${resp.status} ${resp.statusText}`);
+            }
+            let content = await resp.text();
+            return content;
+        },
+        requestSioql: async (sioql: string, verbose?: boolean): Promise<any> => {
+            if (env.clusterUrl === undefined) throw new Error(MISSING_CLUSTER_URL_ERROR);
+            if (env.serviceName === undefined) throw new Error(MISSING_SERVICE_NAME_ERROR);
+
+            const request: RequestInit = {
+                method: 'POST',
+                mode: 'cors',
+                credentials: 'same-origin',
+                headers: { 'Content-Type': 'application/json' },
+                body: `"${sioql.replace(/\"/g, '\\\"')}"`
+            };
+
+            if (`${env.accessToken ?? ''}`.trim() !== "") {
+                if (env.tenantName === undefined) throw new Error(MISSING_TENANT_NAME_ERROR);
+                request.headers = {
+                    ...request.headers, [`${env.tenantName}AccessToken`]: env.accessToken!
+                };
+            }
+
+            const response = await fetch(`${env.clusterUrl}/${env.serviceName}/sioql${verbose ? "?v=true" : ""}`, request);
+            if (!response.ok) {
+                const error = await response.text();
+                throw new Error(error);
+            }
+
+            return await response.json();
+        },
+        i18n: (key: string, ...args: any[]): string => {
+            try {
+                if (env.i18n === undefined || Object.keys(env.i18n).length === 0) {
+                    console.warn("Codenotch i18n is not defined. Please set it in the Codenotch configuration.");
+                    return key;
+                }
+
+                let language = env.language ?? "en";
+                let isLanguageExists = env.i18n[language] !== undefined;
+                if (isLanguageExists === false) {
+                    let fallbackLanguage = Object.keys(env.i18n)[0];
+                    console.warn(`Codenotch i18n language ${language} is not defined. Falling back to ${fallbackLanguage}. Please set the correct language in the Codenotch configuration.`);
+                    language = fallbackLanguage;
+                }
+
+                let dico = env.i18n[language];
+                let value = dico[key];
+
+                if (typeof value !== "string") {
+                    console.warn(`Codenotch i18n key ${key} is not defined for language ${language}. Please set it in the Codenotch configuration.`);
+                    return key;
+                }
+                args = args ?? [];
+
+                let result = value.replace(/{([\d ]*)}/g, (match, p1) => {
+                    let argValue = args[p1.trim()];
+                    // Instead of returning 'undefined', returns an empty string
+                    return argValue !== undefined ? argValue : "";
+                });
+
+                return result;
+            }
+            catch (error) {
+                console.error("Error in i18n function:", error);
+                return key;
+            }
+        },
+        startProcess: async (processName: any, startNodeId: any, inputs: any): Promise<IProcessResult> => {
+            if (env.clusterUrl === undefined) throw new Error(MISSING_CLUSTER_URL_ERROR);
+            if (env.serviceName === undefined) throw new Error(MISSING_SERVICE_NAME_ERROR);
+            if (env.tenantName === undefined) throw new Error(MISSING_TENANT_NAME_ERROR);
+            if (signalR === undefined) throw new Error("SignalR not available. Cannot start process.");
+            return ProcessUtils.startProcess((processInstanceId, callbacks) => signalR!.subscribeToProcessInstance(processInstanceId, callbacks),
+                env.clusterUrl,
+                env.tenantName,
+                env.serviceName,
+                processName,
+                inputs,
+                undefined,
+                startNodeId ?? 'start',
+                env.accessToken);
+        },
+        getUrlParams: () => {
+            let result: { [key: string]: string } = {};
+            if (typeof window !== 'undefined') {
+                const params = new URL(window.location.href).searchParams;
+                params.forEach((value: string, key: string) => {
+                    if (result[key] === undefined) {
+                        result[key] = value;
+                    }
+                });
+            }
+            return result;
+        },
+        showDialog: (node: JSX.Element): ICodenotchDialog => {
+            let dialogId = "codenotch-dialog-" + Math.random().toString(36).substring(2, 9);
+            let result: ICodenotchDialog = {
+                id: dialogId,
+                close: () => {
+                    let dialogElement = document.getElementById(dialogId);
+                    if (dialogElement) {
+                        dialogElement.remove();
+                    }
+                }
+            };
+
+            // Find "cn-dialog-container" element in the page
+            let container = document.getElementById("cn-dialog-container");
+            if (container === null) {
+                container = document.createElement("div");
+                container.id = "cn-dialog-container";
+                container.style.zIndex = "9999";
+                container.style.position = "fixed";
+                container.style.top = "0";
+                container.style.left = "0";
+                container.style.minWidth = "100vw";
+                container.style.minHeight = "100vh";
+                container.style.maxWidth = "100vw";
+                container.style.maxHeight = "100vh";
+                container.style.display = "flex";
+                container.style.alignItems = "center";
+                container.style.justifyContent = "center";
+                container.style.pointerEvents = 'none';
+                document.body.appendChild(container);
+            }
+
+            let dialogElement = document.createElement('dialog');
+            dialogElement.id = dialogId;
+            dialogElement.style.zIndex = "9999";
+            dialogElement.style.position = "fixed";
+            dialogElement.style.top = "0";
+            dialogElement.style.left = "0";
+            dialogElement.style.minWidth = "100vw";
+            dialogElement.style.minHeight = "100vh";
+            dialogElement.style.maxWidth = "100vw";
+            dialogElement.style.maxHeight = "100vh";
+            dialogElement.style.display = "flex";
+            dialogElement.style.alignItems = "center";
+            dialogElement.style.justifyContent = "center";
+            dialogElement.style.pointerEvents = 'all';
+            dialogElement.style.background = '#78787822';
+            dialogElement.style.backdropFilter = 'blur(2px)';
+
+            container.appendChild(dialogElement);
+
+            ReactDOM.render(node, dialogElement, () => {
+                dialogElement.showModal();
+            });
+
+            return result;
+        },
+        listenSignal: async (signalId: string, callback: (data: any) => void): Promise<IDisposable> => {
+
+            if (!signalR) {
+                throw new Error("SignalR not available. Cannot listen to signal.");
+            }
+
+            let unsubscribeFunc = await signalR.subscribeToSignal(signalId, callback);
+
+            return {
+                dispose: () => {
+                    unsubscribeFunc();
+                }
+            };
+
+        },
+        setTheme: (theme: 'light' | 'dark') => {
+            if (env.theme === theme) return;
+            if (env.theme) document.documentElement.classList.remove(env.theme);
+
+            env.theme = theme;
+            document.documentElement.classList.add(theme);
+        },
+        setLanguage: (lang: string) => {
+            if (env.language === lang) return;
+            env.language = lang;
+        },
+        getLanguages: () => {
+            return env.projectManifest?.languages ?? [];
+        },
+        getLanguage: () => {
+            return env.language;
+        },
+        getTheme: () => {
+            return env.theme;
+        },
+        getProjectManifest: () => {
+            if (env.projectManifest === undefined) {
+                throw new Error("Project manifest is not defined in Codenotch environment. Please set it in the Codenotch configuration.");
+            }
+            return env.projectManifest;
+        },
+        getAppManifest: () => {
+            return env.appManifest;
+        }
+    };
+}
+
+export {
+    env,
+    useCodenotch,
+    init,
+    CodeEditor
+};
+
+// Public models. Re-exported from the package root so that the typings
+// generated by the Codenotch IDE (typings/i18n.d.ts and typings/process.d.ts,
+// which augment the 'codenotch-react' module) merge with the real
+// TranslationRegistry / ProcessRegistry declarations.
+export * from "./models/Codenotch";
+export * from "./models/Misc";
+export * from "./models/AppManifestModels";
+export * from "@codenotch/codenotch.core";

package/src/models/AppManifestModels.ts

@@ -0,0 +1,54 @@
+
+export interface ApplicationManifest {
+    pwa?: PWAManifest;
+
+    html?: HTMLManifest;
+
+    auml?: AUMLManifest;
+}
+
+export interface HTMLManifest {
+    title?: string;
+    description?: string;
+    author?: string;
+    keywords?: string;
+    charset?: string;
+}
+
+export interface PWAManifest {
+    background_color?: string;
+    description?: string;
+    dir?: string;
+    display?: string;
+    icons?: PWAManifestIcon[];
+    lang?: string;
+    name?: string;
+    orientation?: string;
+    prefer_related_applications?: boolean;
+    related_applications?: PWAManifestRelatedApplications[];
+    scope?: string;
+    short_name?: string;
+    start_url?: string;
+    theme_color?: string;
+    shortcuts?: string;
+
+    display_override?: string[];
+}
+
+export interface PWAManifestIcon {
+    src?: string;
+    sizes?: string;
+    type?: string;
+}
+
+export interface PWAManifestRelatedApplications {
+    platform?: string;
+    url?: string;
+    id?: string;
+}
+
+export interface AUMLManifest {
+    name?: string;
+    description?: string;
+    logoURL?: string;
+}