@equinor/fusion-framework-react-app 14.1.0 → 14.1.1

package/src/create-component.tsx

@@ -1,120 +0,0 @@
-import type React from 'react';
-import { lazy } from 'react';
-
-import { FrameworkProvider } from '@equinor/fusion-framework-react';
-import type { Fusion } from '@equinor/fusion-framework-react';
-
-import { type 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.configureHttpClient(
- *     '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);
-      // configureModules returns a generic modules instance; narrow it to the
-      // app-specific shape expected by consumers of this component.
-      const modules = (await init({
-        fusion,
-        env,
-      })) as unknown as AppModulesInstance;
-
-      modules.event.dispatchEvent('onReactAppLoaded', {
-        detail: { modules, fusion, env: env },
-        source: Component,
-      });
-      return {
-        default: () => (
-          <FrameworkProvider value={fusion}>
-            <AppModuleProvider value={modules}>
-              {/* TODO(#5083): tighten generics so Component no longer needs @ts-ignore */}
-              {/* 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; env: AppEnv },
-        React.ComponentType
-      >
-    >;
-  }
-}
-
-export default createComponent;

package/src/create-legacy-app.tsx

@@ -1,51 +0,0 @@
-import { Suspense, useMemo, type ElementType } 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 type { AppModule } from '@equinor/fusion-framework-module-app';
-
-/**
- * Creates a legacy wrapper component that bootstraps a Fusion React app within
- * the older Fusion CLI hosting model.
- *
- * @deprecated Prefer {@link renderApp} for new applications. This helper exists
- * only for backward-compatibility with apps that must run inside the legacy
- * Fusion CLI.
- *
- * @template TModules - Array of additional module types to initialise.
- * @param Component - The root React element to render.
- * @param configure - Optional callback to configure application modules.
- * @returns A React function component that initialises modules and renders the app.
- */
-export const createLegacyApp = <TModules extends Array<AnyModule>>(
-  Component: ElementType,
-  configure?: AppModuleInitiator<TModules>,
-) => {
-  const LegacyComponent = () => {
-    const fusion = useFramework<[AppModule]>();
-    const RenderComponent = useMemo(() => {
-      const creator = createComponent(Component, configure);
-      // @eikeland
-      // TODO(#5084): recheck when legacy fusion-cli is updated!
-      const appProvider = fusion.modules.app;
-      // Use the real app config/manifest once the provider has resolved them
-      if (appProvider?.current) {
-        const { config, manifest } = appProvider.current;
-        // Legacy app provider config/manifest predate the strict AppEnv shape; cast until legacy fusion-cli is updated.
-        return creator(fusion, { config, manifest } as unknown as AppEnv);
-      }
-      // No app provider available yet; pass an empty object cast to AppEnv as a placeholder.
-      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

@@ -1,20 +0,0 @@
-__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/enable-feature-flag.ts

@@ -1,79 +0,0 @@
-import type { AppConfigurator, IAppConfigurator } from '@equinor/fusion-framework-app';
-
-import {
-  enableFeatureFlagging,
-  type FeatureFlagBuilderCallback,
-  type IFeatureFlag,
-} from '@equinor/fusion-framework-module-feature-flag';
-
-import {
-  createLocalStoragePlugin,
-  createUrlPlugin,
-} from '@equinor/fusion-framework-module-feature-flag/plugins';
-
-/**
- * Enables the specified feature flags.
- *
- * @param configurator - The AppConfigurator instance.
- * @param flags - An array of feature flags to enable.
- */
-export function enableFeatureFlag(
-  configurator: IAppConfigurator,
-  flags: Array<IFeatureFlag<unknown> & { allowUrl?: boolean | undefined }>,
-): void;
-
-/**
- * Enables a feature flag by invoking the provided configurator and callback.
- *
- * @param configurator - The AppConfigurator responsible for configuring the feature flag.
- * @param cb - The FeatureFlagBuilderCallback to be executed for the feature flag.
- *
- * @remarks
- * Advance use __ONLY__
- */
-export function enableFeatureFlag(
-  configurator: IAppConfigurator,
-  cb: FeatureFlagBuilderCallback,
-): void;
-
-/**
- * Enables feature flagging based on the provided configurator and flags callback.
- * @param configurator The AppConfigurator instance.
- * @param flags_cb Optional flags callback that can be an array of feature flags or a callback function.
- */
-export function enableFeatureFlag(
-  configurator: IAppConfigurator,
-  flags_cb:
-    | Array<IFeatureFlag<unknown> & { allowUrl?: boolean | undefined }>
-    | FeatureFlagBuilderCallback,
-): void {
-  // Dispatch based on whether the caller passed an array of flags or a builder callback
-  switch (typeof flags_cb) {
-    case 'function': {
-      enableFeatureFlagging(configurator, flags_cb);
-      break;
-    }
-    case 'object': {
-      const urlFlags: IFeatureFlag[] = [];
-      // Split out flags marked allowUrl so they can be registered with the URL plugin
-      const localFlags = (flags_cb ?? []).map((flag) => {
-        const { allowUrl, ...localFlag } = flag;
-        // Track allowUrl flags separately; they still get registered locally too
-        if (allowUrl) {
-          urlFlags.push(flag);
-        }
-        return localFlag;
-      });
-      enableFeatureFlagging(configurator, async (builder) => {
-        // TODO(#5086): should unnamed application be allowed to use feature flags?
-        builder.addPlugin(
-          createLocalStoragePlugin(localFlags, {
-            name: (configurator as AppConfigurator).env?.manifest.appKey ?? undefined,
-          }),
-        );
-        builder.addPlugin(createUrlPlugin(urlFlags));
-      });
-      break;
-    }
-  }
-}

package/src/feature-flag/index.ts

@@ -1,17 +0,0 @@
-/**
- * Feature-flag sub-path entry-point.
- *
- * Provides the {@link enableFeatureFlag} configurator helper and the
- * {@link useFeature} hook for reading and toggling feature flags at runtime.
- *
- * @packageDocumentation
- */
-export {
-  IFeatureFlag,
-  IFeatureFlagProvider,
-  FeatureFlagModule,
-} from '@equinor/fusion-framework-module-feature-flag';
-
-export { enableFeatureFlag } from './enable-feature-flag';
-
-export { useFeature } from './useFeature';

package/src/feature-flag/useFeature.ts

@@ -1,90 +0,0 @@
-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,
-  IFeatureFlag,
-} from '@equinor/fusion-framework-module-feature-flag';
-import { findFeature } from '@equinor/fusion-framework-module-feature-flag/selectors';
-
-import { useAppModule } from '../useAppModule';
-
-/**
- * React hook for reading and toggling a single feature flag.
- *
- * Merges feature flags from both the framework and the application scope,
- * so framework-level flags are visible alongside app-specific ones.
- *
- * @template T - The type of the feature flag's value payload.
- * @param key - The unique key identifying the feature flag.
- * @returns An object with:
- *   - `feature` – the resolved {@link IFeatureFlag}, or `undefined` if not found.
- *   - `toggleFeature` – callback to toggle the flag; pass `true`/`false` to
- *     set explicitly, or omit to invert the current state.
- *   - `error` – any error from the feature-flag observable.
- *
- * @example
- * ```tsx
- * const { feature, toggleFeature } = useFeature('dark-mode');
- * return (
- *   <Switch checked={feature?.enabled} onChange={() => toggleFeature()} />
- * );
- * ```
- */
-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 }) => {
-        // Application feature flags override framework defaults with the same key.
-        const mergedFeatureFlags = { ...framework, ...app };
-        return mergedFeatureFlags;
-      }),
-    );
-  }, [appProvider, frameworkProvider]);
-
-  /** find feature flag by the provided key */
-  const feature$ = useMemo(
-    () =>
-      features$
-        // Narrow the merged stream down to the requested feature key.
-        .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

@@ -1,14 +0,0 @@
-/**
- * Framework sub-path entry-point.
- *
- * Re-exports framework-level hooks (as opposed to application-scoped ones)
- * for accessing the Fusion instance, current user, and HTTP clients.
- *
- * @packageDocumentation
- */
-export { useFramework } from '@equinor/fusion-framework-react';
-
-export {
-  useCurrentUser,
-  useHttpClient as useFrameworkHttpClient,
-} from '@equinor/fusion-framework-react/hooks';

package/src/framework/useFrameworkCurrentContext.ts

@@ -1,15 +0,0 @@
-import { useFramework } from '@equinor/fusion-framework-react';
-import { useCurrentContext } from '@equinor/fusion-framework-react-module-context';
-
-/**
- * React hook that returns the currently selected context from the
- * **framework-level** context module (as opposed to the application-scoped one).
- *
- * Use this when you need the portal/host context rather than the app's own
- * context provider.
- *
- * @returns The current framework context, or `undefined` if none is selected.
- */
-export const useFrameworkCurrentContext = () => useCurrentContext(useFramework().modules.context);
-
-export default useFrameworkCurrentContext;

package/src/help-center/README.md

@@ -1,21 +0,0 @@
-## Help center
-
-### useHelpCenter
-
-A hook to open the help center side sheet programmatically.
-
-```typescript
-const {
-  openHelp,
-  openArticle,
-  openFaqs,
-  openSearch,
-  openGovernance
-} = useHelpCenter();
-
-openHelp();
-openArticle('article-slug-name');
-openFaqs();
-openSearch('search-input');
-openGovernance();
-```

package/src/help-center/event-name.ts

@@ -1 +0,0 @@
-export const EVENT_NAME = '@Portal::FusionHelp::open';

package/src/help-center/index.ts

@@ -1,11 +0,0 @@
-import type { FrameworkEvent, FrameworkEventInit } from '@equinor/fusion-framework-module-event';
-import type { HelpCenterOpenEventDetail } from './useHelpCenter';
-
-export { useHelpCenter } from './useHelpCenter';
-export type { HelpCenterOpenEventDetail } from './useHelpCenter';
-
-declare module '@equinor/fusion-framework-module-event' {
-  interface FrameworkEventMap {
-    '@Portal::FusionHelp::open': FrameworkEvent<FrameworkEventInit<HelpCenterOpenEventDetail>>;
-  }
-}

package/src/help-center/useHelpCenter.ts

@@ -1,162 +0,0 @@
-import { useCallback } from 'react';
-import useAppModule from '../useAppModule';
-
-import { EVENT_NAME } from './event-name.js';
-
-type HelpCenterEventDetailBase<
-  T extends string,
-  V extends Record<string, unknown> = Record<string, unknown>,
-> = {
-  page: T;
-} & V;
-
-type OpenHelpDetail = HelpCenterEventDetailBase<'home'>;
-
-type OpenArticleDetail = HelpCenterEventDetailBase<
-  'article',
-  {
-    articleId: string;
-  }
->;
-
-type OpenFaqsDetail = HelpCenterEventDetailBase<'faqs'>;
-
-type OpenSearchDetail = HelpCenterEventDetailBase<
-  'search',
-  {
-    search: string;
-  }
->;
-
-type OpenGovernanceDetail = HelpCenterEventDetailBase<'governance'>;
-
-export type HelpCenterOpenEventDetail =
-  | OpenHelpDetail
-  | OpenArticleDetail
-  | OpenFaqsDetail
-  | OpenSearchDetail
-  | OpenGovernanceDetail;
-
-/**
- * Interface for requesting help features.
- */
-export interface HelpCenter {
-  /**
-   * Requesting the portal to open the help sidesheet on the normal page
-   */
-  openHelp(): void;
-
-  /**
-   * Requesting the portal to open the help sidesheet on the article page.
-   *
-   * @param {string} articleId - The articleId, slug or identifier to show.
-   */
-  openArticle(articleId: string): void;
-
-  /**
-   * Requesting the portal to open the help sidesheet on the FAQs page.
-   */
-  openFaqs(): void;
-
-  /**
-   * Requesting the portal to open the help sidesheet on the search page.
-   *
-   * @param {string} search - The search string.
-   */
-  openSearch(search: string): void;
-
-  /**
-   * Requesting the portal to open the help sidesheet on the governance tab.
-   */
-  openGovernance(): void;
-
-  /**
-   * Requesting the portal to open the help sidesheet on the release notes page.
-   */
-  openReleaseNotes(): void;
-}
-
-/**
- * React hook that returns an API for opening the portal help-center sidesheet.
- *
- * Each method dispatches a framework event that the portal shell listens for
- * and opens the corresponding help page.
- *
- * @returns A {@link HelpCenter} object with methods to open specific help pages.
- *
- * @example
- * ```tsx
- * const helpCenter = useHelpCenter();
- * <Button onClick={() => helpCenter.openFaqs()}>FAQs</Button>
- * ```
- */
-export const useHelpCenter = (): HelpCenter => {
-  const eventModule = useAppModule('event');
-
-  const openHelp = useCallback((): void => {
-    eventModule.dispatchEvent(EVENT_NAME, {
-      detail: {
-        page: 'home',
-      },
-    });
-  }, [eventModule]);
-
-  const openArticle = useCallback(
-    (articleId: string): void => {
-      eventModule.dispatchEvent(EVENT_NAME, {
-        detail: {
-          page: 'article',
-          articleId: articleId,
-        },
-      });
-    },
-    [eventModule],
-  );
-
-  const openFaqs = useCallback((): void => {
-    eventModule.dispatchEvent(EVENT_NAME, {
-      detail: {
-        page: 'faqs',
-      },
-    });
-  }, [eventModule]);
-
-  const openSearch = useCallback(
-    (search: string): void => {
-      eventModule.dispatchEvent(EVENT_NAME, {
-        detail: {
-          page: 'search',
-          search: search,
-        },
-      });
-    },
-    [eventModule],
-  );
-
-  const openGovernance = useCallback((): void => {
-    eventModule.dispatchEvent(EVENT_NAME, {
-      detail: {
-        page: 'governance',
-      },
-    });
-  }, [eventModule]);
-
-  const openReleaseNotes = useCallback((): void => {
-    eventModule.dispatchEvent(EVENT_NAME, {
-      detail: {
-        page: 'release-notes',
-      },
-    });
-  }, [eventModule]);
-
-  return {
-    openHelp,
-    openArticle,
-    openFaqs,
-    openSearch,
-    openGovernance,
-    openReleaseNotes,
-  };
-};
-
-export default useHelpCenter;

package/src/http/index.ts

@@ -1,10 +0,0 @@
-/**
- * HTTP sub-path entry-point.
- *
- * Re-exports hooks from `@equinor/fusion-framework-react-module-http`,
- * including {@link useHttpClient} for making authenticated HTTP requests
- * from within a Fusion application.
- *
- * @packageDocumentation
- */
-export * from '@equinor/fusion-framework-react-module-http';

package/src/http/selectors.ts

@@ -1,9 +0,0 @@
-/**
- * HTTP selector utilities.
- *
- * Re-exports response-selector helpers (e.g. JSON, blob, text selectors)
- * from `@equinor/fusion-framework-module-http/selectors`.
- *
- * @packageDocumentation
- */
-export * from '@equinor/fusion-framework-module-http/selectors';

package/src/index.ts

@@ -1,46 +0,0 @@
-/**
- * @packageDocumentation
- *
- * React bindings for building Fusion Framework applications.
- *
- * Provides the main entry-point helpers (`renderApp`, `createComponent`, `makeComponent`)
- * plus React hooks for accessing framework modules (HTTP, auth, context, navigation, etc.)
- * from within a Fusion app.
- *
- * @remarks
- * This is the primary package application developers depend on when building
- * React-based Fusion apps. It re-exports core types from `@equinor/fusion-framework-app`
- * and adds React-specific rendering, hooks, and sub-path entry-points for optional
- * modules such as MSAL, feature flags, bookmarks, analytics, and settings.
- */
-
-export type {
-  AppConfig,
-  AppEnv,
-  AppModuleInitiator,
-  AppModules,
-  AppModulesInstance,
-  AppRenderFn,
-  IAppConfigurator,
-} from '@equinor/fusion-framework-app';
-
-export type { Fusion } from '@equinor/fusion-framework-react';
-
-export { AppManifest } from '@equinor/fusion-framework-module-app';
-
-export { useAppModule } from './useAppModule';
-export { useAppModules } from './useAppModules';
-export { useAppEnvironmentVariables } from './useAppEnvironmentVariables';
-
-export { makeComponent, ComponentRenderArgs } from './make-component';
-
-export { createLegacyApp } from './create-legacy-app';
-
-export { createComponent } from './create-component';
-export { renderApp } from './render-app';
-export { renderComponent } from './render-component';
-
-export type { ComponentRenderer } from './create-component';
-export type { RenderTeardown } from './render-component';
-
-export { default } from './render-app';