Update deps and fix React deprecation errors

.storybook/main.js

@@ -1,4 +1,17 @@
 module.exports = {
   stories: ['../stories/**/*.stories.js'],
-  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
+  addons: [
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    '@storybook/addon-webpack5-compiler-babel'
+  ],
+
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {}
+  },
+
+  docs: {
+    autodocs: true
+  }
 };

package.json

@@ -1,18 +1,18 @@
 {
   "name": "react-input-slider",
-  "version": "6.0.1",
+  "version": "7.0.0",
   "description": "React input slider component",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "types": "index.d.ts",
   "sideEffects": false,
   "scripts": {
     "build": "rollup -c",
-    "test": "NODE_ENV=production jest --coverage",
+    "test": "NODE_ENV=test jest --coverage",
     "prepublishOnly": "npm test && npm run build",
     "watch": "rollup -cw",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "repository": {
     "type": "git",
@@ -35,31 +35,36 @@
   "homepage": "https://swiftcarrot.dev/react-input-slider",
   "license": "MIT",
   "dependencies": {
-    "@babel/runtime": "^7.9.2",
-    "@emotion/core": "^10.0.14"
+    "@babel/runtime": "^7.24.5",
+    "@emotion/react": "^11.11.4"
   },
   "devDependencies": {
-    "@babel/core": "^7.9.0",
-    "@rollup/plugin-babel": "^5.0.0",
-    "@rollup/plugin-commonjs": "^11.1.0",
-    "@rollup/plugin-node-resolve": "^7.1.3",
-    "@storybook/addon-actions": "^5.3.18",
-    "@storybook/addon-links": "^5.3.18",
-    "@storybook/addons": "^5.3.18",
-    "@storybook/react": "^5.3.18",
-    "babel-jest": "^25.2.4",
-    "babel-loader": "^8.1.0",
-    "babel-preset-swiftcarrot": "^1.1.0",
-    "jest": "^25.2.4",
-    "prettier": "^1.19.1",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "react-test-renderer": "^16.8.6",
-    "rollup": "^2.8.2"
+    "@babel/core": "^7.24.5",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@storybook/addon-actions": "^8.0.10",
+    "@storybook/addon-links": "^8.0.10",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/addons": "^7.6.17",
+    "@storybook/react": "^8.0.10",
+    "@storybook/react-webpack5": "^8.0.10",
+    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/react": "^15.0.6",
+    "babel-jest": "^29.7.0",
+    "babel-loader": "^9.1.3",
+    "babel-preset-swiftcarrot": "^1.1.2",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "prettier": "^3.2.5",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rollup": "^4.17.2",
+    "storybook": "^8.0.10"
   },
   "peerDependencies": {
-    "react": ">=16",
-    "react-dom": ">=16"
+    "react": ">=18",
+    "react-dom": ">=18"
   },
   "jest": {
     "collectCoverage": true,

rollup.config.js → rollup.config.mjs

@@ -1,8 +1,9 @@
 import babel from '@rollup/plugin-babel';
 import commonjs from '@rollup/plugin-commonjs';
 import nodeResolve from '@rollup/plugin-node-resolve';
-import pkg from './package.json';
+import { readFileSync } from 'fs';
 
+const pkg = JSON.parse(readFileSync('./package.json', { encoding: 'utf8' }));
 const input = './src/index.js';
 const external = id => !id.startsWith('.') && !id.startsWith('/');
 

src/__tests__/slider.js

@@ -1,84 +1,99 @@
+/**
+ * @jest-environment jsdom
+ */
+
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 import Slider from '../slider';
+import '@testing-library/jest-dom';
 
-test('x', () => {
-  const component = renderer.create(<Slider />);
-  expect(component.toJSON()).toMatchInlineSnapshot(`
-    <div
-      className="css-mcm35l"
-      onMouseDown={[Function]}
-      onTouchStart={[Function]}
-    >
-      <div
-        className="css-c5m0sj"
-        style={
-          Object {
-            "width": "50%",
-          }
-        }
-      />
+describe('Slider Component', () => {
+  test('renders correctly with default props', () => {
+    const { container } = render(<Slider />);
+    const slider = container.firstChild;
+
+    expect(slider).toHaveClass('css-gvm8wn-Slider');
+    expect(slider).toMatchSnapshot(`
       <div
-        onClick={[Function]}
+        className="css-mcm35l"
         onMouseDown={[Function]}
         onTouchStart={[Function]}
-        style={
-          Object {
-            "left": "50%",
-            "position": "absolute",
-            "top": "50%",
-            "transform": "translate(-50%, -50%)",
-          }
-        }
       >
         <div
-          className="css-p9m01q"
+          className="css-c5m0sj"
+          style={
+            Object {
+              "width": "50%",
+            }
+          }
         />
+        <div
+          onClick={[Function]}
+          onMouseDown={[Function]}
+          onTouchStart={[Function]}
+          style={
+            Object {
+              "left": "50%",
+              "position": "absolute",
+              "top": "50%",
+              "transform": "translate(-50%, -50%)",
+            }
+          }
+        >
+          <div
+            className="css-p9m01q"
+          />
+        </div>
       </div>
-    </div>
   `);
-});
+  });
 
-test('y', () => {
-  const component = renderer.create(<Slider axis="y" />);
-  expect(component.toJSON()).toMatchInlineSnapshot(`
-    <div
-      className="css-1munbi2"
-      onMouseDown={[Function]}
-      onTouchStart={[Function]}
-    >
-      <div
-        className="css-ee7l6q"
-        style={
-          Object {
-            "height": "50%",
-          }
-        }
-      />
+  test('renders correctly with axis="y"', () => {
+    const { container } = render(<Slider axis="y" />);
+    const slider = container.firstChild;
+
+    expect(slider).toHaveClass('css-11fxyc7-Slider');
+    expect(slider).toMatchSnapshot(`
       <div
-        onClick={[Function]}
+        className="css-1munbi2"
         onMouseDown={[Function]}
         onTouchStart={[Function]}
-        style={
-          Object {
-            "left": "50%",
-            "position": "absolute",
-            "top": "50%",
-            "transform": "translate(-50%, -50%)",
-          }
-        }
       >
         <div
-          className="css-p9m01q"
+          className="css-ee7l6q"
+          style={
+            Object {
+              "height": "50%",
+            }
+          }
         />
+        <div
+          onClick={[Function]}
+          onMouseDown={[Function]}
+          onTouchStart={[Function]}
+          style={
+            Object {
+              "left": "50%",
+              "position": "absolute",
+              "top": "50%",
+              "transform": "translate(-50%, -50%)",
+            }
+          }
+        >
+          <div
+            className="css-p9m01q"
+          />
+        </div>
       </div>
-    </div>
   `);
-});
+  });
+
+  test('renders correctly with axis="xy"', () => {
+    const { container } = render(<Slider axis="xy" />);
+    const slider = container.firstChild;
 
-test('xy', () => {
-  const component = renderer.create(<Slider axis="xy" />);
-  expect(component.toJSON()).toMatchInlineSnapshot(`
+    expect(slider).toHaveClass('css-1ed3i9o-Slider');
+    expect(slider).toMatchSnapshot(`
     <div
       className="css-1rhaxo2"
       onMouseDown={[Function]}
@@ -107,4 +122,5 @@ test('xy', () => {
       </div>
     </div>
   `);
+  });
 });

src/slider.js

@@ -1,26 +1,26 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { useRef } from 'react';
 import { getClientPosition } from './utils';
 import defaultStyles from './styles';
 
 const Slider = ({
-  disabled,
-  axis,
-  x,
-  y,
-  xmin,
-  xmax,
-  ymin,
-  ymax,
-  xstep,
-  ystep,
+  disabled = false,
+  axis = 'x',
+  x = 50,
+  y = 50,
+  xmin = 0,
+  xmax = 100,
+  ymin = 0,
+  ymax = 100,
+  xstep = 1,
+  ystep = 1,
   onChange,
   onDragStart,
   onDragEnd,
-  xreverse,
-  yreverse,
-  styles: customStyles,
+  xreverse = false,
+  yreverse = false,
+  styles: customStyles = {},
   ...props
 }) => {
   const container = useRef(null);
@@ -220,20 +220,4 @@ const Slider = ({
   );
 };
 
-Slider.defaultProps = {
-  disabled: false,
-  axis: 'x',
-  x: 50,
-  xmin: 0,
-  xmax: 100,
-  y: 50,
-  ymin: 0,
-  ymax: 100,
-  xstep: 1,
-  ystep: 1,
-  xreverse: false,
-  yreverse: false,
-  styles: {}
-};
-
 export default Slider;