Writing code to convert Typography of TextProps.typo to typo string literal

[yangwooseong]

Summary

• Text의 typo 속성에 Typography enum 을 주고 있는 것을 string literal 로 변환하고, marin 관련 속성을 shorthand로 변환하기 위한 codemod 를 작성합니다.

Description

// As-is
import { Text, Typography } from '@channel.io/bezier-react'

<Text 
  typo={Typography.Size14}
  marginHorizontal={6}
>
  some text
</Text>

// To-be
import { Text } from '@channel.io/bezier-react'

<Text 
  typo="14"
  mx={6}
>
  some text
</Text> 

styled component 안에 있는 코드도 변환해야 합니다.

// As-is
import { styled, Text, Typography } from '@chanenl.io/bezier-react'

export const Title = styled(Text).attrs({
  marginLeft: 3,
  typo: Typography.Size11,
})``

// To-be
import { styled, Text } from '@chanenl.io/bezier-react'

export const Title = styled(Text).attrs({
  ml: 3,
  typo: '11',
})``

enum 속성을 string literal 로 변경해주는 codemod는 #1639 에서 구현되어 있기 때문에, 해당 로직을 그대로 사용하면 쉽게 바꿀 수 있을 것으로 예상합니다.

[sungik-choi]

#1792 와 관련하여, Text 의 margin 관련 속성이 shorthand 속성으로 변경된다면 변환 코드가 추가로 필요할 수 있습니다.

[yangwooseong]

#1792 와 관련하여, Text 의 margin 관련 속성이 shorthand 속성으로 변경된다면 변환 코드가 추가로 필요할 수 있습니다.

네, Text 컴포넌트 만들어지는 것을 보고 구현을 시작하려고 합니다

[sungik-choi]

#1820