refactor(lib): bump dependencies, adjust dev and build config, refactor tests, refactor components, adjust docs, a.o.

.babelrc

@@ -1,4 +1,7 @@
 {
-	"presets": ["env", "react"],
-	"plugins": ["transform-object-rest-spread"]
-}
+	"presets": [
+		"@babel/preset-env",
+		["@babel/preset-react", { "runtime": "automatic" }]
+	],
+	"plugins": ["@babel/plugin-proposal-object-rest-spread"]
+}

.eslintignore

@@ -1,2 +1,3 @@
 README.md
 jest.config.js
+docs/*

.eslintrc

@@ -1,52 +1,45 @@
 {
+	"root": true,
+	"parser": "babel-eslint",
 	"env": {
 		"browser": true,
 		"es6": true,
 		"jest/globals": true
 	},
 	"extends": [
+		"plugin:react/recommended",
+		"plugin:react-hooks/recommended",
 		"eslint:recommended",
-		"plugin:react/recommended"
+		"plugin:jsx-a11y/recommended",
+		"react-app/jest"
 	],
 	"settings": {
 		"react": {
 			"version": "detect"
 		}
 	},
 	"parserOptions": {
+		"ecmaVersion": 11,
 		"ecmaFeatures": {
+			"arrowFunctions": true,
 			"experimentalObjectRestSpread": true,
 			"jsx": true
 		},
 		"sourceType": "module"
 	},
-	"plugins": [
-		"react",
-		"jest"
-	],
+	"plugins": ["react", "@babel", "jsx-a11y", "jest"],
 	"rules": {
-		"indent": [
-			"error",
-			"tab",
-			{
-				"SwitchCase": 1
-			}
-		],
-		"linebreak-style": [
-			"error",
-			"unix"
-		],
+		"indent": ["error", "tab"],
+		"linebreak-style": ["error", "unix"],
 		"quotes": [
 			"error",
-			"single",
+			"double",
 			{
 				"allowTemplateLiterals": true
 			}
 		],
-		"semi": [
-			"error",
-			"always"
-		],
-		"react/no-find-dom-node": "off"
+		"react/jsx-uses-react": "off",
+		"react/react-in-jsx-scope": "off",
+		"semi": ["error", "always"]
 	}
-}
+}

.travis.yml

@@ -1,8 +1,8 @@
 language: node_js
 node_js:
-  - "10"
+	- "10"
 script:
-  - npm test
-  - npm run build
+	- npm test
+	- npm run build
 after_success:
-  - bash <(curl -s https://codecov.io/bash)
+	- bash <(curl -s https://codecov.io/bash)

README.md

@@ -6,7 +6,7 @@
 [![Dependency Status](https://david-dm.org/VictorCazanave/react-svg-map.svg)](https://david-dm.org/VictorCazanave/react-svg-map)
 [![peerDependencies Status](https://david-dm.org/VictorCazanave/react-svg-map/peer-status.svg)](https://david-dm.org/VictorCazanave/react-svg-map?type=peer)
 
-_A set of React.js components to display an interactive SVG map._
+_A set of ReactJs components to display an interactive SVG map._
 
 ![React SVG Map](https://media.giphy.com/media/QWpIwVdhY81RL05iNo/giphy.gif)
 
@@ -42,14 +42,14 @@ This is the base component to display an SVG map.
 - Import the map you want
 - Optionally, import `react-svg-map/lib/index.css` if you want to apply the default styles
 
-```javascript
-import React from "react";
-import ReactDOM from "react-dom";
-import Taiwan from "@svg-maps/taiwan";
-import { SVGMap } from "react-svg-map";
-import "react-svg-map/lib/index.css";
+```jsx
+import { PureComponent } from 'react';
+import ReactDOM from 'react-dom';
+import Taiwan from '@svg-maps/taiwan';
+import { SVGMap } from 'react-svg-map';
+import 'react-svg-map/lib/index.css';
 
-class App extends React.Component {
+class App extends PureComponent {
   constructor(props) {
     super(props);
   }
@@ -59,7 +59,7 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, document.getElementById("app"));
+ReactDOM.render(<App />, document.getElementById('app'));
 ```
 
 #### API
@@ -69,6 +69,7 @@ ReactDOM.render(<App />, document.getElementById("app"));
 | map                 | Object           | **required**          | Describe SVG map to display. See [maps section](#maps) for more details.                                         |
 | className           | String           | `'svg-map'`           | CSS class of `<svg>`.                                                                                            |
 | role                | String           | `'none'`              | ARIA role of `<svg>`.                                                                                            |
+| type                | '`checkbox`' \| '`radio`'      | '`radio`'              | Defines the select method (single or multiple) of the location(s). Use `ref` to get the value of the map.                                                                                            |
 | locationClassName   | String\|Function | `'svg-map__location'` | CSS class of each `<path>`. The function parameters are the location object and the location index.              |
 | locationTabIndex    | String\|Function | `'0'`                 | Tabindex each `<path>`. The function parameters are the location object and the location index.                  |
 | locationRole        | String           | `'none'`              | ARIA role of each `<path>`.                                                                                      |
@@ -93,14 +94,14 @@ It is based on this [WAI-ARIA example](https://www.w3.org/TR/wai-aria-practices/
 - Import the map you want
 - Optionally, import `react-svg-map/lib/index.css` if you want to apply the default styles
 
-```javascript
-import React from "react";
-import ReactDOM from "react-dom";
-import Taiwan from "@svg-maps/taiwan";
-import { CheckboxSVGMap } from "react-svg-map";
-import "react-svg-map/lib/index.css";
+```jsx
+import { PureComponent } from 'react';
+import ReactDOM from 'react-dom';
+import Taiwan from '@svg-maps/taiwan';
+import { CheckboxSVGMap } from 'react-svg-map';
+import 'react-svg-map/lib/index.css';
 
-class App extends React.Component {
+class App extends PureComponent {
   constructor(props) {
     super(props);
   }
@@ -110,7 +111,7 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, document.getElementById("app"));
+ReactDOM.render(<App />, document.getElementById('app'));
 ```
 
 #### API
@@ -121,8 +122,9 @@ ReactDOM.render(<App />, document.getElementById("app"));
 | className           | String           | `'svg-map'`           | CSS class of `<svg>`.                                                                                                                    |
 | locationClassName   | String\|Function | `'svg-map__location'` | CSS class of each `<path>`. The function parameters are the location object and the location index.                                      |
 | locationAriaLabel   | Function         | `location.name`       | ARIA label of each `<path>`. The function parameters are the location object and the location index.                                     |
-| selectedLocationIds | String[]         |                       | List of `id`s of the **initial** selected locations. It is used only when the component is mounted and is not synchronized when updated. |
-| onChange            | Function         |                       | Invoked when the user selects/deselects a location. The list of selected locations is passed as parameter.                               |
+| defaultValue        | Location[]       |          []           | List of `Location` objects (`{ id: String, name: String }`) of the **initial**   selected locations. It is used only when the component is mounted and is not synchronized when updated. |
+| onChange            | Function         |                       | Invoked when the user selects/deselects a location. The attributes object of the toggled location is passed as parameter.                               |
+| value               | Location[]       |                       | List of `Location` objects (`{ id: String, name: String }`). Used as a pair with `onChange` for controlled map.           |
 | onLocationMouseOver | Function         |                       | Invoked when the user puts the mouse over a location.                                                                                    |
 | onLocationMouseOut  | Function         |                       | Invoked when the user puts the mouse out of a location.                                                                                  |
 | onLocationMouseMove | Function         |                       | Invoked when the user moves the mouse on a location.                                                                                     |
@@ -140,14 +142,14 @@ It is based on this [WAI-ARIA example](https://www.w3.org/TR/wai-aria-practices/
 - Import the map you want
 - Optionally, import `react-svg-map/lib/index.css` if you want to apply the default styles
 
-```javascript
-import React from "react";
-import ReactDOM from "react-dom";
-import Taiwan from "@svg-maps/taiwan";
-import { RadioSVGMap } from "react-svg-map";
-import "react-svg-map/lib/index.css";
+```jsx
+import { PureComponent } from 'react';
+import ReactDOM from 'react-dom';
+import Taiwan from '@svg-maps/taiwan';
+import { RadioSVGMap } from 'react-svg-map';
+import 'react-svg-map/lib/index.css';
 
-class App extends React.Component {
+class App extends PureComponent {
   constructor(props) {
     super(props);
   }
@@ -157,7 +159,7 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, document.getElementById("app"));
+ReactDOM.render(<App />, document.getElementById('app'));
 ```
 
 #### API
@@ -168,8 +170,9 @@ ReactDOM.render(<App />, document.getElementById("app"));
 | className           | String           | `'svg-map'`           | CSS class of `<svg>`.                                                                                                          |
 | locationClassName   | String\|Function | `'svg-map__location'` | CSS class of each `<path>`. The function parameters are the location object and the location index.                            |
 | locationAriaLabel   | Function         | `location.name`       | ARIA label of each `<path>`. The function parameters are the location object and the location index.                           |
-| selectedLocationId  | String           |                       | `id` of the **initial** selected location. It is used only when the component is mounted and is not synchronized when updated. |
-| onChange            | Function         |                       | Invoked when the user selects a location. The selected location is passed as parameter.                                        |
+| defaultValue        | Location         |        `null`         | `Location` object (`{ id: String, name: String }`) of the **initial** selected location. It is used for the uncontrolled component map.         |
+| onChange            | Function         |                       | Invoked when the user selects a location. The attributes object of the selected location is passed as a parameter.                                        |
+| value               | Location       |                         | `Location` object (`{ id: String, name: String }`). Used as a pair with `onChange` for controlled map.           |
 | onLocationMouseOver | Function         |                       | Invoked when the user puts the mouse over a location.                                                                          |
 | onLocationMouseOut  | Function         |                       | Invoked when the user puts the mouse out of a location.                                                                        |
 | onLocationMouseMove | Function         |                       | Invoked when the user moves the mouse on a location.                                                                           |
@@ -182,7 +185,7 @@ ReactDOM.render(<App />, document.getElementById("app"));
 
 ### Existing maps
 
-Since v2.0.0 this package does not provide maps anymore. All the existing maps have been moved to the independant [svg-maps](https://github.com/VictorCazanave/svg-maps) project because they may be useful for other components/projects.
+Since v2.0.0 this package does not provide maps anymore. All the existing maps have been moved to the independent [svg-maps](https://github.com/VictorCazanave/svg-maps) project because they may be useful for other components/projects.
 
 ### Custom maps
 
@@ -194,22 +197,22 @@ You can modify existing maps or create your own.
 1. Create a new object from this map
 1. Pass this new object as `map` prop of `<SVGMap />` component
 
-```javascript
-import React from "react";
-import Taiwan from "@svg-maps/taiwan";
-import { SVGMap } from "react-svg-map";
+```jsx
+import { PureComponent } from 'react';
+import Taiwan from '@svg-maps/taiwan';
+import { SVGMap } from 'react-svg-map';
 
-class App extends React.Component {
+class App extends PureComponent {
   constructor(props) {
     super(props);
 
     // Create new map object
     this.customTaiwan = {
       ...Taiwan,
-      label: "Custom map label",
+      label: 'Custom map label',
       locations: Taiwan.locations.map(location => {
         // Modify each location
-      })
+      }),
     };
   }
 

__tests__/__snapshots__/checkbox-svg-map.test.js.snap

@@ -3,7 +3,7 @@
 exports[`CheckboxSVGMap component Rendering displays map with custom props 1`] = `
 <svg
   aria-label="label"
-  className="className"
+  className="className svg-map"
   role="group"
   viewBox="viewBox"
   xmlns="http://www.w3.org/2000/svg"
@@ -16,6 +16,7 @@ exports[`CheckboxSVGMap component Rendering displays map with custom props 1`] =
     aria-label="name0"
     className="locationClassName"
     d="path0"
+    data-testid="id0"
     id="id0"
     name="name0"
     onBlur={[Function]}
@@ -33,6 +34,7 @@ exports[`CheckboxSVGMap component Rendering displays map with custom props 1`] =
     aria-label="name1"
     className="locationClassName"
     d="path1"
+    data-testid="id1"
     id="id1"
     name="name1"
     onBlur={[Function]}
@@ -50,6 +52,7 @@ exports[`CheckboxSVGMap component Rendering displays map with custom props 1`] =
     aria-label="name2"
     className="locationClassName"
     d="path2"
+    data-testid="id2"
     id="id2"
     name="name2"
     onBlur={[Function]}
@@ -81,15 +84,11 @@ exports[`CheckboxSVGMap component Rendering displays map with default props 1`]
     aria-label="name0"
     className="svg-map__location"
     d="path0"
+    data-testid="id0"
     id="id0"
     name="name0"
-    onBlur={undefined}
     onClick={[Function]}
-    onFocus={undefined}
     onKeyDown={[Function]}
-    onMouseMove={undefined}
-    onMouseOut={undefined}
-    onMouseOver={undefined}
     role="checkbox"
     tabIndex="0"
   />
@@ -98,15 +97,11 @@ exports[`CheckboxSVGMap component Rendering displays map with default props 1`]
     aria-label="name1"
     className="svg-map__location"
     d="path1"
+    data-testid="id1"
     id="id1"
     name="name1"
-    onBlur={undefined}
     onClick={[Function]}
-    onFocus={undefined}
     onKeyDown={[Function]}
-    onMouseMove={undefined}
-    onMouseOut={undefined}
-    onMouseOver={undefined}
     role="checkbox"
     tabIndex="0"
   />
@@ -115,15 +110,11 @@ exports[`CheckboxSVGMap component Rendering displays map with default props 1`]
     aria-label="name2"
     className="svg-map__location"
     d="path2"
+    data-testid="id2"
     id="id2"
     name="name2"
-    onBlur={undefined}
     onClick={[Function]}
-    onFocus={undefined}
     onKeyDown={[Function]}
-    onMouseMove={undefined}
-    onMouseOut={undefined}
-    onMouseOver={undefined}
     role="checkbox"
     tabIndex="0"
   />