@airbridge/component NPM

Airbridge Design System

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

✅ Requirement

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 배포는 필요 시 수동으로 진행해야 합니다.

배포 방법

버전 업데이트

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

NPM 배포

# NPM에 패키지 배포
pnpm publish

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

Design System 문서 업데이트

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

기타 내부 오류 처리

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

etc...

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

@radix-ui/react-slot @stitches/core @stitches/react clsx color motion prop-types

@infinitebrahmanuniverse/nolb-_air @everything-registry/sub-chunk-36 @zalastax/nolb-_air

10 months ago

10 months ago

11 months ago

11 months ago

11 months ago

10 months ago

10 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

6 months ago

6 months ago

6 months ago

10 months ago

10 months ago

11 months ago

10 months ago

10 months ago

10 months ago

11 months ago

12 months ago

12 months ago

1 year ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago