upgrade components && fix storybook

.storybook/addons.js

@@ -1,3 +1,3 @@
-import '@storybook/react/addons'
 import '@storybook/addon-knobs/register'
 import '@storybook/addon-options/register'
+import '@storybook/addon-actions/register';

.storybook/config.js

@@ -1,6 +1,6 @@
-import { configure, setAddon } from '@storybook/react'
-import infoAddon from '@storybook/addon-info'
+import { configure, addDecorator } from '@storybook/react'
 import { setOptions } from '@storybook/addon-options'
+import { withInfo } from '@storybook/addon-info';
 
 setOptions({
   name: 'REACT-SIGMA GITHUB',
@@ -10,8 +10,8 @@ setOptions({
   showDownPanel: true,
   showSearchBox: false,
   downPanelInRight: true,
-})
+});
 
-setAddon(infoAddon)
+addDecorator(withInfo); 
 
-configure(() => require('../stories-src'), module)
+configure(() => require('../stories-src'), module);

.storybook/webpack.config.js

@@ -3,12 +3,12 @@ let yargs = require('yargs');
 
 const jsLoader = 'babel-loader?cacheDirectory';
 
-module.exports = function(storybookBaseConfig, configType) {
-  storybookBaseConfig.devtool = "eval";
-  storybookBaseConfig.module.rules.push(
+module.exports = async function( { config }) {
+  config.devtool = "eval";
+  config.module.rules.push(
       { test: /\.js/, loader: jsLoader, exclude: [/node_modules/,/\/sigma.*\//] },
       { test: /\/sigma\/[^\/]*\.js/, loader: 'imports-loader?this=>window' },  // locally built sigma lib
       { test: /\/sigma[^\/]*\/build.*\.js/, loader: 'imports-loader?this=>window' } // resources from sigma lib
   );
-  return storybookBaseConfig;
+  return config;
 }

package.json

@@ -58,11 +58,12 @@
     "@babel/plugin-transform-flow-strip-types": "^7.3.4",
     "@babel/preset-env": "^7.3.4",
     "@babel/preset-react": "^7.0.0",
-    "@storybook/addon-info": "^5.0.1",
-    "@storybook/addon-knobs": "^5.0.1",
-    "@storybook/addon-options": "^5.0.1",
-    "@storybook/addons": "^5.0.1",
-    "@storybook/react": "^5.0.1",
+    "@storybook/addon-actions": "^5.1.11",
+    "@storybook/addon-info": "^5.1.11",
+    "@storybook/addon-knobs": "^5.1.11",
+    "@storybook/addon-options": "^5.1.11",
+    "@storybook/addons": "^5.1.11",
+    "@storybook/react": "5.1",
     "@storybook/storybook-deployer": "^2.8.1",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^24.5.0",
@@ -75,20 +76,20 @@
     "cross-spawn": "^6.0.5",
     "dagre": "^0.8.4",
     "dmd-clear": "^0.1.2",
-    "eslint": "^5.15.1",
-    "eslint-config-react-app": "^3.0.8",
-    "eslint-loader": "^2.1.2",
-    "eslint-plugin-flowtype": "^3.4.2",
+    "eslint": "6",
+    "eslint-config-react-app": "5",
+    "eslint-loader": "3",
+    "eslint-plugin-flowtype": "4",
     "eslint-plugin-import": "^2.2.0",
     "eslint-plugin-jsx-a11y": "^6.2.1",
     "eslint-plugin-react": "^7.12.4",
     "fake-xml-http-request": "^2.0.0",
-    "file-loader": "^3.0.1",
+    "file-loader": "4.2",
     "filesize": "^4.1.2",
-    "find-cache-dir": "^2.0.0",
-    "flow-bin": "^0.94.0",
+    "find-cache-dir": "3",
+    "flow-bin": "0.106",
     "flow-typed": "^2.1.5",
-    "fs-extra": "^7.0.1",
+    "fs-extra": "8",
     "fs-promise": "^2.0.0",
     "gzip-size": "^5.0.0",
     "imports-loader": "^0.8.0",
@@ -98,13 +99,13 @@
     "npm-release": "^1.0.0",
     "object-assign": "^4.1.1",
     "output-file-sync": "^2.0.1",
-    "path-exists": "^3.0.0",
+    "path-exists": "4",
     "promise": "^8.0.2",
     "react": "^16.8.4",
-    "react-dev-utils": "^8.0.0",
+    "react-dev-utils": "9",
     "react-dom": "^16.8.4",
     "recursive-readdir": "^2.1.1",
-    "rimraf": "^2.6.1",
+    "rimraf": "3",
     "script-loader": "^0.7.0",
     "sigma-react": "1.2.10",
     "strip-ansi": "^5.1.0",

src/EdgeShapes.js

@@ -36,9 +36,7 @@ for more datails on implementation.
 
 **/
 
-class EdgeShapes extends React.Component {
-	props: Props;
-
+class EdgeShapes extends React.Component<Props> {
 	constructor(props: Props) {
 		super(props)
 		if(this.props.sigma && this.props.default)

src/Filter.js

@@ -24,8 +24,7 @@ type Nodes$Filter = (node: Sigma$Node) => boolean;
 
 **/
 
-class Filter extends React.Component {
-	props: Props;
+class Filter extends React.Component<Props> {
 	filter: Object;
 
 	componentDidMount() {

src/ForceAtlas2.js

@@ -6,7 +6,7 @@ import { embedProps } from './tools'
 
 type State = {
 	running: boolean,
-	timer?: number,
+	timer?: TimeoutID,
 	drawEdges?: ?boolean
 };
 
@@ -61,9 +61,7 @@ It accepts all the parameters of ForceAtlas2 described on its github page:
 **/
 
 
-class ForceAtlas2 extends React.Component {
-	state: State;
-	props: Props;
+class ForceAtlas2 extends React.Component<Props, State> {
 	static defaultProps: DefaultProps = {
 		worker: true,
 		linLogMode: true

src/ForceLink.js

@@ -5,7 +5,7 @@ import { embedProps } from './tools'
 
 type State = {
   running: boolean,
-  timer?: number,
+  timer?: TimeoutID,
   drawEdges?: ?boolean
 };
 
@@ -85,9 +85,8 @@ import ForceLink from 'react-sigma/lib/ForceLink'
 **/
 
 
-class ForceLink extends React.Component {
+class ForceLink extends React.Component<Props, State> {
   state: State = {running: true};
-  props: Props;
   static defaultProps: DefaultProps = {
     worker: true,
     linLogMode: true

src/LoadGEXF.js

@@ -29,10 +29,7 @@ Child's componentWillMount should be used to enable plugins on loaded graph.
 **/
 
 
-class LoadGEXF extends React.PureComponent {
-	state: State;
-	props: Props;
-
+class LoadGEXF extends React.Component<Props, State> {
 	constructor(props: Props) {
 		super(props)
 		this.state = {loaded:false}

src/LoadJSON.js

@@ -32,10 +32,7 @@ Child's componentWillMount should be used to enable plugins on loaded graph.
 **/
 
 
-class LoadJSON extends React.PureComponent {
-	state: State;
-	props: Props;
-
+class LoadJSON extends React.Component<Props, State> {
 	constructor(props: Props) {
 		super(props)
 		this.state = {loaded:false}

src/NeoCypher.js

@@ -47,10 +47,7 @@ Child's componentWillMount should be used to enable plugins on loaded graph.
 **/
 
 
-class NeoCypher extends React.PureComponent {
-    state: State;
-	props: Props;
-
+class NeoCypher extends React.Component<Props, State> {
 	static defaultProps: DefaultProps = {
 		producers: new NeoGraphItemsProducers()
 	};

src/NodeShapes.js

@@ -44,9 +44,7 @@ type Sigma$Node$Shapes = "def" | "pacman" | "star" | "equilateral" | "cross" | "
 
 **/
 
-class NodeShapes extends React.Component {
-	props: Props;
-
+class NodeShapes extends React.Component<Props> {
 	constructor(props: Props) {
 		super(props)
 		if(this.props.sigma && this.props.default)

src/RandomizeNodePositions.js

@@ -17,9 +17,7 @@ Can be used within Sigma component with predefined graph or within graph loader
 **/
 
 
-class RandomizeNodePositions extends React.PureComponent {
-  props: Props;
-
+class RandomizeNodePositions extends React.PureComponent<Props> {
   constructor(props: Props) {
     super(props)
     if(this.props.sigma) {

src/ReactSigmaLayoutPlugin.js

@@ -36,9 +36,7 @@ const NOverlap = (props: Props) => {
 **/
 
 
-class ReactSigmaLayoutPlugin extends React.Component {
-	state: State;
-	props: Props;
+class ReactSigmaLayoutPlugin extends React.Component<Props, State> {
 	_mounted: boolean = false;
 
 	constructor(props: Props) {

src/RelativeSize.js

@@ -21,9 +21,7 @@ Sets nodes sizes corresponding its degree.
 
 **/
 
-class RelativeSize extends React.Component {
-	props: Props;
-
+class RelativeSize extends React.Component<Props> {
 	constructor(props: Props) {
 		super(props)
 		sigma.plugins.relativeSize(this.props.sigma, this.props.initialSize)

src/Sigma.js

@@ -85,9 +85,7 @@ type State = {
  */
 
 
-class Sigma extends React.PureComponent {
-  props: Props;
-  state: State;
+class Sigma extends React.Component<Props, State> {
   sigma: sigma;
   sigmaRenderer: ?string;
   plugins: mixed;
@@ -125,7 +123,7 @@ class Sigma extends React.PureComponent {
     }
   }
 
-  initRenderer = (container: HTMLElement) => {
+  initRenderer = (container: HTMLElement|null) => {
     if(container) {
       let options: Object = {container}
       if(this.props.renderer)
@@ -172,7 +170,7 @@ type Sigma$EventHandler = (node:Sigma$Event) => void
 ```
 **/
 
-  static bindHandlers(handlers, sigma) {
+  static bindHandlers(handlers: Props, sigma: any) {
     ["clickNode", "overNode", "outNode", "clickEdge", "overEdge", "outEdge", "clickStage"].forEach(
       event => {
           let handler = "on" + event[0].toUpperCase() + event.substr(1);

src/index.js

@@ -1,17 +1,17 @@
-export Sigma from './Sigma'
-export EdgeShapes from './EdgeShapes'
-export NodeShapes from './NodeShapes'
-export LoadJSON from './LoadJSON'
-export LoadGEXF from './LoadGEXF'
-export Filter from './Filter'
-export ForceAtlas2 from './ForceAtlas2'
-export RelativeSize from './RelativeSize'
-export NOverlap from './NOverlap'
-export NeoCypher from './NeoCypher'
-export NeoGraphItemsProducers from './NeoGraphItemsProducers'
-export RandomizeNodePositions from './RandomizeNodePositions'
-export SigmaEnableWebGL from './SigmaEnableWebGL'
-export SigmaEnableSVG from './SigmaEnableSVG'
+export Sigma from './Sigma';
+export EdgeShapes from './EdgeShapes';
+export NodeShapes from './NodeShapes';
+export LoadJSON from './LoadJSON';
+export LoadGEXF from './LoadGEXF';
+export Filter from './Filter';
+export ForceAtlas2 from './ForceAtlas2';
+export RelativeSize from './RelativeSize';
+export NOverlap from './NOverlap';
+export NeoCypher from './NeoCypher';
+export NeoGraphItemsProducers from './NeoGraphItemsProducers';
+export RandomizeNodePositions from './RandomizeNodePositions';
+export SigmaEnableWebGL from './SigmaEnableWebGL';
+export SigmaEnableSVG from './SigmaEnableSVG';
 
-import Sigma from './Sigma'
-export default Sigma
+import Sigma from './Sigma';
+export default Sigma;

stories-src/storiesOfGraphs.js

@@ -13,8 +13,7 @@ const sigmaAction = decorateAction([
 
 storiesOf('Complex graph samples', module)
   .addDecorator(withKnobs)
-  .addWithInfo('Medium graph animated',
-              'Load medium size graph (~2k nodes) with coords and colors, then run RelativeSize and ForceLink (ForceAtlas2) layout precalculated in background with cubicInOut easing. WebGL rendering. Roll over graph node to see event data.',
+  .add('Medium graph animated',
               () => {
     let flTimeout = number("Timeout", 2000)
     let flBackground = boolean("Force layout in backround", true)
@@ -44,18 +43,21 @@ storiesOf('Complex graph samples', module)
           </LoadGEXF>
         </Sigma>
     </div>
-  })
+    },
+    {info: 'Load medium size graph (~2k nodes) with coords and colors, then run RelativeSize and ForceLink (ForceAtlas2) layout precalculated in background with cubicInOut easing. WebGL rendering. Roll over graph node to see event data.'}
+  )
 
-  .addWithInfo('Big static',
-              'Render big graph (12k nodes) with predefined size and coordinates, see https://dunnock.github.io/react-sigma/sites_coords.json. Canvas rendering. Click on graph node to see event data.', () => (
+  .add('Big static',
+        () => (
     <Sigma renderer="canvas" onClickNode={ sigmaAction('onClickNode') }>
       <NodeShapes default="diamond"/>
       <LoadJSON path={String(process.env.PUBLIC_URL) + "/sites_coords.json"}/>
     </Sigma>
-  ))
+    ),
+    {info: 'Render big graph (12k nodes) with predefined size and coordinates, see https://dunnock.github.io/react-sigma/sites_coords.json. Canvas rendering. Click on graph node to see event data.'}
+  )
 
-  .addWithInfo('Big graph animated',
-              'Load big graph (12k nodes, 30k edges), randomize coords and set relative node sizes, then run ForceAtlas2 algorythm with realtime calculation animation with barnesHutOptimize option, see https://dunnock.github.io/react-sigma/sites_nocoords.json. WebGL rendering. Click on graph node to see event data.',
+  .add('Big graph animated',
               () => (
     <Sigma renderer="webgl" settings={{drawEdges:false}} onClickNode={ sigmaAction('onClickNode') }>
       <LoadJSON path={String(process.env.PUBLIC_URL) + "/sites_nocoords.json"}>
@@ -65,4 +67,6 @@ storiesOf('Complex graph samples', module)
         </RandomizeNodePositions>
       </LoadJSON>
     </Sigma>
-  ))
+    ),
+    {info: 'Load big graph (12k nodes, 30k edges), randomize coords and set relative node sizes, then run ForceAtlas2 algorythm with realtime calculation animation with barnesHutOptimize option, see https://dunnock.github.io/react-sigma/sites_nocoords.json. WebGL rendering. Click on graph node to see event data.'}
+  )