@dump247/storybook-state - npm Package Compare versions

Comparing version 1.3.0 to 1.4.0

.storybook/config.js

 import React from 'react';
 import { configure, storiesOf } from '@storybook/react';
 import { withState } from '../dist/index';
+import { withInfo } from '@storybook/addon-info';
 
+const Input = (props) => {
+  return <input {...props.store.state} type="text" onChange={({ target: { value } }) => props.store.set({ value })}/>;
+}
+
 configure(function () {
   storiesOf('Test')
-  .add('with state', withState({ value: '' }, (store) => (
-    <input {...store.state} type="text" onChange={({ target: { value } }) => store.set({ value })}/>
-  )))
-  .add('with state 2', withState({ value: '' }, (store) => (
-    <input {...store.state} type="text" onChange={({ target: { value } }) => store.set({ value })}/>
-  )))
-  .add('no state', () => (
-    <div>No stuff</div>
-  ));
+  .add('with state', withState({ value: '' }, (store) => <Input store={store}/>))
+  .add('with state 2', withState({ value: '' }, (store) => <Input store={store}/>))
+  .add('no state', () => <div>No stuff</div>)
+  .add('chain', withState({ value: '' })(({ store }) => <Input store={store}/>))
+  .add('chain withInfo before',
+      withInfo('some info')(withState({ value: '' })(({ store }) => <Input store={store}/>))
+  )
+  .add('chain withInfo after',
+      withState({ value: '' })(withInfo('some info')(({ store }) => <Input store={store}/>))
+  );
 }, module);

dist/index.js

@@ -145,6 +145,7 @@ 'use strict';
           store = _props3.store,
-          storyFn = _props3.storyFn;
+          storyFn = _props3.storyFn,
+          context = _props3.context;
 
 
-      var child = storyFn(store);
+      var child = context ? storyFn(context) : storyFn(store);
       return _react2.default.isValidElement(child) ? child : child();
@@ -157,9 +158,20 @@ }
 
-function withState(initialState, storyFn) {
+function withState(initialState) {
+  var storyFn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+
   var store = new Store(initialState || {});
   var channel = _addons2.default.getChannel();
 
-  return function () {
-    return _react2.default.createElement(StoryState, { store: store, storyFn: storyFn, channel: channel });
-  };
+  if (storyFn) {
+    // Support legacy withState signature
+    return function () {
+      return _react2.default.createElement(StoryState, { store: store, storyFn: storyFn, channel: channel });
+    };
+  } else {
+    return function (storyFn) {
+      return function (context) {
+        return _react2.default.createElement(StoryState, { store: store, storyFn: storyFn, channel: channel, context: _extends({}, context, { store: store }) });
+      };
+    };
+  }
 }

package.json

 {
   "name": "@dump247/storybook-state",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Manage component state in storybook stories.",
@@ -39,2 +39,3 @@ "main": "dist/index.js",
   "devDependencies": {
+    "@storybook/addon-info": "^3.4.0",
     "@storybook/react": "^3.2.16",
@@ -41,0 +42,0 @@ "@types/storybook__react": "^3.0.7",

README.md

@@ -30,3 +30,3 @@ # Storybook State
 storiesOf('Checkbox', module)
-.add('with check', withState({ checked: false }, (store) => (
+.add('with check', withState({ checked: false })(({ store }) => (
   <Checkbox {...store.state}
@@ -40,3 +40,3 @@ label="Test Checkbox"
 
-### `withState(initialState, storyFn)`
+### `withState(initialState)(storyFn)`
 
@@ -46,6 +46,16 @@ `initialState` is the initial state of the component. This is an object where each key is a
 
-`storyFn` is the function that produces the story component. This function receives a `Store`
-object as the parameter.
+`storyFn` is the function that produces the story component. This function receives the story context
+object `{ store: Store }` as the parameter.
 
+This extension can be composed with other storybook extension functions:
 
+```javascript
+withState({ initialState: '' })(
+    withInfo(`Some cool info`)(
+        ({ store }) => <MyComponent {...store.state}/>
+    )
+)
+```
+
+
 ## Store API
@@ -52,0 +62,0 @@

src/index.js

@@ -49,2 +49,3 @@ import React from 'react';
     storyFn: T.func.isRequired,
+    context: T.object,
   };
@@ -86,5 +87,5 @@
   render() {
-    const { store, storyFn } = this.props;
+    const { store, storyFn, context } = this.props;
 
-    const child = storyFn(store);
+    const child = context ? storyFn(context) : storyFn(store);
     return React.isValidElement(child) ? child : child();
@@ -94,7 +95,16 @@ }
 
-export function withState(initialState, storyFn) {
+export function withState(initialState, storyFn=null) {
   const store = new Store(initialState || {});
   const channel = addons.getChannel();
 
-  return () => <StoryState store={store} storyFn={storyFn} channel={channel}/>;
+  if (storyFn) {
+    // Support legacy withState signature
+    return () => (
+      <StoryState store={store} storyFn={storyFn} channel={channel}/>
+    );
+  } else {
+    return (storyFn) => (context) => (
+      <StoryState store={store} storyFn={storyFn} channel={channel} context={{...context, store}}/>
+    );
+  }
 }

src/index.test.js

@@ -88,3 +88,3 @@ import React from 'react';
 
-  test('initial state is passed to component', () => {
+  test('legacy signature', () => {
     const stateComponent = mount(withState({ var1: 1 }, (store) => <TestComponent {...store.state}/>)());
@@ -95,6 +95,12 @@ const testComponent = stateComponent.childAt(0);
 
+  test('initial state is passed to component', () => {
+    const stateComponent = mount(withState({ var1: 1 })(({ store }) => <TestComponent {...store.state}/>)({}));
+    const testComponent = stateComponent.childAt(0);
+    expect(testComponent.props()).toEqual({ var1: 1 });
+  });
+
   test('set existing state variable', () => {
-    const stateComponent = mount(withState({ var1: 1 }, (store) => (
+    const stateComponent = mount(withState({ var1: 1 })(({ store }) => (
       <TestComponent {...store.state} onSetVar1={() => store.set({ var1: 2 })}/>
-    ))());
+    ))({}));
 
@@ -109,5 +115,5 @@ expectProps(stateComponent.childAt(0)).toEqual({ var1: 1 });
   test('set new state variable', () => {
-    const stateComponent = mount(withState({ var1: 1 }, (store) => (
+    const stateComponent = mount(withState({ var1: 1 })(({ store }) => (
       <TestComponent {...store.state} onSetVar2={() => store.set({ var2: 3 })}/>
-    ))());
+    ))({}));
 
@@ -122,3 +128,3 @@ expectProps(stateComponent.childAt(0)).toEqual({ var1: 1 });
   test('reset to initial state', () => {
-    const stateComponent = mount(withState({ var1: 1 }, (store) => (
+    const stateComponent = mount(withState({ var1: 1 })(({ store }) => (
       <TestComponent {...store.state}
@@ -128,3 +134,3 @@ onSetVar2={() => store.set({ var2: 3 })}
                      onReset={() => store.reset()}/>
-    ))());
+    ))({}));
 
@@ -144,5 +150,5 @@ expect(stateComponent.childAt(0).props()).toMatchObject({ var1: 1 });
   test('unmount state component', () => {
-    const stateComponent = mount(withState({ var1: 1 }, (store) => <TestComponent {...store.state}/>)());
+    const stateComponent = mount(withState({ var1: 1 })((store) => <TestComponent {...store.state}/>)({}));
     stateComponent.unmount();
   })
 });

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

Total package byte prevSize

380859

increased by0.45%

Lines of code

10339

increased by0.3%

Number of lines in readme file

80

increased by14.29%

Worsened metrics

Dev dependency count

13

increased by8.33%

No dependency changes