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 +28 -0
- package/README.md +100 -242
- package/STYLING.md +172 -89
- package/dist/index.d.ts +8 -6
- package/dist/preset.d.ts +47 -13
- package/dist/preset.js +408 -131
- package/dist/runtime.d.ts +27 -7
- package/dist/runtime.js +71 -29
- package/dist/styles.css +41 -37
- package/package.json +22 -16
- package/dist/content.d.ts +0 -40
- package/dist/content.js +0 -188
- package/dist/generator.d.ts +0 -16
- package/dist/generator.js +0 -98
- package/dist/types.d.ts +0 -17
- package/dist/types.js +0 -1
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
|
-
|
|
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
|
-
-
|
|
6
|
-
-
|
|
7
|
-
-
|
|
8
|
-
-
|
|
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
|
|
52
|
-
nub pack
|
|
13
|
+
nub add -D storybook-addon-md @storybook/addon-docs@10.6.0
|
|
53
14
|
```
|
|
54
15
|
|
|
55
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
|
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
|
-
##
|
|
42
|
+
## Write documentation
|
|
92
43
|
|
|
93
|
-
###
|
|
44
|
+
### Component docs
|
|
94
45
|
|
|
95
|
-
|
|
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
|
-
|
|
50
|
+
status: Stable
|
|
51
|
+
tags: [Actions]
|
|
102
52
|
---
|
|
103
53
|
|
|
104
|
-
##
|
|
105
|
-
|
|
106
|
-
Write ordinary Markdown here.
|
|
107
|
-
```
|
|
108
|
-
|
|
109
|
-
### Component Documentation
|
|
54
|
+
## Overview
|
|
110
55
|
|
|
111
|
-
|
|
56
|
+
Use buttons to trigger actions.
|
|
112
57
|
|
|
113
|
-
|
|
58
|
+
## When to use
|
|
114
59
|
|
|
115
|
-
|
|
116
|
-
|
|
60
|
+
- Submit a form.
|
|
61
|
+
- Confirm a choice.
|
|
117
62
|
```
|
|
118
63
|
|
|
119
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
78
|
+
Any discovered Markdown file can stand alone. Use `title` to choose its sidebar location:
|
|
146
79
|
|
|
147
|
-
|
|
80
|
+
```md
|
|
81
|
+
---
|
|
82
|
+
title: Guides/Introduction
|
|
83
|
+
---
|
|
148
84
|
|
|
149
|
-
|
|
85
|
+
## Getting started
|
|
150
86
|
|
|
151
|
-
|
|
87
|
+
Write ordinary Markdown here.
|
|
88
|
+
```
|
|
152
89
|
|
|
153
|
-
|
|
154
|
-

|
|
90
|
+
Without a title, `docs/Introduction.md` appears at `Documentation/docs/Introduction`.
|
|
155
91
|
|
|
156
|
-
|
|
157
|
-
```
|
|
92
|
+
### Frontmatter
|
|
158
93
|
|
|
159
|
-
|
|
94
|
+
YAML frontmatter is optional. Use lowercase field names.
|
|
160
95
|
|
|
161
|
-
|
|
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
|
-
|
|
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 |
|
|
168
|
-
| -------------- | ------------------------------ |
|
|
169
|
-
| `patterns` | Required |
|
|
170
|
-
| `
|
|
171
|
-
| `
|
|
172
|
-
| `
|
|
173
|
-
| `
|
|
174
|
-
| `presentation` | None | Module
|
|
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
|
|
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
|
-
|
|
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
|
-
|
|
122
|
+
## Documentation manifests and MCP
|
|
181
123
|
|
|
182
|
-
|
|
124
|
+
Manifest support is opt-in. Set `manifests: true` in this addon's options and enable Storybook's `features.componentsManifest`:
|
|
183
125
|
|
|
184
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
153
|
+
## Styling
|
|
193
154
|
|
|
194
|
-
Set `stylesheet: '.storybook/markdown.css'`
|
|
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.
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
177
|
+
## Examples and contributing
|
|
241
178
|
|
|
242
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
[
|
|
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).
|