storybook-addon-docs-stencil

將從 stencil 的輸出目標 docs-json 衍生的 stencil.js doc json 轉換為 storybook ArgTypes。

啟用此擴充功能後

• Storybook 將為屬性呈現基本控制項 控制項。
• 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,
  },
};

在您的故事中提示您的元件

// your-story.ts

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