Merge pull request #1385 from jpuri/dependency_update

Dependency update

.babelrc

@@ -2,6 +2,7 @@
   "presets": ["@babel/preset-env", "@babel/preset-react"],
   "plugins": [
     ["transform-flow-strip-types"],
+    ["@babel/plugin-transform-class-properties"],
     [
       "@babel/plugin-proposal-class-properties",
       {

.nvmrc

@@ -0,0 +1 @@
+v16

.storybook/main.js

@@ -0,0 +1,17 @@
+/** @type { import('@storybook/react-webpack5').StorybookConfig } */
+const config = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

.storybook/preview.js

@@ -0,0 +1,14 @@
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;

config/test-compiler.js

@@ -1,8 +1,8 @@
-require('@babel/core');
+require("@babel/core");
 
 function noop() {
   return null;
 }
-require.extensions['.css'] = noop;
-require.extensions['.svg'] = noop;
-require.extensions['.png'] = noop;
+require.extensions[".css"] = noop;
+require.extensions[".svg"] = noop;
+require.extensions[".png"] = noop;

config/test-setup.js

@@ -1,13 +1,15 @@
-require('@babel/register')();
-const Adapter = require('enzyme-adapter-react-16');
-const { shallow, configure } = require('enzyme');
+require("@babel/register")();
+const { configure } = require("enzyme");
+const Adapter = require("@wojtekmaj/enzyme-adapter-react-17");
 
-const jsdom = require('jsdom');
+configure({ adapter: new Adapter() });
+
+const jsdom = require("jsdom");
 
 const { JSDOM } = jsdom;
 
 const { document } = new JSDOM({
-  url: 'http://localhost',
+  url: "http://localhost",
 }).window;
 global.document = document;
 
@@ -16,7 +18,7 @@ global.HTMLElement = window.HTMLElement;
 global.HTMLAnchorElement = window.HTMLAnchorElement;
 
 global.navigator = {
-  userAgent: 'node.js',
+  userAgent: "node.js",
 };
 
 configure({ adapter: new Adapter() });

config/webpack.config.js

@@ -1,37 +1,38 @@
-const path = require('path');
-const webpack = require('webpack');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const autoprefixer = require('autoprefixer');
-const precss = require('precss');
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+const path = require("path");
+const webpack = require("webpack");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const autoprefixer = require("autoprefixer");
+const precss = require("precss");
+const TerserPlugin = require("terser-webpack-plugin");
 
 module.exports = {
-  devtool: 'source-map',
-  entry: ['./src/index'],
+  devtool: "source-map",
+  entry: ["./src/index"],
   output: {
-    path: path.join(__dirname, '../dist'),
-    filename: 'react-draft-wysiwyg.js',
-    library: 'reactDraftWysiwyg',
-    libraryTarget: 'umd',
+    path: path.join(__dirname, "../dist"),
+    filename: "react-draft-wysiwyg.js",
+    library: "reactDraftWysiwyg",
+    libraryTarget: "umd",
   },
   externals: {
-    react: 'react',
-    immutable: 'immutable',
-    'react-dom': 'react-dom',
-    'draft-js': 'draft-js',
+    react: "react",
+    immutable: "immutable",
+    "react-dom": "react-dom",
+    "draft-js": "draft-js",
   },
   optimization: {
-    minimizer: [new UglifyJsPlugin()],
+    minimize: true,
+    minimizer: [new TerserPlugin()],
   },
   plugins: [
     new webpack.DefinePlugin({
-      'process.env': {
-        NODE_ENV: JSON.stringify('production'),
+      "process.env": {
+        NODE_ENV: JSON.stringify("production"),
       },
     }),
     new MiniCssExtractPlugin({
-      filename: 'react-draft-wysiwyg.css',
-      chunkFilename: '[id].css',
+      filename: "react-draft-wysiwyg.css",
+      chunkFilename: "[id].css",
       ignoreOrder: false,
     }),
     new webpack.LoaderOptionsPlugin({
@@ -44,7 +45,7 @@ module.exports = {
     rules: [
       {
         test: /\.js$/,
-        use: [{ loader: 'babel-loader' }],
+        use: [{ loader: "babel-loader" }],
         exclude: /immutable\.js$|draftjs-utils\.js$/,
       },
       {
@@ -53,21 +54,21 @@ module.exports = {
           {
             loader: MiniCssExtractPlugin.loader,
             options: {
-              publicPath: '../',
-              hmr: process.env.NODE_ENV === 'development',
+              publicPath: "../",
+              hmr: process.env.NODE_ENV === "development",
             },
           },
-          'css-loader',
+          "css-loader",
         ],
       },
-      { test: /\.(png|jpg)$/, use: [{ loader: 'url-loader?limit=8192' }] },
+      { test: /\.(png|jpg)$/, use: [{ loader: "url-loader?limit=8192" }] },
       {
         test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
-        use: [{ loader: 'url-loader?limit=10000&mimetype=image/svg+xml' }],
+        use: [{ loader: "url-loader?limit=10000&mimetype=image/svg+xml" }],
       },
     ],
   },
   resolve: {
-    extensions: ['.js', '.json'],
+    extensions: [".js", ".json"],
   },
 };