build(deps): upgrade deps and fix issues with storybook package hoisting

.npmrc

@@ -0,0 +1,5 @@
+auto-install-peers=true
+public-hoist-pattern[]=@types*
+public-hoist-pattern[]=@storybook*
+public-hoist-pattern[]=@testing-library*
+public-hoist-pattern[]=jest*

.prettierrc.js

@@ -1,4 +1,4 @@
-/** @type {import('prettier').Options} */
+/** @type {import('@ianvs/prettier-plugin-sort-imports').PrettierConfig} */
 module.exports = {
   plugins: [require.resolve('@ianvs/prettier-plugin-sort-imports')],
   printWidth: 100,

docs/example/package.json

@@ -14,15 +14,15 @@
     "react-compare-slider": "latest"
   },
   "devDependencies": {
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.1",
-    "@vitejs/plugin-react": "^4.0.0",
-    "modern-normalize": "^1.1.0",
+    "@types/react": "^18.2.21",
+    "@types/react-dom": "^18.2.7",
+    "@vitejs/plugin-react": "^4.0.4",
+    "modern-normalize": "^2.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.11.0",
-    "typescript": "^5.0.4",
-    "vite": "^4.3.3",
-    "vite-plugin-ssr": "^0.4.118"
+    "react-router-dom": "^6.15.0",
+    "typescript": "^5.2.2",
+    "vite": "^4.4.9",
+    "vite-plugin-ssr": "^0.4.138"
   }
 }

docs/storybook/.eslintrc

@@ -1,8 +1,13 @@
 {
+  "root": false,
   "extends": "../../.eslintrc",
+  "parserOptions": {
+    "project": true
+  },
   "rules": {
     "no-console": 0,
     "@typescript-eslint/explicit-function-return-type": 0,
+    "@typescript-eslint/no-explicit-any": "warn",
     "react/react-in-jsx-scope": 0
   }
 }

docs/storybook/content/stories/00-demos/00-index.stories.tsx

@@ -1,4 +1,4 @@
-import type { StoryFn } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
 import type { ReactCompareSliderProps } from 'react-compare-slider';
 import {
@@ -7,15 +7,15 @@ import {
   useReactCompareSliderRef,
 } from 'react-compare-slider';
 
-import { SLIDER_ROOT_TEST_ID } from '../99-tests/utils';
+import { SLIDER_ROOT_TEST_ID } from '../99-tests/test-utils.test';
 import { argTypes, args } from '../config';
 
 export default {
   title: 'Demos',
   component: ReactCompareSlider,
   args,
   argTypes,
-};
+} as Meta;
 
 export const Images: StoryFn<ReactCompareSliderProps> = (props) => {
   return (
@@ -298,6 +298,57 @@ export const Portrait: StoryFn<ReactCompareSliderProps> = ({ portrait = true, ..
 
 Portrait.args = { portrait: true };
 
+export const Transition: StoryFn<ReactCompareSliderProps> = (props) => {
+  const reactCompareSliderRef = useReactCompareSliderRef();
+
+  React.useEffect(() => {
+    const fireTransition = async () => {
+      await new Promise((resolve) =>
+        setTimeout(() => {
+          reactCompareSliderRef.current?.setPosition(90);
+          resolve(true);
+        }, 500),
+      );
+      await new Promise((resolve) =>
+        setTimeout(() => {
+          reactCompareSliderRef.current?.setPosition(10);
+          resolve(true);
+        }, 500),
+      );
+      await new Promise((resolve) =>
+        setTimeout(() => {
+          reactCompareSliderRef.current?.setPosition(50);
+          resolve(true);
+        }, 500),
+      );
+    };
+
+    fireTransition();
+  }, []);
+
+  return (
+    <ReactCompareSlider
+      {...props}
+      ref={reactCompareSliderRef}
+      itemOne={
+        <ReactCompareSliderImage
+          src="https://github.com/nerdyman/stuff/raw/main/libs/react-compare-slider/demo-images/seattle-skyline-1.jpg"
+          alt="Image one"
+        />
+      }
+      itemTwo={
+        <ReactCompareSliderImage
+          src="https://github.com/nerdyman/stuff/raw/main/libs/react-compare-slider/demo-images/seattle-skyline-2.jpg"
+          alt="Image two"
+        />
+      }
+      style={{ width: '100%', height: '100vh' }}
+    />
+  );
+};
+
+Transition.args = { position: 0, transition: '.5s ease-in-out' };
+
 export const Position: StoryFn<ReactCompareSliderProps> = ({ position = 25, ...props }) => (
   <ReactCompareSlider
     {...props}

docs/storybook/content/stories/00-demos/02-edge-cases.stories.tsx

@@ -1,5 +1,4 @@
-import type { StoryFn } from '@storybook/react';
-import React from 'react';
+import type { Meta, StoryFn } from '@storybook/react';
 import type { ReactCompareSliderDetailedProps } from 'react-compare-slider';
 import { ReactCompareSlider, ReactCompareSliderImage } from 'react-compare-slider';
 
@@ -10,7 +9,7 @@ export default {
   component: ReactCompareSlider,
   args,
   argTypes,
-};
+} as Meta;
 
 export const Scaled: StoryFn<ReactCompareSliderDetailedProps> = ({ style, ...props }) => (
   <ReactCompareSlider

docs/storybook/content/stories/01-handle/00-react-compare-slider-handle.stories.tsx

@@ -1,5 +1,4 @@
 import type { Meta, StoryFn } from '@storybook/react';
-import React from 'react';
 import type { ReactCompareSliderProps } from 'react-compare-slider';
 import {
   ReactCompareSlider,

docs/storybook/content/stories/02-recipies/00-index.stories.tsx

@@ -1,4 +1,4 @@
-import type { StoryFn } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
 import type { ReactCompareSliderProps } from 'react-compare-slider';
 import { ReactCompareSlider, ReactCompareSliderImage } from 'react-compare-slider';
@@ -10,7 +10,7 @@ export default {
   component: ReactCompareSlider,
   args,
   argTypes,
-};
+} as Meta;
 
 export const DetectTouchDevices: StoryFn<ReactCompareSliderProps> = (props) => {
   const isTouchDevice = window.matchMedia('(pointer: coarse)').matches;

docs/storybook/content/stories/02-recipies/01-google-maps.stories.tsx

@@ -1,6 +1,6 @@
 import type { GoogleMapProps } from '@react-google-maps/api';
 import { GoogleMap as GoogleMapBase, useJsApiLoader } from '@react-google-maps/api';
-import type { StoryObj } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
 import type { ReactCompareSliderDetailedProps } from 'react-compare-slider';
 import { ReactCompareSlider } from 'react-compare-slider';
@@ -12,7 +12,7 @@ export default {
   component: ReactCompareSlider,
   args,
   argTypes,
-};
+} as Meta;
 
 const useGoogleMap = () => {
   const [map, setMap] = React.useState<any>(null);
@@ -44,7 +44,7 @@ const sharedMapProps: GoogleMapProps = {
   },
 };
 
-export const GoogleMaps: StoryObj<ReactCompareSliderDetailedProps> = (props) => {
+export const GoogleMaps: StoryFn<ReactCompareSliderDetailedProps> = (props) => {
   const { isLoaded } = useJsApiLoader({
     id: 'google-map-script',
     googleMapsApiKey: 'AIzaSyAoRpWSXL16EnnFQqFfkRtfMCKJJTMzvk8',

docs/storybook/content/stories/99-tests/default.test.stories.tsx

@@ -2,7 +2,7 @@ import { expect } from '@storybook/jest';
 import type { Meta } from '@storybook/react';
 import { waitFor, within } from '@storybook/testing-library';
 
-import { Template, getArgs } from './utils';
+import { Template, getArgs } from './test-utils.test';
 
 export default {
   title: 'Tests/Browser/Default',
@@ -14,7 +14,7 @@ Default.args = getArgs();
 
 Default.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
-  const sliderRoot = canvas.queryByTestId(Default.args['data-testid']) as Element;
+  const sliderRoot = canvas.queryByTestId(Default.args?.['data-testid']) as Element;
 
   // Should have elements on mount.
   await new Promise((resolve) => setTimeout(resolve, 500));
@@ -23,5 +23,5 @@ Default.play = async ({ canvasElement }) => {
   await waitFor(() => expect(canvas.getByAltText('two')).toBeInTheDocument());
 
   // Should have initial position on mount.
-  await waitFor(() => expect(Default.args.onPositionChange).toHaveBeenLastCalledWith(50));
+  await waitFor(() => expect(Default.args?.onPositionChange).toHaveBeenLastCalledWith(50));
 };

docs/storybook/content/stories/99-tests/disabled.test.stories.tsx

@@ -1,16 +1,15 @@
 import { expect } from '@storybook/jest';
 import type { Meta } from '@storybook/react';
 import { userEvent, waitFor, within } from '@storybook/testing-library';
-import React from 'react';
 
-import { Template, getArgs } from './utils';
+import { Template, getArgs } from './test-utils.test';
 
 export default {
   title: 'Tests/Browser/Disabled',
 } as Meta;
 
-export const Disabled = (args) => (
-  <div dir="rtl">
+export const Disabled: typeof Template = (args) => (
+  <div>
     <button type="button" data-testid="test-button">
       Button
     </button>
@@ -21,8 +20,9 @@ export const Disabled = (args) => (
 Disabled.args = getArgs({ style: { width: 200, height: 200 }, disabled: true });
 
 Disabled.play = async ({ canvasElement }) => {
+  const user = userEvent.setup();
   const canvas = within(canvasElement);
-  const sliderRoot = canvas.queryByTestId(Disabled.args['data-testid']) as Element;
+  const sliderRoot = canvas.queryByTestId(Disabled.args?.['data-testid']) as Element;
 
   // Should have elements on mount.
   await new Promise((resolve) => setTimeout(resolve, 500));
@@ -34,27 +34,28 @@ Disabled.play = async ({ canvasElement }) => {
   expect(canvas.getByRole('slider')).toBeDisabled();
 
   // Focus the test button.
-  userEvent.click(testButton);
+  await user.click(testButton);
   expect((document.activeElement as HTMLElement).getAttribute('data-testid')).toBe('test-button');
   expect(canvas.getByRole('slider').getAttribute('aria-valuenow')).toBe('50');
 
   // Click on the canvas and move pointer - position and focused element should not be slider.
-  userEvent.click(sliderRoot, { clientX: 200, clientY: 200 });
-  expect((document.activeElement as HTMLElement).tagName).toBe('BODY');
+  await user.click(sliderRoot);
+  expect((document.activeElement as HTMLElement).getAttribute('data-testid')).toBe('test-button');
   expect(canvas.getByRole('slider').getAttribute('aria-valuenow')).toBe('50');
 
   // Click on the handle and move pointer - position and focused element should not be slider.
-  userEvent.click(canvas.getByRole('slider'), { clientX: 20, clientY: 20 });
-  expect((document.activeElement as HTMLElement).tagName).toBe('BODY');
+  await user.click(canvas.getByRole('slider'));
+  expect((document.activeElement as HTMLElement).getAttribute('data-testid')).toBe('test-button');
   expect(canvas.getByRole('slider').getAttribute('aria-valuenow')).toBe('50');
 
   // Click on the handle and press arrow key - position and focused element should not be slider.
-  userEvent.click(canvas.getByRole('slider'), { clientX: 125, clientY: 125 });
-  expect((document.activeElement as HTMLElement).tagName).toBe('BODY');
+  await user.click(canvas.getByRole('slider'));
+  expect((document.activeElement as HTMLElement).getAttribute('data-testid')).toBe('test-button');
   expect(canvas.getByRole('slider').getAttribute('aria-valuenow')).toBe('50');
 
   // Move handle right.
-  userEvent.keyboard('{ArrowRight}');
-  expect((document.activeElement as HTMLElement).tagName).toBe('BODY');
+  await user.click(canvas.getByRole('slider'));
+  await user.keyboard('{ArrowRight}');
+  expect((document.activeElement as HTMLElement).getAttribute('data-testid')).toBe('test-button');
   expect(canvas.getByRole('slider').getAttribute('aria-valuenow')).toBe('50');
 };

docs/storybook/content/stories/99-tests/initial-position.test.stories.tsx

@@ -0,0 +1,31 @@
+import { expect } from '@storybook/jest';
+import type { Meta } from '@storybook/react';
+import { waitFor, within } from '@storybook/testing-library';
+
+import { Template, getArgs } from './test-utils.test';
+
+export default {
+  title: 'Tests/Browser/Initial Position',
+} as Meta;
+
+export const StartAt0 = Template.bind({});
+StartAt0.args = getArgs({ position: 0 });
+
+StartAt0.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const sliderRoot = canvas.queryByTestId(StartAt100.args?.['data-testid']) as Element;
+
+  await waitFor(() => expect(sliderRoot).toBeInTheDocument());
+  await waitFor(() => expect(canvas.getByRole('slider').getAttribute('aria-valuenow')).toBe('0'));
+};
+
+export const StartAt100 = Template.bind({});
+StartAt100.args = getArgs({ position: 100 });
+
+StartAt100.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const sliderRoot = canvas.queryByTestId(StartAt100.args?.['data-testid']) as Element;
+
+  await waitFor(() => expect(sliderRoot).toBeInTheDocument());
+  await waitFor(() => expect(canvas.getByRole('slider').getAttribute('aria-valuenow')).toBe('100'));
+};