Charts: Replace Rollup with Webpack (#40912)

* replace rollup with webpack

* update scripts

* changelog

* Delete projects/js-packages/charts/eslint.config.mjs

* remove rollup from dependencies

* Update projects/js-packages/charts/package.json

* separate directory for cjs and esm

* refactoring

* move types to top

* replaced remaining types imports

* rename esm to mjs to be consistent

* fix color access

* fix type errors

* fix type errors

* add index to accessors

* add types build

* change exports etc

* remove unecessary options

* remove unecessary ts-loader

* make babel/runtime external

* we might want to export the types here

* fixed export file names

* fix pnpm lock

* adding build:prod script

* use a single webpack config

* fix pnpm locks

projects/js-packages/charts/changelog/update-change-to-webpack-charts-2

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Replace Rollup with Webpack for charts

projects/js-packages/charts/index.ts

@@ -15,5 +15,5 @@ export { ThemeProvider } from './src/providers/theme';
 export { default as useChartMouseHandler } from './src/hooks/use-chart-mouse-handler';
 
 // Types
-export type * from './src/components/shared/types';
+export type * from './src/types';
 export type { BaseTooltipProps } from './src/components/tooltip';

projects/js-packages/charts/package.json

@@ -19,13 +19,33 @@
 		"test-coverage": "pnpm run test --coverage",
 		"storybook": "cd ../storybook && pnpm run storybook:dev",
 		"compile-ts": "tsc --pretty",
-		"build": "rollup -c",
-		"build:prod": "rollup -c --environment NODE_ENV:production",
-		"build:dev": "rollup -c --environment NODE_ENV:development",
-		"build:watch": "rollup -c -w",
-		"clean-build": "rm -rf dist/"
+		"clean-build": "rm -rf dist/",
+		"build": "pnpm run build:prod",
+		"build:prod": "pnpm run clean-build && webpack --config webpack.config.cjs --mode production && bash ./tools/fixup.sh && pnpm run build:types",
+		"build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+	},
+	"main": "./dist/cjs/index.js",
+	"module": "./dist/mjs/index.js",
+	"types": "./dist/types/index.d.ts",
+	"sideEffects": [
+		"*.css",
+		"*.scss"
+	],
+	"exports": {
+		".": {
+			"import": "./dist/mjs/index.js",
+			"require": "./dist/cjs/index.js",
+			"types": "./dist/types/*.d.ts"
+		},
+		"./components/*": {
+			"import": "./dist/mjs/components/*/index.js",
+			"require": "./dist/cjs/components/*/index.js",
+			"types": "./dist/types/*.d.ts"
+		},
+		"./style.css": "./dist/cjs/style.css"
 	},
 	"dependencies": {
+		"@babel/runtime": "7.26.0",
 		"@react-spring/web": "9.7.3",
 		"@visx/axis": "^3.12.0",
 		"@visx/event": "^3.8.0",
@@ -42,53 +62,39 @@
 		"tslib": "2.5.0"
 	},
 	"devDependencies": {
-		"@rollup/plugin-commonjs": "26.0.1",
-		"@rollup/plugin-json": "6.1.0",
-		"@rollup/plugin-node-resolve": "15.3.0",
-		"@rollup/plugin-terser": "0.4.3",
-		"@rollup/plugin-typescript": "12.1.0",
+		"@babel/core": "7.26.0",
+		"@babel/plugin-transform-runtime": "7.25.9",
+		"@babel/preset-env": "7.26.0",
+		"@babel/preset-react": "7.26.3",
+		"@babel/preset-typescript": "7.26.0",
 		"@storybook/blocks": "8.4.7",
 		"@storybook/react": "8.4.7",
 		"@types/react": "18.3.18",
 		"@types/react-dom": "18.3.5",
+		"babel-loader": "9.1.2",
+		"clean-webpack-plugin": "^4.0.0",
+		"css-loader": "^6.7.0",
+		"fork-ts-checker-webpack-plugin": "9.0.2",
 		"jest": "29.7.0",
 		"jest-environment-jsdom": "29.7.0",
 		"jest-extended": "4.0.2",
+		"mini-css-extract-plugin": "^2.7.0",
 		"postcss": "8.4.47",
+		"postcss-loader": "^7.0.0",
 		"postcss-modules": "6.0.1",
 		"react": "18.3.1",
 		"react-dom": "18.3.1",
-		"rollup": "3.29.5",
-		"rollup-plugin-dts": "6.1.1",
-		"rollup-plugin-peer-deps-external": "2.2.4",
-		"rollup-plugin-postcss": "4.0.2",
 		"sass": "1.64.1",
 		"sass-embedded": "1.83.0",
+		"sass-loader": "^13.0.0",
 		"storybook": "8.4.7",
-		"typescript": "5.7.2"
+		"tsconfig-paths-webpack-plugin": "4.2.0",
+		"typescript": "5.7.2",
+		"webpack": "^5.88.0",
+		"webpack-cli": "^5.1.0"
 	},
 	"peerDependencies": {
 		"react": "^17.0.0 || ^18.0.0",
 		"react-dom": "^17.0.0 || ^18.0.0"
-	},
-	"exports": {
-		".": {
-			"import": "./dist/index.mjs",
-			"require": "./dist/index.js",
-			"types": "./dist/index.d.ts"
-		},
-		"./components/*": {
-			"import": "./dist/components/*/index.js",
-			"require": "./dist/components/*/index.cjs.js",
-			"types": "./dist/components/*/index.d.ts"
-		},
-		"./style.css": "./dist/style.css"
-	},
-	"main": "./dist/index.js",
-	"module": "./dist/index.mjs",
-	"types": "./dist/index.d.ts",
-	"sideEffects": [
-		"*.css",
-		"*.scss"
-	]
+	}
 }

projects/js-packages/charts/src/components/bar-chart/bar-chart.tsx

@@ -11,7 +11,7 @@ import { GridControl } from '../grid-control';
 import { Legend } from '../legend';
 import { BaseTooltip } from '../tooltip';
 import styles from './bar-chart.module.scss';
-import type { BaseChartProps, SeriesData } from '../shared/types';
+import type { BaseChartProps, SeriesData } from '../../types';
 
 interface BarChartProps extends BaseChartProps< SeriesData[] > {}
 

projects/js-packages/charts/src/components/grid-control/grid-control.tsx

@@ -1,7 +1,7 @@
 import { GridRows, GridColumns } from '@visx/grid';
 import React from 'react';
 import styles from './grid-control.module.scss';
-import type { GridProps } from '../shared/types';
+import type { GridProps } from '../../types';
 
 const GridControl: React.FC< GridProps > = ( {
 	width,

projects/js-packages/charts/src/components/line-chart/line-chart.tsx

@@ -11,7 +11,7 @@ import { FC } from 'react';
 import { useChartTheme } from '../../providers/theme/theme-provider';
 import { Legend } from '../legend';
 import styles from './line-chart.module.scss';
-import type { BaseChartProps, DataPointDate, SeriesData } from '../shared/types';
+import type { BaseChartProps, DataPointDate, SeriesData } from '../../types';
 
 // TODO: revisit grid and axis options - accept as props for frid lines, axis, values: x, y, all, none
 

projects/js-packages/charts/src/components/line-chart/stories/sample-data.ts

@@ -1,4 +1,4 @@
-import type { SeriesData } from '../../shared/types';
+import type { SeriesData } from '../../../types';
 
 // Sample data
 const temperatureData: SeriesData[] = [

projects/js-packages/charts/src/components/pie-chart/pie-chart.tsx

@@ -7,8 +7,7 @@ import { useChartTheme, defaultTheme } from '../../providers/theme';
 import { Legend } from '../legend';
 import { BaseTooltip } from '../tooltip';
 import styles from './pie-chart.module.scss';
-import type { BaseChartProps, DataPointPercentage } from '../shared/types';
-import type { PieArcDatum } from '@visx/shape/lib/shapes/Pie';
+import type { BaseChartProps, DataPointPercentage } from '../../types';
 
 // TODO: add animation
 
@@ -46,10 +45,17 @@ const PieChart = ( {
 	const centerX = width / 2;
 	const centerY = height / 2;
 
+	// Map the data to include index for color assignment
+	const dataWithIndex = data.map( ( d, index ) => ( {
+		...d,
+		index,
+	} ) );
+
 	const accessors = {
-		value: ( d: PieArcDatum< DataPointPercentage > ) => d.value,
+		value: ( d: DataPointPercentage ) => d.value,
 		// Use the color property from the data object as a last resort. The theme provides colours by default.
-		fill: ( d: PieArcDatum< DataPointPercentage > ) => d?.color || providerTheme.colors[ d.index ],
+		fill: ( d: DataPointPercentage & { index: number } ) =>
+			d?.color || providerTheme.colors[ d.index ],
 	};
 
 	// Create legend items from data
@@ -63,8 +69,8 @@ const PieChart = ( {
 		<div className={ clsx( 'pie-chart', styles[ 'pie-chart' ], className ) }>
 			<svg width={ width } height={ height }>
 				<Group top={ centerY } left={ centerX }>
-					<Pie
-						data={ data }
+					<Pie< DataPointPercentage & { index: number } >
+						data={ dataWithIndex }
 						pieValue={ accessors.value }
 						outerRadius={ radius - 20 } // Leave space for labels/tooltips
 						innerRadius={ innerRadius }
@@ -78,7 +84,7 @@ const PieChart = ( {
 
 								const pathProps: SVGProps< SVGPathElement > = {
 									d: pie.path( arc ) || '',
-									fill: accessors.fill( arc ),
+									fill: accessors.fill( arc.data ),
 								};
 
 								if ( withTooltips ) {

projects/js-packages/charts/src/components/pie-semi-circle-chart/pie-semi-circle-chart.tsx

@@ -9,7 +9,7 @@ import { useChartTheme } from '../../providers/theme/theme-provider';
 import { Legend } from '../legend';
 import { BaseTooltip } from '../tooltip';
 import styles from './pie-semi-circle-chart.module.scss';
-import type { BaseChartProps, DataPointPercentage } from '../shared/types';
+import type { BaseChartProps, DataPointPercentage } from '../../types';
 
 interface PieSemiCircleChartProps extends BaseChartProps< DataPointPercentage[] > {
 	/**

projects/js-packages/charts/src/hooks/use-chart-mouse-handler.ts

@@ -1,7 +1,7 @@
 import { localPoint } from '@visx/event';
 import { useTooltip } from '@visx/tooltip';
 import { useCallback, type MouseEvent } from 'react';
-import type { DataPoint } from '../components/shared/types';
+import type { DataPoint } from '../types';
 
 type UseChartMouseHandlerProps = {
 	/**

projects/js-packages/charts/src/index.ts

@@ -13,7 +13,3 @@ export { ThemeProvider } from './providers/theme';
 
 // Hooks
 export { default as useChartMouseHandler } from './hooks/use-chart-mouse-handler';
-
-// Types
-export type * from './components/shared/types';
-export type { BaseTooltipProps } from './components/tooltip';

projects/js-packages/charts/src/providers/theme/theme-provider.tsx

@@ -1,6 +1,6 @@
 import { createContext, useContext, FC, type ReactNode } from 'react';
 import { defaultTheme } from './themes';
-import type { ChartTheme } from '../../components/shared/types';
+import type { ChartTheme } from '../../types';
 
 /**
  * Context for sharing theme configuration across components

projects/js-packages/charts/src/providers/theme/themes.ts

@@ -1,4 +1,4 @@
-import type { ChartTheme } from '../../components/shared/types';
+import type { ChartTheme } from '../../types';
 
 /**
  * Default theme configuration

projects/js-packages/charts/tools/fixup.sh

@@ -0,0 +1,11 @@
+cat >dist/cjs/package.json <<!EOF
+{
+    "type": "commonjs"
+}
+!EOF
+
+cat >dist/mjs/package.json <<!EOF
+{
+    "type": "module"
+}
+!EOF