@iyulab/data-components 0.3.1 → 0.4.1

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # Changelog
 
+## [0.4.1] - 2026-05-07
+
+### Fixed
+- eslint.config.js에서 제거된 React 플러그인 참조 삭제 (eslint-plugin-react-hooks, eslint-plugin-react-refresh)
+
+## [0.4.0] - 2026-05-07
+
+### BREAKING CHANGES
+- `UDataGrid` 컴포넌트 제거 — DevExtreme 상용 라이선스 의존성 해소
+  - `src/components/data-grid/UDataGrid.tsx`, `UDataGrid.types.ts` 삭제
+  - `src/utilities/devExtremeCssInjection.ts`, `src/styles/devextreme-overrides.css` 삭제
+  - `exports['./data-grid']` 제거
+  - `dependencies`에서 `devextreme`, `devextreme-react`, `react`, `react-dom` 제거
+
+### Migration
+UDataGrid 대체: `@iyulab/flex-table` + `@iyulab/flex-table/odata` 조합 사용
+→ [마이그레이션 가이드](./docs/migrating-from-datagrid.md)
+
+## [0.3.2] - 2026-05-07
+
+### Added
+- `docs/migrating-from-datagrid.md`: UDataGrid(DevExtreme)에서 `@iyulab/flex-table`로 전환하는 마이그레이션 가이드 추가 (yesung-oms 9개 페이지 실증 기반)
+- README에 UDataGrid 대안 섹션 및 마이그레이션 가이드 링크 추가
+- `docs/UDataGrid.md` 상단에 마이그레이션 가이드 링크 추가
+
 ## [0.3.1] - 2026-04-01
 ### Changed
 - 컴포넌트 파일 구조 리팩토링: `.component.ts` 파일을 기존 `.ts`로 병합 (UDataView, USimpleSheet, URichTable)

package/README.md

@@ -6,7 +6,11 @@
 
 - **USimpleSheet** — 엑셀 호환 스프레드시트 입력 컴포넌트 (Lit, compute 자동 계산 지원)
 - **UDataView** — Grid / List / Table 뷰 전환 컴포넌트 (Lit)
-- **UDataGrid** — OData 기반 서버 사이드 데이터 그리드 (React + DevExtreme)
+- **URichTable** — 정렬/필터/편집/페이지네이션 지원 테이블 (Lit)
+
+> **UDataGrid (DevExtreme)는 v0.4.0에서 제거되었습니다.**
+> OData 서버 사이드 그리드가 필요하면 `@iyulab/flex-table`을 사용하세요.
+> → [마이그레이션 가이드](./docs/migrating-from-datagrid.md)
 
 ## Installation
 
@@ -73,26 +77,12 @@ npm install @iyulab/data-components
 ></u-data-view>
 ```
 
-### UDataGrid (React)
-
-```tsx
-import { UDataGrid } from '@iyulab/data-components';
-
-<UDataGrid
-  dataSourceUrl="https://api.example.com/odata/products"
-  keyField="id"
-  columns={[
-    { dataField: 'name',  caption: '상품명' },
-    { dataField: 'price', caption: '가격', dataType: 'number' },
-  ]}
-/>
-```
-
 ## Documentation
 
 - [USimpleSheet](./docs/USimpleSheet.md)
 - [UDataView](./docs/UDataView.md)
-- [UDataGrid](./docs/UDataGrid.md)
+- [URichTable](./docs/URichTable.md)
+- [UDataGrid 마이그레이션 가이드](./docs/migrating-from-datagrid.md)
 
 ## Theming
 

package/dist/_virtual/{_@oxc-project_runtime@0.122.0 → _@oxc-project_runtime@0.127.0}/helpers/decorate.js

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.122.0/helpers/decorate.js
+//#region \0@oxc-project+runtime@0.127.0/helpers/decorate.js
 function __decorate(decorators, target, key, desc) {
 	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);

package/dist/_virtual/{_@oxc-project_runtime@0.122.0 → _@oxc-project_runtime@0.127.0}/helpers/decorateMetadata.js

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.122.0/helpers/decorateMetadata.js
+//#region \0@oxc-project+runtime@0.127.0/helpers/decorateMetadata.js
 function __decorateMetadata(k, v) {
 	if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 }

package/dist/components/data-view/UDataView.js

@@ -1,6 +1,6 @@
 import { styles } from "./UDataView.styles.js";
-import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorateMetadata.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.127.0/helpers/decorateMetadata.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.127.0/helpers/decorate.js";
 import { html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import "@iyulab/components/dist/components/icon/UIcon.js";

package/dist/components/simple-sheet/USimpleSheet.js

@@ -1,5 +1,5 @@
-import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorateMetadata.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.127.0/helpers/decorateMetadata.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.127.0/helpers/decorate.js";
 import { styles } from "./USimpleSheet.styles.js";
 import { html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";

package/dist/components/u-rich-table/URichTable.js

@@ -1,5 +1,5 @@
-import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorateMetadata.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.127.0/helpers/decorateMetadata.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.127.0/helpers/decorate.js";
 import { richTableStyles } from "./styles.js";
 import { parseTSV, toTSV } from "./utils/clipboard.js";
 import { LitElement, html } from "lit";
@@ -578,8 +578,9 @@ var URichTable = class URichTable extends LitElement {
 	_moveFocus(dx, dy) {
 		if (!this.focusedCell) return;
 		const newCol = Math.max(0, Math.min(this.columns.length - 1, this.focusedCell.colIndex + dx));
+		const newRow = Math.max(0, Math.min(this.data.length - 1, this.focusedCell.rowIndex + dy));
 		this.focusedCell = {
-			rowIndex: Math.max(0, Math.min(this.data.length - 1, this.focusedCell.rowIndex + dy)),
+			rowIndex: newRow,
 			colIndex: newCol
 		};
 	}

package/dist/index.d.ts

@@ -1,5 +1,3 @@
-export { UDataGrid } from './components/data-grid/UDataGrid';
-export type { UDataGridColumn, UDataGridProps } from './components/data-grid/UDataGrid.types';
 export * from './components/data-view/UDataView';
 export * from './components/simple-sheet/USimpleSheet';
 export * from './components/u-rich-table/URichTable';

package/dist/index.js

@@ -1,5 +1,4 @@
-import { UDataGrid } from "./components/data-grid/UDataGrid.js";
 import { UDataView } from "./components/data-view/UDataView.js";
 import { USimpleSheet } from "./components/simple-sheet/USimpleSheet.js";
 import { URichTable } from "./components/u-rich-table/URichTable.js";
-export { UDataGrid, UDataView, URichTable, USimpleSheet };
+export { UDataView, URichTable, USimpleSheet };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/data-components",
   "description": "iyulab data visualization components",
-  "version": "0.3.1",
+  "version": "0.4.1",
   "keywords": [
     "iyulab",
     "web-components",
@@ -31,13 +31,10 @@
     "./init": "./dist/init.js",
     "./simple-sheet": "./dist/components/simple-sheet/USimpleSheet.js",
     "./data-view": "./dist/components/data-view/UDataView.js",
-    "./data-grid": "./dist/components/data-grid/UDataGrid.js",
     "./u-rich-table": "./dist/components/u-rich-table/URichTable.js"
   },
   "sideEffects": [
     "./dist/utilities/shadowDomProtection.js",
-    "./dist/utilities/devExtremeCssInjection.js",
-    "./dist/components/data-grid/UDataGrid.js",
     "./dist/components/data-view/UDataView.js",
     "./dist/components/simple-sheet/USimpleSheet.js",
     "./dist/components/u-rich-table/URichTable.js",
@@ -48,27 +45,18 @@
     "build": "eslint && vite build"
   },
   "dependencies": {
-    "@iyulab/components": "^1.0.0",
-    "devextreme": "^25.2.5",
-    "devextreme-react": "^25.2.5",
-    "lit": "^3.3.2",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4"
+    "@iyulab/components": "^1.0.4",
+    "lit": "^3.3.2"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.4",
-    "@types/node": "^25.5.0",
-    "@types/react": "^19.2.14",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^6.0.1",
+    "@types/node": "^25.6.0",
     "eslint": "^9.39.4",
-    "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.5.2",
     "glob": "^13.0.6",
-    "globals": "^17.4.0",
+    "globals": "^17.5.0",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.57.2",
-    "vite": "^8.0.3",
+    "typescript-eslint": "^8.58.2",
+    "vite": "^8.0.8",
     "vite-plugin-dts": "^4.5.4"
   }
 }

package/dist/components/data-grid/UDataGrid.d.ts

@@ -1,2 +0,0 @@
-import { UDataGridProps } from './UDataGrid.types.js';
-export declare function UDataGrid({ dataSourceUrl, keyField, selectFields, columns, pageSize, showBorders, allowColumnReordering, allowColumnResizing, showGroupPanel, showSearchPanel, showFilterRow, showHeaderFilter, allowExport, exportFileName, isDevelopment, onDataLoaded, onDataLoadError, onExporting, onRowClick, beforeSend }: UDataGridProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/data-grid/UDataGrid.js

@@ -1,146 +0,0 @@
-import { useMemo } from "react";
-import "devextreme/data/odata/store";
-import DataGrid, { Column, ColumnChooser, Export, FilterRow, GroupPanel, Grouping, HeaderFilter, Item, LoadPanel, Paging, SearchPanel, Selection, Toolbar } from "devextreme-react/data-grid";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/data-grid/UDataGrid.tsx
-function UDataGrid({ dataSourceUrl, keyField, selectFields, columns, pageSize = 25, showBorders = true, allowColumnReordering = true, allowColumnResizing = true, showGroupPanel = true, showSearchPanel = true, showFilterRow = true, showHeaderFilter = true, allowExport = true, exportFileName, isDevelopment = false, onDataLoaded, onDataLoadError, onExporting, onRowClick, beforeSend }) {
-	const defaultBeforeSend = (operation, ajaxOptions) => {
-		try {
-			if (!ajaxOptions) {
-				console.warn("ajaxOptions가 undefined입니다");
-				return;
-			}
-			if (!ajaxOptions.headers || typeof ajaxOptions.headers !== "object") ajaxOptions.headers = {};
-			ajaxOptions.headers["Accept"] = "application/json";
-			ajaxOptions.headers["Content-Type"] = "application/json";
-			if (isDevelopment) {
-				ajaxOptions.crossDomain = true;
-				ajaxOptions.headers["Access-Control-Allow-Origin"] = "*";
-			}
-			console.log(`U-DataGrid ${operation} 요청:`, {
-				url: ajaxOptions.url,
-				headers: ajaxOptions.headers,
-				method: ajaxOptions.type || "GET"
-			});
-		} catch (error) {
-			console.error("beforeSend 처리 중 오류:", error);
-		}
-	};
-	const defaultOnLoadError = (error) => {
-		console.error("U-DataGrid 데이터 로딩 오류:", error);
-		let errorMessage = "데이터를 불러오는 중 오류가 발생했습니다.";
-		try {
-			if (error && typeof error === "object") {
-				if (error.status === 404) errorMessage = "API 엔드포인트를 찾을 수 없습니다. 서버가 실행중인지 확인해주세요.";
-				else if (error.status === 0) errorMessage = "CORS 오류 또는 네트워크 연결 문제입니다. 서버 설정을 확인해주세요.";
-				else if (error.status >= 500) errorMessage = "서버 내부 오류입니다. 서버 로그를 확인해주세요.";
-				else if (error.message) errorMessage = error.message;
-				else if (typeof error === "string") errorMessage = error;
-			}
-		} catch (parseError) {
-			console.error("오류 메시지 파싱 중 문제:", parseError);
-		}
-		alert(`${errorMessage}\n\n요청 URL: ${dataSourceUrl}`);
-	};
-	const dataSource = useMemo(() => {
-		return {
-			store: {
-				type: "odata",
-				version: 4,
-				url: dataSourceUrl,
-				key: keyField,
-				beforeSend: beforeSend || defaultBeforeSend,
-				onLoading: () => {
-					console.log("U-DataGrid 데이터 로딩 시작...");
-				},
-				onLoaded: (data) => {
-					console.log("U-DataGrid 데이터 로딩 완료:", data);
-					onDataLoaded?.(data);
-				},
-				onLoadError: onDataLoadError || defaultOnLoadError
-			},
-			select: selectFields
-		};
-	}, [
-		dataSourceUrl,
-		keyField,
-		selectFields,
-		beforeSend,
-		onDataLoaded,
-		onDataLoadError
-	]);
-	const handleExporting = (e) => {
-		if (exportFileName) e.fileName = exportFileName;
-		else e.fileName = `DataGrid_Export_${(/* @__PURE__ */ new Date()).toISOString().slice(0, 10)}`;
-		onExporting?.(e);
-	};
-	return /* @__PURE__ */ jsx("div", {
-		style: {
-			width: "100%",
-			height: "100%",
-			position: "relative",
-			contain: "layout style",
-			isolation: "isolate",
-			overflow: "hidden"
-		},
-		children: /* @__PURE__ */ jsxs(DataGrid, {
-			dataSource,
-			showBorders,
-			allowColumnReordering,
-			allowColumnResizing,
-			columnAutoWidth: false,
-			showColumnLines: true,
-			showRowLines: true,
-			rowAlternationEnabled: true,
-			hoverStateEnabled: true,
-			height: "100%",
-			width: "100%",
-			wordWrapEnabled: true,
-			columnResizingMode: "widget",
-			remoteOperations: true,
-			onExporting: handleExporting,
-			onRowClick,
-			children: [
-				/* @__PURE__ */ jsx(LoadPanel, { enabled: true }),
-				/* @__PURE__ */ jsx(Selection, { mode: "multiple" }),
-				showFilterRow && /* @__PURE__ */ jsx(FilterRow, { visible: true }),
-				showHeaderFilter && /* @__PURE__ */ jsx(HeaderFilter, { visible: true }),
-				showSearchPanel && /* @__PURE__ */ jsx(SearchPanel, {
-					visible: true,
-					placeholder: "검색..."
-				}),
-				/* @__PURE__ */ jsx(Grouping, { autoExpandAll: false }),
-				showGroupPanel && /* @__PURE__ */ jsx(GroupPanel, { visible: true }),
-				/* @__PURE__ */ jsx(ColumnChooser, { enabled: true }),
-				/* @__PURE__ */ jsx(Paging, { defaultPageSize: pageSize }),
-				allowExport && /* @__PURE__ */ jsx(Export, { enabled: true }),
-				/* @__PURE__ */ jsxs(Toolbar, { children: [
-					showGroupPanel && /* @__PURE__ */ jsx(Item, { name: "groupPanel" }),
-					allowExport && /* @__PURE__ */ jsx(Item, { name: "exportButton" }),
-					/* @__PURE__ */ jsx(Item, { name: "columnChooserButton" }),
-					showSearchPanel && /* @__PURE__ */ jsx(Item, { name: "searchPanel" })
-				] }),
-				columns.map((col, index) => /* @__PURE__ */ jsx(Column, {
-					dataField: col.dataField,
-					caption: col.caption,
-					width: col.width,
-					minWidth: col.minWidth,
-					dataType: col.dataType,
-					format: col.format,
-					alignment: col.alignment,
-					fixed: col.fixed,
-					fixedPosition: col.fixedPosition,
-					allowHiding: col.allowHiding,
-					allowSorting: col.allowSorting,
-					allowFiltering: col.allowFiltering,
-					allowGrouping: col.allowGrouping,
-					sortOrder: col.sortOrder,
-					cellRender: col.cellRender,
-					visible: col.visible
-				}, col.dataField || `column-${index}`))
-			]
-		})
-	});
-}
-//#endregion
-export { UDataGrid };

package/dist/components/data-grid/UDataGrid.types.d.ts

@@ -1,42 +0,0 @@
-export interface UDataGridColumn {
-    dataField?: string;
-    caption: string;
-    width?: number;
-    minWidth?: number;
-    dataType?: 'string' | 'number' | 'date' | 'datetime' | 'boolean';
-    format?: string;
-    alignment?: 'left' | 'center' | 'right';
-    fixed?: boolean;
-    fixedPosition?: 'left' | 'right';
-    allowHiding?: boolean;
-    allowSorting?: boolean;
-    allowFiltering?: boolean;
-    allowGrouping?: boolean;
-    sortOrder?: 'asc' | 'desc';
-    cellRender?: (cellData: any) => React.ReactNode;
-    visible?: boolean;
-}
-export interface UDataGridProps {
-    dataSourceUrl: string;
-    keyField: string;
-    selectFields?: string[];
-    columns: UDataGridColumn[];
-    pageSize?: number;
-    showBorders?: boolean;
-    allowColumnReordering?: boolean;
-    allowColumnResizing?: boolean;
-    showGroupPanel?: boolean;
-    showSearchPanel?: boolean;
-    showFilterRow?: boolean;
-    showHeaderFilter?: boolean;
-    allowExport?: boolean;
-    exportFileName?: string;
-    isDevelopment?: boolean;
-    onDataLoaded?: (data: any) => void;
-    onDataLoadError?: (error: any) => void;
-    onExporting?: (e: any) => void;
-    onRowClick?: (e: {
-        data: Record<string, unknown>;
-    }) => void;
-    beforeSend?: (operation: string, ajaxOptions: any) => void;
-}

package/dist/utilities/devExtremeCssInjection.d.ts

@@ -1,23 +0,0 @@
-/**
- * DevExtreme CSS Shadow DOM Injection
- *
- * DevExtreme components render inside Shadow DOM but their CSS is loaded
- * in the Light DOM. Due to Shadow DOM encapsulation, Light DOM CSS doesn't
- * apply to Shadow DOM content.
- *
- * This module:
- * 1. Imports DevExtreme CSS as text (using Vite ?inline query)
- * 2. Creates a CSSStyleSheet from the CSS text
- * 3. Injects the stylesheet into all Shadow DOMs
- * 4. Uses MutationObserver to detect and inject into new Shadow DOMs
- */
-/**
- * Initialize DevExtreme CSS injection
- * Sets up MutationObserver to detect new Shadow DOMs
- */
-export declare function initDevExtremeCssInjection(): void;
-/**
- * Register and inject custom CSS into all Shadow DOMs (existing and future)
- * Sets up automatic injection for new Shadow DOMs via MutationObserver
- */
-export declare function injectCssToShadowDoms(cssText: string): CSSStyleSheet | null;