hakumi_components 0.1.3.pre

data/app/javascript/hakumi_components/controllers/base/registry_controller.js

@@ -0,0 +1,101 @@
+import { Controller } from "@hotwired/stimulus"
+import { ensureId } from "../../core/dom.js"
+import { register, unregister } from "../../core/registry.js"
+
+export default class RegistryController extends Controller {
+  connect() {
+    const isComponentController = this.isHakumiController()
+
+    if (typeof this.registerApi === "function") {
+      this.registerApi()
+    } else if (!isComponentController) {
+      this.element.hakumiComponent ||= {
+        name: this.componentName(),
+        version: 1,
+        singleton: false,
+        api: {},
+      }
+    }
+
+    ensureId(this.element, this.defaultIdPrefix())
+
+    if (typeof this.setup === "function") this.setup()
+
+    this.validateContract()
+    register(this.element.id, this.element.hakumiComponent.api)
+
+
+    if (this.element.hakumiComponent.singleton && typeof window !== "undefined" && window.HakumiComponents) {
+      window.HakumiComponents[this.element.hakumiComponent.name] = this.element.hakumiComponent.api
+    }
+  }
+
+
+  disconnect() {
+    if (typeof this.teardown === "function") this.teardown()
+
+    const c = this.element?.hakumiComponent
+    if (c?.singleton && typeof window !== "undefined" && window.HakumiComponents) {
+      if (window.HakumiComponents[c.name] === c.api) {
+        delete window.HakumiComponents[c.name]
+      }
+    }
+
+    if (this.element?.id) unregister(this.element.id)
+  }
+
+  validateContract() {
+    const isComponentController = this.isHakumiController()
+    const c = this.element.hakumiComponent
+
+    if (isComponentController && typeof this.registerApi !== "function") {
+      throw new Error(`[HakumiComponents] ${this.identifier} must implement registerApi()`)
+    }
+
+    if (!c) throw new Error(`[HakumiComponents] Missing hakumiComponent for ${this.identifier}`)
+    if (!c.name) throw new Error(`[HakumiComponents] Missing hakumiComponent.name for ${this.identifier}`)
+    if (c.version !== 1) throw new Error(`[HakumiComponents] Unsupported hakumiComponent.version for ${c.name}`)
+    if (typeof c.singleton !== "boolean") throw new Error(`[HakumiComponents] hakumiComponent.singleton must be boolean (${c.name})`)
+    if (!c.api || typeof c.api !== "object") throw new Error(`[HakumiComponents] hakumiComponent.api must be object (${c.name})`)
+
+    if (isComponentController && Object.keys(c.api).length === 0) {
+      throw new Error(`[HakumiComponents] hakumiComponent.api cannot be empty (${c.name})`)
+    }
+
+    if (c.apply && typeof c.apply !== "function") throw new Error(`[HakumiComponents] hakumiComponent.apply must be function (${c.name})`)
+    if (c.destroy && typeof c.destroy !== "function") throw new Error(`[HakumiComponents] hakumiComponent.destroy must be function (${c.name})`)
+  }
+
+
+  componentName() {
+    return (
+      String(this.identifier || "")
+        .replace(/^hakumi--/, "")
+        .replace(/--/g, "_")
+        .replace(/-/g, "_") || "unknown"
+    )
+  }
+
+  defaultIdPrefix() {
+    return `hakumi-${this.componentName()}`
+  }
+
+  isHakumiController() {
+    return String(this.identifier || "").startsWith("hakumi--")
+  }
+
+  
+  setup() {
+
+  }
+
+  
+  teardown() {
+
+  }
+
+  
+  registerApi() {
+
+  }
+}

data/app/javascript/hakumi_components/controllers/hakumi/admin_panel_controller.js

@@ -0,0 +1,363 @@
+import RegistryController from "../base/registry_controller.js"
+import { Persistence } from "hakumi_components"
+const STATE_LABELS = {
+  open: { true: "open", false: "closed" },
+  visible: { true: "visible", false: "hidden" },
+  active: { true: "active", false: "inactive" },
+  expanded: { true: "expanded", false: "collapsed" },
+  collapsed: { true: "collapsed", false: "expanded" },
+  disabled: { true: "disabled", false: "enabled" }
+}
+const STORAGE_KEY = "hakumi:admin-panel"
+
+export default class extends RegistryController {
+  static targets = ["body", "empty", "summary", "search", "typeFilter", "stateFilter"]
+
+  static mount() {
+    Persistence.bootstrap(STORAGE_KEY, ({state}) => {
+      if(!state.visible) return
+      window.HakumiComponents.renderComponent("admin_panel")
+    })
+  }
+
+  setup() {
+    Persistence.save(STORAGE_KEY, { version: 1, state: { visible: true } })
+    this.refresh()
+    this.updateLayout()
+    this.setupListeners()
+  }
+
+  setupListeners() {
+    this.boundRefresh = this.refresh.bind(this)
+    window.addEventListener("hakumi-component:registered", this.boundRefresh)
+    window.addEventListener("hakumi-component:unregistered", this.boundRefresh)
+  }
+
+  updateLayout() {
+
+    document.body.style.paddingBottom = `400px`
+  }
+
+  teardown() {
+    document.body.style.paddingBottom = "0px"
+    if (this.boundRefresh) {
+      window.removeEventListener("hakumi-component:registered", this.boundRefresh)
+      window.removeEventListener("hakumi-component:unregistered", this.boundRefresh)
+    }
+  }
+
+  registerApi() {
+    this.element.hakumiComponent = {
+      name: "admin_panel",
+      version: 1,
+      singleton: true,
+      api: {
+        refresh: () => this.refresh(),
+        close: () => this.close()
+      }
+    }
+  }
+
+  refresh(event) {
+    if (event) event.preventDefault()
+    this.updateLayout()
+    this.entries = this.fetchEntries()
+    this.updateFilterOptions()
+    this.applyFilters()
+  }
+
+  close(event) {
+    if (event) event.preventDefault()
+    Persistence.save(STORAGE_KEY, { version: 1, state: { visible: false } })
+    this.element.remove()
+  }
+
+  applyFilters() {
+    const searchValue = this.searchTarget.value.trim().toLowerCase()
+    const selectedType = this.typeFilterTarget.value
+    const selectedState = this.stateFilterTarget.value
+
+    const filtered = this.entries.filter((entry) => {
+      const matchesSearch = !searchValue || entry.id.toLowerCase().includes(searchValue)
+      const matchesType = !selectedType || entry.type === selectedType
+      const matchesState = !selectedState || entry.state.label === selectedState
+      return matchesSearch && matchesType && matchesState
+    })
+
+    this.renderSummary(filtered.length, this.entries.length)
+    this.renderTable(filtered)
+  }
+
+  invoke(event) {
+    event.preventDefault()
+    event.stopPropagation()
+
+    const target = event.currentTarget
+    const { id, method } = target.dataset
+    if (!id || !method) return
+
+    const instance = window.HakumiComponents?.get?.(id)
+    if (!instance || typeof instance[method] !== "function") return
+
+    let args = []
+    if (target.tagName === "FORM") {
+      const formData = new FormData(target)
+      args = Array.from(formData.values()).map((value) => this.parseArgument(value))
+    }
+
+    try {
+      instance[method](...args)
+    } catch (error) {
+      console.error(`[HakumiComponents] Failed to invoke ${method} on ${id}`, error)
+    }
+
+    this.refresh()
+  }
+
+  fetchEntries() {
+    if (!window.HakumiComponents?.list) return []
+
+    return window.HakumiComponents.list()
+      .map(({ id, instance }) => {
+        const element = document.getElementById(id)
+        if (!element) return null
+
+        const component = element.hakumiComponent
+        const type = component?.name || "—"
+        const state = this.buildState(element, instance)
+        const methods = this.collectMethods(instance)
+
+        return {
+          id,
+          type,
+          state,
+          methods
+        }
+      })
+      .filter(Boolean)
+  }
+
+  updateFilterOptions() {
+    const typeSelection = this.typeFilterTarget.value
+    const stateSelection = this.stateFilterTarget.value
+
+    const types = Array.from(new Set(this.entries.map((entry) => entry.type))).sort()
+    const states = Array.from(new Set(this.entries.map((entry) => entry.state.label))).sort()
+
+    this.populateSelect(this.typeFilterTarget, types, typeSelection)
+    this.populateSelect(this.stateFilterTarget, states, stateSelection)
+  }
+
+  populateSelect(select, options, currentValue) {
+    const keptValue = options.includes(currentValue) ? currentValue : ""
+
+    select.querySelectorAll("option:not([value=''])").forEach((option) => option.remove())
+    options.forEach((optionValue) => {
+      const option = document.createElement("option")
+      option.value = optionValue
+      option.textContent = optionValue
+      select.appendChild(option)
+    })
+
+    select.value = keptValue
+  }
+
+  renderSummary(filteredCount, totalCount) {
+    this.summaryTarget.textContent = `${filteredCount} of ${totalCount} components visible.`
+  }
+
+  renderTable(entries) {
+    this.bodyTarget.innerHTML = ""
+
+    if (entries.length === 0) {
+      this.emptyTarget.hidden = false
+      return
+    }
+
+    this.emptyTarget.hidden = true
+
+    entries.forEach((entry) => {
+      const row = document.createElement("tr")
+
+      row.appendChild(this.buildTextCell(entry.id))
+      row.appendChild(this.buildTextCell(entry.type))
+      row.appendChild(this.buildStateCell(entry.state))
+      row.appendChild(this.buildMethodsCell(entry))
+
+      this.bodyTarget.appendChild(row)
+    })
+  }
+
+  buildTextCell(value) {
+    const cell = document.createElement("td")
+    cell.textContent = value
+    return cell
+  }
+
+  buildStateCell(state) {
+    const cell = document.createElement("td")
+    const label = document.createElement("div")
+    label.classList.add("hakumi-admin-panel__state")
+    label.textContent = state.label
+    cell.appendChild(label)
+
+    if (state.values && Object.keys(state.values).length > 0) {
+      const details = document.createElement("pre")
+      details.classList.add("hakumi-admin-panel__state-values")
+      details.textContent = JSON.stringify(state.values, null, 2)
+      cell.appendChild(details)
+    }
+
+    return cell
+  }
+
+  buildMethodsCell(entry) {
+    const cell = document.createElement("td")
+    const methodList = document.createElement("div")
+    methodList.classList.add("hakumi-admin-panel__methods")
+
+    if (!entry.methods || entry.methods.length === 0) {
+      const empty = document.createElement("span")
+      empty.classList.add("hakumi-admin-panel__method-empty")
+      empty.textContent = "No public API methods"
+      methodList.appendChild(empty)
+      cell.appendChild(methodList)
+      return cell
+    }
+
+    entry.methods.forEach((method) => {
+      methodList.appendChild(this.buildMethodEntry(entry.id, method))
+    })
+
+    cell.appendChild(methodList)
+    return cell
+  }
+
+  buildMethodEntry(id, method) {
+    const wrapper = document.createElement("div")
+    wrapper.classList.add("hakumi-admin-panel__method-entry")
+
+    const badge = document.createElement("span")
+    badge.classList.add("hakumi-admin-panel__method")
+    badge.textContent = `${method.name}(${method.arity})`
+    wrapper.appendChild(badge)
+
+    if (method.arity === 0) {
+      wrapper.appendChild(this.buildMethodButton(id, method.name))
+    } else {
+      wrapper.appendChild(this.buildMethodForm(id, method))
+    }
+
+    return wrapper
+  }
+
+  buildMethodButton(id, methodName) {
+    const button = document.createElement("button")
+    button.type = "button"
+    button.classList.add("hakumi-admin-panel__action")
+    button.dataset.action = "hakumi--admin-panel#invoke"
+    button.dataset.id = id
+    button.dataset.method = methodName
+    button.textContent = "Run"
+    return button
+  }
+
+  buildMethodForm(id, method) {
+    const form = document.createElement("form")
+    form.classList.add("hakumi-admin-panel__action-form")
+    form.dataset.action = "submit->hakumi--admin-panel#invoke"
+    form.dataset.id = id
+    form.dataset.method = method.name
+
+    for (let index = 0; index < method.arity; index += 1) {
+      const input = document.createElement("input")
+      input.type = "text"
+      input.name = `arg-${index}`
+      input.placeholder = `arg${index + 1}`
+      input.classList.add("hakumi-admin-panel__action-input")
+      form.appendChild(input)
+    }
+
+    const submit = document.createElement("button")
+    submit.type = "submit"
+    submit.classList.add("hakumi-admin-panel__action")
+    submit.textContent = "Run"
+    form.appendChild(submit)
+
+    return form
+  }
+
+  collectMethods(api) {
+    if (!api || typeof api !== "object") return []
+
+    return Object.keys(api)
+      .filter((name) => typeof api[name] === "function")
+      .map((name) => ({ name, arity: api[name].length }))
+      .sort((a, b) => a.name.localeCompare(b.name))
+  }
+
+  parseArgument(value) {
+    const trimmed = String(value ?? "").trim()
+    if (trimmed === "") return undefined
+
+    try {
+      return JSON.parse(trimmed)
+    } catch {
+      return trimmed
+    }
+  }
+
+  buildState(element, instance) {
+    const values = this.extractValues(element, instance)
+    const label = this.detectStateLabel(element, values)
+
+    return { label, values }
+  }
+
+  extractValues(element, instance) {
+    const entries = {}
+    if (!element) return entries
+
+
+    const componentName = element.hakumiComponent?.name
+    if (!componentName) return entries
+
+    const controller = this.application.getControllerForElementAndIdentifier(
+      element,
+      `hakumi--${componentName.replace(/_/g, "-")}`
+    )
+
+    if (controller) {
+      const valueDefs = controller.constructor.values
+      if (valueDefs) {
+        Object.keys(valueDefs).forEach((key) => {
+          const valueName = `${key}Value`
+          if (valueName in controller) {
+            entries[key] = controller[valueName]
+          }
+        })
+      }
+    }
+
+    if (typeof instance?.getState === "function") {
+      Object.assign(entries, instance.getState())
+    }
+
+    return entries
+  }
+
+  detectStateLabel(element, values) {
+    if (!values) return "—"
+    if (values.label) return values.label
+
+    const candidates = Object.keys(STATE_LABELS)
+
+    for (const key of candidates) {
+      if (key in values) {
+        return STATE_LABELS[key][values[key]] || "—"
+      }
+    }
+
+    return "—"
+  }
+}

data/app/javascript/hakumi_components/controllers/hakumi/affix_controller.js

@@ -0,0 +1,206 @@
+import RegistryController from "../base/registry_controller.js"
+
+export default class extends RegistryController {
+  static targets = ["placeholder", "content"]
+  static values = {
+    offsetTop: Number,
+    offsetBottom: Number,
+    targetSelector: String,
+    zIndex: Number
+  }
+
+  setup() {
+    this.affixed = false
+    this.handleScroll = this.updatePosition.bind(this)
+    this.handleResize = this.updatePosition.bind(this)
+    this.scrollTarget = this.resolveTarget()
+    this.attachListeners()
+    this.updatePosition()
+  }
+
+  teardown() {
+    this.detachListeners()
+  }
+
+  registerApi() {
+    this.element.hakumiComponent = {
+      name: "affix",
+      version: 1,
+      singleton: false,
+      api: {
+        check: () => this.updatePosition(),
+        update: () => this.updatePosition(),
+        isAffixed: () => this.affixed,
+        getState: () => ({
+          affixed: this.affixed,
+          offsetTop: this.offsetTop,
+          offsetBottom: this.offsetBottom,
+          targetSelector: this.targetSelectorValue || null
+        }),
+        setOffsetTop: (value) => this.setOffsetTop(value),
+        setOffsetBottom: (value) => this.setOffsetBottom(value)
+      }
+    }
+
+    this.#exposeApi()
+  }
+
+  disconnect() {
+    delete this.element.hakumiAffix
+    super.disconnect()
+  }
+
+  updatePosition() {
+    if (!this.hasContentTarget || !this.hasPlaceholderTarget) return
+
+    this.offsetTop = this.resolveOffsetTop()
+    this.offsetBottom = this.resolveOffsetBottom()
+
+    const useBottom = this.offsetBottom !== null && this.offsetBottom !== undefined
+    const placeholderRect = this.placeholderTarget.getBoundingClientRect()
+    const contentRect = this.contentTarget.getBoundingClientRect()
+    const targetRect = this.getTargetRect()
+
+    let shouldAffix = false
+    let top = null
+    let bottom = null
+
+    if (useBottom) {
+      const threshold = targetRect.bottom - this.offsetBottom
+      shouldAffix = placeholderRect.bottom >= threshold
+      bottom = window.innerHeight - targetRect.bottom + this.offsetBottom
+    } else {
+      const threshold = targetRect.top + this.offsetTop
+      shouldAffix = placeholderRect.top <= threshold
+      top = threshold
+    }
+
+    if (shouldAffix) {
+      this.applyAffix({ top, bottom, placeholderRect, contentRect, useBottom })
+    } else {
+      this.resetAffix()
+    }
+
+    this.updateState(shouldAffix, useBottom)
+  }
+
+  setOffsetTop(value) {
+    this.offsetTopValue = Number(value || 0)
+    this.element.dataset.hakumiAffixOffsetTopValue = String(this.offsetTopValue)
+    this.element.removeAttribute("data-hakumi--affix-offset-bottom-value")
+    this.offsetBottomValue = undefined
+    this.updatePosition()
+  }
+
+  setOffsetBottom(value) {
+    this.offsetBottomValue = Number(value || 0)
+    this.element.dataset.hakumiAffixOffsetBottomValue = String(this.offsetBottomValue)
+    this.element.removeAttribute("data-hakumi--affix-offset-top-value")
+    this.offsetTopValue = undefined
+    this.updatePosition()
+  }
+
+  applyAffix({ top, bottom, placeholderRect, contentRect, useBottom }) {
+    this.placeholderTarget.style.height = `${contentRect.height}px`
+    this.placeholderTarget.style.width = `${contentRect.width}px`
+
+    this.contentTarget.style.position = "fixed"
+    this.contentTarget.style.left = `${placeholderRect.left}px`
+    this.contentTarget.style.width = `${placeholderRect.width}px`
+    if (useBottom) {
+      this.contentTarget.style.bottom = `${bottom}px`
+      this.contentTarget.style.top = ""
+    } else {
+      this.contentTarget.style.top = `${top}px`
+      this.contentTarget.style.bottom = ""
+    }
+
+    if (this.hasZIndexValue) {
+      this.contentTarget.style.zIndex = String(this.zIndexValue)
+    }
+  }
+
+  resetAffix() {
+    this.placeholderTarget.style.height = ""
+    this.placeholderTarget.style.width = ""
+
+    this.contentTarget.style.position = ""
+    this.contentTarget.style.left = ""
+    this.contentTarget.style.top = ""
+    this.contentTarget.style.bottom = ""
+    this.contentTarget.style.width = ""
+    this.contentTarget.style.zIndex = ""
+  }
+
+  updateState(affixed, useBottom) {
+    const changed = this.affixed !== affixed
+    this.affixed = affixed
+
+    this.element.classList.toggle("hakumi-affix-affixed", affixed)
+    this.element.classList.toggle("hakumi-affix-affixed-top", affixed && !useBottom)
+    this.element.classList.toggle("hakumi-affix-affixed-bottom", affixed && useBottom)
+
+    if (changed) {
+      this.dispatch("change", {
+        detail: {
+          affixed,
+          offsetTop: this.offsetTop,
+          offsetBottom: this.offsetBottom
+        }
+      })
+    }
+  }
+
+  attachListeners() {
+    const target = this.scrollTarget || window
+    target.addEventListener("scroll", this.handleScroll, { passive: true })
+    window.addEventListener("resize", this.handleResize)
+  }
+
+  detachListeners() {
+    const target = this.scrollTarget || window
+    target.removeEventListener("scroll", this.handleScroll)
+    window.removeEventListener("resize", this.handleResize)
+  }
+
+  resolveTarget() {
+    if (!this.hasTargetSelectorValue) return window
+    const target = document.querySelector(this.targetSelectorValue)
+    return target || window
+  }
+
+  getTargetRect() {
+    if (this.scrollTarget === window) {
+      return { top: 0, bottom: window.innerHeight }
+    }
+
+    return this.scrollTarget.getBoundingClientRect()
+  }
+
+  resolveOffsetTop() {
+    if (this.hasOffsetBottomValue) return 0
+    if (this.hasOffsetTopValue) return Number(this.offsetTopValue)
+    return 0
+  }
+
+  resolveOffsetBottom() {
+    if (this.hasOffsetBottomValue) return Number(this.offsetBottomValue)
+    return null
+  }
+
+  #exposeApi() {
+    this.element.hakumiAffix = {
+      check: () => this.updatePosition(),
+      update: () => this.updatePosition(),
+      isAffixed: () => this.affixed,
+      getState: () => ({
+        affixed: this.affixed,
+        offsetTop: this.offsetTop,
+        offsetBottom: this.offsetBottom,
+        targetSelector: this.targetSelectorValue || null
+      }),
+      setOffsetTop: (value) => this.setOffsetTop(value),
+      setOffsetBottom: (value) => this.setOffsetBottom(value)
+    }
+  }
+}

data/app/javascript/hakumi_components/controllers/hakumi/alert_controller.js

@@ -0,0 +1,46 @@
+import RegistryController from "../base/registry_controller.js"
+
+export default class extends RegistryController {
+  static targets = ["message", "description"]
+
+  registerApi() {
+    this.element.hakumiComponent = {
+      name: "alert",
+      version: 1,
+      singleton: false,
+      api: {
+        close: () => this.close(),
+        setMessage: (text) => this.setMessage(text),
+        setDescription: (text) => this.setDescription(text),
+        getMessage: () => this.getMessage(),
+        getDescription: () => this.getDescription()
+      }
+    }
+  }
+
+  close(event) {
+    if (event) event.preventDefault()
+    this.element.dispatchEvent(new CustomEvent("hakumi-component:hidden", { bubbles: true }))
+    this.element.remove()
+  }
+
+  setMessage(text) {
+    if (this.hasMessageTarget) {
+      this.messageTarget.textContent = text
+    }
+  }
+
+  setDescription(text) {
+    if (this.hasDescriptionTarget) {
+      this.descriptionTarget.textContent = text
+    }
+  }
+
+  getMessage() {
+    return this.hasMessageTarget ? this.messageTarget.textContent : null
+  }
+
+  getDescription() {
+    return this.hasDescriptionTarget ? this.descriptionTarget.textContent : null
+  }
+}