storybook-addon-docs-stencil

将从 Stencil 输出目标 docs-json 派生的 stencil.js 文档 json 转换为 Storybook ArgTypes。

激活此插件后

• Storybook 将为属性渲染基本控件 控件。
• Storybook 将自动生成 Props、事件、方法、插槽、阴影部分和自定义属性的文档。
• 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,
  },
};

在你的故事中提示你的组件

// your-story.ts

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