Welchis

강남언니 백오피스의 디자인 시스템입니다.
Welchis 문서

프로젝트에 Welchis 적용하기

1. 패키지 설치

$ npm install welchis

2. Welchis를 플러그인으로 적용

1. Vue 프로젝트의 entry 파일을 엽니다. (보통 src/main.js)

2. 파일 상단에 아래 스크립트를 넣습니다.

   // main.js
   import Vue from "vue";
   
   // ...
   import Welchis, { ToastContainer, DialogContainer } from "welchis";

3. (선택사항) 타이포그라피 스타일을 불러옵니다. (타이포그라피 css 클래스를 사용하고자 할 경우)

   import "welchis/src/style/typography.scss";

4. 플러그인을 등록합니다.

   Vue.use(Welchis);

5. 다이얼로그, 모달, 토스트 컴포넌트 사용을 위해 루트에 다음 컴포넌트를 마운트 시킵니다.

   new Vue({
     router,
     store,
     components: {
       App,
       DialogContainer, // 추가
       ToastContainer // 추가
     },
     template: `
     <div>
       <ToastContainer /> // 추가
       <DialogContainer /> // 추가
       <App/>
     </div>`
   }).$mount("#app");

Welchis 문서 작성 방법

storybook을 사용하여 문서를 작성합니다.
Welchis 문서

문서 작성 규칙

• 스토리 파일명은 0000_name.js로 짓습니다. (사이드바에 나오는 순서를 제어하기 위해서)
• 파일명의 앞부분인 네 자리 숫자는
  • 앞 두 자리는 컴포넌트 종류
  • 뒤 두 자리는 순서를 결정합니다.
• name에는 컴포넌트 이름을 적습니다.

참고 사이트

• Storybook
• Vue Info Addon
• 컴포넌트 가이드 작성 방법
  

Stack

• Vue
• Jest
  

프로젝트 실행 방법

$ npm install 
$ npm run dev

빌드/배포 방법

Welchis 프로젝트 빌드/배포 방법

npm에 배포합니다.

1. npm adduser 로 로그인 합니다.
2. npm publish 로 배포합니다.

Storybook 업데이트 방법

아래 명령어를 실행하면, .out 폴더에 빌드 된 파일이 들어갑니다.

$ npm run build

Icon 업데이트 방법

새로운 Icon을 추가하는 경우 아래 과정을 통해 Icon을 업데이트 할 수 있습니다.

1. 모든 아이콘을 압축한 ic.zip 파일을 루트 경로에 둡니다.
   1. 주의: ic.zip에는 최상위 폴더가 없어야 합니다. 즉 ic.zip 파일을 열었을 때 ic폴더가 있으면 안됩니다.
2. npm run icon 스크립트를 실행합니다.
3. /src/components/Icon.vue 파일이 새로 생성됩니다.
4. /src/stories/0120_icon.js 파일이 새로 생성됩니다.
   

단위 테스트

참고

$ npm run test

TODO List

• [ ] 배포 시스템 구축
  • [ ] icon assets & component 함께 업데이트 하기
  • [ ] storybook 배포하기
  • [ ] npm 패키지 배포하기