{"id":14985531,"url":"https://github.com/etchteam/storybook-addon-status","last_synced_at":"2025-10-17T12:34:56.453Z","repository":{"id":41078411,"uuid":"276380885","full_name":"etchteam/storybook-addon-status","owner":"etchteam","description":"Add component status to the storybook UI","archived":false,"fork":false,"pushed_at":"2024-11-19T00:32:58.000Z","size":2873,"stargazers_count":55,"open_issues_count":8,"forks_count":14,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-04T00:57:24.901Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/etchteam.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-07-01T13:10:02.000Z","updated_at":"2024-11-19T00:33:00.000Z","dependencies_parsed_at":"2024-05-02T11:43:19.339Z","dependency_job_id":"eafeeb5f-6457-4475-b07a-fe2079fb96e7","html_url":"https://github.com/etchteam/storybook-addon-status","commit_stats":{"total_commits":92,"total_committers":17,"mean_commits":5.411764705882353,"dds":0.7717391304347826,"last_synced_commit":"8c2e06eb41047a3250d410b05f20a56a45d42267"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/etchteam%2Fstorybook-addon-status","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/etchteam%2Fstorybook-addon-status/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/etchteam%2Fstorybook-addon-status/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/etchteam%2Fstorybook-addon-status/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/etchteam","download_url":"https://codeload.github.com/etchteam/storybook-addon-status/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248636545,"owners_count":21137478,"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-09-24T14:11:09.583Z","updated_at":"2025-10-17T12:34:56.445Z","avatar_url":"https://github.com/etchteam.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Storybook Addon Status\n\nStorybook Status Addon can be used to add a component status label in [Storybook](https://storybook.js.org).\n\n![React Storybook Screenshot](https://raw.githubusercontent.com/etchteam/storybook-addon-status/master/screenshot.png)\n\n## Installation\n\n```sh\nnpm install @etchteam/storybook-addon-status --save-dev\n```\n\n## Configuration\n\nThen create a file called `main.js` in your storybook config.\n\nAdd the following content to it:\n\n```js\nexport default {\n  addons: ['@etchteam/storybook-addon-status'],\n};\n```\n\nIn `manager.js` you can globally configure custom status configurations, or overwrite the built in \"beta\", \"deprecated\", \"stable\" \u0026 \"releaseCandidate\". You can also change how status dots will appear in the sidebar with the `sidebarDots` prop.\n\n```js\nimport { addons } from \"storybook/manager-api\";\n\naddons.setConfig({\n  status: {\n    statuses: {\n      released: {\n        background: '#0000ff',\n        color: '#ffffff',\n        description: 'This component is stable and released',\n      },\n    },\n    sidebarDots: 'single', // 'single' | 'multiple' | 'none'. 'single' is the default\n  },\n});\n```\n\n**IMPORTANT:** The addon was previously configured using parameters in `preview.js`. This will still work as before, however newer features such as sidebar dot customisation are not available.\n\n**NOTE:** Each key will be used as the label for the status and will convert camelCase to words.\n\n## Story Usage\n\nThere are two ways to add statuses to your stories:\n\n1. [Tags](#tags) (new, recommended)\n2. [Story parameters](#story-parameters) (legacy)\n\nYou can also use [both methods together](#combined-method) to get the benefits of both at once.\n\n### Tags\n\nStorybook's built-in [tag system](https://storybook.js.org/docs/writing-stories/tags) can now be used to add statuses to your stories.\n\nJust add an array of status names to the `tags` property:\n\n```js\n\nexport default {\n  title: 'BetterSoftwareLink',\n  tags: ['beta'],  // 'beta' | 'stable' | 'deprecated' | 'releaseCandidate' | your own custom status\n};\n```\n\nThis can be used for the built-in statuses, as well as any custom statuses defined in `manager.js`. Only these tags will appear as statuses - if they are not built-in or have a definition in `manager.js`, they will be ignored by the addon. This means that status tags can be used alongside tags for other purposes.\n\nUsing tags to define statuses means that stories can also be [filtered](https://storybook.js.org/docs/writing-stories/tags#filtering-by-custom-tags) by status.\n\n### Story parameters\n\nThe alternative (legacy) way to add statuses to stories is to add them to the `status` property of the story parameters:\n\n```js\n\nexport default {\n  title: 'BetterSoftwareLink',\n  parameters: {\n    status: {\n      type: 'beta', // 'beta' | 'stable' | 'deprecated' | 'releaseCandidate'\n      url: 'http://www.url.com/status', // Optional: will make the tag a link\n      statuses: {...} // Optional: add custom status configurations for this story here\n    }\n  },\n};\n```\n\n`type` also accepts an object with `name` and `url` keys, or an array of strings and/or objects for multiple statuses.\n\nIf not specifically set, every status uses `status.url` as the linked Url.\n\n```js\nexport default {\n  parameters: {\n    status: {\n      type: [\n        'beta',\n        'released',\n        'myCustomStatus',\n        {\n          name: 'stable',\n          url: 'http://www.url.com/stable'\n        }\n      ],\n      url: 'http://www.url.com/status'\n    },\n  },\n}\n```\n\nSetting statuses via the story parameters allows more customisation on a story-by-story basis, but at the expense of sidebar filtering. Additionally, using this method means that the status dot(s) in the sidebar only shows for the story that is currently being viewed - this is a [known limitation](https://github.com/storybookjs/storybook/discussions/24022#discussioncomment-12737532) of the way Storybook works.\n\n### Combined method\n\nFor the best of both worlds, tag and story parameter statuses can be used together. This gives you the ability to filter by status in the sidebar, see sidebar dots for all stories at once, and to customise statuses within a story.\n\nTo do this, add all the statuses for the story to the `tags` array in the story definition. Then, add any statuses that need customisation (e.g. for a URL or custom style) to the story parameters' `status` property.\n\nBoth sets of statuses will be combined and de-duplicated.\n\n```js\n\nexport default {\n  title: 'BetterSoftwareLink',\n  tags: ['beta', 'customStoryStatus']\n  parameters: {\n    status: {\n      type: {\n        name: 'customStoryStatus',\n        url: 'http://www.url.com/custom',\n      },\n      url: 'http://www.url.com/status',\n      statuses: {\n        customStoryStatus: {\n          background: '#0000ff',\n          color: '#ffffff',\n          description: 'This is a custom status configuration for this story only',\n        }\n      }\n    },\n  },\n};\n```\n\n**NOTE:** The sidebar dot(s) for a status with custom styles added in a particular story will only work while you are viewing that story. This is a [known limitation](https://github.com/storybookjs/storybook/discussions/24022#discussioncomment-12737532) of the way Storybook works. We recommend [defining custom status styles globally](#configuration) in `preview.js` wherever possible instead.\n\n## Migration guide\n\nNeed to [update your major version](Migration.md)?\n\n---\n\nMade with ☕ at [Etch](https://etch.co)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fetchteam%2Fstorybook-addon-status","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fetchteam%2Fstorybook-addon-status","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fetchteam%2Fstorybook-addon-status/lists"}