Converts stencil.js doc json derived from stencils output target
docs-json to storybook
ArgTypes.
With this addon activated
- Storybook will render basic controls for properties Controls.
- Storybook will auto generate documentation for Props, Events, Methods, Slots, Shadow Parts and Custom Properties.
- Storybook doc page will contain stencils component documentation (readme.md or inline)
npm i -D @pxtrn/storybook-addon-docs-stencil
// stencil.config.ts
import { Config } from '@stencil/core';
export const config: Config = {
outputTargets: [
{
type: 'docs-json',
file: 'path/to/docs.json'
}
]
};
//.storybook/main.js
module.exports = {
addons: [
'@storybook/addon-essentials',
'@pxtrn/storybook-addon-docs-stencil'
]
}
//.storybook/preview.js
import { setStencilDocJson } from '@pxtrn/storybook-addon-docs-stencil';
import docJson from 'path/to/docs.json';
if(docJson) setStencilDocJson(docJson);
export const parameters = {
controls: { hideNoControlsWarning: true }
}
//.storybook/preview.js
import { extractArgTypesFactory } from '@pxtrn/storybook-addon-docs-stencil';
export const parameters = {
docs: {
extractArgTypes: extractArgTypesFactory({ dashCase: true }),
}
}
If not already created by stencil create src/components/my-component/readme.md
If the line <!-- Auto Generated Below --> is not present, stencil will ignore this file.
Everything above this line will be included in storybook
<!-- Auto Generated Below -->
// src/components/my-component/my-component.tsx`
/**
* Everything written here will be included, if readme.md is not present.
*/
@Component({
tag: 'my-component',
styleUrl: 'my-component.css',
shadow: true,
})
@storybook/web-components overrides the preset configuration of this module.
You can fix this with this preview config.
//.storybook/preview.js
import { extractArgTypes, extractComponentDescription, setStencilDocJson } from '@pxtrn/storybook-addon-docs-stencil';
export const parameters = {
...
docs: {
extractArgTypes,
extractComponentDescription,
},
};
// your-story.ts
export default {
title: 'My Component',
component: 'my-component',
};