storybook-addon-docs-stencil

将源自 stencil 输出目标 docs-json 的 stencil.js 文档 json 转换为 storybook ArgTypes。

激活此插件后

• Storybook 将为属性渲染基本控件 Controls。
• Storybook 将自动生成以下文档：Props、Events、Methods、Slots、Shadow Parts 和 Custom Properties。
• Storybook 文档页面将包含 stencil 组件文档 (readme.md 或内联文档)

安装

npm i -D @astrouxds/storybook-addon-docs-stencil

用法

配置 stencil 在构建时生成 docs-json。

// stencil.config.ts

import { Config } from '@stencil/core';

export const config: Config = {
  outputTargets: [
    {
      type: 'docs-json',
      file: 'path/to/docs.json'
    }
  ]
};

配置 Storybook

//.storybook/main.js

module.exports = {
  addons: [
    '@storybook/addon-essentials',
    '@astrouxds/storybook-addon-docs-stencil'
  ]
}

//.storybook/preview.js

import { setStencilDocJson } from '@astrouxds/storybook-addon-docs-stencil';
import docJson from 'path/to/docs.json';
if(docJson) setStencilDocJson(docJson);

export const parameters = {
  controls: { hideNoControlsWarning: true }
}

组件文档

readme.md

如果 stencil 尚未创建，请创建 src/components/my-component/readme.md 如果不存在行 <!-- Auto Generated Below -->，stencil 将忽略此文件。

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 时

@storybook/web-components 覆盖了此模块的预设配置。您可以使用此预览配置来解决此问题。

//.storybook/preview.js

import { extractArgTypes, extractComponentDescription, setStencilDocJson } from '@astrouxds/storybook-addon-docs-stencil';

export const parameters = {
  ...
  docs: {
    extractArgTypes,
    extractComponentDescription,
  },
};

在您的 stories 中使用您的组件

// your-story.ts

export default {
  title: 'My Component',
  component: 'my-component',
};