@dump247/storybook-state - npm Package Compare versions

Comparing version 1.5.2 to 1.6.0

.storybook/config.js

@@ -8,6 +8,6 @@ import React from 'react';
   return <input {...props.store.state} type="text" onChange={({ target: { value } }) => props.store.set({ value })}/>;
-}
+};
 
 configure(function () {
-  storiesOf('Test')
+  storiesOf('Test', module)
   .add('with state', withState({ value: '' }, (store) => <Input store={store}/>))
@@ -14,0 +14,0 @@ .add('with state 2', withState({ value: '' }, (store) => <Input store={store}/>))

dist/index.js

@@ -1,39 +0,20 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.StoryState = exports.Store = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-exports.withState = withState;
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-var _addons = require('@storybook/addons');
-
-var _addons2 = _interopRequireDefault(_addons);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-var Store = exports.Store = function () {
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/objectSpread";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import React from 'react';
+import T from 'prop-types';
+import addons from '@storybook/addons';
+import { ADDON_EVENT_CHANGE, ADDON_EVENT_RESET } from './constants';
+export var Store =
+/*#__PURE__*/
+function () {
   function Store(initialState) {
     _classCallCheck(this, Store);
 
-    this.initialState = Object.freeze(_extends({}, initialState));
+    this.initialState = Object.freeze(_objectSpread({}, initialState));
     this.state = this.initialState;
@@ -44,9 +25,9 @@ this.handlers = [];
   _createClass(Store, [{
-    key: 'set',
+    key: "set",
     value: function set(state) {
-      this.state = Object.freeze(_extends({}, this.state, state));
+      this.state = Object.freeze(_objectSpread({}, this.state, state));
       this.fireStateChange();
     }
   }, {
-    key: 'reset',
+    key: "reset",
     value: function reset() {
@@ -59,3 +40,3 @@ if (this.initialState !== this.state) {
   }, {
-    key: 'subscribe',
+    key: "subscribe",
     value: function subscribe(handler) {
@@ -67,5 +48,6 @@ if (this.handlers.indexOf(handler) < 0) {
   }, {
-    key: 'unsubscribe',
+    key: "unsubscribe",
     value: function unsubscribe(handler) {
       var handlerIndex = this.handlers.indexOf(handler);
+
       if (handlerIndex >= 0) {
@@ -76,6 +58,5 @@ this.handlers.splice(handlerIndex, 1);
   }, {
-    key: 'fireStateChange',
+    key: "fireStateChange",
     value: function fireStateChange() {
       var state = this.state;
-
       this.handlers.forEach(function (handler) {
@@ -89,68 +70,77 @@ return handler(state);
 }();
-
-var StoryState = exports.StoryState = function (_React$Component) {
+export var StoryState =
+/*#__PURE__*/
+function (_React$Component) {
   _inherits(StoryState, _React$Component);
 
   function StoryState() {
-    var _ref;
+    var _getPrototypeOf2;
 
-    var _temp, _this, _ret;
+    var _this;
 
     _classCallCheck(this, StoryState);
 
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = StoryState.__proto__ || Object.getPrototypeOf(StoryState)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(StoryState)).call.apply(_getPrototypeOf2, [this].concat(args)));
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
       storyState: _this.props.store.state
-    }, _this.handleResetEvent = function () {
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleResetEvent", function () {
       var store = _this.props.store;
+      store.reset();
+    });
 
-
-      store.reset();
-    }, _this.handleStateChange = function (storyState) {
+    _defineProperty(_assertThisInitialized(_this), "handleStateChange", function (storyState) {
       var channel = _this.props.channel;
 
+      _this.setState({
+        storyState: storyState
+      });
 
-      _this.setState({ storyState: storyState });
-      channel.emit('dump247/state/change', { state: storyState });
-    }, _temp), _possibleConstructorReturn(_this, _ret);
+      channel.emit(ADDON_EVENT_CHANGE, {
+        state: storyState
+      });
+    });
+
+    return _this;
   }
 
   _createClass(StoryState, [{
-    key: 'componentDidMount',
+    key: "componentDidMount",
     value: function componentDidMount() {
-      var _props = this.props,
-          store = _props.store,
-          channel = _props.channel;
-
-
+      var _this$props = this.props,
+          store = _this$props.store,
+          channel = _this$props.channel;
       store.subscribe(this.handleStateChange);
-      channel.on('dump247/state/reset', this.handleResetEvent);
-      channel.emit('dump247/state/change', { state: store.state });
+      channel.on(ADDON_EVENT_RESET, this.handleResetEvent);
+      channel.emit(ADDON_EVENT_CHANGE, {
+        state: store.state
+      });
     }
   }, {
-    key: 'componentWillUnmount',
+    key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      var _props2 = this.props,
-          store = _props2.store,
-          channel = _props2.channel;
-
-
+      var _this$props2 = this.props,
+          store = _this$props2.store,
+          channel = _this$props2.channel;
       store.unsubscribe(this.handleStateChange);
-      channel.removeListener('dump247/state/reset', this.handleResetEvent);
-      channel.emit('dump247/state/change', { state: null });
+      channel.removeListener(ADDON_EVENT_RESET, this.handleResetEvent);
+      channel.emit(ADDON_EVENT_CHANGE, {
+        state: null
+      });
     }
   }, {
-    key: 'render',
+    key: "render",
     value: function render() {
-      var _props3 = this.props,
-          store = _props3.store,
-          storyFn = _props3.storyFn,
-          context = _props3.context;
-
-
+      var _this$props3 = this.props,
+          store = _this$props3.store,
+          storyFn = _this$props3.storyFn,
+          context = _this$props3.context;
       var child = context ? storyFn(context) : storyFn(store);
-      return _react2.default.isValidElement(child) ? child : child();
+      return React.isValidElement(child) ? child : child();
     }
@@ -160,9 +150,15 @@ }]);
   return StoryState;
-}(_react2.default.Component);
+}(React.Component);
 
-function withState(initialState) {
+_defineProperty(StoryState, "propTypes", {
+  channel: T.object.isRequired,
+  store: T.object.isRequired,
+  storyFn: T.func.isRequired,
+  context: T.object
+});
+
+export function withState(initialState) {
   var storyFn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-
   var store = new Store(initialState || {});
-  var channel = _addons2.default.getChannel();
+  var channel = addons.getChannel();
 
@@ -172,3 +168,7 @@ if (storyFn) {
     return function () {
-      return _react2.default.createElement(StoryState, { store: store, storyFn: storyFn, channel: channel });
+      return React.createElement(StoryState, {
+        store: store,
+        storyFn: storyFn,
+        channel: channel
+      });
     };
@@ -178,3 +178,10 @@ } else {
       return function (context) {
-        return _react2.default.createElement(StoryState, { store: store, storyFn: storyFn, channel: channel, context: _extends({}, context, { store: store }) });
+        return React.createElement(StoryState, {
+          store: store,
+          storyFn: storyFn,
+          channel: channel,
+          context: _objectSpread({}, context, {
+            store: store
+          })
+        });
       };
@@ -181,0 +188,0 @@ };

dist/register.js

@@ -1,35 +0,13 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-exports.register = register;
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-var _addons = require('@storybook/addons');
-
-var _addons2 = _interopRequireDefault(_addons);
-
-var _reactJsonView = require('react-json-view');
-
-var _reactJsonView2 = _interopRequireDefault(_reactJsonView);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import T from 'prop-types';
+import addons from '@storybook/addons';
+import JsonView from 'react-json-view';
+import { ADDON_ID, ADDON_PANEL_ID, ADDON_EVENT_CHANGE, ADDON_EVENT_RESET } from './constants';
 var styles = {
@@ -62,52 +40,57 @@ panel: {
 
-var StatePanel = function (_React$Component) {
+var StatePanel =
+/*#__PURE__*/
+function (_React$Component) {
   _inherits(StatePanel, _React$Component);
 
   function StatePanel() {
-    var _ref;
+    var _getPrototypeOf2;
 
-    var _temp, _this, _ret;
+    var _this;
 
     _classCallCheck(this, StatePanel);
 
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = StatePanel.__proto__ || Object.getPrototypeOf(StatePanel)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(StatePanel)).call.apply(_getPrototypeOf2, [this].concat(args)));
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
       storyState: null
-    }, _this.handleChangeEvent = function (_ref2) {
-      var storyState = _ref2.state;
+    });
 
-      _this.setState({ storyState: storyState });
-    }, _this.handleResetClick = function () {
+    _defineProperty(_assertThisInitialized(_this), "handleChangeEvent", function (_ref) {
+      var storyState = _ref.state;
+
+      _this.setState({
+        storyState: storyState
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleResetClick", function () {
       var channel = _this.props.channel;
+      channel.emit(ADDON_EVENT_RESET);
+    });
 
-
-      channel.emit('dump247/state/reset');
-    }, _temp), _possibleConstructorReturn(_this, _ret);
+    return _this;
   }
 
   _createClass(StatePanel, [{
-    key: 'componentDidMount',
+    key: "componentDidMount",
     value: function componentDidMount() {
       var channel = this.props.channel;
-
-
-      channel.on('dump247/state/change', this.handleChangeEvent);
+      channel.on(ADDON_EVENT_CHANGE, this.handleChangeEvent);
     }
   }, {
-    key: 'componentWillUnmount',
+    key: "componentWillUnmount",
     value: function componentWillUnmount() {
       var channel = this.props.channel;
-
-
-      channel.removeListener('dump247/state/change', this.handleChangeEvent);
+      channel.removeListener(ADDON_EVENT_CHANGE, this.handleChangeEvent);
     }
   }, {
-    key: 'render',
+    key: "render",
     value: function render() {
       var storyState = this.state.storyState;
 
-
       if (storyState === null) {
@@ -117,12 +100,13 @@ return null;
 
-      return _react2.default.createElement(
-        'div',
-        { style: styles.panel },
-        _react2.default.createElement(_reactJsonView2.default, { src: storyState, name: null, enableClipboard: false }),
-        _react2.default.createElement(
-          'button',
-          { style: styles.resetButton, type: 'button', onClick: this.handleResetClick },
-          'Reset'
-        )
-      );
+      return React.createElement("div", {
+        style: styles.panel
+      }, React.createElement(JsonView, {
+        src: storyState,
+        name: null,
+        enableClipboard: false
+      }), React.createElement("button", {
+        style: styles.resetButton,
+        type: "button",
+        onClick: this.handleResetClick
+      }, "Reset"));
     }
@@ -132,12 +116,24 @@ }]);
   return StatePanel;
-}(_react2.default.Component);
+}(React.Component);
 
-function register() {
-  _addons2.default.register('dump247/state', function (api) {
-    var channel = _addons2.default.getChannel();
+_defineProperty(StatePanel, "propTypes", {
+  channel: T.object,
+  api: T.object,
+  active: T.bool.isRequired
+});
 
-    _addons2.default.addPanel('dump247/state/panel', {
+export function register() {
+  addons.register(ADDON_ID, function (api) {
+    var channel = addons.getChannel();
+    addons.addPanel(ADDON_PANEL_ID, {
       title: 'State',
-      render: function render() {
-        return _react2.default.createElement(StatePanel, { channel: channel, api: api });
+      render: function render(_ref2) {
+        var active = _ref2.active,
+            key = _ref2.key;
+        return React.createElement(StatePanel, {
+          channel: channel,
+          api: api,
+          key: key,
+          active: active
+        });
       }
@@ -144,0 +140,0 @@ });

package.json

 {
   "name": "@dump247/storybook-state",
-  "version": "1.5.2",
+  "version": "1.6.0",
   "description": "Manage component state in storybook stories.",
@@ -8,3 +8,3 @@ "main": "dist/index.js",
   "scripts": {
-    "build": "rm -rf dist/ && cd src/ && babel index.js register.js --out-dir ../dist",
+    "build": "rm -rf dist/ && cd src/ && babel index.js register.js constants.js --out-dir ../dist",
     "dist": "npm run build && npm publish",
@@ -41,16 +41,18 @@ "test": "jest",
   "devDependencies": {
-    "@storybook/addon-info": "^3.4.0",
-    "@storybook/react": "^3.2.16",
-    "@types/storybook__react": "^3.0.7",
-    "babel-cli": "^6.26.0",
-    "babel-plugin-transform-react-remove-prop-types": "^0.4.10",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-0": "^6.24.1",
-    "enzyme": "^3.2.0",
-    "enzyme-adapter-react-16": "^1.6.0",
-    "jest": "^21.2.1",
-    "react-dom": "^16.0.0",
-    "react-test-renderer": "^16.0.0"
+    "@babel/cli": "^7.4.4",
+    "@babel/core": "^7.4.4",
+    "@babel/plugin-proposal-class-properties": "^7.4.4",
+    "@babel/plugin-proposal-object-rest-spread": "^7.4.4",
+    "@babel/plugin-transform-runtime": "^7.4.4",
+    "@babel/preset-env": "^7.4.4",
+    "@babel/preset-react": "^7.0.0",
+    "@storybook/addon-info": "^5.0.11",
+    "@storybook/react": "^5.0.11",
+    "@types/storybook__react": "^4.0.1",
+    "enzyme": "^3.9.0",
+    "enzyme-adapter-react-16": "^1.12.1",
+    "jest": "^24.8.0",
+    "react-dom": "^16.8.6",
+    "react-test-renderer": "^16.8.6"
   }
 }

README.md

@@ -24,3 +24,3 @@ # Storybook State
 
-```javascript
+```jsx
 import React from 'react';
@@ -30,8 +30,12 @@ import { storiesOf } from '@storybook/react';
 
-storiesOf('Checkbox', module)
-.add('with check', withState({ checked: false })(({ store }) => (
-  <Checkbox {...store.state}
-            label="Test Checkbox"
-            onChange={(checked) => store.set({ checked })}/>
-));
+storiesOf('Checkbox', module).add(
+  'with check',
+  withState({ checked: false })(({ store }) => (
+    <Checkbox
+      {...store.state}
+      label="Test Checkbox"
+      onChange={(checked) => store.set({ checked })}
+    />
+  )),
+);
 ```
@@ -51,7 +55,7 @@
 
-```javascript
+```jsx
 withState({ initialState: '' })(
-    withInfo(`Some cool info`)(
-        ({ store }) => <MyComponent {...store.state}/>
-    )
+  withInfo(`Some cool info`)(
+    ({ store }) => <MyComponent {...store.state} />
+  )
 )
@@ -58,0 +62,0 @@ ```

src/index.js

 import React from 'react';
 import T from 'prop-types';
 import addons from '@storybook/addons';
+import {
+  ADDON_EVENT_CHANGE,
+  ADDON_EVENT_RESET,
+} from './constants';
 
@@ -60,4 +64,4 @@ export class Store {
     store.subscribe(this.handleStateChange);
-    channel.on('dump247/state/reset', this.handleResetEvent);
-    channel.emit('dump247/state/change', { state: store.state });
+    channel.on(ADDON_EVENT_RESET, this.handleResetEvent);
+    channel.emit(ADDON_EVENT_CHANGE, { state: store.state });
   }
@@ -69,4 +73,4 @@
     store.unsubscribe(this.handleStateChange);
-    channel.removeListener('dump247/state/reset', this.handleResetEvent);
-    channel.emit('dump247/state/change', { state: null });
+    channel.removeListener(ADDON_EVENT_RESET, this.handleResetEvent);
+    channel.emit(ADDON_EVENT_CHANGE, { state: null });
   }
@@ -84,3 +88,3 @@
     this.setState({ storyState });
-    channel.emit('dump247/state/change', { state: storyState });
+    channel.emit(ADDON_EVENT_CHANGE, { state: storyState });
   };
@@ -87,0 +91,0 @@

src/register.js

@@ -5,2 +5,8 @@ import React from 'react';
 import JsonView from 'react-json-view';
+import {
+  ADDON_ID,
+  ADDON_PANEL_ID,
+  ADDON_EVENT_CHANGE,
+  ADDON_EVENT_RESET,
+} from './constants';
 
@@ -38,2 +44,3 @@ const styles = {
     api: T.object,
+    active: T.bool.isRequired,
   };
@@ -48,3 +55,3 @@
 
-    channel.on('dump247/state/change', this.handleChangeEvent);
+    channel.on(ADDON_EVENT_CHANGE, this.handleChangeEvent);
   }
@@ -55,3 +62,3 @@
 
-    channel.removeListener('dump247/state/change', this.handleChangeEvent);
+    channel.removeListener(ADDON_EVENT_CHANGE, this.handleChangeEvent);
   }
@@ -66,3 +73,3 @@
 
-    channel.emit('dump247/state/reset');
+    channel.emit(ADDON_EVENT_RESET);
   };
@@ -87,10 +94,10 @@
 export function register() {
-  addons.register('dump247/state', (api) => {
+  addons.register(ADDON_ID, (api) => {
     const channel = addons.getChannel();
 
-    addons.addPanel('dump247/state/panel', {
+    addons.addPanel(ADDON_PANEL_ID, {
       title: 'State',
-      render: () => <StatePanel channel={channel} api={api}/>,
+      render: ({ active, key }) => <StatePanel channel={channel} api={api} key={key} active={active} />,
     });
   });
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of package files

16

increased by6.67%

Lines of code

617

increased by9.98%

Number of lines in readme file

84

increased by5%

Worsened metrics

Total package byte prevSize

30641

decreased by-3.72%

Dev dependency count

15

increased by15.38%

No dependency changes