Docs
Components
Getting StartedReadme설치사용방법프로젝트 구성의존성 설치컴포넌트 빌드개발문서 시작배포

@madup-inc/mad-design

Design systenm of LEVER

NPM JavaScript Style Guide

디자인시스템 사용

설치

설치하려면 프로젝트 루트에 .npmrc 권한 파일 필요

yarn add @madup-inc/mad-design

사용방법

import {Button} from '@madup-inc/mad-design'
import '@madup-inc/mad-design/dist/index.css'
export default () => {
return (
<Button size="large">확인</Button>
)
}

디자인시스템 개발

프로젝트 구성

creat-react-librarydocz 프로젝트를 모노레포로 구성함

pathdesccommand
/packages/components컴포넌트 개발yarn dev:components
/packages/docs문서 개발yarn dev:docs
/packages/example컴포넌트 테스트yarn dev:example

의존성 설치

루트 프로젝트에서 한번만 의존성 설치를 수행합니다

yarn

컴포넌트 빌드

yarn build:components

코드 변경시 자동빌드

yarn watch:components

개발문서 시작

yarn dev:docs

로컬 개발문서 서버 접속) http://localhost:15000

docz 를 시작하기 전에 컴포넌트 빌드 필수.

컴포넌트 변경사항이 자동으로 문서에 적용되도록 하려면, 2개의 터미널을 열고 한쪽에서는 yarn watch:components , 다른 한쪽에서는 yarn dev:docs 를 실행합니다.

Note1) 위 개발문서 서버의 포트번호를 변경할 경우 오류가 발생할 수 있습니다. https://github.com/madup-inc/mad-design/issues/4#issuecomment-858289378


배포

develop 브랜치

develop 브랜치는 upstream 으로 배포시에 dev.design.lever.me 문서만 업데이트 됩니다.

main 브랜치

main 브랜치는 upstream 으로 배포 후, 새로운 태그를 생성해야 배포 프로세스가 수행됩니다.

신규 태그 생성 전에 packages/components/package.json 의 버젼과 태그의 버젼을 일치시켜 주세요.