storybook-addon-md 0.1.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,33 @@
1
1
  # storybook-addon-md
2
2
 
3
+ ## 0.3.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 209fe53: Add opt-in documentation manifests with original Markdown, frontmatter summaries, and live updates for standalone and attached docs. Enable `manifests: true` to use [Storybook 10.6.0 manifests](https://storybook.js.org/docs/ai/manifests) and [@storybook/addon-mcp](https://storybook.js.org/docs/ai/mcp/overview) without a custom preset.
8
+
9
+ See the [setup guide](https://github.com/ruijdacd/storybook-addon-md#documentation-manifests-and-mcp) and [examples with and without MCP](https://github.com/ruijdacd/storybook-addon-md#examples-and-contributing).
10
+
11
+ ### Patch Changes
12
+
13
+ - a94853e: Use rem values for default Markdown styles so they scale with the root font size. Add `--sbmd-monospace-font-family` to customize inline code and code blocks, with Storybook’s monospace theme font as the default. See the [CSS variable reference](https://github.com/ruijdacd/storybook-addon-md/blob/main/STYLING.md).
14
+
15
+ ## 0.2.0
16
+
17
+ ### Minor Changes
18
+
19
+ - 58f8a64: Remove the `exclude` option. Move exclusions into `patterns` with a leading `!`:
20
+
21
+ ```ts
22
+ patterns: ['docs/**/*.md', '!docs/private/**'];
23
+ ```
24
+
25
+ Negative globs take precedence regardless of order. Configurations that still use `exclude` now report a migration error instead of silently including excluded files.
26
+
27
+ ### Patch Changes
28
+
29
+ - 58f8a64: Upgrade Chokidar to v5 and replace fast-glob with tinyglobby. Keep explicit glob matching, negative-pattern exclusions, and live Markdown updates.
30
+
3
31
  ## 0.1.0
4
32
 
5
33
  Initial release.
package/README.md CHANGED
@@ -1,70 +1,24 @@
1
1
  # Storybook Markdown
2
2
 
3
- A Storybook addon for **ordinary Markdown documentation**. Write `.md` files beside your components or in a docs folder, and browse them inside Storybook.
3
+ Write ordinary `.md` files and browse them inside Storybook. Attach documentation to component stories or create standalone pages, with no JSX, imports, or MDX wrappers to maintain.
4
4
 
5
- - **Automatic discovery.** Configure file patterns once. Additions, edits, and deletions update during development.
6
- - **Component and standalone docs.** Attach guidance to existing stories, share it across components, or publish a page on its own.
7
- - **Native Docs.** Keep Storybook’s examples, generated props, and documentation styling.
8
- - **Your theme.** Customize content through CSS variables, a stylesheet, or your own layout and Markdown renderer.
9
- - **Static builds.** Relative images and downloads are bundled with your documentation.
10
-
11
- Write `Button.metadata.md` beside `Button.stories.tsx`:
12
-
13
- ```md
14
- ---
15
- status: Stable
16
- tags: [Actions]
17
- ---
18
-
19
- ## Overview
20
-
21
- Use buttons to trigger actions.
22
-
23
- ## When to use
24
-
25
- - Submit a form.
26
- - Confirm a choice.
27
- ```
28
-
29
- The component gets a **Markdown** Docs entry with your guidance, status and tag chips, examples, and props. Authors manage Markdown files; the addon manages disposable MDX wrappers.
30
-
31
- ## Table of Contents
32
-
33
- - [Install](#install)
34
- - [Guide](#guide)
35
- - [Configuration](#configuration)
36
- - [Styling](#styling)
37
- - [Example](#example)
38
- - [Development](#development)
39
- - [Releasing](#releasing)
40
- - [Limitations](#limitations)
5
+ - Discover Markdown automatically, including live additions, edits, and deletions.
6
+ - Show component docs alongside existing examples and generated props.
7
+ - Bundle relative images and downloads in static builds.
8
+ - Customize native Docs styling with CSS variables or your own renderer.
41
9
 
42
10
  ## Install
43
11
 
44
- The tested setup is **Storybook 10.6.0**, **@storybook/react-vite 10.6.0**, **@storybook/addon-docs 10.6.0**, **Vite 7.3.6**, and **React 19.2.4**. Node 22.13+ is required; local verification uses Node 24.21.0 and CI uses Node 24 on Linux.
45
-
46
- This repository uses [Nub](https://nubjs.com/docs) 0.7.5. The checked-in `nub.lock` pins dependencies, and `.npmrc` selects the hoisted layout for Storybook and Vitest. `nub.jsonc` keeps scripts on standard Node without Nub runtime hooks. CI installs with `nub install --frozen-lockfile`.
47
-
48
- To build an installable tarball from this repository:
49
-
50
12
  ```sh
51
- nub install
52
- nub pack
13
+ nub add -D storybook-addon-md @storybook/addon-docs@10.6.0
53
14
  ```
54
15
 
55
- Install it in your Storybook project:
56
-
57
- ```sh
58
- nub add -D /path/to/storybook-addon-md-0.1.0.tgz @storybook/addon-docs@10.6.0
59
- ```
16
+ Tested with **Storybook 10.6.0**, **React Vite 10.6.0**, **Vite 7.3.6**, and **React 19.2.4**. Requires Node 22.13+. Other builders and renderers are not tested.
60
17
 
61
- The package ships compiled JavaScript and TypeScript declarations. Consumers do not need to compile the addon.
62
-
63
- Register it after addon-docs in `.storybook/main.ts`:
18
+ Add the addon after `@storybook/addon-docs` in `.storybook/main.ts`:
64
19
 
65
20
  ```ts
66
21
  import type { StorybookConfig } from '@storybook/react-vite';
67
- import type { MarkdownOptions } from 'storybook-addon-md';
68
22
 
69
23
  const config: StorybookConfig = {
70
24
  framework: '@storybook/react-vite',
@@ -74,9 +28,8 @@ const config: StorybookConfig = {
74
28
  {
75
29
  name: 'storybook-addon-md',
76
30
  options: {
77
- patterns: ['src/**/*.md', 'docs/**/*.md'],
78
- exclude: ['docs/private/**'],
79
- } satisfies MarkdownOptions,
31
+ patterns: ['src/**/*.md', 'docs/**/*.md', '!docs/private/**'],
32
+ },
80
33
  },
81
34
  ],
82
35
  };
@@ -84,43 +37,33 @@ const config: StorybookConfig = {
84
37
  export default config;
85
38
  ```
86
39
 
87
- Keep your normal story patterns: referenced story files must match them. Markdown files belong in the addon’s `patterns`, not Storybook’s `stories` list.
88
-
89
- Add `storybook-markdown-generated/` to `.gitignore`.
40
+ Keep Markdown globs in the addon’s `patterns` and story globs in Storybook’s `stories`. Add `storybook-markdown-generated/` to `.gitignore`.
90
41
 
91
- ## Guide
42
+ ## Write documentation
92
43
 
93
- ### Standalone Pages
44
+ ### Component docs
94
45
 
95
- A plain `docs/Introduction.md` appears at `Documentation/docs/Introduction`. No frontmatter, component, or story file is required.
96
-
97
- Use `title` to choose its sidebar location:
46
+ Place `Button.metadata.md` beside `Button.stories.tsx`:
98
47
 
99
48
  ```md
100
49
  ---
101
- title: Guides/Introduction
50
+ status: Stable
51
+ tags: [Actions]
102
52
  ---
103
53
 
104
- ## Getting started
105
-
106
- Write ordinary Markdown here.
107
- ```
108
-
109
- ### Component Documentation
54
+ ## Overview
110
55
 
111
- Name a document `Button.metadata.md` beside `Button.stories.tsx` to associate it automatically. The convention also checks `.stories.ts`, `.stories.jsx`, and `.stories.js`. Missing or ambiguous siblings produce an error.
56
+ Use buttons to trigger actions.
112
57
 
113
- For a different location or filename, set `stories` relative to the Markdown file:
58
+ ## When to use
114
59
 
115
- ```yaml
116
- stories: ../components/Button.stories.tsx
60
+ - Submit a form.
61
+ - Confirm a choice.
117
62
  ```
118
63
 
119
- An explicit `stories` field takes precedence over the filename convention. Existing stories and Autodocs pages remain available. Each component’s **Markdown** entry combines its attached documents in source-path order, followed by its primary example, controls/props, and remaining examples.
64
+ The component gets a **Markdown** Docs entry with the content, status and tag chips, examples, and props. Existing stories and Autodocs remain available.
120
65
 
121
- ### Shared Documentation
122
-
123
- Use an array to attach one document to several story files:
66
+ The sibling convention supports `.stories.tsx`, `.stories.ts`, `.stories.jsx`, and `.stories.js`. To associate a different file, or share a document across components, set `stories` relative to the Markdown file:
124
67
 
125
68
  ```yaml
126
69
  stories:
@@ -128,211 +71,126 @@ stories:
128
71
  - ../components/Toggle.stories.tsx
129
72
  ```
130
73
 
131
- Each referenced component displays the shared content alongside its own documentation and examples.
132
-
133
- ### Frontmatter
134
-
135
- Frontmatter is optional YAML with lowercase top-level keys.
74
+ A single path is also accepted. Explicit `stories` takes precedence over the filename convention, and referenced files must match Storybook’s story globs.
136
75
 
137
- | Field | Value | Behavior |
138
- | ------------ | ----------------------------------------- | ------------------------------------------------------------------------------------- |
139
- | `title` | Non-empty string | Sidebar location for a standalone page. Does not relocate attached docs. |
140
- | `stories` | Relative path or non-empty array of paths | Associates the document with story files. |
141
- | `tags` | Array of non-empty strings | Renders chips below the title. These are content labels, not Storybook indexing tags. |
142
- | `status` | Non-empty string | Renders a chip after the tags, preserving the value in `data-status`. |
143
- | Other fields | YAML values | Preserved as metadata for custom layouts and renderers. |
76
+ ### Standalone pages
144
77
 
145
- Shared pages deduplicate tags and statuses separately in document order. A tag and status with the same label remain separate chips. Fields such as `component` and `category` have no built-in meaning.
78
+ Any discovered Markdown file can stand alone. Use `title` to choose its sidebar location:
146
79
 
147
- Invalid frontmatter, duplicate standalone sidebar titles, and missing references produce errors with source paths. Development errors appear in the terminal and Vite overlay or Storybook error view, then recover when corrected.
80
+ ```md
81
+ ---
82
+ title: Guides/Introduction
83
+ ---
148
84
 
149
- ### Links and Assets
85
+ ## Getting started
150
86
 
151
- Use Markdown links and images, including reference-style syntax:
87
+ Write ordinary Markdown here.
88
+ ```
152
89
 
153
- ```md
154
- ![Button states](./assets/button-states.svg)
90
+ Without a title, `docs/Introduction.md` appears at `Documentation/docs/Introduction`.
155
91
 
156
- [Download the checklist](./checklist.pdf)
157
- ```
92
+ ### Frontmatter
158
93
 
159
- Local paths resolve from the source `.md` file. URL-encoded filenames and fragments are supported. Files are validated and bundled as hashed assets in static builds. Filenames containing URL-reserved characters use safe disposable copies in the generated folder.
94
+ YAML frontmatter is optional. Use lowercase field names.
160
95
 
161
- **Links to `.md` files open their original source**, including frontmatter. They do not navigate to the rendered Storybook page or recursively bundle the linked document’s assets. For page navigation, use a Storybook URL such as `/?path=/docs/guides-introduction--docs`, adjusted for your deployment prefix.
96
+ | Field | Meaning |
97
+ | ------------- | --------------------------------------------------- |
98
+ | `title` | Sidebar location for standalone pages. |
99
+ | `stories` | Relative story-file path or array of paths. |
100
+ | `tags` | Array of labels rendered as chips below the title. |
101
+ | `description` | Optional string summary in documentation manifests. |
102
+ | `status` | A chip with its value preserved in `data-status`. |
103
+ | Other fields | Preserved as metadata for custom presentation. |
162
104
 
163
- External, fragment-only, query-only, and root-relative URLs are unchanged. Supply root-relative assets through Storybook’s `staticDirs`. Source files and local references must stay inside `root`; referenced files become part of the static build.
105
+ Invalid frontmatter, missing or ambiguous story references, and missing local assets produce source-specific errors.
164
106
 
165
107
  ## Configuration
166
108
 
167
- | Option | Default | Description |
168
- | -------------- | ------------------------------ | ------------------------------------------------------------------------ |
169
- | `patterns` | Required | Array of Markdown globs relative to `root`. Supports negative globs. |
170
- | `exclude` | `[]` | Excluded globs relative to `root`. Exclusions take precedence. |
171
- | `root` | `..` | Content root relative to the Storybook config directory. |
172
- | `generatedDir` | `storybook-markdown-generated` | Visible folder name under the working directory. |
173
- | `stylesheet` | None | CSS file relative to `root`, loaded for documentation pages. |
174
- | `presentation` | None | Module relative to `root`, exporting `Layout` and/or `MarkdownRenderer`. |
109
+ | Option | Default | Purpose |
110
+ | -------------- | ------------------------------ | --------------------------------------------------------------- |
111
+ | `patterns` | Required | Markdown globs; prefix with `!` to exclude files. |
112
+ | `root` | `..` | Project folder, resolved from the Storybook config directory. |
113
+ | `generatedDir` | `storybook-markdown-generated` | Disposable output folder under the working directory. |
114
+ | `stylesheet` | None | Custom stylesheet path. |
115
+ | `manifests` | `false` | Include original Markdown in Storybook documentation manifests. |
116
+ | `presentation` | None | Module exporting `Layout` and/or `MarkdownRenderer`. |
175
117
 
176
- Keep the Storybook config directory inside `root`. Restart Storybook after changing addon options.
118
+ Globs and customization paths start from your project folder (the parent of `.storybook` by default). Keep the config and local files inside that folder. Restart Storybook after changing options.
177
119
 
178
- ### Generated Files
120
+ `generatedDir` must be a visible folder name using letters, digits, hyphens, or underscores. Hidden folders, nested paths, `node_modules`, and `storybook-static` are unsupported. Ignore the folder in Git; the addon manages its contents.
179
121
 
180
- The addon creates a disposable subdirectory per configuration, registers its MDX glob before indexing, and removes obsolete files. Ignore your configured `generatedDir` in Git and leave its contents to the addon.
122
+ ## Documentation manifests and MCP
181
123
 
182
- The folder must be a visible name containing letters, digits, hyphens, or underscores. Leading-dot paths and `node_modules` interfere with Storybook 10.6’s watcher; nested paths and `storybook-static` are also rejected.
124
+ Manifest support is opt-in. Set `manifests: true` in this addon's options and enable Storybook's `features.componentsManifest`:
183
125
 
184
- ### Sidebar Order
126
+ ```ts
127
+ const config: StorybookConfig = {
128
+ framework: '@storybook/react-vite',
129
+ features: { componentsManifest: true },
130
+ stories: ['../src/**/*.stories.@(ts|tsx|js|jsx)'],
131
+ addons: [
132
+ '@storybook/addon-docs',
133
+ '@storybook/addon-mcp',
134
+ {
135
+ name: 'storybook-addon-md',
136
+ options: {
137
+ patterns: ['src/**/*.md', 'docs/**/*.md'],
138
+ manifests: true,
139
+ },
140
+ },
141
+ ],
142
+ };
143
+ ```
185
144
 
186
- Generated filenames are opaque identifiers. Set Storybook’s `parameters.options.storySort` when sidebar order matters. The [example preview] puts Guides first and sorts component titles alphabetically.
145
+ For MCP access, install `@storybook/addon-mcp@10.6.0` and connect your MCP client to `http://localhost:6006/mcp`. Its Get Documentation tool is named `docs-show` in 10.6.0. Omit that addon if you only need JSON manifests. It is not a dependency of `storybook-addon-md`.
187
146
 
188
- ## Styling
147
+ With Storybook and React Vite **10.6.0**, standalone Markdown appears in `/manifests/docs.json`, and attached Markdown appears in the component's `docs` in `/manifests/components.json`. Both development and static builds include the complete original source, including frontmatter. Development updates use the existing file watcher. Shared documents appear under each associated component; multiple documents on one page are joined in discovery order with two newlines. String `description` values supply optional summaries.
148
+
149
+ Keep this addon after `@storybook/addon-docs`. Consumers can remove custom manifest presets that supplied Markdown content after enabling this option. Unrelated MDX, Autodocs, and other manifest fields are preserved. Storybook's manifest tag filtering still applies.
189
150
 
190
- The default presentation uses native Storybook Docs blocks and one shared stylesheet. Existing `parameters.docs.container` and `parameters.docs.theme` still apply.
151
+ This integration uses Storybook 10.6.0's experimental preset hook and inline (v0) manifests. Other Storybook versions and `features.experimentalDocgenServer` service-backed manifests are unsupported. Markdown links and assets remain as authored in manifest content. See [Storybook manifests](https://storybook.js.org/docs/ai/manifests) for the upstream feature.
191
152
 
192
- ### CSS Variables
153
+ ## Styling
193
154
 
194
- Set `stylesheet: '.storybook/markdown.css'` in the addon options, then define your overrides:
155
+ Set `stylesheet: '.storybook/markdown.css'` to override the defaults:
195
156
 
196
157
  ```css
197
158
  .storybook-addon-md-page {
198
159
  --sbmd-font-size: 16px;
199
160
  --sbmd-line-height: 1.8;
200
- --sbmd-heading-color: currentColor;
201
161
  --sbmd-tag-radius: 6px;
202
- --sbmd-tag-border: 1px solid currentColor;
203
162
  }
204
163
  ```
205
164
 
206
- Variables cover typography, spacing, links, code, tables, images, and chips. They inherit from your theme container, and default text and link colors follow the active Docs theme. See the [CSS variable reference](STYLING.md) for the complete list.
207
-
208
- Use ordinary CSS for other properties. `.storybook-addon-md` wraps Markdown content, including custom renderer output; titles, props, and examples sit outside it. Other stable selectors are `.storybook-addon-md-page`, `.storybook-addon-md-title`, `.storybook-addon-md-tags`, and `.storybook-addon-md-tag`.
209
-
210
- The stylesheet is global to the preview, so scope selectors and account for Storybook’s specificity. For example, use `.sbdocs-content .storybook-addon-md h2` when overriding its heading rules. Vite handles CSS edits, imports, and relative `url()` assets.
211
-
212
- ### Status Chips
165
+ Variables cover typography, spacing, links, code, tables, images, and chips. Defaults follow Storybook’s Docs theme in light and dark mode.
213
166
 
214
- Status chips share the tag variables. Use `data-status` to map values to your theme:
215
-
216
- ```css
217
- .storybook-addon-md-tag[data-status='stable' i] {
218
- --sbmd-tag-color: light-dark(#1a7f37, #3fb950);
219
- --sbmd-tag-background: light-dark(#dafbe1, #12261e);
220
- --sbmd-tag-border: 1px solid currentColor;
221
- }
222
- ```
167
+ See [Styling](STYLING.md) for all variables, status colors, theme switching, and custom layouts or Markdown renderers. The [example stylesheet](https://github.com/ruijdacd/storybook-addon-md/blob/main/example/.storybook/markdown.css) provides a complete GitHub-inspired theme.
223
168
 
224
- The `i` flag matches both `Stable` and `stable`. The addon accepts any status; your stylesheet decides its colors. Set `color-scheme: light dark` on the theme container when using `light-dark()`.
225
-
226
- ### Light and Dark Themes
227
-
228
- Use Storybook’s standard Docs theme configuration for a fixed theme:
229
-
230
- ```ts
231
- import { themes } from 'storybook/theming';
232
-
233
- export default {
234
- parameters: { docs: { theme: themes.dark } },
235
- };
236
- ```
169
+ ## Links and limitations
237
170
 
238
- For live system-preference switching, follow the example’s [Docs container] and [manager configuration]. They subscribe to preference changes so Storybook’s interface and documentation update together without reloading.
171
+ - Relative links and images resolve from the Markdown source and are included in static builds. Root-relative assets use Storybook’s `staticDirs`.
172
+ - Links to `.md` files open the original source, not a rendered Docs page. Use a Storybook URL such as `/?path=/docs/guides-introduction--docs` for page navigation.
173
+ - Braces and JSX-like text are treated as content. Raw HTML renders as text by default.
174
+ - Set Storybook’s `parameters.options.storySort` for explicit sidebar ordering. See the [example preview](https://github.com/ruijdacd/storybook-addon-md/blob/main/example/.storybook/preview.ts).
175
+ - The attached Docs entry name **Markdown** is reserved. Multiple development Storybooks sharing one config directory are unsupported.
239
176
 
240
- ### Custom Layouts and Renderers
177
+ ## Examples and contributing
241
178
 
242
- Set `presentation: '.storybook/markdown-presentation.tsx'` and export either or both components:
243
-
244
- ```tsx
245
- import { DefaultLayout, DefaultMarkdownRenderer } from 'storybook-addon-md/runtime';
246
- import type { LayoutProps, MarkdownDocument } from 'storybook-addon-md/runtime';
247
-
248
- export function Layout(props: LayoutProps) {
249
- return <DefaultLayout {...props} />;
250
- }
251
-
252
- export function MarkdownRenderer(document: MarkdownDocument) {
253
- return <DefaultMarkdownRenderer {...document} />;
254
- }
255
- ```
256
-
257
- `MarkdownRenderer` receives `{ markdown, metadata, source }`: processed Markdown with resolved asset URLs, preserved frontmatter, and the source path relative to `root`.
258
-
259
- `Layout` receives `{ documents, title, attached, children, examples }`. Render `children` and `examples` to keep documentation and native example/props blocks. `examples` is `null` for standalone pages. `title` contains the standalone sidebar title and is empty for attached pages; `DefaultLayout` uses Storybook’s `Title` block for those.
260
-
261
- Both customization files must stay inside `root`. Missing files produce source-specific errors. Styling and presentation are independent options.
262
-
263
- ## Example
264
-
265
- Run the included Storybook:
179
+ Install dependencies with **Nub 0.7.5** and **Node 24.11+**:
266
180
 
267
181
  ```sh
268
182
  nub install
269
- nub run storybook
270
183
  ```
271
184
 
272
- Open **Guides → Introduction**, **Components → Button**, or **Components → Toggle** for standalone, attached, and shared documentation.
273
-
274
- The theme takes its direction from [GitHub Primer]. [Markdown styles] reference [Tailwind theme variables] for shared colors, typography, spacing, and radii. The example uses Tailwind v4, `clsx`, and `class-variance-authority`; these are development dependencies, not addon requirements. Tailwind Preflight is omitted to preserve native Docs styles.
275
-
276
- Components use `light-dark()` and `color-scheme: light dark` on `:root`. The manager and Docs container also follow system-preference changes live.
277
-
278
- ## Development
279
-
280
- Install Chromium for the browser suites:
281
-
282
- ```sh
283
- nub exec playwright install chromium
284
- ```
285
-
286
- | Command | Purpose |
287
- | ------------------------- | ------------------------------------------------------------- |
288
- | `nub run build` | Compile the addon and its declarations. |
289
- | `nub run check` | Build the addon, then type-check source, examples, and tests. |
290
- | `nub run lint` | Run Oxlint. Use `lint:fix` for automatic fixes. |
291
- | `nub run format:check` | Check Oxfmt formatting. Use `format` to write changes. |
292
- | `nub run test` | Run Vitest unit tests. |
293
- | `nub run test:browser` | Run Vitest Browser Mode with Playwright/Chromium. |
294
- | `nub run test:e2e` | Verify development and static Storybooks in Chromium. |
295
- | `nub run test:package` | Install and verify a packed addon in an isolated consumer. |
296
- | `nub run build-storybook` | Build the example as a static site. |
297
- | `nub pack` | Build and package the addon. |
298
-
299
- Use `test:watch` or `test:browser:watch` while developing. End-to-end tests use ports 16006/16007, and the package smoke check uses 16008. Browser screenshots and failure traces go to `test-results/`.
300
-
301
- [CI] runs the checks on Node 24 and Linux, including a dependency audit. Tests cover discovery, associations, watcher recovery, assets, customization, keyboard interaction, and live theme switching. The package smoke check supplies its own image fixture.
302
-
303
- Content parsing lives in `src/content.ts`, disposable generation in `src/generator.ts`, Storybook integration in `src/preset.ts`, and presentation in `src/runtime.tsx`. The addon uses Storybook’s MDX compilation and indexing; it does not install a custom indexer.
304
-
305
- Report reproducible bugs in the [issue tracker].
306
-
307
- ## Releasing
308
-
309
- Releases use [Changesets](https://changesets.dev/guide/automating). For a user-facing change, run `nub run changeset`, choose a patch/minor/major bump, and include the generated release note in your PR. Tooling-only changes do not need a release note.
310
-
311
- After CI passes for a push to `main`, `release.yml` opens or updates a release PR with the version and changelog. Merge that PR to publish after CI passes again. Nub manages dependencies and scripts; Changesets invokes npm for publishing.
312
-
313
- One-time setup:
314
-
315
- 1. If the package does not exist on npm yet, publish the initial version from a clean checkout: `nub run build`, `npm login`, then `npm publish --access public`.
316
- 2. In the npm package’s **Settings → Trusted publishing**, select GitHub Actions, owner `ruijdacd`, repository `storybook-addon-md`, workflow `release.yml`, and allow publishing. Leave the environment empty.
317
- 3. In GitHub’s **Settings → Actions → General**, enable **Allow GitHub Actions to create and approve pull requests**.
318
-
319
- No `NPM_TOKEN` secret is needed. The workflow uses GitHub’s automatic token for release PRs and OIDC for [npm trusted publishing](https://docs.npmjs.com/trusted-publishers/). It installs npm 11 with Node 24 to support OIDC.
185
+ Choose either example. They share stories, Markdown, and styling, with separate Storybook configurations:
320
186
 
321
- Release PRs created with the automatic GitHub token do not trigger PR workflows. If branch protection requires those checks, close and reopen the release PR yourself to trigger CI before merging. The release workflow always waits for CI on the merged commit.
187
+ | Example | Configuration | Run | Build |
188
+ | ----------- | ------------------------------------- | ------------------------------ | ----------------------------- |
189
+ | Without MCP | [Default](example/.storybook/main.ts) | `nub run storybook` (6006) | `nub run build-storybook` |
190
+ | With MCP | [MCP](example/.storybook-mcp/main.ts) | `nub run storybook:mcp` (6007) | `nub run build-storybook:mcp` |
322
191
 
323
- ## Limitations
192
+ The MCP example enables `manifests: true` and `@storybook/addon-mcp`. Connect your MCP client to `http://localhost:6007/mcp`. Static builds write to `storybook-static/` and `storybook-static-mcp/`, respectively. MCP is a development dependency for the example only; normal addon usage does not require it.
324
193
 
325
- - Only the Storybook, React, and Vite setup listed under [Install](#install) has been tested. Other renderers and builders are unsupported.
326
- - Markdown supports tables, lists, fenced code, and reference links. Braces and JSX-like text are content, never evaluated. The default renderer displays raw HTML as text; use Markdown syntax for links and images.
327
- - The **Markdown** page name is reserved under attached components. Avoid giving a hand-written MDX page the same name there.
328
- - The watcher observes `root` and rescans matching Markdown when documentation or its dependencies change. Interactive story state may reset. Keep `root` focused on your project.
329
- - Large monorepos, simultaneous Storybooks sharing one config directory, symlinked content directories, and MDX authoring are outside the initial scope.
194
+ Browse **Guides → Introduction**, **Components → Button**, and **Components → Toggle** for standalone, attached, and shared docs with system light/dark styling.
330
195
 
331
- [example preview]: https://github.com/ruijdacd/storybook-addon-md/blob/main/example/.storybook/preview.ts
332
- [Docs container]: https://github.com/ruijdacd/storybook-addon-md/blob/main/example/.storybook/SystemDocsContainer.tsx
333
- [manager configuration]: https://github.com/ruijdacd/storybook-addon-md/blob/main/example/.storybook/manager.ts
334
- [GitHub Primer]: https://primer.style/product/
335
- [Markdown styles]: https://github.com/ruijdacd/storybook-addon-md/blob/main/example/.storybook/markdown.css
336
- [Tailwind theme variables]: https://github.com/ruijdacd/storybook-addon-md/blob/main/example/.storybook/tailwind.css
337
- [CI]: https://github.com/ruijdacd/storybook-addon-md/actions/workflows/ci.yml
338
- [issue tracker]: https://github.com/ruijdacd/storybook-addon-md/issues
196
+ See [Contributing](CONTRIBUTING.md) for tests and releases, or [open an issue](https://github.com/ruijdacd/storybook-addon-md/issues).