hakumi_components 0.1.3.pre

data/app/javascript/hakumi_components/core/config.js

@@ -0,0 +1,7 @@
+export const resolveBaseUrl = (baseUrl) => {
+    if (baseUrl) return baseUrl
+    if (typeof window !== "undefined" && window.HakumiComponentsConfig?.baseUrl) {
+        return window.HakumiComponentsConfig.baseUrl
+    }
+    return "/hakumi/components"
+}

data/app/javascript/hakumi_components/core/dom.js

@@ -0,0 +1,27 @@
+export const ensureId = (element, prefix = "hakumi-component") => {
+    if (!element.id) {
+        const uuid =
+            typeof crypto !== "undefined" && "randomUUID" in crypto
+                ? crypto.randomUUID()
+                : Math.random().toString(36).slice(2, 10)
+
+        element.id = `${prefix}-${uuid}`
+    }
+    return element.id
+}
+
+export const resolveTarget = (target) => {
+    const resolved = typeof target === "string" ? document.querySelector(target) : target
+    if (!resolved) throw new Error("[HakumiComponents] Target element not found")
+    return resolved
+}
+
+export const elementFromHtml = (html, name) => {
+    const template = document.createElement("template")
+    template.innerHTML = String(html).trim()
+    const element = template.content.firstElementChild
+    if (!element) throw new Error(`[HakumiComponents] Empty markup for ${name}`)
+    return element
+}
+
+export const nextFrame = () => new Promise((resolve) => requestAnimationFrame(resolve))

data/app/javascript/hakumi_components/core/persistence.js

@@ -0,0 +1,132 @@
+const safe = {
+    get(key) {
+        try { return localStorage.getItem(key) } catch { return null }
+    },
+    set(key, value) {
+        try { localStorage.setItem(key, value) } catch {}
+    },
+    remove(key) {
+        try { localStorage.removeItem(key) } catch {}
+    },
+}
+
+const json = {
+    get(key) {
+        const raw = safe.get(key)
+        if (!raw) return null
+        try { return JSON.parse(raw) } catch { return null }
+    },
+    set(key, value) {
+        try { safe.set(key, JSON.stringify(value)) } catch {}
+    },
+}
+
+// --- navegación (Turbo + fallbacks), bind único global al módulo ---
+let navBound = false
+const navCallbacks = new Set()
+
+let navScheduled = false
+const scheduleNavCallbacks = () => {
+    if (navScheduled) return
+    navScheduled = true
+
+    queueMicrotask(() => {
+        navScheduled = false
+        for (const cb of navCallbacks) {
+            try { cb() } catch {}
+        }
+    })
+}
+
+const bindNavigationOnce = () => {
+    if (navBound) return
+    if (typeof document === "undefined") return
+
+    navBound = true
+
+    document.addEventListener("turbo:load", scheduleNavCallbacks)
+    document.addEventListener("turbo:render", scheduleNavCallbacks)
+
+    window.addEventListener("popstate", scheduleNavCallbacks)
+    window.addEventListener("hashchange", scheduleNavCallbacks)
+}
+
+// ✅ Dedupe por key: evita múltiples restores activos si mount() corre más de una vez
+const bootstrapsByKey = new Map() // key -> unsubscribe
+
+export const Persistence = {
+    storage: {
+        get: safe.get,
+        set: safe.set,
+        remove: safe.remove,
+        getJson: json.get,
+        setJson: json.set,
+    },
+
+    save(key, { version = 1, state }) {
+        if (state === null || state === undefined) return safe.remove(key)
+        json.set(key, { v: version, state })
+    },
+
+    load(key) {
+        return json.get(key) // { v, state } | null
+    },
+
+    bootstrap(key, fn) {
+        if (typeof key !== "string" || key.length === 0) {
+            throw new Error("[HakumiComponents] Persistence.bootstrap(key, fn) missing key")
+        }
+        if (typeof fn !== "function") {
+            throw new Error("[HakumiComponents] Persistence.bootstrap(key, fn) expects a function")
+        }
+
+        // ✅ dedupe
+        const existing = bootstrapsByKey.get(key)
+        if (existing) return existing
+
+        const run = () => {
+            const payload = this.load(key)
+            if (!payload) return
+            try { fn(payload) } catch {}
+        }
+
+        run()
+        const unsubscribe = this.onNavigate(run)
+        bootstrapsByKey.set(key, unsubscribe)
+        return unsubscribe
+    },
+
+    onNavigate(fn) {
+        if (typeof document === "undefined") return () => {}
+        if (typeof fn !== "function") {
+            throw new Error("[HakumiComponents] Persistence.onNavigate(fn) expects a function")
+        }
+
+        bindNavigationOnce()
+        navCallbacks.add(fn)
+        return () => navCallbacks.delete(fn)
+    },
+
+    ensureHost({ id, controllerName, tagName = "div", display = "none", parent = () => document.body }) {
+        if (typeof document === "undefined") return null
+
+        let el = document.getElementById(id)
+        if (!el) {
+            el = document.createElement(tagName)
+            el.id = id
+            el.style.display = display
+            parent().appendChild(el)
+        }
+
+        const controllers = (el.getAttribute("data-controller") || "")
+            .split(" ")
+            .filter(Boolean)
+
+        if (!controllers.includes(controllerName)) {
+            controllers.push(controllerName)
+            el.setAttribute("data-controller", controllers.join(" "))
+        }
+
+        return el
+    },
+}

data/app/javascript/hakumi_components/core/registry.js

@@ -0,0 +1,23 @@
+const registry = new Map()
+
+export const register = (id, instance) => {
+    if (!id) throw new Error("[HakumiComponents] Missing id for registration")
+
+    registry.set(id, instance)
+    if (typeof window !== "undefined") {
+        window.dispatchEvent(new CustomEvent("hakumi-component:registered", { detail: { id, instance } }))
+    }
+}
+
+export const unregister = (id) => {
+    if (!id) return
+
+    registry.delete(id)
+    if (typeof window !== "undefined") {
+        window.dispatchEvent(new CustomEvent("hakumi-component:unregistered", { detail: { id } }))
+    }
+}
+
+export const get = (id) => registry.get(id)
+
+export const list = () => Array.from(registry.entries(), ([id, instance]) => ({ id, instance }))

data/app/javascript/hakumi_components/core/render_component.js

@@ -0,0 +1,177 @@
+import { resolveBaseUrl } from "./config.js"
+import { ensureId, resolveTarget, elementFromHtml, nextFrame } from "./dom.js"
+import { register, unregister, get } from "./registry.js"
+
+const defaultSingletonSelector = (name) => `.hakumi-${name.replace(/_/g, "-")}`
+
+const inflightSingletonRenders = new Map()
+
+const safeSessionGet = (key) => {
+    try {
+        return sessionStorage.getItem(key)
+    } catch {
+        return null
+    }
+}
+
+const safeSessionSet = (key, value) => {
+    try {
+        sessionStorage.setItem(key, value)
+    } catch {}
+}
+
+const safeSessionRemove = (key) => {
+    try {
+        sessionStorage.removeItem(key)
+    } catch {}
+}
+
+const isInIframe = () => {
+    try { return window.self !== window.top } catch { return true }
+}
+
+
+const cacheKeyFor = (normalizedName, format) => `hakumi:rcache:${format}:${normalizedName}`
+const cacheMetaKeyFor = (normalizedName, format) => `hakumi:rcachemeta:${format}:${normalizedName}`
+
+const resolveComponentData = (element) => element?.hakumiComponent
+
+const loadCache = (normalizedName, format, ttlMs) => {
+    const metaRaw = safeSessionGet(cacheMetaKeyFor(normalizedName, format))
+    if (!metaRaw) return null
+
+    let meta
+    try {
+        meta = JSON.parse(metaRaw)
+    } catch {
+        safeSessionRemove(cacheMetaKeyFor(normalizedName, format))
+        return null
+    }
+
+    if (!meta?.ts || typeof meta.ts !== "number") return null
+    if (ttlMs != null && Date.now() - meta.ts > ttlMs) return null
+
+    return safeSessionGet(cacheKeyFor(normalizedName, format))
+}
+
+const saveCache = (normalizedName, format, html) => {
+    safeSessionSet(cacheKeyFor(normalizedName, format), html)
+    safeSessionSet(cacheMetaKeyFor(normalizedName, format), JSON.stringify({ ts: Date.now() }))
+}
+
+export const renderComponent = async (
+    name,
+    {
+        params = {},
+        target = typeof document !== "undefined" ? document.body : null,
+        format = "html",
+        baseUrl = null,
+        mode = "append",
+        allowInIframe = false,
+        singletonSelector = defaultSingletonSelector,
+        cache = true,
+        cacheTtlMs = 5 * 60 * 1000,
+    } = {}
+) => {
+    if (!allowInIframe && typeof window !== "undefined" && isInIframe()) {
+        return { id: null, element: null, instance: null }
+    }
+    if (!name) throw new Error("[HakumiComponents] Missing component name for render")
+    if (!target) throw new Error("[HakumiComponents] Missing target for render")
+
+    const selector = singletonSelector(name)
+
+    const existing = document.querySelector(selector)
+    const existingComponent = resolveComponentData(existing)
+    if (existingComponent?.singleton) {
+        const id = ensureId(existing, `hakumi-${name}`)
+        existingComponent?.apply?.(params)
+        const instance = existingComponent?.api ?? get(id)
+        return { id, element: existing, instance }
+    }
+
+    const inflight = inflightSingletonRenders.get(selector)
+    if (inflight) {
+        const res = await inflight
+        const inflightComponent = resolveComponentData(res.element)
+        inflightComponent?.apply?.(params)
+        return res
+    }
+
+    const task = (async () => {
+        const resolvedTarget = resolveTarget(target)
+        const normalizedName = name.replace(/-/g, "_")
+        const url = new URL(`${resolveBaseUrl(baseUrl)}/${normalizedName}`, window.location?.origin || "http://localhost")
+
+        const finalParams = { ...params }
+        if (mode === "destroy_on_close") finalParams.destroy_on_close = true
+
+        Object.entries(finalParams).forEach(([key, value]) => {
+            if (value !== undefined && value !== null) url.searchParams.set(key, value)
+        })
+
+        let optimisticElement = null
+        if (cache && mode !== "replace") {
+            const cachedHtml = loadCache(normalizedName, format, cacheTtlMs)
+            if (cachedHtml) {
+                try {
+                    optimisticElement = elementFromHtml(cachedHtml, name)
+                    optimisticElement.setAttribute("data-hakumi-render-cache", "1")
+                    resolvedTarget.appendChild(optimisticElement)
+                    ensureId(optimisticElement, `hakumi-${name}`)
+                } catch {}
+            }
+        }
+
+        const headers = { Accept: format === "json" ? "application/json" : "text/html" }
+        const response = await fetch(url, { headers })
+        if (!response.ok) throw new Error(`[HakumiComponents] Failed to render ${name}: ${response.status}`)
+
+        const html = format === "json" ? (await response.json()).html : await response.text()
+
+        if (cache) saveCache(normalizedName, format, html)
+
+        const element = elementFromHtml(html, name)
+
+        if (mode === "replace") {
+            resolvedTarget.innerHTML = ""
+            resolvedTarget.appendChild(element)
+        } else if (optimisticElement && optimisticElement.isConnected) {
+            optimisticElement.replaceWith(element)
+        } else {
+            resolvedTarget.appendChild(element)
+        }
+
+        const id = ensureId(element, `hakumi-${name}`)
+
+        if (mode === "destroy_on_close") {
+            const handleHidden = () => {
+                element.remove()
+                unregister(id)
+            }
+            element.addEventListener("hakumi-component:hidden", handleHidden, { once: true })
+        }
+
+        await nextFrame()
+
+        let instance = get(id)
+        if (!instance) {
+            register(id, element)
+            instance = get(id)
+        }
+
+        if (element.hakumiComponent?.api) {
+            instance = element.hakumiComponent.api
+        }
+
+        return { id, element, instance }
+    })()
+
+    inflightSingletonRenders.set(selector, task)
+
+    try {
+        return await task
+    } finally {
+        inflightSingletonRenders.delete(selector)
+    }
+}

data/app/javascript/hakumi_components/esbuild_loader.js

@@ -0,0 +1,149 @@
+// Explicit controller loader for esbuild (no import.meta.glob support)
+// This file is used for test builds and non-Vite environments
+
+import AffixController from "./controllers/hakumi/affix_controller.js"
+import AdminPanelController from "./controllers/hakumi/admin_panel_controller.js"
+import AlertController from "./controllers/hakumi/alert_controller.js"
+import AnchorController from "./controllers/hakumi/anchor_controller.js"
+import AutocompleteController from "./controllers/hakumi/autocomplete_controller.js"
+import AvatarTextController from "./controllers/hakumi/avatar_text_controller.js"
+import BackTopController from "./controllers/hakumi/back_top_controller.js"
+import ButtonController from "./controllers/hakumi/button_controller.js"
+import CalendarController from "./controllers/hakumi/calendar_controller.js"
+import CarouselController from "./controllers/hakumi/carousel_controller.js"
+import CascaderController from "./controllers/hakumi/cascader_controller.js"
+import CheckboxController from "./controllers/hakumi/checkbox_controller.js"
+import CheckboxGroupController from "./controllers/hakumi/checkbox_group_controller.js"
+import CollapseController from "./controllers/hakumi/collapse_controller.js"
+import ColorPickerController from "./controllers/hakumi/color_picker_controller.js"
+import DatePickerController from "./controllers/hakumi/date_picker_controller.js"
+import DrawerController from "./controllers/hakumi/drawer_controller.js"
+import DropdownController from "./controllers/hakumi/dropdown_controller.js"
+import FloatButtonGroupController from "./controllers/hakumi/float_button_group_controller.js"
+import FormItemController from "./controllers/hakumi/form_item_controller.js"
+import ImageController from "./controllers/hakumi/image_controller.js"
+import InputController from "./controllers/hakumi/input_controller.js"
+import InputNumberController from "./controllers/hakumi/input_number_controller.js"
+import InputPasswordController from "./controllers/hakumi/input_password_controller.js"
+import InputTextareaController from "./controllers/hakumi/input_textarea_controller.js"
+import MentionsController from "./controllers/hakumi/mentions_controller.js"
+import MenuController from "./controllers/hakumi/menu_controller.js"
+import MessageController from "./controllers/hakumi/message_controller.js"
+import ModalController from "./controllers/hakumi/modal_controller.js"
+import ModalTriggerController from "./controllers/hakumi/modal_trigger_controller.js"
+import NotificationController from "./controllers/hakumi/notification_controller.js"
+import PaginationController from "./controllers/hakumi/pagination_controller.js"
+import PopconfirmController from "./controllers/hakumi/popconfirm_controller.js"
+import PopoverController from "./controllers/hakumi/popover_controller.js"
+import ProgressController from "./controllers/hakumi/progress_controller.js"
+import QrCodeController from "./controllers/hakumi/qr_code_controller.js"
+import RadioController from "./controllers/hakumi/radio_controller.js"
+import RateController from "./controllers/hakumi/rate_controller.js"
+import SegmentedController from "./controllers/hakumi/segmented_controller.js"
+import SelectController from "./controllers/hakumi/select_controller.js"
+import SliderController from "./controllers/hakumi/slider_controller.js"
+import SpinController from "./controllers/hakumi/spin_controller.js"
+import SplitterController from "./controllers/hakumi/splitter_controller.js"
+import StatisticController from "./controllers/hakumi/statistic_controller.js"
+import StepsController from "./controllers/hakumi/steps_controller.js"
+import SwitchController from "./controllers/hakumi/switch_controller.js"
+import TableController from "./controllers/hakumi/table_controller.js"
+import TabsController from "./controllers/hakumi/tabs_controller.js"
+import TagController from "./controllers/hakumi/tag_controller.js"
+import TagGroupController from "./controllers/hakumi/tag_group_controller.js"
+import ThemeController from "./controllers/hakumi/theme_controller.js"
+import TimePickerController from "./controllers/hakumi/time_picker_controller.js"
+import TimelineController from "./controllers/hakumi/timeline_controller.js"
+import TooltipController from "./controllers/hakumi/tooltip_controller.js"
+import TourController from "./controllers/hakumi/tour_controller.js"
+import TransferController from "./controllers/hakumi/transfer_controller.js"
+import TreeController from "./controllers/hakumi/tree_controller.js"
+import TreeSelectController from "./controllers/hakumi/tree_select_controller.js"
+import TypographyController from "./controllers/hakumi/typography_controller.js"
+import UploadController from "./controllers/hakumi/upload_controller.js"
+
+const controllers = {
+  "hakumi--affix": AffixController,
+  "hakumi--admin-panel": AdminPanelController,
+  "hakumi--alert": AlertController,
+  "hakumi--anchor": AnchorController,
+  "hakumi--autocomplete": AutocompleteController,
+  "hakumi--avatar-text": AvatarTextController,
+  "hakumi--back-top": BackTopController,
+  "hakumi--button": ButtonController,
+  "hakumi--calendar": CalendarController,
+  "hakumi--carousel": CarouselController,
+  "hakumi--cascader": CascaderController,
+  "hakumi--checkbox": CheckboxController,
+  "hakumi--checkbox-group": CheckboxGroupController,
+  "hakumi--collapse": CollapseController,
+  "hakumi--color-picker": ColorPickerController,
+  "hakumi--date-picker": DatePickerController,
+  "hakumi--drawer": DrawerController,
+  "hakumi--dropdown": DropdownController,
+  "hakumi--float-button-group": FloatButtonGroupController,
+  "hakumi--form-item": FormItemController,
+  "hakumi--image": ImageController,
+  "hakumi--input": InputController,
+  "hakumi--input-number": InputNumberController,
+  "hakumi--input-password": InputPasswordController,
+  "hakumi--input-textarea": InputTextareaController,
+  "hakumi--mentions": MentionsController,
+  "hakumi--menu": MenuController,
+  "hakumi--message": MessageController,
+  "hakumi--modal": ModalController,
+  "hakumi--modal-trigger": ModalTriggerController,
+  "hakumi--notification": NotificationController,
+  "hakumi--pagination": PaginationController,
+  "hakumi--popconfirm": PopconfirmController,
+  "hakumi--popover": PopoverController,
+  "hakumi--progress": ProgressController,
+  "hakumi--qr-code": QrCodeController,
+  "hakumi--radio": RadioController,
+  "hakumi--rate": RateController,
+  "hakumi--segmented": SegmentedController,
+  "hakumi--select": SelectController,
+  "hakumi--slider": SliderController,
+  "hakumi--spin": SpinController,
+  "hakumi--splitter": SplitterController,
+  "hakumi--statistic": StatisticController,
+  "hakumi--steps": StepsController,
+  "hakumi--switch": SwitchController,
+  "hakumi--table": TableController,
+  "hakumi--tabs": TabsController,
+  "hakumi--tag": TagController,
+  "hakumi--tag-group": TagGroupController,
+  "hakumi--theme": ThemeController,
+  "hakumi--time-picker": TimePickerController,
+  "hakumi--timeline": TimelineController,
+  "hakumi--tooltip": TooltipController,
+  "hakumi--tour": TourController,
+  "hakumi--transfer": TransferController,
+  "hakumi--tree": TreeController,
+  "hakumi--tree-select": TreeSelectController,
+  "hakumi--typography": TypographyController,
+  "hakumi--upload": UploadController,
+}
+
+export function registerHakumiControllers(application) {
+  if (!application) throw new Error("[HakumiComponents] Missing Stimulus application")
+
+  // Call mount() on controllers that have it
+  const controllerClasses = Object.values(controllers)
+  for (const C of controllerClasses) {
+    if (typeof C.mount === "function") {
+      try {
+        C.mount()
+      } catch (e) {
+        console.error("[HakumiComponents] mount() failed", e)
+      }
+    }
+  }
+
+  // Register all controllers
+  for (const [name, Controller] of Object.entries(controllers)) {
+    application.register(name, Controller)
+  }
+}
+
+export { controllers }

data/app/javascript/hakumi_components/index.js

@@ -0,0 +1,79 @@
+import { renderComponent } from "./core/render_component.js"
+import { register, unregister, get, list } from "./core/registry.js"
+import { ensureId } from "./core/dom.js"
+import { Persistence } from "./core/persistence.js"
+import DateHelper from "./utils/date_helper.js"
+
+// Create global overlay container for Modal, Drawer, etc.
+const ensureOverlayContainer = () => {
+    if (typeof document === "undefined") return null
+
+    const existingContainer = document.getElementById("hakumi-overlay-root")
+    if (existingContainer) return existingContainer
+
+    const container = document.createElement("div")
+    container.id = "hakumi-overlay-root"
+    container.setAttribute("data-hakumi-overlay-container", "")
+
+    // Wait for DOM to be ready
+    if (document.body) {
+        document.body.appendChild(container)
+    } else {
+        document.addEventListener("DOMContentLoaded", () => {
+            document.body.appendChild(container)
+        })
+    }
+
+    return container
+}
+
+export { renderComponent, register, unregister, get, list, ensureId, Persistence, ensureOverlayContainer, DateHelper }
+export { default as RegistryController } from "./controllers/base/registry_controller.js"
+
+export const HakumiComponents = {
+    renderComponent,
+    register,
+    unregister,
+    get,
+    list,
+    ensureId,
+    ensureOverlayContainer,
+    DateHelper,
+}
+
+if (typeof window !== "undefined") {
+    window.HakumiComponents = HakumiComponents
+    // Create overlay container on load
+    ensureOverlayContainer()
+}
+
+export const registerHakumiControllers = (application) => {
+    if (!application) throw new Error("[HakumiComponents] Missing Stimulus application")
+
+    // Use eager loading for now - Vite will handle code-splitting via manual chunks
+    const controllers = import.meta.glob("./controllers/hakumi/**/*_controller.js", { eager: true })
+
+    const classes = Object.values(controllers).map((m) => m.default).filter(Boolean)
+
+    for (const C of classes) {
+        if (typeof C.mount === "function") {
+            try {
+                C.mount()
+            } catch (e) {
+                console.error("[HakumiComponents] mount() failed", e)
+            }
+        }
+    }
+
+    Object.entries(controllers).forEach(([path, mod]) => {
+        const name = path
+            .replace("./controllers/", "")
+            .replace("_controller.js", "")
+            .replace(/\//g, "--")
+            .replace(/_/g, "-")
+
+        application.register(name, mod.default)
+    })
+}
+
+export default HakumiComponents

data/app/javascript/hakumi_components/plugins/persisted_singletons.js

@@ -0,0 +1,19 @@
+const DEFAULT_KEY_PREFIX = "hakumi.persist."
+
+export function restorePersistedSingletons(renderComponent, {
+    keyPrefix = DEFAULT_KEY_PREFIX
+} = {}) {
+    if (!renderComponent) return
+
+    for (let i = 0; i < localStorage.length; i++) {
+        const key = localStorage.key(i)
+        if (!key || !key.startsWith(keyPrefix)) continue
+
+        const name = key.slice(keyPrefix.length)
+        if (!name) continue
+
+        if (localStorage.getItem(key) === "1") {
+            renderComponent(name).catch(console.error)
+        }
+    }
+}