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

• TextTab만 구현된 상태
• Radix의 Tab을 이용해 구현.

open Formula

<TextTab.List
  defaultValue="a"
  fullWidth={true}
  onValueChange={_ => ()}
  contents={<>
    <TextTab.Content value="a"> {`this is a`->React.string} </TextTab.Content>
    <TextTab.Content value="b"> {`this is b`->React.string} </TextTab.Content>
    <TextTab.Content value="c"> {`this is c`->React.string} </TextTab.Content>
  </>}>
  <TextTab.Trigger title="텍스트 a" value="a" icon={Icon.ArrowDownLineBold.make} />
  <TextTab.Trigger
    ref={ReactDOM.Ref.domRef(triggerTestRef)}
    title="텍스트 "
    value="b"
    badge={{
      _type: #countSimple,
      value: 9,
    }}
  />
  <TextTab.Trigger
    value="c"
    badge={{
      _type: #simple,
    }}>
    <Icon.ArrowDownLineBold />
  </TextTab.Trigger>
</TextTab.List>

추후 계획

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