기여하기

포뮬러 디자인 시스템의 구조

패키지

• 디자인 토큰(packages/design-token)
• TS로 작성된 컴포넌트 라이브러리 (packages/components)
• 컴포넌트 라이브러리에 대한 ReScript 바인딩 (packages/components-rescript)

세가지 패키지로 구성되어 있습니다.

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

• 무의존

components (npm: @greenlabs/formula-components)

• design-token에 의존

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

• components에 의존

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

기본 작업 워크플로우

• 컴포넌트를 업데이트했을 때:
• 현 시점에서는 changeset을 patch로만 작성해, next 버젼의 빌드 넘버만 올리고 있습니다. yarn changeset 후

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

• 해당 컴포넌트 파일/기능이 구현되어있는지 스토리북으로 먼저 확인합니다.
• 구현되어있을 시, 파일을 확인합니다. 스타일링 구현 코드는 style.css.ts에 있습니다.

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

• components-rescript 로컬 패키지에서 해당 모듈을 찾아 수정하고, test를 수정합니다.

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

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