{"id":18764478,"url":"https://github.com/modernweb-dev/storybook-utils","last_synced_at":"2025-12-07T07:30:20.434Z","repository":{"id":216804706,"uuid":"742397712","full_name":"modernweb-dev/storybook-utils","owner":"modernweb-dev","description":"Utils for Storybook","archived":false,"fork":false,"pushed_at":"2024-04-11T13:24:17.000Z","size":31,"stargazers_count":0,"open_issues_count":4,"forks_count":0,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-05-23T08:21:26.776Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/modernweb-dev.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null},"funding":{"github":"modernweb-dev","open_collective":"modern-web"}},"created_at":"2024-01-12T11:40:35.000Z","updated_at":"2024-01-12T11:56:21.000Z","dependencies_parsed_at":"2024-01-13T00:25:10.621Z","dependency_job_id":"be4ad60a-a472-4417-974d-26200264c4df","html_url":"https://github.com/modernweb-dev/storybook-utils","commit_stats":{"total_commits":3,"total_committers":2,"mean_commits":1.5,"dds":"0.33333333333333337","last_synced_commit":"c6158fe340bd49367109e9b2e8f548266d17c3cf"},"previous_names":["modernweb-dev/storybook-utils"],"tags_count":0,"template":false,"template_full_name":"modernweb-dev/package-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/modernweb-dev%2Fstorybook-utils","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/modernweb-dev%2Fstorybook-utils/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/modernweb-dev%2Fstorybook-utils/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/modernweb-dev%2Fstorybook-utils/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/modernweb-dev","download_url":"https://codeload.github.com/modernweb-dev/storybook-utils/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239418743,"owners_count":19635240,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":[],"created_at":"2024-11-07T18:29:58.984Z","updated_at":"2025-12-07T07:30:20.400Z","avatar_url":"https://github.com/modernweb-dev.png","language":"JavaScript","readme":"# storybook-utils\n\nUtilities for Storybook.\n\n## createAddon\n\nStorybook addons are React components.\nThe `createAddon` function returns a React component that wraps a custom element and passes on properties and events.\nThis allows for creating addons with web components (and therefore LitElement).\n\nThe wrapper can forward specific events to your addon (web component) as they occur.\nYour addon can listen for these events.\nSome useful Storybook events are forwarded by default (specifically `STORY_SPECIFIED`, `STORY_CHANGED`, `STORY_RENDERED`).\nAn `options` parameter can be passed to `createAddon` that contains additional events that you may need for your use case.\n\n`api` and `active` are required props when rendering the React component.\n\n```js\n// my-addon/manager.js\n\nimport React from 'react';\nimport { STORY_RENDERED } from '@storybook/core-events';\nimport { addons, types } from '@storybook/manager-api';\nimport { createAddon } from '@web/storybook-utils';\n\nconst { createElement } = React;\n\nclass MyAddonElement extends LitElement {\n  constructor() {\n    super();\n    this.addEventListener(STORY_RENDERED, event =\u003e {\n      // handle Storybook event\n    });\n    this.addEventListener('my-addon:custom-event-name', event =\u003e {\n      // handle my custom event\n    });\n  }\n\n  render() {\n    return html`\n      \u003cdiv\u003e\n        \u003c!-- my addon template --\u003e\n      \u003c/div\u003e\n    `;\n  }\n}\n\ncustomElements.define('my-addon', MyAddonElement);\n\nconst MyAddonReactComponent = createAddon('my-addon', {\n  events: ['my-addon:custom-event-name'],\n});\n\naddons.register('my-addon', api =\u003e {\n  addons.add('my-addon/panel', {\n    type: types.PANEL,\n    title: 'My Addon',\n    render: ({ active }) =\u003e createElement(MyAddonReactComponent, { api, active }),\n  });\n});\n```\n\n```js\n// my-addon/decorator.js\nimport { addons } from '@storybook/preview-api';\n\n// ...\naddons.getChannel().emit('my-addon:custom-event-name', {});\n// ...\n```\n\nStorybook expects only 1 addon to be in the DOM, which is the addon that is selected (active).\nThis means addons can be continuously connected/disconnected when switching between addons and stories.\nThis is important to understand to work effectively with LitElement lifecycle methods and events.\nAddons that rely on events that might occur when it is not active, should have their event listeners set up in the `constructor`.\nEvent listeners set up in the `connectedCallback` should always also be disconnected.\n","funding_links":["https://github.com/sponsors/modernweb-dev","https://opencollective.com/modern-web"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmodernweb-dev%2Fstorybook-utils","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmodernweb-dev%2Fstorybook-utils","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmodernweb-dev%2Fstorybook-utils/lists"}