Added React 19 compability and Tree shaking support

.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;

package.json

@@ -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": "yarn@1.22.22+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610"
 }

src/components/ColorPicker/constants.ts

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

src/components/ColorPicker/index.tsx

@@ -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 }) => (

src/components/ColorStop/hooks/useStopDragging.ts

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { DIRECTIONS } from '../../GradientPicker/constants';
-import useDragging, { ReactDragEvent } from '../../hooks/useDragging';
-import { UseStopDraggingProps, DragCoordinates } from '../types';
+import useDragging, { type ReactDragEvent } from '../../hooks/useDragging';
+import type { UseStopDraggingProps, DragCoordinates } from '../types';
 
 /**
  * Limits a client drag movement within given min / max

src/components/ColorStop/index.tsx

@@ -2,7 +2,7 @@ import React, { useState, useRef, useEffect } from 'react';
 import { noop } from '../../lib';
 import { DIRECTIONS } from '../GradientPicker/constants';
 import useStopDragging from './hooks/useStopDragging';
-import { ColorStopProps } from './types';
+import type { ColorStopProps } from './types';
 import './index.scss';
 
 const ColorStop: React.FC<ColorStopProps> = ({ stop, limits, onPosChange, onDeleteColor, onDragStart = noop, onDragEnd = noop, direction }) => {

src/components/ColorStop/types.ts

@@ -1,5 +1,5 @@
-import { RefObject } from 'react';
-import { ColorStop, Limits, DragCoordinates } from '../../types';
+import type { RefObject } from 'react';
+import type { ColorStop, Limits, DragCoordinates } from '../../types';
 import { DIRECTIONS } from '../GradientPicker/constants';
 
 export type { DragCoordinates };

src/components/ColorStopsHolder/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import ColorStop from '../ColorStop';
 import { DIRECTIONS } from '../GradientPicker/constants';
 import { COLOR_STOP_HOLDER_CLASSNAME } from './constants';
-import { ColorStopsHolderProps, StopsHolderStyle } from './types';
+import type { ColorStopsHolderProps, StopsHolderStyle } from './types';
 
 const getStopsHolderStyle = (width: number, disabled: boolean, direction: (typeof DIRECTIONS)[keyof typeof DIRECTIONS]): StopsHolderStyle => ({
   width: direction === DIRECTIONS.HORIZONTAL ? width : 17,

src/components/ColorStopsHolder/types.ts

@@ -1,4 +1,4 @@
-import { ColorStop, Limits } from '../../types';
+import type { ColorStop, Limits } from '../../types';
 import { DIRECTIONS } from '../GradientPicker/constants';
 
 export interface ColorStopsHolderProps {

src/components/GradientPicker/__tests__/GradientPicker.test.tsx

@@ -1,5 +1,4 @@
 import { render, screen } from '@testing-library/react';
-import React from 'react';
 
 import GradientPicker from '../index';
 
@@ -12,8 +11,8 @@ describe('GradientPicker', () => {
         { id: 1, color: '#ff0000', offset: 0, opacity: 1 },
         { id: 2, color: '#0000ff', offset: 1, opacity: 1 },
       ],
-      onPaletteChange: jest.fn(),
-      onColorStopSelect: jest.fn(),
+      onPaletteChange: vi.fn(),
+      onColorStopSelect: vi.fn(),
     };
 
     render(<GradientPicker {...defaultProps} />);

src/components/GradientPicker/index.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useMemo, useRef, useCallback } from 'react';
 import { sortPalette, noop } from '../../lib';
-import { ColorStop } from '../../types';
+import type { ColorStop } from '../../types';
 import ColorPicker from '../ColorPicker';
 import ColorStopsHolder from '../ColorStopsHolder';
 import { useClickOutside } from '../hooks/useClickOutside';
@@ -19,7 +19,7 @@ import {
   IGNORED_CLICK_OUTSIDE_SELECTORS,
   COLOR_PICKER_MODS,
 } from './constants';
-import { GradientPickerProps, PaletteColor, PaletteToStopsParams, ColorAddParams, StopPosChangeParams } from './types';
+import type { GradientPickerProps, PaletteColor, PaletteToStopsParams, ColorAddParams, StopPosChangeParams } from './types';
 import './index.scss';
 
 const nextColorId = (palette: PaletteColor[]): number => {

src/components/GradientPicker/types.ts

@@ -1,4 +1,4 @@
-import { ColorStop } from '../../types';
+import type { ColorStop } from '../../types';
 import { DIRECTIONS, COLOR_PICKER_MODS } from './constants';
 
 export interface PaletteColor extends ColorStop {

src/components/GradientPickerPopover/index.tsx

@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
 import { getGradientPreview } from '../../lib';
-import { GRADIENT_TYPES, GradientType } from '../../types';
+import { GRADIENT_TYPES, type GradientType } from '../../types';
 import AnglePicker from '../AnglePicker';
 import GradientPicker from '../GradientPicker';
 import GradientTypePicker from '../GradientTypePicker';
-import { GradientPickerPopoverProps } from './types';
+import type { GradientPickerPopoverProps } from './types';
 import './index.scss';
 
 const defaultTrigger = (background: string, togglePicker: () => void): React.ReactElement => (

src/components/GradientPickerPopover/types.ts

@@ -1,5 +1,5 @@
-import { GradientType } from '../../types';
-import { PaletteColor } from '../GradientPicker/types';
+import type { GradientType } from '../../types';
+import type { PaletteColor } from '../GradientPicker/types';
 
 export interface GradientPickerPopoverProps {
   palette: Omit<PaletteColor, 'id'>[];