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

package/src/feature-flag/useFeatures.ts

@@ -0,0 +1,77 @@
+import { useCallback, useMemo } from 'react';
+
+import { of } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+import {
+    type IFeatureFlagProvider,
+    type IFeatureFlag,
+} from '@equinor/fusion-framework-module-feature-flag';
+
+import { type FeatureSelectorFn } from '@equinor/fusion-framework-module-feature-flag/selectors';
+
+import { useObservableState } from '@equinor/fusion-observable/react';
+
+export interface UseFeaturesResult {
+    features: IFeatureFlag[];
+    error: unknown;
+    /**
+     * @param key - The key of the feature flag.
+     * @param enable - Optional provide new enabled state of the feature flag. _Defaults to inversion of current feature flag state_
+     */
+    toggleFeature: (key: string, enable?: boolean) => void;
+}
+
+/**
+ * Custom hook that provides access to the feature flags and their values.
+ *
+ * @param provider - The feature flag provider.
+ * @param selector - Optional function to filter the feature flags.
+ * @returns An object containing the features, any error that occurred while retrieving them, and a function to set the enabled state of a feature flag.
+ * @throws Error if the feature flag provider is missing.
+ */
+export const useFeatures = (
+    provider?: IFeatureFlagProvider | null,
+    selector?: FeatureSelectorFn,
+): UseFeaturesResult => {
+    /**
+     * Custom hook that provides access to the feature flags and their values.
+     *
+     * @returns An object containing the features and any error that occurred while retrieving them.
+     */
+    const { value: features, error } = useObservableState(
+        useMemo(() => {
+            if (provider) {
+                return provider?.features$.pipe(
+                    map((x) => {
+                        const values = Object.values(x);
+                        return selector ? values.filter(selector) : values;
+                    }),
+                );
+            }
+            return of([]);
+        }, [provider, selector]),
+        { initial: Object.values(provider?.features ?? {}) },
+    );
+    /**
+     * Sets the enabled state of a feature flag.
+     *
+     * @param key - The key of the feature flag.
+     * @param enable - The new enabled state of the feature flag.
+     * @throws Error if IFeatureFlagProvider is missing.
+     */
+    const toggleFeature = useCallback(
+        (key: string, enable?: boolean) => {
+            if (!provider) {
+                throw new Error('Missing IFeatureFlagProvider.');
+            }
+            const enabled = enable === undefined ? !provider.getFeature(key)?.enabled : enable;
+
+            provider.toggleFeature({ key, enabled });
+        },
+        [provider],
+    );
+    return { features, error, toggleFeature };
+};
+
+export default useFeatures;

package/src/feature-flag/useFrameworkFeature.ts

@@ -0,0 +1,22 @@
+import { type FeatureFlagModule } from '@equinor/fusion-framework-module-feature-flag';
+
+import { useFrameworkModule } from '../useFrameworkModule';
+import { useFeature } from './useFeature';
+
+/**
+ * Custom hook that allows accessing a framework feature based on a given feature flag key.
+ *
+ * @template T - The type of the feature.
+ * @param {string} key - The feature flag key.
+ * @returns {ReturnType<typeof useFeature<T>>} - The result of the feature hook.
+ * @throws {Error} - If feature flagging is not enabled in the framework.
+ */
+export const useFrameworkFeature = <T>(key: string): ReturnType<typeof useFeature<T>> => {
+    const provider = useFrameworkModule<FeatureFlagModule>('featureFlag');
+    if (!provider) {
+        throw Error('Feature flagging is not enabled in the framework');
+    }
+    return useFeature(provider, key);
+};
+
+export default useFrameworkFeature;

package/src/feature-flag/useFrameworkFeatures.ts

@@ -0,0 +1,20 @@
+import { type FeatureFlagModule } from '@equinor/fusion-framework-module-feature-flag';
+
+import { useFrameworkModule } from '../useFrameworkModule';
+import { useFeatures } from './useFeatures';
+
+/**
+ * Custom hook that provides access to framework-specific feature flags.
+ * It returns the result of the `useFeatures` hook from the `featureFlag` module.
+ * @returns The result of the `useFeatures` hook.
+ * @throws Error if feature flagging is not enabled in the framework.
+ */
+export const useFrameworkFeatures = (): ReturnType<typeof useFeatures> => {
+    const provider = useFrameworkModule<FeatureFlagModule>('featureFlag');
+    if (!provider) {
+        throw Error('Feature flagging is not enabled in the framework');
+    }
+    return useFeatures(provider);
+};
+
+export default useFrameworkFeatures;

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,15 @@
+/**
+ * [[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 { useFrameworkModule } from './useFrameworkModule';
+
+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/useFrameworkModule.ts

@@ -0,0 +1,31 @@
+import type { FusionModules, FusionModulesInstance } from '@equinor/fusion-framework';
+import { useFramework } from './useFramework';
+import { AnyModule, ModuleKey, ModuleType, ModuleTypes } from '@equinor/fusion-framework-module';
+
+/**
+ * Retrieves a module from the framework instance based on its name.
+ *
+ * @template TType - The type of the module to retrieve.
+ * @template TKey - The type of the module name.
+ * @param name - The name of the module to retrieve.
+ * @returns The requested module from the framework instance.
+ * @throws Error if the requested module is not included in the framework instance.
+ */
+export const useFrameworkModule = <
+    TType extends AnyModule | unknown = unknown,
+    TKey extends string = ModuleKey<ModuleTypes<FusionModules<[TType]>>>,
+>(
+    name: TKey,
+): TType extends AnyModule
+    ? ModuleType<TType> | undefined
+    : FusionModulesInstance[Extract<keyof FusionModulesInstance, TKey>] | undefined => {
+    const framework = useFramework();
+    // TODO
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    const module = framework.modules[name];
+    if (!module) {
+        console.warn(`the requested module [${module}] is not included in the framework instance`);
+    }
+    return module;
+};

package/src/version.ts

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

package/tsconfig.json

@@ -0,0 +1,41 @@
+{
+  "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/feature-flag"
+    },
+    {
+      "path": "../../modules/service-discovery"
+    },
+    {
+      "path": "../modules/context"
+    },
+    {
+      "path": "../modules/http"
+    },
+    {
+      "path": "../modules/signalr"
+    },
+  ],
+  "include": [
+    "src/**/*",
+  ],
+  "exclude": [
+    "node_modules",
+    "lib"
+  ]
+}