Playground) Histoire 설치 및 사용

 

Histoire

Historie는 어찌 읽나 헷갈리는데 공식 문서에 따르면 "이스투아" 라고 읽는다.

이스투아는  컴포넌트를 개발해서 props를 마음대로 변경할 수 있는 UI를 제공한다. 

 

원래는 storybook 을 적용하고 싶었는데 생각보다 너무 무거워서 histoire로 변경했다.

---

Histoire 설치 

일단 나는 vue3 프로젝트에서 사용하기 때문에 여기를 참고했다. 

pnpm i -D histoire @histoire/plugin-vue
# OR
npm i -D histoire @histoire/plugin-vue
# OR
yarn add -D histoire @histoire/plugin-vue

Histoire setting

1. 프로젝트 루트에 historie.config.ts 파일을 만든다. 

import { defineConfig } from 'histoire'
import { HstVue } from '@histoire/plugin-vue'

export default defineConfig({
  plugins: [
    HstVue(),
  ],
})

2. package.json에 histoire 관련 스크립트를 추가한다.  

{
  "scripts": {
    "story:dev": "histoire dev",
    "story:build": "histoire build",
    "story:preview": "histoire preview"
  }
}

 

Story 만들기 

1. src/stories 폴더를 만든다. 

파일 이름은 다음과 같이 설정한다. 

<컴포넌트 이름>.story.vue

example

<script setup lang="ts">
import { reactive } from 'vue';
import VuetroButton from '@/components/button';

const a = reactive({
  plain: true,
  color: 'red',
});
</script>

<template>
  <Story>
    <Variant>
      <VuetroButton :color="a.color">예시</VuetroButton>

    </Variant>

    <Variant>
      <VuetroButton :color="a.color">예시</VuetroButton>

    </Variant>
    
    <VuetroButton :color="a.color" plain>예시</VuetroButton>

    <template #controls>
      color: <input v-model="a.color" type="color"/>
      {{ a.color }}
    </template>
  </Story>
</template>

문법이 storybook보다 훨씬 간단하면서 필수 기능은 다 있다. 공식 문서에서 사용법을 정독해봐야겠다. 

일단 예시 파일을 하나 만들고 실행시켜본다. 

 

2. 실행

npm run storie:dev

파일 하나가 첫번째 컬럼의 메뉴 하나가 되는 것이고

<Variant> ... </Variant> 태그 하나가 두번째 컬럼의 메뉴 하나가 되는거다. 

여기서 props를 마음대로 바꾸며 테스트해볼 수도 있고 나중에 document를 만들 때 활용하기도 좋다. 

---

이런거 처음 알았는데 신기하다. 컴포넌트 하나 만들때마다 하나씩 꼭 만들어야지