StorybookJS: 팁과 요령

사진 제공: Florencia Viadana on Unsplash


방금 DeckDeckGo의 documentation을 StorybookJS으로 마이그레이션했습니다. 빌드 및 테스트를 단순화하는 기능 외에도 자동으로 생성되는 README.md 파일StencilJS을 통합할 수 있기 때문에 문서화 목적으로 사용하는 것을 좋아합니다. 코드와 문서 사이의 스파링 단계가 최고라고 생각하지 않습니까?

다음은 그 과정에서 내가 재사용하거나 발견한 몇 가지 팁과 요령입니다.

Markdown 파일을 StorybookJS로 가져오기

StencilJS의 특히 멋진 기능 중 하나는 코드 주석에서 마크다운 파일을 자동 생성readme.md한다는 것입니다. 깔끔하지 않나요?

나는 그것이라고 생각한다. 따라서 개념을 더 발전시키기 위해 이러한 Markdown 파일을 Docs 전용 페이지로 가져오도록 StorybookJS를 설정했습니다. 그런 식으로 문서는 유지되고 가능한 한 코드에 가깝게 편집되어 중단 없이 최종 사용자에게 전달됩니다.

메타

StorybookJS 문제#11981를 작성하는 시점에 transcludeMarkdown 설정 또는 원시 로더 사용을 포함한 기타 솔루션을 나열합니다. 다음 해결 방법이 적합하지 않으면 다음 중 하나를 시도하십시오.

한정

매우 잘 작동하지만 페이지에 표시되고 Markdown 파일에서 가져온 코드 블록을 강조 표시하지 못했습니다. Icommented는 이에 따라 문제를 제기합니다.

이 문제를 해결할 수 있다면 지금 알려주세요. 또는 GitHub에서 Pull Request을 보내주세요 😉.

해결책

저는 Storybook의 HTML 버전을 사용하고 있습니다. 예를 들어 배경색을 인수로 허용하는 단락을 문서화하는 .js에서와 같이 Text.stories.js 파일에서 내 스토리를 처리합니다.

export default {
  title: 'Components/Text',
  argTypes: {
    bg: {control: 'color'}
  }
};

export const Text = ({bg}) => {
  return `<p style="background: ${bg};">
    Hello World
  </p>`;
};

Text.args = {
  bg: '#FF6900'
};

StorybookJS에 따르면 구성 요소 수준의 DocsPage 템플릿을 대체하여 MDX 문서 또는 사용자 정의 구성 요소로 자체 문서를 표시할 수 있습니다. 그렇기 때문에 스토리 옆에 새 파일Text.mdx을 만들어 스토리에 가져오고 page로 제공합니다.

import {Doc} from './Text.mdx';

export default {
  title: 'Components/Text',
  parameters: {
    docs: {
      page: Doc
    }
  },
  argTypes: {
    bg: {control: 'color'}
  }
};

export const Text = ({bg}) => {
  return `<p style="background: ${bg};">
    Hello World
  </p>`;
};

Text.args = {
  bg: '#FF6900'
};

마지막으로 .mdx 파일에서 README.md 파일(또는 다른 Markdown 파일)을 가져오고 기본 StorybookDescription 블록을 사용하여 DocsPage를 사용자 지정 문서와 리믹스합니다.

import {Description} from '@storybook/addon-docs/blocks';

import readme from './readme.md';

export const Doc = () => <Description markdown={readme} />;

이제 Markdown 파일이 StorybookJS 🥳의 문서 페이지로 통합되었습니다.

CDN을 사용하여 종속성 로드

아무도 그런 요구 사항을 가지고 있지는 않지만 저처럼 CDN에서 종속성을 로드해야 하는 경우 다음 트릭이 있습니다. script를 ./storybook/preview-head.html에 추가합니다. 당신의 이야기로 평가될 것입니다.

마찬가지로 일부style를 정의하거나 구성 요소에 대한 특정 Google 글꼴을 로드하려는 경우 동일한 파일도 수정할 수 있습니다.

내 preview-head.html 파일에서 가져온 몇 가지 예:

<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap" rel="stylesheet" />

<script type="module" src="https://unpkg.com/@deckdeckgo/color@latest/dist/deckdeckgo-color/deckdeckgo-color.esm.js"></script>

<style>
  pre:not(.prismjs) > div {
     box-shadow: none;
     margin: 25px 0;
  }
</style>

스토리 정렬

스토리의 특정 순서는 ./storybook/preview.js 속성을 사용하여 storySort에서 정의할 수 있습니다. 각 챕터는 string로, 스토리 목록은 array로 제공되어야 합니다.

import theme from './theme';

export const parameters = {
  actions: {argTypesRegex: '^on[A-Z].*'},
  options: {
    storySort: {
      order: [
        'Introduction',
        ['Introduction', 'Getting Started'],
        'Edit',
        ['HTML', 'Lazy Loading']
      ]
    }
  },
  docs: {
    theme
  }
};

이름은 스토리에서 title로 제공된 이름과 일치해야 합니다.
MDX 사용 meta:

import {Meta} from '@storybook/addon-docs/blocks';
    <Meta title="Introduction/Getting Started" />

JS부터 기본값title까지:

export default {
  title: 'Components/Lazy Image',
  argTypes: {
    imgSrc: {control: 'text'}
  }
};

요약

StencilJS + StorybookJS = 굉장하다 💪

무한과 그 너머로!

다윗


또는 mywebsite로 저에게 연락할 수 있습니다.

다음 슬라이드를 위해 DeckDeckGo을 사용해 보십시오!