@equinor/fusion-framework-react 0.0.0-next-20230915111233

package/package.json

@@ -0,0 +1,85 @@
+{
+  "name": "@equinor/fusion-framework-react",
+  "version": "0.0.0-next-20230915111233",
+  "description": "",
+  "main": "dist/esm/index.js",
+  "exports": {
+    ".": "./dist/esm/index.js",
+    "./app": "./dist/esm/app/index.js",
+    "./context": "./dist/esm/context/index.js",
+    "./hooks": "./dist/esm/hooks/index.js",
+    "./http": "./dist/esm/http/index.js",
+    "./signalr": "./dist/esm/signalr/index.js"
+  },
+  "types": "dist/types/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "app": [
+        "dist/types/app/index.d.ts"
+      ],
+      "context": [
+        "dist/types/context/index.d.ts"
+      ],
+      "hooks": [
+        "dist/types/hooks/index.d.ts"
+      ],
+      "http": [
+        "dist/types/http/index.d.ts"
+      ],
+      "signalr": [
+        "dist/types/signalr/index.d.ts"
+      ]
+    }
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/equinor/fusion-framework.git",
+    "directory": "packages/react/framework"
+  },
+  "dependencies": {
+    "rxjs": "^7.8.1",
+    "@equinor/fusion-framework-module": "^4.2.4",
+    "@equinor/fusion-framework-react-module": "^3.0.5",
+    "@equinor/fusion-framework-react-module-http": "^0.0.0-next-20230915111233",
+    "@equinor/fusion-framework": "^0.0.0-next-20230915111233",
+    "@equinor/fusion-observable": "^8.1.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.20",
+    "@types/react-dom": "^18.2.7",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.1.3",
+    "@equinor/fusion-framework-module-app": "^0.0.0-next-20230915111233",
+    "@equinor/fusion-framework-react-module-context": "^0.0.0-next-20230915111233"
+  },
+  "peerDependencies": {
+    "@types/react": "^17.0.0 || ^18.0.0",
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0",
+    "@equinor/fusion-framework-react-module-signalr": "^0.0.0-next-20230915111233"
+  },
+  "peerDependenciesMeta": {
+    "@equinor/fusion-framework-react-module-context": {
+      "optional": true
+    },
+    "@equinor/fusion-framework-react-module-signalr": {
+      "optional": true
+    },
+    "@types/react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "build": "tsc -b"
+  }
+}

package/src/Framework.tsx

@@ -0,0 +1,22 @@
+import { FusionConfigurator } from '@equinor/fusion-framework';
+import { createFrameworkProvider } from './create-framework-provider';
+import { PropsWithChildren, ReactNode, Suspense, useMemo } from 'react';
+
+type ConfigureCallback = (configurator: FusionConfigurator) => void;
+
+export const Framework = (
+    props: PropsWithChildren<{
+        readonly configure: ConfigureCallback;
+        readonly fallback: NonNullable<ReactNode> | null;
+    }>,
+) => {
+    const { configure, fallback, children } = props;
+    const Component = useMemo(() => createFrameworkProvider(configure), [configure]);
+    return (
+        <Suspense fallback={fallback}>
+            <Component>{children}</Component>
+        </Suspense>
+    );
+};
+
+export default Framework;

package/src/app/index.ts

@@ -0,0 +1,6 @@
+export type { AppConfig, AppManifest, AppType, IApp } from '@equinor/fusion-framework-module-app';
+
+export { useCurrentApp } from './useCurrentApp';
+export { useCurrentAppModules } from './useCurrentAppModules';
+export { useApps } from './useApps';
+export { useAppProvider } from './useAppProvider';

package/src/app/useAppProvider.ts

@@ -0,0 +1,19 @@
+import { FusionModulesInstance } from '@equinor/fusion-framework';
+import { AppModule } from '@equinor/fusion-framework-module-app';
+
+import { useFramework } from '../useFramework';
+
+/**
+ * React Hook - get appProvider interface
+ * @returns framework AppModule
+ */
+export const useAppProvider = (): FusionModulesInstance<[AppModule]>['app'] => {
+    const provider = useFramework<[AppModule]>().modules.app;
+    if (!provider) {
+        throw Error('Current framework does not have AppModule configured');
+    }
+
+    return provider;
+};
+
+export default useAppProvider;

package/src/app/useApps.ts

@@ -0,0 +1,30 @@
+import { AppManifest } from '@equinor/fusion-framework-module-app';
+import { useObservableState } from '@equinor/fusion-observable/react';
+import { useMemo } from 'react';
+
+import { useAppProvider } from './useAppProvider';
+
+/**
+ * React Hook - Get apps from framework
+ * @param args Object with boolean  member includeHidden
+ * @returns Object {apps, isLoading} where apps is Array of AppManifest, isLoading is a boolean on observable complete
+ */
+export const useApps = (args?: {
+    includeHidden: boolean;
+}): { apps: AppManifest[] | undefined; isLoading: boolean } => {
+    const provider = useAppProvider();
+    const { value: manifests, complete } = useObservableState(
+        useMemo(() => provider.getAllAppManifests(), [provider]),
+    );
+
+    const apps = useMemo(() => {
+        if (manifests && !args?.includeHidden) {
+            return manifests.filter((app) => !app.hide);
+        }
+        return manifests;
+    }, [args, manifests]);
+
+    return { apps, isLoading: !complete };
+};
+
+export default useApps;

package/src/app/useCurrentApp.ts

@@ -0,0 +1,38 @@
+import { useMemo } from 'react';
+
+import { useObservableState } from '@equinor/fusion-observable/react';
+
+import { type AnyModule } from '@equinor/fusion-framework-module';
+import { type AppModule, type CurrentApp } from '@equinor/fusion-framework-module-app';
+
+import { useFramework } from '../useFramework';
+
+/**
+ * Observers the stream of current app and return the latest application
+ *
+ * __Warning:__ type hint templates are only hints, this does not check if the modules are actually enabled!
+ *
+ * @template TModule type hint modules which the application has configured
+ * @template TEnv type hint what kind of environment config the application has
+ */
+export const useCurrentApp = <TModules extends Array<AnyModule> = [], TEnv = unknown>(): {
+    currentApp: CurrentApp<TModules, TEnv>;
+    setCurrentApp: (appKey: string) => void;
+    clearCurrentApp: () => void;
+    error?: unknown;
+} => {
+    const provider = useFramework<[AppModule]>().modules.app;
+    if (!provider) {
+        throw Error('Current framework does not have AppModule configured');
+    }
+    const currentApp$ = useMemo(() => provider.current$, [provider]);
+    const { value, error } = useObservableState(currentApp$);
+    return {
+        currentApp: value as CurrentApp<TModules, TEnv>,
+        setCurrentApp: useMemo(() => provider.setCurrentApp.bind(provider), [provider]),
+        clearCurrentApp: useMemo(() => provider.clearCurrentApp.bind(provider), [provider]),
+        error,
+    };
+};
+
+export default useCurrentApp;

package/src/app/useCurrentAppModules.ts

@@ -0,0 +1,34 @@
+import { useMemo } from 'react';
+import useCurrentApp from './useCurrentApp';
+
+import { AppModulesInstance } from '@equinor/fusion-framework-module-app';
+import { Observable, of } from 'rxjs';
+import { type AnyModule } from '@equinor/fusion-framework-module';
+
+/**
+ * Observers the stream of current app initialized modules
+ *
+ * __Warning:__ type hint templates are only hints, this does not check if the modules are actually enabled!
+ *
+ * @template TModule type hint modules which the application has configured
+ * @returns the observable instance of initialized modules of the application
+ */
+export const useCurrentAppModules = <TModules extends Array<AnyModule> = []>(): {
+    modules$: Observable<AppModulesInstance<TModules> | null>;
+    error?: unknown;
+} => {
+    const { currentApp, error } = useCurrentApp<TModules>();
+    const modules$ = useMemo(
+        () =>
+            currentApp
+                ? (currentApp.instance$ as Observable<AppModulesInstance<TModules>>)
+                : of(null),
+        [currentApp],
+    );
+    return {
+        modules$,
+        error,
+    };
+};
+
+export default useCurrentAppModules;

package/src/context/index.ts

@@ -0,0 +1,3 @@
+export * from '@equinor/fusion-framework-react-module-context';
+
+export { useCurrentContext } from './useCurrentContext';

package/src/context/useCurrentContext.ts

@@ -0,0 +1,6 @@
+import { useCurrentContext as _useCurrentContext } from '@equinor/fusion-framework-react-module-context';
+import { useFramework } from '../useFramework';
+
+export const useCurrentContext = () => _useCurrentContext(useFramework().modules.context);
+
+export default useCurrentContext;

package/src/context.ts

@@ -0,0 +1,25 @@
+import { createContext } from 'react';
+import type { Fusion } from '@equinor/fusion-framework';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const context = createContext<Fusion<any> | null>(null);
+
+/**
+ * Component for providing framework.
+ *
+ * @remarks
+ * Should be created by {@link createFrameworkProvider}
+ *
+ * @example
+ * ```tsx
+ * import {FrameworkProvider} from '@equinor/fusion-framework-react';
+ * export const Component = (args: React.PropsWithChildren<{framework: Fusion}>) => {
+ *   return (
+ *      <FrameworkProvider value={args.framework}>
+ *        {args.children}
+ *      </FrameworkProvider>
+ *   );
+ * }
+ * ```
+ */
+export const FrameworkProvider = context.Provider;

package/src/create-framework-provider.tsx

@@ -0,0 +1,42 @@
+import React, { lazy } from 'react';
+import initFusion from '@equinor/fusion-framework';
+import { FusionConfigurator } from '@equinor/fusion-framework';
+
+import { FrameworkProvider } from './context';
+import type { AnyModule } from '@equinor/fusion-framework-module';
+import { ModuleProvider } from '@equinor/fusion-framework-react-module';
+
+/**
+ * Create a framework provider for react.
+ *
+ * This function is for providers of framework, like a portal.
+ *
+ * @param configurator - callback for configuring modules
+ * @example
+ * ```tsx
+ * const config: FusionConfigurator = (config) => {}
+ * const Portal = () => {
+ *   const Framework = createFrameworkProvider(config);
+ *   return (
+ *      <Suspense fallback={<span>loading...</span>}>
+ *          <Framework>{children}</Framework>
+ *      </Suspense>
+ *   );
+ * };
+ * ```
+ */
+export const createFrameworkProvider = <TModules extends Array<AnyModule> = []>(
+    cb: (configurator: FusionConfigurator<TModules>) => void | Promise<void>,
+): React.LazyExoticComponent<React.FunctionComponent<React.PropsWithChildren<unknown>>> =>
+    lazy(async () => {
+        const configurator = new FusionConfigurator<TModules>();
+        await cb(configurator);
+        const framework = await initFusion(configurator);
+        return {
+            default: ({ children }: { children?: React.ReactNode }) => (
+                <FrameworkProvider value={framework}>
+                    <ModuleProvider value={framework.modules}>{children}</ModuleProvider>
+                </FrameworkProvider>
+            ),
+        };
+    });

package/src/hooks/index.ts

@@ -0,0 +1,2 @@
+export { useCurrentUser } from './use-current-user';
+export { useHttpClient } from './use-http-client';

package/src/hooks/use-current-user.ts

@@ -0,0 +1,15 @@
+import { useFramework } from '../useFramework';
+
+export type AccountInfo = {
+    // homeAccountId: string;
+    environment: string;
+    tenantId: string;
+    username: string;
+    localAccountId: string;
+    name?: string;
+};
+
+export const useCurrentUser = (): AccountInfo | undefined => {
+    const framework = useFramework();
+    return framework.modules.auth.defaultClient.account;
+};

package/src/hooks/use-http-client.ts

@@ -0,0 +1,19 @@
+import { useMemo } from 'react';
+import { Fusion } from '@equinor/fusion-framework';
+import { useFramework } from '../useFramework';
+
+type HttpClient = ReturnType<Fusion['modules']['http']['createClient']>;
+type FrameworkHttpClient = 'portal' | 'people';
+
+export const useHttpClient = (name: FrameworkHttpClient): HttpClient => {
+    const framework = useFramework();
+
+    const client = useMemo(() => {
+        if (framework.modules.http.hasClient(name)) {
+            return framework.modules.http.createClient(name);
+        }
+        throw Error(`no configured client for key [${name}]`);
+    }, [framework, name]);
+    // TODO - abort on unmount?
+    return client;
+};

package/src/http/index.ts

@@ -0,0 +1,3 @@
+export { useHttpClient as useFrameworkHttpClient } from '../hooks/use-http-client';
+
+export * from '@equinor/fusion-framework-react-module-http';

package/src/index.tsx

@@ -0,0 +1,14 @@
+/**
+ * [[include:framework-react/README.MD]]
+ * @module
+ */
+
+export type { Fusion } from '@equinor/fusion-framework';
+export { FusionConfigurator } from '@equinor/fusion-framework';
+
+export { createFrameworkProvider } from './create-framework-provider';
+export { FrameworkProvider } from './context';
+
+export { useFramework } from './useFramework';
+
+export { default, Framework } from './Framework';

package/src/signalr/index.ts

@@ -0,0 +1,38 @@
+import { useFramework } from '../useFramework';
+
+import { SignalRModule, useProviderTopic } from '@equinor/fusion-framework-react-module-signalr';
+
+/**
+ * hook for subscribing to a topic of a SignalR hub
+ * 
+ * @example
+ ```ts
+// config.ts
+import {enableSignalR} from '@equinor/fusion-framework-react-module-signalr';
+(configurator) => enableSignalR(configurator, 'notifications');
+
+// myHook.ts
+const myHook = () => {
+    const topic = useSignalR('notifications', 'foo');
+    return useObservableState(topic).next;
+}
+ ```
+ *
+ * @see {@link [module signalr](https://equinor.github.io/fusion-framework/modules/signalr)}
+ *
+ * @param hubId identifier of connection hub (must be configured)
+ * @param topicId identifier of topic to connect to
+ * @returns Topic
+ */
+export const useSignalR = <T>(
+    hubId: string,
+    topicId: string,
+): ReturnType<typeof useProviderTopic<T>> => {
+    const provider = useFramework<[SignalRModule]>().modules.signalR;
+    if (!provider) {
+        throw Error(
+            'SignalR is not configured, see @equinor/fusion-framework-react-module-signalr',
+        );
+    }
+    return useProviderTopic(provider, hubId, topicId);
+};

package/src/useFramework.ts

@@ -0,0 +1,27 @@
+import type { Fusion } from '@equinor/fusion-framework';
+import type { AnyModule } from '@equinor/fusion-framework-module';
+
+import { useContext } from 'react';
+import { context } from './context';
+/**
+ * @example
+ * ```ts
+ * const useSometing = () => {
+ *  const fusion = useFramework();
+ *  return fusion.something;
+ * }
+ * ```
+ */
+export const useFramework = <TModules extends Array<AnyModule> = []>(): Fusion<TModules> => {
+    let framework = useContext(context);
+    if (!framework) {
+        console.warn('could not locate fusion in context!');
+    }
+    framework ??= window.Fusion;
+    if (!framework) {
+        console.error('Could not load framework, might not be initiated?');
+    }
+    return framework;
+};
+
+export default useFramework;

package/src/version.ts

@@ -0,0 +1,2 @@
+// Generated by genversion.
+export const version = '5.2.7';

package/tsconfig.json

@@ -0,0 +1,38 @@
+{
+  "extends": "../tsconfig.react.json",
+  "compilerOptions": {
+    "outDir": "dist/esm",
+    "rootDir": "src",
+    "declarationDir": "./dist/types",
+    "paths": {
+      "react": [ "./node_modules/@types/react" ],
+    },
+  },
+  "references": [
+    {
+      "path": "../../framework"
+    },
+    {
+      "path": "../../modules/app"
+    },
+    {
+      "path": "../../modules/service-discovery"
+    },
+    {
+      "path": "../modules/context"
+    },
+    {
+      "path": "../modules/http"
+    },
+    {
+      "path": "../modules/signalr"
+    }
+  ],
+  "include": [
+    "src/**/*",
+  ],
+  "exclude": [
+    "node_modules",
+    "lib"
+  ]
+}