Formula Cheat Sheet

[sairion]

Formula 프로젝트 구조

프로젝트 구조 설명

모노리포로 구성

• @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 바인딩은 별도의 프로젝트로 분리

---

컴포넌트 Cheat Sheet (ReScript)

사실 시간이 없어서 테스트에 주석을 달아놓았습니다...

ReScript와 팜모닝/신선하이를 위한 공통적 escape-hatch 인터페이스

• className
  • css module, tailwind 등
• props
  • data-gtm 또는 임의의 dom props
  • 가능하면 사용 자제하고, 필요한 인터페이스는 제안
• tag, container (if possible)

아직 인터페이스가 확정된 것은 아님 (여러 tag가 있는 컴포넌트는 어떤 엘리먼트에 prop 값을 집어넣을 것인지?)

Text

• Text는 기본적인 텍스트가 사용되는 블럭을 의미합니다.
  • Body, Caption, Headline의 세가지 종류가 있습니다.
• (TextVariant라는 내부적으로 사용하기 위한 컴포넌트가 있었으나 바인딩을 제거하였습니다.)

<Text.Caption> {`Test string`->React.string} </Text.Caption>

<Text.Headline size=#lg weight=#bold color=#white>
  {`Test string`->React.string}
</Text.Headline>

<Text.Headline size=#lg weight=#bold tag="h6"> {`Test string`->React.string} </Text.Headline>

<Text variant=#body size=#lg weight=#bold color=#white> {`Test string`->React.string} </Text>

<Text variant=#body size=#lg weight=#bold color=#"gray-90">
  {`Test string`->React.string}
</Text>

• tag: string을 이용해 기본으로 span으로 렌더링되는 동작을 오버라이드 할 수 있습니다.
• container: component 를 이용해 커스텀 컴포넌트를 넘겨줄 수 있습니다. (react-router-dom의 <Link /> 같은 동작)
• 만약 block 등의 display를 이용해 표시해야 할 니즈가 있다면, display 옵션을 추가할 수도 있을 것 같습니다. (피드백 환영!)
  • tag="div" vs display=#block

open Formula

module TestTextContainer = {
  @react.component
  let make = (~props, ~className, ~children) => {
    props->ignore
    <span className> {children} </span>
  }
}

<Text container={TestTextContainer.make} />
 
// or, simply

<Text tag="div" />

• Text의 variant 별 기본값
  • 기본값을 이용해 더 짧게 쓸 수 있습니다.
  • 기본값의 기준은... '많이 사용되는 값' 입니다.

export const TextBody = ({
  weight = "regular",
  size = "sm",
...
export const TextHeadline = ({
  size = "sm",
  weight = "bold",
  tag = "h3",
...
export const TextCaption = ({
  weight = "regular",

Divider

한줄짜리 디바이더입니다.
(아마 사용하는 일이 많진 않을듯..)

open Formula

<Divider />

<Divider className="some-className" variant=#large props={{"id": "id-of-divider"}} />

Icon

open Formula

<Icon.CalendarLineBold />

<Icon.CalendarLineRegular color=#"lightblue-90" />

<Icon.CalendarLineThin size=#pc />

<Icon.CalendarFill sizePx=32 /> // for custom size

<Icon.CalendarFill className="test-class__name" />

<Icon.CalendarFill style={ReactDOMStyle.make(~fill="red", ())} />

Button (Text Button 미구현)

open Formula
<>
  <Button.Container color=#primary size=#sm text="I'm ContainerButton" />

  <Button.Container color=#"secondary-gray" size=#sm block=true text="I'm full width button" />

  <Button.Container
    leftIcon={Icon.ArrowTriangleDownLineBold.make}
    rightIcon={Icon.VideoLineBold.make}
    color=#"negative-secondary"
    count={40}
    size=#sm
    text="I'm ContainerButton and include icon and count"
  />

  <Button.Icon icon={Icon.ArrowRightLineBold.make} color=#"negative-secondary" size=#sm />

  <Button.Anchor color=#primary size=#xl text="I'm Anchor button" />
</>

Tab (TBD)

• Radix의 Tab을 이용해 구현.
• https://tab.formula-design-system.pages.dev/

추후 계획

• Chip, GNB, Button 등이 Q4 목표
• 바인딩에 doc comment 추가로 hover만 하면 문서 볼 수 있게.
  

[sairion]

https://github.com/green-labs/formula-design-system/wiki/Cheat-Sheet