{"_id":"@bluealba/with-state","_rev":"4-3fcc694080864db6b3e4200d328da552","name":"@bluealba/with-state","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.1":{"name":"@bluealba/with-state","version":"1.0.1","description":"Wrapper around @dump247/storybook-state to be used as an storybook decorator","main":"index.js","repository":{"type":"git","url":"git+https://github.com/bluealba/withState.git"},"author":{"name":"Claudio Fernandez","email":"claudio.fernandez@bluealba.com"},"license":"MIT","gitHead":"41e7fafb841ccf396549507498fc8a3d9b0f5b99","bugs":{"url":"https://github.com/bluealba/withState/issues"},"homepage":"https://github.com/bluealba/withState#readme","_id":"@bluealba/with-state@1.0.1","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"aitrusgit","email":"claudio.fernandez@bluealba.com"},"dist":{"integrity":"sha512-aho2L5Ay1ry+oftOVXVXZ0ri6UvMIi4FKxHjMHYYeUIlcBwYzgtt8icaLw6Ef+MOtZxOdfPp736NkA1AgcodQA==","shasum":"88ef572d7bfb5fb40f6bece2a14a37d52b6a0ebd","tarball":"https://registry.npmjs.org/@bluealba/with-state/-/with-state-1.0.1.tgz","fileCount":3,"unpackedSize":3202,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb/vERCRA9TVsSAnZWagAAXcwP/3+0m1bhdHSufIygeKB8\nUIh6MiLIv/f03Ju2jNQB327XZlVlQHny3SwEZyFhi9vlkEGNdkhwshFzEAj/\nr7t+OTnytg6/AcX8syC7dr+3icQEW0BiCZ2jhrLbuxGOQ1M9TG2F5T+kVcI0\nig4zLUkEjoS6Rup0Gx7m2lQecuJSsENTUiq+e040MIj10qBorf6xCXkGXBTv\nVOObOGWrei98aRGGOi4QDTkPCzeSn1TX/l4hARSTLCnacyTjC47dioYFM215\nRxlgw5un7+fraE9T8/zKLIRiYracKXjs8tJitcDekuxHQEBu56f1VsfTo+dm\nNrGK6hd5fjgbFBRPYhuF/90z46pIKR0ZwNM5hWPGNam0YSM0XYBrdeXqU1NJ\nA4VrbPLZmQQHKVee6JkaXnYMlxWcydKvAiUVGw4LPFsUPO+E7PD+FHvTjX0N\nsozDsBAvenV2MOivMmi5P/K0OSzTDgpvOWM8LjfGWsYxUo+G2R4pSgpWP9pj\nYJ6ndkOHJDtE4huc/j7DeppZOv+lGZZFj35Yzw0zNVPuM9KHU/HlGpR1wlFw\nN4yaTFbHdGf6ftaJLsIrI7r2adD/pUrb7Zzvbmohxpt87NxVpZgeI9qtu4ey\nz0lAWa3KOKe812cnaha4oyfqhgGC5DD5CkdkgAvO+6ZS2LinZOpDuqa4Utwt\nDc3l\r\n=xXpp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDBu9N0VgTLg4d3Oh7yTWe/xRhLaLI/m0BNTIqnsNICDwIgN8HvSgW5TSKq6jsWczIKf20gG0PbkxBQyjtSQ0i3a5Y="}]},"maintainers":[{"name":"aitrusgit","email":"claudio.fernandez@bluealba.com"},{"name":"jabsatz","email":"julianabsatz@gmail.com"},{"name":"pablote","email":"pablocompagni@gmail.com"},{"name":"gunthers","email":"gunthers@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/with-state_1.0.1_1543434512822_0.20052465385213813"},"_hasShrinkwrap":false}},"time":{"created":"2018-11-28T19:48:32.658Z","1.0.1":"2018-11-28T19:48:32.938Z","modified":"2022-04-04T19:44:00.533Z"},"maintainers":[{"email":"gunthers@gmail.com","name":"gunthers"},{"email":"claudio.fernandez@bluealba.com","name":"aitrusgit"},{"email":"julianabsatz@gmail.com","name":"jabsatz"},{"email":"pablocompagni@gmail.com","name":"pablote"},{"email":"info@bluealba.com","name":"bluealba-org"},{"email":"npm@bluealba.com","name":"bluealba"}],"description":"Wrapper around @dump247/storybook-state to be used as an storybook decorator","homepage":"https://github.com/bluealba/withState#readme","repository":{"type":"git","url":"git+https://github.com/bluealba/withState.git"},"author":{"name":"Claudio Fernandez","email":"claudio.fernandez@bluealba.com"},"bugs":{"url":"https://github.com/bluealba/withState/issues"},"license":"MIT","readme":"@bluealba/withState\n===\nThis is a wrapper around [@dump247/storybook-state](https://github.com/dump247/storybook-state) designed to be used as an storybook decorator. This is a VERY small and rather hacky util.\n\n## Install\nYou can install it with `npm` using\n\n```\nnpm install @bluealba/withState\n```\n\n## Usage\n\nJust add `withState` decorator using storybook's `addDecorator` function\n\n```javascript\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { withState } from \"@bluealba/withState\";\nimport { Checkbox } from \"./Checkbox\";\n\nstoriesOf(\"Checkbox\", module)\n\n\t.addDecorator(withState({ isSelected: false }))\n\n\t.add(\"An ordinary unmanaged component\", ({store}) => (\n\t\t {\n\t\t\t\tstore.set({ isSelected: !store.state.isSelected });\n\t\t\t}}\n\t\t/>\n\t))\n```\n\n`withState` function receives as very first parameter the initial state that will be used for all the stories that don't\nprovide an initial state.\n\n### Specifying the intial state\n\nStories can overwrite the `initialState` value through their story parameters\n\n\n`withState` function receives as very first parameter the initial state that will be used for any story that doesn't \nspecify it. Stories can overwrite such value through their parameters:\n\n```javascript\nstoriesOf(\"Checkbox\", module)\n\n\t.addDecorator(withState({ isSelected: false }))\n\n\t.add(\"An ordinary unmanaged component, checked by default\", ({store}) => (\n\t\t {\n\t\t\t\tstore.set({ isSelected: !store.state.isSelected });\n\t\t\t}}\n\t\t/>\n\t), { initialState: { isSelected: true } })\n```\n\n### Combining with other decorators\n\nSince original `@dump247/storybook-state` HOC object is added later we are now able to combine this decorator with others that rely on component introspection. In other words, this now works perfectly:\n\n```javascript\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { withState } from \"@bluealba/withState\";\nimport { withInfo } from \"@storybook/addon-info\";\nimport { Checkbox } from \"./Checkbox\";\n\nstoriesOf(\"Checkbox\", module)\n\n\t.addDecorator(withInfo(\"\"))\n\t.addDecorator(withState({ isSelected: false }))\n\n\t.add(\"An ordinary unmanaged component\", ({store}) => (\n\t\t {\n\t\t\t\tstore.set({ isSelected: !store.state.isSelected });\n\t\t\t}}\n\t\t/>\n\t))\n```\n","readmeFilename":"README.md"}