Overview

프로젝트 구조 설명

모노리포로 구성

• @greenlabs/formula-design-token
• @greenlabs/formula-components
• @greenlabs/rescript-formula-components

워크스페이스에 3개의 패키지가 있으며, 더 늘어날 수 있습니다.

formula-design-token

formula-design-token은 디자인 토큰의 source of truth 로서

• 전체 토큰 오브젝트
  • named export as tokens
  • { "ref": { "color": { "white": "#FFFFFF", ... }, ... }
• 컬러 토큰 오브젝트
  • named export as colorMap
  • { "gray-100": "#EEEEE", ... }
• rescript type
  • Formula__ColorMap.res
  • 파일을 생성해 rescript 바인딩 패키지로 이동
• 테일윈드 토큰
  • tailwind-tokens.json
• Figma Tokens 플러그인 json 값

... 을 빌드하는 책임을 가지고 있습니다.

빌드 설정은 sd.config.js 를 참조하면 됩니다.

---

formula-components, formula-components-rescript

스토리북 Link

컴포넌트 구조 간단 설명

• TypeScript + vanilla-extract
• rescript 바인딩은 별도의 프로젝트로 분리