refactor(typography): apply vanilla-extract #162

jiji-hoon96 · 2025-05-21T08:52:23Z

Changes

vanilla extract 적용
스토리북 옵션 추가

Visuals

Checklist

Have you written the functional specifications?
Have you written the test code?

Additional Discussion Points

- package 설정 수정

- module css 삭제 - vanilla-extract 변경된 코드 적용

- 메인 로직 수정

- 테스트랑 스토리북 코드 수정

changeset-bot · 2025-05-21T08:52:26Z

⚠️ No Changeset found

Latest commit: e886b8e

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

coderabbitai · 2025-05-21T08:52:29Z

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Explain this complex logic.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai explain this code block.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and explain its main purpose.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR.
@coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

codecov · 2025-05-21T08:53:24Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Files with missing lines	Coverage Δ
packages/typography/src/Typography.css.ts	`100.00% <100.00%> (ø)`
packages/typography/src/Typography.test.tsx	`100.00% <100.00%> (ø)`
packages/typography/src/Typography.tsx	`100.00% <100.00%> (ø)`

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

noahluftyang · 2025-05-23T13:22:53Z

packages/typography/src/Typography.css.ts

+export const size = styleVariants(fontSize, (value) => ({
+  fontSize: `${value}px`,
+}));


오 callback으로 값 변환이 가능하구나!

noahluftyang · 2025-05-23T13:24:36Z

packages/typography/src/Typography.css.ts

+  lineHeight: value,
+}));
+
+export const typography = recipe({


얘는 recipe로 처리해야할 만큼 복잡한 스타일은 아니라고 생각하는데, recipe를 사용하지 않는 방향으로 작성해볼 수 있을까??

알겠어!
나는 recipe 를 복잡하지않아도, 가독성이 좋아서 사용하는편인데 어떤 상황일 때 과한건지 판단하기가 어렵네..

noahluftyang · 2025-05-23T13:26:23Z

packages/typography/src/Typography.tsx

 export type LineHeight = keyof typeof lineHeightToken;

-export interface TypographyProps extends ComponentProps<'p'> {
+export interface TypographyProps extends Omit<ComponentProps<'p'>, 'color'> {
+  as?: ElementType;


as prop은 asChild랑 동일한 역할이라서 중복 기능의 구현으로 보이는데, 추가한 이유가 있을까?

as props 는 Typography 컴포넌트 자체가 특정 HTML 요소로 렌더링되도록 하고 싶을 때 사용해 h1, h2, span 등등?
asChild는 Typography 스타일을 기존의 다른 컴포넌트나 요소에 주입하거나, 불필요한 DOM 래퍼 없이 스타일을 적용하고 싶을 때 사용해.

https://sandroroth.com/blog/react-polymorphic-components/

https://www.radix-ui.com/primitives/docs/guides/composition

디자인 시스템 공부할 때 살펴본 문서인데, 약간의 차이때문에 구현을 통해 컴포넌트 자체의 활용도를 높일 수 있따 알고있어!
혹시 다른 의견있으면 말해줘도좋아!

noahluftyang · 2025-05-23T13:28:45Z

packages/typography/src/Typography.tsx

-    '--font-size': `${fontSizeToken[size]}px`,
-    '--font-weight': fontWeightToken[weight],
-    '--line-height': lineHeightToken[lineHeight],
+    color,


스타일을 직접 주입하기보다는 css variable을 활용한 방식을 그대로 유지해주는게 어떨까? @vanilla-extract/dynamic을 활용하면 비교적 쉽게 구현할 수 있어~

고마워 한번 반영해봤어

e886b8e

처음 써보는 문법이여서, 사용한 부분이 지향하는 바와 방향이 맞는지 확인해주면 좋을것같아!

- 코드 리뷰 반영 - recipe 제거 - typography.tsx 파일 리팩토링

- vanilla-extract dynamic 설치 - 코드 리뷰 반영

jiji-hoon96 added 4 commits May 21, 2025 15:56

refactor(typography): migrate to Vanilla Extract

101b5d5

- package 설정 수정

refactor(typography): migrate to Vanilla Extract

9e88a8e

- module css 삭제 - vanilla-extract 변경된 코드 적용

refactor(typography): migrate to Vanilla Extract

c514fb8

- 메인 로직 수정

refactor(typography): migrate to Vanilla Extract

cf8f815

- 테스트랑 스토리북 코드 수정

jiji-hoon96 requested review from noahluftyang, froggy1014, synuns, dev-hobin, leejiwonn and haedawn as code owners May 21, 2025 08:52

auto-assign bot assigned jiji-hoon96 May 21, 2025

noahluftyang reviewed May 23, 2025

View reviewed changes

jiji-hoon96 added 2 commits May 24, 2025 11:56

fix(typography): migrate to Vanilla Extract

31e6e03

- 코드 리뷰 반영 - recipe 제거 - typography.tsx 파일 리팩토링

fix(typography): migrate to Vanilla Extract

e886b8e

- vanilla-extract dynamic 설치 - 코드 리뷰 반영

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

refactor(typography): apply vanilla-extract #162

refactor(typography): apply vanilla-extract #162

Uh oh!

jiji-hoon96 commented May 21, 2025 •

edited

Loading

Uh oh!

changeset-bot bot commented May 21, 2025 •

edited

Loading

Uh oh!

coderabbitai bot commented May 21, 2025

Review skipped

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (`.coderabbit.yaml`)

Documentation and Community

Uh oh!

codecov bot commented May 21, 2025 •

edited

Loading

Uh oh!

noahluftyang May 23, 2025

Uh oh!

noahluftyang May 23, 2025

Uh oh!

jiji-hoon96 May 24, 2025

Uh oh!

noahluftyang May 23, 2025

Uh oh!

jiji-hoon96 May 24, 2025

Uh oh!

noahluftyang May 23, 2025

Uh oh!

jiji-hoon96 May 24, 2025 •

edited

Loading

Uh oh!

Uh oh!

refactor(typography): apply vanilla-extract #162

Are you sure you want to change the base?

refactor(typography): apply vanilla-extract #162

Uh oh!

Conversation

jiji-hoon96 commented May 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Visuals

Checklist

Additional Discussion Points

Uh oh!

changeset-bot bot commented May 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

coderabbitai bot commented May 21, 2025

Review skipped

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Uh oh!

codecov bot commented May 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

noahluftyang May 23, 2025

Choose a reason for hiding this comment

Uh oh!

noahluftyang May 23, 2025

Choose a reason for hiding this comment

Uh oh!

jiji-hoon96 May 24, 2025

Choose a reason for hiding this comment

Uh oh!

noahluftyang May 23, 2025

Choose a reason for hiding this comment

Uh oh!

jiji-hoon96 May 24, 2025

Choose a reason for hiding this comment

Uh oh!

noahluftyang May 23, 2025

Choose a reason for hiding this comment

Uh oh!

jiji-hoon96 May 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

jiji-hoon96 commented May 21, 2025 •

edited

Loading

changeset-bot bot commented May 21, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)

codecov bot commented May 21, 2025 •

edited

Loading

jiji-hoon96 May 24, 2025 •

edited

Loading