@akinon/app-client 0.10.0 → 0.11.0

package/dist/cjs/app-client-provider.d.ts

@@ -1,40 +1,116 @@
-import { ApplicationData, ApplicationNavigation, ApplicationParams, FullpageApplicationConfig, PluginApplicationConfig, RegisteredApp, RegisteredAppType, ShellNavigation, ShellNavigationPayload } from '@akinon/app-shared';
+import type { ApplicationData, ApplicationModalSize, ApplicationNavigation, ApplicationParams, ApplicationToastType, FullpageApplicationConfig, PluginApplicationConfig, RegisteredApp, RegisteredAppType, ShellNavigation, ShellNavigationPayload } from '@akinon/app-shared';
 import React from 'react';
 /**
  * Defines the context state for the AppClient, including application data,
  * loading status, and methods for invoking actions and navigating.
- *
- * @typedef {Object} AppClientContextState
- * @property {ApplicationData} [data] - Optional application data shared across micro frontends.
- * @property {ApplicationParams} [params] - Optional. Additional parameters to be passed to the application.
- * @property {boolean} isLoading - Indicates whether the application data is currently loading.
- * @property {Function} invokeAction - Method to invoke an action defined in the AppShell.
- * @property {Function} navigate - Method to navigate to a specified path within the application.
- * Additional helper methods for invoking default actions like showing dialogs or toasts.
+ * Additional helper methods include showing dialogs, toasts, and error messages.
  */
 interface AppClientContextState {
+    /**
+     * Shared application data across micro frontends.
+     */
     data?: ApplicationData;
+    /**
+     * Additional parameters to be passed to the application.
+     */
     params?: ApplicationParams;
+    /**
+     * Indicates whether the application data is currently loading.
+     */
     isLoading: boolean;
-    invokeAction: <T = any>(actionKey: string, ...args: any[]) => Promise<T>;
+    /**
+     * Method to invoke an action defined in the AppShell.
+     */
+    invokeAction: (actionKey: string, ...args: Array<unknown>) => Promise<unknown>;
+    /**
+     * Method to navigate to a specified path within the application.
+     * @param {ShellNavigationPayload} payload - The payload containing the navigation details.
+     */
     navigate: (payload: ShellNavigationPayload) => void;
-    showModalDialog?: (title: string, content: string) => void;
-    showConfirmationDialog?: (title: string, content: string) => boolean;
-    showToast?: (content: string, type: 'success' | 'warning' | 'error' | 'loading' | 'destroy') => void;
-    showErrorMessage?: (title: string, content: string) => void;
-    showRichModal?: (path: string, context?: any) => void;
+    /**
+     * Shows a modal dialog with the specified options.
+     * This method communicates with the AppShell to display the modal dialog.
+     *
+     * @param {Object} options - The options for the modal dialog.
+     * @param {string} options.title - The title of the modal dialog.
+     * @param {string} options.content - The content of the modal dialog.
+     * @param {Function} options.onConfirm - Callback function to be executed when the dialog is confirmed.
+     * @param {Function} options.onCancel - Callback function to be executed when the dialog is canceled.
+     * @returns {boolean} - Indicates if the dialog was successfully shown.
+     */
+    showModalDialog?: (options: {
+        title: string;
+        content: string;
+        onConfirm?: () => void;
+        onCancel?: () => void;
+    }) => boolean;
+    /**
+     * Shows a confirmation dialog with the specified options.
+     * This method communicates with the AppShell to display the confirmation dialog.
+     *
+     * @param {Object} options - The options for the confirmation dialog.
+     * @param {string} options.title - The title of the confirmation dialog.
+     * @param {string} options.content - The content of the confirmation dialog.
+     * @param {Function} options.onConfirm - Callback function to be executed when the dialog is confirmed.
+     * @param {Function} options.onCancel - Callback function to be executed when the dialog is canceled.
+     * @returns {boolean} - Indicates if the dialog was successfully shown.
+     */
+    showConfirmationDialog?: (options: {
+        title: string;
+        content: string;
+        onConfirm?: (data: unknown) => void;
+        onCancel?: () => void;
+    }) => boolean;
+    /**
+     * Shows a toast message with the specified content and type.
+     * This method communicates with the AppShell to display the toast message.
+     *
+     * @param {string} content - The content of the toast message.
+     * @param {ApplicationToastType} type - The type of the toast message.
+     */
+    showToast?: (content: string, type: ApplicationToastType) => boolean;
+    /**
+     * Shows an error message dialog with the specified title and content.
+     * This method communicates with the AppShell to display the error message.
+     *
+     * @param {string} title - The title of the error message dialog.
+     * @param {string} content - The content of the error message dialog.
+     */
+    showErrorMessage?: (title: string, content: string) => boolean;
+    /**
+     * Displays a rich-contentful modal with the specified path and context.
+     * This method communicates with the AppShell to display the rich-contentful modal.
+     *
+     * @param {string} path - The path of displayed iframe.
+     * @param {unknown} context - Optional context. Its type must follow the rules: https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm
+     * @param {Object} size - Optional size of the modal.
+     * @param {number | string} size.maxWidth - The maximum width of the modal. If falsish, the modal will be max 540px wide.
+     * @param {number | string} size.maxHeight - The maximum height of the modal. If falsish, the modal will be max 360px high.
+     * @param {string} closeIconColor - Optional color of the close icon.
+     */
+    showRichModal?: (path: string, context?: unknown, size?: ApplicationModalSize, closeIconColor?: string) => boolean;
+    /**
+     * The current locale of the application.
+     */
     locale: string;
+    /**
+     * Method to handle locale changes.
+     * @param {Function} callback - Callback function to be executed when the locale changes.
+     * @returns {Function} - Function to remove the callback.
+     */
     onLocaleChange: (callback: (newLocale: string) => void) => void;
 }
 /**
  * Props for the AppClientProvider component.
- *
- * @typedef {Object} AppClientProviderProps
- * @property {React.ReactNode} children - Children components to be rendered within the provider.
- * @property {ApplicationConfig} config - Configuration for the application, including settings like `isDev` and `forceRedirect`.
  */
 interface AppClientProviderProps {
+    /**
+     * Children components to be rendered within the provider.
+     */
     children: React.ReactNode;
+    /**
+     * Configuration for the application, including settings like `isDev` and `forceRedirect`.
+     */
     config: FullpageApplicationConfig | PluginApplicationConfig;
 }
 /**

package/dist/cjs/app-client-provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app-client-provider.d.ts","sourceRoot":"","sources":["../../src/app-client-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,qBAAqB,EACrB,iBAAiB,EAGjB,yBAAyB,EACzB,uBAAuB,EACvB,aAAa,EACb,iBAAiB,EACjB,eAAe,EACf,sBAAsB,EACvB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,KAON,MAAM,OAAO,CAAC;AAEf;;;;;;;;;;;GAWG;AACH,UAAU,qBAAqB;IAC7B,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,CAAC,CAAC,GAAG,GAAG,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC;IACzE,QAAQ,EAAE,CAAC,OAAO,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACpD,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,sBAAsB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,OAAO,CAAC;IACrE,SAAS,CAAC,EAAE,CACV,OAAO,EAAE,MAAM,EACf,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,KAC1D,IAAI,CAAC;IACV,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IACtD,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,CAAC,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,KAAK,IAAI,CAAC;CACjE;AAED;;;;;;GAMG;AACH,UAAU,sBAAsB;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,EAAE,yBAAyB,GAAG,uBAAuB,CAAC;CAC7D;AAeD;;;;GAIG;AACH,QAAA,MAAM,YAAY,6BAAqC,CAAC;AA4FxD;;;;;GAKG;AACH,QAAA,MAAM,iBAAiB,yBAA0B,sBAAsB,sBAoItE,CAAC;AAEF,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,CAAC;AAC3C,YAAY,EACV,qBAAqB,EACrB,yBAAyB,EACzB,uBAAuB,EACvB,aAAa,EACb,iBAAiB,EACjB,eAAe,EAChB,CAAC"}
+{"version":3,"file":"app-client-provider.d.ts","sourceRoot":"","sources":["../../src/app-client-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,eAAe,EACf,oBAAoB,EACpB,qBAAqB,EACrB,iBAAiB,EACjB,oBAAoB,EACpB,yBAAyB,EACzB,uBAAuB,EACvB,aAAa,EACb,iBAAiB,EACjB,eAAe,EACf,sBAAsB,EACvB,MAAM,oBAAoB,CAAC;AAG5B,OAAO,KAON,MAAM,OAAO,CAAC;AAEf;;;;GAIG;AACH,UAAU,qBAAqB;IAC7B;;OAEG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,YAAY,EAAE,CACZ,SAAS,EAAE,MAAM,EACjB,GAAG,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,KACpB,OAAO,CAAC,OAAO,CAAC,CAAC;IACtB;;;OAGG;IACH,QAAQ,EAAE,CAAC,OAAO,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACpD;;;;;;;;;;OAUG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE;QAC1B,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,CAAC;QAChB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;QACvB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;KACvB,KAAK,OAAO,CAAC;IACd;;;;;;;;;;OAUG;IACH,sBAAsB,CAAC,EAAE,CAAC,OAAO,EAAE;QACjC,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,CAAC;QAChB,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;QACpC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;KACvB,KAAK,OAAO,CAAC;IACd;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,oBAAoB,KAAK,OAAO,CAAC;IACrE;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,OAAO,CAAC;IAC/D;;;;;;;;;;OAUG;IACH,aAAa,CAAC,EAAE,CACd,IAAI,EAAE,MAAM,EACZ,OAAO,CAAC,EAAE,OAAO,EACjB,IAAI,CAAC,EAAE,oBAAoB,EAC3B,cAAc,CAAC,EAAE,MAAM,KACpB,OAAO,CAAC;IACb;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,cAAc,EAAE,CAAC,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,KAAK,IAAI,CAAC;CACjE;AAED;;GAEG;AACH,UAAU,sBAAsB;IAC9B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,MAAM,EAAE,yBAAyB,GAAG,uBAAuB,CAAC;CAC7D;AAyBD;;;;GAIG;AACH,QAAA,MAAM,YAAY,QAAO,qBAAqD,CAAC;AAwL/E;;;;;GAKG;AACH,QAAA,MAAM,iBAAiB,yBAA0B,sBAAsB,sBAiJtE,CAAC;AAEF,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,CAAC;AAC3C,YAAY,EACV,qBAAqB,EACrB,yBAAyB,EACzB,uBAAuB,EACvB,aAAa,EACb,iBAAiB,EACjB,eAAe,EAChB,CAAC"}

package/dist/cjs/app-client-provider.js

@@ -13,15 +13,25 @@ exports.useAppClient = exports.AppClientProvider = void 0;
 const app_shared_1 = require("@akinon/app-shared");
 const framebus_1 = require("framebus");
 const react_1 = require("react");
+/**
+ * Default context state for the AppClient.
+ */
 const defaultContextState = {
     isLoading: true,
     invokeAction: () => __awaiter(void 0, void 0, void 0, function* () {
         return Promise.reject('Action functionality not initialized.');
     }),
-    navigate: () => { },
+    navigate: () => {
+        return;
+    },
     locale: 'en',
-    onLocaleChange: () => { }
+    onLocaleChange: () => {
+        return;
+    }
 };
+/**
+ * Context for the AppClient, providing access to application state and methods.
+ */
 const AppClientContext = (0, react_1.createContext)(defaultContextState);
 /**
  * Custom hook to access the AppClient context.
@@ -31,68 +41,97 @@ const AppClientContext = (0, react_1.createContext)(defaultContextState);
 const useAppClient = () => (0, react_1.useContext)(AppClientContext);
 exports.useAppClient = useAppClient;
 /**
- * This method communicates with the AppShell to perform
- * the navigation on the shell.
- *
- * @param {string} path - The path to navigate to.
+ * Navigates to the specified path within the application.
+ * This method communicates with the AppShell to perform the navigation.
  */
-const navigate = (payload) => {
+const navigate = ({ id, path, external }) => {
     const bus = new framebus_1.default();
-    bus.emit(app_shared_1.EVENTS.NAVIGATE, Object.assign({}, payload));
+    bus.emit(app_shared_1.EVENTS.NAVIGATE, { id, path, external });
 };
 /**
- * Shows a modal dialog with the specified title and content. This method communicates
- * with the AppShell to display the modal dialog.
+ * Shows a modal dialog with the specified title and content.
+ * This method communicates with the AppShell to display the modal dialog.
  *
- * @param {string} title - The title of the modal dialog.
- * @param {string} content - The content of the modal dialog.
+ * @returns {boolean} - Indicates if the dialog was successfully shown.
  */
-const showModalDialog = (title, content) => {
+const showModalDialog = ({ title, content, onConfirm, onCancel }) => {
     const bus = new framebus_1.default();
-    bus.emit(app_shared_1.EVENTS.INVOKE_DEFAULT_ACTION, {
+    function handleActionConfirmed() {
+        bus.off(app_shared_1.EVENTS.ACTION_CONFIRMED, handleActionConfirmed);
+        bus.off(app_shared_1.EVENTS.ACTION_CANCELED, handleActionCanceled);
+        onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm();
+    }
+    function handleActionCanceled() {
+        bus.off(app_shared_1.EVENTS.ACTION_CANCELED, handleActionCanceled);
+        bus.off(app_shared_1.EVENTS.ACTION_CONFIRMED, handleActionConfirmed);
+        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+    }
+    if (onConfirm) {
+        bus.on(app_shared_1.EVENTS.ACTION_CONFIRMED, handleActionConfirmed);
+    }
+    if (onCancel) {
+        bus.on(app_shared_1.EVENTS.ACTION_CANCELED, handleActionCanceled);
+    }
+    return bus.emit(app_shared_1.EVENTS.INVOKE_DEFAULT_ACTION, {
         actionKey: app_shared_1.DEFAULT_ACTION_KEYS.showModalDialog,
         args: [title, content]
     });
 };
 /**
- * Shows a confirmation dialog with the specified title and content. This method communicates
- * with the AppShell to display the confirmation dialog and waits for user input.
+ * Shows a confirmation dialog with the specified title and content and can handle the user's input.
+ * This method communicates with the AppShell to display the confirmation dialog.
  *
- * @param {string} title - The title of the confirmation dialog.
- * @param {string} content - The content of the confirmation dialog.
- * @returns The result of the confirmation dialog action.
+ * @returns {boolean} - Indicates if the dialog was successfully shown.
  */
-const showConfirmationDialog = (title, content) => {
+const showConfirmationDialog = ({ title, content, onConfirm, onCancel }) => {
     const bus = new framebus_1.default();
+    function handleActionConfirmed(data) {
+        bus.off(app_shared_1.EVENTS.ACTION_CONFIRMED, handleActionConfirmed);
+        bus.off(app_shared_1.EVENTS.ACTION_CANCELED, handleActionCanceled);
+        onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(data);
+    }
+    function handleActionCanceled() {
+        bus.off(app_shared_1.EVENTS.ACTION_CANCELED, handleActionCanceled);
+        bus.off(app_shared_1.EVENTS.ACTION_CONFIRMED, handleActionConfirmed);
+        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+    }
+    if (onConfirm) {
+        bus.on(app_shared_1.EVENTS.ACTION_CONFIRMED, handleActionConfirmed);
+    }
+    if (onCancel) {
+        bus.on(app_shared_1.EVENTS.ACTION_CANCELED, handleActionCanceled);
+    }
     return bus.emit(app_shared_1.EVENTS.INVOKE_DEFAULT_ACTION, {
         actionKey: app_shared_1.DEFAULT_ACTION_KEYS.showConfirmationDialog,
         args: [title, content]
     });
 };
 /**
- * Displays a toast message with the specified content and type. This method communicates
- * with the AppShell to display the toast message.
+ * Displays a toast message with the specified content and type.
+ * This method communicates with the AppShell to display the toast message.
  *
  * @param {string} content - The content of the toast message.
- * @param {'success' | 'warning' | 'error' | 'loading' | 'destroy'} type - The type of the toast message.
+ * @param {ApplicationToastType} type - The type of the toast message.
+ * @returns {boolean} - Indicates if the event was emitted successfully.
  */
 const showToast = (content, type) => {
     const bus = new framebus_1.default();
-    bus.emit(app_shared_1.EVENTS.INVOKE_DEFAULT_ACTION, {
+    return bus.emit(app_shared_1.EVENTS.INVOKE_DEFAULT_ACTION, {
         actionKey: app_shared_1.DEFAULT_ACTION_KEYS.showToast,
         args: [content, type]
     });
 };
 /**
  * Displays an error message dialog with the specified title and content.
- * This method communicateswith the AppShell to display the error message.
+ * This method communicates with the AppShell to display the error message.
  *
  * @param {string} title - The title of the error message dialog.
  * @param {string} content - The content of the error message dialog.
+ * @returns {boolean} - Indicates if the event was emitted successfully.
  */
 const showErrorMessage = (title, content) => {
     const bus = new framebus_1.default();
-    bus.emit(app_shared_1.EVENTS.INVOKE_DEFAULT_ACTION, {
+    return bus.emit(app_shared_1.EVENTS.INVOKE_DEFAULT_ACTION, {
         actionKey: app_shared_1.DEFAULT_ACTION_KEYS.showErrorMessage,
         args: [title, content]
     });
@@ -103,12 +142,16 @@ const showErrorMessage = (title, content) => {
  *
  * @param {string} path - The path of displayed iframe.
  * @param {unknown} context - Optional context. Its type must follow the rules: https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm
+ * @param {Object} size - Optional size of the modal.
+ * @param {number | string} size.maxWidth - The maximum width of the modal. If falsish, the modal will be max 540px wide.
+ * @param {number | string} size.maxHeight - The maximum height of the modal. If falsish, the modal will be max 360px high.
+ * @param {string} closeIconColor - Optional color of the close icon.
  */
-const showRichModal = (path, context) => {
+const showRichModal = (path, context, size, closeIconColor) => {
     const bus = new framebus_1.default();
-    bus.emit(app_shared_1.EVENTS.INVOKE_DEFAULT_ACTION, {
+    return bus.emit(app_shared_1.EVENTS.INVOKE_DEFAULT_ACTION, {
         actionKey: app_shared_1.DEFAULT_ACTION_KEYS.showRichModal,
-        args: [path, context]
+        args: [path, context, size, closeIconColor]
     });
 };
 /**
@@ -129,11 +172,17 @@ const AppClientProvider = ({ children, config }) => {
         return new Promise((resolve, reject) => {
             const bus = new framebus_1.default();
             bus.emit(app_shared_1.EVENTS.INVOKE_ACTION, { actionKey, args }, (response) => {
-                if (response.success) {
-                    resolve(response.result);
+                if (typeof response === 'object' && response !== null) {
+                    const typedResponse = response;
+                    if (typedResponse.success) {
+                        resolve(typedResponse.result);
+                    }
+                    else {
+                        reject(new Error(typedResponse.error || 'Unknown error'));
+                    }
                 }
                 else {
-                    reject(new Error(response.error));
+                    reject(new Error('Invalid response format'));
                 }
             });
         });
@@ -156,7 +205,7 @@ const AppClientProvider = ({ children, config }) => {
         // Pass apps config data.
         bus.emit(app_shared_1.EVENTS.SET_CONFIG, { config });
         bus.on(app_shared_1.EVENTS.SET_DATA, (receivedData) => {
-            setData(receivedData);
+            setData(prevState => (Object.assign(Object.assign({}, prevState), receivedData)));
             setIsLoading(false);
         });
         bus.on(app_shared_1.EVENTS.SET_PARAMS, message => {

package/dist/esm/app-client-provider.d.ts

@@ -1,40 +1,116 @@
-import { ApplicationData, ApplicationNavigation, ApplicationParams, FullpageApplicationConfig, PluginApplicationConfig, RegisteredApp, RegisteredAppType, ShellNavigation, ShellNavigationPayload } from '@akinon/app-shared';
+import type { ApplicationData, ApplicationModalSize, ApplicationNavigation, ApplicationParams, ApplicationToastType, FullpageApplicationConfig, PluginApplicationConfig, RegisteredApp, RegisteredAppType, ShellNavigation, ShellNavigationPayload } from '@akinon/app-shared';
 import React from 'react';
 /**
  * Defines the context state for the AppClient, including application data,
  * loading status, and methods for invoking actions and navigating.
- *
- * @typedef {Object} AppClientContextState
- * @property {ApplicationData} [data] - Optional application data shared across micro frontends.
- * @property {ApplicationParams} [params] - Optional. Additional parameters to be passed to the application.
- * @property {boolean} isLoading - Indicates whether the application data is currently loading.
- * @property {Function} invokeAction - Method to invoke an action defined in the AppShell.
- * @property {Function} navigate - Method to navigate to a specified path within the application.
- * Additional helper methods for invoking default actions like showing dialogs or toasts.
+ * Additional helper methods include showing dialogs, toasts, and error messages.
  */
 interface AppClientContextState {
+    /**
+     * Shared application data across micro frontends.
+     */
     data?: ApplicationData;
+    /**
+     * Additional parameters to be passed to the application.
+     */
     params?: ApplicationParams;
+    /**
+     * Indicates whether the application data is currently loading.
+     */
     isLoading: boolean;
-    invokeAction: <T = any>(actionKey: string, ...args: any[]) => Promise<T>;
+    /**
+     * Method to invoke an action defined in the AppShell.
+     */
+    invokeAction: (actionKey: string, ...args: Array<unknown>) => Promise<unknown>;
+    /**
+     * Method to navigate to a specified path within the application.
+     * @param {ShellNavigationPayload} payload - The payload containing the navigation details.
+     */
     navigate: (payload: ShellNavigationPayload) => void;
-    showModalDialog?: (title: string, content: string) => void;
-    showConfirmationDialog?: (title: string, content: string) => boolean;
-    showToast?: (content: string, type: 'success' | 'warning' | 'error' | 'loading' | 'destroy') => void;
-    showErrorMessage?: (title: string, content: string) => void;
-    showRichModal?: (path: string, context?: any) => void;
+    /**
+     * Shows a modal dialog with the specified options.
+     * This method communicates with the AppShell to display the modal dialog.
+     *
+     * @param {Object} options - The options for the modal dialog.
+     * @param {string} options.title - The title of the modal dialog.
+     * @param {string} options.content - The content of the modal dialog.
+     * @param {Function} options.onConfirm - Callback function to be executed when the dialog is confirmed.
+     * @param {Function} options.onCancel - Callback function to be executed when the dialog is canceled.
+     * @returns {boolean} - Indicates if the dialog was successfully shown.
+     */
+    showModalDialog?: (options: {
+        title: string;
+        content: string;
+        onConfirm?: () => void;
+        onCancel?: () => void;
+    }) => boolean;
+    /**
+     * Shows a confirmation dialog with the specified options.
+     * This method communicates with the AppShell to display the confirmation dialog.
+     *
+     * @param {Object} options - The options for the confirmation dialog.
+     * @param {string} options.title - The title of the confirmation dialog.
+     * @param {string} options.content - The content of the confirmation dialog.
+     * @param {Function} options.onConfirm - Callback function to be executed when the dialog is confirmed.
+     * @param {Function} options.onCancel - Callback function to be executed when the dialog is canceled.
+     * @returns {boolean} - Indicates if the dialog was successfully shown.
+     */
+    showConfirmationDialog?: (options: {
+        title: string;
+        content: string;
+        onConfirm?: (data: unknown) => void;
+        onCancel?: () => void;
+    }) => boolean;
+    /**
+     * Shows a toast message with the specified content and type.
+     * This method communicates with the AppShell to display the toast message.
+     *
+     * @param {string} content - The content of the toast message.
+     * @param {ApplicationToastType} type - The type of the toast message.
+     */
+    showToast?: (content: string, type: ApplicationToastType) => boolean;
+    /**
+     * Shows an error message dialog with the specified title and content.
+     * This method communicates with the AppShell to display the error message.
+     *
+     * @param {string} title - The title of the error message dialog.
+     * @param {string} content - The content of the error message dialog.
+     */
+    showErrorMessage?: (title: string, content: string) => boolean;
+    /**
+     * Displays a rich-contentful modal with the specified path and context.
+     * This method communicates with the AppShell to display the rich-contentful modal.
+     *
+     * @param {string} path - The path of displayed iframe.
+     * @param {unknown} context - Optional context. Its type must follow the rules: https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm
+     * @param {Object} size - Optional size of the modal.
+     * @param {number | string} size.maxWidth - The maximum width of the modal. If falsish, the modal will be max 540px wide.
+     * @param {number | string} size.maxHeight - The maximum height of the modal. If falsish, the modal will be max 360px high.
+     * @param {string} closeIconColor - Optional color of the close icon.
+     */
+    showRichModal?: (path: string, context?: unknown, size?: ApplicationModalSize, closeIconColor?: string) => boolean;
+    /**
+     * The current locale of the application.
+     */
     locale: string;
+    /**
+     * Method to handle locale changes.
+     * @param {Function} callback - Callback function to be executed when the locale changes.
+     * @returns {Function} - Function to remove the callback.
+     */
     onLocaleChange: (callback: (newLocale: string) => void) => void;
 }
 /**
  * Props for the AppClientProvider component.
- *
- * @typedef {Object} AppClientProviderProps
- * @property {React.ReactNode} children - Children components to be rendered within the provider.
- * @property {ApplicationConfig} config - Configuration for the application, including settings like `isDev` and `forceRedirect`.
  */
 interface AppClientProviderProps {
+    /**
+     * Children components to be rendered within the provider.
+     */
     children: React.ReactNode;
+    /**
+     * Configuration for the application, including settings like `isDev` and `forceRedirect`.
+     */
     config: FullpageApplicationConfig | PluginApplicationConfig;
 }
 /**

package/dist/esm/app-client-provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app-client-provider.d.ts","sourceRoot":"","sources":["../../src/app-client-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,qBAAqB,EACrB,iBAAiB,EAGjB,yBAAyB,EACzB,uBAAuB,EACvB,aAAa,EACb,iBAAiB,EACjB,eAAe,EACf,sBAAsB,EACvB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,KAON,MAAM,OAAO,CAAC;AAEf;;;;;;;;;;;GAWG;AACH,UAAU,qBAAqB;IAC7B,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,CAAC,CAAC,GAAG,GAAG,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC;IACzE,QAAQ,EAAE,CAAC,OAAO,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACpD,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,sBAAsB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,OAAO,CAAC;IACrE,SAAS,CAAC,EAAE,CACV,OAAO,EAAE,MAAM,EACf,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,KAC1D,IAAI,CAAC;IACV,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IACtD,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,CAAC,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,KAAK,IAAI,CAAC;CACjE;AAED;;;;;;GAMG;AACH,UAAU,sBAAsB;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,EAAE,yBAAyB,GAAG,uBAAuB,CAAC;CAC7D;AAeD;;;;GAIG;AACH,QAAA,MAAM,YAAY,6BAAqC,CAAC;AA4FxD;;;;;GAKG;AACH,QAAA,MAAM,iBAAiB,yBAA0B,sBAAsB,sBAoItE,CAAC;AAEF,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,CAAC;AAC3C,YAAY,EACV,qBAAqB,EACrB,yBAAyB,EACzB,uBAAuB,EACvB,aAAa,EACb,iBAAiB,EACjB,eAAe,EAChB,CAAC"}
+{"version":3,"file":"app-client-provider.d.ts","sourceRoot":"","sources":["../../src/app-client-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,eAAe,EACf,oBAAoB,EACpB,qBAAqB,EACrB,iBAAiB,EACjB,oBAAoB,EACpB,yBAAyB,EACzB,uBAAuB,EACvB,aAAa,EACb,iBAAiB,EACjB,eAAe,EACf,sBAAsB,EACvB,MAAM,oBAAoB,CAAC;AAG5B,OAAO,KAON,MAAM,OAAO,CAAC;AAEf;;;;GAIG;AACH,UAAU,qBAAqB;IAC7B;;OAEG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,YAAY,EAAE,CACZ,SAAS,EAAE,MAAM,EACjB,GAAG,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,KACpB,OAAO,CAAC,OAAO,CAAC,CAAC;IACtB;;;OAGG;IACH,QAAQ,EAAE,CAAC,OAAO,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACpD;;;;;;;;;;OAUG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE;QAC1B,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,CAAC;QAChB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;QACvB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;KACvB,KAAK,OAAO,CAAC;IACd;;;;;;;;;;OAUG;IACH,sBAAsB,CAAC,EAAE,CAAC,OAAO,EAAE;QACjC,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,CAAC;QAChB,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;QACpC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;KACvB,KAAK,OAAO,CAAC;IACd;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,oBAAoB,KAAK,OAAO,CAAC;IACrE;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,OAAO,CAAC;IAC/D;;;;;;;;;;OAUG;IACH,aAAa,CAAC,EAAE,CACd,IAAI,EAAE,MAAM,EACZ,OAAO,CAAC,EAAE,OAAO,EACjB,IAAI,CAAC,EAAE,oBAAoB,EAC3B,cAAc,CAAC,EAAE,MAAM,KACpB,OAAO,CAAC;IACb;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,cAAc,EAAE,CAAC,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,KAAK,IAAI,CAAC;CACjE;AAED;;GAEG;AACH,UAAU,sBAAsB;IAC9B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,MAAM,EAAE,yBAAyB,GAAG,uBAAuB,CAAC;CAC7D;AAyBD;;;;GAIG;AACH,QAAA,MAAM,YAAY,QAAO,qBAAqD,CAAC;AAwL/E;;;;;GAKG;AACH,QAAA,MAAM,iBAAiB,yBAA0B,sBAAsB,sBAiJtE,CAAC;AAEF,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,CAAC;AAC3C,YAAY,EACV,qBAAqB,EACrB,yBAAyB,EACzB,uBAAuB,EACvB,aAAa,EACb,iBAAiB,EACjB,eAAe,EAChB,CAAC"}

package/dist/esm/app-client-provider.js

@@ -10,15 +10,25 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { DEFAULT_ACTION_KEYS, EVENTS } from '@akinon/app-shared';
 import Framebus from 'framebus';
 import React, { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react';
+/**
+ * Default context state for the AppClient.
+ */
 const defaultContextState = {
     isLoading: true,
     invokeAction: () => __awaiter(void 0, void 0, void 0, function* () {
         return Promise.reject('Action functionality not initialized.');
     }),
-    navigate: () => { },
+    navigate: () => {
+        return;
+    },
     locale: 'en',
-    onLocaleChange: () => { }
+    onLocaleChange: () => {
+        return;
+    }
 };
+/**
+ * Context for the AppClient, providing access to application state and methods.
+ */
 const AppClientContext = createContext(defaultContextState);
 /**
  * Custom hook to access the AppClient context.
@@ -27,68 +37,97 @@ const AppClientContext = createContext(defaultContextState);
  */
 const useAppClient = () => useContext(AppClientContext);
 /**
- * This method communicates with the AppShell to perform
- * the navigation on the shell.
- *
- * @param {string} path - The path to navigate to.
+ * Navigates to the specified path within the application.
+ * This method communicates with the AppShell to perform the navigation.
  */
-const navigate = (payload) => {
+const navigate = ({ id, path, external }) => {
     const bus = new Framebus();
-    bus.emit(EVENTS.NAVIGATE, Object.assign({}, payload));
+    bus.emit(EVENTS.NAVIGATE, { id, path, external });
 };
 /**
- * Shows a modal dialog with the specified title and content. This method communicates
- * with the AppShell to display the modal dialog.
+ * Shows a modal dialog with the specified title and content.
+ * This method communicates with the AppShell to display the modal dialog.
  *
- * @param {string} title - The title of the modal dialog.
- * @param {string} content - The content of the modal dialog.
+ * @returns {boolean} - Indicates if the dialog was successfully shown.
  */
-const showModalDialog = (title, content) => {
+const showModalDialog = ({ title, content, onConfirm, onCancel }) => {
     const bus = new Framebus();
-    bus.emit(EVENTS.INVOKE_DEFAULT_ACTION, {
+    function handleActionConfirmed() {
+        bus.off(EVENTS.ACTION_CONFIRMED, handleActionConfirmed);
+        bus.off(EVENTS.ACTION_CANCELED, handleActionCanceled);
+        onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm();
+    }
+    function handleActionCanceled() {
+        bus.off(EVENTS.ACTION_CANCELED, handleActionCanceled);
+        bus.off(EVENTS.ACTION_CONFIRMED, handleActionConfirmed);
+        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+    }
+    if (onConfirm) {
+        bus.on(EVENTS.ACTION_CONFIRMED, handleActionConfirmed);
+    }
+    if (onCancel) {
+        bus.on(EVENTS.ACTION_CANCELED, handleActionCanceled);
+    }
+    return bus.emit(EVENTS.INVOKE_DEFAULT_ACTION, {
         actionKey: DEFAULT_ACTION_KEYS.showModalDialog,
         args: [title, content]
     });
 };
 /**
- * Shows a confirmation dialog with the specified title and content. This method communicates
- * with the AppShell to display the confirmation dialog and waits for user input.
+ * Shows a confirmation dialog with the specified title and content and can handle the user's input.
+ * This method communicates with the AppShell to display the confirmation dialog.
  *
- * @param {string} title - The title of the confirmation dialog.
- * @param {string} content - The content of the confirmation dialog.
- * @returns The result of the confirmation dialog action.
+ * @returns {boolean} - Indicates if the dialog was successfully shown.
  */
-const showConfirmationDialog = (title, content) => {
+const showConfirmationDialog = ({ title, content, onConfirm, onCancel }) => {
     const bus = new Framebus();
+    function handleActionConfirmed(data) {
+        bus.off(EVENTS.ACTION_CONFIRMED, handleActionConfirmed);
+        bus.off(EVENTS.ACTION_CANCELED, handleActionCanceled);
+        onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(data);
+    }
+    function handleActionCanceled() {
+        bus.off(EVENTS.ACTION_CANCELED, handleActionCanceled);
+        bus.off(EVENTS.ACTION_CONFIRMED, handleActionConfirmed);
+        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+    }
+    if (onConfirm) {
+        bus.on(EVENTS.ACTION_CONFIRMED, handleActionConfirmed);
+    }
+    if (onCancel) {
+        bus.on(EVENTS.ACTION_CANCELED, handleActionCanceled);
+    }
     return bus.emit(EVENTS.INVOKE_DEFAULT_ACTION, {
         actionKey: DEFAULT_ACTION_KEYS.showConfirmationDialog,
         args: [title, content]
     });
 };
 /**
- * Displays a toast message with the specified content and type. This method communicates
- * with the AppShell to display the toast message.
+ * Displays a toast message with the specified content and type.
+ * This method communicates with the AppShell to display the toast message.
  *
  * @param {string} content - The content of the toast message.
- * @param {'success' | 'warning' | 'error' | 'loading' | 'destroy'} type - The type of the toast message.
+ * @param {ApplicationToastType} type - The type of the toast message.
+ * @returns {boolean} - Indicates if the event was emitted successfully.
  */
 const showToast = (content, type) => {
     const bus = new Framebus();
-    bus.emit(EVENTS.INVOKE_DEFAULT_ACTION, {
+    return bus.emit(EVENTS.INVOKE_DEFAULT_ACTION, {
         actionKey: DEFAULT_ACTION_KEYS.showToast,
         args: [content, type]
     });
 };
 /**
  * Displays an error message dialog with the specified title and content.
- * This method communicateswith the AppShell to display the error message.
+ * This method communicates with the AppShell to display the error message.
  *
  * @param {string} title - The title of the error message dialog.
  * @param {string} content - The content of the error message dialog.
+ * @returns {boolean} - Indicates if the event was emitted successfully.
  */
 const showErrorMessage = (title, content) => {
     const bus = new Framebus();
-    bus.emit(EVENTS.INVOKE_DEFAULT_ACTION, {
+    return bus.emit(EVENTS.INVOKE_DEFAULT_ACTION, {
         actionKey: DEFAULT_ACTION_KEYS.showErrorMessage,
         args: [title, content]
     });
@@ -99,12 +138,16 @@ const showErrorMessage = (title, content) => {
  *
  * @param {string} path - The path of displayed iframe.
  * @param {unknown} context - Optional context. Its type must follow the rules: https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm
+ * @param {Object} size - Optional size of the modal.
+ * @param {number | string} size.maxWidth - The maximum width of the modal. If falsish, the modal will be max 540px wide.
+ * @param {number | string} size.maxHeight - The maximum height of the modal. If falsish, the modal will be max 360px high.
+ * @param {string} closeIconColor - Optional color of the close icon.
  */
-const showRichModal = (path, context) => {
+const showRichModal = (path, context, size, closeIconColor) => {
     const bus = new Framebus();
-    bus.emit(EVENTS.INVOKE_DEFAULT_ACTION, {
+    return bus.emit(EVENTS.INVOKE_DEFAULT_ACTION, {
         actionKey: DEFAULT_ACTION_KEYS.showRichModal,
-        args: [path, context]
+        args: [path, context, size, closeIconColor]
     });
 };
 /**
@@ -125,11 +168,17 @@ const AppClientProvider = ({ children, config }) => {
         return new Promise((resolve, reject) => {
             const bus = new Framebus();
             bus.emit(EVENTS.INVOKE_ACTION, { actionKey, args }, (response) => {
-                if (response.success) {
-                    resolve(response.result);
+                if (typeof response === 'object' && response !== null) {
+                    const typedResponse = response;
+                    if (typedResponse.success) {
+                        resolve(typedResponse.result);
+                    }
+                    else {
+                        reject(new Error(typedResponse.error || 'Unknown error'));
+                    }
                 }
                 else {
-                    reject(new Error(response.error));
+                    reject(new Error('Invalid response format'));
                 }
             });
         });
@@ -152,7 +201,7 @@ const AppClientProvider = ({ children, config }) => {
         // Pass apps config data.
         bus.emit(EVENTS.SET_CONFIG, { config });
         bus.on(EVENTS.SET_DATA, (receivedData) => {
-            setData(receivedData);
+            setData(prevState => (Object.assign(Object.assign({}, prevState), receivedData)));
             setIsLoading(false);
         });
         bus.on(EVENTS.SET_PARAMS, message => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@akinon/app-client",
   "description": "Akinon AppClient library. This library is used to create a new plugin or an application which will reside in Akinon's applications.",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "private": false,
   "type": "module",
   "main": "dist/esm/index.js",
@@ -10,16 +10,14 @@
     "dist"
   ],
   "dependencies": {
-    "framebus": "^6.0.0",
-    "@akinon/app-shared": "0.11.0"
+    "framebus": "^6.0.1",
+    "@akinon/app-shared": "0.12.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0",
     "copyfiles": "^2.4.1",
     "rimraf": "^5.0.5",
     "typescript": "^5.2.2",
-    "@akinon/vite-config": "0.4.0",
-    "@akinon/eslint-config": "0.1.0",
     "@akinon/typescript-config": "0.2.0"
   },
   "peerDependencies": {
@@ -42,11 +40,6 @@
     "build:commonjs": "tsc --module commonjs --outDir dist/cjs",
     "copy:files": "copyfiles -u 1 src/**/*.css dist/esm && copyfiles -u 1 src/**/*.css dist/cjs",
     "clean": "rimraf dist/",
-    "lint": "eslint *.ts*",
-    "test": "vitest run",
-    "test:coverage": "vitest run --coverage",
-    "test:ui": "vitest --ui",
-    "test:watch": "vitest watch",
     "typecheck": "tsc --noEmit"
   }
 }