Storybook용 사용자 정의 툴바 애드온을 만드는 방법은 무엇입니까?

Storybook을 사용하면 프레임워크에 관계없이 UI 요소의 프로토타이핑 속도를 높일 수 있습니다. 이 기사에서는 스토리북용 툴바 애드온을 만드는 방법을 살펴보겠습니다. 이 항목의 예는 사용자 지정 도구 모음 메뉴 애드온을 통해 테마를 전환하는 것입니다.

새 응용 프로그램 또는 지원되는 프레임워크를 기반으로 하는 기존 응용 프로그램에 대한 스토리북 설정은 당분간 건너뜁니다.

새 응용 프로그램을 만들거나 기존 응용 프로그램에 스토리북을 추가한 후 npm run storybook를 실행하여 응용 프로그램의 스토리북을 봅니다.

스토리북의 주요 파일은 .storybook/main.js 및 .storybook/preview.js 입니다.
.storybook/main.js를 열고 애드온 배열에 없으면 추가합니다"@storybook/addon-toolbar". 이 패키지를 사용하면 스토리북 도구 모음에 사용자 정의 애드온을 추가할 수 있습니다.

앞서 언급한 바와 같이 스토리북 툴바에 테마 선택기 메뉴를 사용자 정의 애드온으로 추가할 계획입니다. 이를 위해 preview.js와 아래 코드를 엽니다.

// .storybok/preview.js

export const globalTypes = {
  theme: {
    name: 'Toggle theme',
    description: 'Global theme for components',
    defaultValue: 'light',
    toolbar: {
      icon: 'circlehollow',
      items: ['light', 'dark'],
      showName: true,
      dynamicTitle: true
    }
  }
}

저장되면 변경 사항이 localhost에 반영됩니다. 밝은 옵션과 어두운 옵션이 있는 새로운 도구 모음 메뉴가 표시됩니다.

훌륭한. 우리는 스토리북 툴바를 위한 새로운 맞춤 메뉴를 만들었습니다 😎

그러나 새 메뉴에서 옵션을 선택하면 아무 작업도 수행하지 않습니다.

이 문제를 해결하기 전에 당면한 과제를 상기시키고 싶습니다. 선택한 UI 요소의 테마를 변경합니다. 이를 위해 매우 기본적인 CSS를 작성해 보겠습니다.

// your angular/react application's base.(s)css

:root:not([data-theme='dark']) {
  --bg-color: #fff;
}

[data-theme='dark'] {
  --bg-color: #000;
}

body {
  background-color: var(--bg-color);
}

이것에는 멋진 것이 없습니다. css 변수--bg-color를 생성하고 데이터 속성data-theme을 기반으로 값을 할당했습니다. 그리고 마지막으로 우리는 본문 태그 배경색을 설정하기 위해 해당 css 변수를 사용하고 있습니다.

시원한. 그러나 해당 데이터 속성을 어디에 추가하고 어떻게??

렌더링된 UI 요소 요소를 검사하면 첫 번째 질문에 대한 답변이 표시됩니다. 스토리북의 모든 UI 요소는 id가 있는 iframe 내부에서 렌더링됩니다storybook-preview-iframe. 해당 iframe 내부의 본문 태그에 데이터 속성data-theme을 추가해야 합니다.

아주 잘. 이제 두 번째 질문 HOW에 답할 시간입니다.

이를 위해 애플리케이션의 useTheme.js 폴더 안에 파일.storybook을 추가해 보겠습니다. 그리고 아래 코드를 추가합니다.

// .storybook/useTheme.js

import { useEffect, useGlobals } from '@storybook/addons';

export const useTheme = (StoryFn) => {
  const [{ theme }] = useGlobals();

  useEffect(() => {
    //document.body refers to body tag inside iframe#storybook-preview-iframe
    document.body.setAttribute('data-theme', theme);
  }, [theme]);

  return StoryFn();
};

한 입입니다. 이것이 무엇을 하는지 봅시다. Storybook은 decorators라는 API를 제공합니다. 방금 useTheme 라는 데코레이터를 만들었습니다. 이전main.js에서 globalTypes에 테마를 추가했습니다. useGlobals 중 @storybook/addons를 사용하여 데코레이터에서 선택한 테마 값을 읽을 수 있습니다. 그리고 useEffect에서 선택한 테마를 iframe 본문 태그의 data-theme 속성 값으로 설정합니다.
useTheme 데코레이터를 생성한 후 내부preview.js를 다음과 같이 사용해야 합니다.

// .storybook/preview.js

import {useTheme} from './useTheme';

export const globalTypes = {
  theme: {
    name: 'Toggle theme',
    description: 'Global theme for components',
    defaultValue: 'light',
    toolbar: {
      icon: 'circlehollow',
      items: ['light', 'dark'],
      showName: true,
      dynamicTitle: true
    }
  }
}

export const decorators = [useTheme];

비올라. 툴바 메뉴에서 테마를 선택할 때마다 iframe 본문 배경색이 변경됩니다.

이것이 테마를 변경하기 위해 사용자 지정 도구 모음 애드온을 만든 방법입니다. 선택한 테마를 기반으로 UI 요소의 모양을 변경하기 위해 CSS 변수를 몇 개 더 만들 수 있습니다.

이것이 이 기사의 끝입니다. 아래 댓글 섹션에 툴바 애드온에 대한 아이디어를 게시해 주세요.

감사,
키란👋