Doodlin-UI

소개

doodlin-ui는 두들린 디자인시스템을 React에서 사용하기 위한 라이브러리입니다. 현재 두들린에서 새로 개발되는 기능은 모두 DUI를 기반으로 디자인되고 있습니다.

Getting Started

yarn add @doodlincorp/doodlin-ui styled-components

ThemeProvider와 GlobalStyle을 App.tsx 혹은 index.tsx에 적용해주세요.

import { ThemeProvider, GlobalStyle } from '@doodlincorp/doodlin-ui'

render(
  <ThemeProvider>
    <GlobalStyle />
    <App />
  </ThemeProvider>,
)

프로젝트 구조

• components/ : DUI 컴포넌트
• constants/ : DUI 디자인 토큰 (color, fontSize, shadow 등)
• helpers/ : DUI 컴포넌트 및 디자인 토큰을 스토리북에서 보여주기 위한 컴포넌트
• hooks/ : DUI 내부 및 외부에서 사용할 수 있는 UI 관련 훅
• providers/ : DUI 컴포넌트와 훅을 사용하기 위한 Provider
• stories/ : 컴포넌트 스토리 문서 외의 개요, 훅 사용법 등
• styles/ : gloablStyle, mixins
• types/ : 공통 타입 및 DUI 전역 Theme type
• utils/ : 데이터 컨버팅 및 편의성을 위한 유틸

패키지 버저닝

모든 패키지를 동시에 같은 버전으로 릴리즈합니다. 버저닝 방식은 하위 패키지 전체를 아우르는 Semantic Versioning을 사용합니다: MAJOR.MINOR.PATCH로 버저닝하며, 아래 설명을 참고하여 해당하는 버전을 올립니다.a

1. MAJOR version when you make incompatible API changes,
2. MINOR version when you add functionality in a backwards compatible manner, and
3. PATCH version when you make backwards compatible bug fixes.

예시

• 특정 패키지에 기능 추가: 인터페이스 변경 없이 특정 패키지의 기능이 추가되었다면 MINOR 버전을 올립니다.
• 패키지 추가: 다른 패키지에 영향이 없는 범위에서 패키지가 추가되었다면 기능 추가로 볼 수 있고, MINOR 버전을 올립니다.
• 패키지 분리: 분리 대상인 패키지의 인터페이스에 변경이 일어납니다. 해당 패키지를 이용하는 프로젝트들에 코드 변경이 필요하기 때문에 MAJOR 버전 올림에 해당합니다.
• 인터페이스 개선: 인터페이스 변경이 하위 호환을 보장하는지 여부에 따라서 MAJOR 혹은 MINOR 버전 올림에 해당합니다.
• 버그 수정: 인터페이스 변경이 없는 버그 수정은 PATCH 버전 올림입니다.

CI/CD (예정)

• GitHub Actions를 이용해 CI/CD를 수행합니다. (예정)
• CI: 모든 PR 이벤트마다 동작합니다.
• CD: Greeting의 Production 배포와 동일하게 태그 푸쉬 이용 (예정)

기여

프로젝트 기여자들이 작업하는데 필요한 준비 및 작업 과정을 설명합니다.

Prerequisites

• NodeJS

Setup

프로젝트를 클론합니다:

$ git clone https://github.com/doodlincorp/doodlin-ui.git && cd doodlin-ui

디펜던시를 설치합니다:

$ yarn

기능 추가

1. 작업자가 코드 기여
2. 커밋 & 푸시
3. PR 생성 & 리뷰
4. 버전 생성: yarn publish (경우에 따라 PR과 함께 혹은 별도로 생성)

[1/4] Bumping version...
info Current version: # Current Version
question New version: # New Version - 새로운 version을 Semantic Versioning에 맞게 입력합니다.

[2/4] Logging in...
[3/4] Publishing...
$ yarn build; yarn build:aliases
yarn run v1.22.19
$ rollup -c

...

5. dev 머지

(배포 프로세스는 가까운 시일 내에 변경될 수 있습니다.)

Testing

각 패키지별 유닛 테스트를 추가할 예정입니다.

Review

• 모든 PR 리뷰는 GitHub의 두들린 프론트 팀에게 할당합니다..
• 팀 멤버 1인 이상이 승인해야 머지할 수 있습니다.
• 머지 전 머지 체크리스트를 모두 확인해야 합니다.