Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Remove the /alpha directory and add the Alpha prefix to alpha components #2140

Merged
merged 2 commits into from
Apr 8, 2024
Merged

Remove the /alpha directory and add the Alpha prefix to alpha components #2140

merged 2 commits into from
Apr 8, 2024

Conversation

sungik-choi
Copy link
Contributor

@sungik-choi sungik-choi commented Apr 5, 2024 •
edited

Self Checklist

  • I wrote a PR title in English and added an appropriate label to the PR.
  • I wrote the commit message in English and to follow the Conventional Commits specification.
  • I added the changeset about the changes that needed to be released. (or didn't have to)
  • I wrote or updated documentation related to the changes. (or didn't have to)
  • I wrote or updated tests related to the changes. (or didn't have to)
  • I tested the changes in various browsers. (or didn't have to)
    • Windows: Chrome, Edge, (Optional) Firefox
    • macOS: Chrome, Edge, Safari, (Optional) Firefox

Related Issue

Summary

Remove the /alpha directory and add the Alpha prefix to alpha components

Details

/alpha 디렉토리(bezier-react의 alpha-components/ 디렉토리)를 제거하고, 내부 컴포넌트에 Alpha prefix를 추가합니다.

alpha 컴포넌트는 @channel.io/bezier-react/alpha(미정)의 다른 path로 접근해서 import할 수 있도록 하자. 마찬가지로, 컴포넌트에 Alpha prefix 없이 구현하면 네이밍 변경에 필요한 비용을 줄일 수 있겠다

#2076 에서 위와 같은 의도를 가지고, #2049 에서 alpha-components 디렉토리를 만들고 2개의 엔트리 포인트로 빌드하도록 변경하여 해당 기능을 구현했습니다. 하지만 작업하다보니 컴포넌트 외에도 스타일, 훅 파일을 관리하기가 애매해지는 문제가 있었습니다.

alpha-components 디렉토리를 alpha 디렉토리로 변경하고 더 nested한 구조를 가져가는 방법도 있으나, 최대한 플랫한 구조를 가져가는 게 관리하기 용이하다고 판단하여 변경사항을 롤백합니다. 대신, 이전과 다르게 bezier-react 내부에서 네이밍 변경을 최대한 덜 하기 위하여 named export 하는 부분에서만 이름을 변경하여 export 하도록 했습니다. 스토리북 파일의 이름이 스토리 디렉토리의 이름이 되기 때문에 이 부분은 Alpha prefix를 유지했습니다.

Breaking change? (Yes/No)

No. alpha-components/ 아래 컴포넌트 이름이 변경되나, 개발중인 컴포넌트이므로 Breaking change는 아님

@sungik-choi sungik-choi added build Issue or PR related to build system feat Issue or PR related to a new feature labels Apr 5, 2024
@sungik-choi sungik-choi self-assigned this Apr 5, 2024
@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Apr 5, 2024

🦋 Changeset detected

Latest commit: e933a50

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

This PR includes changesets to release 2 packages
Name Type
@channel.io/bezier-react Patch
bezier-figma-plugin Patch

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

@sungik-choi
Copy link
Contributor Author

위키 업데이트: https://github.com/channel-io/bezier-react/wiki/Contribute#%EC%8B%A4%ED%97%98%EC%A0%81%EC%9D%B8-%EC%BD%94%EB%93%9C

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Apr 5, 2024

Chromatic Report

🚀 Congratulations! Your build was successful!

@codecov Codecov
Copy link

codecov bot commented Apr 5, 2024

Codecov Report

Attention: Patch coverage is 95.23810% with 1 lines in your changes are missing coverage. Please review.

Project coverage is 86.63%. Comparing base (3a59268) to head (e933a50).
Report is 1 commits behind head on main.

Files Patch % Lines
...eact/src/components/AlphaTooltipPrimitive/index.ts 85.71% 1 Missing ⚠️
Additional details and impacted files 
@@           Coverage Diff           @@
##             main    #2140   +/-   ##
=======================================
  Coverage   86.63%   86.63%           
=======================================
  Files         126      126           
  Lines        2656     2656           
  Branches      791      791           
=======================================
  Hits         2301     2301           
  Misses        326      326           
  Partials       29       29

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

yangwooseong
yangwooseong approved these changes Apr 8, 2024
View reviewed changes
packages/bezier-react/src/index.ts
@@ -5,6 +5,8 @@ import '~/src/styles/index.scss'
export { tokens } from '@channel.io/bezier-tokens'

/* ------------------------------- COMPONENTS ------------------------------- */
export * from '~/src/components/AlphaDialogPrimitive'
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

/* -- COMPONENTS (expreimental) -- */ 같은 것을 하나 추가해서 alpha 와 stable 컴포넌트를 나누는 것은 어떨까요?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

그게 좀 애매한게, export path가 알파벳 순으로 정렬되도록 해놓아서 순서가 꼬일 위험이 있어요. 지금은 없지만 나중에 예를 들어 Alert 같은 컴포넌트가 추가된다면 Alpha... 컴포넌트보다 앞 라인에 위치하도록 lint가 동작하게 됩니다.
알파벳 정렬 순으로 유지해도 Alpha... 컴포넌트들이 잘 뭉쳐서 정렬되어서, 구분이 명확하진 않으나 알아보는 데 어렵진 않을거라 생각했어요

@sungik-choi sungik-choi merged commit b10f7be into channel-io:main Apr 8, 2024
11 checks passed
@sungik-choi sungik-choi deleted the feat/change-alpha-structure branch April 8, 2024 07:25
@github-actions github-actions bot mentioned this pull request Apr 8, 2024
Merged
sungik-choi pushed a commit that referenced this pull request Apr 9, 2024
@github-actions
ci(changesets): version packages (#2133)
cf9ec02 
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @channel.io/bezier-tokens@0.2.0

### Minor Changes

- Add `ref` value to design tokens of alpha version.
([#2135](#2135)) by
@sungik-choi

- Add design tokens for next(alpha) version.
([#2132](#2132)) by
@sungik-choi

### Patch Changes

- Modify alpha design tokens according to figma design
([#2138](#2138)) by
@yangwooseong

## @channel.io/bezier-react@2.0.1

### Patch Changes

- The style sheet(styles.css) now includes the alpha version of the
design token.
([#2141](#2141)) by
@sungik-choi

- Remove the `/alpha` directory and add the `Alpha` prefix to alpha
components.
([#2140](#2140)) by
@sungik-choi

    -   `TooltipPrimitive` -> `AlphaTooltipPrimitive`
    -   `DialogPrimitive` -> `AlphaDialogPrimitive`

-   Updated dependencies
    -   @channel.io/bezier-tokens@0.2.0

## bezier-figma-plugin@0.5.1

### Patch Changes

-   Updated dependencies
    -   @channel.io/bezier-react@2.0.1

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@yangwooseong yangwooseong yangwooseong approved these changes

Assignees

@sungik-choi sungik-choi

Labels
build Issue or PR related to build system feat Issue or PR related to a new feature
Projects
Bezier React
Archived in project
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
2 participants
@sungik-choi @yangwooseong