35 |
36 | ---
37 |
38 | ## 📔 Table of Contents
39 |
40 |
41 | - [Table of Contents](#-table-of-contents)
42 | - [Installation](#-installation)
43 | - [Default Config](#-default-config)
44 | - [Usage](#-usage)
45 | - [Customise Badge Config](#-customise-badge-config)
46 | - [Sidebar Config](#-sidebar-config)
47 | - [Workflow Examples](#-workflow-examples)
48 | - [Limitations](#-limitations)
49 | - [Contributing](#-contributing)
50 | - [Support](#-support)
51 | - [Contact](#-contact)
52 | - [Acknowledgments](#-acknowledgments)
53 |
54 | ## 📦 Installation
55 |
56 | ```sh
57 | yarn add -D storybook-addon-tag-badges
58 | ```
59 |
60 | ```sh
61 | npm install -D storybook-addon-tag-badges
62 | ```
63 |
64 | ```sh
65 | pnpm install -D storybook-addon-tag-badges
66 | ```
67 |
68 | In your `.storybook/main.ts` file, add the following:
69 |
70 | ```ts
71 | // .storybook/main.ts
72 | export default {
73 | addons: ['storybook-addon-tag-badges'],
74 | }
75 | ```
76 |
77 | ## 🏁 Default Config
78 |
79 | This addon comes with a default config, allowing you to get started immediately by adding tags to your content.
80 |
81 | ### Preconfigured Badges
82 |
83 | | Preview | Tag patterns | Suggested use |
84 | | ---------------------------------: | ------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
85 | |  | `new` | Recently added components or props/features |
86 | |  | `alpha`, `beta`, `rc`, `experimental` | Warn that a component or prop is not stable yet |
87 | |  | `deprecated` | Components or props that should be avoided in new code |
88 | |  | `outdated` | Components with design changes that weren't yet implemented, which can incur extra development costs to your users |
89 | |  | `danger` | Components that require particular attention when configuring them (e.g. for with security concerns) |
90 | |  | `code-only` | Components that only exist in code, and not in design |
91 | |  | `version:*`, `v:*` | Per-component versioning |
92 |
93 | ### Display Logic
94 |
95 | By default, all tags are always displayed on the toolbar, but they're only displayed in the sidebar for component entries, and for docs or story entries that appear at the top-level. They are not displayed in docs or story entries inside a component or group entry.
96 |
97 | Besides, the addon is limited to one badge per entry in the sidebar. Badges placed first in the configuration will be displayed in priority. For example, the `new` badge will be displayed before the `code-only` badge.
98 |
99 | > [!WARNING]
100 | > This means that when you customise this addon's configuration, you should include your customisations **before** spreading the default config object, so that they have a higher priority.
101 |
102 | ## 👀 Usage
103 |
104 | To display preconfigured badges, add the relevant tags to your components, stories, or docs entries.
105 |
106 | ### Component Badges
107 |
108 | To set badges for a component (and its child stories), define `tags` in the component's meta:
109 |
110 | ```ts
111 | // src/components/Button.stories.ts
112 | import type { Meta, StoryObj } from '@storybook/react'
113 | import { Button } from './Button'
114 |
115 | const meta: Meta
11 | 
21 | 
