저장소에서 개발Working in the repo

준비Setup

저장소 루트에서 bun install을 한 번 실행합니다. 워크스페이스라 packages와 apps의 의존성이 함께 설치됩니다.Run bun install once at the repository root. It is a workspace, so the dependencies of packages and apps install together.

bun install        # 워크스페이스 의존성 설치
bun run tokens     # theme.css와 Flutter 토큰 생성
bun run site       # 문서 사이트 → http://localhost:4321

bun install        # install the workspace dependencies
bun run tokens     # writes theme.css and the Flutter tokens
bun run site       # docs site → http://localhost:4321

• bun run tokens: @horon-ai/tokens를 빌드해 theme.css를 만들고 Flutter 토큰을 생성합니다.bun run tokens: builds @horon-ai/tokens into theme.css and generates the Flutter tokens.
• bun run site: 문서 사이트를 띄웁니다. 주소는 http://localhost:4321입니다.bun run site: starts the docs site at http://localhost:4321.
• bun run build:site: 사이트를 정적 파일로 빌드합니다. bun run deploy:site는 빌드한 뒤 Cloudflare Pages로 올립니다.bun run build:site: builds the site as static files. bun run deploy:site builds and uploads to Cloudflare Pages.

검사Checks

루트 스크립트는 turbo를 거쳐 각 패키지의 같은 이름 스크립트를 실행합니다.The root scripts go through turbo and run each package's script of the same name.

• bun run lint: oxlint입니다. 사이트 패키지는 경고도 실패로 봅니다.bun run lint: oxlint. The site package treats a warning as a failure.
• bun run typecheck: astro check와 tsc입니다. 사이트는 먼저 데모 래퍼를 생성합니다.bun run typecheck: astro check and tsc. The site generates its demo wrappers first.
• bun test: 저장소 루트에서 실행합니다. 진입점 재수출, 카탈로그, 토큰 CSS, i18n을 검사합니다.bun test: runs at the repository root over the entry-point exports, the catalog, the token CSS and i18n.
• bun run build는 각 패키지의 build 스크립트를 돌리고, bun run format은 prettier를 돌립니다.bun run build runs each package's build script, and bun run format runs prettier.

컴포넌트 추가Adding a component

컴포넌트 하나는 다섯 파일을 함께 고칩니다. 어느 하나가 빠지면 테스트가 실패합니다.One component touches five files. Leave one out and a test fails.

• packages/react/src/components/<slug>.tsx: 컴포넌트와 props 타입입니다.packages/react/src/components/<slug>.tsx: the component and its props type.
• packages/react/src/index.ts: ./components/<slug> 재수출 한 줄입니다.packages/react/src/index.ts: one re-export line for ./components/<slug>.
• apps/site/src/data/components.ts: 카탈로그 항목입니다. slug, title, group, description을 채웁니다.apps/site/src/data/components.ts: the catalog entry, with slug, title, group and description.
• apps/site/src/components/demos/<slug>.tsx: 라이브 프리뷰와 사용 코드입니다.apps/site/src/components/demos/<slug>.tsx: the live preview and its usage code.
• apps/site/src/components/thumbnails/<slug>.tsx: 카탈로그의 인덱스 썸네일입니다.apps/site/src/components/thumbnails/<slug>.tsx: the catalog's index thumbnail.
• 데모 래퍼는 apps/site/scripts/generate-demo-wrappers.ts가 만들고 커밋하지 않습니다. dev, build, typecheck가 먼저 실행합니다.apps/site/scripts/generate-demo-wrappers.ts writes the demo wrappers, which are not committed. dev, build and typecheck run it first.

테스트 가드What the tests check

packages/react/test/exports.test.ts는 컴포넌트 파일마다 진입점 재수출이 있는지, 값 내보내기를 이름으로 가져올 수 있는지, 값 이름이 파일 사이에서 겹치지 않는지 봅니다.packages/react/test/exports.test.ts checks that every component file is re-exported from the entry point, that each value export imports by name, and that no value name repeats across files.

apps/site/test/components.test.ts는 컴포넌트마다 데모, 카탈로그 항목, 썸네일이 있는지와 카탈로그에 라이브러리에 없는 항목이 없는지 봅니다.apps/site/test/components.test.ts checks that every component has a demo, a catalog entry and a thumbnail, and that no catalog entry lacks a component.

토큰Tokens

packages/tokens/theme.css는 생성 파일입니다. 손으로 고치지 않고 bun run tokens로 다시 만듭니다. packages/tokens/test/theme-css.test.ts가 커밋된 파일과 생성 결과를 비교합니다.packages/tokens/theme.css is generated. Never edit it by hand; rebuild it with bun run tokens. packages/tokens/test/theme-css.test.ts compares the committed file with a fresh build.