feat(ix-aggrid): Update ix-aggrid to use aggrid v33

.changeset/tiny-ducks-behave.md

@@ -0,0 +1,7 @@
+---
+"@siemens/ix-aggrid": major
+---
+
+Require **AG Grid** V33 or higher and support new theming API.
+
+Fixes: #1784

BREAKING_CHANGES/v4.md

@@ -454,6 +454,48 @@ Renamed property `standaloneAppearance` to `embedded` and changed default value
 
 - Removed unused `offsetBottom` property. No migration required - this property had no effect and can be safely removed from your code.
 
+### ix-aggrid
+
+The AG Grid version has been updated and now requires v33 or v34. We are also providing a new brand-aligned iX theme through the new AG Grid theming API.
+
+Remove the `ix-aggrid.css` import:
+
+```scss
+// ❌ Remove all occurrences of this line
+@import '@siemens/ix-aggrid/dist/ix-aggrid/ix-aggrid.css';
+```
+
+The `ag-theme-alpine-dark` and `ag-theme-ix` classes don’t have to be applied anymore:
+
+```html
+<!-- ❌ Remove these classes -->
+<div class="ag-theme-alpine-dark ag-theme-ix"></div>
+```
+
+Configure the theme using the new theming API:
+
+```javascript
+import { getIxTheme, getIxThemeAsync } from '@siemens/ix-aggrid';
+import * as agGrid from 'ag-grid-community';
+
+// Get iX theme based on your AG Grid module
+const ixTheme = getIxTheme(agGrid);
+// Alternative: Use async import
+const ixTheme = await getIxThemeAsync(() => import('ag-grid-community'));
+
+// Option 1: Set the theme per grid instance
+const gridOptions = {
+  theme: ixTheme,
+  // ... other options
+};
+
+// Option 2: Set the theme globally for all grids
+// Note: Must be called before initializing any grid instance
+agGrid.provideGlobalGridOptions({
+  theme: ixTheme,
+});
+```
+
 ## Theme
 
 ### Theme switcher
@@ -488,4 +530,4 @@ themeSwitcher.setVariant('light');
 ### ix-flip-tile
 
 - Rename property `state` to `variant`
-- Rename `FlipTileState` to `FlipTileVariant`
+- Rename `FlipTileState` to `FlipTileVariant`

packages/aggrid/package.json

@@ -8,41 +8,49 @@
     "directory": "packages/aggrid"
   },
   "description": "AG Grid theme based on ix theme variables",
-  "version": "3.0.2",
+  "version": "4.0.0",
   "files": [
     "LICENSE",
     "README.md",
     "READMEOSS.html",
     "dist/"
   ],
+  "module": "dist/index.js",
+  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/types/index.d.ts"
+    }
+  },
   "scripts": {
+    "build.watch": "rollup -c -w",
     "test.setup": "playwright install chromium --with-deps",
-    "build": "gulp",
-    "visual-regression": "playwright test",
-    "host-root": "http-server -a 127.0.0.1"
+    "build": "npm run clean && npm run compile",
+    "clean": "rimraf dist",
+    "compile": "rollup -c",
+    "visual-regression": "playwright test --config=playwright.config.ts"
   },
   "devDependencies": {
     "@playwright/test": "^1.54.1",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-typescript": "^8.5.0",
     "@siemens/ix": "workspace:*",
     "@siemens/ix-icons": "^3.2.0",
-    "@types/gulp": "^4.0.14",
-    "@types/gulp-postcss": "^8.0.4",
-    "@types/gulp-sass": "^5.0.2",
-    "ag-grid-community": "^32.1.0",
-    "autoprefixer": "10.4.20",
-    "cssnano": "^6.1.2",
-    "gulp": "^4.0.2",
-    "gulp-postcss": "^9.0.1",
-    "gulp-sass": "^5.1.0",
+    "@types/node": "^24.0.3",
+    "ag-grid-community": "^33.3.2",
     "http-server": "^14.1.1",
-    "rimraf": "^5.0.9",
-    "sass": "^1.89.2",
-    "ts-node": "^10.9.2"
+    "rimraf": "^6.0.1",
+    "rollup": "^4.43.0",
+    "rollup-plugin-import-css": "^4.0.1",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.5",
+    "ag-grid-community-34": "npm:ag-grid-community@^34.3.0"
   },
   "dependencies": {
     "@siemens/ix": "^3.2.0"
   },
   "peerDependencies": {
-    "ag-grid-community": "^28 || ^29 || ^30 || ^31 || ^32"
+    "ag-grid-community": "^33"
   }
 }

packages/aggrid/playwright.config.ts

@@ -1,54 +1,26 @@
-/*
- * SPDX-FileCopyrightText: 2024 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import type { PlaywrightTestConfig } from '@playwright/test';
-import { devices } from '@playwright/test';
-
-/**
- * Read environment variables from file.
- * https://github.com/motdotla/dotenv
- */
-// require('dotenv').config();
-
-let THEMES = ['theme-classic-light', 'theme-classic-dark'];
+import { defineConfig, devices } from '@playwright/test';
+import { visualTestConfig } from './visual-regression.config';
 
 function buildProjectsWithThemes() {
-  return THEMES.flatMap(theme => {
+  return visualTestConfig.flatMap((theme) => {
     return [
       {
-        name: `chromium - ${theme}`,
+        name: `chromium - ${theme.name}`,
         use: {
           ...devices['Desktop Chrome'],
         },
         metadata: {
-          theme,
+          theme: theme.theme,
+          colorSchema: theme.colorSchema,
         },
       },
     ];
   });
 }
 
-/**
- * See https://playwright.dev/docs/test-configuration.
- */
-/** @type {import('@playwright/test').PlaywrightTestConfig} */
-const config: PlaywrightTestConfig = {
-  testMatch: '*.e2e.ts',
-  /* Maximum time one test can run for. */
-  timeout: 30 * 1000,
-  expect: {
-    /**
-     * Maximum time expect() should wait for the condition to be met.
-     * For example in `await expect(locator).toHaveText();`
-     */
-    timeout: 5000,
-  },
+export default defineConfig({
+  testMatch: 'tests/*.e2e.ts',
+
   /* Run tests in files in parallel */
   fullyParallel: true,
   /* Fail the build on CI if you accidentally left test.only in the source code. */
@@ -58,23 +30,22 @@ const config: PlaywrightTestConfig = {
   /* Opt out of parallel tests on CI. */
   workers: 10,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: 'html',
+  reporter: process.env.CI ? 'blob' : 'html',
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
-    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
-    actionTimeout: 0,
     /* Base URL to use in actions like `await page.goto('/')`. */
-    // baseURL: 'http://localhost:3000',
+    baseURL: 'http://localhost:5173',
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
   },
+
   /* Configure projects for major browsers */
   projects: buildProjectsWithThemes(),
+
+  /* Run your local dev server before starting the tests */
   webServer: {
-    command: 'pnpm host-root',
-    port: 8080,
+    command: 'pnpm vite',
+    port: 5173,
   },
-};
-
-export default config;
+});

packages/aggrid/rollup.config.mjs

@@ -0,0 +1,43 @@
+import { resolve } from 'node:path';
+import nodeResolve from '@rollup/plugin-node-resolve';
+import typescript from '@rollup/plugin-typescript';
+import css from 'rollup-plugin-import-css';
+
+const __dirname = resolve();
+const external = new Set(['@ag-grid-community/theming']);
+
+/** @type {import('rollup').RollupOptions} */
+const config = {
+  output: [
+    {
+      dir: 'dist',
+      entryFileNames: '[name].js',
+      chunkFileNames: '[name]-[hash].js',
+      format: 'esm',
+      sourcemap: true,
+    },
+  ],
+  input: {
+    index: 'src/index.ts',
+  },
+  plugins: [
+    css(),
+    typescript({
+      tsconfig: resolve(__dirname, 'tsconfig.lib.json'),
+    }),
+    nodeResolve(),
+  ],
+  external: (id) => {
+    return external.has(id);
+  },
+
+  watch: {
+    include: 'src/**',
+    chokidar: {
+      usePolling: true, // Use polling to detect changes
+      interval: 100, // Polling interval in milliseconds
+    },
+  },
+};
+
+export default config;