Add `ref` value to alpha javascript token object output & Refactor build scripts #2135

sungik-choi · 2024-04-03T13:51:25Z

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

Add v2 design tokens #2125

Summary

알파 버전의 디자인 토큰(js)에 ref 값을 추가합니다. resolve가 완료된(value) 값 외에도 어떤 값을 참조했는지 알 수 있도록 하기 위해서입니다. Stable 버전에는 영향을 주지 않도록 알파 버전의 디자인 토큰에만 적용했습니다.
- 이 참조값은 이후 스토리북을 만들 때 활용할 예정입니다.
토큰 빌드 스크립트를 개선합니다. 패키지 스크립트가 아니라 하나의 빌드 스크립트에서 merge css, js index 빌드 동작을 모두 수행하도록 변경했으며, 성능 향상을 위해 가능한 경우 로직을 비동기로 변경했습니다.

Details

Breaking change? (Yes/No)

No

References

https://amzn.github.io/style-dictionary/#/formats?id=custom-format-with-output-references : 링크를 참고하여 포매터 구현

changeset-bot · 2024-04-03T13:51:30Z

🦋 Changeset detected

Latest commit: 8ebed4f

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

This PR includes changesets to release 3 packages

Name	Type
@channel.io/bezier-tokens	Minor
@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

codecov · 2024-04-03T13:57:33Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 86.63%. Comparing base (86682b0) to head (8ebed4f).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #2135   +/-   ##
=======================================
  Coverage   86.63%   86.63%           
=======================================
  Files         126      126           
  Lines        2656     2656           
  Branches      778      791   +13     
=======================================
  Hits         2301     2301           
+ Misses        350      326   -24     
- Partials        5       29   +24

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

…custom javascript format

github-actions · 2024-04-03T14:30:03Z

Chromatic Report

🚀 Congratulations! Your build was successful!

sungik-choi · 2024-04-04T07:53:35Z

packages/bezier-tokens/package.json

+  "typesVersions": {
+    "*": {
+      "alpha": [
+        "./dist/types/alpha/cjs/index.d.ts"
+      ]
+    }
+  },


typescript moduleResolution node 인 경우, exports 필드를 제대로 참조하지 못해서 추가하였습니다. (bezier-react와 마찬가지)

sungik-choi · 2024-04-04T07:55:05Z

packages/bezier-tokens/scripts/build-js-index.ts

.mts -> .ts 변경 : 빌드 스크립트를 패키지 스크립트가 아닌 build-tokens.ts 내부에서 수행하도록 변경하면서, 모듈 시스템을 CJS로 맞추기 위해 변경했습니다. 여기서 chalk 패키지를 사용하게 되면, 모듈 시스템 통일에 문제가 생겨서 다시 제거했습니다. (크게 중요치 않다고 판단함)

동기에서 비동기로 로직 변경

모듈 시스템을 ESM이 아닌 CJS로 맞추는 이유가 무엇인지 궁금합니다

CJS로 맞춘다기보다는 초기에 패키지를 설정할 때 CJS로 맞춰져있었기에 그렇습니다. type="module" 을 추가하여 패키지 전체를 ESM으로 변경할 수도 있는데, 빌드 과정에서 확장자 변경 등 추가적인 공수가 들어가요. 'chalk 패키지를 추가하기 위해서' 이 공수를 더 들일 필요는 없다고 생각해서 제거했습니다.

sungik-choi · 2024-04-04T07:55:58Z

packages/bezier-tokens/scripts/build-tokens.ts

@@ -44,6 +71,7 @@ interface DefineConfigOptions {
 }

 function defineConfig({
+  useAlpha = false,


Alpha 버전에만 다른 포매터를 사용하기 위한 플래그

sungik-choi · 2024-04-04T07:56:34Z

packages/bezier-tokens/scripts/lib/format.ts

+            .map((token) => {
+              const ref = (() => {
+                if (!dictionary.usesReference(token.original.value)) {
+                  return null
+                }
+
+                let value = token.value as string | number | null
+
+                // NOTE: make sure to use `token.original.value` because
+                // `token.value` is already resolved at this point.
+                dictionary
+                  .getReferences(token.original.value)
+                  .forEach((ref) => {
+                    value = value
+                      ?.toString()
+                      .replace(ref.value, ref.name) as string
+                  })
+
+                return value
+              })()
+
+              return `    "${token.name}": Object.freeze(${JSON.stringify({ value: token.value, ref })}),`
+            })


기존 JS 커스텀 포맷과 이 부분만 다릅니다.

ref 가 없을 때는 ref: null 로 나오고 있는데 이걸 아예 안나오게 하면 어떨까요?

undefined로 둘 지 null로 둘 지 고민이었는데, 레퍼런스가 없다는 점을 의도적으로 잘 드러내기 위해선 null 쪽이 더 적합하다고 생각했어요. ref 뿐만 아니라 존재하지 않는 다른 key에 접근할 때도 모두 undefined가 나올테니까요

sungik-choi · 2024-04-04T07:57:03Z

packages/bezier-tokens/scripts/merge-css.ts

build-css-index.mts -> merge-css.ts 로 이름 변경. 더 적절한 이름이라고 판단했습니다.

그 외 JS 변경사항과 동일

@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] ### 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/[email protected] ### 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/[email protected] ## [email protected] ### Patch Changes - Updated dependencies - @channel.io/[email protected] Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

sungik-choi added 5 commits April 3, 2024 20:49

build: add typesVersion field to avoid type resolve error

1886b1f

build: add custom json format to output references

6f9b6a9

feat: add merge json script and refactor build script to be async

c6cc561

build: rm chalk to avoid build error

67eeb4a

chore(changeset): add

08977c3

sungik-choi added build Issue or PR related to build system bezier-tokens Issue or PR related to bezier-tokens labels Apr 3, 2024

sungik-choi self-assigned this Apr 3, 2024

sungik-choi changed the title ~~Add json token output & Refactor build scripts~~ Add ref value to alpha javascript token object output & Refactor build scripts Apr 3, 2024

build: remove json custom format and move the removed logic to alpha …

d8f54de

…custom javascript format

sungik-choi force-pushed the feat/token-json branch from 7431cb5 to d8f54de Compare April 3, 2024 14:27

refactor: separate into variable

8ebed4f

sungik-choi marked this pull request as ready for review April 4, 2024 07:52

sungik-choi requested a review from yangwooseong as a code owner April 4, 2024 07:52

sungik-choi commented Apr 4, 2024

View reviewed changes

yangwooseong approved these changes Apr 5, 2024

View reviewed changes

sungik-choi merged commit 3a59268 into channel-io:main Apr 5, 2024
10 checks passed

github-actions bot mentioned this pull request Apr 5, 2024

ci(changesets): version packages #2133

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add `ref` value to alpha javascript token object output & Refactor build scripts #2135

Add `ref` value to alpha javascript token object output & Refactor build scripts #2135

sungik-choi commented Apr 3, 2024 •

edited

Loading

changeset-bot bot commented Apr 3, 2024 •

edited

Loading

codecov bot commented Apr 3, 2024 •

edited

Loading

github-actions bot commented Apr 3, 2024

sungik-choi Apr 4, 2024

sungik-choi Apr 4, 2024

yangwooseong Apr 5, 2024

sungik-choi Apr 5, 2024

sungik-choi Apr 4, 2024

sungik-choi Apr 4, 2024

yangwooseong Apr 5, 2024

sungik-choi Apr 5, 2024

sungik-choi Apr 4, 2024

Add ref value to alpha javascript token object output & Refactor build scripts #2135

Add ref value to alpha javascript token object output & Refactor build scripts #2135

Conversation

sungik-choi commented Apr 3, 2024 • edited Loading

Self Checklist

Related Issue

Summary

Details

Breaking change? (Yes/No)

References

changeset-bot bot commented Apr 3, 2024 • edited Loading

🦋 Changeset detected

codecov bot commented Apr 3, 2024 • edited Loading

Codecov Report

github-actions bot commented Apr 3, 2024

Chromatic Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Add `ref` value to alpha javascript token object output & Refactor build scripts #2135

Add `ref` value to alpha javascript token object output & Refactor build scripts #2135

sungik-choi commented Apr 3, 2024 •

edited

Loading

changeset-bot bot commented Apr 3, 2024 •

edited

Loading

codecov bot commented Apr 3, 2024 •

edited

Loading