[🎨 Design System] Setup design-system package with Storybook by jungcome7 · Pull Request #1885 · chainapsis/keplr-wallet

jungcome7 · 2026-03-17T11:47:26Z

배경

모바일(Flutter)과 웹(React)은 개발 언어, 컴포넌트, 스타일링 방식이 모두 다릅니다. 디자인 시스템을 분리 운영하는 게 낫다고 판단하여, 익스텐션 전용으로 디자인 시스템 패키지를 별도 구성합니다.

packages/design-system/에 두면 extension에 바로 반영할 수 있고, 필요시 다른 웹 프로젝트에서도 사용할 수 있습니다.

이 PR은 패키지 스캐폴딩 + Storybook 설정 + CI만 포함합니다. 컴포넌트/토큰 이동은 후속 작업입니다.

구성

packages/design-system/ — Storybook 10 + Vite 기반 워크스페이스 패키지
.github/workflows/deploy-storybook.yml — packages/design-system/** 변경 시 GitHub Pages 자동배포 + PR 댓글

GitHub Pages 활성화 필요

CI 배포(actions/deploy-pages)가 동작하려면 레포에서 GitHub Pages를 활성화해야 합니다. @piatoss3612 @Thunnini

Settings > Pages > Source > "GitHub Actions" 선택
admin 권한이 필요합니다

로컬 확인

yarn workspace @keplr-wallet/design-system storybook  # localhost:6007

🤖 Generated with Claude Code

vercel · 2026-03-17T11:47:30Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
keplr-wallet-extension	Ready	Preview, Comment	Mar 30, 2026 5:29am

jungcome7 · 2026-03-17T11:59:36Z

@codex review

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 37895c2673

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

chatgpt-codex-connector · 2026-03-17T12:07:09Z

+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4


Skip Pages deployment for fork pull requests

This workflow is triggered by pull_request events but always runs actions/deploy-pages@v4; for PRs from forks, GitHub provides a read-only token, so pages: write is not actually available and this deployment step fails. That makes design-system changes from external contributors reliably produce a failing check even when code is fine. Add a fork guard (for example, only deploy when github.event.pull_request.head.repo.full_name == github.repository) and skip deploy/comment steps for forked PRs.

Useful? React with 👍 / 👎.

We don't accept external contributions at the moment. Will add a fork guard if/when we do.

jungcome7 · 2026-03-27T11:04:21Z

@Thunnini 클로드가 포스푸시하면서,, 엔트리 ts로 바꿔주신 커밋이 덮어졌습니다..🙏🙏
혹시 한번더 올려주실 수 있나요? 🙇 🙇 🙇

사용처가 apps/extension뿐이므로 build 산출물 없이 src/index.ts를 직접 참조하도록 변경. jsx를 react로 맞춰 extension과 타입체크 호환. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

- figma-extract-vars.mjs: Figma Plugin API로 Primitive + Semantic 변수 추출 - sync-typography.mjs: Figma REST API로 텍스트 스타일 추출 - generate-color-ts.mjs: DSColor 통합 객체 (primitive + semantic CSS vars + theme values) 생성 - generate-typography-ts.mjs: dsTypographyTokens 생성 - sync-icons.mjs: Figma에서 아이콘 다운로드 → React 컴포넌트 직접 생성 (SVG 중간 파일 없음) - sync-all.mjs: 4-phase 트랜잭셔널 오케스트레이터 + 생성 후 prettier 자동 실행 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

- DSColor: primitive + semantic CSS variable refs 통합 객체 - darkThemeValues / lightThemeValues: 테마별 CSS variable 실제 값 - Figma "Supernova Design System"에서 자동 생성된 34 solid + 25 alpha + 56 semantic 토큰 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

- dsTypographyTokens: Figma에서 자동 생성된 12 size × 3 weight 토큰 - DSTypography: React 컴포넌트 (size, weight, color, as props) - styled-components 기반, DSColor와 함께 사용 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

- Figma Icons 페이지에서 SVG 다운로드 → React 컴포넌트 직접 변환 - DSIconProps: size, color props (currentColor 기본값) - stroke/fill의 하드코딩된 색상을 color prop으로 자동 교체 - tree-shakeable barrel export Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

- DSThemeProvider: data-ds-theme 속성 + CSS variable 주입 - inject-vars: darkThemeValues/lightThemeValues → CSS stylesheet 생성 - useTheme: 현재 테마 모드 접근 hook - externalMode prop으로 기존 AppThemeProvider와 연동 가능 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

- package.json: sync:tokens 스크립트, styled-components devDep 추가 - tsconfig.json: jsx, module, moduleResolution 설정 (stories 포함) - tsconfig.build.json: 빌드용 (stories 제외) - .eslintrc.json: react-in-jsx-scope off, SVG/MDX ignore - src/index.ts: color + typography + icon + theme barrel export Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Remove styled-components dependency from DSTypography. Use inline style object instead of transient props ($fontSize, etc). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

[🎨 Design System] DS Foundation — tokens, theme, sync scripts

…storybook

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Thunnini · 2026-03-30T05:07:54Z

@codex review

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: b9a33ab081

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

chatgpt-codex-connector · 2026-03-30T05:14:40Z

+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4


Avoid deploying PR builds as production Pages deployments

This job runs on pull_request and calls actions/deploy-pages@v4 without enabling preview deployment, which means the PR artifact is treated as a normal Pages deployment rather than an isolated preview. The github-pages-preview environment name alone does not switch deploy mode, so PR updates can overwrite the live Pages site URL that the repo uses for production docs/storybook. Restrict deployment to non-PR events or wire a true preview flow before posting “preview” links.

Useful? React with 👍 / 👎.

현재는 의도적으로 PR마다 같은 Pages 사이트에 최신 Storybook을 덮어쓰는 구조입니다. 별도 production 버전은 없습니다. preview 배포 분리는 향후 개선 예정이고 티켓이 있습니다.

chatgpt-codex-connector · 2026-03-30T05:14:40Z

+{
+  "name": "@keplr-wallet/design-system",
+  "version": "0.13.17",
+  "main": "src/index.ts",


Publish compiled entrypoints for the new package

The package is configured for public publishing, but main points at src/index.ts and the build script is a no-op, so release publishing will ship raw TypeScript/TSX sources instead of a compiled JS entrypoint. In this repo’s publish flow (lerna publish from-package), that produces an npm package that breaks consumers which do not transpile TS from node_modules. Either mark the package private until it is buildable or emit build artifacts and point main (and types) to them.

Useful? React with 👍 / 👎.

내부 전용 패키지이고 빌드 없이 소스를 직접 참조하는 구조는 의도된 설계입니다. 현재 publish 대상이 아니라 실질적 문제는 없지만 인지하고 있습니다.

Not published to npm — internal monorepo package only. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

This reverts commit 59fde5e.

jungcome7 requested a review from a team as a code owner March 17, 2026 11:47

jungcome7 had a problem deploying to github-pages-preview March 17, 2026 11:47 — with GitHub Actions Failure

vercel Bot deployed to Preview March 17, 2026 11:48 View deployment

jungcome7 self-assigned this Mar 17, 2026

chatgpt-codex-connector Bot reviewed Mar 17, 2026

View reviewed changes

jungcome7 had a problem deploying to github-pages-preview March 18, 2026 03:02 — with GitHub Actions Failure

vercel Bot deployed to Preview March 18, 2026 03:02 View deployment

jungcome7 had a problem deploying to github-pages-preview March 18, 2026 03:13 — with GitHub Actions Failure

vercel Bot deployed to Preview March 18, 2026 03:13 View deployment

jungcome7 had a problem deploying to github-pages-preview March 18, 2026 05:01 — with GitHub Actions Failure

vercel Bot deployed to Preview March 18, 2026 05:01 View deployment

jungcome7 force-pushed the roy/design-system-storybook branch from 1a1145b to c840169 Compare March 18, 2026 05:14

vercel Bot deployed to Preview March 18, 2026 05:14 View deployment

jungcome7 force-pushed the roy/design-system-storybook branch from c840169 to c8dfa04 Compare March 18, 2026 05:33

jungcome7 had a problem deploying to github-pages-preview March 18, 2026 05:33 — with GitHub Actions Failure

vercel Bot deployed to Preview March 18, 2026 05:33 View deployment

jungcome7 force-pushed the roy/design-system-storybook branch from c8dfa04 to 56ee2e3 Compare March 18, 2026 05:36

jungcome7 had a problem deploying to github-pages-preview March 18, 2026 05:36 — with GitHub Actions Failure

vercel Bot deployed to Preview March 18, 2026 05:36 View deployment

jungcome7 force-pushed the roy/design-system-storybook branch from 56ee2e3 to 8544df1 Compare March 18, 2026 05:38

vercel Bot deployed to Preview March 18, 2026 05:38 View deployment

jungcome7 had a problem deploying to github-pages-preview March 18, 2026 05:38 — with GitHub Actions Failure

jungcome7 had a problem deploying to github-pages-preview March 26, 2026 11:20 — with GitHub Actions Failure

vercel Bot deployed to Preview March 26, 2026 11:21 View deployment

jungcome7 force-pushed the roy/design-system-storybook branch from 163249c to 0531ae0 Compare March 26, 2026 11:28

jungcome7 had a problem deploying to github-pages-preview March 26, 2026 11:28 — with GitHub Actions Failure

vercel Bot deployed to Preview March 26, 2026 11:28 View deployment

jungcome7 changed the title ~~chore: setup design-system package with Storybook~~ [DS] chore: setup design-system package with Storybook Mar 26, 2026

Thunnini temporarily deployed to github-pages-preview March 27, 2026 13:15 — with GitHub Actions Inactive

vercel Bot deployed to Preview March 27, 2026 13:15 View deployment

jungcome7 and others added 9 commits March 30, 2026 12:42

chore: translate Korean comments to English

684bd1d

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

refactor(design-system): simplify DSTypography with inline styles

6fa01ad

Remove styled-components dependency from DSTypography. Use inline style object instead of transient props ($fontSize, etc). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Merge pull request #1899 from chainapsis/roy/ds-foundation

a06098a

[🎨 Design System] DS Foundation — tokens, theme, sync scripts

jungcome7 temporarily deployed to github-pages-preview March 30, 2026 03:43 — with GitHub Actions Inactive

vercel Bot deployed to Preview March 30, 2026 03:43 View deployment

jungcome7 and others added 2 commits March 30, 2026 12:56

Merge remote-tracking branch 'origin/develop' into roy/design-system-…

8a12f0f

…storybook

chore: bump design-system version to 0.13.17

b9a33ab

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

jungcome7 temporarily deployed to github-pages-preview March 30, 2026 03:57 — with GitHub Actions Inactive

vercel Bot deployed to Preview March 30, 2026 03:57 View deployment

jungcome7 requested a review from Thunnini March 30, 2026 04:36

chatgpt-codex-connector Bot reviewed Mar 30, 2026

View reviewed changes

chore(design-system): mark package as private

59fde5e

Not published to npm — internal monorepo package only. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

jungcome7 temporarily deployed to github-pages-preview March 30, 2026 05:28 — with GitHub Actions Inactive

vercel Bot deployed to Preview March 30, 2026 05:28 View deployment

Revert "chore(design-system): mark package as private"

580a7b0

This reverts commit 59fde5e.

vercel Bot deployed to Preview March 30, 2026 05:29 View deployment

jungcome7 temporarily deployed to github-pages-preview March 30, 2026 05:30 — with GitHub Actions Inactive

Thunnini approved these changes Mar 30, 2026

View reviewed changes

jungcome7 merged commit 906e910 into develop Mar 30, 2026
13 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[🎨 Design System] Setup design-system package with Storybook#1885

[🎨 Design System] Setup design-system package with Storybook#1885
jungcome7 merged 20 commits intodevelopfrom
roy/design-system-storybook

jungcome7 commented Mar 17, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Mar 17, 2026 •

edited

Loading

Uh oh!

jungcome7 commented Mar 17, 2026

Uh oh!

chatgpt-codex-connector Bot left a comment

Uh oh!

chatgpt-codex-connector Bot Mar 17, 2026

Uh oh!

jungcome7 Mar 26, 2026 •

edited

Loading

Uh oh!

jungcome7 commented Mar 27, 2026 •

edited

Loading

Uh oh!

Thunnini commented Mar 30, 2026

Uh oh!

chatgpt-codex-connector Bot left a comment

Uh oh!

chatgpt-codex-connector Bot Mar 30, 2026

Uh oh!

jungcome7 Mar 30, 2026 •

edited

Loading

Uh oh!

chatgpt-codex-connector Bot Mar 30, 2026

Uh oh!

jungcome7 Mar 30, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

jungcome7 commented Mar 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

배경

구성

GitHub Pages 활성화 필요

로컬 확인

Uh oh!

vercel Bot commented Mar 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jungcome7 commented Mar 17, 2026

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

chatgpt-codex-connector Bot Mar 17, 2026

Choose a reason for hiding this comment

Uh oh!

jungcome7 Mar 26, 2026 • 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!

jungcome7 commented Mar 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Thunnini commented Mar 30, 2026

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

chatgpt-codex-connector Bot Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

jungcome7 Mar 30, 2026 • 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!

chatgpt-codex-connector Bot Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

jungcome7 Mar 30, 2026 • 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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

jungcome7 commented Mar 17, 2026 •

edited

Loading

vercel Bot commented Mar 17, 2026 •

edited

Loading

jungcome7 Mar 26, 2026 •

edited

Loading

jungcome7 commented Mar 27, 2026 •

edited

Loading

jungcome7 Mar 30, 2026 •

edited

Loading

jungcome7 Mar 30, 2026 •

edited

Loading