@moda-chart/react 0.1.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 park-taejoon
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,15 @@
+# @moda-chart/react
+
+`@moda-chart/core`의 React 어댑터 — 훅 + 컴포넌트.
+
+```tsx
+import { ChartView, useChartCore } from "@moda-chart/react";
+import "@moda-chart/react/styles.css";
+
+const { chart } = useChartCore({
+  type: "line",
+  series: [{ name: "매출", values: [12, 24, 16] }],
+  categories: ["1월", "2월", "3월"],
+});
+<ChartView chart={chart} />;
+```

package/dist/ChartView.d.ts

@@ -0,0 +1,11 @@
+import type { ChartCore } from "@moda-chart/core";
+export interface ChartViewProps {
+    chart: ChartCore;
+    className?: string;
+}
+/**
+ * React 렌더러 — 코어의 공용 DOM 렌더러(attachChartView)를 호스트 div에
+ * 연결한다. 스냅샷 → DOM 계약(mc-*) 변환과 이벤트 배선은 전부 코어가 한다.
+ */
+export declare function ChartView({ chart, className }: ChartViewProps): import("react").JSX.Element;
+//# sourceMappingURL=ChartView.d.ts.map

package/dist/ChartView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartView.d.ts","sourceRoot":"","sources":["../src/ChartView.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAElD,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,cAAc,+BAI7D"}

package/dist/ChartView.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { attachChartView } from "@moda-chart/core";
+/**
+ * React 렌더러 — 코어의 공용 DOM 렌더러(attachChartView)를 호스트 div에
+ * 연결한다. 스냅샷 → DOM 계약(mc-*) 변환과 이벤트 배선은 전부 코어가 한다.
+ */
+export function ChartView({ chart, className }) {
+    const ref = useRef(null);
+    useEffect(() => attachChartView(ref.current, chart), [chart]);
+    return _jsx("div", { ref: ref, className: className });
+}
+//# sourceMappingURL=ChartView.js.map

package/dist/ChartView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartView.js","sourceRoot":"","sources":["../src/ChartView.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAQnD;;;GAGG;AACH,MAAM,UAAU,SAAS,CAAC,EAAE,KAAK,EAAE,SAAS,EAAkB;IAC5D,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACzC,SAAS,CAAC,GAAG,EAAE,CAAC,eAAe,CAAC,GAAG,CAAC,OAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAC/D,OAAO,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,GAAI,CAAC;AACjD,CAAC"}

package/dist/conformance.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=conformance.test.d.ts.map

package/dist/conformance.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"conformance.test.d.ts","sourceRoot":"","sources":["../src/conformance.test.tsx"],"names":[],"mappings":""}

package/dist/conformance.test.js

@@ -0,0 +1,25 @@
+// @vitest-environment happy-dom
+import { act, createElement } from "react";
+import { createRoot } from "react-dom/client";
+import { runChartConformance } from "@moda-chart/core/conformance";
+import { ChartCore } from "@moda-chart/core";
+import { ChartView } from "./ChartView.js";
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+// React 렌더러 — createRoot + act로 마운트하고, DOM 반영은 act로 flush한다.
+runChartConformance("react", async (opts) => {
+    const el = document.createElement("div");
+    document.body.appendChild(el);
+    const chart = new ChartCore(opts);
+    const root = createRoot(el);
+    await act(() => root.render(createElement(ChartView, { chart })));
+    return {
+        el,
+        chart,
+        flush: () => act(async () => { }),
+        destroy: () => {
+            act(() => root.unmount());
+            el.remove();
+        },
+    };
+});
+//# sourceMappingURL=conformance.test.js.map

package/dist/conformance.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"conformance.test.js","sourceRoot":"","sources":["../src/conformance.test.tsx"],"names":[],"mappings":"AAAA,gCAAgC;AAChC,OAAO,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE1C,UAAsC,CAAC,wBAAwB,GAAG,IAAI,CAAC;AAExE,6DAA6D;AAC7D,mBAAmB,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;IAC1C,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACzC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;IAC9B,MAAM,KAAK,GAAG,IAAI,SAAS,CAAC,IAAI,CAAC,CAAC;IAClC,MAAM,IAAI,GAAG,UAAU,CAAC,EAAE,CAAC,CAAC;IAC5B,MAAM,GAAG,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC;IAClE,OAAO;QACL,EAAE;QACF,KAAK;QACL,KAAK,EAAE,GAAG,EAAE,CAAC,GAAG,CAAC,KAAK,IAAI,EAAE,GAAE,CAAC,CAAC;QAChC,OAAO,EAAE,GAAG,EAAE;YACZ,GAAG,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;YAC1B,EAAE,CAAC,MAAM,EAAE,CAAC;QACd,CAAC;KACF,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export { useChartCore } from "./useChartCore.js";
+export type { UseChartCoreResult } from "./useChartCore.js";
+export { ChartView } from "./ChartView.js";
+export type { ChartViewProps } from "./ChartView.js";
+export type { AnnotationInput, CategoryValue, Chart, ChartCoreOptions, ChartEventHandlers, ChartEventMap, ChartEventType, ChartChordOptions, ChartFlowLink, ChartGaugeOptions, ChartHeatmapOptions, ChartLocale, ChartMapDatum, ChartMapLine, ChartMapOptions, ChartMapPoint, ChartBoxInput, ChartMenuItem, ChartContextMenuOptions, ItemStyle, ItemStyleContext, TooltipRenderContext, ChartDrawingOptions, ChartSearchOptions, ChartPictogramOptions, ChartPyramidPopOptions, ChartState, DrawingInput, DrawingView, DrawTool, SearchLoadArgs, PictoIconView, PictoRowView, SparklineOptions, ChartPointInput, ChartSankeyOptions, ChartSeriesInput, ChartSnapshot, ChartTheme, ChartTreeNode, ChartType, DrilldownLevel, MapProjection, MarkBandInput, MarkLineInput, } from "@moda-chart/core";
+export { ChartCore, mountSparkline, parseDataXml, parseText, sparklineMarkup, WORLD_TOPOLOGY, } from "@moda-chart/core";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,YAAY,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,YAAY,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACrD,YAAY,EACV,eAAe,EACf,aAAa,EACb,KAAK,EACL,gBAAgB,EAChB,kBAAkB,EAClB,aAAa,EACb,cAAc,EACd,iBAAiB,EACjB,aAAa,EACb,iBAAiB,EACjB,mBAAmB,EACnB,WAAW,EACX,aAAa,EACb,YAAY,EACZ,eAAe,EACf,aAAa,EACb,aAAa,EACb,aAAa,EACb,uBAAuB,EACvB,SAAS,EACT,gBAAgB,EAChB,oBAAoB,EACpB,mBAAmB,EACnB,kBAAkB,EAClB,qBAAqB,EACrB,sBAAsB,EACtB,UAAU,EACV,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,cAAc,EACd,aAAa,EACb,YAAY,EACZ,gBAAgB,EAChB,eAAe,EACf,kBAAkB,EAClB,gBAAgB,EAChB,aAAa,EACb,UAAU,EACV,aAAa,EACb,SAAS,EACT,cAAc,EACd,aAAa,EACb,aAAa,EACb,aAAa,GACd,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EACL,SAAS,EACT,cAAc,EACd,YAAY,EACZ,SAAS,EACT,eAAe,EACf,cAAc,GACf,MAAM,kBAAkB,CAAC"}

package/dist/index.js

@@ -0,0 +1,4 @@
+export { useChartCore } from "./useChartCore.js";
+export { ChartView } from "./ChartView.js";
+export { ChartCore, mountSparkline, parseDataXml, parseText, sparklineMarkup, WORLD_TOPOLOGY, } from "@moda-chart/core";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAiD3C,OAAO,EACL,SAAS,EACT,cAAc,EACd,YAAY,EACZ,SAAS,EACT,eAAe,EACf,cAAc,GACf,MAAM,kBAAkB,CAAC"}

package/dist/styles.css

@@ -0,0 +1 @@
+@import "@moda-chart/core/styles.css";

package/dist/useChartCore.d.ts

@@ -0,0 +1,18 @@
+import { ChartCore } from "@moda-chart/core";
+import type { ChartCoreOptions, ChartSnapshot } from "@moda-chart/core";
+export interface UseChartCoreResult {
+    /** 헤드리스 코어 — 액션 호출용 */
+    chart: ChartCore;
+    /** 렌더용 스냅샷 — 변경 시 자동 재렌더 */
+    snapshot: ChartSnapshot;
+}
+/**
+ * React 어댑터 훅 — 코어의 subscribe/getSnapshot을 useSyncExternalStore에
+ * 연결한다. getSnapshot이 같은 참조를 반환하는 코어 규약 덕분에 무한
+ * 리렌더 없이 동작한다.
+ *
+ * options는 최초 1회만 적용된다 — 이후 변경은 chart.setData 같은
+ * 코어 setter로 한다.
+ */
+export declare function useChartCore(options: ChartCoreOptions): UseChartCoreResult;
+//# sourceMappingURL=useChartCore.d.ts.map

package/dist/useChartCore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChartCore.d.ts","sourceRoot":"","sources":["../src/useChartCore.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,KAAK,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAExE,MAAM,WAAW,kBAAkB;IACjC,uBAAuB;IACvB,KAAK,EAAE,SAAS,CAAC;IACjB,4BAA4B;IAC5B,QAAQ,EAAE,aAAa,CAAC;CACzB;AAED;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,OAAO,EAAE,gBAAgB,GAAG,kBAAkB,CAQ1E"}

package/dist/useChartCore.js

@@ -0,0 +1,16 @@
+import { useMemo, useSyncExternalStore } from "react";
+import { ChartCore } from "@moda-chart/core";
+/**
+ * React 어댑터 훅 — 코어의 subscribe/getSnapshot을 useSyncExternalStore에
+ * 연결한다. getSnapshot이 같은 참조를 반환하는 코어 규약 덕분에 무한
+ * 리렌더 없이 동작한다.
+ *
+ * options는 최초 1회만 적용된다 — 이후 변경은 chart.setData 같은
+ * 코어 setter로 한다.
+ */
+export function useChartCore(options) {
+    const chart = useMemo(() => new ChartCore(options), []);
+    const snapshot = useSyncExternalStore((cb) => chart.subscribe(cb), () => chart.getSnapshot(), () => chart.getSnapshot());
+    return { chart, snapshot };
+}
+//# sourceMappingURL=useChartCore.js.map

package/dist/useChartCore.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChartCore.js","sourceRoot":"","sources":["../src/useChartCore.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAU7C;;;;;;;GAOG;AACH,MAAM,UAAU,YAAY,CAAC,OAAyB;IACpD,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,SAAS,CAAC,OAAO,CAAC,EAAE,EAAE,CAAC,CAAC;IACxD,MAAM,QAAQ,GAAG,oBAAoB,CACnC,CAAC,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE,CAAC,EAC3B,GAAG,EAAE,CAAC,KAAK,CAAC,WAAW,EAAE,EACzB,GAAG,EAAE,CAAC,KAAK,CAAC,WAAW,EAAE,CAC1B,CAAC;IACF,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;AAC7B,CAAC"}

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@moda-chart/react",
+  "version": "0.1.2",
+  "description": "React adapter for @moda-chart — useChartCore + ChartView",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "react",
+    "adapter",
+    "headless",
+    "library"
+  ],
+  "dependencies": {
+    "@moda-chart/core": "0.1.2"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
+    "happy-dom": "^20.14.5",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "typescript": "~5.9.2",
+    "vitest": "^3.2.7"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json && cp src/styles.css dist/styles.css",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "dev": "tsc -p tsconfig.json --watch",
+    "test": "vitest run"
+  },
+  "main": "./dist/index.js"
+}