{"id":19728416,"url":"https://github.com/prashis/storybook-addon-message-bus","last_synced_at":"2026-04-14T02:31:43.755Z","repository":{"id":45113933,"uuid":"445146191","full_name":"prashis/storybook-addon-message-bus","owner":"prashis","description":"Interact with message bus via Storybook UI","archived":false,"fork":false,"pushed_at":"2022-01-08T18:46:15.000Z","size":1178,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-10-02T02:25:58.496Z","etag":null,"topics":["message-bus","storybook","storybook-addon"],"latest_commit_sha":null,"homepage":"https://prashis.github.io/storybook-addon-message-bus","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/prashis.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-01-06T11:30:33.000Z","updated_at":"2023-01-24T19:40:17.000Z","dependencies_parsed_at":"2022-09-12T18:03:31.808Z","dependency_job_id":null,"html_url":"https://github.com/prashis/storybook-addon-message-bus","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/prashis/storybook-addon-message-bus","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prashis%2Fstorybook-addon-message-bus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prashis%2Fstorybook-addon-message-bus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prashis%2Fstorybook-addon-message-bus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prashis%2Fstorybook-addon-message-bus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/prashis","download_url":"https://codeload.github.com/prashis/storybook-addon-message-bus/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prashis%2Fstorybook-addon-message-bus/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31779943,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-14T02:24:21.117Z","status":"ssl_error","status_checked_at":"2026-04-14T02:24:20.627Z","response_time":153,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["message-bus","storybook","storybook-addon"],"created_at":"2024-11-12T00:01:16.384Z","updated_at":"2026-04-14T02:31:43.726Z","avatar_url":"https://github.com/prashis.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Storybook Addon Message Bus\n\nStorybook Addon w/ GUI for interacting with Message Bus 🚎\n\n![storybook-addon-message-bus-demo](https://user-images.githubusercontent.com/73868961/148539472-1942326a-2760-4bf3-a157-e5a815ba0684.gif)\n\n## Installation\n\n```sh\nnpm i -D @prashis/storybook-addon-message-bus\n```\n\nThen add the following to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project):\n\n```js\nmodule.exports = {\n  addons: [\"@prashis/storybook-addon-message-bus\"],\n};\n```\n\n## Usage\n\nAdd an decorator in `.storybook/preview.js` (or individual stories) \u0026 pass the emitter callback function for emitting events\n\n```ts\nimport { withMessageBus } from \"@prashis/storybook-addon-message-bus\";\nimport nanobus from \"nanobus\";\n\nconst bus = nanobus();\n\nconst emitter = (name, payload) =\u003e {\n  bus.emit(name, payload);\n};\n\nexport const decorators = [withMessageBus({ emitter })];\n```\n\nFinally, pass the list of event names \u0026 default payload in [story parameters](https://storybook.js.org/docs/react/addons/addons-api#useparameter), which will be displayed inside the addon panel\n\n```ts\nconst events = [\n  {\n    name: \"notification.add\",\n    payload: {\n      type: \"success\",\n      message: \"Illo et aspernatur saepe exercitationem fugit tenetur.\",\n    },\n  },\n];\n\nconst Template = () =\u003e \u003cNotifications /\u003e;\n\nexport const List = Template.bind({});\nList.parameters = { events };\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprashis%2Fstorybook-addon-message-bus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprashis%2Fstorybook-addon-message-bus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprashis%2Fstorybook-addon-message-bus/lists"}