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

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

@@ -1 +1,2 @@
-export { useFeatureFlag, useFrameworkFeatureFlag, useFeatureFlags, useFrameworkFeatureFlags, } from './useFeatureFlags';
+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.1";
+export declare const version = "4.3.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/fusion-framework-react-app",
-  "version": "4.2.1",
+  "version": "4.3.0",
   "description": "",
   "main": "dist/esm/index.js",
   "exports": {
@@ -51,12 +51,12 @@
     "directory": "packages/react"
   },
   "dependencies": {
-    "@equinor/fusion-framework-app": "^7.1.15",
+    "@equinor/fusion-framework-app": "^8.0.0",
+    "@equinor/fusion-framework-module-app": "^5.2.12",
     "@equinor/fusion-framework-module": "^4.2.6",
     "@equinor/fusion-framework-module-navigation": "^3.1.3",
-    "@equinor/fusion-framework-react": "^5.3.9",
+    "@equinor/fusion-framework-react": "^6.0.0",
     "@equinor/fusion-framework-react-module": "^3.0.7",
-    "@equinor/fusion-framework-module-app": "^5.2.12",
     "@equinor/fusion-framework-react-module-http": "^4.0.5"
   },
   "devDependencies": {
@@ -68,10 +68,10 @@
     "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": "^0.0.1",
-    "@equinor/fusion-framework-react-module-context": "^6.0.18",
-    "@equinor/fusion-framework-react-module-bookmark": "^2.0.28",
-    "@equinor/fusion-observable": "^8.1.4"
+    "@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",

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

@@ -1,6 +1,6 @@
 export {
-    useFeatureFlag,
-    useFrameworkFeatureFlag,
-    useFeatureFlags,
-    useFrameworkFeatureFlags,
-} from './useFeatureFlags';
+    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.1';
+export const version = '4.3.0';

package/dist/esm/feature-flag/useFeatureFlags.js

@@ -1,48 +0,0 @@
-import { useFramework } from '@equinor/fusion-framework-react';
-import { useAppModule } from '../useAppModule';
-import { useCallback, useMemo } from 'react';
-import { useObservableState } from '@equinor/fusion-observable/react';
-import { EMPTY } from 'rxjs';
-export const useFeatureFlag = (key) => {
-    const provider = useAppModule('featureFlag');
-    const { value: feature, error } = useObservableState(_useFeatureFlag(key, provider));
-    const setFeatureEnabled = _useSetFeatureflag(provider);
-    return { feature, error, setFeatureEnabled };
-};
-export const useFeatureFlags = () => {
-    const provider = useAppModule('featureFlag');
-    const { value: features, error } = useObservableState(_useFeatureFlags(provider));
-    const setFeatureEnabled = _useSetFeatureflag(provider);
-    return { features, error, setFeatureEnabled };
-};
-export const useFrameworkFeatureFlag = (key) => {
-    const provider = useFramework().modules.featureFlag;
-    const { value: feature, error } = useObservableState(_useFeatureFlag(key, provider));
-    const setFeatureEnabled = _useSetFeatureflag(provider);
-    return { feature, error, setFeatureEnabled };
-};
-export const useFrameworkFeatureFlags = () => {
-    const provider = useFramework().modules.featureFlag;
-    const { value: features, error } = useObservableState(_useFeatureFlags(provider));
-    const setFeatureEnabled = _useSetFeatureflag(provider);
-    return { features, error, setFeatureEnabled };
-};
-const _useFeatureFlag = (key, provider) => {
-    return useMemo(() => {
-        return provider ? provider.getFeature(key) : EMPTY;
-    }, [provider, key]);
-};
-const _useFeatureFlags = (provider) => {
-    return useMemo(() => {
-        return provider ? provider.getFeatures((_) => true) : EMPTY;
-    }, [provider]);
-};
-const _useSetFeatureflag = (provider) => {
-    return useCallback((key, enabled) => {
-        if (!provider) {
-            throw new Error('Missing IFeatureFlagProvider.');
-        }
-        provider.toggleFeature({ key, enabled });
-    }, [provider]);
-};
-//# sourceMappingURL=useFeatureFlags.js.map

package/dist/esm/feature-flag/useFeatureFlags.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useFeatureFlags.js","sourceRoot":"","sources":["../../../src/feature-flag/useFeatureFlags.ts"],"names":[],"mappings":"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"}

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

@@ -1,21 +0,0 @@
-import { IFeatureFlag } from '@equinor/fusion-framework-module-feature-flag';
-export declare const useFeatureFlag: (key: string) => {
-    feature: IFeatureFlag<unknown> | undefined;
-    error: unknown;
-    setFeatureEnabled: (key: string, enabled: boolean) => void;
-};
-export declare const useFeatureFlags: () => {
-    features: IFeatureFlag<unknown>[] | undefined;
-    error: unknown;
-    setFeatureEnabled: (key: string, enabled: boolean) => void;
-};
-export declare const useFrameworkFeatureFlag: (key: string) => {
-    feature: IFeatureFlag<unknown> | undefined;
-    error: unknown;
-    setFeatureEnabled: (key: string, enabled: boolean) => void;
-};
-export declare const useFrameworkFeatureFlags: () => {
-    features: IFeatureFlag<unknown>[] | undefined;
-    error: unknown;
-    setFeatureEnabled: (key: string, enabled: boolean) => void;
-};

package/src/feature-flag/useFeatureFlags.ts

@@ -1,110 +0,0 @@
-import { useFramework } from '@equinor/fusion-framework-react';
-import { useAppModule } from '../useAppModule';
-import { useCallback, useMemo } from 'react';
-import { useObservableState } from '@equinor/fusion-observable/react';
-import {
-    FeatureFlagModule,
-    IFeatureFlagProvider,
-    IFeatureFlag,
-} from '@equinor/fusion-framework-module-feature-flag';
-import { EMPTY } from 'rxjs';
-
-/**
- * useFeatureflag
- *
- * Hook for getting single featureflag from app.
- *
- * @param key string
- */
-export const useFeatureFlag = (
-    key: string,
-): {
-    feature: IFeatureFlag<unknown> | undefined;
-    error: unknown;
-    setFeatureEnabled: (key: string, enabled: boolean) => void;
-} => {
-    const provider = useAppModule<FeatureFlagModule>('featureFlag');
-    const { value: feature, error } = useObservableState(_useFeatureFlag(key, provider));
-    const setFeatureEnabled = _useSetFeatureflag(provider);
-    return { feature, error, setFeatureEnabled };
-};
-
-/**
- * useFeatureflags
- *
- * Hook for getting all featureflags from app.
- *
- * @param key string
- */
-export const useFeatureFlags = (): {
-    features: IFeatureFlag<unknown>[] | undefined;
-    error: unknown;
-    setFeatureEnabled: (key: string, enabled: boolean) => void;
-} => {
-    const provider = useAppModule<FeatureFlagModule>('featureFlag');
-    const { value: features, error } = useObservableState(_useFeatureFlags(provider));
-    const setFeatureEnabled = _useSetFeatureflag(provider);
-    return { features, error, setFeatureEnabled };
-};
-
-/**
- * useFrameworkFeatureflag
- *
- * Hook for getting single featureflag from portal.
- *
- * @param key string
- */
-export const useFrameworkFeatureFlag = (
-    key: string,
-): {
-    feature: IFeatureFlag<unknown> | undefined;
-    error: unknown;
-    setFeatureEnabled: (key: string, enabled: boolean) => void;
-} => {
-    const provider = useFramework<[FeatureFlagModule]>().modules.featureFlag;
-    const { value: feature, error } = useObservableState(_useFeatureFlag(key, provider));
-    const setFeatureEnabled = _useSetFeatureflag(provider);
-    return { feature, error, setFeatureEnabled };
-};
-
-/**
- * useFrameworkFeatureflags
- *
- * Hook for getting all featureflags from portal.
- *
- * @param key string
- */
-export const useFrameworkFeatureFlags = (): {
-    features: IFeatureFlag<unknown>[] | undefined;
-    error: unknown;
-    setFeatureEnabled: (key: string, enabled: boolean) => void;
-} => {
-    const provider = useFramework<[FeatureFlagModule]>().modules.featureFlag;
-    const { value: features, error } = useObservableState(_useFeatureFlags(provider));
-    const setFeatureEnabled = _useSetFeatureflag(provider);
-    return { features, error, setFeatureEnabled };
-};
-
-const _useFeatureFlag = (key: string, provider?: IFeatureFlagProvider) => {
-    return useMemo(() => {
-        return provider ? provider.getFeature(key) : EMPTY;
-    }, [provider, key]);
-};
-
-const _useFeatureFlags = (provider?: IFeatureFlagProvider) => {
-    return useMemo(() => {
-        return provider ? provider.getFeatures((_) => true) : EMPTY;
-    }, [provider]);
-};
-
-const _useSetFeatureflag = (provider?: IFeatureFlagProvider) => {
-    return useCallback(
-        (key: string, enabled: boolean) => {
-            if (!provider) {
-                throw new Error('Missing IFeatureFlagProvider.');
-            }
-            provider.toggleFeature({ key, enabled });
-        },
-        [provider],
-    );
-};