@iyulab/components 1.3.2 → 1.3.4

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## [1.3.4] - 2026-07-03
+
+### Documentation
+- `README.md`의 `## React` 섹션에 peerDependency 설치 안내(`npm install @iyulab/components @lit/react react`)를 추가. 기존 문서는 래퍼 사용 예제만 있어 `@lit/react`·`react`를 별도 설치해야 한다는 전제가 누락되어 있었고, 예제를 그대로 따라하면 `@lit/react` 미설치로 모듈 해석 오류가 났다. `@iyulab/data-components` README의 `/react` 안내와 형식을 통일.
+
+## [1.3.3] - 2026-07-03
+
+### Fixed
+- `UCheckbox`: 클래스 JSDoc에 `@event change` 태그 누락으로 공식 React 래퍼(`@iyulab/components/react`)의 `UCheckbox` props가 빈 `{}`로 생성되어 `onChange`가 노출되지 않던 결함 수정. 런타임은 `this.relay(e)`로 `change`를 정상 발생시키지만, 래퍼 생성기가 `@event` 태그(또는 `this.fire<T>('name')` 리터럴)로만 이벤트 맵을 도출하므로 태그가 없으면 이벤트가 누락된다. (`USwitch`/`UInput`/`UTextarea`는 태그 보유 — `relay()`를 쓰는 폼 컨트롤 중 `UCheckbox`만 누락되어 있었음.) yesung-oms dogfooding에서 발견.
+
+### Changed
+- `plugins/vite-plugin-react-wrapper.ts`: `@customElement` 컴포넌트가 `this.relay(...)`/`this.dispatchEvent(...)`로 이벤트를 발생시키지만 수집된 이벤트가 0건이면 빌드 시 경고를 출력하도록 개선 — 위 `UCheckbox`류의 "태그 누락으로 이벤트가 조용히 사라지는" 결함 재발 방지. (`this.fire<T>('name')`은 이름이 정적으로 잡히므로 경고 대상이 아님.)
+
 ## [1.3.2] - 2026-07-02
 
 ### Documentation

package/README.md

@@ -25,6 +25,12 @@ import '@iyulab/components/u-input';
 
 React 프로젝트에서는 `@iyulab/components/react` 서브패스가 모든 컴포넌트를 `forwardRef` 래퍼로 제공합니다. Web Component를 직접 다루지 않고도 JSX props(`color`, `size`, 이벤트 `onXxx` 등)로 사용할 수 있습니다.
 
+`@lit/react`·`react`는 peerDependency이므로 소비 앱에 함께 설치해야 합니다.
+
+```bash
+npm install @iyulab/components @lit/react react
+```
+
 ```tsx
 import { UButton, UInput } from '@iyulab/components/react';
 
@@ -100,6 +106,7 @@ Theme.set('system');
 | [docs/theming.md](./docs/theming.md) | 테마 및 CSS 변수 |
 | [docs/form-controls.md](./docs/form-controls.md) | 폼 연동 및 검증 API |
 | [docs/icons.md](./docs/icons.md) | 아이콘 등록 및 사용 |
+| [docs/native-event.md](./docs/native-event.md) | 컴포넌트가 다루는 네이티브 DOM 이벤트 목록 |
 
 ## License
 

package/dist/components/checkbox/UCheckbox.d.ts

@@ -16,6 +16,8 @@ export type CheckboxColor = "blue" | "green" | "red" | "orange" | "teal" | "cyan
  * @cssprop --checkbox-color - 체크 표시 색상 (outline variant)
  * @cssprop --checkbox-border-color - 체크박스 테두리 색상
  * @cssprop --checkbox-background-color - 체크박스 배경색 (filled variant)
+ *
+ * @event change - 체크 상태 변경 시 발생
  */
 export declare class UCheckbox extends UFormControlElement<string> {
     static styles: import('lit').CSSResultGroup[];

package/dist/react/UCheckbox.d.ts

@@ -3,6 +3,7 @@ import { UCheckbox as UCheckboxElement } from '../components/checkbox/UCheckbox'
 
 export declare const UCheckbox: React.ForwardRefExoticComponent<
   Partial<UCheckboxElement> & React.HTMLAttributes<UCheckboxElement> & {
+  onChange?: (event: CustomEvent) => void;
   }
 >;
 

package/dist/react/UCheckbox.js

@@ -6,5 +6,7 @@ export const UCheckbox = createComponent({
   react: React,
   tagName: 'u-checkbox',
   elementClass: UCheckboxElement,
-  events: {},
+  events: {
+    onChange: 'change',
+  },
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/components",
   "description": "web-components library based on lit-element made by iyulab",
-  "version": "1.3.2",
+  "version": "1.3.4",
   "keywords": [
     "iyulab",
     "components",

package/plugins/vite-plugin-react-wrapper.js

@@ -63,6 +63,14 @@ function parseComponent(filePath) {
     if (!classMatch)
         return [];
     const events = collectEvents(content);
+    // 이벤트를 발생시키지만(relay/dispatchEvent) 정적으로 이름을 도출할 수 없는 컴포넌트가
+    // @event 태그도 없으면 events 맵이 빈 채로 생성되어 React 소비자가 이벤트를 구독할 수 없다.
+    // (this.fire<T>('name')은 이름이 문자열 리터럴로 잡히므로 이 경고 대상이 아님)
+    if (events.length === 0 && /this\.(relay|dispatchEvent)\s*\(/.test(content)) {
+        console.warn(`\x1b[33m[react-wrapper]\x1b[0m ${classMatch[1]} (${tagMatch[1]}): ` +
+            `이벤트를 발생시키지만(relay/dispatchEvent) @event 태그가 없어 React 래퍼에 이벤트 prop이 노출되지 않습니다. ` +
+            `클래스 JSDoc에 '@event <name>'을 추가하세요.`);
+    }
     return [{
             className: classMatch[1],
             tagName: tagMatch[1],