Update:

Webpack
Storybook
eslint
node-sass -> sass

Author: odeadglaz

.nvmrc

@@ -0,0 +1 @@
+14

.storybook/addons.js

@@ -0,0 +1,17 @@
+const baseStorybookConfig = {
+    core: {
+        builder: 'webpack5'
+    },
+    stories: [
+        `${process.cwd()}/stories/**/*.stories.@(js|tsx)`
+    ],
+    reactOptions: {
+        fastRefresh: true
+    },
+    addons: [
+        '@storybook/addon-essentials',
+        '@storybook/addon-links'
+    ]
+};
+
+module.exports = baseStorybookConfig;

.storybook/config.js

@@ -1,6 +1,6 @@
 {
   "name": "react-linear-gradient-picker",
-  "version": "2.0.3",
+  "version": "2.0.4-beta.1",
   "description": "React linear gradient picker",
   "main": "dist/index.js",
   "scripts": {
@@ -26,25 +26,25 @@
   },
   "homepage": "https://github.com/odedglas/react-linear-gradient-picker#readme",
   "devDependencies": {
-    "@babel/core": "^7.6.0",
-    "@babel/plugin-transform-runtime": "^7.6.0",
-    "@babel/preset-env": "^7.6.0",
-    "@babel/preset-react": "^7.0.0",
-    "@storybook/addon-actions": "^5.2.1",
-    "@storybook/addon-links": "^5.2.1",
-    "@storybook/addons": "^5.2.1",
-    "@storybook/react": "^5.2.1",
+    "@babel/core": "^7.18.0",
+    "@babel/plugin-transform-runtime": "^7.18.0",
+    "@babel/preset-env": "^7.18.0",
+    "@babel/preset-react": "^7.17.0",
+    "@storybook/addon-essentials": "^6.4.0",
+    "@storybook/addon-links": "^6.4.0",
+    "@storybook/manager-webpack5": "^6.4.0",
+    "@storybook/cli": "^6.4.0",
+    "@storybook/react": "^6.4.0",
     "@storybook/storybook-deployer": "^2.8.1",
-    "babel-loader": "^8.0.6",
-    "classnames": "^2.2.6",
-    "css-loader": "^3.2.0",
-    "eslint": "^6.4.0",
-    "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-react": "^7.14.3",
-    "eslint-plugin-react-hooks": "^2.0.1",
-    "lodash": "^4.17.15",
-    "mini-css-extract-plugin": "^0.8.0",
-    "node-sass": "^4.13.0",
+    "babel-loader": "^8.2.5",
+    "classnames": "^2.3.1",
+    "css-loader": "^6.7.1",
+    "eslint": "^8.16.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-react": "^7.30.0",
+    "eslint-plugin-react-hooks": "^4.5.0",
+    "mini-css-extract-plugin": "^2.6.0",
+    "sass": "^1.52.1",
     "prop-types": "^15.7.2",
     "rc-color-picker": "^1.1.5",
     "react": "^16.9.0",
@@ -53,11 +53,12 @@
     "sass-loader": "^8.0.0",
     "style-loader": "^1.0.0",
     "svg-url-loader": "^3.0.2",
-    "terser-webpack-plugin": "^2.1.0",
-    "webpack": "^4.40.2",
-    "webpack-cli": "^3.3.9"
+    "terser-webpack-plugin": "^5.3.1",
+    "webpack": "^5.72.1",
+    "webpack-cli": "^4.9.2"
   },
   "dependencies": {
+    "@storybook/builder-webpack5": "^6.4.0",
     "linear-gradient-parser": "^1.1.8"
   }
 }

.storybook/main.js

@@ -9,32 +9,23 @@ module.exports = {
 	externals: {
 		'react': 'react',
 	},
-	target: 'node',
+	target: 'web',
 	output: {
 		path: path.join(__dirname, 'dist'),
 		filename: 'index.js',
-		library: 'linearGradientPicker',
-		libraryTarget: 'commonjs2'
+		library: {
+			type: 'commonjs2'
+		}
 	},
 	module: {
 		rules: [
-			{
-				test: /\.svg/,
-				loaders: [ 'svg-url-loader' ]
-			},
 			{
 				test: /\.css$/,
-				use: [MiniCssExtractPlugin.loader, "css-loader"],
+				use: [MiniCssExtractPlugin.loader, 'css-loader'],
 			},
 			{
 				test: /\.(png|jp(e*)g)$/,
-				use: [{
-					loader: 'url-loader',
-					options: {
-						limit: 8000, // Convert images < 8kb to base64 strings
-						name: 'images/[hash]-[name].[ext]'
-					}
-				}]
+				type: 'asset/inline'
 			},
 			{
 				test: /\.(js|jsx)$/,
@@ -50,6 +41,13 @@ module.exports = {
 	],
 	optimization: {
 		minimize: true,
-		minimizer: [ new TerserPlugin() ],
+		minimizer: [ new TerserPlugin({
+			terserOptions: {
+				output: {
+					comments: false
+				}
+			},
+			extractComments: false
+		}) ],
 	}
 };