@madup-inc/mad-design
Design systenm of LEVER
디자인시스템 사용
설치
설치하려면 프로젝트 루트에 .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-library 와 docz 프로젝트를 모노레포로 구성함
| path | desc | command |
|---|---|---|
| /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 의 버젼과 태그의 버젼을 일치시켜 주세요.