@iyulab/modern-app 0.16.0 → 0.17.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## [0.17.0] - 2026-08-11
+
+### Added
+
+- **`/react` subpath**, wrapping `SidebarLayout` and `Wizard` with `@lit/react`'s
+  `createComponent`. `Wizard` is the only component that dispatches a custom event
+  (`step-change`) — a raw custom element in JSX maps an `onStepChange` prop to a listener
+  for a literal `"StepChange"` DOM event, which `Wizard` never fires, so the event never
+  reaches a consumer without this wrapper. Both components also carry object/array
+  properties (`config`, `steps`) that a raw custom element handles correctly under React 19
+  (which assigns matching properties directly) but not under React 18 (where non-primitive
+  JSX attributes stringify) — the wrapper keeps that working on both. Every component in
+  this package (not just these two) also inherits an object-typed `styles` property from its
+  base class for part-level style overrides; on React 18 that still needs a ref without a
+  wrapper.
+
 ## [0.16.0] - 2026-08-11
 
 ### Changed

package/README.md

@@ -173,6 +173,38 @@ await app.load({
 - `hasPermission` 미지정 시 필터링하지 않는다(모든 항목 표시 — 하위호환).
 - 순수 헬퍼 `filterSidebarItems(items, hasPermission)` 를 직접 재사용할 수도 있다.
 
+## React
+
+A `@lit/react`-based wrapper for `SidebarLayout` and `Wizard` is available under `/react`.
+Every other exported component works as a plain custom element in JSX; these two specifically
+need the wrapper because `Wizard` dispatches a `step-change` custom event (a raw element maps
+`onStepChange` to a literal `"StepChange"` DOM event it never fires) and both carry object/array
+properties that a raw element only handles correctly under React 19.
+
+`@lit/react` and `react` are optional peer dependencies — install them to use this subpath:
+
+```bash
+npm install @iyulab/modern-app @lit/react react
+```
+
+```tsx
+import { SidebarLayout, Wizard, type SidebarItem, type WizardStep } from '@iyulab/modern-app/react';
+
+const main: SidebarItem[] = [{ type: 'link', label: 'Home', href: '/' }];
+const steps: WizardStep[] = [{ id: 'info', label: 'Info' }, { id: 'review', label: 'Review' }];
+
+export function App() {
+  return (
+    <SidebarLayout config={{ type: 'sidebar', title: 'My App', main }}>
+      <Wizard steps={steps} active={0} onStepChange={(e) => console.log(e.detail)}>
+        <section>Info panel</section>
+        <section>Review panel</section>
+      </Wizard>
+    </SidebarLayout>
+  );
+}
+```
+
 ## Documentation
 
 | Guide | Description |

package/dist/components/InfoField.js

@@ -4,7 +4,7 @@ import { StyledElement as n } from "../internals/StyledElement.js";
 import { styles as r } from "./InfoField.styles.js";
 import { html as i } from "lit";
 import { customElement as a, property as o } from "lit/decorators.js";
-import { formatCurrency as s, formatDate as c, formatNumber as l } from "@iyulab/components";
+import { formatCurrency as s, formatDate as c, formatNumber as l } from "@iyulab/components/dist/utilities/format.js";
 //#region src/components/InfoField.ts
 function u(e) {
 	return e === "up" ? "positive" : e === "down" ? "negative" : "neutral";

package/dist/layouts/SidebarLayout.types.d.ts

@@ -6,6 +6,10 @@ import { SidebarGroupConfig } from '../components/SidebarGroup';
 import { SidebarButtonConfig } from '../components/SidebarButton';
 import { SidebarPermissionGuard } from './SidebarPermission';
 export type { SidebarPermissionGuard } from './SidebarPermission';
+export type { SidebarLinkConfig } from '../components/SidebarLink';
+export type { SidebarSectionConfig } from '../components/SidebarSection';
+export type { SidebarGroupConfig } from '../components/SidebarGroup';
+export type { SidebarButtonConfig } from '../components/SidebarButton';
 /** 사이드바 레이아웃 컴포넌트의 요소(part) 타입 */
 export type SidebarParts = 'host' | 'mobile-header' | 'sidebar' | 'sidebar-header' | 'sidebar-main' | 'sidebar-footer' | 'main' | 'progress';
 /** 사이드바 상태 타입 */

package/dist/react.d.ts

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+import { EventName } from '@lit/react';
+import { SidebarLayout as SidebarLayoutElement } from './layouts/SidebarLayout.js';
+import { Wizard as WizardElement, WizardStepChangeDetail } from './components/Wizard.js';
+/**
+ * React wrapper for `<u-sidebar-layout>`. `config` is an `@property({ type: Object })` —
+ * a raw custom element handles that correctly under React 19 (property assignment) but not
+ * React 18 (JSX attributes stringify), so this wrapper keeps `config` working on both.
+ */
+export declare const SidebarLayout: import('@lit/react').ReactWebComponent<SidebarLayoutElement, {}>;
+export type SidebarLayoutProps = React.ComponentProps<typeof SidebarLayout>;
+/**
+ * React wrapper for `<u-wizard>`. `Wizard` dispatches a `step-change` custom event, but a raw
+ * custom element in JSX maps `onStepChange` to a listener for a literal `"StepChange"` DOM
+ * event — one `Wizard` never fires — so the event never reaches a consumer without this
+ * wrapper's `events` mapping. `steps` is also an `@property({ type: Array })`, which the
+ * wrapper keeps working on React 18 the same way it does for `SidebarLayout`'s `config`.
+ */
+export declare const Wizard: import('@lit/react').ReactWebComponent<WizardElement, {
+    onStepChange: EventName<CustomEvent<WizardStepChangeDetail>>;
+}>;
+export type WizardProps = React.ComponentProps<typeof Wizard>;
+export type { SidebarLayoutElement, WizardElement };
+export type { SidebarLayoutConfig, SidebarItem, SidebarLogoConfig, SidebarLinkConfig, SidebarSectionConfig, SidebarGroupConfig, SidebarButtonConfig, SidebarHtmlConfig, } from './layouts/SidebarLayout.types.js';
+export type { WizardStep, WizardStepState, WizardStepChangeDetail } from './components/Wizard.js';

package/dist/react.js

@@ -0,0 +1,18 @@
+import { Wizard as e } from "./components/Wizard.js";
+import { SidebarLayout as t } from "./layouts/SidebarLayout.js";
+import n from "react";
+import { createComponent as r } from "@lit/react";
+//#region src/react.ts
+var i = r({
+	react: n,
+	tagName: "u-sidebar-layout",
+	elementClass: t,
+	events: {}
+}), a = r({
+	react: n,
+	tagName: "u-wizard",
+	elementClass: e,
+	events: { onStepChange: "step-change" }
+});
+//#endregion
+export { i as SidebarLayout, a as Wizard };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/modern-app",
   "description": "web-framework by iyulab based on lit-element",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "keywords": [
     "iyulab",
     "web-framework",
@@ -32,13 +32,19 @@
     "./dist/index.js",
     "./src/index.ts",
     "./dist/layouts/*.js",
-    "./src/layouts/*.ts"
+    "./src/layouts/*.ts",
+    "./dist/react.js",
+    "./src/react.ts"
   ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist/react.js"
+    },
     "./dist/*": {
       "types": "./dist/*.d.ts",
       "import": "./dist/*"
@@ -58,10 +64,27 @@
     "i18next": "^26.3.6",
     "lit": "^3.3.3"
   },
+  "peerDependencies": {
+    "@lit/react": ">=1.0.8",
+    "react": ">=18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@lit/react": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    }
+  },
   "devDependencies": {
+    "@lit/react": "^1.0.8",
     "@types/node": "^26.1.1",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
     "@vitest/browser-playwright": "^4.1.10",
     "happy-dom": "^20.10.6",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
     "typescript": "^5.9.3",
     "vite": "^8.1.4",
     "vite-plugin-dts": "^5.0.3",