Add `alpha` token to autocomplete suggestion of `bezier-vscode` #2496

yangwooseong · 2024-11-12T01:34:40Z

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

Enhance bezier-vscode pacakge #2485

Summary

alpha 토큰도 자동완성 추천에 나오도록 합니다.

Details

legacy token, alpha token 별로 { category: { [name]: value } 객체를 assignToTokenMap 함수를 통해 만든 다음에 딥 머지를 했습니다. 이 때 alpha token의 "dimension" category 는 바뀔 예정이라 제외했습니다.

2024-11-12.10.26.31.mov

Breaking change? (Yes/No)

No

References

None

channeltalk · 2024-11-12T01:34:44Z

https://desk.channel.io/#/channels/1/team_chats/groups/1237/6732b0b43687e3cf3096

changeset-bot · 2024-11-12T01:34:44Z

🦋 Changeset detected

Latest commit: 170d739

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

This PR includes changesets to release 1 package

Name	Type
bezier-vscode	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 · 2024-11-12T01:36:03Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 82.27%. Comparing base (d3d0acf) to head (170d739).
Report is 3 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #2496   +/-   ##
=======================================
  Coverage   82.27%   82.27%           
=======================================
  Files         143      143           
  Lines        2979     2979           
  Branches      917      917           
=======================================
  Hits         2451     2451           
  Misses        497      497           
  Partials       31       31

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

sungik-choi · 2024-11-12T02:41:11Z

packages/bezier-vscode/src/server.ts

  'z-index': /z-index:/,
-} satisfies Record<TokenGroup, RegExp>
+} satisfies Record<Exclude<TokenGroup, 'dimension'>, RegExp>


마이너) FIXME 주석 추가해주시면 좋을 거 같습니다

sungik-choi · 2024-11-12T03:11:50Z

packages/bezier-vscode/src/server.ts

+type TokenValue = string | number | Record<string, string | number>
+type TokenMap = Record<string, Record<string, TokenValue>>
+
+const assignToTokenMap = (
+  target: TokenMap,
+  source: TokenMap,
+  fn: Function = (v: TokenMap) => v
+) => {
+  Object.entries(source).forEach(([category, tokenObject]) => {
+    if (target[category] === undefined) {
+      target[category] = {}
+    }
+    Object.entries(tokenObject).forEach(([name, value]) => {
+      target[category][name] = fn(value)
+    })
+  })
 }


Suggested change

type TokenValue = string | number | Record<string, string | number>

type TokenMap = Record<string, Record<string, TokenValue>>

const assignToTokenMap = (

target: TokenMap,

source: TokenMap,

fn: Function = (v: TokenMap) => v

) => {

Object.entries(source).forEach(([category, tokenObject]) => {

if (target[category] === undefined) {

target[category] = {}

}

Object.entries(tokenObject).forEach(([name, value]) => {

target[category][name] = fn(value)

})

})

}

type TokenValue = string | number

type AlphaTokenValue = Record<string, TokenValue>

type TokenMap = Record<string, Record<string, TokenValue | AlphaTokenValue>>

const assignToTokenMap = (

target: TokenMap,

source: TokenMap,

transformValue: (v: TokenValue | AlphaTokenValue) => TokenValue = (v) =>

v as TokenValue

) => {

Object.entries(source).forEach(([category, tokenObject]) => {

if (target[category] === undefined) {

target[category] = {}

}

Object.entries(tokenObject).forEach(([name, value]) => {

target[category][name] = transformValue(value)

})

})

버전 별 토큰에 alias를 적절히 붙이고, 타입 단언을 사용하더라도 의도를 더 드러내는 편이 좋을 거 같습니다!

sungik-choi · 2024-11-12T03:12:07Z

packages/bezier-vscode/src/server.ts

+assignToTokenMap(
+  alphaTokenMap,
+  alphaTokens.lightTheme,
+  (v: Record<string, string>) => v.value
+)
+assignToTokenMap(
+  alphaTokenMap,
+  alphaTokens.global,
+  (v: Record<string, string>) => v.value
+)


Suggested change

assignToTokenMap(

alphaTokenMap,

alphaTokens.lightTheme,

(v: Record<string, string>) => v.value

)

assignToTokenMap(

alphaTokenMap,

alphaTokens.global,

(v: Record<string, string>) => v.value

)

assignToTokenMap(

alphaTokenMap,

alphaTokens.lightTheme,

(v) => (v as AlphaTokenValue).value

)

assignToTokenMap(

alphaTokenMap,

alphaTokens.global,

(v) => (v as AlphaTokenValue).value

)

sungik-choi · 2024-11-12T04:57:46Z

packages/bezier-vscode/src/server.ts

  'z-index': /z-index:/,
-} satisfies Record<TokenGroup, RegExp>
+  // FIXME: dimension token should be supported later


dimension 토큰이 제거될 예정이라, 제거 이후 L94의 Exclude를 제거해도 된다는 식의 주석을 남기면 좋겠다는 코멘트였어요..!

…AlphaTokenValue

@sungik-choi

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/[email protected] ### Patch Changes - Improves the styling of the `ListItem` component based on whether it is interacted with or not. ([#2501](#2501)) by @sungik-choi ## [email protected] ### Minor Changes - Include `alpha` token for autocomplete suggestion. ([#2496](#2496)) by @yangwooseong ### Patch Changes - Fix bug where `bezier-vscode` is not running. ([#2499](#2499)) by @yangwooseong ## [email protected] ### Patch Changes - Updated dependencies - @channel.io/[email protected] Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

yangwooseong added the bezier-vscode Issue or PR related to bezier-vscode label Nov 12, 2024

yangwooseong self-assigned this Nov 12, 2024

yangwooseong requested a review from sungik-choi as a code owner November 12, 2024 01:34

yangwooseong force-pushed the WEB-5305/alpha-token-vscode branch 2 times, most recently from f422800 to eefc967 Compare November 12, 2024 02:51

sungik-choi reviewed Nov 12, 2024

View reviewed changes

sungik-choi approved these changes Nov 12, 2024

View reviewed changes

yangwooseong added 7 commits November 12, 2024 17:19

feat(bezier-vscode): add alpha token to token suggestion

215ee7f

refactor(bezier-vscode): separate assignToTokenMap function

3e45d97

chore(changeset): add

c675a33

refactor(bezier-vscode): use TokenMap type, separate functions

9a0e7f9

chore(bezier-vscode): add FIXME comment

5ea6e00

refactor(bezier-vscode): use type assertion, separate TokenValue and …

66e28cf

…AlphaTokenValue

chore(bezier-vscode): fix comment

170d739

yangwooseong force-pushed the WEB-5305/alpha-token-vscode branch from 2e31afa to 170d739 Compare November 12, 2024 08:19

yangwooseong merged commit 0c92418 into channel-io:main Nov 12, 2024
5 checks passed

ch-builder mentioned this pull request Nov 12, 2024

ci(changesets): version packages #2498

Merged

yangwooseong added the enhancement Issues or PR related to making existing features better label Nov 13, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add `alpha` token to autocomplete suggestion of `bezier-vscode` #2496

Add `alpha` token to autocomplete suggestion of `bezier-vscode` #2496

yangwooseong commented Nov 12, 2024

channeltalk bot commented Nov 12, 2024

changeset-bot bot commented Nov 12, 2024 •

edited

Loading

codecov bot commented Nov 12, 2024 •

edited

Loading

sungik-choi Nov 12, 2024

sungik-choi Nov 12, 2024

sungik-choi Nov 12, 2024

sungik-choi Nov 12, 2024

Add alpha token to autocomplete suggestion of bezier-vscode #2496

Add alpha token to autocomplete suggestion of bezier-vscode #2496

Conversation

yangwooseong commented Nov 12, 2024

Self Checklist

Related Issue

Summary

Details

Breaking change? (Yes/No)

References

channeltalk bot commented Nov 12, 2024

changeset-bot bot commented Nov 12, 2024 • edited Loading

🦋 Changeset detected

codecov bot commented Nov 12, 2024 • edited Loading

Codecov Report

sungik-choi Nov 12, 2024

Choose a reason for hiding this comment

sungik-choi Nov 12, 2024

Choose a reason for hiding this comment

sungik-choi Nov 12, 2024

Choose a reason for hiding this comment

sungik-choi Nov 12, 2024

Choose a reason for hiding this comment

Add `alpha` token to autocomplete suggestion of `bezier-vscode` #2496

Add `alpha` token to autocomplete suggestion of `bezier-vscode` #2496

changeset-bot bot commented Nov 12, 2024 •

edited

Loading

codecov bot commented Nov 12, 2024 •

edited

Loading