Merge pull request #2 from nezed-forks/feature/upgrade-deps

Upgrade Storybook's dependencies and use PropTypes from external package

README.md

@@ -13,9 +13,9 @@ npm install storybook-addon-redux-listener --save-dev
 Then, configure it as an addon by adding it to your `addons.js` file (located in the Storybook config directory).
 
 ```
-//  To get our default addons (actions and links)
-import '@kadira/storybook/addons';
-//  To add the Redux addon
+//  Import addons you needed before (eg. actions and links)
+import '@storybook/addon-***/register';
+//  And also add new Redux addon
 import 'storybook-addon-redux-listener/register'
 ```
 
@@ -68,7 +68,7 @@ Setup a new listener and bind its events to the Storybook API channel:
 
 ```
 import listen from 'redux-listener-middleware';
-import addonAPI from '@kadira/storybook-addons';
+import addonAPI from '@storybook/addons';
 
 export default () => {
   const reduxListener = listen();

dist/components/redux-listener-panel.js

@@ -10,6 +10,10 @@ var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
@@ -30,8 +34,8 @@ var styles = {
   }
 };
 
-var ReduxListenerPanel = function (_Component) {
-  _inherits(ReduxListenerPanel, _Component);
+var ReduxListenerPanel = function (_React$PureComponent) {
+  _inherits(ReduxListenerPanel, _React$PureComponent);
 
   function ReduxListenerPanel() {
     var _ref;
@@ -62,13 +66,13 @@ var ReduxListenerPanel = function (_Component) {
 
       channel.on('addon/redux-listener/actionTriggered', this.onActionTriggered);
 
-      // Clear the current notes on every story change.
+      // Clear the current action on every story change.
       this.stopListeningOnStory = api.onStory(function () {
         _this2.setState({ actions: [] });
       });
     }
 
-    // This is some cleanup tasks when the Notes panel is unmounting.
+    // This is some cleanup tasks when the actions panel is unmounting.
 
   }, {
     key: 'componentWillUnmount',
@@ -152,10 +156,15 @@ var ReduxListenerPanel = function (_Component) {
   }]);
 
   return ReduxListenerPanel;
-}(_react.Component);
+}(_react2.default.PureComponent);
 
 ReduxListenerPanel.propTypes = {
-  api: _react.PropTypes.shape().isRequired,
-  channel: _react.PropTypes.shape().isRequired
+  api: _propTypes2.default.shape({
+    onStory: _propTypes2.default.func.isRequired
+  }).isRequired,
+  channel: _propTypes2.default.shape({
+    on: _propTypes2.default.func.isRequired,
+    removeListener: _propTypes2.default.func.isRequired
+  }).isRequired
 };
 exports.default = ReduxListenerPanel;

dist/index.js

@@ -8,15 +8,15 @@ var _reduxListenerMiddleware = require('redux-listener-middleware');
 
 var _reduxListenerMiddleware2 = _interopRequireDefault(_reduxListenerMiddleware);
 
-var _storybookAddons = require('@kadira/storybook-addons');
+var _addons = require('@storybook/addons');
 
-var _storybookAddons2 = _interopRequireDefault(_storybookAddons);
+var _addons2 = _interopRequireDefault(_addons);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 exports.default = function () {
   var reduxListener = (0, _reduxListenerMiddleware2.default)();
-  var channel = _storybookAddons2.default.getChannel();
+  var channel = _addons2.default.getChannel();
 
   var storybookListener = function storybookListener(action) {
     channel.emit('addon/redux-listener/actionTriggered', action);

dist/register.js

@@ -4,21 +4,21 @@ var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
-var _storybookAddons = require('@kadira/storybook-addons');
+var _addons = require('@storybook/addons');
 
-var _storybookAddons2 = _interopRequireDefault(_storybookAddons);
+var _addons2 = _interopRequireDefault(_addons);
 
 var _reduxListenerPanel = require('./components/redux-listener-panel');
 
 var _reduxListenerPanel2 = _interopRequireDefault(_reduxListenerPanel);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-_storybookAddons2.default.register('addon/redux-listener', function (api) {
-  _storybookAddons2.default.addPanel('addon/redux-listener', {
+_addons2.default.register('addon/redux-listener', function (api) {
+  _addons2.default.addPanel('addon/redux-listener', {
     title: 'Redux Action Listener',
     render: function render() {
-      return _react2.default.createElement(_reduxListenerPanel2.default, { channel: _storybookAddons2.default.getChannel(), api: api });
+      return _react2.default.createElement(_reduxListenerPanel2.default, { channel: _addons2.default.getChannel(), api: api });
     }
   });
 });

package.json

@@ -51,5 +51,10 @@
     "eslint-plugin-jsx-a11y": "^4.0.0",
     "eslint-plugin-mocha": "^4.8.0",
     "eslint-plugin-react": "^6.10.0"
+  },
+  "peerDependencies": {
+    "@storybook/addons": "^3.0.0",
+    "prop-types": "^15.5.0",
+    "react": "^0.14 || ^15.5.0"
   }
 }

src/components/redux-listener-panel.jsx

@@ -1,6 +1,7 @@
 /* eslint-disable react/no-array-index-key */
 
-import React, { Component, PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 
 const styles = {
   reduxPanel: {
@@ -12,10 +13,15 @@ const styles = {
   }
 };
 
-class ReduxListenerPanel extends Component {
+class ReduxListenerPanel extends React.PureComponent {
   static propTypes = {
-    api: PropTypes.shape().isRequired,
-    channel: PropTypes.shape().isRequired
+    api: PropTypes.shape({
+      onStory: PropTypes.func.isRequired,
+    }).isRequired,
+    channel: PropTypes.shape({
+      on: PropTypes.func.isRequired,
+      removeListener: PropTypes.func.isRequired,
+    }).isRequired
   };
 
   constructor(...args) {

src/index.js

@@ -1,5 +1,5 @@
 import listen from 'redux-listener-middleware';
-import addonAPI from '@kadira/storybook-addons';
+import addonAPI from '@storybook/addons';
 
 export default () => {
   const reduxListener = listen();

src/register.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import addons from '@kadira/storybook-addons';
+import addons from '@storybook/addons';
 
 import ReduxListenerPanel from './components/redux-listener-panel';