@equinor/fusion-framework-react-app 9.0.0-next.0 → 9.0.1

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

@@ -0,0 +1 @@
+export { useTrackFeature } from './useTrackFeature';

package/dist/types/analytics/useTrackFeature.d.ts

@@ -0,0 +1,5 @@
+import type { AnyValueMap } from '@equinor/fusion-framework-module-analytics';
+/**
+ * Hook for using analytics module configured in the framework.
+ */
+export declare const useTrackFeature: () => (name: string, data?: AnyValueMap) => void;

package/dist/types/apploader/Apploader.d.ts

@@ -1,4 +1,3 @@
-import { type ReactElement } from 'react';
 export type ApploaderProps = {
     appKey: string;
 };
@@ -10,10 +9,10 @@ export type ApploaderProps = {
  *
  * @param { ApploaderProps } props - The props for the component.
  * @param { string } props.appKey - The key of the Fusion app to load and mount.
- * @returns { ReactElement } The rendered component, which displays loading, error, or the embedded app.
+ * @returns { JSX.Element } The rendered component, which displays loading, error, or the embedded app.
  *
  * @example
  * <Apploader appKey="my-app" />
  */
-export declare const Apploader: ({ appKey }: ApploaderProps) => ReactElement;
+export declare const Apploader: ({ appKey }: ApploaderProps) => JSX.Element;
 export default Apploader;

package/dist/types/index.d.ts

@@ -1,14 +1,12 @@
 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 { createComponent } from './create-component';
 export { renderComponent } from './render-component';
 export type { ComponentRenderer } from './create-component';
-export type { RenderTeardown } from './render-component';
 export { default } from './render-app';

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

@@ -1,12 +1,6 @@
 import { createComponent } from './create-component';
 import { type RenderTeardown } from './render-component';
 import type { ComponentRenderArgs } from './create-component';
-/**
- * Creates a render function for an app component.
- * Uses React 18's createRoot API via renderComponent.
- *
- * @param componentArgs - Arguments to pass to createComponent
- * @returns A function that renders the app into a DOM element
- */
+/** @deprecated */
 export declare const renderApp: (...componentArgs: Parameters<typeof createComponent>) => (el: HTMLElement, args: ComponentRenderArgs) => RenderTeardown;
 export default renderApp;

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

@@ -1,11 +1,5 @@
 import type { ComponentRenderArgs, ComponentRenderer } from './create-component';
 export type RenderTeardown = VoidFunction;
-/**
- * Creates a render function for a component renderer.
- * Uses React 18's createRoot API instead of the deprecated ReactDOM.render.
- *
- * @param renderer - A function that creates a component from fusion and env
- * @returns A function that renders the component into a DOM element
- */
+/** @deprecated */
 export declare const renderComponent: (renderer: ComponentRenderer) => (el: HTMLElement, args: ComponentRenderArgs) => RenderTeardown;
 export default renderComponent;

package/dist/types/version.d.ts

@@ -1 +1 @@
-export declare const version = "9.0.0-next.0";
+export declare const version = "9.0.1";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/fusion-framework-react-app",
-  "version": "9.0.0-next.0",
+  "version": "9.0.1",
   "description": "",
   "main": "./dist/esm/index.js",
   "types": "./dist/types/index.d.ts",
@@ -9,6 +9,10 @@
       "types": "./dist/types/index.d.ts",
       "import": "./dist/esm/index.js"
     },
+    "./analytics": {
+      "types": "./dist/types/analytics/index.d.ts",
+      "import": "./dist/esm/analytics/index.js"
+    },
     "./apploader": {
       "types": "./dist/types/apploader/index.d.ts",
       "import": "./dist/esm/apploader/index.js"
@@ -37,10 +41,6 @@
       "types": "./dist/types/http/index.d.ts",
       "import": "./dist/esm/http/index.js"
     },
-    "./http/selectors": {
-      "types": "./dist/types/http/selectors.d.ts",
-      "import": "./dist/esm/http/selectors.js"
-    },
     "./msal": {
       "types": "./dist/types/msal/index.d.ts",
       "import": "./dist/esm/msal/index.js"
@@ -63,6 +63,9 @@
       ".": [
         "dist/types/index.d.ts"
       ],
+      "analytics": [
+        "dist/types/analytics/index.d.ts"
+      ],
       "apploader": [
         "dist/types/apploader/index.d.ts"
       ],
@@ -110,40 +113,36 @@
     "directory": "packages/react"
   },
   "dependencies": {
-    "@equinor/fusion-framework-app": "^10.1.3-next.0",
-    "@equinor/fusion-framework-module": "^5.0.6-next.0",
-    "@equinor/fusion-framework-module-app": "^7.2.0-next.0",
-    "@equinor/fusion-framework-module-http": "^7.0.6-next.0",
-    "@equinor/fusion-framework-react": "^8.0.0-next.0",
-    "@equinor/fusion-framework-module-navigation": "^7.0.0-next.1",
-    "@equinor/fusion-framework-react-module": "^4.0.0-next.0",
-    "@equinor/fusion-framework-react-module-http": "^11.0.0-next.0"
+    "@equinor/fusion-framework-app": "10.4.2",
+    "@equinor/fusion-framework-module": "5.0.5",
+    "@equinor/fusion-framework-module-navigation": "6.0.0",
+    "@equinor/fusion-framework-react": "7.4.19",
+    "@equinor/fusion-framework-module-app": "7.4.0",
+    "@equinor/fusion-framework-react-module": "3.1.13",
+    "@equinor/fusion-framework-react-module-http": "10.0.0"
   },
   "devDependencies": {
-    "@testing-library/react": "^16.0.0",
-    "@types/react": "^19.2.7",
-    "@types/react-dom": "^19.2.3",
-    "happy-dom": "^20.0.0",
-    "react": "^19.2.1",
-    "react-dom": "^19.2.1",
+    "@types/react": "^18.2.50",
+    "@types/react-dom": "^18.2.7",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "rxjs": "^7.8.1",
     "typescript": "^5.8.2",
-    "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^3.2.4",
-    "@equinor/fusion-framework-module-event": "^4.4.1-next.0",
-    "@equinor/fusion-framework-module-feature-flag": "^2.0.0-next.0",
-    "@equinor/fusion-framework-module-msal": "^7.0.0-next.0",
-    "@equinor/fusion-framework-module-ag-grid": "^34.4.1-next.0",
-    "@equinor/fusion-framework-react-module-bookmark": "^6.0.0-next.0",
-    "@equinor/fusion-observable": "^9.0.0-next.0",
-    "@equinor/fusion-framework-react-module-context": "^7.0.0-next.0"
+    "@equinor/fusion-framework-module-ag-grid": "34.4.0",
+    "@equinor/fusion-framework-module-analytics": "0.2.3",
+    "@equinor/fusion-framework-module-event": "5.0.0",
+    "@equinor/fusion-framework-module-feature-flag": "1.1.27",
+    "@equinor/fusion-framework-module-msal": "7.0.0",
+    "@equinor/fusion-framework-react-module-bookmark": "5.0.1",
+    "@equinor/fusion-framework-react-module-context": "6.2.33",
+    "@equinor/fusion-observable": "8.5.7"
   },
   "peerDependencies": {
-    "@types/react": "^18.0.0 || ^19.0.0",
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0",
+    "@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": "^7.0.0-next.0"
+    "@equinor/fusion-framework-module-msal": "^7.0.0"
   },
   "peerDependenciesMeta": {
     "@equinor/fusion-framework-react-module-ag-grid": {
@@ -175,7 +174,6 @@
     }
   },
   "scripts": {
-    "build": "tsc -b",
-    "test": "vitest --run"
+    "build": "tsc -b"
   }
 }

package/src/analytics/README.md

@@ -0,0 +1,41 @@
+## Analytics
+
+The Fusion Framework Analytics Module provides an unified way to track analytics.
+
+This is a hook to manually send features to track.
+
+This hook can be used by app teams wanting to track a specific feature they use.
+
+### useTrackFeature
+
+A hook to send feature used.
+
+```typescript
+const trackFeature = useTrackFeature();
+
+trackFeature('foo');
+```
+
+```typescript
+const SomeComponent = () => {
+  const trackFeature = useTrackFeature();
+
+  // Tracks when button is clicked.
+  const handleOnClick = useCallback(() => {
+    trackFeature('button-clicked');
+  }, [trackFeature]);
+
+  // Triggers when the component is loaded.
+  useEffect(() => {
+    trackFeature('SomeComponent loaded');
+
+    // Send additional data
+    trackFeature('some feature happened', {
+      extra: 'data',
+      foo: 'bar',
+    });
+  }, [trackFeature]);
+
+  return <button onClick={handleOnClick}>Click me</button>;
+};
+```

package/src/analytics/index.ts

@@ -0,0 +1 @@
+export { useTrackFeature } from './useTrackFeature';

package/src/analytics/useTrackFeature.ts

@@ -0,0 +1,56 @@
+import { useFrameworkModule } from '@equinor/fusion-framework-react';
+import type { AppModule } from '@equinor/fusion-framework-module-app';
+import type { AnalyticsModule, AnyValueMap } from '@equinor/fusion-framework-module-analytics';
+import { useCallback } from 'react';
+
+/**
+ * Hook for using analytics module configured in the framework.
+ */
+export const useTrackFeature = () => {
+  const analyticsProvider = useFrameworkModule<AnalyticsModule>('analytics');
+  const appProvider = useFrameworkModule<AppModule>('app');
+  const contextProvider = useFrameworkModule('context');
+  const telemetryProvider = useFrameworkModule('telemetry');
+
+  /**
+   * Tracks a analytics event.
+   *
+   * Can be used both in useCallback or useEffects - see README.md for examples.
+   *
+   * @param name - The feature to track
+   * @param data - Optional map of additional key-value pairs to include with the analytics event
+   */
+  const trackFeature = useCallback(
+    (name: string, data?: AnyValueMap) => {
+      if (!analyticsProvider) {
+        telemetryProvider?.trackException({
+          name: 'AnalyticsProviderNotFound',
+          exception: new Error(`Analytics provider not found`),
+        });
+      }
+
+      analyticsProvider?.trackAnalytic({
+        name: 'app-feature',
+        value: {
+          feature: name,
+          data,
+        },
+        attributes: {
+          appKey: appProvider?.current?.appKey,
+          context: contextProvider?.currentContext
+            ? {
+                id: contextProvider.currentContext.id,
+                externalId: contextProvider.currentContext.externalId,
+                title: contextProvider.currentContext.title,
+                type: contextProvider.currentContext.type.id,
+                source: contextProvider.currentContext.source,
+              }
+            : undefined,
+        },
+      });
+    },
+    [analyticsProvider, appProvider, contextProvider, telemetryProvider],
+  );
+
+  return trackFeature;
+};

package/src/apploader/Apploader.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, type ReactElement } from 'react';
+import { useEffect, useRef } from 'react';
 import { useApploader } from './useApploader';
 
 export type ApploaderProps = {
@@ -13,12 +13,12 @@ export type ApploaderProps = {
  *
  * @param { ApploaderProps } props - The props for the component.
  * @param { string } props.appKey - The key of the Fusion app to load and mount.
- * @returns { ReactElement } The rendered component, which displays loading, error, or the embedded app.
+ * @returns { JSX.Element } The rendered component, which displays loading, error, or the embedded app.
  *
  * @example
  * <Apploader appKey="my-app" />
  */
-export const Apploader = ({ appKey }: ApploaderProps): ReactElement => {
+export const Apploader = ({ appKey }: ApploaderProps): JSX.Element => {
   const refWrapp = useRef<HTMLDivElement | null>(null);
   const { loading, error, appRef } = useApploader({ appKey });
 

package/src/index.ts

@@ -8,8 +8,6 @@ export type {
   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';
@@ -20,11 +18,11 @@ export { makeComponent, ComponentRenderArgs } from './make-component';
 
 export { createLegacyApp } from './create-legacy-app';
 
-export { createComponent } from './create-component';
+// TODO deprecate
 export { renderApp } from './render-app';
+export { createComponent } from './create-component';
 export { renderComponent } from './render-component';
 
 export type { ComponentRenderer } from './create-component';
-export type { RenderTeardown } from './render-component';
 
 export { default } from './render-app';

package/src/make-component.tsx

@@ -55,7 +55,7 @@ export const makeComponent = <
 ): React.LazyExoticComponent<React.ComponentType> =>
   lazy(async () => {
     const init = configureModules<TModules, TRef, TEnv>(configure);
-    const modules = await init(args);
+    const modules = (await init(args)) as unknown as AppModulesInstance;
 
     const { fusion } = args;
 

package/src/render-app.ts

@@ -3,13 +3,7 @@ import { renderComponent, type RenderTeardown } from './render-component';
 
 import type { ComponentRenderArgs } from './create-component';
 
-/**
- * Creates a render function for an app component.
- * Uses React 18's createRoot API via renderComponent.
- *
- * @param componentArgs - Arguments to pass to createComponent
- * @returns A function that renders the app into a DOM element
- */
+/** @deprecated */
 export const renderApp = (...componentArgs: Parameters<typeof createComponent>) => {
   const renderer = renderComponent(createComponent(...componentArgs));
   return (el: HTMLElement, args: ComponentRenderArgs): RenderTeardown => {

package/src/render-component.tsx

@@ -1,43 +1,46 @@
 import { Suspense, StrictMode } from 'react';
 import type { FunctionComponent } from 'react';
-import { createRoot, type Root } from 'react-dom/client';
 import type { ComponentRenderArgs, ComponentRenderer } from './create-component';
+import ReactDOM from 'react-dom';
 
 export type RenderTeardown = VoidFunction;
 
-/**
- * Renders a React component into a DOM element using React 18's createRoot API.
- *
- * @param el - The DOM element to render into
- * @param Component - The React component to render
- * @returns A teardown function that unmounts the component
- */
+/** @deprecated */
+export const renderComponent = (renderer: ComponentRenderer) => {
+  return (el: HTMLElement, args: ComponentRenderArgs): RenderTeardown => {
+    const Component = renderer(args.fusion, args.env);
+    return render(el, Component);
+  };
+};
+
 const render = (el: Element, Component: FunctionComponent): RenderTeardown => {
-  const root: Root = createRoot(el);
-  root.render(
+  // eslint-disable-next-line react/no-deprecated
+  ReactDOM.render(
     <StrictMode>
       <Suspense fallback={<p>loading app</p>}>
         <Component />
       </Suspense>
     </StrictMode>,
+    el,
   );
   return () => {
-    root.unmount();
+    // eslint-disable-next-line react/no-deprecated
+    ReactDOM.unmountComponentAtNode(el);
   };
 };
 
-/**
- * Creates a render function for a component renderer.
- * Uses React 18's createRoot API instead of the deprecated ReactDOM.render.
- *
- * @param renderer - A function that creates a component from fusion and env
- * @returns A function that renders the component into a DOM element
- */
-export const renderComponent = (renderer: ComponentRenderer) => {
-  return (el: HTMLElement, args: ComponentRenderArgs): RenderTeardown => {
-    const Component = renderer(args.fusion, args.env);
-    return render(el, Component);
-  };
-};
+// const render = (el: Element, Component: FunctionComponent): RenderTeardown => {
+//     const root = createRoot(el);
+//     root.render(
+//         <StrictMode>
+//             <Suspense fallback={<p>loading app</p>}>
+//                 <Component />
+//             </Suspense>
+//         </StrictMode>
+//     );
+//     return () => {
+//         root.unmount();
+//     };
+// };
 
 export default renderComponent;

package/src/useAppModules.ts

@@ -1,4 +1,4 @@
-import type { AppModules, AppModulesInstance } from '@equinor/fusion-framework-app';
+import type { AppModulesInstance } from '@equinor/fusion-framework-app';
 import type { AnyModule } from '@equinor/fusion-framework-module';
 import { useModules } from '@equinor/fusion-framework-react-module';
 
@@ -10,6 +10,6 @@ import { useModules } from '@equinor/fusion-framework-react-module';
  */
 export const useAppModules = <
   T extends Array<AnyModule> | unknown = unknown,
->(): AppModulesInstance<T> => useModules<AppModules<T>>() as AppModulesInstance<T>;
+>(): AppModulesInstance<T> => useModules<AppModulesInstance<T>>();
 
 export default useAppModules;

package/src/version.ts

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

package/tsconfig.json

@@ -15,6 +15,9 @@
     {
       "path": "../framework"
     },
+    {
+      "path": "../../modules/analytics"
+    },
     {
       "path": "../../modules/ag-grid"
     },
@@ -35,5 +38,5 @@
     }
   ],
   "include": ["src/**/*"],
-  "exclude": ["node_modules", "lib", "src/__tests__/**/*"]
+  "exclude": ["node_modules", "lib"]
 }

package/dist/esm/http/selectors.js

@@ -1,2 +0,0 @@
-export * from '@equinor/fusion-framework-module-http/selectors';
-//# sourceMappingURL=selectors.js.map

package/dist/esm/http/selectors.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"selectors.js","sourceRoot":"","sources":["../../../src/http/selectors.ts"],"names":[],"mappings":"AAAA,cAAc,iDAAiD,CAAC"}

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

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

package/src/__tests__/render-app.test.tsx

@@ -1,113 +0,0 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import type { ComponentRenderArgs } from '../create-component';
-import type { Fusion } from '@equinor/fusion-framework-react';
-import type { AppEnv } from '@equinor/fusion-framework-app';
-
-// Mock dependencies before importing
-vi.mock('../create-component', () => ({
-  createComponent: vi.fn(),
-}));
-
-vi.mock('../render-component', () => ({
-  renderComponent: vi.fn(),
-}));
-
-import { renderApp } from '../render-app';
-import { createComponent } from '../create-component';
-import { renderComponent } from '../render-component';
-
-describe('renderApp', () => {
-  let mockFusion: Fusion;
-  let mockEnv: AppEnv;
-  let mockElement: HTMLElement;
-  let mockTeardown: () => void;
-  let mockComponentRenderer: ReturnType<typeof createComponent>;
-  let mockRenderFunction: ReturnType<typeof renderComponent>;
-
-  beforeEach(() => {
-    // Setup mock data
-    mockFusion = {} as Fusion;
-    mockEnv = {} as AppEnv;
-    mockElement = document.createElement('div');
-    mockTeardown = vi.fn();
-
-    // Create a mock component renderer
-    // createComponent returns a ComponentRenderer function: (fusion, env) => React.LazyExoticComponent
-    mockComponentRenderer = vi.fn() as unknown as ReturnType<typeof createComponent>;
-
-    // Create a mock render function
-    mockRenderFunction = vi.fn(() => mockTeardown) as unknown as ReturnType<typeof renderComponent>;
-
-    // Mock renderComponent to return our mock render function
-    vi.mocked(renderComponent).mockReturnValue(mockRenderFunction);
-
-    // Mock createComponent to return our mock component renderer
-    vi.mocked(createComponent).mockReturnValue(mockComponentRenderer);
-  });
-
-  it('should create a render function that calls createComponent with provided arguments', () => {
-    const TestComponent = () => <div>Test</div>;
-    const mockConfigure = vi.fn();
-
-    renderApp(TestComponent, mockConfigure);
-
-    expect(createComponent).toHaveBeenCalledWith(TestComponent, mockConfigure);
-  });
-
-  it('should create a render function that uses renderComponent with the component renderer', () => {
-    const TestComponent = () => <div>Test</div>;
-    const appRender = renderApp(TestComponent);
-
-    // Call the render function
-    const teardown = appRender(mockElement, { fusion: mockFusion, env: mockEnv });
-
-    expect(renderComponent).toHaveBeenCalledWith(mockComponentRenderer);
-    expect(mockRenderFunction).toHaveBeenCalledWith(mockElement, {
-      fusion: mockFusion,
-      env: mockEnv,
-    });
-    expect(teardown).toBe(mockTeardown);
-  });
-
-  it('should return a teardown function that unmounts the component', () => {
-    const TestComponent = () => <div>Test</div>;
-    const appRender = renderApp(TestComponent);
-
-    const teardown = appRender(mockElement, { fusion: mockFusion, env: mockEnv });
-
-    expect(typeof teardown).toBe('function');
-    teardown();
-    expect(mockTeardown).toHaveBeenCalled();
-  });
-
-  it('should work without a configure callback', () => {
-    vi.clearAllMocks();
-    const TestComponent = () => <div>Test</div>;
-    const appRender = renderApp(TestComponent);
-
-    // When no configure callback is provided, it may be called with just the component
-    // or with undefined as the second parameter
-    expect(createComponent).toHaveBeenCalled();
-    const calls = vi.mocked(createComponent).mock.calls;
-    expect(calls[calls.length - 1][0]).toBe(TestComponent);
-    expect(calls[calls.length - 1][1]).toBeUndefined();
-
-    const teardown = appRender(mockElement, { fusion: mockFusion, env: mockEnv });
-
-    expect(teardown).toBe(mockTeardown);
-  });
-
-  it('should pass component renderer args correctly to renderComponent', () => {
-    const TestComponent = () => <div>Test</div>;
-    const appRender = renderApp(TestComponent);
-
-    const args: ComponentRenderArgs = {
-      fusion: mockFusion,
-      env: mockEnv,
-    };
-
-    appRender(mockElement, args);
-
-    expect(mockRenderFunction).toHaveBeenCalledWith(mockElement, args);
-  });
-});

package/src/http/selectors.ts

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

package/vitest.config.ts

@@ -1,20 +0,0 @@
-import { defineProject } from 'vitest/config';
-import tsconfigPaths from 'vite-tsconfig-paths';
-import { fileURLToPath } from 'node:url';
-import { resolve } from 'node:path';
-
-import { name, version } from './package.json';
-
-export default defineProject({
-  plugins: [
-    tsconfigPaths({
-      root: resolve(fileURLToPath(new URL('../../..', import.meta.url))),
-      projects: [resolve(fileURLToPath(new URL('.', import.meta.url)), 'tsconfig.json')],
-    }),
-  ],
-  test: {
-    include: ['src/__tests__/**'],
-    name: `${name}@${version}`,
-    environment: 'happy-dom',
-  },
-});