From 3e2b613d495f1e2212e8fd3c798a51296fb908d9 Mon Sep 17 00:00:00 2001 From: "NeZeD [Mac Air]" Date: Mon, 11 Sep 2017 04:08:22 +0300 Subject: [PATCH] Upgrade Storybook's dependecies and use PropTypes from external package --- README.md | 8 ++++---- dist/components/redux-listener-panel.js | 23 ++++++++++++++++------- dist/index.js | 6 +++--- dist/register.js | 10 +++++----- package.json | 5 +++++ src/components/redux-listener-panel.jsx | 14 ++++++++++---- src/index.js | 2 +- src/register.jsx | 2 +- 8 files changed, 45 insertions(+), 25 deletions(-) diff --git a/README.md b/README.md index 131899e..dd56685 100644 --- a/README.md +++ b/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(); diff --git a/dist/components/redux-listener-panel.js b/dist/components/redux-listener-panel.js index 165566f..115837e 100644 --- a/dist/components/redux-listener-panel.js +++ b/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; \ No newline at end of file diff --git a/dist/index.js b/dist/index.js index cd508b5..2b8dc5e 100644 --- a/dist/index.js +++ b/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); diff --git a/dist/register.js b/dist/register.js index 493d16b..6090177 100644 --- a/dist/register.js +++ b/dist/register.js @@ -4,9 +4,9 @@ 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'); @@ -14,11 +14,11 @@ 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 }); } }); }); \ No newline at end of file diff --git a/package.json b/package.json index 3c7994c..1df162d 100644 --- a/package.json +++ b/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" } } diff --git a/src/components/redux-listener-panel.jsx b/src/components/redux-listener-panel.jsx index 7860f6c..cd2799e 100644 --- a/src/components/redux-listener-panel.jsx +++ b/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) { diff --git a/src/index.js b/src/index.js index 15efbcf..8c5f254 100644 --- a/src/index.js +++ b/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(); diff --git a/src/register.jsx b/src/register.jsx index 0472cc8..c8faa72 100644 --- a/src/register.jsx +++ b/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';