add-composites-test-bed

Installation
SKILL.md

Add Composites Test Bed

packages/composites 컴포넌트의 시각적 회귀 diff를 위한 정적 Test Bed 스토리 하나를 대상 *.stories.tsx에 추가한다.

  • 회귀 하네스 필터: story.name이 'Test Bed'로 시작 + title이 'Composites/'로 시작. (packages/composites/__tests__/regressions.test.ts:12) — Test Bed Light, Test Bed Dark 두 스토리 모두 매칭.
  • 컴포넌트당 스토리 2개: TestBed_Light (라이트 모드) + TestBed_Dark (다크 모드). 동일한 회귀 조건 테이블을 두 appearance에서 각각 렌더한다.
  • 테이블 구조: 회귀 조건별 컬럼(현재는 각 variant prop 하나) + 마지막 render 컬럼(조건 적용된 컴포넌트 렌더 결과).
  • 테이블 렌더는 packages/composites/src/utils/regressions.tsx의 Regression.Table 편의 컴포넌트를 재사용한다. conditions(각 조건의 key·label·values·format), render(row + container → 컴포넌트) 2개 prop만 넘기면 카테시안 곱 rows·ColumnGroup·Header·Condition 셀·Render 셀이 자동 생성된다. 세밀한 커스텀이 필요하면 하위 컴파운드(Regression.Root / ColumnGroup / ConditionColumn / RenderColumn / Header / Body / Row / Heading / Condition / Render)를 직접 조립한다. Vapor Table 위에 얹혀 있고, 스타일은 $css로 붙는다.

Steps

1. 대상 컴포넌트 확정

사용자가 지정하지 않았다면 AskUserQuestion으로 묻는다. 대상은 packages/composites/src/components/<kebab-name>/ 하위.

완료: 폴더 경로가 확정되어 있고, 해당 폴더에 <name>.tsx와 <name>.stories.tsx가 존재한다.

2. Default 스토리 확인

Installs
2
GitHub Stars
40
First Seen
8 days ago