Storybook 6.0이 나온 것이며 Nuxt + Storybook 6.0 프로젝트 시작

이 기사는 "주식회사 오픈 스트림 "소 재료" Advent Calendar 2020"의 5일째 기사입니다.

웹용 UI 컴포넌트 개발 툴의 Storybook이 6.x가 되어, 5.x까지 사용할 수 있는 방법( storiesOf 등)이 통용되지 않게 되었습니다.

여기에서는, 2020/12/05 시점에서 최신의 Storybook 6.0.10 을 사용해 최소 구성으로 시작해 보겠습니다.

환경

Nuxt.js 2.14.9

Storybook 6.0.10

$ node -v
v14.5.0

$ yarn -v
1.22.5

Nuxt 프로젝트 시작: create-nuxt-app

최신 create-nuxt-app으로 프로젝트를 만들 수 있는 npx를 사용하여 Nuxt 프로젝트를 시작합니다.

$ npx create-nuxt-app .

create-nuxt-app v3.4.0
✨  Generating Nuxt.js project in .
? Project name: app
? Programming language: TypeScript
? Package manager: Yarn
? UI framework: Bulma
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Linting tools: ESLint, Prettier, Lint staged files, StyleLint, Commitlint
? Testing framework: Jest
? Rendering mode: Single Page App
? Deployment target: Static (Static/JAMStack hosting)
? Development tools: jsconfig.json (Recommended for VS Code if you're not using typescript), Semantic Pull Requests, Dependabot (Fo
r auto-updating dependencies, GitHub only)
? Continuous integration: None
? What is your GitHub username? ysd-marrrr
? Version control system: Git

Storybook 소개

sb init를 실행하면 현재 프로젝트 구성을 자동으로 인식하고 @storybook/vue와 같은 최적의 스토리북이 도입됩니다.
여기 sb를 설치하지 않고 npx를 사용하여 최신 sb를 사용하여 Storybook을 소개합니다.

항상 Nuxt 프로젝트를 만든 다음 Storybook을 배포하는 순서로 합니다.

sb init is not made for empty projects

npx sb init

동작을 확인하려면 storybook를 yarn으로 호출합니다.sb init 동시에 샘플 Story가 설정되어 있으므로 이것을 볼 수 있습니다.

yarn storybook

Story 파일의 위치 변경

Storybook에서 사용하는 파일에는 .storybook의 설정 파일과 stories에 있는 story 파일이 있습니다.
story 파일의 위치를 ​​변경하려면 .storybook/main.js에서 stories를 변경합니다.

Vue 구성 요소와 story 파일을 함께 제공하려면 components를 지정합니다.

.storybook/main.js

  stories: [
    "../components/**/*.stories.mdx",
    "../components/**/*.stories.@(js|jsx|ts|tsx)"
  ],

샘플 Story는 필요하지 않으므로 stories 디렉터리를 삭제합니다.

Story 파일 만들기

stories에서 설정한 경로에 스토리 파일을 만듭니다.

먼저 Story로 만들 Vue 구성 요소를 준비합니다. create-nuxt-app에서 소개 한 CSS 프레임 워크를 사용하고 있습니다.

components/CustomButtons.vue

<template>
  <div>
    <p class="introduction">好きな<strong>処理</strong>を選択してください</p>
    <div class="buttons">
      <button class="button is-primary">かんたん</button>
      <button class="button is-link">むずかしい</button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.introduction {
  strong {
    color: red;
    font-size: 150%;
  }
}
</style>

그런 다음 스토리 파일을 만듭니다. .stories.js 파일 이름을 지정합니다.
Component Story Format 형식으로 스토리를 만듭니다.

components/buttons.stories.ts

import CustomButtons from "./CustomButtons.vue";

export default {
  title: "Button",
};

export const custom_buttons = () => ({
  components: { CustomButtons },
  template: "<custom-buttons />",
});

Storybook이 CSS (패키지) / SCSS를 처리 할 수 ​​있도록 설정

create-nuxt-app에서 CSS 프레임워크를 도입해도 Storybook에서 별도로 설정하지 않으면 반영되지 않습니다.
또한 Vue 구성 요소에서 SCSS를 사용하는 경우 Storybook에서 설정이 필요합니다.

시작하려면 SCSS를 로드하기 위한 sass-loader 패키지를 소개합니다.

 yarn add -D sass sass-loader

Storybook에서도 Webpack을 사용하지만 구성 파일은 6.x에서 .storybook/main.js입니다.sass-loader를 사용하도록 구성 파일을 변경합니다.

.storybook/main.js

const path = require("path");

module.exports = {
  stories: [
    "../components/**/*.stories.mdx",
    "../components/**/*.stories.@(js|jsx|ts|tsx)",
  ],
  webpackFinal: (config) => {
    config.module.rules.push({
      test: /\.scss$/,
      use: ["style-loader", "css-loader", "sass-loader"],
      include: path.resolve(__dirname, "../"),
    });
    return config;
  },
};

그런 다음 Storybook에서 사용할 CSS 프레임워크를 설정합니다.
Bulma의 경우 패키지에 도입된 Bulma를 로드하는 SCSS를 만듭니다.

.storybook/global.storybook.scss

@charset "utf-8";
@import "~bulma/bulma";

그런 다음 .storybook/preview.js에서 SCSS를 읽습니다.

.storybook/preview.js

// Global SCSS
import "./global.storybook.scss";

이제 yarn storybook를 실행하여 해당 Story를 열면 SCSS를 사용할 수 있으며 CSS 프레임 워크가 적용된 Vue 구성 요소를 볼 수 있습니다!

참고

스토리북: UI component explorer for frontend developers
htps : //s와 ry 보오 k. js. rg/

[기본] .storybook/main.js 만들기 | Vue와 CSF를 사용한 현대 Storybook 6의 시작
htps : // 천. 로 v/사 2k에 ght/보오 ks/아카 5d5에021d d10262b9

Nuxt.js(TypeScript) × Vuetify × Storybook을 사용하여 개발 환경을 재구성해 보기 - Ikkyu's Tech Blog
htps : // 일규. 는 bぉ. jp/엔트리/2020/04/03/191112