@iyulab/components 0.1.0 → 0.1.2

package/dist/utilities/BrowserStorage.js

@@ -0,0 +1,87 @@
+class BrowserStorage {
+  constructor(options) {
+    if (window === void 0) {
+      throw new Error("BrowserStorage can only be used in a browser environment.");
+    }
+    if (options.type === "cookie" && !("cookieStore" in window)) {
+      throw new Error("Cookies are not supported in this browser.");
+    }
+    this.options = options;
+  }
+  /** 키에 prefix를 붙인 실제 저장 키 */
+  buildKey(key) {
+    return `${this.options.prefix || ""}${key}`;
+  }
+  /**
+   * 값 저장
+   * @param key 키
+   * @param value 문자열 값 (문자열이 아닌 값은 JSON.stringify 권장)
+   */
+  async set(key, value) {
+    key = this.buildKey(key);
+    try {
+      if (this.options.type === "localStorage") {
+        window.localStorage.setItem(key, value);
+      } else if (this.options.type === "cookie") {
+        await window.cookieStore.set({
+          name: key,
+          value,
+          path: this.options.path,
+          domain: this.options.domain,
+          expires: this.options.expires,
+          sameSite: this.options.sameSite,
+          partitioned: this.options.partitioned
+        });
+      } else {
+        throw new Error(`Unsupported storage type`);
+      }
+    } catch (e) {
+      console.error("[BrowserStorage Error: set]", e);
+    }
+  }
+  /**
+   * 값 조회
+   * @param key 키
+   * @returns 값 (없으면 null)
+   */
+  async get(key) {
+    key = this.buildKey(key);
+    try {
+      if (this.options.type === "localStorage") {
+        return window.localStorage.getItem(key);
+      } else if (this.options.type === "cookie") {
+        const item = await window.cookieStore.get({
+          name: key
+        });
+        return item?.value || null;
+      } else {
+        throw new Error(`Unsupported storage type`);
+      }
+    } catch (e) {
+      console.error("[BrowserStorage Error: get]", e);
+      return null;
+    }
+  }
+  /** 
+   * 값 삭제
+   * @param key 키
+   */
+  async remove(key) {
+    key = this.buildKey(key);
+    try {
+      if (this.options.type === "localStorage") {
+        window.localStorage.removeItem(key);
+      } else if (this.options.type === "cookie") {
+        await window.cookieStore.delete({
+          name: key
+        });
+      } else {
+        throw new Error(`Unsupported storage type`);
+      }
+    } catch (e) {
+      console.error("[BrowserStorage Error: remove]", e);
+    }
+  }
+}
+
+export { BrowserStorage };

package/dist/utilities/decorators.js

@@ -1,21 +1,26 @@
-const a = Symbol("propertyMeta");
-function p(e) {
-  return (t, o) => {
-    r(t, o, e);
+const propertyMetaKey = Symbol("propertyMeta");
+function propertyMeta(metadata) {
+  return (target, propertyKey) => {
+    setPropertyMeta(target, propertyKey, metadata);
   };
 }
-function r(e, t, o) {
-  o.name = t, Reflect.defineMetadata(a, o, e, t);
+function setPropertyMeta(target, propertyKey, metadata) {
+  metadata.name = propertyKey;
+  Reflect.defineMetadata(propertyMetaKey, metadata, target, propertyKey);
 }
-function i(e, t) {
+function getPropertyMeta(target, propertyKey) {
   try {
-    return e = e.prototype ? e.prototype : e, t ? Reflect.getMetadata(a, e, t) : (Object.getOwnPropertyNames(e) || []).map((n) => Reflect.getMetadata(a, e, n)).filter((n) => n !== void 0) || [];
+    target = target.prototype ? target.prototype : target;
+    if (propertyKey) {
+      return Reflect.getMetadata(propertyMetaKey, target, propertyKey);
+    } else {
+      const keys = Object.getOwnPropertyNames(target) || [];
+      const metaDataList = keys.map((key) => Reflect.getMetadata(propertyMetaKey, target, key)).filter((meta) => meta !== void 0) || [];
+      return metaDataList;
+    }
   } catch {
-    return;
+    return void 0;
   }
 }
-export {
-  i as getPropertyMeta,
-  p as propertyMeta,
-  r as setPropertyMeta
-};
+
+export { getPropertyMeta, propertyMeta, setPropertyMeta };

package/dist/utilities/index.d.ts

@@ -1,4 +1,4 @@
+export * from './BrowserStorage.js';
 export * from './decorators';
 export * from './notifier.js';
-export * from './storage.js';
 export * from './theme.js';

package/dist/utilities/notifier.js

@@ -1,29 +1,71 @@
-import { Alert as a } from "../components/alert/Alert.js";
-a.define("u-alert");
-const l = {
+import { Alert } from '../components/alert/Alert.js';
+
+Alert.define("u-alert");
+const notifier = {
   container: /* @__PURE__ */ new Map(),
   toasts: /* @__PURE__ */ new Set(),
   /**
    * 토스트 알림을 생성합니다.
    */
-  async toast(t) {
-    const e = new a();
-    e.type = t.type, e.label = t.label, e.content = t.content, this.toasts.add(e);
-    const n = t.position || "top-right", s = o(n);
-    s.appendChild(e), await e.updateComplete, e.show();
-    const i = t.duration && t.duration > 0 ? t.duration : 3e3;
+  async toast(options) {
+    const el = new Alert();
+    el.type = options.type;
+    el.label = options.label;
+    el.content = options.content;
+    this.toasts.add(el);
+    const position = options.position || "top-right";
+    const container = getOrCreateContainer(position);
+    container.appendChild(el);
+    await el.updateComplete;
+    el.show();
+    const duration = options.duration && options.duration > 0 ? options.duration : 3e3;
     setTimeout(async () => {
-      await e.hide(), await new Promise((r) => setTimeout(r, 300)), e.remove(), this.toasts.delete(e), s.hasChildNodes() || (s.remove(), this.container.delete(n));
-    }, i);
+      await el.hide();
+      await new Promise((resolve) => setTimeout(resolve, 300));
+      el.remove();
+      this.toasts.delete(el);
+      if (!container.hasChildNodes()) {
+        container.remove();
+        this.container.delete(position);
+      }
+    }, duration);
   }
 };
-function o(t) {
-  let e = l.container.get(t);
-  if (e) return e;
-  e = document.createElement("div"), e.style.position = "fixed", e.style.zIndex = "9999", e.style.display = "flex", e.style.gap = "10px";
-  const n = [];
-  return t.startsWith("top") ? (e.style.top = "20px", e.style.flexDirection = "column") : t.startsWith("bottom") ? (e.style.bottom = "20px", e.style.flexDirection = "column-reverse") : (e.style.top = "50%", e.style.flexDirection = "column", n.push("translateY(-50%)")), t.endsWith("left") ? (e.style.left = "20px", e.style.alignItems = "flex-start") : t.endsWith("right") ? (e.style.right = "20px", e.style.alignItems = "flex-end") : (e.style.left = "50%", e.style.alignItems = "center", n.unshift("translateX(-50%)")), e.style.transform = n.length ? n.join(" ") : "", document.body.appendChild(e), l.container.set(t, e), e;
+function getOrCreateContainer(position) {
+  let container = notifier.container.get(position);
+  if (container) return container;
+  container = document.createElement("div");
+  container.style.position = "fixed";
+  container.style.zIndex = "9999";
+  container.style.display = "flex";
+  container.style.gap = "10px";
+  const transformParts = [];
+  if (position.startsWith("top")) {
+    container.style.top = "20px";
+    container.style.flexDirection = "column";
+  } else if (position.startsWith("bottom")) {
+    container.style.bottom = "20px";
+    container.style.flexDirection = "column-reverse";
+  } else {
+    container.style.top = "50%";
+    container.style.flexDirection = "column";
+    transformParts.push("translateY(-50%)");
+  }
+  if (position.endsWith("left")) {
+    container.style.left = "20px";
+    container.style.alignItems = "flex-start";
+  } else if (position.endsWith("right")) {
+    container.style.right = "20px";
+    container.style.alignItems = "flex-end";
+  } else {
+    container.style.left = "50%";
+    container.style.alignItems = "center";
+    transformParts.unshift("translateX(-50%)");
+  }
+  container.style.transform = transformParts.length ? transformParts.join(" ") : "";
+  document.body.appendChild(container);
+  notifier.container.set(position, container);
+  return container;
 }
-export {
-  l as notifier
-};
+
+export { notifier };

package/dist/utilities/theme.d.ts

@@ -1,6 +1,6 @@
-import { BrowserStorageOptions } from './storage.js';
+import { BrowserStorageOptions } from './BrowserStorage.js';
 /** iyulab에서 제공하는 스타일 타입입니다. */
-export type ThemeType = 'light' | 'dark' | 'system';
+export type ThemeType = 'system' | 'light' | 'dark';
 /** 테마 초기 설정 옵션 */
 export interface ThemeInitOptions {
     /**
@@ -9,46 +9,58 @@ export interface ThemeInitOptions {
      */
     debug?: boolean;
     /**
-     * 기본 테마 설정
-     * @default 'system'
+     * 내부적으로 제공되는 스타일 시트를 사용할지 여부
+     * @default true
      */
-    default?: ThemeType;
+    useBuiltIn?: boolean;
     /**
-     * 테마 설정 유지 옵션
+     * 테마 설정을 브라우저 스토리지에 영구 저장할지 여부 또는 옵션
      * @default false
      */
-    persist?: false | BrowserStorageOptions;
+    store?: false | BrowserStorageOptions;
     /**
-     * 내부적으로 제공되는 스타일 시트를 자동으로 불러올지 여부
-     * @default true
+     * 기본 테마 설정
+     * @default 'system'
      */
-    useBuiltIn?: boolean;
+    default?: ThemeType;
 }
 /**
- * iyulab에서 제공하는 스타일 시트 및 테마 유틸리티입니다.
+ * Theme 클래스 — 싱글톤 패턴으로 사용합니다.
  */
-export declare const theme: {
-    readonly isInitialized: boolean;
+export declare class Theme {
+    private static _instance;
+    private readonly STORAGE_KEY_DEFAULT;
+    private storage;
+    private _isInitialized;
+    private _isDebugMode;
+    /** private 생성자 — 외부에서 new Theme()를 할 수 없게 함 */
+    private constructor();
+    /** 싱글톤 인스턴스 접근자 */
+    static get instance(): Theme;
+    /** 외부에서 현재 초기화 상태를 확인할 수 있게 getter 제공 */
+    get isInitialized(): boolean;
     /**
-     * 테마 유틸리티를 초기화합니다.
+     * 테마 유틸리티 초기화
      */
-    init(options?: ThemeInitOptions): void;
+    init(options?: ThemeInitOptions): Promise<void>;
     /**
-     * 현재 문서 테마를 가져옵니다.
-     * @returns 현재 테마, 'light', 'dark' 또는 'system' 중 하나입니다.
+     * 현재 문서에 적용된 테마를 가져옵니다.
      */
     get(): ThemeType | undefined;
     /**
-     * 문서 테마를 'light', 'dark' 또는 'system'으로 설정합니다.
-     * @param theme - 설정할 테마, 'light', 'dark' 또는 'system' 중 하나입니다.
-     * @throws 테마가 'light', 'dark' 또는 'system'이 아닌 경우 오류가 발생합니다.
+     * 현재 문서 테마를 설정합니다.
      */
     set(theme: ThemeType): void;
     /**
-     * 문서 테마를 토글합니다.
-     * 현재 테마가 'light'이면 'dark'로, 'dark'이면 'light'로 변경합니다.
-     * system 테마가 설정된 경우, 토글이 불가능하며 경고를 출력합니다.
-     * @return 변경된 테마입니다. system 테마인 경우 변경되지 않습니다.
+     * 시스템 테마 변경을 처리하는 메서드
+     */
+    private handleSystemThemeChanged;
+    /**
+     * 디버그 모드시 로그 출력 함수 (인스턴스 스코프)
      */
-    toggle(): ThemeType;
-};
+    private log;
+}
+/**
+ * 테마 유틸리티 싱글톤 인스턴스입니다.
+ */
+export declare const theme: Theme;

package/dist/utilities/theme.js

@@ -1,47 +1,84 @@
-import * as c from "../assets/styles/dark.css.js";
-import * as g from "../assets/styles/light.css.js";
-import { BrowserStorage as u } from "./storage.js";
-const l = "theme";
-let i = null, m = !1, o = !1;
-const a = {
+import * as dark from '../assets/styles/dark.css.js';
+import * as light from '../assets/styles/light.css.js';
+import { BrowserStorage } from './BrowserStorage.js';
+
+class Theme {
+  /** private 생성자 — 외부에서 new Theme()를 할 수 없게 함 */
+  constructor() {
+    this.STORAGE_KEY_DEFAULT = "theme";
+    this.storage = null;
+    this._isInitialized = false;
+    this._isDebugMode = false;
+    /**
+     * 시스템 테마 변경을 처리하는 메서드
+     */
+    this.handleSystemThemeChanged = (_) => {
+      if (document.documentElement.getAttribute("data-theme") === "system") {
+        const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+        document.documentElement.setAttribute("theme", isDark ? "dark" : "light");
+      }
+    };
+  }
+  /** 싱글톤 인스턴스 접근자 */
+  static get instance() {
+    if (!this._instance) {
+      this._instance = new Theme();
+    }
+    return this._instance;
+  }
+  /** 외부에서 현재 초기화 상태를 확인할 수 있게 getter 제공 */
   get isInitialized() {
-    return m;
-  },
+    return this._isInitialized;
+  }
   /**
-   * 테마 유틸리티를 초기화합니다.
+   * 테마 유틸리티 초기화
    */
-  init(e) {
-    if (o = e?.debug || !1, t("init called", { options: e }), e?.useBuiltIn !== !1) {
-      t("dynamicImport enabled: loading styles via import.meta.glob");
-      const s = Object.entries(/* @__PURE__ */ Object.assign({
-        "../assets/styles/dark.css": c,
-        "../assets/styles/light.css": g
-      }));
-      t(`found ${s.length} style assets`, s.map((r) => r[0]));
-      for (let [r, h] of s) {
-        r = r.split("/").pop() || r;
-        const d = document.createElement("style");
-        if (d.setAttribute("data-path", r), d.textContent = h.default, document.head.querySelector(`style[data-path="${r}"]`)) {
-          t("style already present, skipping", r);
-          return;
+  async init(options) {
+    this._isDebugMode = options?.debug || false;
+    this.log("init called", { options });
+    if (options?.store) {
+      this.log("store option provided, initializing BrowserStorage");
+      this.storage = new BrowserStorage(options.store);
+    }
+    options?.useBuiltIn || true;
+    {
+      this.log("Import enabled: loading styles via internal assets");
+      const assets = Object.entries(/* #__PURE__ */ Object.assign({"../assets/styles/dark.css": dark,"../assets/styles/light.css": light
+
+
+}));
+      this.log(`found ${assets.length} style assets`, assets.map((a) => a[0]));
+      for (let [path, module] of assets) {
+        const fileName = path.split("/").pop() || path;
+        const style = document.createElement("style");
+        style.setAttribute("data-path", fileName);
+        style.textContent = module.default;
+        if (document.head.querySelector(`style[data-path="${fileName}"]`)) {
+          this.log("style already present, skipping", fileName);
+          continue;
         }
-        document.head.appendChild(d), t("appended style to head", r);
+        document.head.appendChild(style);
+        this.log("appended style to head", fileName);
+      }
+    }
+    let theme2 = options?.default || "system";
+    if (this.storage !== null) {
+      const savedTheme = await this.storage.get(this.STORAGE_KEY_DEFAULT);
+      if (savedTheme) {
+        theme2 = savedTheme;
+        this.log("loaded theme from storage", theme2);
       }
     }
-    if (e?.persist !== void 0 && e?.persist !== !1) {
-      t("persist option provided, initializing BrowserStorage", e.persist), i = new u(e.persist);
-      const s = i.get(l);
-      t("retrieved savedTheme from storage", s), s && a.set(s);
-    } else e?.default ? (t(`Applying default theme: ${e.default}`), a.set(e.default)) : (t("No persist option or default theme provided, applying system theme by default"), a.set("system"));
-    m = !0, t("theme initialized", { isInitialized: m });
-  },
+    this.set(theme2);
+    this._isInitialized = true;
+    this.log("theme initialized");
+  }
   /**
-   * 현재 문서 테마를 가져옵니다.
-   * @returns 현재 테마, 'light', 'dark' 또는 'system' 중 하나입니다.
+   * 현재 문서에 적용된 테마를 가져옵니다.
    */
   get() {
-    const e = document.documentElement.getAttribute("data-theme");
-    switch (t("get() called, data-theme attribute =", e), e) {
+    const attr = document.documentElement.getAttribute("data-theme");
+    switch (attr) {
       case "system":
         return "system";
       case "light":
@@ -49,60 +86,48 @@ const a = {
       case "dark":
         return "dark";
       default:
-        return;
+        return void 0;
     }
-  },
+  }
   /**
-   * 문서 테마를 'light', 'dark' 또는 'system'으로 설정합니다.
-   * @param theme - 설정할 테마, 'light', 'dark' 또는 'system' 중 하나입니다.
-   * @throws 테마가 'light', 'dark' 또는 'system'이 아닌 경우 오류가 발생합니다.
+   * 현재 문서 테마를 설정합니다.
    */
-  set(e) {
-    if (t("set() called with", e), typeof window > "u")
-      throw t("set() aborted: not in browser environment"), new Error("setTheme can only be called in a browser environment.");
-    if (e === "system")
-      t("setting theme to system; attaching matchMedia listener"), document.documentElement.setAttribute("data-theme", "system"), window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", n), n(), t("system theme applied (data-theme=system)");
-    else if (e === "dark") {
-      t("setting theme to dark; removing matchMedia listener if present");
-      try {
-        window.matchMedia("(prefers-color-scheme: dark)").removeEventListener("change", n);
-      } catch (s) {
-        t("removeEventListener may have failed or not supported", s);
+  set(theme2) {
+    try {
+      const media = window.matchMedia("(prefers-color-scheme: dark)");
+      if (theme2 === "system") {
+        document.documentElement.setAttribute("data-theme", "system");
+        media.addEventListener("change", this.handleSystemThemeChanged);
+        this.handleSystemThemeChanged();
+        this.log("system theme applied (data-theme=system)");
+      } else if (theme2 === "dark") {
+        media.removeEventListener("change", this.handleSystemThemeChanged);
+        document.documentElement.setAttribute("data-theme", "dark");
+        document.documentElement.setAttribute("theme", "dark");
+        this.log("dark theme applied (data-theme=dark, theme=dark)");
+      } else if (theme2 === "light") {
+        media.removeEventListener("change", this.handleSystemThemeChanged);
+        document.documentElement.setAttribute("data-theme", "light");
+        document.documentElement.setAttribute("theme", "light");
+        this.log("light theme applied (data-theme=light, theme=light)");
+      } else {
+        throw new Error(`Invalid theme: ${theme2}. Use 'light', 'dark', or 'system'.`);
       }
-      document.documentElement.setAttribute("data-theme", "dark"), document.documentElement.setAttribute("theme", "dark"), t("dark theme applied (data-theme=dark, theme=dark)");
-    } else if (e === "light") {
-      t("setting theme to light; removing matchMedia listener if present");
-      try {
-        window.matchMedia("(prefers-color-scheme: dark)").removeEventListener("change", n);
-      } catch (s) {
-        t("removeEventListener may have failed or not supported", s);
-      }
-      document.documentElement.setAttribute("data-theme", "light"), document.documentElement.setAttribute("theme", "light"), t("light theme applied (data-theme=light, theme=light)");
-    } else
-      throw t("set() received invalid theme", e), new Error(`Invalid theme: ${e}. Use 'light', 'dark', or 'system'.`);
-    i && (i.set(l, e), t("persisted theme to storage", e));
-  },
+    } catch (e) {
+      this.log("Error applying theme:", e);
+    }
+    if (this.storage !== null) {
+      this.storage.set(this.STORAGE_KEY_DEFAULT, theme2);
+      this.log("saved theme to storage", theme2);
+    }
+  }
   /**
-   * 문서 테마를 토글합니다.
-   * 현재 테마가 'light'이면 'dark'로, 'dark'이면 'light'로 변경합니다.
-   * system 테마가 설정된 경우, 토글이 불가능하며 경고를 출력합니다.
-   * @return 변경된 테마입니다. system 테마인 경우 변경되지 않습니다.
+   * 디버그 모드시 로그 출력 함수 (인스턴스 스코프)
    */
-  toggle() {
-    const e = a.get();
-    if (t("toggle() called, current theme =", e), e === "system")
-      return console.warn("Cannot toggle theme when system theme is active. Please set a specific theme (light or dark) first."), t("toggle aborted: current theme is system"), e;
-    const s = e === "light" ? "dark" : "light";
-    return a.set(s), t("toggle completed, new theme =", s), s;
-  }
-}, n = () => {
-  if (document.documentElement.getAttribute("data-theme") === "system") {
-    const e = window.matchMedia("(prefers-color-scheme: dark)").matches;
-    document.documentElement.setAttribute("theme", e ? "dark" : "light");
+  log(...args) {
+    if (this._isDebugMode) console.log("[theme]", ...args);
   }
-}, t = (...e) => {
-  o && console.log("[theme]", ...e);
-};
-export {
-  a as theme
-};
+}
+const theme = Theme.instance;
+
+export { Theme, theme };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/components",
   "description": "web-components library by iyulab based on lit-element",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "keywords": [
     "iyulab",
     "web-components",
@@ -28,7 +28,7 @@
       "import": "./dist/index.js"
     },
     "./dist/*": {
-      "types": "./dist/*",
+      "types": "./dist/*.d.ts",
       "import": "./dist/*"
     }
   },

package/dist/utilities/storage.d.ts

@@ -1,60 +0,0 @@
-export type StorageMode = 'localStorage' | 'cookie';
-export interface LocalStorageOptions {
-    type: 'localStorage';
-}
-export interface CookieOptions {
-    type: 'cookie';
-    /** 만료: Date | milliseconds timestamp | ISO string | days (number) */
-    expires?: Date | number | string;
-    path?: string;
-    domain?: string;
-    sameSite?: 'Lax' | 'Strict' | 'None';
-    secure?: boolean;
-}
-export type BrowserStorageOptions = (LocalStorageOptions | CookieOptions) & {
-    /** 키 앞에 붙일 접두사 (옵션) */
-    prefix?: string;
-};
-/**
- * BrowserStorage - localStorage / cookie 래퍼
- *
- * 사용:
- * const s = new BrowserStorage({ type: 'localStorage', prefix: 'app' });
- * s.set('token', 'abc');
- * s.get('token'); // 'abc'
- *
- * const c = new BrowserStorage({ type: 'cookie', prefix: 'app', expires: 7 }); // expires = 7일
- * c.set('lang', 'ko');
- */
-export declare class BrowserStorage {
-    private mode;
-    private prefix;
-    private cookieOpts;
-    constructor(options: BrowserStorageOptions);
-    /** 키에 prefix를 붙인 실제 저장 키 */
-    private buildKey;
-    /**
-     * 값 저장
-     * @param key 키
-     * @param value 문자열 값 (문자열이 아닌 값은 JSON.stringify 권장)
-     */
-    set(key: string, value: string): void;
-    /**
-     * 값 조회
-     * @param key 키
-     * @returns 값 (없으면 null)
-     */
-    get(key: string): string | null;
-    /**
-     * 키 제거
-     */
-    remove(key: string): void;
-    /**
-     * 현재 prefix 기준으로 모든 항목 제거 (주의: localStorage 전체 삭제 아님)
-     */
-    clear(): void;
-    /**
-     * 모든 키 목록 반환 (prefix 적용된 실제 키들에서 접두사 제거한 상태)
-     */
-    keys(): string[];
-}