Update AG Grid Integration and Documentation for Fusion Framework (#2802

)

* feat: enhance AG Grid module with detailed documentation, refactor dependencies, and add theme customization functionality

* feat: add new AG Grid integration package for Fusion Framework React with installation and configuration instructions

* feat: update AG Grid integration to use @equinor/fusion-framework-react-ag-grid, modify imports, and add app manifest configuration

* chore: update lock file

.changeset/funny-bikes-provide.md

@@ -0,0 +1,19 @@
+---
+'@equinor/fusion-framework-module-ag-grid': patch
+---
+
+---
+
+## "@equinor/fusion-framework-module-ag-grid": patch
+
+**@equinor/fusion-framework-module-ag-grid:**
+
+- Updated `README.md` with detailed documentation for the AG Grid React for Fusion Framework, including installation, configuration, theming, customizing a grid instance, and upgrading from version 32 to 33.
+- Refactor: `package.json` to include peer dependencies for `ag-grid-community` and `ag-grid-enterprise`.
+- Fixed: `AgGridConfigurator` class to setting the license key on initialization.
+- Refactor: import statements to use `ag-grid-enterprise` and `ag-grid-community`.
+- Feature: Added `createThemeFromExistingTheme` function to decontruct an existing theme and create a new theme _(AG-Grid type checks with `instanceof` which will break since the parent scope has another instance than the consumer)._
+
+We have chose to only `patch` this release, to conform with the AG Grid versioning scheme, event tho there are some breaking changes. This is because the breaking changes are not related to the API of the module itself, but rather to the dependencies of the module.
+
+- `@equinor/fusion-framework-module-ag-grid/enterprise` and `@equinor/fusion-framework-module-ag-grid/community` have been removed. Instead, the module now relies on the `ag-grid-enterprise` and `ag-grid-community` packages as peer dependencies. This means that you will have to install these packages yourself.

.changeset/initial-release-ag-grid.md

@@ -0,0 +1,32 @@
+---
+"@equinor/fusion-framework-react-ag-grid": major
+---
+
+Created a new package for AG Grid integration with Fusion Framework React. 
+This package is a wrapper for `ag-grid-react`, `ag-grid-community` and `ag-grid-enterprise` packages.
+
+## Features
+
+- Consolidated AG Grid dependencies into a single package.
+- Method for enabling Fusion Framework AG Grid module
+- Utilities for extending Fusion themes
+
+## Getting started
+
+To install the package, run:
+
+```sh
+pnpm i @equinor/fusion-framework-react-ag-grid
+```
+
+To enable the AG Grid module, add the following to your `config.ts`:
+
+```ts
+import { enableAgGrid } from '@equinor/fusion-framework-react-ag-grid';
+
+const configure = (config: Config) => {
+  enableAgGrid(config);
+};
+```
+
+See more in [packages/react/ag-grid/README.md](https://github.com/equinor/fusion-framework/blob/main/packages/react/ag-grid/README.md)

.changeset/seven-pans-watch.md

@@ -0,0 +1,14 @@
+---
+'@equinor/fusion-framework-cookbook-app-react-ag-grid': patch
+---
+
+---
+
+## "@equinor/fusion-framework-cookbook-app-react-ag-grid": patch
+
+Updated the package to use `@equinor/fusion-framework-react-ag-grid` instead of `@equinor/fusion-framework-module-ag-grid`.
+
+- Replaced `@equinor/fusion-framework-module-ag-grid` with `@equinor/fusion-framework-react-ag-grid` in `package.json`.
+- Updated imports in `App.tsx` and `config.ts` to use `@equinor/fusion-framework-react-ag-grid`.
+- Modified `tsconfig.json` to use `react-jsx` instead of `react-jsxdev`.
+- Added `app.manifest.config.ts` to define the app manifest.

cookbooks/app-react-ag-grid/app.manifest.config.ts

@@ -0,0 +1,3 @@
+import { defineAppManifest } from '@equinor/fusion-framework-cli';
+
+export default defineAppManifest(async () => ({ appKey: 'cookbook-ag-grid' }));

cookbooks/app-react-ag-grid/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@equinor/fusion-framework-cookbook-app-react-ag-grid",
-    "version": "0.6.2",
+    "version": "0.6.2-17",
     "description": "Setup AG-grid with fusion-framework",
     "private": true,
     "type": "module",
@@ -14,11 +14,10 @@
     "license": "ISC",
     "dependencies": {
         "@equinor/fusion-framework-cli": "workspace:^",
-        "@equinor/fusion-framework-module-ag-grid": "workspace:^",
         "@equinor/fusion-framework-react-app": "workspace:^",
+        "@equinor/fusion-framework-react-ag-grid": "workspace:*",
         "@types/react": "^18.2.50",
         "@types/react-dom": "^18.2.7",
-        "ag-grid-react": "^33.0.3",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "typescript": "^5.5.4"

cookbooks/app-react-ag-grid/src/App.tsx

@@ -1,8 +1,7 @@
 // Import necessary hooks and components from React and Ag-Grid
 import { useCallback, useMemo, useState } from 'react';
-import { AgGridReact } from 'ag-grid-react';
-import { type ColDef } from '@equinor/fusion-framework-module-ag-grid/community';
-import { createTheme } from '@equinor/fusion-framework-module-ag-grid/themes';
+import { AgGridReact } from '@equinor/fusion-framework-react-ag-grid';
+import { createTheme, type ColDef } from '@equinor/fusion-framework-react-ag-grid/community';
 
 // Import custom table configuration
 import { defaultColDef, sideBar } from './table';
@@ -64,6 +63,7 @@ export const App = (): JSX.Element => {
             }),
         [],
     );
+    customTheme;
 
     return (
         <>
@@ -73,8 +73,8 @@ export const App = (): JSX.Element => {
             </div>
             <div style={gridStyle}>
                 <AgGridReact
-                    theme={customTheme}
                     rowData={rowData}
+                    // theme={customTheme}
                     columnDefs={columnDefs}
                     defaultColDef={defaultColDef}
                     sideBar={sideBar}

cookbooks/app-react-ag-grid/src/config.ts

@@ -1,13 +1,13 @@
 import type { AppModuleInitiator } from '@equinor/fusion-framework-react-app';
-import { enableAgGrid } from '@equinor/fusion-framework-module-ag-grid';
-import { ClientSideRowModelModule } from '@equinor/fusion-framework-module-ag-grid/community';
+import { enableAgGrid } from '@equinor/fusion-framework-react-ag-grid';
+import { ClientSideRowModelModule } from '@equinor/fusion-framework-react-ag-grid/community';
 import {
     ClipboardModule,
     ColumnsToolPanelModule,
     ExcelExportModule,
     FiltersToolPanelModule,
     MenuModule,
-} from '@equinor/fusion-framework-module-ag-grid/enterprise';
+} from '@equinor/fusion-framework-react-ag-grid/enterprise';
 
 export const configure: AppModuleInitiator = (configurator, { env }) => {
     /** print render environment arguments */
@@ -22,11 +22,11 @@ export const configure: AppModuleInitiator = (configurator, { env }) => {
             ExcelExportModule,
             ClipboardModule,
         ]);
-        builder.setTheme((theme) => {
-            return theme.withParams({
-                backgroundColor: 'blue',
-            });
-        });
+        // builder.setTheme((theme) => {
+        //     return theme.withParams({
+        //         backgroundColor: 'blue',
+        //     });
+        // });
     });
 
     /** callback when configurations is created */

cookbooks/app-react-ag-grid/tsconfig.json

@@ -12,7 +12,7 @@
     "esModuleInterop": true,
     "rootDir": "src",
 
-    "jsx": "react-jsxdev",
+    "jsx": "react-jsx",
   },
   "include": [
     "src/**/*"

packages/modules/ag-grid/README.md

@@ -4,27 +4,23 @@ This module provides an agnostic wrapper around the [AG Grid](https://www.ag-gri
 
 The intention of this module is to provide a consistent way to configure AG Grid and to ensure that the correct version of AG Grid is used.
 
+> [!TIP]
+> This is the base package for AG Grid in Fusion, which means that `ag-grid-enterprise` and `ag-grid-community` is required to be installed. This package should be consumed by the host (portal) which configures AG Grid for the applications. See [`@equinor/fusion-framework-module-ag-grid`](https://www.npmjs.com/package/@equinor/fusion-framework-react-ag-grid) for usage in applications.
+
 ## Installation
 
 ```sh
 npm i @equinor/fusion-framework-module-ag-grid
-npm i ag-grid-react // or the framework of your choice
 ```
 
 > [!WARNING]
 > Fusion will try to keep the semantic major and minor versions in sync with AG Grid, but there might be cases where this is not possible. So `@equinor/fusion-framework-module-ag-grid` and `ag-grid` might have different __patch__ versions.
->
-> It is possible to install `ag-grid-enterprise` and `ag-grid-community` if needed, but it is recommended to use the modules provided by this package.
 
 > [!IMPORTANT]
 > Before upgrading to AG Grid 33, please read remove all previous references to `@equinor/fusion-react-ag-grid-styles`, `@ag-grid-community/*` and `@ag-grid-enterprise/*` from your project dependencies.
 
 ## Configuration
 
-> [!IMPORTANT]
-> Since ag-grid is re-exported from this package, node has a hard time resolving the correct types.
-> The solution for now is to have `"moduleResolution": "bundler"` in your `tsconfig.json`.
-
 ### Portal
 
 ```ts
@@ -38,22 +34,6 @@ export async function configure(config: FrameworkConfigurator) {
 }
 ```
 
-### Application
-
-To use AG Grid in an application, the module needs to be enabled in the application configuration. 
-
-> [!NOTE]
-> All configuration is scoped to the application.
-
-```ts
-import { type AppModuleInitiator } from '@equinor/fusion-framework-react-app';
-import { enableAgGrid } from '@equinor/fusion-framework-module-ag-grid';
-
-export const configure: AppModuleInitiator = (configurator, { env }) => {
-    enableAgGrid(configurator);
-};
-```
-
 ## Theming
 
 This module uses the `alpine` theme as the base [theme for AG Grid](https://www.ag-grid.com/react-data-grid/theming/). 

packages/modules/ag-grid/package.json

@@ -9,14 +9,6 @@
             "import": "./dist/esm/index.js",
             "types": "./dist/types/index.d.ts"
         },
-        "./community": {
-            "import": "./dist/esm/community.js",
-            "types": "./dist/types/community.d.ts"
-        },
-        "./enterprise": {
-            "import": "./dist/esm/enterprise.js",
-            "types": "./dist/types/enterprise.d.ts"
-        },
         "./themes": {
             "import": "./dist/esm/themes.js",
             "types": "./dist/types/themes.d.ts"
@@ -49,15 +41,16 @@
         "url": "git+https://github.com/equinor/fusion-framework.git",
         "directory": "packages/modules/ag-grid"
     },
-    "dependencies": {
-        "ag-grid-community": "^33.0.3",
-        "ag-grid-enterprise": "^33.0.3"
-    },
+    "dependencies": {},
     "devDependencies": {
         "@equinor/fusion-framework-module": "workspace:^",
-        "typescript": "^5.5.4"
+        "typescript": "^5.5.4",
+        "ag-grid-community": "33.0.3",
+        "ag-grid-enterprise": "33.0.3"
     },
     "peerDependencies": {
-        "@equinor/fusion-framework-module": "workspace:^"
+        "@equinor/fusion-framework-module": "workspace:^",
+        "ag-grid-community": ">=33.0.3",
+        "ag-grid-enterprise": ">=33.0.3"
     }
 }

packages/modules/ag-grid/src/AgGridConfigurator.ts

@@ -21,6 +21,7 @@ export class AgGridConfigurator
         // set config properties
         this._set('modules', async () => [...this.#modules]);
         this._set('theme', async () => this.#theme);
+        this.setLicenseKey(args.licenseKey);
     }
 
     setLicenseKey(value: string | undefined): void {

packages/modules/ag-grid/src/AgGridProvider.ts

@@ -1,5 +1,5 @@
-import { LicenseManager } from './enterprise';
-import { ModuleRegistry, provideGlobalGridOptions, type Theme } from './community';
+import { LicenseManager } from 'ag-grid-enterprise';
+import { ModuleRegistry, provideGlobalGridOptions, type Theme } from 'ag-grid-community';
 
 import { AgGridConfig } from './AgGridConfigurator.interface';
 

packages/modules/ag-grid/src/default-modules.ts

@@ -1,4 +1,4 @@
-import { type Module } from './enterprise';
+import { type Module } from 'ag-grid-enterprise';
 
 // TODO: Add default modules here which all consumers of the module will use
 // NOTE: Adding modules here will increase the bundle size

packages/modules/ag-grid/src/index.ts

@@ -1,4 +1,8 @@
-export * from './AgGridConfigurator';
-export * from './AgGridProvider';
-export * from './module';
-export { default } from './module';
+export { AgGridConfigurator } from './AgGridConfigurator';
+export { AgGridProvider, type IAgGridProvider } from './AgGridProvider';
+export {
+    enableAgGrid,
+    type AgGridModule,
+    type AgGridBuilderCallback,
+    module as default,
+} from './module';

packages/modules/ag-grid/src/module.ts

@@ -1,14 +1,16 @@
+import {
+    type IModulesConfigurator,
+    type Module,
+    type ModulesInstanceType,
+} from '@equinor/fusion-framework-module';
+
 import { AgGridConfigurator } from './AgGridConfigurator';
 import { defaultModules } from './default-modules';
 import { IAgGridProvider, AgGridProvider } from './AgGridProvider';
-import type {
-    IModulesConfigurator,
-    Module,
-    ModulesInstanceType,
-} from '@equinor/fusion-framework-module';
+
 import { type IAgGridConfigurator } from './AgGridConfigurator.interface';
 
-import { fusionTheme } from './themes';
+import { fusionTheme, createThemeFromTheme } from './themes';
 
 export type AgGridModule = Module<'agGrid', IAgGridProvider, IAgGridConfigurator>;
 
@@ -18,7 +20,8 @@ export const module: AgGridModule = {
     name: 'agGrid',
     configure: (ref?: ModulesInstanceType<[AgGridModule]>) => {
         const licenseKey = ref?.agGrid?.licenseKey;
-        const theme = ref?.agGrid?.theme ?? fusionTheme;
+
+        const theme = ref?.agGrid?.theme ? createThemeFromTheme(ref.agGrid.theme) : fusionTheme;
         return new AgGridConfigurator({
             licenseKey,
             theme,

packages/modules/ag-grid/src/themes.ts

@@ -1,9 +1,44 @@
-import { type Theme, themeAlpine, createTheme } from './community';
+import { type Theme, themeAlpine, createTheme, createPart } from 'ag-grid-community';
 
 export const fusionTheme: Theme = themeAlpine.withParams({
     fontFamily: 'Equinor, sans-serif',
+    accentColor: '#00A2FF',
+    backgroundColor: '#21222C',
+    borderColor: '#429356',
+    borderRadius: 0,
+    browserColorScheme: 'dark',
+    cellHorizontalPaddingScale: 0.8,
+    cellTextColor: '#50F178',
+    columnBorder: true,
+    fontSize: 12,
+    foregroundColor: '#68FF8E',
+    headerBackgroundColor: '#21222C',
+    headerFontSize: 14,
+    headerFontWeight: 700,
+    headerTextColor: '#68FF8E',
+    headerVerticalPaddingScale: 1.5,
+    oddRowBackgroundColor: '#21222C',
+    rangeSelectionBackgroundColor: '#FFFF0020',
+    rangeSelectionBorderColor: 'yellow',
+    rangeSelectionBorderStyle: 'dashed',
+    rowBorder: true,
+    rowVerticalPaddingScale: 1.5,
+    sidePanelBorder: true,
+    spacing: 4,
+    wrapperBorder: true,
+    wrapperBorderRadius: 0,
 });
 
+export const createThemeFromTheme = (theme: Theme): Theme => {
+    const newTheme = createTheme();
+    if ('parts' in theme && Array.isArray(theme.parts)) {
+        for (const part of theme.parts) {
+            newTheme.withPart(createPart(part));
+        }
+    }
+    return newTheme;
+};
+
 export { createTheme, type Theme };
 
 export default { fusionTheme };