기여하기

패키지들

packages/design-token (npm: @greenlabs/formula-design-token)

• 디자인 토큰 정의 및 빌드 아웃풋
• 의존성 X
• style-dictionary를 사용해 빌드하며, 의존하는 프로젝트(components)가 npm 패키지가 아닌 로컬 패키지(design-token)를 가리키고 있으므로, 변경점이 있을 시 먼저 빌드가 되어있어야 합니다.

packages/components (npm: @greenlabs/formula-components)

• TS로 작성된 컴포넌트 라이브러리
• design-token에 의존

packages/components-rescript (npm: @greenlabs/rescript-formula-components)

• 컴포넌트 라이브러리에 대한 ReScript 바인딩
• components에 의존

기본 작업 워크플로우

• 브랜치로 변경점 커밋
• yarn changeset 후 생성된 .md파일을 version changes 등의 간략한 커밋로그와 함께 커밋
  • 현 시점에서는 changeset을 patch로만 작성해, next 버젼의 빌드 넘버만 올리고 있습니다.

컴포넌트를 업데이트하고 싶어요

• 해당 컴포넌트 파일/기능이 구현되어있는지 스토리북으로 먼저 확인합니다.
• 구현이 되어있을 시, 파일을 확인합니다.
• 스타일 정의를 업데이트하고 싶다: style.css.ts 위주로 변경
  • css 아웃풋은 빌드 시 Rollup으로 emit됩니다. (build 폴더 참조)

컴포넌트를 추가하고 싶어요

• components 패키지의 src에 폴더를 추가합니다.
• 최상단의 src/index.ts에 컴포넌트를 reexport합니다.
• 바인딩을 추가합니다.

바인딩을 업데이트하고 싶어요

• components-rescript 로컬 패키지에서 해당 모듈을 찾아 수정
• tests 폴더의 바인딩 테스트를 수정합니다.

디자인 토큰 값을 변경하고 싶어요

• 정의된 json(5) 파일을 변경한 후 빌드해줍니다.
• 빌드 후 푸시합니다.
• figma-tokens 플러그인에서 불러옵니다. 불러온 다음 변경점을 다시 푸시합니다.