v0.1.9: Add Tree components, update React wrapper plugin

Author: iujunhyung

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.1.9 (2025-12-19)
+- Added `Tree`, `TreeItem` components for hierarchical data display
+- Updated React wrapper plugin to support new file structure
+- Removed `CopyButton` component
+- Changed React wrapper output directory to `react-components`
+
 ## 0.1.8 (2025-12-18)
 - **Breaking Change**: Added `U` prefix to all component class names (e.g., `Alert` → `UAlert`)
 - **Breaking Change**: Changed file naming convention
@@ -40,4 +46,4 @@
 - removed `toggle` method from theme utility.
 
 ## 0.1.0 (2025-11-12)
-- Initial library version release
+- Initial library version release

README.md

@@ -2,6 +2,8 @@
 
 Modern web components library built with Lit-Element for building reactive user interfaces.
 
+Visit our [Demo Site](https://components.iyulab.com) to explore all components and their features.
+
 ## Installation
 
 ```bash
@@ -10,19 +12,10 @@ npm install @iyulab/components
 
 ## Usage
 
-### Basic Import
-
 ```js
 import "@iyulab/components";
 ```
 
-## Links
-
-- [GitHub Repository](https://github.com/iyulab/u-components)
-- [NPM Package](https://www.npmjs.com/package/@iyulab/components)
-
-> 📝 **Note**: Demo site is coming soon!
-
 ## Core Dependencies
 
 - [lit](https://www.npmjs.com/package/lit) - Fast web components framework

package.json

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

plugins/vite-plugin-react-wrapper.ts

@@ -115,11 +115,19 @@ function collectComponents(componentsDir: string): ComponentInfo[] {
 
     // 디렉토리인 경우에만 처리
     if (stat.isDirectory()) {
-      const indexPath = join(entryPath, 'index.ts');
+      // U로 시작하는 .ts 파일 찾기 (예: UButton.ts, UTree.ts)
+      const files = readdirSync(entryPath);
+      const componentFile = files.find(f => 
+        f.startsWith('U') && 
+        f.endsWith('.ts') && 
+        !f.includes('.component') && 
+        !f.includes('.styles')
+      );
 
-      if (existsSync(indexPath)) {
-        const content = readFileSync(indexPath, 'utf-8');
-        const componentInfo = parseComponentInfo(content, entry, indexPath);
+      if (componentFile) {
+        const filePath = join(entryPath, componentFile);
+        const content = readFileSync(filePath, 'utf-8');
+        const componentInfo = parseComponentInfo(content, entry, filePath, componentFile);
 
         if (componentInfo) {
           components.push(componentInfo);
@@ -132,32 +140,35 @@ function collectComponents(componentsDir: string): ComponentInfo[] {
 }
 
 /**
- * 컴포넌트 index.ts 파일에서 정보 추출
+ * 컴포넌트 파일에서 정보 추출 (예: UButton.ts)
  */
-function parseComponentInfo(content: string, folderName: string, filePath: string): ComponentInfo | null {
-  // 클래스명 추출 (예: export { Button })
+function parseComponentInfo(content: string, folderName: string, filePath: string, fileName: string): ComponentInfo | null {
+  // 클래스명 추출 (예: export { UButton })
   const exportMatch = content.match(/export\s*\{\s*([^}\s]+)\s*\}/);
   if (!exportMatch) {
     return null;
   }
 
-  const componentName = exportMatch[1]; // Button
-  const reactName = `U${componentName}`; // UButton
+  const componentName = exportMatch[1]; // UButton
+  const reactName = componentName; // UButton (이미 U 접두사가 있음)
 
-  // 태그명 추출 (예: Button.define("u-button"))
+  // 태그명 추출 (예: UButton.define("u-button"))
   const tagMatch = content.match(/\.define\s*\(\s*["']([^"']+)["']/);
   if (!tagMatch) {
     return null;
   }
 
   const tagName = tagMatch[1]; // u-button
 
+  // 파일명에서 확장자 제거 (UButton.ts -> UButton)
+  const fileBaseName = fileName.replace('.ts', '');
+  
   return {
     componentName,
     reactName,
     tagName,
     filePath,
-    relativePath: `components/${folderName}`
+    relativePath: `components/${folderName}/${fileBaseName}`
   };
 }
 
@@ -173,8 +184,8 @@ function generateReactWrapper(
   const files: Array<{ path: string; size: number; gzipSize: number }> = [];
 
   // import 경로 계산 (상대 경로)
-  // dist/integrations/react/UButton.js 에서 dist/components/button/index.js 로 가는 경로
-  const targetPath = resolve(outDir, '..', '..', relativePath, 'index.js');
+  // dist/react-components/UButton.js 에서 dist/components/button/UButton.js 로 가는 경로
+  const targetPath = resolve(outDir, '..', relativePath + '.js');
   let importPath = relative(outDir, targetPath).replace(/\\/g, '/');
 
   // 상대 경로가 ./ 또는 ../로 시작하지 않으면 추가

src/components/copy-button/UCopyButton.component.ts

@@ -36,7 +36,6 @@ export class UTreeItem extends BaseElement {
 
   connectedCallback(): void {
     super.connectedCallback();
-    this.setAttribute('role', 'treeitem');
     this.setAttribute('tabindex', this.disabled ? '-1' : '0');
   }
 
@@ -45,16 +44,8 @@ export class UTreeItem extends BaseElement {
 
     if (changedProperties.has('disabled')) {
       this.setAttribute('tabindex', this.disabled ? '-1' : '0');
-      this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
-    }
-    if (changedProperties.has('expanded')) {
-      this.setAttribute('aria-expanded', this.expanded ? 'true' : 'false');
-    }
-    if (changedProperties.has('selected')) {
-      this.setAttribute('aria-selected', this.selected ? 'true' : 'false');
     }
     if (changedProperties.has('level')) {
-      this.setAttribute('aria-level', String(this.level + 1));
       this.headerEl.style.paddingLeft = `calc(${this.level} * var(--indent-size, 20px))`;
     }
   }
@@ -64,6 +55,7 @@ export class UTreeItem extends BaseElement {
       <div class="header" @click=${this.handleHeaderClick}>
         <u-icon class="expand-icon"
           ?hidden=${this.leaf}
+          lib="internal"
           name=${this.expanded ? 'chevron-down' : 'chevron-right'}
         ></u-icon>
         <slot name="prefix"></slot>

src/components/copy-button/UCopyButton.styles.ts

@@ -17,8 +17,8 @@ export class UTree extends BaseElement {
 
   private selectedItems: Set<UTreeItem> = new Set();
 
-  @queryAssignedElements({ selector: 'u-tree-item' })
-  treeItems!: UTreeItem[];
+  @queryAssignedElements({ flatten: false, selector: 'u-tree-item' })
+  items!: UTreeItem[];
 
   /** 트리가 비활성화 상태인지 여부입니다. */
   @property({ type: Boolean, reflect: true }) disabled: boolean = false;
@@ -29,7 +29,6 @@ export class UTree extends BaseElement {
 
   connectedCallback(): void {
     super.connectedCallback();
-    this.setAttribute('role', 'tree');
     this.addEventListener('u-select', this.handleItemSelect as EventListener);
     this.addEventListener('u-toggle', this.handleItemToggle as EventListener);
   }
@@ -72,12 +71,6 @@ export class UTree extends BaseElement {
     } else {
       this.selectedItems.delete(item);
     }
-
-    this.emit('u-tree-select', { 
-      value: item.value,
-      item: item,
-      selectedItems: Array.from(this.selectedItems)
-    });
   }
 
   /** 트리 항목 확장/축소 이벤트를 처리합니다. */
@@ -86,12 +79,6 @@ export class UTree extends BaseElement {
       e.stopPropagation();
       return;
     }
-
-    const item = e.detail.item as UTreeItem;
-    this.emit('u-tree-toggle', { 
-      expanded: item.expanded,
-      item: item
-    });
   }
 
   /**
@@ -114,7 +101,7 @@ export class UTree extends BaseElement {
   /**
    * 재귀적으로 모든 TreeItem을 가져옵니다.
    */
-  private getAllTreeItems(items: Element[] = this.treeItems): UTreeItem[] {
+  private getAllTreeItems(items: Element[] = this.items): UTreeItem[] {
     let allItems: UTreeItem[] = [];
 
     items.forEach((item) => {

src/components/copy-button/UCopyButton.ts

@@ -1,7 +1,6 @@
 // Components
 export * from './components/alert/UAlert.js';
 export * from './components/button/UButton.js';
-export * from './components/copy-button/UCopyButton.js';
 export * from './components/dialog/UDialog.js';
 export * from './components/divider/UDivider.js';
 export * from './components/drawer/UDrawer.js';