Storybook로 커스텀 Document 만들기

지난번에 Storybook 7.0 사용기 (+ Next.js, Typescript, Styled-component) 관련해서 글을 작성한 적이 있었는데, 이번에는 Storybook으로 커스텀 독스 만드는 방법을 가져왔다.. ✌️ 스토리북 공식 문서는 친절한듯 .. 친절하지 않았다..

스토리북 Doc blocks

스토리북에서는 Document의 다양한 블럭들을 제공해주고 있다.

 

예를 들면 Storybook - Typeset 라던가, Storybook-ColorPalette 라던가 등등 ..

이것들을 이용해서 스토리북 상에서 디자인 토큰들을 Document 상에서 잘 보여줄 수 있다.

하지만 해당 템플릿을 커스텀하게 다룰 수 없다는게 굉장히 ! 아쉬운 부분으로 남는다.

나도 위와 같은 스토리북 Document를 만들어야겠다...

Palette 컴포넌트 만들기

이건 그냥 기본 컴포넌트를 만드는 것과 동일하게 만들었다.
⎯   WFP UI Storybook - Palette

brand의 속성을 묶어줄 <PaletteContainer/> 와 팔레트 단일 아이템의 <PaletteItem/> 컴포넌트 2개로 나누어주었다.

 

Stories.tsx > MDX

그리고, Palette.stories.tsx 파일을 원래 작성하는 것 처럼 작성해준다. 

// paletteColor.ts

const paletteColor={
  common: {
  	white : #...,
    black: #...,
  }
}

// palette.stories.tsx

const Common: Story = {
  args: {
    title: 'common',
    colors: paletteColor.common
  }
};

 

 

그리고 이것을 Document 로 넘겨주기 위해서, mdx 파일을 생성해준다.

// document.mdx

import { Meta, Title, Canvas, ColorPalette, ColorItem, Story } from '@storybook/blocks';

import { Common } from './Palette.stories';

<Meta title="Palette" />

<Title>Palette</Title>

<Story of={Common}/>

 

스토리북에서 제공해주는 Story of 에 넣어주기만 하면 자연스럽게 컴포넌트 도입 완료... 😉

Storybook 폴더 내부 정렬

*.stories.tsx 파일 내부에서는 common이라는 스토리가 있고, Document는 *.mdx 파일로 이루어져 있다. 그래서 Palette 라는 메뉴를 선택하면, common 스토리가 default 로 보이게 된다. (default 정렬이 알파벳 순서이기 때문에 ... )

1. *.stories.tsx 내부 스토리 네이밍 변경

• common 이라는 스토리를 zCommon으로 변경하면 자연스럽게 Document 보다 정렬 상 후순위가 된다.
• 혹은 Document에 이모지를 붙이면 알파벳보다 선순위를 차지할 수 있다.

해당 이슈는 쉽게 해결할 수 있는 장점이 있지만, 문제점은 common이라는 스토리를 control하고 싶을 때, zCommon이라는 이름의 스토리명으로 변경해야하기 때문에 네이밍 오염(이라고 해야할까..😅)이 생긴다.

2. preview.ts 파일 수정
   다른 방법은 Storybook - Naming components and hierarchy를 이용하기다.

// Replace your-framework with the framework you are using (e.g., react, vue3)
import { Preview } from '@storybook/your-framework';

const preview: Preview = {
  parameters: {
    options: {
      storySort: {
        method: '',
        order: [],
        locales: '',
      },
    },
  },
};

export default preview;

preview.ts 파일을 사용해서 ordering을 해줄 수 있다. 해당 방법을 이용하면 depth도 설정해줄 수 있어서 편리하다 ✨

order: ['Intro', 'Pages', ['Home', 'Login', 'Admin'], 'Components']

위와 같이 설정해주면, 다음과 같이 스토리북 패널이 정렬된다.

Intro and then Intro/* stories
Pages story
Pages/Home and Pages/Home/* stories
Pages/Login and Pages/Login/* stories
Pages/Admin and Pages/Admin/* stories
Pages/* stories
Components and Components/* stories
All other stories

나는 `Palette` 내부의 Document를 우선적으로 정렬해줄 것이기 때문에 아래와 같이 설정해주었다.

'Palette',['Document', '*' ]

Sidebar 불필요한 스토리 삭제

사이드바에 Palette 하단의 Document만 보이고 싶은데, *.stories.tsx 파일 내부에 있는 Story들이 같이 오게 된다. 이 방법에 대해서 스토리북 공식 문서를 여러번 .. 찾아봤는데 답을 찾지 못했다. (order처럼 스토리북 어딘가에 텍스트로만 숨겨져 있을지도 모르겠다... 😅 ) 그래서 일단 꼼수 방법을 찾았다. ⎯ Stackoverflow - Is it possible to hide stories in Storybook on the sidebar? But still be able to access them by URL? ⎯ 그 방법은 manager-head.html 파일을 이용하는 것이다.

 

<style>
  div[data-item-id='palette--common']
  {
    display: none;
  }
</style>

 

생긴 스토리 하나하나마다 display:none 해주는 방식이다 !

딱히 좋은 방법은 아니라고 생각이 되는데, 여러가지 방법을 찾아본 결과 스토리북 자체적으로 생성된 스토리를 숨기는 방법은 없는 것 같다.. (있으면 제발 알려주세요)

 

---

 

이렇게 .. 커스텀 팔레트 만들기 완성 🙂 ✌️

mdx 에서 컴포넌트 import 해와도 되지만... 굳이 stories.tsx 파일에 스토리를 추가하고, mdx 로 옮긴 이유는 <ThemeProvider/>가 mdx 파일에서는 설정을 해놓지 않았기 때문이다..  여러가지 사정에 의해 이렇게 복잡하게 돌아왔지만, 토큰 값들을 만들 때 커스텀이 필요하시다면...! 유용하게 쓰실 수 있을 것입니다