Update dependencies for React 19 support

.storybook/main.js

@@ -0,0 +1,15 @@
+/** @type { import('@storybook/react-webpack5').StorybookConfig } */
+const config = {
+	stories: ["../stories/**/*.stories.@(js|jsx|ts|tsx)"],
+	addons: ["@storybook/addon-links", "@storybook/addon-actions"],
+	framework: {
+		name: "@storybook/react-webpack5",
+		options: {},
+	},
+	typescript: {
+		check: false,
+		reactDocgen: false,
+	},
+};
+
+export default config;

.storybook/preview.jsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+	parameters: {
+		options: {
+			showPanel: false,
+		},
+	},
+	decorators: [
+		(Story) =>
+			React.createElement(
+				"div",
+				{
+					style: {
+						display: "flex",
+						justifyContent: "center",
+						margin: "100px 0",
+					},
+				},
+				React.createElement(Story)
+			),
+	],
+};
+
+export default preview;

package.json

@@ -28,11 +28,11 @@
 	"scripts": {
 		"start": "npm-run-all build:rollup --parallel start:*",
 		"start:rollup": "rollup --config --sourcemap --watch",
-		"start:storybook": "start-storybook --port 3000",
+		"start:storybook": "storybook dev --port 3000",
 		"build": "run-s build:*",
 		"build:clean": "rm -rf ./dist/ ./dist-storybook/",
 		"build:rollup": "rollup --config",
-		"build:storybook": "build-storybook --output-dir ./dist-storybook/",
+		"build:storybook": "storybook build --output-dir ./dist-storybook/",
 		"test": "tsc --noEmit",
 		"lint:css": "stylelint --fix --max-warnings 0",
 		"lint:ts": "eslint --ext .ts,.tsx --fix --max-warnings 0",
@@ -43,44 +43,53 @@
 	"dependencies": {
 		"@types/lodash.debounce": "^4.0.6",
 		"@types/lodash.throttle": "^4.1.6",
-		"@types/react": "^16.9.23",
+		"@types/react": "^19.2.2",
 		"lodash.debounce": "^4.0.8",
 		"lodash.throttle": "^4.1.1"
 	},
 	"peerDependencies": {
-		"react": "^16.0.0"
+		"react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
 	},
 	"devDependencies": {
-		"@babel/core": "^7.8.4",
+		"@babel/core": "^7.26.0",
+		"@babel/preset-env": "^7.28.5",
+		"@babel/preset-react": "^7.28.5",
+		"@babel/preset-typescript": "^7.28.5",
+		"@rollup/plugin-typescript": "^12.3.0",
 		"@samuelmeuli/eslint-config": "~6.0.0",
 		"@samuelmeuli/prettier-config": "^1.0.0",
 		"@samuelmeuli/stylelint-config": "~3.0.0",
 		"@samuelmeuli/tsconfig": "^1.0.0",
-		"@storybook/react": "^5.3.14",
-		"@typescript-eslint/eslint-plugin": "^2.21.0",
-		"@typescript-eslint/parser": "^2.21.0",
-		"babel-loader": "^8.0.6",
-		"eslint": "6.8.0",
-		"eslint-config-airbnb": "18.0.1",
-		"eslint-config-prettier": "^6.10.0",
-		"eslint-plugin-import": "^2.20.1",
-		"eslint-plugin-jsx-a11y": "^6.2.3",
-		"eslint-plugin-react": "^7.18.3",
-		"eslint-plugin-react-hooks": "^1.7.0",
-		"husky": "^4.2.3",
-		"lint-staged": "^10.0.8",
-		"np": "~6.1.0",
-		"npm-run-all": "^4.1.3",
-		"postcss": "^7.0.27",
-		"prettier": "^1.19.1",
-		"react": "^16.12.0",
-		"react-dom": "^16.12.0",
-		"rollup": "^1.31.1",
-		"rollup-plugin-postcss": "^2.1.1",
-		"rollup-plugin-typescript2": "^0.26.0",
-		"sass": "^1.26.1",
-		"stylelint": "^12.0.0",
-		"typescript": "^3.8.2"
+		"@storybook/addon-actions": "^8.5.3",
+		"@storybook/addon-links": "^8.5.3",
+		"@storybook/react": "^8.5.3",
+		"@storybook/react-webpack5": "^8.5.3",
+		"@storybook/test": "^8.5.3",
+		"@types/react": "^19.2.2",
+		"@typescript-eslint/eslint-plugin": "^8.46.2",
+		"@typescript-eslint/parser": "^8.46.2",
+		"eslint": "^8.57.1",
+		"eslint-config-airbnb": "^19.0.4",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-import": "^2.31.0",
+		"eslint-plugin-jsx-a11y": "^6.10.2",
+		"eslint-plugin-react": "^7.37.3",
+		"eslint-plugin-react-hooks": "^5.1.0",
+		"husky": "^9.1.7",
+		"lint-staged": "^15.2.11",
+		"np": "^10.0.7",
+		"npm-run-all": "^4.1.5",
+		"postcss": "^8.4.49",
+		"prettier": "^3.6.2",
+		"react": "^19.0.0",
+		"react-dom": "^19.0.0",
+		"rollup": "^4.52.5",
+		"rollup-plugin-postcss": "^4.0.2",
+		"sass": "^1.83.4",
+		"storybook": "^8.5.3",
+		"stylelint": "^16.25.0",
+		"tslib": "^2.8.1",
+		"typescript": "^5.9.3"
 	},
 	"eslintConfig": {
 		"root": true,

rollup.config.js

@@ -1,7 +1,7 @@
 import postcss from "rollup-plugin-postcss";
-import typescript from "rollup-plugin-typescript2";
+import typescript from "@rollup/plugin-typescript";
 
-import pkg from "./package.json";
+import pkg from "./package.json" with { type: "json" };
 
 export default {
 	input: "./src/Magnifier.tsx",
@@ -16,5 +16,10 @@ export default {
 		},
 	],
 	external: ["react", "lodash.debounce", "lodash.throttle"],
-	plugins: [postcss(), typescript()],
+	plugins: [
+		postcss(),
+		typescript({
+			tsconfig: "./tsconfig.json",
+		}),
+	],
 };

src/Magnifier.tsx

@@ -42,9 +42,9 @@ interface State {
 }
 
 export default class Magnifier extends PureComponent<Props, State> {
-	img: HTMLElement;
+	img!: HTMLElement;
 
-	imgBounds: DOMRect | ClientRect;
+	imgBounds!: DOMRect | ClientRect;
 
 	calcImgBoundsDebounced: () => void;
 

stories/index.stories.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+import Magnifier from "../dist/Magnifier.es";
+import BASE_64_IMG from "./test-image-base-64";
+import testImageSmall from "./test-image-small.jpg";
+import testImage from "./test-image.jpg";
+
+const IMG_WIDTH = "50%";
+
+export default {
+	title: "Magnifier",
+	component: Magnifier,
+};
+
+export const Round = () => React.createElement(Magnifier, { src: testImage, width: IMG_WIDTH });
+
+export const Square = () =>
+	React.createElement(Magnifier, { src: testImage, mgShape: "square", width: IMG_WIDTH });
+
+export const HideOverflow = () =>
+	React.createElement(Magnifier, {
+		src: testImage,
+		mgShowOverflow: false,
+		mgTouchOffsetX: 0,
+		mgTouchOffsetY: 0,
+		width: IMG_WIDTH,
+	});
+
+export const DifferentImages = () =>
+	React.createElement(Magnifier, { src: testImageSmall, zoomImgSrc: testImage, width: IMG_WIDTH });
+
+export const Base64Image = () => React.createElement(Magnifier, { src: BASE_64_IMG, width: IMG_WIDTH });
+

tsconfig.json

@@ -1,8 +1,19 @@
 {
-	"extends": "@samuelmeuli/tsconfig",
 	"compilerOptions": {
+		"target": "ES2015",
 		"module": "ES6",
+		"lib": ["ES2015", "DOM"],
+		"outDir": "./dist",
 		"declaration": true,
-		"declarationMap": true
-	}
+		"declarationMap": true,
+		"jsx": "react",
+		"strict": true,
+		"esModuleInterop": true,
+		"skipLibCheck": true,
+		"forceConsistentCasingInFileNames": true,
+		"moduleResolution": "node",
+		"resolveJsonModule": true,
+		"types": []
+	},
+	"include": ["src/**/*"]
 }