Airbridge Design System

에어브릿지 대시보드에 사용되는 디자인 시스템을 관리하는 Repository입니다.
각 내용을 참조하여 업무 진행을 부탁드립니다 :)
Airbridge Design System Docs

✅ Requirement

• Node (LTS version)
• PNPM

How To Install

# install node from brew
brew install node

# install pnpm from brew
brew install pnpm

# setup version
pnpm env use --global 16

⚒️ Environment Setup

본 레포지터리를 Clone한 뒤, PNPM을 사용해 필요한 패키지를 설치해주세요.
GitKraken 등의 Git GUI 도구를 사용하면, 보다 편하게 작업하실 수 있습니다.

# install packages from lock file
pnpm install

🏃 Install & Run

설치가 완료되고, 로컬에서 개발 내용을 확인하고자 할 때는 아래 명령어를 입력해주세요.

pnpm storybook

로컬에서 빌드를 실행할 때는 아래 명령어를 입력해주세요.

pnpm build

🎨 Templates

아래 명령어들을 이용해 템플릿이 적용된 파일을 쉽게 생성할 수 있습니다.

foundation 템플릿을 사용하고자 할 때는 아래 명령어를 입력해주세요.

pnpm new:foundation [NAME]

• src/foundations/[NAME]/[NAME].stories.mdx 파일이 생성됩니다. (*template)
• src/foundations/[NAME]/[NAME].ts 파일이 생성됩니다. (*template)
• src/foundations/[NAME]/index.ts 파일이 생성됩니다.
• src/foundations/index.ts 에 export문이 추가됩니다.
  

component 템플릿을 사용하고자 할 때는 아래 명령어를 입력해주세요.
터미널에 제시되는 프롬프트에서 컴포넌트의 이름과 props를 입력하면 컴포넌트 생성에 필요한 파일들이 자동 생성됩니다.

pnpm new:component

• src/components/foo/Foo.tsx 파일이 생성됩니다.
• src/components/foo/Foo.styles.ts 파일이 생성됩니다.
• src/components/foo/index.ts 파일이 생성됩니다.
• Storybook의 Docs를 구성할 파일들이 storybook 폴더 내에 생성됩니다.
  • src/components/foo/storybook/Foo.docs.mdx 파일이 생성됩니다.
  • src/components/foo/storybook/Foo.stories.tsx 파일이 생성됩니다.
  • src/components/foo/storybook/Foo.stories.styles.tsx 파일이 생성됩니다.
• src/components/index.ts 에 export문이 추가됩니다.
  

🔍 Stability & Review

For QA & Code Review

Code Review를 위해 PR을 올릴 때는, 기본적으로 'Draft Pull Request' 옵션을 활성화시킵니다.

QA에 필요한 환경은 Vercel로 구축합니다.
feature/TICKET_NAME 으로 브랜치를 생성한 후 master로 PR을 보내면, 자동으로 Deploy Preview가 생성됩니다.

🚀 Deployment

Monorepo 내부 사용

모노레포에 포함된 프로젝트들은 workspace를 참조하기 때문에 packages/design-system의 현재 상태를 기준으로 사용합니다.

NPM 배포

외부 프로젝트에서는 npm에 배포된 패키지를 사용합니다. npm 배포는 필요 시 수동으로 진행해야 합니다.

배포 방법

1. 버전 업데이트

# 패키지 버전 업데이트 (v0.1.0이 되기 전까지는 patch만 사용해주세요)
pnpm version patch  # 0.0.X
pnpm version minor  # 0.X.0
pnpm version major  # X.0.0

2. NPM 배포

# NPM에 패키지 배포
pnpm publish

Note: 배포 전에 package.json의 버전이 올바르게 업데이트되었는지 확인해주세요.

Design System 문서 업데이트

master 브랜치에 새로운 커밋이 생기면 (merge or push), 자동으로 design.abrge.app이 업데이트됩니다.

기타 내부 오류 처리

hotfix/TICKET_NAME 으로 브랜치를 생성하여 작업, PR을 올린 뒤 merge합니다.

etc...

• 🤔 Front-end Guidelines
• 🗂 Design System Notion Page

"Design system is a process and therefore is simultaneously always ready and never done." > - Marcin Treder, UXPin