@iyulab/modern-app 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# Changelog
+
+## [Unreleased]
+- 
+
+## 0.2.0 (2025-11-12)
+- Initial library version release

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Iyulab, Inc.
+
+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,35 @@
+# Modern App
+
+A modern web application framework by iyulab, built on React and Lit Element.
+
+For complete examples and documentation, visit our demo site: [https://modern-app.iyulab.com](https://modern-app.iyulab.com)
+
+## Installation
+
+```bash
+npm install @iyulab/modern-app
+```
+
+## Quick Start
+
+```javascript
+import { app } from '@iyulab/modern-app';
+
+// Load your app configuration
+await app.load({
+  layout: {
+    type: 'sidebar',
+    // layout configuration
+  },
+  routes: [
+    // your routes
+  ],
+  locales: {
+    // locale configuration
+  }
+});
+```
+
+## License
+
+MIT

package/dist/app.d.ts

@@ -0,0 +1,53 @@
+import { Router } from '@iyulab/router';
+import { ThemeType } from '@iyulab/components/dist/utilities/theme.js';
+import { AppConfig } from './types/AppConfigs.js';
+import { DialogOptions, NotificationOptions } from './types/AppOptions.js';
+/**
+ * 애플리케이션 전역 상태 및 설정 관리 클래스
+ */
+declare class App {
+    private static _instance;
+    private _config?;
+    private _router?;
+    private _root?;
+    private constructor();
+    /** 싱글톤 인스턴스 반환 */
+    static get instance(): App;
+    /** 현재 앱 설정 반환 */
+    get config(): AppConfig | undefined;
+    /** 라우터 인스턴스 반환 */
+    get router(): Router | undefined;
+    /** 스타일 테마 반환 */
+    get theme(): ThemeType;
+    /** 스타일 테마 설정 */
+    set theme(value: ThemeType);
+    /** 현재 진행바 설정 */
+    set progress(value: number);
+    /** 앱 로드 및 초기화 */
+    load(config: AppConfig): Promise<void>;
+    /** 앱 언로드 */
+    unload(): void;
+    /** 페이지 이동 */
+    navigate(path: string): void;
+    /** 성공 메시지 */
+    success(message: string, options?: NotificationOptions): Promise<void>;
+    /** 에러 메시지 */
+    error(message: string, options?: NotificationOptions): Promise<void>;
+    /** 경고 메시지 */
+    warning(message: string, options?: NotificationOptions): Promise<void>;
+    /** 정보 메시지 */
+    info(message: string, options?: NotificationOptions): Promise<void>;
+    /** 확인 대화상자 */
+    confirm(message: string, _options?: DialogOptions): Promise<boolean>;
+    /** 레이아웃 생성 */
+    private createLayout;
+    /** 알림 표시 */
+    private notify;
+    /** 화면 크기 변경 핸들러 */
+    private handleWindowResize;
+}
+/**
+ * 전역 어플리케이션 설정 및 관리 인스턴스
+ */
+export declare const app: App;
+export {};

package/dist/app.js

@@ -0,0 +1,111 @@
+import { runInAction as a } from "mobx";
+import u from "i18next";
+import { Router as c } from "@iyulab/router";
+import { notifier as d } from "@iyulab/components/dist/utilities/notifier.js";
+import { theme as r } from "@iyulab/components/dist/utilities/theme.js";
+import { screen as n, progress as h } from "./internals/observers.js";
+class i {
+  // private 생성자로 외부에서 인스턴스 생성 방지
+  constructor() {
+    this.handleWindowResize = (t) => {
+      const e = window.innerWidth, [o, s] = this._config?.layout.breakpoints || [768, 1024];
+      a(() => {
+        e < o ? n.set("small") : e < s ? n.set("medium") : n.set("large");
+      });
+    };
+  }
+  /** 싱글톤 인스턴스 반환 */
+  static get instance() {
+    return i._instance || (i._instance = new i()), i._instance;
+  }
+  /** 현재 앱 설정 반환 */
+  get config() {
+    return this._config;
+  }
+  /** 라우터 인스턴스 반환 */
+  get router() {
+    return this._router;
+  }
+  /** 스타일 테마 반환 */
+  get theme() {
+    const t = r.get();
+    if (!t)
+      throw new Error("No theme is set, cannot get theme.");
+    return t;
+  }
+  /** 스타일 테마 설정 */
+  set theme(t) {
+    r.set(t);
+  }
+  /** 현재 진행바 설정 */
+  set progress(t) {
+    a(() => {
+      h.set(t);
+    });
+  }
+  /** 앱 로드 및 초기화 */
+  async load(t) {
+    if (this.unload(), this._config = t, r.init(t.theme), t.locales) {
+      for (const e of t.locales.plugins || [])
+        u.use(e);
+      await u.init(t.locales);
+    }
+    window.addEventListener("resize", this.handleWindowResize), this.handleWindowResize(new Event("resize")), this._root = await this.createLayout(t.layout), this._router = new c({
+      root: this._root,
+      basepath: t.basepath,
+      routes: t.routes
+    }), console.log("✅ App loaded successfully");
+  }
+  /** 앱 언로드 */
+  unload() {
+    window.removeEventListener("resize", this.handleWindowResize), this._root && (this._root.remove(), this._root = void 0), this._router && (this._router.destroy(), this._router = void 0), this._config && (this._config = void 0);
+  }
+  /** 페이지 이동 */
+  navigate(t) {
+    this._router?.go(t);
+  }
+  /** 성공 메시지 */
+  async success(t, e) {
+    await this.notify("success", t, e);
+  }
+  /** 에러 메시지 */
+  async error(t, e) {
+    await this.notify("error", t, e);
+  }
+  /** 경고 메시지 */
+  async warning(t, e) {
+    await this.notify("warning", t, e);
+  }
+  /** 정보 메시지 */
+  async info(t, e) {
+    await this.notify("info", t, e);
+  }
+  /** 확인 대화상자 */
+  async confirm(t, e) {
+    return window.confirm(t);
+  }
+  /** 레이아웃 생성 */
+  async createLayout(t) {
+    let e = document.body.querySelector("[data-layout]");
+    if (e && document.body.removeChild(e), t.type === "sidebar") {
+      const { SidebarLayout: o } = await import("./layouts/SidebarLayout.js"), s = new o();
+      s.config = t, e = s;
+    } else
+      throw new Error(`Unsupported layout type: ${t.type}`);
+    return e.setAttribute("data-layout", "true"), document.body.appendChild(e), "updateComplete" in e && await e.updateComplete, e;
+  }
+  /** 알림 표시 */
+  async notify(t, e, o) {
+    await d.toast({
+      type: t,
+      content: e,
+      label: o?.title,
+      duration: o?.duration || 3e3,
+      position: o?.position || "top-right"
+    });
+  }
+}
+const _ = i.instance;
+export {
+  _ as app
+};

package/dist/components/ProgressBar.d.ts

@@ -0,0 +1,22 @@
+import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+/**
+ * ProgressBar 컴포넌트는 진행 상태를 시각적으로 표시합니다.
+ * 로딩 상태나 작업 진행률을 표시하는데 사용됩니다.
+ */
+export declare class ProgressBar extends BaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    /** 불확정 상태 (로딩 애니메이션 표시) */
+    indeterminate: boolean;
+    /** 최소값 (기본값: 0) */
+    minValue: number;
+    /** 최대값 (기본값: 100) */
+    maxValue: number;
+    /** 현재값 */
+    value: number;
+    connectedCallback(): void;
+    protected updated(changedProperties: Map<string, unknown>): void;
+    render(): import('lit-html').TemplateResult<1>;
+    /** 진행 상태 업데이트 */
+    private updateProgress;
+}

package/dist/components/ProgressBar.js

@@ -0,0 +1,54 @@
+import { html as h } from "lit";
+import { property as i } from "lit/decorators.js";
+import { BaseElement as n } from "@iyulab/components/dist/components/BaseElement.js";
+import { styles as p } from "./ProgressBar.styles.js";
+var v = Object.defineProperty, a = (u, t, s, o) => {
+  for (var e = void 0, l = u.length - 1, m; l >= 0; l--)
+    (m = u[l]) && (e = m(t, s, e) || e);
+  return e && v(t, s, e), e;
+};
+class r extends n {
+  constructor() {
+    super(...arguments), this.indeterminate = !1, this.minValue = 0, this.maxValue = 100, this.value = 0;
+  }
+  static {
+    this.styles = [super.styles, p];
+  }
+  static {
+    this.dependencies = {};
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.setAttribute("role", "progressbar");
+  }
+  updated(t) {
+    super.updated(t), t.has("value") && (this.updateProgress(t.get("value"), this.value), this.setAttribute("aria-valuenow", this.value.toString())), t.has("minValue") && (this.updateProgress(this.value, this.value), this.setAttribute("aria-valuemax", this.maxValue.toString())), t.has("maxValue") && (this.updateProgress(this.value, this.value), this.setAttribute("aria-valuemin", this.minValue.toString())), t.has("indeterminate") && (this.updateProgress(this.value, this.value), this.indeterminate ? (this.removeAttribute("aria-valuenow"), this.setAttribute("aria-busy", "true")) : this.removeAttribute("aria-busy"));
+  }
+  render() {
+    return h`<slot></slot>`;
+  }
+  /** 진행 상태 업데이트 */
+  updateProgress(t, s) {
+    if (this.indeterminate) return;
+    const e = (Math.min(Math.max(s, this.minValue), this.maxValue) - this.minValue) / (this.maxValue - this.minValue);
+    t < s ? (this.style.transform = `scaleX(${e})`, s >= this.maxValue && setTimeout(() => {
+      this.style.opacity = "0";
+    }, 300)) : (this.style.opacity = "0", this.style.transform = "scaleX(0)", setTimeout(() => {
+      this.style.opacity = "1", this.style.transform = `scaleX(${e})`;
+    }, 300));
+  }
+}
+a([
+  i({ type: Boolean, reflect: !0 })
+], r.prototype, "indeterminate");
+a([
+  i({ type: Number })
+], r.prototype, "minValue");
+a([
+  i({ type: Number })
+], r.prototype, "maxValue");
+a([
+  i({ type: Number })
+], r.prototype, "value");
+export {
+  r as ProgressBar
+};

package/dist/components/ProgressBar.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import('lit').CSSResult;

package/dist/components/ProgressBar.styles.js

@@ -0,0 +1,31 @@
+import { css as t } from "lit";
+const a = t`
+  :host {
+    display: block;
+    position: absolute;
+    z-index: 9999;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background-color: var(--u-blue-600);
+    transform-origin: left;
+    transition: all 0.3s ease-out;
+    box-shadow: 0 2px 4px var(--u-shadow-weak);
+  }
+  :host([indeterminate]) {
+    animation: indeterminate 1.5s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+  }
+
+  @keyframes indeterminate {
+    0% {
+      transform: translateX(-100%);
+    }
+    100% {
+      transform: translateX(100%);
+    }
+  }
+`;
+export {
+  a as styles
+};

package/dist/components/SidebarButton.d.ts

@@ -0,0 +1,29 @@
+import { DirectiveResult } from 'lit/directive.js';
+import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { ExtendedBaseElement } from '../internals/ExtendedBaseElement.js';
+import { StyleMap } from '../types/AppTypes.js';
+/** 버튼 항목 부분 */
+type ElementParts = 'host' | 'base' | 'icon' | 'label';
+/** 버튼 항목 구성 */
+export interface SidebarButtonConfig {
+    type: 'button';
+    icon?: string;
+    label?: string | DirectiveResult;
+    styles?: StyleMap<ElementParts>;
+    onClick?: (event?: Event) => void;
+}
+/**
+ * SidebarButton 컴포넌트는 사이드바 내의 버튼을 표시합니다.
+ */
+export declare class SidebarButton extends ExtendedBaseElement<ElementParts> {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    /** 콤팩트 모드 여부 */
+    compact: boolean;
+    /** 기본 u-icon 경로의 아이콘 이름 */
+    icon?: string;
+    /** 버튼 텍스트 라벨 */
+    label?: string | DirectiveResult;
+    render(): import('lit-html').TemplateResult<1>;
+}
+export {};

package/dist/components/SidebarButton.js

@@ -0,0 +1,50 @@
+import { html as c } from "lit";
+import { property as o } from "lit/decorators.js";
+import { Icon as l } from "@iyulab/components/dist/components/Icon/Icon.js";
+import { ExtendedBaseElement as m } from "../internals/ExtendedBaseElement.js";
+import { styles as u } from "./SidebarButton.styles.js";
+var d = Object.defineProperty, n = (e, p, s, f) => {
+  for (var t = void 0, r = e.length - 1, a; r >= 0; r--)
+    (a = e[r]) && (t = a(p, s, t) || t);
+  return t && d(p, s, t), t;
+};
+class i extends m {
+  constructor() {
+    super(...arguments), this.compact = !1;
+  }
+  static {
+    this.styles = [super.styles, u];
+  }
+  static {
+    this.dependencies = {
+      "u-icon": l
+    };
+  }
+  render() {
+    return c`
+      <button part="base">
+        <u-icon part="icon"
+          ?hidden=${!this.icon}
+          ?remote=${!0}
+          .name=${this.icon}
+        ></u-icon>
+        <span part="label"
+          ?hidden=${this.compact}>
+          ${this.label}
+        </span>
+      </button>
+    `;
+  }
+}
+n([
+  o({ type: Boolean, reflect: !0 })
+], i.prototype, "compact");
+n([
+  o({ type: String })
+], i.prototype, "icon");
+n([
+  o({ type: String })
+], i.prototype, "label");
+export {
+  i as SidebarButton
+};

package/dist/components/SidebarButton.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import('lit').CSSResult;

package/dist/components/SidebarButton.styles.js

@@ -0,0 +1,62 @@
+import { css as o } from "lit";
+const r = o`
+  :host {
+    display: block;
+    width: 100%;
+    padding: 8px 12px;
+    font-size: 14px;
+    color: var(--u-text-color);
+    background: transparent;
+    border: none;
+    border-radius: 8px;
+    transition: all 0.2s ease;
+    cursor: pointer;
+  }
+  :host([comact]) {
+    padding: 8px;
+  }
+  :host([compact]) button {
+    width: 100%;
+    justify-content: center;
+    gap: 0;
+  }
+  :host(:hover) {
+    color: var(--u-text-color-hover);
+    background-color: var(--u-bg-color-hover);
+  }
+  :host(:active) {
+    background-color: var(--u-bg-color-active);
+  }
+
+  button {
+    width: 100%;
+    all: unset;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 12px;
+  }
+  button:focus-visible {
+    outline: 2px solid var(--u-input-border-focus);
+    outline-offset: 2px;
+  }
+  
+  u-icon {
+    font-size: 20px;
+    color: inherit;
+    flex-shrink: 0;
+  }
+
+  span {
+    flex: 1;
+    font-weight: 500;
+    color: inherit;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+`;
+export {
+  r as styles
+};

package/dist/components/SidebarGroup.d.ts

@@ -0,0 +1,35 @@
+import { DirectiveResult } from 'lit/directive.js';
+import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { StyleMap } from '../types/AppTypes.js';
+import { ExtendedBaseElement } from '../internals/ExtendedBaseElement.js';
+import { SidebarLinkConfig } from './SidebarLink.js';
+type ElementParts = 'host' | 'container' | 'base' | 'icon' | 'label' | 'toggler' | 'items';
+/** 그룹: 하위 링크들 묶음 */
+export interface SidebarGroupConfig {
+    type: 'group';
+    /** 기본 접힘 상태 */
+    collapsed?: boolean;
+    icon: string;
+    label: string | DirectiveResult;
+    items: SidebarLinkConfig[];
+    styles?: StyleMap<ElementParts>;
+}
+/**
+ * SidebarGroup 컴포넌트는 네비게이션 그룹 아이템을 표시합니다.
+ */
+export declare class SidebarGroup extends ExtendedBaseElement<ElementParts> {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    /** 콤팩트 모드 여부 */
+    compact: boolean;
+    /** collapsed 상태 */
+    collapsed: boolean;
+    /** 네비게이션 아이템 데이터 */
+    icon?: string;
+    /** 네비게이션 아이템 데이터 */
+    label?: string | DirectiveResult;
+    render(): import('lit-html').TemplateResult<1>;
+    /** 버튼 클릭 핸들러 */
+    private handleButtonClick;
+}
+export {};

package/dist/components/SidebarGroup.js

@@ -0,0 +1,70 @@
+import { html as c } from "lit";
+import { property as o } from "lit/decorators.js";
+import { Icon as d } from "@iyulab/components/dist/components/Icon/Icon.js";
+import { app as m } from "../app.js";
+import { ExtendedBaseElement as u } from "../internals/ExtendedBaseElement.js";
+import { SidebarLink as h } from "./SidebarLink.js";
+import { styles as f } from "./SidebarGroup.styles.js";
+var y = Object.defineProperty, r = (i, n, e, l) => {
+  for (var t = void 0, a = i.length - 1, p; a >= 0; a--)
+    (p = i[a]) && (t = p(n, e, t) || t);
+  return t && y(n, e, t), t;
+};
+class s extends u {
+  constructor() {
+    super(...arguments), this.compact = !1, this.collapsed = !0, this.handleButtonClick = (n) => {
+      if (this.compact) {
+        const e = this.shadowRoot?.querySelector("slot")?.assignedElements({ flatten: !0 }).find((l) => l instanceof h);
+        m.navigate(e?.href || "/");
+      } else
+        this.collapsed = !this.collapsed;
+    };
+  }
+  static {
+    this.styles = [super.styles, f];
+  }
+  static {
+    this.dependencies = {
+      "u-icon": d
+    };
+  }
+  render() {
+    return c`
+      <div class="container" part="container">
+        <button part="base"
+          @click=${this.handleButtonClick}>
+          <u-icon class="icon" part="icon"
+            ?hidden=${!this.icon}
+            ?remote=${!0}
+            .name=${this.icon}
+          ></u-icon>
+          <span class="label" part="label">
+            ${this.label}
+          </span>
+          <u-icon class="toggler" part="toggler"
+            name="chevron-down"
+          ></u-icon>
+        </button>
+        
+        <div class="items" part="items">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+r([
+  o({ type: Boolean, reflect: !0 })
+], s.prototype, "compact");
+r([
+  o({ type: Boolean, reflect: !0 })
+], s.prototype, "collapsed");
+r([
+  o({ type: String })
+], s.prototype, "icon");
+r([
+  o({ type: String })
+], s.prototype, "label");
+export {
+  s as SidebarGroup
+};

package/dist/components/SidebarGroup.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import('lit').CSSResult;