@equinor/fusion-framework-react-app 4.2.0 → 4.3.0

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/render-app.d.ts

@@ -1,5 +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>, 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 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/version.d.ts

@@ -1 +1 @@
-export declare const version = "4.2.0";
+export declare const version = "4.3.0";

package/package.json

@@ -1,37 +1,17 @@
 {
   "name": "@equinor/fusion-framework-react-app",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "description": "",
   "main": "dist/esm/index.js",
   "exports": {
-    ".": {
-      "import": "./dist/esm/index.js",
-      "types": "./dist/types/index.d.ts"
-    },
-    "./bookmark": {
-      "import": "./dist/esm/bookmark/index.js",
-      "types": "./dist/types/bookmark/index.d.ts"
-    },
-    "./context": {
-      "import": "./dist/esm/context/index.js",
-      "types": "./dist/types/context/index.d.ts"
-    },
-    "./framework": {
-      "import": "./dist/esm/framework/index.js",
-      "types": "./dist/types/framework/index.d.ts"
-    },
-    "./http": {
-      "import": "./dist/esm/http/index.js",
-      "types": "./dist/types/http/index.d.ts"
-    },
-    "./msal": {
-      "import": "./dist/esm/msal/index.js",
-      "types": "./dist/types/msal/index.d.ts"
-    },
-    "./navigation": {
-      "import": "./dist/esm/navigation/index.js",
-      "types": "./dist/types/navigation/index.d.ts"
-    }
+    ".": "./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": {
@@ -42,6 +22,9 @@
       "context": [
         "dist/types/context/index.d.ts"
       ],
+      "feature-flag": [
+        "dist/types/feature-flag/index.d.ts"
+      ],
       "framework": [
         "dist/types/framework/index.d.ts"
       ],
@@ -68,12 +51,12 @@
     "directory": "packages/react"
   },
   "dependencies": {
-    "@equinor/fusion-framework-app": "^7.1.15",
-    "@equinor/fusion-framework-module": "^4.2.6",
+    "@equinor/fusion-framework-app": "^8.0.0",
     "@equinor/fusion-framework-module-app": "^5.2.12",
-    "@equinor/fusion-framework-react": "^5.3.8",
-    "@equinor/fusion-framework-react-module": "^3.0.7",
+    "@equinor/fusion-framework-module": "^4.2.6",
     "@equinor/fusion-framework-module-navigation": "^3.1.3",
+    "@equinor/fusion-framework-react": "^6.0.0",
+    "@equinor/fusion-framework-react-module": "^3.0.7",
     "@equinor/fusion-framework-react-module-http": "^4.0.5"
   },
   "devDependencies": {
@@ -81,16 +64,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-msal": "^3.0.9",
-    "@equinor/fusion-framework-react-module-bookmark": "^2.0.27",
     "@equinor/fusion-framework-module-event": "^4.0.7",
+    "@equinor/fusion-framework-module-msal": "^3.0.9",
+    "@equinor/fusion-framework-react-module-bookmark": "^2.0.30",
+    "@equinor/fusion-framework-module-feature-flag": "^1.0.0",
+    "@equinor/fusion-observable": "^8.1.4",
     "@equinor/fusion-framework-react-module-context": "^6.0.18"
   },
   "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": {
@@ -103,11 +90,20 @@
     "@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": {

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/version.ts

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