@interopio/home-ui-react 1.0.0 → 1.1.0

package/README.md

@@ -36,10 +36,10 @@ The [`@interopio/home-ui-react`](https://www.npmjs.com/package/@interopio/home-u
 
 ### Hooks
 
-The `useGlue42Home()` hook provides information about the current state of the required browser permissions:
+The `useIOConnectHome()` hook provides information about the current state of the required browser permissions:
 
 ```javascript
-const { permissions } = useGlue42Home();
+const { permissions } = useIOConnectHome();
 ```
 
 The returned object has the following properties:
@@ -64,7 +64,7 @@ The following lists the more important default components exported by the librar
 
 | Component | Description |
 |-----------|-------------|
-| `<Glue42HomeProvider />` | Context provider component containing information about the current state of the required browser permissions. |
+| `<IOConnectHomeProvider />` | Context provider component containing information about the current state of the required browser permissions. |
 | `<Launchpad />` | The main component containing the Launchpad. |
 | `<LaunchpadSlidePanel />` | Wrapper component around the `<Launchpad />` component allowing it to open as a sliding panel. |
 | `<PermissionsSetup />` | Component providing a setup flow for obtaining the required browser permissions from the user. |
@@ -106,10 +106,8 @@ The following demonstrates the default structure of the `<Launchpad />` componen
             <header>
                 <SearchBar />
                 <div>
-                    <Icon />
-                    <span>
-                        {/* User initials. */}
-                    </span>
+                    <NotificationsIcon />
+                    <ProfileIcon />
                 </div>
                 <Icon />
             </header>
@@ -167,13 +165,13 @@ The Home App provides a process for authentication and authorization using Auth0
 
 The following examples demonstrate a basic implementations of a Home App with authentication and browser permission flows, using the default library hooks and components.
 
-Wrapping the `<App />` component in the `<Glue42HomeProvider />` and the `<Auth0Provider />` context provider components in order to obtain the necessary data related to authentication and browser permissions:
+Wrapping the `<App />` component in the `<IOConnectHomeProvider />` and the `<Auth0Provider />` context provider components in order to obtain the necessary data related to authentication and browser permissions:
 
 ```javascript
 import { StrictMode } from "react";
 import * as ReactDOM from "react-dom/client";
 import { Auth0Provider } from "@auth0/auth0-react";
-import { Glue42HomeProvider } from "@glue42/home-ui-react";
+import { IOConnectHomeProvider } from "@interopio/home-ui-react";
 import App from "./app/App";
 
 const root = ReactDOM.createRoot(
@@ -189,9 +187,9 @@ root.render(
                 redirect_uri: window.location.origin,
             }}
         >
-            <Glue42HomeProvider>
+            <IOConnectHomeProvider>
                 <App />
-            </Glue42HomeProvider>
+            </IOConnectHomeProvider>
         </Auth0Provider>
    </StrictMode>
 );
@@ -201,23 +199,23 @@ Creating a Workspaces App that will act as a Main App for the **io.Connect Brows
 
 ```javascript
 import { useAuth0 } from "@auth0/auth0-react";
-import Glue42CorePlus from "@glue42/core-plus";
-import { GlueProvider } from "@glue42/react-hooks";
-import GlueWorkspaces from "@glue42/workspaces-api";
-import Workspaces from "@glue42/workspaces-ui-react";
-import { PermissionsSetup, useGlue42Home } from "@glue42/home-ui-react";
+import IOBrowserPlatform from "@interopio/browser-platform";
+import { IOConnectProvider } from "@interopio/react-hooks";
+import IOWorkspaces from "@interopio/workspaces-api";
+import Workspaces from "@interopio/workspaces-ui-react";
+import { PermissionsSetup, useIOConnectHome } from "@interopio/home-ui-react";
 import LoginPage from "../login/LoginPage";
 import LaunchpadButton from "../LaunchpadButton";
-import "@glue42/workspaces-ui-react/dist/styles/workspaces.css";
+import "@interopio/workspaces-ui-react/dist/styles/workspaces.css";
 
 const App = () => {
     const { isAuthenticated } = useAuth0();
-    const { permission } = useGlue42Home();
+    const { permission } = useIOConnectHome();
 
     // Settings for initializing the io.Connect Browser platform.
-    const platformSettings = {
-        webPlatform: {
-            factory: Glue42CorePlus,
+    const ioConnectSettings = {
+        browserPlatform: {
+            factory: IOBrowserPlatform,
             config: {
                 workspaces: {
                     src: "/",
@@ -226,8 +224,8 @@ const App = () => {
                 layouts: {
                     mode: "idb"
                 },
-                glue: {
-                    libraries: [GlueWorkspaces]
+                browser: {
+                    libraries: [IOWorkspaces]
                 },
                 licenseKey: "my-license-key"
             }
@@ -245,7 +243,7 @@ const App = () => {
     };
 
     return (
-        <GlueProvider settings={platformSettings}>
+        <IOConnectProvider settings={platformSettings}>
             <Workspaces
                 components={{
                     // Replace the default Workspaces App logo
@@ -253,7 +251,7 @@ const App = () => {
                     header: { LogoComponent: LaunchpadButton }
                 }}
             />
-        </GlueProvider>
+        </IOConnectProvider>
     );
 };
 
@@ -264,7 +262,7 @@ Implementing a login page:
 
 ```javascript
 import { useAuth0 } from "@auth0/auth0-react";
-import { LoginLoader, LoginAuth0 } from "@glue42/home-ui-react";
+import { LoginLoader, LoginAuth0 } from "@interopio/home-ui-react";
 import { LoginLoaderHeading } from "./LoginLoaderHeading";
 
 const LoginPage = () => {
@@ -288,24 +286,24 @@ Implementing the button that will open the Launchpad:
 ```javascript
 import { useContext } from "react";
 import { useAuth0 } from "@auth0/auth0-react";
-import { GlueContext } from "@glue42/react-hooks";
-import { GlueLogo } from "@glue42/workspaces-ui-react";
-import { LaunchPadSlidePanel } from "@glue42/home-ui-react";
+import { IOConnectContext } from "@interopio/react-hooks";
+import { Logo } from "@interopio/workspaces-ui-react";
+import { LaunchPadSlidePanel } from "@interopio/home-ui-react";
 
 const LaunchpadButton = () => {
     const { logout, user } = useAuth0();
-    const glue = useContext(GlueContext);
+    const io = useContext(IOConnectContext);
 
     // Logout handler.
     const handleLogout = async () => {
         // Shutting down the io.Connect Browser platform.
-        await glue.webPlatform?.system.shutdown();
+        await io.webPlatform?.system.shutdown();
 
         logout();
     };
 
     // Slide panel that contains the `<Launchpad />` component with its default structure.
-    return <LaunchPadSlidePanel user={user} onLogout={handleLogout} icon={<GlueLogo />} />
+    return <LaunchPadSlidePanel user={user} onLogout={handleLogout} icon={<Logo />} />
 };
 
 export default LaunchpadButton;

package/common/types.d.ts

@@ -1,2 +1,2 @@
-import { SectionItemType } from '../lib/section/section.types';
+import { SectionItemType } from '../lib/section/types';
 export type FavoriteEntity = Omit<SectionItemType, 'isOpen'>;

package/constants/defaults.d.ts

@@ -1,2 +1,2 @@
-export declare const DEFAULT_GLOBAL_LAYOUT = "Welcome";
+export declare const DEFAULT_SYSTEM_LAYOUT = "Welcome";
 export declare const DEFAULT_DISPLAY_COUNT = 5;

package/constants/storageKeys.d.ts

@@ -1,3 +1,2 @@
 export declare const SELECTED_LAYOUT_SESSION_STORAGE_KEY = "interop_home_ui_selected_layout";
-export declare const DEFAULT_LAYOUT_LOCAL_STORAGE_KEY = "interop_home_ui_default_layout";
 export declare const FAVORITE_ENTITIES_LOCAL_STORAGE_KEY = "interop_home_ui_favorite_entities";

package/decoders/context-menu.d.ts

@@ -1,3 +1,3 @@
 import { Decoder } from 'decoder-validate';
-import { ContextMenuAction } from '../lib/context-menu/context-menu-types';
+import { ContextMenuAction } from '../lib/context-menu/types';
 export declare const contextMenuActionDecoder: Decoder<ContextMenuAction>;

package/decoders/layouts.d.ts

@@ -1,3 +1,3 @@
 import { Decoder } from 'decoder-validate';
-import { LayoutStorageValue } from '../lib/layout-settings/layout-types';
-export declare const layoutStorageValueDecoder: Decoder<LayoutStorageValue | null>;
+import { LayoutSummary } from '../lib/layouts-panel/types';
+export declare const layoutStorageValueDecoder: Decoder<LayoutSummary | null>;

package/executors/applicationActions.d.ts

@@ -1,6 +1,4 @@
-import { Glue42Web } from '@glue42/web';
-import { Glue42Workspaces } from '@glue42/workspaces-api';
-import { SectionItemType } from '../lib/section/section.types';
+import { ApplicationActionExecutor } from './types';
 export declare const applicationActionExecutors: {
-    [key: string]: (glue: Glue42Web.API, item: SectionItemType, frame?: Glue42Workspaces.Frame) => Promise<void>;
+    [key: string]: ApplicationActionExecutor;
 };

package/executors/layoutActions.d.ts

@@ -0,0 +1,4 @@
+import { LayoutActionExecutor } from './types';
+export declare const layoutActionExecutors: {
+    [key: string]: LayoutActionExecutor;
+};

package/executors/notificationsSort.d.ts

@@ -0,0 +1,7 @@
+import { IOConnectBrowser } from '@interopio/browser';
+import { SortKey } from '../lib/notifications-panel/types';
+export declare const sortByTimestamp: (notifications: IOConnectBrowser.Notifications.NotificationData[], descending: boolean) => IOConnectBrowser.Notifications.NotificationData[];
+export declare const sortBySeverity: (notifications: IOConnectBrowser.Notifications.NotificationData[], descending: boolean) => IOConnectBrowser.Notifications.NotificationData[];
+export declare const sortExecutors: {
+    [Key in SortKey]: (notifications: IOConnectBrowser.Notifications.NotificationData[], descending: boolean) => IOConnectBrowser.Notifications.NotificationData[];
+};

package/executors/types.d.ts

@@ -0,0 +1,20 @@
+import { IOConnectBrowser } from '@interopio/browser';
+import { IOConnectDesktop } from '@interopio/desktop';
+import { IOConnectWorkspaces } from '@interopio/workspaces-api';
+import { Layout, LayoutSummary } from '../lib/layouts-panel/types';
+import { SectionItemType } from '../lib/section/types';
+export type LayoutActionExecutor = (config: {
+    io: IOConnectBrowser.API | IOConnectDesktop.API;
+    layout: Layout;
+    setDefaultLayout: (layout: LayoutSummary) => Promise<void>;
+}) => void;
+export type ApplicationActionExecutor = (config: {
+    io: IOConnectBrowser.API | IOConnectDesktop.API;
+    item: SectionItemType;
+    frame?: IOConnectWorkspaces.Frame;
+}) => void;
+export type WorkspaceActionExecutor = (config: {
+    io: IOConnectBrowser.API | IOConnectDesktop.API;
+    item: SectionItemType;
+    removeFavorite: (id: string) => void;
+}) => void;

package/executors/workspaceActions.d.ts

@@ -1,5 +1,4 @@
-import { Glue42Web } from '@glue42/web';
-import { SectionItemType } from '../lib/section/section.types';
+import { WorkspaceActionExecutor } from './types';
 export declare const workspaceActionExecutors: {
-    [key: string]: (glue: Glue42Web.API, item: SectionItemType) => Promise<void>;
+    [key: string]: WorkspaceActionExecutor;
 };

package/helpers/a11y.d.ts

@@ -3,8 +3,8 @@ export type ActivationEvent<T extends HTMLElement = HTMLElement> = React.Keyboar
 /**
  * If a keypress is the equivalent of a mouse click event. This would be pressing ENTER or SPACEBAR.
  */
-export declare const isClickKeypress: (e: React.KeyboardEvent<HTMLElement>) => boolean;
-type handler = (e: ActivationEvent) => void;
+export declare const isClickKeypress: (event: React.KeyboardEvent<HTMLElement>) => boolean;
+type handler = (event: ActivationEvent) => void;
 /**
  * Utility function to convert an `onClick` prop into a keyboard-accessible equivalent.
  *
@@ -25,7 +25,7 @@ export declare const onClickA11y: (clickHandler?: handler, keydownHandler?: hand
 } | {
     tabIndex: number;
     onClick: handler;
-    onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;
+    onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
 };
 type KeyboardNavigationProps = {
     event: React.KeyboardEvent<HTMLElement>;

package/hooks/index.d.ts

@@ -3,8 +3,12 @@ export * from './useApplicationsInstances';
 export * from './useFavoriteEntities';
 export * from './useFrame';
 export * from './useInvokeInteropMethod';
+export * from './useLayouts';
+export * from './useNotifications';
+export * from './useNotificationsSort';
 export * from './usePressedKeys';
 export * from './useRestoreWorkspace';
+export * from './useRestoreLayout';
 export * from './useSearch';
 export * from './useStartApplication';
 export * from './useStorage';
@@ -12,4 +16,5 @@ export * from './useWorkspaces';
 export * from './useWorkspacesInstances';
 export * from './useExecuteApplicationAction';
 export * from './useExecuteWorkspaceAction';
+export * from './useExecuteLayoutAction';
 export * from './useUA';

package/hooks/useApplications.d.ts

@@ -1,2 +1,2 @@
-import { Glue42Web } from '@glue42/web';
-export declare const useApplications: () => Glue42Web.AppManager.Application[];
+import { IOConnectBrowser } from '@interopio/browser';
+export declare const useApplications: () => IOConnectBrowser.AppManager.Application[];

package/hooks/useExecuteApplicationAction.d.ts

@@ -1,2 +1,2 @@
-import { SectionItemType } from '../lib/section/section.types';
-export declare const useExecuteApplicationAction: () => (item: SectionItemType, actionName: string) => Promise<void>;
+import { SectionItemType } from '../lib/section/types';
+export declare const useExecuteApplicationAction: () => (item: SectionItemType, actionName: string) => void;

package/hooks/useExecuteLayoutAction.d.ts

@@ -0,0 +1,2 @@
+import { Layout, LayoutSummary } from '../lib/layouts-panel/types';
+export declare const useExecuteLayoutAction: () => (layout: Layout, actionName: string, setDefaultLayout: (layout: LayoutSummary) => Promise<void>) => void;

package/hooks/useExecuteWorkspaceAction.d.ts

@@ -1,2 +1,2 @@
-import { SectionItemType } from '../lib/section/section.types';
-export declare const useExecuteWorkspaceAction: () => (item: SectionItemType, actionName: string) => Promise<void>;
+import { SectionItemType } from '../lib/section/types';
+export declare const useExecuteWorkspaceAction: () => (item: SectionItemType, actionName: string) => void;

package/hooks/useFavoriteEntities.d.ts

@@ -1,6 +1,7 @@
 import type { FavoriteEntity } from '../common/types';
-import type { SectionItemType } from '../lib/section/section.types';
+import type { SectionItemType } from '../lib/section/types';
 export declare const useFavoriteEntities: () => {
     favoriteEntities: FavoriteEntity[];
     toggleFavorite: ({ isOpen, ...item }: SectionItemType) => void;
+    removeFavorite: (id: string) => void;
 };

package/hooks/useFrame.d.ts

@@ -1,2 +1,2 @@
-import { Glue42Workspaces } from '@glue42/workspaces-api';
-export declare const useFrame: () => Glue42Workspaces.Frame | undefined;
+import { IOConnectWorkspaces } from '@interopio/workspaces-api';
+export declare const useFrame: () => IOConnectWorkspaces.Frame | undefined;

package/hooks/useInvokeInteropMethod.d.ts

@@ -1,2 +1,2 @@
-import { Glue42Search } from '@glue42/search-api';
-export declare const useInvokeInteropMethod: () => (action: Glue42Search.MainAction) => Promise<any>;
+import { IOConnectSearch } from '@interopio/search-api';
+export declare const useInvokeInteropMethod: () => (action: IOConnectSearch.MainAction) => Promise<any>;

package/hooks/useLayouts.d.ts

@@ -0,0 +1,2 @@
+import type { Layout } from '../lib/layouts-panel/types';
+export declare const useLayouts: () => Layout[];

package/hooks/useNotifications.d.ts

@@ -0,0 +1,2 @@
+import { IOConnectBrowser } from '@interopio/browser';
+export declare const useNotifications: () => IOConnectBrowser.Notifications.NotificationData[];

package/hooks/useNotificationsSort.d.ts

@@ -0,0 +1,5 @@
+import { SortKey } from '../lib/notifications-panel/types';
+export declare const useNotificationsSort: () => {
+    onNotificationsSort: (key: SortKey) => void;
+    sortedNotifications: import("@interopio/browser").IOConnectBrowser.Notifications.NotificationData[];
+};

package/hooks/useRestoreLayout.d.ts

@@ -0,0 +1,2 @@
+import { LayoutSummary } from '../lib/layouts-panel/types';
+export declare const useRestoreLayout: () => (name: string, onSuccessfulLayoutRestore?: ((layout: LayoutSummary) => void) | undefined) => Promise<void>;

package/hooks/useRestoreWorkspace.d.ts

@@ -1,2 +1,2 @@
-import { Glue42Workspaces } from '@glue42/workspaces-api';
-export declare const useRestoreWorkspace: () => (id: string, modifier: string | null) => Promise<Glue42Workspaces.Workspace | undefined>;
+import { IOConnectWorkspaces } from '@interopio/workspaces-api';
+export declare const useRestoreWorkspace: () => (id: string, modifier: string | null) => Promise<IOConnectWorkspaces.Workspace | undefined>;

package/hooks/useSearch.d.ts

@@ -1,5 +1,5 @@
-import { Glue42Search } from '@glue42/search-api';
+import { IOConnectSearch } from '@interopio/search-api';
 export declare const useSearch: (searchTerm: string) => {
-    resultsToRender: Glue42Search.QueryResult[];
+    resultsToRender: IOConnectSearch.QueryResult[];
     isLoading: boolean;
 };

package/hooks/useStartApplication.d.ts

@@ -1 +1 @@
-export declare const useStartApplication: () => (id: string, modifier: string | null) => Promise<import("@glue42/web").Glue42Web.AppManager.Instance | import("@glue42/workspaces-api").Glue42Workspaces.WorkspaceWindow>;
+export declare const useStartApplication: () => (id: string, modifier: string | null) => Promise<import("@interopio/browser").IOConnectBrowser.AppManager.Instance | import("@interopio/workspaces-api").IOConnectWorkspaces.WorkspaceWindow>;

package/hooks/useStorage.d.ts

@@ -1,4 +1,4 @@
 import { Decoder } from 'decoder-validate';
 type StorageType = 'localStorage' | 'sessionStorage';
-export declare const useStorage: <T>(type: StorageType, key: string, decoder: Decoder<T | null>) => readonly [T | null, (value: T | ((val: T | null) => T) | null) => void];
+export declare const useStorage: <T>(type: StorageType, key: string, decoder: Decoder<T | null>) => readonly [T | null, (value: T | null) => void];
 export {};

package/hooks/useWorkspaces.d.ts

@@ -1,2 +1,2 @@
-import type { Workspace } from '../lib/workspaces-section/workspaces-section.types';
+import type { Workspace } from '../lib/workspaces-section/types';
 export declare const useWorkspaces: () => Workspace[];