@equinor/fusion-framework-react-app 0.0.0-context-error-20240131144633

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { Fusion } from '@equinor/fusion-framework-react';
+import { AppEnv } 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';
+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>;
+export declare const createComponent: <TModules extends AnyModule[], TRef extends Fusion<unknown> = Fusion<unknown>, TEnv extends AppEnv = AppEnv>(Component: React.ElementType, configure?: AppModuleInitiator<TModules, TRef, TEnv> | undefined) => ComponentRenderer<TRef, TEnv>;
+declare module '@equinor/fusion-framework-module-event' {
+    interface FrameworkEventMap {
+        onReactAppLoaded: FrameworkEvent<FrameworkEventInit<{
+            modules: AppModulesInstance;
+            fusion: Fusion;
+        }, React.ComponentType>>;
+    }
+}
+export default createComponent;

package/dist/types/create-legacy-app.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { AnyModule } from '@equinor/fusion-framework-module';
+import type { AppModuleInitiator } from '@equinor/fusion-framework-app';
+export declare const createLegacyApp: <TModules extends AnyModule[]>(Component: React.ElementType, configure?: AppModuleInitiator<TModules> | undefined) => () => JSX.Element;

package/dist/types/feature-flag/index.d.ts

@@ -0,0 +1,2 @@
+export { IFeatureFlag, IFeatureFlagProvider, FeatureFlagModule, } from '@equinor/fusion-framework-module-feature-flag';
+export { useFeature } from './useFeature';

package/dist/types/feature-flag/useFeature.d.ts

@@ -0,0 +1,6 @@
+import { type IFeatureFlag } from '@equinor/fusion-framework-module-feature-flag';
+export declare const useFeature: <T = unknown>(key: string) => {
+    feature?: IFeatureFlag<T> | undefined;
+    toggleFeature: (enabled?: boolean) => void;
+    error?: unknown;
+};

package/dist/types/framework/index.d.ts

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

package/dist/types/framework/useFrameworkCurrentContext.d.ts

@@ -0,0 +1,5 @@
+export declare const useFrameworkCurrentContext: () => {
+    currentContext: import("@equinor/fusion-framework-react-module-context").ContextItem | null | undefined;
+    setCurrentContext: (entry?: string | import("@equinor/fusion-framework-react-module-context").ContextItem | null | undefined) => void | Promise<import("@equinor/fusion-framework-react-module-context").ContextItem<Record<string, unknown>> | null>;
+};
+export default useFrameworkCurrentContext;

package/dist/types/http/index.d.ts

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

package/dist/types/index.d.ts

@@ -0,0 +1,10 @@
+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';
+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/dist/types/make-component.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import type { Fusion } from '@equinor/fusion-framework-react';
+import { AppEnv } 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';
+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>;
+export declare const makeComponent: <TModules extends AnyModule[], TRef extends Fusion<unknown> = Fusion<unknown>, TEnv extends AppEnv = AppEnv>(Component: React.ReactNode, args: {
+    fusion: TRef;
+    env: TEnv;
+}, configure?: AppModuleInitiator<TModules, TRef, TEnv> | undefined) => React.LazyExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+declare module '@equinor/fusion-framework-module-event' {
+    interface FrameworkEventMap {
+        onReactAppLoaded: FrameworkEvent<FrameworkEventInit<{
+            modules: AppModulesInstance;
+            fusion: Fusion;
+        }, React.ComponentType>>;
+    }
+}
+export default makeComponent;

package/dist/types/msal/index.d.ts

@@ -0,0 +1,3 @@
+export { useCurrentAccount } from './useCurrentAccount';
+export { useAccessToken } from './useAccessToken';
+export { useToken } from './useToken';

package/dist/types/msal/useAccessToken.d.ts

@@ -0,0 +1,6 @@
+import { AuthRequest } from '@equinor/fusion-framework-module-msal/client';
+export declare const useAccessToken: (req: AuthRequest) => {
+    token?: string | undefined;
+    pending: boolean;
+    error: unknown;
+};

package/dist/types/msal/useCurrentAccount.d.ts

@@ -0,0 +1,2 @@
+import { AccountInfo } from '@equinor/fusion-framework-module-msal';
+export declare const useCurrentAccount: () => AccountInfo | undefined;

package/dist/types/msal/useToken.d.ts

@@ -0,0 +1,7 @@
+import { AuthRequest, AuthenticationResult } from '@equinor/fusion-framework-module-msal/client';
+export declare const useToken: (req: AuthRequest) => {
+    token?: AuthenticationResult | undefined;
+    pending: boolean;
+    error: unknown;
+};
+export default useToken;

package/dist/types/navigation/index.d.ts

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

package/dist/types/navigation/useNavigationModule.d.ts

@@ -0,0 +1,2 @@
+import { INavigationProvider } from '@equinor/fusion-framework-module-navigation';
+export declare const useNavigationModule: () => INavigationProvider;

package/dist/types/navigation/useRouter.d.ts

@@ -0,0 +1,2 @@
+import { type INavigationProvider } from '@equinor/fusion-framework-module-navigation';
+export declare const useRouter: (routes: Parameters<INavigationProvider['createRouter']>[0]) => ReturnType<INavigationProvider['createRouter']>;

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { RenderTeardown } from './render-component';
+import type { ComponentRenderArgs } from './create-component';
+export declare const renderApp: (Component: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements>, configure?: import("@equinor/fusion-framework-app").AppModuleInitiator<import("@equinor/fusion-framework-module").AnyModule[], import("@equinor/fusion-framework-react").Fusion<unknown>, import("@equinor/fusion-framework-app").AppEnv> | undefined) => (el: HTMLElement, args: ComponentRenderArgs) => RenderTeardown;
+export default renderApp;

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.3.0";

package/package.json

@@ -0,0 +1,112 @@
+{
+  "name": "@equinor/fusion-framework-react-app",
+  "version": "0.0.0-context-error-20240131144633",
+  "description": "",
+  "main": "dist/esm/index.js",
+  "exports": {
+    ".": "./dist/esm/index.js",
+    "./bookmark": "./dist/esm/bookmark/index.js",
+    "./context": "./dist/esm/context/index.js",
+    "./feature-flag": "./dist/esm/feature-flag/index.js",
+    "./framework": "./dist/esm/framework/index.js",
+    "./http": "./dist/esm/http/index.js",
+    "./msal": "./dist/esm/msal/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"
+      ],
+      "feature-flag": [
+        "dist/types/feature-flag/index.d.ts"
+      ],
+      "framework": [
+        "dist/types/framework/index.d.ts"
+      ],
+      "http": [
+        "dist/types/http/index.d.ts"
+      ],
+      "msal": [
+        "dist/types/msal/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-context-error-20240131144633",
+    "@equinor/fusion-framework-module": "^4.2.6",
+    "@equinor/fusion-framework-module-app": "^5.2.12",
+    "@equinor/fusion-framework-module-navigation": "^3.1.3",
+    "@equinor/fusion-framework-react": "^0.0.0-context-error-20240131144633",
+    "@equinor/fusion-framework-react-module": "^3.0.7",
+    "@equinor/fusion-framework-react-module-http": "^4.0.5"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.20",
+    "@types/react-dom": "^18.2.7",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rxjs": "^7.8.1",
+    "typescript": "^5.1.3",
+    "@equinor/fusion-framework-module-event": "^4.0.7",
+    "@equinor/fusion-framework-module-msal": "^3.0.9",
+    "@equinor/fusion-framework-module-feature-flag": "^1.0.0",
+    "@equinor/fusion-framework-react-module-bookmark": "^0.0.0-context-error-20240131144633",
+    "@equinor/fusion-framework-react-module-context": "^0.0.0-context-error-20240131144633",
+    "@equinor/fusion-observable": "^8.1.4"
+  },
+  "peerDependencies": {
+    "@types/react": "^17.0.0 || ^18.0.0",
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0",
+    "rxjs": "^7.8.1",
+    "@equinor/fusion-framework-module-msal": "^3.0.9"
+  },
+  "peerDependenciesMeta": {
+    "@equinor/fusion-framework-react-module-context": {
+      "optional": true
+    },
+    "@equinor/fusion-framework-module-navigation": {
+      "optional": true
+    },
+    "@equinor/fusion-framework-react-module-bookmark": {
+      "optional": true
+    },
+    "@equinor/fusion-framework-module-feature-flag": {
+      "optional": true
+    },
+    "@equinor/fusion-observable": {
+      "optional": true
+    },
+    "@types/react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    },
+    "rxjs": {
+      "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/feature-flag/README.md

@@ -0,0 +1,20 @@
+__useFeature__
+
+Custom hook for accessing and manipulating feature flags.
+
+```ts
+const Component = () => {
+  const { feature, toggleFeature } = useFeature('my-feature');
+  return (
+    <>
+      <p>My feature is { feature.enabled ? 'enabled': 'disabled' }</p>
+      <button onClick={ () => toggleFeature() }>
+        { feature.enabled ? 'disable' : 'enable' } my feature 
+      </button>
+    </>
+  )
+}
+```
+
+> [!NOTE]
+> this hook can access parent feature if not found in application

package/src/feature-flag/index.ts

@@ -0,0 +1,6 @@
+export {
+    IFeatureFlag,
+    IFeatureFlagProvider,
+    FeatureFlagModule,
+} from '@equinor/fusion-framework-module-feature-flag';
+export { useFeature } from './useFeature';

package/src/feature-flag/useFeature.ts

@@ -0,0 +1,66 @@
+import { useCallback, useMemo } from 'react';
+
+import { EMPTY, combineLatest, map } from 'rxjs';
+
+import { useFrameworkModule } from '@equinor/fusion-framework-react';
+import { useObservableState } from '@equinor/fusion-observable/react';
+import {
+    type FeatureFlagModule,
+    type IFeatureFlag,
+} from '@equinor/fusion-framework-module-feature-flag';
+import { findFeature } from '@equinor/fusion-framework-module-feature-flag/selectors';
+
+import { useAppModule } from '../useAppModule';
+
+/**
+ * Custom hook for accessing and manipulating feature flags.
+ * @template T - The type of the feature flag value.
+ * @param key - The key of the feature flag.
+ * @returns An object containing the feature flag, toggle function, and error (if any).
+ */
+export const useFeature = <T = unknown>(
+    key: string,
+): {
+    feature?: IFeatureFlag<T>;
+    toggleFeature: (enabled?: boolean) => void;
+    error?: unknown;
+} => {
+    const appProvider = useAppModule<FeatureFlagModule>('featureFlag');
+    const frameworkProvider = useFrameworkModule<FeatureFlagModule>('featureFlag');
+
+    /** get all available feature flags */
+    const features$ = useMemo(() => {
+        /** the framework does not have the feature flag module */
+        if (!frameworkProvider) {
+            return appProvider.features$;
+        }
+        /** merge feature flags from framework and application */
+        return combineLatest({
+            framework: frameworkProvider.features$,
+            app: appProvider.features$,
+        }).pipe(
+            map(({ framework, app }) => {
+                return { ...framework, ...app };
+            }),
+        );
+    }, [appProvider, frameworkProvider]);
+
+    /** find feature flag by the provided key */
+    const feature$ = useMemo(() => features$.pipe(findFeature<T>(key)), [features$, key]);
+
+    const { value: feature, error } = useObservableState(feature$ ?? EMPTY);
+
+    const toggleFeature = useCallback(
+        (enable?: boolean) => {
+            /** if no value provided, invert the current value */
+            const enabled = enable === undefined ? !appProvider.getFeature(key)?.enabled : enable;
+            appProvider.toggleFeature({
+                key,
+                enabled,
+            });
+        },
+        [appProvider, key],
+    );
+
+    return { feature, toggleFeature, error };
+};

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';