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

package/dist/types/render-component.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentRenderArgs, ComponentRenderer } from './create-component';
+export type RenderTeardown = VoidFunction;
+export declare const renderComponent: (renderer: ComponentRenderer) => (el: HTMLElement, args: ComponentRenderArgs) => RenderTeardown;
+export default renderComponent;

package/dist/types/useAppModule.d.ts

@@ -0,0 +1,4 @@
+import type { AppModules, AppModulesInstance } from '@equinor/fusion-framework-app';
+import { AnyModule, ModuleKey, ModuleType, ModuleTypes } from '@equinor/fusion-framework-module';
+export declare const useAppModule: <TType extends unknown = unknown, TKey extends string = ModuleKey<ModuleTypes<AppModules<[TType]>>>>(module: TKey) => TType extends AnyModule ? ModuleType<TType> : AppModulesInstance[Extract<"event", TKey> | Extract<"http", TKey> | Extract<"auth", TKey> | Extract<"dispose", TKey>];
+export default useAppModule;

package/dist/types/useAppModules.d.ts

@@ -0,0 +1,3 @@
+import type { AppModulesInstance } from '@equinor/fusion-framework-app';
+export declare const useAppModules: <T extends unknown = unknown>() => AppModulesInstance<T>;
+export default useAppModules;

package/dist/types/version.d.ts

@@ -0,0 +1 @@
+export declare const version = "4.1.6";

package/package.json

@@ -0,0 +1,89 @@
+{
+  "name": "@equinor/fusion-framework-react-app",
+  "version": "0.0.0-next-20230915111233",
+  "description": "",
+  "main": "dist/esm/index.js",
+  "exports": {
+    ".": "./dist/esm/index.js",
+    "./bookmark": "./dist/esm/bookmark/index.js",
+    "./context": "./dist/esm/context/index.js",
+    "./framework": "./dist/esm/framework/index.js",
+    "./http": "./dist/esm/http/index.js",
+    "./navigation": "./dist/esm/navigation/index.js"
+  },
+  "types": "./dist/types/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "bookmark": [
+        "dist/types/bookmark/index.d.ts"
+      ],
+      "context": [
+        "dist/types/context/index.d.ts"
+      ],
+      "framework": [
+        "dist/types/framework/index.d.ts"
+      ],
+      "http": [
+        "dist/types/http/index.d.ts"
+      ],
+      "navigation": [
+        "dist/types/navigation/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"
+  },
+  "dependencies": {
+    "@equinor/fusion-framework-app": "^0.0.0-next-20230915111233",
+    "@equinor/fusion-framework-module": "^4.2.4",
+    "@equinor/fusion-framework-react": "^0.0.0-next-20230915111233",
+    "@equinor/fusion-framework-module-navigation": "^3.0.5",
+    "@equinor/fusion-framework-module-app": "^0.0.0-next-20230915111233",
+    "@equinor/fusion-framework-react-module-http": "^0.0.0-next-20230915111233",
+    "@equinor/fusion-framework-react-module": "^3.0.5"
+  },
+  "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-event": "^4.0.5",
+    "@equinor/fusion-framework-react-module-bookmark": "^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"
+  },
+  "peerDependenciesMeta": {
+    "@equinor/fusion-framework-react-module-context": {
+      "optional": true
+    },
+    "@equinor/fusion-framework-module-navigation": {
+      "optional": true
+    },
+    "@equinor/fusion-framework-react-module-bookmark": {
+      "optional": true
+    },
+    "@types/react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "build": "tsc -b"
+  }
+}

package/src/bookmark/index.ts

@@ -0,0 +1,4 @@
+export type { CreateBookMarkFn } from '@equinor/fusion-framework-react-module-bookmark';
+
+export { default, useCurrentBookmark } from './useCurrentBookmark';
+export { useBookmark } from './useBookmark';

package/src/bookmark/useBookmark.ts

@@ -0,0 +1,21 @@
+import { useBookmark as _useBookmark } from '@equinor/fusion-framework-react-module-bookmark';
+
+/**
+ *  For application development the useCurrentBookmark should be sufficient enough
+ *
+ *  Functionality provided here is:
+ *  - addBookmarkCreator
+ *  - getAllBookmarks
+ *  - createBookmark
+ *  - updateBookmark
+ *  - deleteBookmarkById
+ *  - setCurrentBookmark
+ *  - currentBookmark
+ *  - bookmarks,
+ *
+ * @template TData - Current applications  bookmark type
+ * @return {*}  {Bookmarks<TData>} the full api fro handling bookmarks
+ */
+export const useBookmark = <TData>() => _useBookmark<TData>();
+
+export default useBookmark;

package/src/bookmark/useCurrentBookmark.ts

@@ -0,0 +1,21 @@
+import {
+    CreateBookMarkFn,
+    useCurrentBookmark as _useCurrentBookmark,
+} from '@equinor/fusion-framework-react-module-bookmark';
+
+/**
+ * By providing a CreateBookMarkFn bookmarks is enabled for the current application.
+ *
+ * @template TData - Type of data stored in bookmark
+ * @param {CreateBookMarkFn<TData>} [createBookmarkState] - Function for creating bookmark payload, this function should be wrapped in useCallback
+ *
+ * ```TS
+ * // Example
+ * const { currentBookmark } = useCurrentBookmark(useCallback(()=> someState, [someState]))
+ * ```
+ * @return {*}  {CurrentBookmark<TData>}
+ */
+export const useCurrentBookmark = <TData>(createBookmarkState?: CreateBookMarkFn<TData>) =>
+    _useCurrentBookmark(createBookmarkState);
+
+export default useCurrentBookmark;

package/src/context/index.ts

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

package/src/context/useContextProvider.ts

@@ -0,0 +1,6 @@
+import { type ContextModule } from '@equinor/fusion-framework-react-module-context';
+import { useAppModule } from '../useAppModule';
+
+export const useContextProvider = () => useAppModule<ContextModule>('context');
+
+export default useContextProvider;

package/src/context/useCurrentContext.ts

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

package/src/create-component.tsx

@@ -0,0 +1,114 @@
+import React, { lazy } from 'react';
+
+import { FrameworkProvider } from '@equinor/fusion-framework-react';
+import type { Fusion } from '@equinor/fusion-framework-react';
+
+import { AppEnv, configureModules } from '@equinor/fusion-framework-app';
+import type { AppModuleInitiator, AppModulesInstance } from '@equinor/fusion-framework-app';
+
+import type { AnyModule } from '@equinor/fusion-framework-module';
+
+import type { FrameworkEvent, FrameworkEventInit } from '@equinor/fusion-framework-module-event';
+
+import { ModuleProvider as AppModuleProvider } from '@equinor/fusion-framework-react-module';
+
+export type ComponentRenderArgs<TFusion extends Fusion = Fusion, TEnv = AppEnv> = {
+    fusion: TFusion;
+    env: TEnv;
+};
+
+export type ComponentRenderer<TFusion extends Fusion = Fusion, TEnv = AppEnv> = (
+    fusion: TFusion,
+    env: TEnv,
+) => React.LazyExoticComponent<React.ComponentType>;
+
+/**
+ * @deprecated
+ * Creates an lazy loading Component which configures modules
+ * and provides context to framework and configured modules
+ *
+ *
+ * ```mermaid
+ * sequenceDiagram
+ * App ->>+Framework: createApp
+ * Framework->>-Framework: initializeModules
+ * Framework->>App: configure(modules, framework, args)
+ * App-->Framework: await configuration
+ * Framework->>App: React.LazyExoticComponent
+ * ```
+ *
+ * @example
+ * ```tsx
+ * const configCallback: AppConfigurator = (configurator) => {
+ *  configurator.http.configureClient(
+ *     'bar', {
+ *       baseUri: 'https://somewhere-test.com',
+ *       defaultScopes: ['foo/.default']
+ *     }
+ *   );
+ * };
+ *
+ * export const App = () => {
+ *   const client = useHttpClient('bar');
+ *   const [foo, setFoo] = useState('no value');
+ *   const onClick = useCallback(() => {
+ *     client.fetchAsync('api').then(x => x.json).then(setFoo);
+ *   }, [client]);
+ *   return <Button onClick={onClick}>{foo}</Button>
+ * }
+ *
+ * export const render = createApp(App, configCallback);
+ *
+ * export default render;
+ * ```
+ *
+ *
+ * __Exposed providers__
+ * @see {@link @equinor/fusion-framework-react.FrameworkProvider | FrameworkProvider}
+ * @see {@link ModuleProvider | ModuleProvider}
+ *
+ * @template TModules module types included in configuration.
+ * @param Component - React component to render
+ * @param configure - Callback for configuring application
+ * @param modules - required modules for application
+ */
+export const createComponent =
+    <TModules extends Array<AnyModule>, TRef extends Fusion = Fusion, TEnv extends AppEnv = AppEnv>(
+        Component: React.ElementType,
+        configure?: AppModuleInitiator<TModules, TRef, TEnv>,
+    ): ComponentRenderer<TRef, TEnv> =>
+    (fusion, env) =>
+        lazy(async () => {
+            const init = configureModules<TModules, TRef, TEnv>(configure);
+            const modules = (await init({
+                fusion,
+                env,
+            })) as unknown as AppModulesInstance;
+
+            modules.event.dispatchEvent('onReactAppLoaded', {
+                detail: { modules, fusion },
+                source: Component,
+            });
+            return {
+                default: () => (
+                    <FrameworkProvider value={fusion}>
+                        <AppModuleProvider value={modules}>
+                            {/* TODO */}
+                            {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment*/}
+                            {/* @ts-ignore */}
+                            <Component />
+                        </AppModuleProvider>
+                    </FrameworkProvider>
+                ),
+            };
+        });
+
+declare module '@equinor/fusion-framework-module-event' {
+    interface FrameworkEventMap {
+        onReactAppLoaded: FrameworkEvent<
+            FrameworkEventInit<{ modules: AppModulesInstance; fusion: Fusion }, React.ComponentType>
+        >;
+    }
+}
+
+export default createComponent;

package/src/create-legacy-app.tsx

@@ -0,0 +1,35 @@
+import { Suspense, useMemo } from 'react';
+
+import { useFramework } from '@equinor/fusion-framework-react';
+
+import type { AnyModule } from '@equinor/fusion-framework-module';
+import type { AppEnv, AppModuleInitiator } from '@equinor/fusion-framework-app';
+
+import { createComponent } from './create-component';
+import { AppModule } from '@equinor/fusion-framework-module-app';
+
+export const createLegacyApp = <TModules extends Array<AnyModule>>(
+    Component: React.ElementType,
+    configure?: AppModuleInitiator<TModules>,
+) => {
+    const LegacyComponent = (): JSX.Element => {
+        const fusion = useFramework<[AppModule]>();
+        const RenderComponent = useMemo(() => {
+            const creator = createComponent(Component, configure);
+            // @eikeland
+            // TODO - recheck when legacy fusion-cli is updated!
+            const appProvider = fusion.modules.app;
+            if (appProvider?.current) {
+                const { config, manifest } = appProvider.current;
+                return creator(fusion, { config, manifest } as unknown as AppEnv);
+            }
+            return creator(fusion, {} as unknown as AppEnv);
+        }, [fusion]);
+        return (
+            <Suspense fallback={<p>loading app</p>}>
+                <RenderComponent />
+            </Suspense>
+        );
+    };
+    return LegacyComponent;
+};

package/src/framework/index.ts

@@ -0,0 +1,7 @@
+export { useFramework } from '@equinor/fusion-framework-react';
+
+// TODO
+export {
+    useCurrentUser,
+    useHttpClient as useFrameworkHttpClient,
+} from '@equinor/fusion-framework-react/hooks';

package/src/framework/useFrameworkCurrentContext.ts

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

package/src/http/index.ts

@@ -0,0 +1 @@
+export * from '@equinor/fusion-framework-react-module-http';

package/src/index.ts

@@ -0,0 +1,30 @@
+/**
+ * [[include:react-app/README.MD]]
+ * @module
+ */
+
+export type {
+    AppConfig,
+    AppEnv,
+    AppModuleInitiator,
+    AppModules,
+    AppModulesInstance,
+    AppManifest,
+    IAppConfigurator,
+} from '@equinor/fusion-framework-app';
+
+export { useAppModule } from './useAppModule';
+export { useAppModules } from './useAppModules';
+
+export { makeComponent, ComponentRenderArgs } from './make-component';
+
+export { createLegacyApp } from './create-legacy-app';
+
+// TODO deprecate
+export { renderApp } from './render-app';
+export { createComponent } from './create-component';
+export { renderComponent } from './render-component';
+
+export type { ComponentRenderer } from './create-component';
+
+export { default } from './render-app';

package/src/make-component.tsx

@@ -0,0 +1,74 @@
+import React, { lazy } from 'react';
+
+import { FrameworkProvider } from '@equinor/fusion-framework-react';
+import type { Fusion } from '@equinor/fusion-framework-react';
+
+import { AppEnv, configureModules } from '@equinor/fusion-framework-app';
+import type { AppModuleInitiator, AppModulesInstance } from '@equinor/fusion-framework-app';
+
+import type { AnyModule } from '@equinor/fusion-framework-module';
+
+import type { FrameworkEvent, FrameworkEventInit } from '@equinor/fusion-framework-module-event';
+
+import { ModuleProvider as AppModuleProvider } from '@equinor/fusion-framework-react-module';
+
+export type ComponentRenderArgs<TFusion extends Fusion = Fusion, TEnv = AppEnv> = {
+    fusion: TFusion;
+    env: TEnv;
+};
+
+export type ComponentRenderer<TFusion extends Fusion = Fusion, TEnv = AppEnv> = (
+    fusion: TFusion,
+    env: TEnv,
+) => React.LazyExoticComponent<React.ComponentType>;
+
+/**
+ * Creates an lazy loading Component which configures modules
+ * and provides context to framework and configured modules
+ *
+ * __Exposed providers__
+ * @see {@link @equinor/fusion-framework-react.FrameworkProvider | FrameworkProvider}
+ * @see {@link ModuleProvider | ModuleProvider}
+ *
+ * @template TModules module types included in configuration.
+ * @param Component - React component to render
+ * @param configure - Callback for configuring application
+ * @param modules - required modules for application
+ */
+export const makeComponent = <
+    TModules extends Array<AnyModule>,
+    TRef extends Fusion = Fusion,
+    TEnv extends AppEnv = AppEnv,
+>(
+    Component: React.ReactNode,
+    args: { fusion: TRef; env: TEnv },
+    configure?: AppModuleInitiator<TModules, TRef, TEnv>,
+) =>
+    lazy(async () => {
+        const init = configureModules<TModules, TRef, TEnv>(configure);
+        const modules = (await init(args)) as unknown as AppModulesInstance;
+
+        const { fusion } = args;
+
+        modules.event.dispatchEvent('onReactAppLoaded', {
+            detail: { modules, fusion },
+            source: Component,
+        });
+        return {
+            default: () => (
+                <FrameworkProvider value={fusion}>
+                    <AppModuleProvider value={modules}>{Component}</AppModuleProvider>
+                </FrameworkProvider>
+            ),
+        };
+    });
+
+declare module '@equinor/fusion-framework-module-event' {
+    interface FrameworkEventMap {
+        onReactAppLoaded: FrameworkEvent<
+            FrameworkEventInit<{ modules: AppModulesInstance; fusion: Fusion }, React.ComponentType>
+        >;
+    }
+}
+
+export default makeComponent;

package/src/navigation/index.ts

@@ -0,0 +1,2 @@
+export { useNavigationModule } from './useNavigationModule';
+export { useRouter } from './useRouter';

package/src/navigation/useNavigationModule.ts

@@ -0,0 +1,5 @@
+import useAppModule from '../useAppModule';
+import { INavigationProvider } from '@equinor/fusion-framework-module-navigation';
+
+/** hook for getting the navigation provider (if enabled!) */
+export const useNavigationModule = (): INavigationProvider => useAppModule('navigation');

package/src/navigation/useRouter.ts

@@ -0,0 +1,16 @@
+import { useMemo } from 'react';
+import { useNavigationModule } from './useNavigationModule';
+import { type INavigationProvider } from '@equinor/fusion-framework-module-navigation';
+
+/**
+ * create a router for react routing
+ * @see {@link [docs](https://equinor.github.io/fusion-framework/modules/navigation/)}
+ * @see {@link [react-router](https://reactrouter.com/en/main/routers/create-browser-router)}
+ * @param routes router objects __(must be static | memorized)__
+ */
+export const useRouter = (
+    routes: Parameters<INavigationProvider['createRouter']>[0],
+): ReturnType<INavigationProvider['createRouter']> => {
+    const provider = useNavigationModule();
+    return useMemo(() => provider.createRouter(routes), [provider, routes]);
+};

package/src/render-app.ts

@@ -0,0 +1,14 @@
+import { createComponent } from './create-component';
+import { renderComponent, RenderTeardown } from './render-component';
+
+import type { ComponentRenderArgs } from './create-component';
+
+/** @deprecated */
+export const renderApp = (...componentArgs: Parameters<typeof createComponent>) => {
+    const renderer = renderComponent(createComponent(...componentArgs));
+    return (el: HTMLElement, args: ComponentRenderArgs): RenderTeardown => {
+        return renderer(el, args);
+    };
+};
+
+export default renderApp;

package/src/render-component.tsx

@@ -0,0 +1,46 @@
+import { Suspense, StrictMode } from 'react';
+import type { FunctionComponent } from 'react';
+import type { ComponentRenderArgs, ComponentRenderer } from './create-component';
+import ReactDOM from 'react-dom';
+
+export type RenderTeardown = VoidFunction;
+
+/** @deprecated */
+export const renderComponent = (renderer: ComponentRenderer) => {
+    return (el: HTMLElement, args: ComponentRenderArgs): RenderTeardown => {
+        const Component = renderer(args.fusion, args.env);
+        return render(el, Component);
+    };
+};
+
+const render = (el: Element, Component: FunctionComponent): RenderTeardown => {
+    // eslint-disable-next-line react/no-deprecated
+    ReactDOM.render(
+        <StrictMode>
+            <Suspense fallback={<p>loading app</p>}>
+                <Component />
+            </Suspense>
+        </StrictMode>,
+        el,
+    );
+    return () => {
+        // eslint-disable-next-line react/no-deprecated
+        ReactDOM.unmountComponentAtNode(el);
+    };
+};
+
+// const render = (el: Element, Component: FunctionComponent): RenderTeardown => {
+//     const root = createRoot(el);
+//     root.render(
+//         <StrictMode>
+//             <Suspense fallback={<p>loading app</p>}>
+//                 <Component />
+//             </Suspense>
+//         </StrictMode>
+//     );
+//     return () => {
+//         root.unmount();
+//     };
+// };
+
+export default renderComponent;

package/src/useAppModule.ts

@@ -0,0 +1,31 @@
+import type { AppModules, AppModulesInstance } from '@equinor/fusion-framework-app';
+import { AnyModule, ModuleKey, ModuleType, ModuleTypes } from '@equinor/fusion-framework-module';
+import { useAppModules } from './useAppModules';
+
+/**
+ * hook for getting a module from the application scope
+ *
+ * @template TType type of the module
+ *
+ * @param module name of the module, provide TType if not registered
+ *
+ * @returns provider of the module
+ */
+export const useAppModule = <
+    TType extends AnyModule | unknown = unknown,
+    TKey extends string = ModuleKey<ModuleTypes<AppModules<[TType]>>>,
+>(
+    module: TKey,
+): TType extends AnyModule
+    ? ModuleType<TType>
+    : AppModulesInstance[Extract<keyof AppModulesInstance, TKey>] => {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    const appModule = useAppModules()[module];
+    if (!appModule) {
+        throw Error(`the requested module [${module}] is not included in the app scope`);
+    }
+    return appModule;
+};
+
+export default useAppModule;

package/src/useAppModules.ts

@@ -0,0 +1,9 @@
+import type { AppModulesInstance } from '@equinor/fusion-framework-app';
+import type { AnyModule } from '@equinor/fusion-framework-module';
+import { useModules } from '@equinor/fusion-framework-react-module';
+
+export const useAppModules = <
+    T extends Array<AnyModule> | unknown = unknown,
+>(): AppModulesInstance<T> => useModules<AppModulesInstance<T>>();
+
+export default useAppModules;

package/src/version.ts

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

package/tsconfig.json

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