Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/varya/storybook-8-sidebar-statuses


https://github.com/varya/storybook-8-sidebar-statuses

Last synced: about 2 months ago
JSON representation

Awesome Lists containing this project

README 

        
# Storybook Tags-based Badges



This repository introduces a solution for enhancing Storybook sidebar with tags-based badges for components, addressing limitations experienced after upgrading from Storybook 6 to versions 7 and 8. 



## Overview



In Storybook's earlier versions, it allowed the addition of custom parameters to stories and components. Many used this feature to provide statuses for the components and display them in

the sidebar alongside with the component names.

However, subsequent upgrades introduced a regression where these features were not accessible, leading to a loss of this functionality.



This repository offers a workaround and enhancement through the implementation of the `` component. This component integrates within Storybook's `manager.tsx` file and utilizes the `renderLabel` method for rendering badges for components in the sidebar.



## Problem Solved



In versions 7 and 8 of Storybook, the direct access to component parameters within stories and components was lost, rendering it impossible to customize the sidebar with badges indicating the status of components. This solution restores this functionality, enabling the use of tags within story metadata to indicate a component's lifecycle stage (e.g., NEW, BETA, DEPRECATED).



## How It Works



The `` component is crafted to work seamlessly within Storybook's sidebar. It operates by getting data via API's Consumer and extracts tag information for items marked as "docs". This is because direct tag information for components is unavailable. In cases where tags for "docs" type are absent, the component searches for any item with matching IDs and tags that correspond with predefined statuses.



Here's a brief guide on how to use it:



1. **Integration**: Embed the `` component into Storybook's `manager.tsx`, enabling it to enhance sidebar labels with status badges.



2. **Tagging Stories**: Assign statuses as tags within the metadata of your `*.stories.tsx` files, like so:



   ```tsx

   const meta: Meta = {

     title: 'Components/Button',

     component: Btn,

     tags: ['NEW'], // Example of assigning status as tags

     argTypes: {...},

   };

   ```



## Repository Contents



- `.storybook/manager.tsx`: Contains the integration setup for the `` component.

- `.storybook/components/SidebarTag`: Contains the code for fetching the data and rendering the labels.

- `src/stories/*.stories.ts`: Example of how to tag a component with its respective statuses.



## Known Limitations



- Direct access to `tags` information for components is not possible, so the tags are obtained from components' stories.

- Fetching is performed for each component listed, potentially impacting performance for large story collections.



## Acknowledgments



The initial setup for this repository was inspired by and adapted from https://github.com/shilman/storybook-tag-badges, aiming to extend its functionalities and address the specific challenges encountered with Storybook's newer versions.



Special thanks to @Aracturat who [suggested how to improve the data fetch](https://github.com/varya/storybook-8-sidebar-statuses/issues/1).