Added React 19 compability and Tree shaking support (#40)

Author: angry-beaver

.storybook/main.ts

@@ -1,21 +1,13 @@
-import type { StorybookConfig } from '@storybook/react-webpack5';
+import type { StorybookConfig } from '@storybook/react-vite'
 
 const config: StorybookConfig = {
   framework: {
-    name: '@storybook/react-webpack5',
-    options: {
-      builder: {
-        useSWC: true,
-      },
-    },
+    name: '@storybook/react-vite',
+    options: {},
   },
 
   stories: [`${process.cwd()}/stories/**/*.stories.@(js|tsx)`],
-  addons: ['@storybook/addon-essentials', '@storybook/addon-links', '@storybook/preset-scss', '@storybook/addon-webpack5-compiler-swc'],
-
-  docs: {
-    autodocs: false,
-  },
+  addons: ['@storybook/addon-links'],
 };
 
 export default config;

.swcrc

@@ -2,18 +2,32 @@
   "name": "react-linear-gradient-picker",
   "version": "4.0.0",
   "description": "React linear gradient picker",
-  "main": "dist/index.js",
-  "types": "dist/src/index.d.ts",
+  "module": "./dist/index.mjs",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./index.css": "./dist/index.css",
+    "./package.json": "./package.json",
+    "./dist/*": "./dist/*"
+  },
   "scripts": {
     "storybook": "storybook dev -p 7006",
     "build-storybook": "storybook build",
-    "test": "jest",
-    "test:watch": "jest --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
     "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
     "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md,scss}\"",
     "fix": "yarn format && yarn lint:fix",
-    "build": "rspack build",
+    "build": "vite build",
     "typecheck": "tsc --noEmit",
     "ci": "yarn lint && yarn typecheck && yarn test && yarn build",
     "deploy-storybook": "storybook-to-ghpages",
@@ -35,59 +49,41 @@
   },
   "homepage": "https://github.com/odedglas/react-linear-gradient-picker#readme",
   "peerDependencies": {
-    "react": "^16.9.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.9.0 || ^17.0.0 || ^18.0.0"
+    "react": "^16.9.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^16.9.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.0",
-    "@babel/plugin-transform-runtime": "^7.18.0",
-    "@babel/preset-env": "^7.18.0",
-    "@babel/preset-react": "^7.17.0",
-    "@babel/preset-typescript": "^7.23.3",
-    "@rspack/cli": "^1.2.8",
-    "@rspack/core": "^1.2.8",
-    "@storybook/addon-essentials": "^7.6.17",
-    "@storybook/addon-links": "^7.6.17",
-    "@storybook/addon-webpack5-compiler-swc": "^3.0.0",
-    "@storybook/cli": "^7.6.17",
-    "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^7.6.17",
-    "@storybook/react-webpack5": "^7.6.17",
+    "@storybook/addon-links": "^9.1.5",
+    "@storybook/react-vite": "^9.1.5",
     "@storybook/storybook-deployer": "^2.8.1",
-    "@swc/helpers": "^0.5.3",
-    "@testing-library/jest-dom": "^6.1.5",
-    "@testing-library/react": "^14.1.2",
-    "@testing-library/user-event": "^14.5.1",
-    "@types/jest": "^29.5.12",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.8.0",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/node": "^22.13.14",
     "@types/react": "^19.0.12",
     "@types/react-color": "^3.0.13",
     "@types/react-dom": "^19.0.4",
     "@typescript-eslint/eslint-plugin": "^8.28.0",
     "@typescript-eslint/parser": "^8.28.0",
-    "babel-jest": "^29.7.0",
-    "classnames": "^2.3.1",
-    "css-loader": "^6.7.1",
+    "@vitejs/plugin-react": "^4.6.0",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-react": "^7.34.0",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
+    "jsdom": "^26.1.0",
     "prettier": "^3.2.5",
-    "prop-types": "^15.7.2",
     "rc-color-picker": "^1.1.5",
     "react": "^18.2.0",
     "react-color": "^2.12.0",
     "react-dom": "^18.2.0",
     "sass": "^1.52.1",
-    "sass-loader": "^8.0.2",
-    "storybook": "^7.6.17",
-    "style-loader": "^1.0.0",
-    "svg-url-loader": "^3.0.2",
-    "ts-node": "^10.9.2",
-    "typescript": "^5.8.2"
-  }
+    "storybook": "^9.1.5",
+    "typescript": "^5.8.2",
+    "vite": "^7.1.5",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^3.2.4"
+  },
+  "packageManager": "[email protected]+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610"
 }

__mocks__/fileMock.js

@@ -1,4 +1,4 @@
-import { Color } from './types';
+import type { Color } from './types';
 
 export const COLORS: Color[] = [
   { value: '#000000', name: 'black' },

babel.config.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { COLORS } from './constants';
-import { ColorPickerProps } from './types';
+import type { ColorPickerProps } from './types';
 import './index.scss';
 
 const ColorPicker: React.FC<ColorPickerProps> = ({ onSelect }) => (