{"_id":"@aeolun/storybook-state","_rev":"3-fbb1048a0a6a126c49795c7c57573064","name":"@aeolun/storybook-state","dist-tags":{"latest":"2.1.0"},"versions":{"2.0.2":{"name":"@aeolun/storybook-state","version":"2.0.2","description":"Manage state in storybook stories","main":"dist/index.js","scripts":{"build":"tsc","test":"snyk test && jest --config jest.config.js"},"repository":{"type":"git","url":"git+https://github.com/aeolun/storybook-state.git"},"keywords":["storybook","react-storybook","react"],"author":{"name":"Bart Riepe"},"license":"MIT","bugs":{"url":"https://github.com/aeolun/storybook-state/issues"},"homepage":"https://github.com/aeolun/storybook-state#readme","typings":"lib/index.d.ts","devDependencies":{"typescript":"^4.8.4","jest":"^29.3.1","react-test-renderer":"^17","snyk":"^1.1056.0"},"peerDependencies":{"react":"^16.8.0 || ^17 || ^18","react-dom":"^16.8.0 || ^17 || ^18"},"dependencies":{"@types/react":"^17.0.52","@types/react-dom":"^17.0.11","@storybook/addons":"^6.5.13","@storybook/api":"^6.5.13","@storybook/components":"^6.5.13","@storybook/react":"^6.5.13","uuid":"^9.0.0","react":"^17","react-dom":"^17"},"contributors":[{"name":"Authors"},{"name":"Sam Bellen","email":"sambellen@gmail.com"}],"gitHead":"fcfb11d030dcb69139d5b5de3b1bb77c9a2c8d58","_id":"@aeolun/storybook-state@2.0.2","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-rUS+C3CeS1/yHTxxvusKY7KksLhMBTE/2VftFHyBQYYRT6s6HmVW0U7YLPXLuZqGSlv5GCehovJRW5bNj/dWvQ==","shasum":"39c77c8a2c13fbc8d0223c61ed5abbbb7a7c2c3d","tarball":"https://registry.npmjs.org/@aeolun/storybook-state/-/storybook-state-2.0.2.tgz","fileCount":27,"unpackedSize":482718,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFNybkYZZIxAYF997+4Qt8RVT3nxqBg7gnDTKzhkL/JhAiARuabw0M/TzTj5oinJz3bhqpWoLNIUGMwLon7BHdPwpg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJja1CaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmozdhAAgqwn4zlvAoyF3I7qBCiMCD+71a+aIphpf+aT45obnNlePGzg\r\nwzyB7/zP91mE50yLloGLwowtOMzBJ8owkeTP2MZhr8gEuwcO2awxxmG+xsf9\r\nKLGlLpn/hnOz9xqAzJVqqCY6nrEhzO61ARhgkJfSm2rWKdWm6TZWWXDtKD8W\r\n8GXfZqX+i5Ycb35yBDyxMU8Mq/TprBm3XHTTfHI0/Q5sM9B/8wWu8vKBhi3J\r\nk8r5tafi4bhGLt5SBOXt/MCJI/55D8BtY8Wd7HbrhmDyMZS6QEecdxM9zA/3\r\nE6TEXwdsCTICyYmPHEopQB4l1tQm67+IC4pzDwoHl7oQ54zhpPVzg2YKxFrH\r\n+UqGMurJ0Ueb3RwAPR2Xn5e2hn+Rllvm06rb3+wOeiVhoyAlW959AzoXmwoL\r\nUcfD5A+aBBk0kT2Sq6NBMVJQYyD4gxfwV1tbrezy7YLOL9ZBi475NLeKW6zq\r\nZyGnwCUfObfGIrVNrRw4LlJY52Euf/rgudcBpUJfquDTpq/MmdKxva/fTVZB\r\n8imrbCCl2PtxKo5Qhy9k7od9FsqfjskqmGonFp1ePNFWP3RcwN9cAzUwZA8C\r\nKdv3PWwxPeSj+7msv3Dji/5XmvTd/P5XtfzzxIY9g/iHTjMZzJvbmkd0EsTd\r\nU+RgqXN1YaTVjsw7OsjaF/kh2UI5FRQc5ng=\r\n=fShL\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"aeolun","email":"bart@serial-experiments.com"},"directories":{},"maintainers":[{"name":"aeolun","email":"bart@serial-experiments.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-state_2.0.2_1667977370494_0.07997750934603554"},"_hasShrinkwrap":false},"2.0.3":{"name":"@aeolun/storybook-state","version":"2.0.3","description":"Manage state in storybook stories","main":"dist/index.js","scripts":{"build":"tsc","test":"snyk test && jest --config jest.config.js"},"repository":{"type":"git","url":"git+https://github.com/aeolun/storybook-state.git"},"keywords":["storybook","react-storybook","react"],"author":{"name":"Bart Riepe"},"license":"MIT","bugs":{"url":"https://github.com/aeolun/storybook-state/issues"},"homepage":"https://github.com/aeolun/storybook-state#readme","typings":"lib/index.d.ts","devDependencies":{"@types/uuid":"^8.3.4","jest":"^29.3.1","react-test-renderer":"^17","snyk":"^1.1056.0","typescript":"^4.8.4"},"peerDependencies":{"react":"^16.8.0 || ^17 || ^18","react-dom":"^16.8.0 || ^17 || ^18"},"dependencies":{"@storybook/addons":"^6.5.13","@storybook/api":"^6.5.13","@storybook/components":"^6.5.13","@storybook/react":"^6.5.13","@types/react":"^17.0.52","@types/react-dom":"^17.0.11","react":"^16.8.0 || ^17 || ^18","react-dom":"^16.8.0 || ^17 || ^18","uuid":"^9.0.0"},"contributors":[{"name":"Authors"},{"name":"Sam Bellen","email":"sambellen@gmail.com"}],"gitHead":"b9df17e21787343d8df2033093e229ed0c3a900d","_id":"@aeolun/storybook-state@2.0.3","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-bkHrySSphmyHnwQ+96rYoOE0Nw+S/eBnD5+eKxpx6UXV6oMDIkamk/7KNt0FalyvwRpOsy8CkOkO4kD52Vigeg==","shasum":"ba798e263df0d6e0f24a2b81705b9ddad2df8549","tarball":"https://registry.npmjs.org/@aeolun/storybook-state/-/storybook-state-2.0.3.tgz","fileCount":27,"unpackedSize":482622,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFwIqjbrHJ9USlmG7n1CNJJCKmWrAujyikbO44NOr6lKAiBpPqdmSK7YwzTv1OCvUwdnaF2mMYOPGPn1gEMa6H78EQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJja4XgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoC7Q//RY0xwWScz1JyhJ01Gq3ALGVucH+XcLNNZWJw8++In2FgWb5p\r\n04fn//p70lhMMe6AWCiFRLfKkHEAjD0xOnUkDtgEUUe92SyTpMUmoMRVsMhG\r\ny/gnneCFyG2W7rl/g9r/gQSyPUmahn0GPwAo5iDMc6gdvJo64sy0e1f/lZzg\r\nCeUFlh7GQ9N//7sXxxEtXCdEV+pLDC6Hue9vsFPcigD1GXg4YQro77dfY/BN\r\nUOAaQ68NZ2wycVOiCZP4Is/daxofzMfABAlfXy6wVgDHO6C7Bn83Volw6Kas\r\nFkEtwaiKXy2tZD58fktycqJlFEzGicH79zBabesLEFgPTHAlfuSVvyIxu4aL\r\nkZ3RGGF7OD/TCFk3AU8a1LQwMM9pUsc8yRF6//F2YcOKubttnzKkipUZDmSU\r\nk6IMqIf2KweDnrsuS1Zz7zUfl3JdmjEcxww1vs4S1ADxBJOunzmkAHM9sOyB\r\nkQo2mzoswCGIgfNibrXAEJ1dyKBN2ZnSBamCpS+i2Hdc5TuV58lp+QS6c4pm\r\nEjkRGwOhN5XKNUEXYnrrB8K30nq67enVjB7zdiVDgT2QDjO5k/XjmiboIQu5\r\n6eGzIq7PLxgBm9OnI/npvwHIPuAf59faDo6UWyuMYtuUztNH4fBPiKBTmh7G\r\nVKUL5XcQ+oMwRpKE9WKVt0kY9UagqEKy3p4=\r\n=pMeZ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"aeolun","email":"bart@serial-experiments.com"},"directories":{},"maintainers":[{"name":"aeolun","email":"bart@serial-experiments.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-state_2.0.3_1667991007695_0.09951704866749389"},"_hasShrinkwrap":false},"2.1.0":{"name":"@aeolun/storybook-state","version":"2.1.0","description":"Manage state in storybook stories","main":"dist/index.js","scripts":{"build":"tsc","jest":"jest --config jest.config.js","test":"snyk test && npm run jest"},"repository":{"type":"git","url":"git+https://github.com/aeolun/storybook-state.git"},"keywords":["storybook","react-storybook","react"],"author":{"name":"Bart Riepe"},"license":"MIT","bugs":{"url":"https://github.com/aeolun/storybook-state/issues"},"homepage":"https://github.com/aeolun/storybook-state#readme","typings":"lib/index.d.ts","dependencies":{"@storybook/addons":"^7.0.0-alpha.48","@types/react":"^17.0.52 || ^18","@types/react-dom":"^17.0.11 || 18^","react":"^16.8.0 || ^17 || ^18","react-dom":"^16.8.0 || ^17 || ^18","uuid":"^9.0.0"},"peerDependencies":{"react":"^16.8.0 || ^17 || ^18","react-dom":"^16.8.0 || ^17 || ^18"},"devDependencies":{"@types/uuid":"^8.3.4","jest":"^29.3.1","react-test-renderer":"^17","snyk":"^1.1056.0","ts-jest":"^29.0.3","typescript":"^4.8.4"},"contributors":[{"name":"Authors"},{"name":"Sam Bellen","email":"sambellen@gmail.com"}],"gitHead":"49b04b2957e2a35ed492bac2228b7fddf756bea9","_id":"@aeolun/storybook-state@2.1.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-+wAkx6gfGvuaD2ERElRltgvQxQkk0jkiFwaIqH0Qts42CnffW+Y4K7EHzyFbSFZPD1W7zdeWv6E6AIN9VwJ99A==","shasum":"6741e78046ae48bd1d8013fe42129c24fbfc01ac","tarball":"https://registry.npmjs.org/@aeolun/storybook-state/-/storybook-state-2.1.0.tgz","fileCount":25,"unpackedSize":482351,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAlzAmALCzwuUg5Zbu6M/DkyP/OwbLyCKjXbah6mPgo1AiBFYvKCYXHoE5lOY6FTIiTFTDd7IJbhiFr76qHwQ1l81Q=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdIohACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoEbw//QaYw514073TSJRtwrmhVAgOPsMIYnsoqbJU4MHmPA60gFm0m\r\nAU0Eoy28lIdsJlCCvQozuf2CVxycK8Tl45vrIw5gaOh6s4BUKgvaMqyrGiG0\r\nr/NvPt4cVRktn99TkyKjejl9svqUD/T//Jop3XAoISjLCULJeQ1p2UKF2yUp\r\nIChHqh/dgxK/dfSoF/hHevDJDM9nPVfp7vX9Wl6mxlYzfGQOQUgWQbd1TsMj\r\ngf8v6ZBGO6AzCIHSRZmV1xVNoEhJNI+BpoXrwovVewnaf0zV0f++wawfbr4/\r\nqr9jbXjUYtQnhLVImhTbVnW+hpAaPiVeE58n4ZHWt32hB4sXrBRW+1w1W8Wb\r\nrSJsyMv7LhhN3HA0aFQpg2m4xwaKzDNU9VulYLIcEGnVcHiscUTNlITOvysJ\r\n8B/rnQ/kNNDeSjOzBkQLIeaMVqDUnvEDtoEWrxSDSpbJshPA9DIf8d4RcZeV\r\nz2+b1VB7xZ9knpX9og/rk7VYqvCNfMWDwpdqtGbY8hJzt2flZ1B6zM6l9tec\r\nQC/ADe6ViY0eAxHQyoeQp54kUyPVsCwxAOMPJ7bq/alBa8zBXcN4U9ZKfq0X\r\nKmJ0njpNXCKd7k06B0AlBW4rwp7qqha6KSDzkZVNBQuy6ISszGdEAl8eYVpx\r\nAsBHIFyBK6oB606dAEQK/okB080iF3DYllk=\r\n=aAau\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"aeolun","email":"bart@serial-experiments.com"},"directories":{},"maintainers":[{"name":"aeolun","email":"bart@serial-experiments.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-state_2.1.0_1668581921310_0.19247646415376418"},"_hasShrinkwrap":false}},"time":{"created":"2022-11-09T07:02:50.493Z","2.0.2":"2022-11-09T07:02:50.715Z","modified":"2022-11-16T06:58:41.797Z","2.0.3":"2022-11-09T10:50:07.990Z","2.1.0":"2022-11-16T06:58:41.555Z"},"maintainers":[{"name":"aeolun","email":"bart@serial-experiments.com"}],"description":"Manage state in storybook stories","homepage":"https://github.com/aeolun/storybook-state#readme","keywords":["storybook","react-storybook","react"],"repository":{"type":"git","url":"git+https://github.com/aeolun/storybook-state.git"},"contributors":[{"name":"Authors"},{"name":"Sam Bellen","email":"sambellen@gmail.com"}],"author":{"name":"Bart Riepe"},"bugs":{"url":"https://github.com/aeolun/storybook-state/issues"},"license":"MIT","readme":"# Storybook state\n\nNote\n--\nThis repository is a direct copy of https://github.com/Sambego/storybook-state but with updated dependencies. No other functionality was changed (unless necessary to retain functionality). All credit goes to the original author.\n\n### Getting Started\n\n```sh\nnpm install --save-dev @aeolun/storybook-state\n```\n\nFirst you will need to create a new store, to save the state and handle updates.\nYou can add all properties which your component expects, and the State component will propagate them to your component.\nOnce you've created the store, you can wrap your components in a `State` component and pass along the store.\n\nIn the example below we create a modal which will expect an `active` property.\nWhen clicking on the button we will update the store, which in turn will update the property `active` on the modal;\n\n#### Display and update using a State component\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { State, Store } from \"@aeolun/storybook-state\";\n\nconst store = new Store({\n  active: false\n});\n\nconst SimpleModal = props => (\n  <div>\n    <State store={store}>\n      <Modal>Modal content</Modal>\n    </State>\n    <Button onClick={() => store.set({ active: !store.get(\"active\") })} />\n  </div>\n);\n\nexport default { title: \"Modal\" };\nexport const Simple = () => SimpleModal;\n```\n\n#### Display and update using a State decorator\n\n```js\nimport React from \"react\";\nimport { addDecorator, addParameters } from \"@storybook/react\";\nimport { Store, withState } from \"@aeolun/storybook-state\";\n\nconst SimpleCounter = props => {\n  return [\n    <p> Count: {props.count} </p>,\n    <button onClick={props.handleCountUpdate}> {props.count} </button>\n  ];\n};\n\nconst store = new Store({\n  count: 0,\n  handleCountUpdate: () => store.set({ count: store.get(\"count\") + 1 })\n});\n\naddDecorator(withState());\naddParameters({\n  state: {\n    store\n  }\n});\n\nexport default { title: \"Counter\" };\nexport const Simple = () => SimpleCounter;\n```\n\n### Store\n\nThe store has a few methods you can use to get and update the state.\n\nWhen creating a new instance, you can pass along the initial state.\n\n```js\nconst store = new Store({\n  foo: \"bar\",\n  active: true,\n  items: [\"item 1\", \"item 2\"]\n});\n```\n\nYou can retrieve a state from the store by using the `get()` method.\n\n```js\nstore.get(\"foo\"); // will return 'bar'\nstore.get(\"active\"); // will return true\nstore.get(\"items\"); // will return ['item 1', 'item 2']\n```\n\nYou can update the store by using the `set()` method.\n\n```js\nstore.set({\n  active: false,\n  bar: \"foo\"\n});\n```\n\nYou can subscribe to changes in the store by using the `subscribe()` method.\nYou can register a callback, which will have the updated state as the first parameter whenever the state updates.\n\n```js\nstore.subscribe(state => // Do something with the updated state.\n```\n\n### State component\n\nThe state component accepts one property, an instance of `Store`. All properties that depend on the state, or should update on state changes, should be added in the Store, and will be propagated to your component by the `<State />` component.\n\n```js\n<State store={store}>\n  <StateDependendComponent />\n</State>\n```\n\nThe state also allows a function as a child so you can pass the state to any prop of your components.\n\n```js\nconst store = new Store({\n  active: true\n});\n\n<State store={store}>\n  {state => [\n    <ElementOne active={state.active} />,\n    <ElementTwo checked={state.active} />\n  ]}\n</State>;\n```\n\nYou can also manipulate the state before passing it to the children via the parseState property.\n\n```js\n<State store={store} parseState={state => ({ ...state, id: `#${state.uuid}` })}>\n  <StateDependendComponent />\n</State>\n```\n\nWhen using the `withState` decorator, you can pass along the state parser function as a parameter.\n\n```js\naddDecorator(withState());\naddParameters({\n  state: {\n    store,\n    parseState: state => ({ ...state, count: `foo-${state.count}` })\n  }\n});\n```\n","readmeFilename":"README.md"}