Design-tokens 개편과 라이브러리 새 버전 배포 준비#8
Merged
Conversation
- tokens/data.json 단일 파일을 tokens/{light,dark}/{category}.json로 분할하고 splitAndMerge/deepMerge preprocess를 제거해 SD source 글롭 + override 패턴으로 전환
- light(구 global) 테마 rename 및 build/SD config/postprocess/web·rn export를 light/dark 기준으로 정리, dark 테마에 primaryBtn/text/background/stroke override 채움
- 빌드 직전 leaf 형식과 type 어휘를 검증하는 validate/tokens.ts 가드 추가, README에 새 워크플로우/카테고리 구조/type 등록 절차 정리
- types.ts의 `Web.Global.*` / `Native.Global.*` 토큰 타입 참조를 `Web.Light.*` / `Native.Light.*`로 일괄 갱신 - theme/getters 테스트의 `mode: 'global'`을 `'light'`로 변경
- ThemeProvider의 default `mode = 'global'`을 `'light'`로 변경하고 테스트 단언/Storybook preview 토글·라벨을 light/dark 기준으로 통일 - ThemeProvider stories의 mode 옵션·"Global Theme"/"Global (Outer)" 라벨을 모두 light/Light로 갱신
- `/tokens` 라우트와 `TokensPage.tsx` 추가: Light 테마의 color/typography/spacing/radius/borderWidth/shadow 시각 카탈로그 - Layout 헤더에 Light/Dark 세그먼트 토글 추가 + ThemeProvider mode 상태 관리, 사이드바 nav에 Design Tokens 진입점 추가 - 부수: Tailwind v4 마이그레이션(`@tailwindcss/postcss` 사용, 구 `tailwind.config.js` 제거)
- `tailwindcss` 3.4.3 → 4.2.4 업그레이드, autoprefixer 제거 - `@tailwindcss/postcss` 4.2.4 추가 (v4의 PostCSS 플러그인) - pnpm-lock.yaml 동기화
- src/{postprocess,sd,types,validate}/를 src/lib/로 통합·단순화 (validate 폐기, classifyTokenPath HEAD_REWRITE 룩업, ~1,500줄 순감)
- sepia 테마 추가, baseTheme = themes[0] 통일, tsconfig path/project-reference 정리로 ui-core 쪽 TS 진단 17건 해소
- dist/tokens.json (슬림 평탄 카탈로그, 536 토큰 × 3 테마) 및 dist/AGENTS.md (소비자용 자동 생성) 추가
- 미사용 getter 8개·*Token/*Value 타입 14개·isPlainObject 제거 (~150줄 순감), 다운스트림 re-export 동기화는 별도 변경에서 처리 - AGENTS.md 압축(155→78줄, 한국어), README 사용 예시·캡슐화 명시, AGENTS.consumer.md(소비자용) 신규 - project.json에 dist/AGENTS.md(cp from AGENTS.consumer.md)·dist/tokens.json(cp from design-tokens) 빌드 단계 추가 — 소비자 캡슐화 유지
- rootDir·outDir 미지정으로 references chain typecheck 시 src/에 .d.ts 30개가 emit되던 문제 — `out-tsc`로 격리 (Nx 컨벤션, `.gitignore` 포함) - tsBuildInfoFile도 out-tsc로 이동, exclude에 out-tsc 추가 - design-tokens project reference 명시로 composite chain 정합성 확보
- ui-core 캡슐화 완성 — rollup external에서 ui-core/design-tokens 제거(JS inline), package.json deps→devDeps 이동, src/index.ts에 토큰/테마/유틸 패스스루 re-export 추가 - AI 친화 layer — `AGENTS.consumer.md` 신규(소비자용 98줄), `AGENTS.md` 영어→한국어 압축(139→65줄), dist에 AGENTS·tokens.json cp 단계 추가, README ui-core 표현 제거 - nx build pipeline 명시(build/bundle-js/build-types) + loose d.ts cleanup, useTheme의 `.js` suffix import 제거
- ui-core 캡슐화 완성 — rollup external에서 ui-core 제거(JS inline), package.json deps→devDeps, src/index.ts 패스스루 re-export, exports에 `./tailwind` 경로 추가, dist README 누출 차단(assets input 경로 한정) - AI 친화 layer — `AGENTS.consumer.md` 신규(110줄), `AGENTS.md` 영어→한국어 압축(227→81줄), dist에 AGENTS·tokens.json·tailwind cp, README 재구성 - 빌드/구조 — rollup babel→swc(`.swcrc`), build-types를 dts-bundle-generator로 교체, `src/styles.ts`로 SCSS aggregator 추출(컴포넌트별 `import './*.scss'` 제거), dead 타입 3개 제거, `FormControlContext`에 `/*#__PURE__*/` 어노테이션
- 기본 Nx 시작화면(555줄) → `ThemeProvider`/`useTheme`/`getColor`/`themes`/`Box`를 활용한 디자인 토큰·테마 데모(240줄)로 전면 재작성 - `@berrypjh/react-native-ui` workspace 의존 추가, tsconfig.app.json에 project reference 등록 (composite chain) - ThemeToggle/ColorScale/SemanticColors 섹션으로 라이트·다크·세피아 테마 전환·토큰 시각화
- Tailwind v4 도입 — `tailwind.config.js` 신규(`@berrypjh/react-ui/tailwind` preset 사용), `styles.css`에 `@config` directive, `tailwindcss` dep 추가 - 하드코딩 색/spacing/radius → 토큰 클래스(`text-text-default`, `bg-background-surface`, `border-stroke-default`, `bg-primary-pr500`, …) 전환 — light/dark/sepia 자동 적용 - `@berrypjh/design-tokens` dep 삭제(react-ui 캡슐화 효과 적용), `Web` import를 react-ui 경유로 변경, ThemeToggle을 하드코딩 `['light','dark']` → `themes` 배열 동적 렌더(세피아 포함 3종)
- prettier에 md/mdx, yml/yaml overrides 추가하고 최상위 proseWrap 제거 - .prettierignore에서 README.md, tools/template/* 예외 해제해 포맷 대상에 포함 - .vscode/settings.json 추가: 저장 시 Prettier 포맷·ESLint 자동 수정, 검색/파일 감시 제외 동기화
- 모든 토큰 JSON의 value/type → $value/$type 전환, getTokenValue 헬퍼 추가 - 자체 fontWeightTransform/Npx 강제 변환 제거 (sd-transforms 처리), RN_NUMERIC_TYPES를 DTCG 타입명으로 정리 - HEAD_REWRITE에서 plural alias 정리, AGENTS/README에 DTCG 표기 반영
- Native as unknown as Record<ThemeName, RNTokens> 더블 캐스트 제거, capitalize 키 → ThemeName 매핑 상수(DEFAULT_TOKENS_BY_MODE) 도입 - AGENTS/README의 mode prop·Box prop(p/bg/radius) 표기 정정 - AGENTS의 Native 산출물 설명을 실제 transform 결과에 맞게 갱신 (spacing/radius/typography/shadow leaf 등)
- MenuItem.tsx: 사용처 없는 menuItemClasses export 제거, <Select> 슬롯 마커 역할을 docstring으로 명시 - AGENTS/README의 ThemeProvider mode prop·Button variant="contained"·<div data-theme> 적용 위치 정정
- path.ts의 LeafDotPath에서 { value, type } leaf 분기 제거 (TS 토큰은 이제 leaf=primitive)
- types.ts: 다중 테마 tokens 호환을 위해 RNTokens를 WidenLiterals<Native.Light.Tokens>로 도입 (as const literal을 widen)
- getToken/theme 테스트를 평탄 토큰 구조로 갱신, theme.ts의 Theme import를 import type로 정리
- nx.json projectsRelationship을 fixed로 바꾸고 release/changelog의 commit·tag 흐름 정리 - package.json의 build:tokens 등 토큰 스크립트를 tokens:* 네임스페이스로 통일, size/treeshake 추가 - CI에 typecheck·size 워크플로 추가, chromatic/release pnpm cache·husky hooks 정리 BREAKING CHANGE: nx release가 fixed projectsRelationship으로 전환되어 모든 패키지가 같은 버전으로 함께 publish됨. npm scripts: `build:tokens` → `tokens:build`, 신규 `tokens:gen` / `tokens:watch` / `tokens:clean` 추가. CI에서 `pnpm build:tokens`를 호출하던 곳은 `pnpm tokens:build`로 교체 필요.
- expo export 기반 build 타깃 정의를 위한 nx project 설정 추가
- nx 프로젝트 그래프가 자동 추론하므로 명시적 implicitDependencies 불필요
- styles.ts를 sideEffects에 등록해 컴포넌트 import 시 SCSS가 자동 포함되도록 함 - storybook preview에서도 같은 entry를 사용해 dev/배포 환경이 일치 BREAKING CHANGE: 라이브러리 정식 배포 준비로 스타일 진입점이 확정됨. 컴포넌트만 import해도 SCSS 묶음이 자동 번들되며, 기존 styles 별도 import 호출은 제거 가능.
- tools/scripts/measure-tokens/: design-tokens·ui-core·react-ui·react-native-ui 패키지에 대해 OpenAI tiktoken / Anthropic count_tokens로 시나리오별 input 토큰 수 비교 - tools/scripts/treeshake/: 단일 export만 import한 가짜 entry를 esbuild로 번들링해 트리셰이킹 효과를 byte 단위로 측정
- BREAKING CHANGE footer를 published library scope(libs/*)에 한정하도록 규칙을 좁힘 - commitlint hard limit(title 100자·footer 라인 100자·`!:` 금지·lower-case)을 글자 수 가이드로 추가 - 프로젝트가 허용하는 design, revert type을 type 목록에 보강
- themes registry only 200B → 2.2KB, getColor only 500B → 2.6KB, Box only 2KB → 3.6KB - 원래 한도가 트리셰이킹 가정에 비해 낙관적이었음을 반영해 실측치 기준으로 정정
- tsc --noEmit -p tsconfig.app.json + dependsOn ^build로 typecheck 정의 - @nx/js/typescript 플러그인 자동 추론(composite emit)이 app tsconfig와 호환되지 않아 TS5069 발생하던 문제 해소
- tsc --noEmit -p tsconfig.app.json + dependsOn ^build로 react-ui 선행 빌드 후 typecheck - vite 플러그인 자동 추론에는 build-deps 의존이 없어 react-ui declaration 미존재로 TS6305가 발생하던 문제 해소
- tsc --noEmit -p tsconfig.json으로 typecheck 정의 - @nx/js/typescript 자동 추론(tsc --build --emitDeclarationOnly)이 composite 미설정 tsconfig에서 TS5069 발생하던 문제 해소
- light primary를 Tailwind emerald로 교체 (브랜드 #10B981) - dark·sepia는 각 테마 표면에 맞춰 채도·hue 조정한 emerald 변형 override - 흰 텍스트 AA(4.5:1) 충족하도록 text·bg를 700 stops, contrastText를 ne100으로 매핑 - dark focusRipple/stroke 충돌 해소, sepia text 700 stops 명시
- styles.ts에 button-base/input-base를 다른 컴포넌트 SCSS보다 먼저 로드 - BubbleButton 사각형/색 변경 등 cascade 역전 회귀 해소 - tsconfig.lib.json에 outDir/tsBuildInfoFile 추가, src 오염 없이 composite declaration 생성 - button-base.scss secondary/error solid-bg를 700 stops로 이동(흰 텍스트 AA) - storybook preview에 sepia 테마 옵션 추가
- pr-check.yml에 a11y job 신설 — build-storybook 후 test-storybook으로 axe 실행 - @storybook/test-runner / axe-playwright / wait-on / concurrently / http-server dev 의존 추가 - pnpm storybook:a11y 스크립트 + @swc/core override(test-runner의 es2023 변환 호환)
- text.secondary se600(#9F6A22) → se700(#865A1D) - Storybook 캔버스 배경 ne100(#F2F4F7) 위 contrast 4.19:1 → 5.46:1 ✓ AA
…disable - .storybook/test-runner.ts 신설 — axe-playwright 통합, parameters.a11y.disable 존중 - ButtonBase는 a11y 검사 활성, 나머지 14개 stories meta에 baseline disable + TODO 주석 추가 - A11y smoke-test 변형 stories 8개도 disable로 일괄 baseline 처리 — 후속 PR로 점진 수정
- targetDefaults.typecheck.dependsOn에 ^typecheck 추가 — upstream lib의 out-tsc declaration 사전 생성 - build-storybook targetDefault 신설(dependsOn ^build) — preview가 ui-core dist css를 참조하므로 lib 빌드 선행 필요
- upstream lib의 out-tsc declaration이 사전 생성되도록 ^typecheck 추가 - composite project reference의 TS6305 회귀 방지
- upstream react-ui의 out-tsc declaration이 사전 생성되도록 ^typecheck 추가 - composite project reference의 TS6305 회귀 방지
- typecheck 명령을 tsc -p tsconfig.lib.json(--noEmit 제거)으로 교체 - 이전 tsconfig.types.json --noEmit이라 downstream(demo-web)이 out-tsc declaration을 못 찾아 TS6305 발생 - outputs에 out-tsc 명시해 nx 캐시 정합성 확보
- typecheck 명령을 tsc -p tsconfig.lib.json(--noEmit 제거)으로 교체 - 이전 --noEmit이라 downstream(react-ui)이 ui-core의 out-tsc declaration을 못 찾아 TS6305 발생 - outputs에 out-tsc 명시해 nx 캐시 정합성 확보
- andresz1/size-limit-action 제거 — npx로 size-limit을 호출하면서 pnpm 워크스페이스의 preset을 못 찾아 fail - pnpm install → build:libs → pnpm run size 명시 step으로 변경, 다른 job들과 동일 패턴 적용
- @nx/js 자동 추론 typecheck(tsc --build --emitDeclarationOnly)가 .generated/* 생성 전 실행돼 TS2307 발생하던 문제 해소 - typecheck를 noop으로 정의해 항상 build:tokens → build:ts 순서로 declaration이 생성되도록 보장
berrypjh
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
@berrypjh/design-tokens를 DTCG 형식으로 마이그레이션하고 Figma 의존 제거ui-core·react-ui·react-native-ui의 캡슐화/AI 친화 layer 정리, 소비자용 AGENTS·tokens 카탈로그 산출물 추가