@interopio/home-ui-react 1.0.0

package/README.md

@@ -0,0 +1,312 @@
+## Overview
+
+The [`@interopio/home-ui-react`](https://www.npmjs.com/package/@interopio/home-ui-react) library provides React components and hooks that enable you to create and customize a Home App for your [**io.Connect Browser**](https://interop.io/products/io-connect/) projects.
+
+The Home App is meant to enhance the user and developer experience when creating an **io.Connect Browser** project. It provides flows for authentication and authorization using Auth0 integration, and for initial setup in order to acquire all necessary browser permissions from the user. The Home App also includes a Launchpad app which is the central hub for io.Connect apps, Workspaces, Global Layouts, notifications, search and user profile settings. For **io.Connect Browser** projects, the Home App can be built as a Main app, or as a Main app that's also a Workspaces App.
+
+## Using the Home App
+
+The following examples show a Home App that's also a Workspaces App and demonstrate its basic end-user functionalities - from initial user setup to a more advanced usage of its UI elements.
+
+The Home App is the entry point of an **io.Connect Browser** project. When you first load the Home App in the browser, you will be presented with a login form. After a successful login, the app will initiate a first-time user setup flow which includes granting all required browser permissions to ensure that the **io.Connect Browser** project will function properly:
+
+![Initial Setup](./images/initial-setup.gif)
+
+If you don't grant all required permissions, the **io.Connect Browser** platform won't be able to operate and a page for unsuccessful user setup will appear. You will then have to grant the necessary browser permissions manually:
+
+![Manual Permissions](./images/manual-permissions.gif)
+
+If the setup flow completes successfully, you will be able to start exploring and using the Home App. The main operational hub of the Home App is the Launchpad, accessible from the logo button of the Home App. The Launchpad is the place from which you can manage Workspaces and Global Layouts, start apps, select favorites for easy access, use the search bar to find anything within the platform, see notifications and user profile settings:
+
+![Using Home](./images/using-home.gif)
+
+## Install
+
+To use the [`@interopio/home-ui-react`](https://www.npmjs.com/package/@interopio/home-ui-react) library in your project, execute the following command:
+
+```cmd
+npm install @interopio/home-ui-react
+```
+
+## Usage
+
+The [`@interopio/home-ui-react`](https://www.npmjs.com/package/@interopio/home-ui-react) library offers React hooks and components that your can use to customize the look and functionalities of the Home App.
+
+The [`@interopio/home-ui-react`](https://www.npmjs.com/package/@interopio/home-ui-react) library is meant to be used within a Main app of an **io.Connect Browser** project or a Main app that's also a Workspaces App.
+
+### Hooks
+
+The `useGlue42Home()` hook provides information about the current state of the required browser permissions:
+
+```javascript
+const { permissions } = useGlue42Home();
+```
+
+The returned object has the following properties:
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `isDenied` | `boolean` | If `true`, the current browser permission has been denied by the user. |
+| `isLoading` | `boolean` | If `true`, the current browser permission is being set. |
+| `isSetupCompleted` | `boolean` | If `true`, the first-time user setup flow has been completed. |
+| `statuses` | `object[]` | Array of objects each describing the state of the required browser permissions. |
+
+Each permission status object has the following properties:
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `name` | `"notifications"` \| `"window-management"` | The name of the browser permission. |
+| `state` | `"denied"` \| `"granted"` \| `"prompt"` | The state of the browser permission. |
+
+### Components
+
+The following lists the more important default components exported by the library:
+
+| Component | Description |
+|-----------|-------------|
+| `<Glue42HomeProvider />` | 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. |
+| `<LoginAuth0 />` | Component for handling the integrated Auth0 authentication and authorization process. |
+
+The following lists the main components comprising the `<Launchpad />` component and exported by the library:
+
+| Component | Description |
+|-----------|-------------|
+| `<ApplicationsSection />` | Component containing a section in the Launchpad with the available io.Connect apps. |
+| `<FavoritesSection />` | Component containing a section in the Launchpad with favorite items. |
+| `<LayoutSettingsContainer />` | Component containing a section in the Launchpad with Global Layout settings. |
+| `<NotificationsPanel />` | Component containing the notifications panel shown when the user clicks on the notifications icon in the Launchpad. |
+| `<ProfileSettings />` | Component containing a profile and settings section shown when the user clicks on the profile icon in the Launchpad. |
+| `<SearchBar />` | Component containing the search bar providing the Global Search functionality. |
+| `<SearchResultsSection />` | Component containing the search results and shown when the user starts typing in the search bar. |
+| `<WorkspacesSection />` | Component containing a section in the Launchpad with Workspace Layouts. |
+
+#### Launchpad Slide Panel Component
+
+The following demonstrates the default structure of the `<LaunchpadSlidePanel />` component:
+
+```javascript
+<LaunchpadSlidePanel>
+    <SlidePanel>
+        <Launchpad />
+    </SlidePanel>
+</LaunchpadSlidePanel>
+```
+
+#### Launchpad Component
+
+The following demonstrates the default structure of the `<Launchpad />` component:
+
+```javascript
+<Launchpad>
+    <LaunchpadAPIProvider>
+        <div>
+            <header>
+                <SearchBar />
+                <div>
+                    <Icon />
+                    <span>
+                        {/* User initials. */}
+                    </span>
+                </div>
+                <Icon />
+            </header>
+            <main>
+                {searchTerm.trim().length < 3 ?
+                   <SectionProvider>
+                        <ul>
+                            <>
+                                <FavoritesSection />
+                                <WorkspacesSection />
+                                <ApplicationsSection />
+                            </>
+                        </ul>
+                    </SectionProvider> :
+                    <SearchResultsSection searchTerm={searchTerm} />
+                }
+            </main>
+            <LayoutSettingsContainer />
+        </div>
+        <Dialog>
+            <NotificationsPanel />
+        </Dialog>
+        <Dialog>
+            <ProfileSettings />
+        </Dialog>
+    </LaunchpadAPIProvider>
+</Launchpad>
+```
+
+The `<Launchpad />` component has the following properties:
+
+```javascript
+<Launchpad
+    components={{
+        sections: <></>
+    }}
+
+    onLogout={() => {}}
+
+    open={false}
+
+    setOpen={() => {}}
+
+    user={{
+        name: "N A"
+    }}
+/>
+```
+
+### Authentication & Authorization
+
+The Home App provides a process for authentication and authorization using Auth0 integration. If your organization uses other authentication and authorization mechanisms, you can substitute the default implementation with your custom one when building your Home App.
+
+### Examples
+
+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:
+
+```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 App from "./app/App";
+
+const root = ReactDOM.createRoot(
+    document.getElementById("root") as HTMLElement
+);
+
+root.render(
+   <StrictMode>
+        <Auth0Provider
+            domain={"platform-auth-domain"}
+            clientId={"client-id"}
+            authorizationParams={{
+                redirect_uri: window.location.origin,
+            }}
+        >
+            <Glue42HomeProvider>
+                <App />
+            </Glue42HomeProvider>
+        </Auth0Provider>
+   </StrictMode>
+);
+```
+
+Creating a Workspaces App that will act as a Main App for the **io.Connect Browser** project:
+
+```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 LoginPage from "../login/LoginPage";
+import LaunchpadButton from "../LaunchpadButton";
+import "@glue42/workspaces-ui-react/dist/styles/workspaces.css";
+
+const App = () => {
+    const { isAuthenticated } = useAuth0();
+    const { permission } = useGlue42Home();
+
+    // Settings for initializing the io.Connect Browser platform.
+    const platformSettings = {
+        webPlatform: {
+            factory: Glue42CorePlus,
+            config: {
+                workspaces: {
+                    src: "/",
+                    isFrame: true
+                },
+                layouts: {
+                    mode: "idb"
+                },
+                glue: {
+                    libraries: [GlueWorkspaces]
+                },
+                licenseKey: "my-license-key"
+            }
+        }
+    };
+
+    // Initiate the authentication flow.
+    if (!isAuthenticated) {
+        return <LoginPage />;
+    };
+
+    // Initiate the flow for acquiring browser permissions.
+    if (!permission.isSetupCompleted) {
+        return <PermissionsSetup />;
+    };
+
+    return (
+        <GlueProvider settings={platformSettings}>
+            <Workspaces
+                components={{
+                    // Replace the default Workspaces App logo
+                    // with a button that will open the Launchpad.
+                    header: { LogoComponent: LaunchpadButton }
+                }}
+            />
+        </GlueProvider>
+    );
+};
+
+export default App;
+```
+
+Implementing a login page:
+
+```javascript
+import { useAuth0 } from "@auth0/auth0-react";
+import { LoginLoader, LoginAuth0 } from "@glue42/home-ui-react";
+import { LoginLoaderHeading } from "./LoginLoaderHeading";
+
+const LoginPage = () => {
+  const { loginWithPopup, isLoading } = useAuth0();
+
+    return (
+        <div>
+            {isLoading ?
+                <LoginLoader components={{ Heading: LoginLoaderHeading }} /> :
+                <LoginAuth0 onLogin={loginWithPopup} />
+            }
+        </div>
+    );
+};
+
+export default LoginPage;
+```
+
+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";
+
+const LaunchpadButton = () => {
+    const { logout, user } = useAuth0();
+    const glue = useContext(GlueContext);
+
+    // Logout handler.
+    const handleLogout = async () => {
+        // Shutting down the io.Connect Browser platform.
+        await glue.webPlatform?.system.shutdown();
+
+        logout();
+    };
+
+    // Slide panel that contains the `<Launchpad />` component with its default structure.
+    return <LaunchPadSlidePanel user={user} onLogout={handleLogout} icon={<GlueLogo />} />
+};
+
+export default LaunchpadButton;
+```

package/assets/glue-logo.json

@@ -0,0 +1,5 @@
+{
+  "loginPageLogo": {
+    "value": "data:image/svg+xml,%3Csvg width='5041' height='1232' viewBox='0 0 5041 1232' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_879_362)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M548.6 178H439.6C368.7 178 310 199.5 269.3 244.5C228.6 289.3 206.7 356 206.7 444.3C206.7 532.6 228.6 599.5 269.3 644.2C310.2 689.2 368.7 710.7 439.6 710.7H548.6C619 710.7 677.6 689.2 718.6 644.2C759.5 599.4 781.6 532.6 781.6 444.2C781.6 355.8 759.5 289 718.6 244.2C677.7 199.3 619 177.7 548.6 177.7V178ZM449.5 293.8H538.9C582.2 293.8 611.9 305.2 631.1 328.3C650.5 351.8 660.5 389.2 660.5 444.4C660.5 499.6 650.5 536.7 631.1 560C612 583 582.2 594.1 538.9 594.1H449.5C405.6 594.1 375.9 583 356.9 560C337.6 536.8 327.7 499.7 327.7 444.5C327.7 389.3 337.4 351.9 356.8 328.4C375.9 305.2 405.6 293.8 449.5 293.8Z' fill='white'/%3E%3Cpath d='M0.700195 189.8C0.700195 183.1 6.10017 177.7 12.8002 177.7H108.6C115.3 177.7 120.7 183.1 120.7 189.8V698.6C120.7 705.3 115.3 710.7 108.6 710.7H12.8002C6.10017 710.7 0.700195 705.3 0.700195 698.6V189.8Z' fill='white'/%3E%3Cpath d='M0.700195 11.9002C0.700195 5.7002 5.70018 0.700195 11.9002 0.700195H109.6C115.7 0.700195 120.7 5.7002 120.7 11.9002V109.5C120.7 115.7 115.7 120.7 109.5 120.7H11.9002C5.70018 120.7 0.700195 115.7 0.700195 109.5V11.9002Z' fill='%23007BE5'/%3E%3Cpath d='M827.7 601.9C827.7 595.7 832.7 590.7 838.9 590.7H936.6C942.8 590.7 947.8 595.7 947.8 601.9V699.5C947.8 705.7 942.8 710.7 936.6 710.7H838.9C832.7 710.7 827.7 705.7 827.7 699.5V601.9Z' fill='%23007BE5'/%3E%3Cpath d='M4363.9 293.2C4320.2 293.2 4290.6 304.6 4271.6 327.8C4252.3 351.4 4242.5 388.8 4242.5 444C4242.5 499.2 4252.3 536.4 4271.5 559.7C4290.5 582.6 4320 593.8 4363.8 593.8H4614.7C4622.4 593.8 4628.7 600.1 4628.7 607.8V696.7C4628.7 704.4 4622.4 710.7 4614.7 710.7H4354.1C4283.3 710.7 4224.9 689.1 4184.1 644.1C4143.5 599.3 4121.6 532.4 4121.6 444C4121.6 355.6 4143.5 288.7 4184.1 243.9C4224.8 199 4283.3 177.3 4354.1 177.3H4614.7C4622.4 177.3 4628.7 183.6 4628.7 191.3V279.3C4628.7 287 4622.4 293.3 4614.7 293.3H4363.9V293.2Z' fill='white'/%3E%3Cpath d='M1302.6 165.3C1240.1 165.3 1197 180.9 1169.3 213.3C1141.3 246 1127.4 297.6 1127.4 372.9C1127.4 447.7 1141.1 499 1169 531.6C1196.6 563.9 1239.7 579.5 1302.7 579.5H1552.5C1560.2 579.5 1566.5 585.8 1566.5 593.5V697.1C1566.5 704.8 1560.2 711.1 1552.5 711.1H1302.7C1204.7 711.1 1127.5 683.4 1075 626.4C1022.4 569.7 995.7 484.8 995.7 372.9C995.7 260.5 1022.7 175.4 1075.2 118.4C1127.9 61.3001 1205 33.6001 1302.6 33.6001H1552.4C1560.1 33.6001 1566.4 39.9001 1566.4 47.6001V151.2C1566.4 158.9 1560.1 165.2 1552.4 165.2H1302.6V165.3Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1953.6 177.7H1844.8C1774 177.7 1715.6 199.3 1674.8 244.3C1634.2 289.1 1612.3 356 1612.3 444.4C1612.3 532.8 1634.2 599.7 1674.8 644.5C1715.5 689.4 1774 711.1 1844.8 711.1H1953.6C2023.9 711.1 2082.4 689.5 2123.2 644.5C2163.9 599.7 2186 532.8 2186 444.3C2186 355.8 2163.9 289 2123.2 244.1C2082.3 199.3 2023.9 177.7 1953.6 177.7ZM1854.6 293.7H1943.8C1987 293.7 2016.6 305.1 2035.8 328.3C2055.2 351.9 2065.2 389.3 2065.2 444.5C2065.2 499.7 2055.2 536.8 2035.8 560.2C2016.7 583.2 1987.1 594.3 1943.8 594.3H1854.6C1810.8 594.3 1781.3 583.1 1762.3 560.2C1743 536.9 1733.3 499.8 1733.3 444.5C1733.3 389.3 1743.1 351.9 1762.4 328.3C1781.3 305 1810.9 293.7 1854.6 293.7Z' fill='white'/%3E%3Cpath d='M2679.7 411.6C2679.7 372.5 2668.5 343.5 2645.4 324C2622.1 304.3 2585.3 293.2 2531.9 293.2H2378.4C2375.5 293.2 2374.9 293.9 2374.8 294C2374.5 294.4 2373.6 295.8 2373.6 299.8V696.7C2373.6 704.4 2367.3 710.7 2359.6 710.7H2267.7C2260 710.7 2253.7 704.4 2253.7 696.7V265.6C2253.7 234.7 2258.8 212 2272.6 197.2C2286.5 182.2 2307.5 177.3 2334.2 177.3H2531.8C2620.7 177.3 2688 198.4 2733.3 238.9C2778.7 279.5 2800.5 338.6 2800.5 411.7V696.7C2800.5 704.4 2794.2 710.7 2786.5 710.7H2693.7C2686 710.7 2679.7 704.4 2679.7 696.7V411.6Z' fill='white'/%3E%3Cpath d='M3304.7 411.6C3304.7 372.5 3293.5 343.5 3270.4 324C3247.1 304.3 3210.3 293.2 3156.9 293.2H3003.4C3000.5 293.2 2999.9 293.9 2999.8 294C2999.5 294.4 2998.6 295.8 2998.6 299.8V696.7C2998.6 704.4 2992.3 710.7 2984.6 710.7H2892.7C2885 710.7 2878.7 704.4 2878.7 696.7V265.6C2878.7 234.7 2883.8 212 2897.6 197.2C2911.5 182.2 2932.5 177.3 2959.2 177.3H3156.8C3245.7 177.3 3313 198.4 3358.3 238.9C3403.7 279.5 3425.5 338.6 3425.5 411.7V696.7C3425.5 704.4 3419.2 710.7 3411.5 710.7H3318.7C3311 710.7 3304.7 704.4 3304.7 696.7V411.6Z' fill='white'/%3E%3Cpath d='M4906.1 292.2C4898.4 292.2 4892.1 298.5 4892.1 306.2V529.2C4892.1 557.5 4897.2 574.3 4906.4 584.1C4915.4 593.8 4930 598.6 4953.7 598.6H5019.2C5026.9 598.6 5033.2 604.9 5033.2 612.6V695.7C5033.2 703.4 5026.9 709.7 5019.2 709.7H4932.1C4877.9 709.7 4836.8 698.8 4809.7 668.6C4782.8 638.6 4771.3 591.5 4771.3 523.4V306.2C4771.3 298.5 4765 292.2 4757.3 292.2H4714.7C4707 292.2 4700.7 285.9 4700.7 278.2V190.2C4700.7 182.5 4707 176.2 4714.7 176.2H4757.3C4765 176.2 4771.3 169.9 4771.3 162.2V67.7002C4771.3 60.0002 4777.6 53.7002 4785.3 53.7002H4878.2C4885.9 53.7002 4892.2 60.0002 4892.2 67.7002V162.2C4892.2 169.9 4898.5 176.2 4906.2 176.2H5021.3C5029 176.2 5035.3 182.5 5035.3 190.2V278.2C5035.3 285.9 5029 292.2 5021.3 292.2H4906.1Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4024.4 607.2C4024.4 599.5 4018.1 593.2 4010.4 593.2H3699.9C3672.9 593.2 3655.3 586 3644.6 575.2C3633.8 564.4 3628.6 548.8 3628.6 529.7V514.5C3628.6 506.8 3634.9 500.5 3642.6 500.5H3866.6C3931.2 500.5 3977.4 486.9 4007.5 459.6C4037.7 432.2 4050.1 392.3 4050.1 343.5C4050.1 292.2 4036.8 250.1 4006.4 220.9C3976.1 191.7 3930.1 176.8 3867.7 176.8H3700.1C3633.9 176.8 3586.5 195.4 3555.6 227.8C3524.8 260.1 3511.8 305 3511.8 355.3V531.7C3511.8 582 3524.9 626.9 3555.6 659.2C3586.5 691.6 3633.9 710.2 3700.1 710.2H4010.6C4018.3 710.2 4024.6 703.9 4024.6 696.2V607.2H4024.4ZM3863.5 403.1H3642.5C3634.8 403.1 3628.5 396.8 3628.5 389.1V356.2C3628.5 337.6 3633.7 321.9 3644.6 311C3655.4 300.1 3672.9 292.7 3699.9 292.7H3866.5C3890.7 292.7 3906.9 298.8 3916.9 308.2C3926.9 317.5 3932 331.3 3932 349.4C3932 367.1 3927.3 380 3917.4 388.6C3907.4 397.4 3890.5 403.1 3863.5 403.1Z' fill='white'/%3E%3Cpath d='M2918.9 872.3C3001.9 872.3 3036.9 909.9 3036.9 966.3C3036.9 1012.2 3013.9 1036.8 2973.2 1047.2C3014.4 1058.2 3037.9 1083.7 3037.9 1129.7C3037.9 1186.1 3003.5 1224.7 2920.5 1224.7H2755.6C2741.5 1224.7 2734.2 1217.9 2734.2 1203.8V893.2C2734.2 879.1 2741.5 872.3 2755.6 872.3H2918.9ZM2765.4 1033.1H2918.9C2976.8 1033.1 3005 1014.8 3005 970.5C3005 929.8 2979.4 903.7 2919.4 903.7H2771.2C2767.5 903.7 2765.5 905.3 2765.5 909.4V1033.1H2765.4ZM2765.4 1187.6C2765.4 1191.8 2767.5 1193.3 2771.1 1193.3H2921C2979.5 1193.3 3006.1 1168.2 3006.1 1125.4C3006.1 1081 2976.9 1060.2 2921 1060.2H2765.5V1187.6H2765.4Z' fill='white'/%3E%3Cpath d='M3294 956.9V985.6H3182.8C3148.9 985.6 3135.3 1000.7 3135.3 1033.6V1224.6H3106.1V1029.9C3106.1 979.8 3125.4 956.8 3176.6 956.8H3294V956.9Z' fill='white'/%3E%3Cpath d='M3489.1 956.9C3562.2 956.9 3608.6 1001.3 3608.6 1091C3608.6 1181.3 3562.1 1224.6 3489.1 1224.6H3431.2C3357.6 1224.6 3311.7 1181.3 3311.7 1091C3311.7 1001.2 3357.6 956.9 3431.2 956.9H3489.1ZM3433.3 985.6C3374.3 985.6 3340.9 1019 3340.9 1091C3340.9 1163.5 3374.3 1196.4 3433.3 1196.4H3487.1C3546.1 1196.4 3579.5 1163.5 3579.5 1091C3579.5 1019 3546.1 985.6 3487.1 985.6H3433.3Z' fill='white'/%3E%3Cpath d='M3674.4 956.9L3706.8 1176.6C3709.4 1195.4 3716.2 1204.3 3737.1 1204.3C3758.5 1204.3 3767.4 1195.4 3771.5 1180.3L3821.6 995.5C3829.4 966.8 3849.3 951.7 3884.2 951.7C3919.1 951.7 3937.4 966.8 3945.3 995.5L3994.9 1180.3C3999.1 1195.4 4007.9 1204.3 4029.3 1204.3C4050.2 1204.3 4056.4 1195.4 4059.6 1176.6L4093.5 956.9H4125.3L4089.3 1179.8C4084.6 1210.6 4069.5 1231 4028.2 1231C3992.7 1231 3975 1216.4 3966.6 1185.1L3917 1000.9C3912.8 985.2 3900.8 978.5 3883.6 978.5C3865.9 978.5 3854.9 985.3 3850.7 1000.9L3799.6 1185.1C3790.7 1216.4 3773.5 1231 3737.5 1231C3695.2 1231 3682.2 1210.1 3677.5 1179.8L3643.1 956.9H3674.4Z' fill='white'/%3E%3Cpath d='M4417.6 956.9V985.6H4260C4219.8 985.6 4203.6 1003.3 4203.6 1032.1C4203.6 1057.2 4216.1 1077.5 4263.6 1077.5H4338.8C4410.8 1077.5 4428.6 1110.9 4428.6 1149.5C4428.6 1194.9 4404.6 1224.7 4344 1224.7H4178V1196.5H4344C4384.2 1196.5 4399.8 1178.2 4399.8 1149.5C4399.8 1124.4 4387.8 1103.6 4339.8 1103.6H4264.6C4193.1 1103.6 4174.8 1069.2 4174.8 1030C4174.8 985.1 4198.8 956.9 4259.4 956.9H4417.6Z' fill='white'/%3E%3Cpath d='M4685.4 956.9C4749.1 956.9 4775.7 986.6 4775.7 1036.8C4775.7 1084.8 4751.2 1111.4 4684.9 1111.4H4526.2V1135.9C4526.2 1170.3 4545 1196.4 4593.5 1196.4H4762.1V1224.6H4593.5C4524.6 1224.6 4497.5 1187.5 4497.5 1136.4V1045.1C4497.5 995 4524.6 956.9 4593.5 956.9H4685.4ZM4526.2 1087.4H4684.3C4729.7 1087.4 4746.9 1069.7 4746.9 1037.8C4746.9 1005.4 4728.6 985.6 4685.3 985.6H4593.4C4544.9 985.6 4526.1 1011.2 4526.1 1045.6V1087.4H4526.2Z' fill='white'/%3E%3Cpath d='M5040.3 956.9V985.6H4929.1C4895.2 985.6 4881.6 1000.7 4881.6 1033.6V1224.6H4852.4V1029.9C4852.4 979.8 4871.7 956.8 4922.9 956.8H5040.3V956.9Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_879_362'%3E%3Crect width='5041' height='1231' fill='white' transform='translate(0 0.700195)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A"
+  }
+}

package/common/types.d.ts

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

package/constants/contextMenuActions.d.ts

@@ -0,0 +1,15 @@
+import { ContextMenuAction } from '../lib/context-menu/context-menu-types';
+export declare const APPLICATION_ACTIONS_NAMES: {
+    readonly OPEN_IN_NEW_WINDOW: "openInNewWindow";
+    readonly OPEN_IN_NEW_WORKSPACE: "openInNewWorkspace";
+};
+export declare const WORKSPACE_ACTIONS_NAMES: {
+    readonly OPEN_IN_NEW_FRAME: "openInNewFrame";
+    readonly DELETE: "delete";
+};
+export declare const LAYOUT_ACTIONS_NAMES: {
+    readonly SET_AS_DEFAULT: "setAsDefault";
+    readonly DELETE: "delete";
+};
+export declare const APPLICATION_ACTIONS: ContextMenuAction[];
+export declare const WORKSPACE_ACTIONS: ContextMenuAction[];

package/constants/defaults.d.ts

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

package/constants/itemTypes.d.ts

@@ -0,0 +1,5 @@
+export declare const ITEM_TYPES: {
+    readonly APPLICATION: "application";
+    readonly WORKSPACE: "workspace";
+    readonly LAYOUT: "layout";
+};

package/constants/modifierKeys.d.ts

@@ -0,0 +1,4 @@
+export declare const MODIFIER_KEYS: {
+    readonly CONTROL: "Control";
+    readonly SHIFT: "Shift";
+};

package/constants/storageKeys.d.ts

@@ -0,0 +1,3 @@
+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/base.d.ts

@@ -0,0 +1,2 @@
+import { Decoder } from 'decoder-validate';
+export declare const nonEmptyStringDecoder: Decoder<string>;

package/decoders/context-menu.d.ts

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

package/decoders/favorites.d.ts

@@ -0,0 +1,3 @@
+import { Decoder } from 'decoder-validate';
+import { FavoriteEntity } from '../common/types';
+export declare const favoriteEntitiesStorageValueDecoder: Decoder<FavoriteEntity[]>;

package/decoders/layouts.d.ts

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

package/executors/applicationActions.d.ts

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

package/executors/workspaceActions.d.ts

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

package/helpers/a11y.d.ts

@@ -0,0 +1,39 @@
+/// <reference types="react" />
+export type ActivationEvent<T extends HTMLElement = HTMLElement> = React.KeyboardEvent<T> | React.MouseEvent<T>;
+/**
+ * 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;
+/**
+ * Utility function to convert an `onClick` prop into a keyboard-accessible equivalent.
+ *
+ * To use, take an existing component like this:
+ * `<div onClick={doSomething}></div>`
+ *
+ * and convert it to this:
+ * `<div {...onClickA11y(doSomething)}></div>`
+ *
+ * This will add an onClick prop, and onKeyDown prop, and a tabIndex={0} (so that a keyboard-only user can reach the element)
+ *
+ * Make sure you also add a `role` and `aria-label` attribute for maximum accessibility!
+ */
+export declare const onClickA11y: (clickHandler?: handler, keydownHandler?: handler) => {
+    tabIndex?: undefined;
+    onClick?: undefined;
+    onKeyDown?: undefined;
+} | {
+    tabIndex: number;
+    onClick: handler;
+    onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;
+};
+type KeyboardNavigationProps = {
+    event: React.KeyboardEvent<HTMLElement>;
+    currentIndex: number;
+    moveFocus: (newNumber: number) => void;
+    min: number;
+    max: number;
+    onClose?: () => void;
+};
+export declare const keyboardNavigation: ({ event, currentIndex, moveFocus, min, max, onClose }: KeyboardNavigationProps) => void;
+export {};

package/helpers/date.d.ts

@@ -0,0 +1 @@
+export declare const formatDate: (timestamp: number) => string;

package/helpers/string.d.ts

@@ -0,0 +1 @@
+export declare const getInitials: (name: string) => string;

package/hooks/index.d.ts

@@ -0,0 +1,15 @@
+export * from './useApplications';
+export * from './useApplicationsInstances';
+export * from './useFavoriteEntities';
+export * from './useFrame';
+export * from './useInvokeInteropMethod';
+export * from './usePressedKeys';
+export * from './useRestoreWorkspace';
+export * from './useSearch';
+export * from './useStartApplication';
+export * from './useStorage';
+export * from './useWorkspaces';
+export * from './useWorkspacesInstances';
+export * from './useExecuteApplicationAction';
+export * from './useExecuteWorkspaceAction';
+export * from './useUA';

package/hooks/useApplications.d.ts

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

package/hooks/useApplicationsInstances.d.ts

@@ -0,0 +1,3 @@
+export declare const useApplicationsInstances: () => {
+    [appName: string]: string[];
+};

package/hooks/useExecuteApplicationAction.d.ts

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

package/hooks/useExecuteWorkspaceAction.d.ts

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

package/hooks/useFavoriteEntities.d.ts

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

package/hooks/useFrame.d.ts

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

package/hooks/useInvokeInteropMethod.d.ts

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

package/hooks/usePressedKeys.d.ts

@@ -0,0 +1 @@
+export declare const usePressedKeys: () => string | null;

package/hooks/useRestoreWorkspace.d.ts

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

package/hooks/useSearch.d.ts

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

package/hooks/useStartApplication.d.ts

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

package/hooks/useStorage.d.ts

@@ -0,0 +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 {};

package/hooks/useUA.d.ts

@@ -0,0 +1,2 @@
+export declare const useUA: () => Omit<import("ua-parser-js").IResult, "ua">;
+export declare const useBrowser: () => import("ua-parser-js").IBrowser;

package/hooks/useWorkspaces.d.ts

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

package/hooks/useWorkspacesInstances.d.ts

@@ -0,0 +1,3 @@
+export declare const useWorkspacesInstances: () => {
+    [wsName: string]: string[];
+};