@channel.io/bezier-codemod npm package

[sungik-choi]

Self Checklist

• I wrote a PR title in English.
• I added an appropriate label to the PR.
• I wrote a commit message in English.
• I wrote a commit message according to the Conventional Commits specification.
• I added the appropriate changeset for the changes.
• [Component] I wrote a unit test about the implementation.
• [Component] I wrote a storybook document about the implementation.
• [Component] I tested the implementation in various browsers.
  • Windows: Chrome, Edge, (Optional) Firefox
  • macOS: Chrome, Edge, Safari, (Optional) Firefox
• [New Component] I added my username to the correct directory in the CODEOWNERS file.

Related Issue

• Create bezier-icon package #993
• 위 이슈 외에도 다양한 마이그레이션이 필요한 케이스에 Transformer를 구현하여 사용할 수 있습니다.

Summary

코드 마이그레이션 자동화를 위한 @channel.io/bezier-codemod 패키지를 구현합니다.

Details

@channel.io/bezier-codemod package is Codemod transformations to help upgrade app using Bezier design system.

Usage

In your terminal, navigate into your project's folder, then run:

npx @channel.io/bezier-codemod

Transformations

Icons to Bezier icons

icons-to-bezier-icons

Update the import syntax for the icon source moved from @channel.io/bezier-react to @channel.io/bezier-icons.

For example:

import React from 'react'
import { AllIcon, Button, CheckIcon as CheckIconSource, Icon, type IconName, IconSize } from '@channel.io/bezier-react'

import Foo from './foo'

Transforms into:

import React from 'react'
import { AllIcon, CheckIcon as CheckIconSource, type IconName } from '@channel.io/bezier-icons'
import { Button, Icon, IconSize } from '@channel.io/bezier-react'

import Foo from './foo'

Breaking change or not (Yes/No)

No

References

아래 레퍼런스를 참고하여 npx 로 실행 가능한 패키지를 구현했습니다.

• https://blog.shahednasser.com/how-to-create-a-npx-tool/
• https://blog.deepgram.com/npx-script/

아래 레퍼런스에서 패키지 구성 방식을 참고했습니다.

• https://github.com/reactjs/react-codemod
• https://polaris.shopify.com/tools/polaris-migrator

코드 변환은 ts-morph 를 학습하여 구현했습니다.

• https://ts-morph.com/

UI는 ink, ink-ui 를 학습하여 구현했습니다. 패키지 구성엔 create-ink-app 도 함께 사용하여 구현했습니다.

• https://github.com/vadimdemedes/ink
• https://github.com/vadimdemedes/ink-ui

[changeset-bot]

🦋 Changeset detected

Latest commit: cdc1367

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@channel.io/bezier-codemod	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[codecov]

Codecov Report

Patch and project coverage have no change.

Comparison is base (3ba3ee9) 84.23% compared to head (cdc1367) 84.23%.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #1382   +/-   ##
=======================================
  Coverage   84.23%   84.23%           
=======================================
  Files         309      309           
  Lines        3913     3913           
  Branches      804      804           
=======================================
  Hits         3296     3296           
  Misses        546      546           
  Partials       71       71           

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.

[sungik-choi]

• ESM Support: https://kulshekhar.github.io/ts-jest/docs/guides/esm-support

[sungik-choi]

• https://stackoverflow.com/questions/33509816/what-exactly-does-usr-bin-env-node-do-at-the-beginning-of-node-files

This line should be added to all files that will be executed through the command line. It's called a Shebang, and basically, it specifies what interpreter the file should be passed to for execution in Unix-like systems.

[sungik-choi]

• https://github.com/sindresorhus/meow
• --help 커맨드 사용 시 아래 텍스트가 출력됩니다.

[sungik-choi]

실제로는 사용되지 않는 import도 있으나, 실제 채널 어플리케이션과 같은 상황을 구현하기 위해서 추가했습니다.