jscottsmith · jscottsmith · Feb 3, 2025 · Feb 3, 2025
diff --git a/.github/workflows/coverage.yml b/.github/workflows/coverage.yml
@@ -8,7 +8,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [18.x]
 
     steps:
       - name: Checkout repository

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -7,7 +7,7 @@ jobs:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        node: ['12.x']
+        node: ['18.x']
         os: [ubuntu-latest, windows-latest, macOS-latest]
 
     steps:

diff --git a/.github/workflows/surge.yml b/.github/workflows/surge.yml
@@ -9,7 +9,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [18.x]
 
     steps:
       - name: Checkout repository

diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,39 +1,28 @@
 module.exports = {
   stories: ['../stories/**/*.stories.@(ts|tsx|js|jsx)'],
-  addons: [
-    {
-      name: '@storybook/addon-postcss',
-      options: {
-        postcssLoaderOptions: {
-          implementation: require('postcss'),
-          postcssOptions: {
-            plugins: {
-              tailwindcss: {},
-              autoprefixer: {},
-            },
-          },
-        },
+
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', {
+    name: '@storybook/preset-scss',
+    options: {
+      rule: {
+        test: /\.module\.s[ca]ss$/,
       },
-    },
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    {
-      name: '@storybook/preset-scss',
-      options: {
-        rule: {
-          test: /\.module\.s[ca]ss$/,
-        },
-        cssLoaderOptions: {
-          modules: {
-            localIdentName: '[name]__[local]--[hash:base64:5]',
-          },
+      cssLoaderOptions: {
+        modules: {
+          localIdentName: '[name]__[local]--[hash:base64:5]',
         },
       },
     },
-  ],
+  }, '@storybook/addon-webpack5-compiler-swc'],
+
   // https://storybook.js.org/docs/react/configure/typescript#mainjs-configuration
   typescript: {
     check: true, // type-check stories during Storybook build
     // reactDocgen: false, // https://github.com/storybookjs/storybook/issues/15336
   },
+
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {}
+  }
 };
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -3,5 +3,5 @@ import '/stories/styles.css';
 // https://storybook.js.org/docs/react/writing-stories/parameters#global-parameters
 export const parameters = {
   // https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args
-  actions: { argTypesRegex: '^on.*' },
+  actions: {},
 };
diff --git a/package.json b/package.json
@@ -25,7 +25,7 @@
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   "engines": {
-    "node": ">=10"
+    "node": ">=18"
   },
   "scripts": {
     "start": "tsdx watch",
@@ -36,8 +36,8 @@
     "prepare": "tsdx build",
     "size": "size-limit",
     "analyze": "size-limit --why",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "release": "np"
   },
   "jest": {
@@ -97,31 +97,33 @@
   "devDependencies": {
     "@babel/core": "^7.17.8",
     "@size-limit/preset-small-lib": "^6.0.4",
-    "@storybook/addon-essentials": "^6.4.20",
-    "@storybook/addon-links": "^6.4.20",
-    "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/addons": "^6.4.20",
+    "@storybook/addon-essentials": "^8.5.3",
+    "@storybook/addon-links": "^8.5.3",
+    "@storybook/addon-webpack5-compiler-swc": "^2.0.0",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^6.4.20",
+    "@storybook/react": "^8.5.3",
+    "@storybook/react-webpack5": "^8.5.3",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@types/jest": "^27.0.3",
-    "@types/react": "^17.0.35",
-    "@types/react-dom": "^17.0.11",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "autoprefixer": "^10.4.20",
     "babel-jest": "^27.5.1",
     "babel-loader": "^8.2.4",
     "css-loader": "^5.0.0",
     "husky": "^7.0.4",
     "np": "^7.7.0",
     "postcss": "^8",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-hooks-testing-library": "^0.6.0",
     "react-is": "^17.0.2",
     "react-test-renderer": "^17.0.1",
     "sass": "^1.49.11",
     "sass-loader": "^10.1.0",
     "size-limit": "^6.0.4",
+    "storybook": "^8.5.3",
     "style-loader": "^2.0.0",
     "tailwindcss": "^2.2.19",
     "tsdx": "^0.14.1",

diff --git a/src/components/ParallaxProvider/index.test.tsx b/src/components/ParallaxProvider/index.test.tsx
@@ -1,7 +1,7 @@
 /* global describe, it */
 
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { ParallaxController } from 'parallax-controller';
 
 import { render } from '@testing-library/react';
@@ -19,11 +19,11 @@
     };
 
     const render = () => {
-      ReactDOM.render(
+      const root = createRoot(node);
+      root.render(
         <ParallaxProvider>
           <Child />
-        </ParallaxProvider>,
-        node
+        </ParallaxProvider>
       );
     };
 
@@ -112,7 +112,7 @@
    screen.unmount();

    expect(
      (parallaxController as unknown as ParallaxController)?.destroy
    ).toBeCalled();
  });

@@ -161,26 +161,26 @@
         instance = useParallaxController();
         return null;
       };
-      ReactDOM.render(
-        // @ts-ignore
+
+      const root = createRoot(node);
+      root.render(
         <ParallaxProvider>
           <GetInstance />
-        </ParallaxProvider>,
-        node
+        </ParallaxProvider>
       );
-      return instance;
+      return { instance, root };
     };
 
     // first instance mounted
-    const instance1 = render(node1);
+    const { instance: instance1, root: root1 } = render(node1);
     expect(instance1).toBeInstanceOf(ParallaxController);
 
     // second instance mounted
-    const instance2 = render(node2);
+    const { instance: instance2 } = render(node2);
     expect(instance2).toBeInstanceOf(ParallaxController);
 
     // unmount first instance
-    ReactDOM.unmountComponentAtNode(node1);
+    root1.unmount();
 
     // this must still be defined
     expect(instance2).toBeInstanceOf(ParallaxController);

diff --git a/src/testUtils/MockProvider.tsx b/src/testUtils/MockProvider.tsx
@@ -1,16 +1,22 @@
-import React, { Component } from 'react';
+import React, { Component, ReactNode } from 'react';
 import PropTypes from 'prop-types';
 import { ParallaxContext } from '../../src/context/ParallaxContext';
 import { ParallaxController } from 'parallax-controller';
 
-export class MockProvider extends Component {
+export class MockProvider extends Component<{
+  children: ReactNode;
+  controllerMock: ParallaxController;
+}> {
   static propTypes = {
     children: PropTypes.node.isRequired,
     controllerMock: PropTypes.object.isRequired,
   };
   controller: ParallaxController;
 
-  constructor(props: { controllerMock: ParallaxController }) {
+  constructor(props: {
+    children: ReactNode;
+    controllerMock: ParallaxController;
+  }) {
     super(props);
     this.controller = props.controllerMock;
   }

diff --git a/src/testUtils/expectRenderError.tsx b/src/testUtils/expectRenderError.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable */
 const React = require('react');
-const ReactDOM = require('react-dom');
+const { createRoot } = require('react-dom/client');
 
 export default function expectRenderError(
   element: any,
@@ -32,8 +32,9 @@ export default function expectRenderError(
   const div = document.createElement('div');
   window.addEventListener('error', handleTopLevelError);
   try {
+    const root = createRoot(div);
     // @ts-ignore
-    ReactDOM.render(<TestBoundary>{element}</TestBoundary>, div);
+    root.render(<TestBoundary>{element}</TestBoundary>, div);
   } finally {
     window.removeEventListener('error', handleTopLevelError);
   }

diff --git a/stories/styles.css b/stories/styles.css
@@ -2,17 +2,15 @@
 @tailwind components;
 @tailwind utilities;
 @import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,700');
-
 html {
   height: 100%;
 }
 body,
-#root {
+#storybook-root {
   display: flex !important;
   min-width: 100%;
   min-height: 100%;
 }
-
 body {
   padding: 0 !important;
   margin: 0;
@@ -22,7 +20,6 @@ body {
   background-image: url('static/bg-grid.svg');
   background-color: #222;
 }
-
 .scroll-container {
   position: fixed;
   top: 50px;
@@ -52,7 +49,6 @@ body {
   transform: translate3d(-50%, 0, 0);
   top: 60px;
 }
-
 .vertical {
   width: 100%;
   min-height: 300vh;
@@ -74,7 +70,6 @@ body {
   z-index: 1000;
   transform: translate3d(-50%, 0, 0);
 }
-
 .horizontal {
   height: 100%;
   min-width: 300vw;
@@ -96,11 +91,9 @@ body {
   z-index: 1000;
   transform: translate3d(-50%, 0, 0);
 }
-
 .parallax-outer {
   background-color: rgba(255, 255, 255, 0.05);
 }
-
 .parallax-inner {
   will-change: transform;
 }
diff --git a/yarn.lock b/yarn.lock
diff --git a/src/components/Parallax/index.test.tsx b/src/components/Parallax/index.test.tsx
    });
  });

  describe.each(ALL_PARALLAX_PROPS)('when the prop %s is given', (props) => {
    it('then it renders without issue and calls create element with props', () => {
      const controller = ParallaxController.init({
        scrollAxis: ScrollAxis.vertical,
diff --git a/src/components/ParallaxBanner/ParallaxBanner.tsx b/src/components/ParallaxBanner/ParallaxBanner.tsx
 export const ParallaxBanner = (
  props: PropsWithChildren<ParallaxBannerProps>
 ) => {
  const [targetElement, setTargetElement] =
    useState<HTMLDivElement | null>(null);
  const containerRef = useRef<HTMLDivElement>(null);
  useEffect(() => {

  function renderChildren() {
    if (targetElement) {
      return React.Children.map(props.children, (child) => {
        const item = child as ReactElement<
          PropsWithChildren<{ targetElement: any }>
        >;
diff --git a/src/components/ParallaxBanner/index.test.tsx b/src/components/ParallaxBanner/index.test.tsx
    });
  });

  describe.each(ALL_PARALLAX_PROPS)('when the prop %s is given', (props) => {
    it('then it renders without issue and calls create element with props', () => {
      const controller = ParallaxController.init({
        scrollAxis: ScrollAxis.vertical,
diff --git a/src/components/ParallaxProvider/ParallaxProvider.tsx b/src/components/ParallaxProvider/ParallaxProvider.tsx
    if (props.scrollContainer && controller.current) {
      controller.current.updateScrollContainer(props.scrollContainer);
    }
  }, [props.scrollContainer, controller.current]);

  // disable/enable parallax
  useEffect(() => {
    if (!props.isDisabled && controller.current) {
      controller.current.enableParallaxController();
    }
  }, [props.isDisabled, controller.current]);

  // remove the controller when unmounting
  useEffect(() => {
    return () => {
      controller?.current && controller?.current.destroy();
    };
  }, []);

diff --git a/src/helpers/getIsolatedParallaxProps.ts b/src/helpers/getIsolatedParallaxProps.ts
 import { ParallaxElementConfig } from 'parallax-controller';
 import { removeUndefinedObjectKeys } from '../utils/removeUndefinedObjectKeys';

 export function getIsolatedParallaxProps(props: any): {
  parallaxProps: ParallaxElementConfig;
  rest: Record<string, any>;
 } {
diff --git a/src/hooks/useParallax.ts b/src/hooks/useParallax.ts
        controller?.removeElementById(newElement.id);
      }
    };
  }, []);

  // update element
  useEffect(() => {
        controller?.updateElementPropsById(element.id, parallaxProps);
      }
    }
  }, [
    props.disabled,
    props.easing,
    props.endScroll,
diff --git a/src/testUtils/createElementMock.ts b/src/testUtils/createElementMock.ts
 export function createElementMock(properties = {}, methods = {}) {
  const element = document.createElement('div');
  Object.keys(properties).map((key) => {
    Object.defineProperty(element, key, {
      // @ts-ignore
      value: properties[key],
    });
  });

  Object.keys(methods).map((key) => {
    // @ts-ignore
    element[key] = methods[key];
  });
diff --git a/src/utils/removeUndefinedObjectKeys.ts b/src/utils/removeUndefinedObjectKeys.ts
 export function removeUndefinedObjectKeys(obj: { [key: string]: any }) {
  Object.keys(obj).forEach((key) =>
    obj[key] === undefined && delete obj[key]
  );
  return obj;
	});
	});

	describe.each(ALL_PARALLAX_PROPS)('when the prop %s is given', (props) => {
Check failure on line 94 in src/components/Parallax/index.test.tsx GitHub Actions / Build, lint, and test on Node 18.x and macOS-latest Replace `(props)` with `props` Check failure on line 94 in src/components/Parallax/index.test.tsx GitHub Actions / Build, lint, and test on Node 18.x and ubuntu-latest Replace `(props)` with `props`
	it('then it renders without issue and calls create element with props', () => {
	const controller = ParallaxController.init({
	scrollAxis: ScrollAxis.vertical,
	export const ParallaxBanner = (
	props: PropsWithChildren<ParallaxBannerProps>
	) => {
	const [targetElement, setTargetElement] =
Check failure on line 21 in src/components/ParallaxBanner/ParallaxBanner.tsx GitHub Actions / Build, lint, and test on Node 18.x and macOS-latest Replace `⏎····useState<HTMLDivElement·\|·null>(null` with `·useState<HTMLDivElement·\|·null>(⏎····null⏎··` Check failure on line 21 in src/components/ParallaxBanner/ParallaxBanner.tsx GitHub Actions / Build, lint, and test on Node 18.x and ubuntu-latest Replace `⏎····useState<HTMLDivElement·\|·null>(null` with `·useState<HTMLDivElement·\|·null>(⏎····null⏎··`
	useState<HTMLDivElement \| null>(null);
	const containerRef = useRef<HTMLDivElement>(null);
	useEffect(() => {

	function renderChildren() {
	if (targetElement) {
	return React.Children.map(props.children, (child) => {
Check failure on line 53 in src/components/ParallaxBanner/ParallaxBanner.tsx GitHub Actions / Build, lint, and test on Node 18.x and macOS-latest Replace `(child)` with `child` Check failure on line 53 in src/components/ParallaxBanner/ParallaxBanner.tsx GitHub Actions / Build, lint, and test on Node 18.x and ubuntu-latest Replace `(child)` with `child`
	const item = child as ReactElement<
	PropsWithChildren<{ targetElement: any }>
	>;
	});
	});

	describe.each(ALL_PARALLAX_PROPS)('when the prop %s is given', (props) => {
Check failure on line 30 in src/components/ParallaxBanner/index.test.tsx GitHub Actions / Build, lint, and test on Node 18.x and macOS-latest Replace `(props)` with `props` Check failure on line 30 in src/components/ParallaxBanner/index.test.tsx GitHub Actions / Build, lint, and test on Node 18.x and ubuntu-latest Replace `(props)` with `props`
	it('then it renders without issue and calls create element with props', () => {
	const controller = ParallaxController.init({
	scrollAxis: ScrollAxis.vertical,
	if (props.scrollContainer && controller.current) {
	controller.current.updateScrollContainer(props.scrollContainer);
	}
	}, [props.scrollContainer, controller.current]);
Check warning on line 26 in src/components/ParallaxProvider/ParallaxProvider.tsx GitHub Actions / Build, lint, and test on Node 18.x and macOS-latest `React Hook useEffect has an unnecessary dependency: 'controller.current'. Either exclude it or remove the dependency array. Mutable values like 'controller.current' aren't valid dependencies because mutating them doesn't re-render the component` Check warning on line 26 in src/components/ParallaxProvider/ParallaxProvider.tsx GitHub Actions / Build, lint, and test on Node 18.x and ubuntu-latest `React Hook useEffect has an unnecessary dependency: 'controller.current'. Either exclude it or remove the dependency array. Mutable values like 'controller.current' aren't valid dependencies because mutating them doesn't re-render the component`

	// disable/enable parallax
	useEffect(() => {
	if (!props.isDisabled && controller.current) {
	controller.current.enableParallaxController();
	}
	}, [props.isDisabled, controller.current]);
Check warning on line 36 in src/components/ParallaxProvider/ParallaxProvider.tsx GitHub Actions / Build, lint, and test on Node 18.x and macOS-latest `React Hook useEffect has an unnecessary dependency: 'controller.current'. Either exclude it or remove the dependency array. Mutable values like 'controller.current' aren't valid dependencies because mutating them doesn't re-render the component` Check warning on line 36 in src/components/ParallaxProvider/ParallaxProvider.tsx GitHub Actions / Build, lint, and test on Node 18.x and ubuntu-latest `React Hook useEffect has an unnecessary dependency: 'controller.current'. Either exclude it or remove the dependency array. Mutable values like 'controller.current' aren't valid dependencies because mutating them doesn't re-render the component`

	// remove the controller when unmounting
	useEffect(() => {
	return () => {
	controller?.current && controller?.current.destroy();
Check failure on line 41 in src/components/ParallaxProvider/ParallaxProvider.tsx GitHub Actions / Build, lint, and test on Node 18.x and macOS-latest `Expected an assignment or function call and instead saw an expression` Check failure on line 41 in src/components/ParallaxProvider/ParallaxProvider.tsx GitHub Actions / Build, lint, and test on Node 18.x and ubuntu-latest `Expected an assignment or function call and instead saw an expression`
	};
	}, []);
	import { ParallaxElementConfig } from 'parallax-controller';
	import { removeUndefinedObjectKeys } from '../utils/removeUndefinedObjectKeys';

	export function getIsolatedParallaxProps(props: any): {
Check failure on line 4 in src/helpers/getIsolatedParallaxProps.ts GitHub Actions / Build, lint, and test on Node 18.x and macOS-latest Replace `props:·any` with `⏎··props:·any⏎` Check failure on line 4 in src/helpers/getIsolatedParallaxProps.ts GitHub Actions / Build, lint, and test on Node 18.x and ubuntu-latest Replace `props:·any` with `⏎··props:·any⏎`
	parallaxProps: ParallaxElementConfig;
	rest: Record<string, any>;
	} {
	controller?.removeElementById(newElement.id);
	}
	};
	}, []);
Check warning on line 38 in src/hooks/useParallax.ts GitHub Actions / Build, lint, and test on Node 18.x and macOS-latest `React Hook useEffect has missing dependencies: 'controller' and 'parallaxProps'. Either include them or remove the dependency array` Check warning on line 38 in src/hooks/useParallax.ts GitHub Actions / Build, lint, and test on Node 18.x and ubuntu-latest `React Hook useEffect has missing dependencies: 'controller' and 'parallaxProps'. Either include them or remove the dependency array`

	// update element
	useEffect(() => {
	controller?.updateElementPropsById(element.id, parallaxProps);
	}
	}
	}, [
Check warning on line 50 in src/hooks/useParallax.ts GitHub Actions / Build, lint, and test on Node 18.x and macOS-latest `React Hook useEffect has missing dependencies: 'controller', 'element', and 'parallaxProps'. Either include them or remove the dependency array` Check warning on line 50 in src/hooks/useParallax.ts GitHub Actions / Build, lint, and test on Node 18.x and ubuntu-latest `React Hook useEffect has missing dependencies: 'controller', 'element', and 'parallaxProps'. Either include them or remove the dependency array`
	props.disabled,
	props.easing,
	props.endScroll,
	export function createElementMock(properties = {}, methods = {}) {
	const element = document.createElement('div');
	Object.keys(properties).map((key) => {
Check failure on line 3 in src/testUtils/createElementMock.ts GitHub Actions / Build, lint, and test on Node 18.x and macOS-latest Replace `(key)` with `key` Check warning on line 3 in src/testUtils/createElementMock.ts GitHub Actions / Build, lint, and test on Node 18.x and macOS-latest `Expected to return a value in arrow function` Check failure on line 3 in src/testUtils/createElementMock.ts GitHub Actions / Build, lint, and test on Node 18.x and ubuntu-latest Replace `(key)` with `key` Check warning on line 3 in src/testUtils/createElementMock.ts GitHub Actions / Build, lint, and test on Node 18.x and ubuntu-latest `Expected to return a value in arrow function`
	Object.defineProperty(element, key, {
	// @ts-ignore
	value: properties[key],
	});
	});

	Object.keys(methods).map((key) => {
Check failure on line 11 in src/testUtils/createElementMock.ts GitHub Actions / Build, lint, and test on Node 18.x and macOS-latest Replace `(key)` with `key` Check warning on line 11 in src/testUtils/createElementMock.ts GitHub Actions / Build, lint, and test on Node 18.x and macOS-latest `Expected to return a value in arrow function` Check failure on line 11 in src/testUtils/createElementMock.ts GitHub Actions / Build, lint, and test on Node 18.x and ubuntu-latest Replace `(key)` with `key` Check warning on line 11 in src/testUtils/createElementMock.ts GitHub Actions / Build, lint, and test on Node 18.x and ubuntu-latest `Expected to return a value in arrow function`
	// @ts-ignore
	element[key] = methods[key];
	});
	export function removeUndefinedObjectKeys(obj: { [key: string]: any }) {
	Object.keys(obj).forEach((key) =>
Check failure on line 2 in src/utils/removeUndefinedObjectKeys.ts GitHub Actions / Build, lint, and test on Node 18.x and macOS-latest Replace `(key)·=>⏎····obj[key]·===·undefined·&&·delete·obj[key]⏎··` with `key·=>·obj[key]·===·undefined·&&·delete·obj[key]` Check failure on line 2 in src/utils/removeUndefinedObjectKeys.ts GitHub Actions / Build, lint, and test on Node 18.x and ubuntu-latest Replace `(key)·=>⏎····obj[key]·===·undefined·&&·delete·obj[key]⏎··` with `key·=>·obj[key]·===·undefined·&&·delete·obj[key]`
	obj[key] === undefined && delete obj[key]
	);
	return obj;