update dependencies and fix issues

.babelrc

@@ -1,10 +1,6 @@
 {
 	"presets": [
-		"react",
-		"stage-3"
-	],
-	"plugins": [
-		"transform-flow-strip-types"
+		"@babel/preset-env", "@babel/preset-react"
 	],
 	"env": {
 		"cjs": {

.eslintrc

@@ -1,18 +1,20 @@
 {
 	"plugins": [
-		"import", "flowtype", "jsx-a11y", "react", "const-immutable"
+		"import", "jsx-a11y", "react", "const-immutable"
 	],
 	"parserOptions": {
-		"ecmaVersion": 6,
+		"ecmaVersion": "latest",
 		"sourceType": "module",
 		"ecmaFeatures": {
 			"jsx": true,
 			"experimentalObjectRestSpread": true,
 		},
 	},
+  "parser": "@babel/eslint-parser",
 	"env": {
 		"browser": true,
 		"node": true,
+    	"es2021": true,		
 		"es6": true,
 		"jest": true
 	},
@@ -34,53 +36,12 @@
 	"extends": [
 		"eslint:recommended",
 		"plugin:react/recommended",
-		"plugin:flowtype/recommended",
 		"plugin:import/errors",
 		"plugin:import/warnings"
 	],
 	"rules": {
-		"jsx-a11y/aria-role": "warn",
-		"jsx-a11y/img-redundant-alt": "warn",
-		"jsx-a11y/no-access-key": "warn",
-		"flowtype/define-flow-type": "warn",
-		"flowtype/require-valid-file-annotation": "warn",
-		"flowtype/use-flow-type": "warn",
-		"react/jsx-pascal-case": 1,
-		"react/jsx-uses-react": 1,
-		"react/jsx-uses-vars": 1,
-		"react/jsx-no-bind": 1,
-		"react/jsx-no-undef": 1,
-		"react/display-name": 0,
-		"react/prefer-es6-class": 1,
-		"react/prop-types": 1,
-		"react/react-in-jsx-scope": 1,
-
-		"const-immutable/no-mutation": 2,
-
-		"no-var": "error",
-		"prefer-const": "error",
-		"array-bracket-spacing": [2, "never"],
-		"block-scoped-var": 2,
-		"brace-style": [2, "1tbs", { "allowSingleLine": true }],
-		"comma-spacing": [2, {"before": false, "after": true}],
-		"eqeqeq": [2, "smart"],
-		"key-spacing": [2, { "beforeColon": false, "afterColon": true }],
-		"indent": [2, "tab", { "SwitchCase": 1 }],
-		"comma-dangle": 0,
-		"jsx-quotes": [2, "prefer-double"],
-		"no-mixed-spaces-and-tabs": [2, "smart-tabs"],
-		"no-trailing-spaces": [2, { "skipBlankLines": false }],
-		"no-undef": 2,
-		"no-console": 0,
-		"no-unused-vars": 2,
-		"object-curly-spacing": [2, "always"],
-		"quotes": [2, "double", "avoid-escape"],
-		"semi": [2, "always"],
-		"semi-spacing": [2, { "before": false, "after": true }],
-		"keyword-spacing": ["error", {"before": true, "after": true, "overrides": {}}],
-		"space-before-blocks": 2,
-		"space-before-function-paren": [2, "never"],
-		"space-infix-ops": [2, { "int32Hint": false}],
-		"spaced-comment": [2, "always", { "exceptions": ["-"] }],
+		"react/no-unknown-property": "warn",
+		"no-prototype-builtins": "warn",
+		"no-mixed-spaces-and-tabs": "warn"
 	}
 }

config/webpack.config.js

@@ -17,22 +17,33 @@ function buildConfig(mode) {
 	};
 
 	const devServer = {
-		contentBase: [
-			path.join(rootPath, "docs"),
-			path.join(rootPath, "build"),
-			path.join(rootPath, "node_modules"),
+		static: [
+			{ directory: path.resolve(rootPath, "docs") },
+			{ directory: path.resolve(rootPath, "build") },
+			{ directory: path.resolve(rootPath, "node_modules") },
 		],
 		host: process.env.IP, // "10.0.0.106", "localhost"
 		port: parseInt(process.env.PORT),
 	};
 
 	const context = rootPath;
 	const loadersForDocs = [
-		{ test: /\.jpg$/, loader: "file-loader" },
-		{ test: /\.(png|svg)$/, loader: "url-loader?mimetype=image/png" },
-		{ test: /\.md$/, loaders: ["html-loader", "remarkable-loader"] },
-		{ test: /\.scss$/, loaders: ["style-loader", "css-loader", "autoprefixer-loader", "sass-loader?outputStyle=expanded"] }
-	];
+        { test: /\.jpg$/, loader: "file-loader" },
+        {
+            test: /\.(png|svg)$/,
+            loader: "url-loader",
+            options: { mimetype: "image/png" },
+        },
+        { test: /\.md$/, loader: "html-loader" },
+        { test: /\.md$/, loader: "remarkable-loader" },
+        { test: /\.scss$/, loader: "style-loader" },
+        { test: /\.scss$/, loader: "css-loader" },
+        {
+            test: /\.scss$/,
+            loader: "sass-loader",
+            options: { sassOptions: { outputStyle: "expanded" } },
+        },
+    ];
 
 	console.log("MODE", mode);
 	return {
@@ -46,21 +57,26 @@ function buildConfig(mode) {
 			libraryTarget: "umd",
 			pathinfo: ifWatch(true, false), // since we have eval as devtool for watch, pathinfo gives line numbers which are close enough
 		},
-		devtool: ifWatch("cheap-source-map", "sourcemap"),
-		module: {
-			loaders: removeEmpty([
-				// { test: /\.json$/, loader: "json" },
-				{ test: /\.(js|jsx)$/, loaders: ["babel-loader"], exclude: /node_modules/ },
-				...loadersForDocs,
-			])
-		},
+        // devtool: ifWatch("^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$"),
+        module: {
+            rules: removeEmpty([
+                // { test: /\.json$/, loader: "json" },
+                {
+                    test: /\.(js|jsx)$/,
+                    loader: "babel-loader",
+                    exclude: /node_modules/m,
+                    options: { presets: ["@babel/env", "@babel/preset-react"] },
+                },
+                ...loadersForDocs,
+            ]),
+        },
 		performance: {
 			hints: false,
 		},
 		plugins: removeEmpty([
 			new ProgressBarPlugin(),
 			new webpack.NoEmitOnErrorsPlugin(),
-			new webpack.optimize.OccurrenceOrderPlugin(),
+			// new webpack.optimize.OccurrenceOrderPlugin(),
 
 			ifDocs(new webpack.DefinePlugin({
 				"process.env": {
@@ -69,14 +85,14 @@ function buildConfig(mode) {
 				},
 			})),
 			// ifProd(new webpack.optimize.DedupePlugin()),
-			ifDocs(new webpack.optimize.UglifyJsPlugin({
-				compress: {
-					screw_ie8: true,
-					warnings: false,
-					drop_console: true,
-				},
-				sourceMap: true,
-			})),
+			// ifDocs(new webpack.optimize.UglifyJsPlugin({
+			// 	compress: {
+			// 		screw_ie8: true,
+			// 		warnings: false,
+			// 		drop_console: true,
+			// 	},
+			// 	sourceMap: true,
+			// })),
 			new HtmlWebpackPlugin({
 				template: "./docs/pageTemplate.js",
 				inject: false,
@@ -107,7 +123,8 @@ function buildConfig(mode) {
 				"react-stockcharts": path.join(rootPath, "src"),
 			},
 			modules: ["docs", "node_modules"]
-		}
+		},
+        mode: "development",
 	};
 }
 

docs/lib/charts/CandleStickChartWithInteractiveYCoordinate.js

@@ -8,7 +8,7 @@ import {
 	Modal,
 	Button,
 	FormGroup,
-	ControlLabel,
+	FormLabel,
 	FormControl,
 } from "react-bootstrap";
 
@@ -84,7 +84,7 @@ class Dialog extends React.Component {
 				<Modal.Body>
 					<form>
 						<FormGroup controlId="text">
-							<ControlLabel>Alert when crossing</ControlLabel>
+							<FormLabel>Alert when crossing</FormLabel>
 							<FormControl type="number" value={alert.yValue} onChange={this.handleChange} />
 						</FormGroup>
 					</form>

docs/lib/charts/CandleStickChartWithText.js

@@ -8,7 +8,7 @@ import {
 	Modal,
 	Button,
 	FormGroup,
-	ControlLabel,
+	FormLabel,
 	FormControl,
 } from "react-bootstrap";
 
@@ -73,7 +73,7 @@ class Dialog extends React.Component {
 				<Modal.Body>
 					<form>
 						<FormGroup controlId="text">
-							<ControlLabel>Text</ControlLabel>
+							<FormLabel>Text</FormLabel>
 							<FormControl type="text" value={text} onChange={this.handleChange} />
 						</FormGroup>
 					</form>

docs/lib/page/ZoomAndPanPage.js

@@ -17,7 +17,7 @@ import {
 import {
 	Form,
 	FormGroup,
-	ControlLabel,
+	FormLabel,
 	FormControl,
 	Col,
 } from "react-bootstrap";
@@ -89,7 +89,7 @@ class ZoomAndPanPage extends React.Component {
 				<Row>
 					<Form horizontal>
 						<FormGroup controlId="formControlsSelectMultiple">
-							<Col componentClass={ControlLabel} sm={4}>
+							<Col componentClass={FormLabel} sm={4}>
 								Zoom anchor
 							</Col>
 							<Col sm={6}>