m9sh 0.1.0

data/app/components/m9sh/tooltip_component.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module M9sh
+  class TooltipComponent < BaseComponent
+    include Utilities
+
+    renders_one :trigger, lambda { |&block|
+      tag.div(
+        data: {
+          action: "mouseenter->m9sh--tooltip#show mouseleave->m9sh--tooltip#hide",
+          m9sh__tooltip_target: "trigger"
+        }
+      ) { block.call }
+    }
+
+    renders_one :tooltip_content, lambda { |&block|
+      tag.div(
+        class: "absolute z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground shadow-md hidden animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        data: {
+          m9sh__tooltip_target: "content"
+        },
+        role: "tooltip"
+      ) { block.call }
+    }
+
+    def initialize(side: "top", delay: 200, **extra_attrs)
+      @side = side
+      @delay = delay
+      super(**extra_attrs)
+    end
+
+    def call
+      tag.div(
+        **component_attrs("relative inline-block"),
+        data: {
+          controller: "m9sh--tooltip",
+          m9sh__tooltip_side_value: @side,
+          m9sh__tooltip_delay_value: @delay
+        }
+      ) do
+        safe_join([
+          trigger,
+          tooltip_content
+        ].compact)
+      end
+    end
+  end
+end

data/app/components/m9sh/typography_component.rb

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+module M9sh
+  class TypographyComponent < BaseComponent
+    include Utilities
+
+    VARIANTS = {
+      h1: "scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl",
+      h2: "scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0",
+      h3: "scroll-m-20 text-2xl font-semibold tracking-tight",
+      h4: "scroll-m-20 text-xl font-semibold tracking-tight",
+      p: "leading-7 [&:not(:first-child)]:mt-6",
+      blockquote: "mt-6 border-l-2 pl-6 italic",
+      list: "my-6 ml-6 list-disc [&>li]:mt-2",
+      inline_code: "relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold",
+      lead: "text-xl text-muted-foreground",
+      large: "text-lg font-semibold",
+      small: "text-sm font-medium leading-none",
+      muted: "text-sm text-muted-foreground"
+    }.freeze
+
+    TAGS = {
+      h1: :h1,
+      h2: :h2,
+      h3: :h3,
+      h4: :h4,
+      p: :p,
+      blockquote: :blockquote,
+      list: :ul,
+      inline_code: :code,
+      lead: :p,
+      large: :div,
+      small: :small,
+      muted: :p
+    }.freeze
+
+    def initialize(variant: :p, tag: nil, **extra_attrs)
+      @variant = variant.to_sym
+      @tag = tag || TAGS[@variant]
+      super(**extra_attrs)
+    end
+
+    def call
+      tag.public_send(
+        @tag,
+        **component_attrs(variant_classes)
+      ) { content }
+    end
+
+    private
+
+    def variant_classes
+      VARIANTS[@variant] || VARIANTS[:p]
+    end
+  end
+end

data/app/components/m9sh/utilities.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module M9sh
+  module Utilities
+    # Merge class names intelligently, handling Tailwind utility conflicts
+    def cn(*class_strings)
+      class_strings
+        .flatten
+        .compact
+        .map(&:to_s)
+        .map(&:strip)
+        .reject(&:empty?)
+        .join(" ")
+        .split
+        .uniq
+        .join(" ")
+    end
+
+    # Generate variant classes based on variant and size props
+    def variant_classes(variant_styles, variant, size = nil)
+      classes = variant_styles.dig(:variants, variant.to_sym) || variant_styles[:default]
+      size_classes = size ? variant_styles.dig(:sizes, size.to_sym) : nil
+      cn(classes, size_classes)
+    end
+  end
+end

data/app/javascript/controllers/m9sh/accordion_controller.js

@@ -0,0 +1,110 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["item", "button", "content", "trigger"]
+  static values = {
+    type: { type: String, default: "single" },
+    collapsible: { type: Boolean, default: true },
+    default: String
+  }
+
+  connect() {
+    this.openItems = new Set()
+
+    if (this.hasDefaultValue) {
+      this.openItems.add(this.defaultValue)
+      this.updateItemStates()
+    }
+  }
+
+  toggle(event) {
+    event.preventDefault()
+
+    const button = event.currentTarget
+    const item = button.closest('[data-m9sh--accordion-target="item"]')
+    const value = item.dataset.value
+
+    if (this.typeValue === "single") {
+      this.toggleSingle(value)
+    } else {
+      this.toggleMultiple(value)
+    }
+
+    this.updateItemStates()
+  }
+
+  toggleSingle(value) {
+    if (this.openItems.has(value)) {
+      if (this.collapsibleValue) {
+        this.openItems.clear()
+      }
+    } else {
+      this.openItems.clear()
+      this.openItems.add(value)
+    }
+  }
+
+  toggleMultiple(value) {
+    if (this.openItems.has(value)) {
+      this.openItems.delete(value)
+    } else {
+      this.openItems.add(value)
+    }
+  }
+
+  updateItemStates() {
+    this.itemTargets.forEach(item => {
+      const value = item.dataset.value
+      const isOpen = this.openItems.has(value)
+      const button = item.querySelector('[data-m9sh--accordion-target="button"]')
+      const content = item.querySelector('[data-m9sh--accordion-target="content"]')
+
+      if (button) {
+        button.setAttribute("aria-expanded", isOpen)
+        button.dataset.state = isOpen ? "open" : "closed"
+      }
+
+      if (content) {
+        content.dataset.state = isOpen ? "open" : "closed"
+
+        if (isOpen) {
+          // Open: show element, set height to 0, then animate to full height
+          content.style.display = "block"
+          content.style.overflow = "hidden"
+
+          // Force reflow
+          content.offsetHeight
+
+          const height = content.scrollHeight
+          content.style.height = height + "px"
+
+          // After animation completes, remove fixed height
+          setTimeout(() => {
+            if (this.openItems.has(value)) {
+              content.style.height = "auto"
+              content.style.overflow = "visible"
+            }
+          }, 300)
+        } else {
+          // Close: set current height, then animate to 0
+          const height = content.scrollHeight
+          content.style.height = height + "px"
+          content.style.overflow = "hidden"
+
+          // Force reflow
+          content.offsetHeight
+
+          content.style.height = "0px"
+
+          // After animation, hide element
+          setTimeout(() => {
+            if (!this.openItems.has(value)) {
+              content.style.display = "none"
+              content.style.height = ""
+            }
+          }, 300)
+        }
+      }
+    })
+  }
+}

data/app/javascript/controllers/m9sh/alert_dialog_controller.js

@@ -0,0 +1,47 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["overlay", "content"]
+
+  connect() {
+    this.isOpen = false
+  }
+
+  open(event) {
+    if (event) event.preventDefault()
+
+    this.isOpen = true
+    document.body.style.overflow = "hidden"
+
+    this.overlayTarget.classList.remove("hidden")
+    this.overlayTarget.setAttribute("data-state", "open")
+
+    this.contentTarget.classList.remove("hidden")
+    this.contentTarget.setAttribute("data-state", "open")
+  }
+
+  close(event) {
+    if (event) event.preventDefault()
+
+    this.isOpen = false
+    document.body.style.overflow = ""
+
+    this.overlayTarget.setAttribute("data-state", "closed")
+    this.contentTarget.setAttribute("data-state", "closed")
+
+    setTimeout(() => {
+      if (!this.isOpen) {
+        this.overlayTarget.classList.add("hidden")
+        this.contentTarget.classList.add("hidden")
+      }
+    }, 200)
+  }
+
+  stopPropagation(event) {
+    event.stopPropagation()
+  }
+
+  disconnect() {
+    document.body.style.overflow = ""
+  }
+}

data/app/javascript/controllers/m9sh/collapsible_controller.js

@@ -0,0 +1,57 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["content", "inner"]
+  static values = {
+    open: { type: Boolean, default: false }
+  }
+
+  connect() {
+    this.updateState()
+  }
+
+  openValueChanged() {
+    this.updateState()
+  }
+
+  toggle(event) {
+    if (event) event.preventDefault()
+    this.openValue = !this.openValue
+  }
+
+  updateState() {
+    if (!this.hasContentTarget) return
+
+    if (this.openValue) {
+      this.open()
+    } else {
+      this.close()
+    }
+  }
+
+  open() {
+    this.contentTarget.setAttribute("data-state", "open")
+    this.contentTarget.style.height = "auto"
+
+    const height = this.innerTarget.scrollHeight
+    this.contentTarget.style.height = "0px"
+
+    setTimeout(() => {
+      this.contentTarget.style.height = `${height}px`
+    }, 10)
+
+    setTimeout(() => {
+      this.contentTarget.style.height = "auto"
+    }, 310)
+  }
+
+  close() {
+    const height = this.innerTarget.scrollHeight
+    this.contentTarget.style.height = `${height}px`
+
+    setTimeout(() => {
+      this.contentTarget.setAttribute("data-state", "closed")
+      this.contentTarget.style.height = "0px"
+    }, 10)
+  }
+}

data/app/javascript/controllers/m9sh/dialog_controller.js

@@ -0,0 +1,119 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["overlay", "content", "trigger"]
+  static values = { open: Boolean }
+
+  connect() {
+    this.boundHandleEscape = this.handleEscape.bind(this)
+
+    if (this.openValue) {
+      this.show()
+    }
+  }
+
+  disconnect() {
+    document.removeEventListener("keydown", this.boundHandleEscape)
+  }
+
+  open(event) {
+    event.preventDefault()
+    this.openValue = true
+    this.show()
+  }
+
+  close(event) {
+    if (event) event.preventDefault()
+    this.openValue = false
+    this.hide()
+  }
+
+  show() {
+    if (this.hasOverlayTarget) {
+      this.overlayTarget.style.display = ""
+      this.overlayTarget.dataset.state = "open"
+
+      if (this.hasContentTarget) {
+        this.contentTarget.dataset.state = "open"
+      }
+
+      // Add event listener for escape key
+      document.addEventListener("keydown", this.boundHandleEscape)
+
+      // Focus trap
+      this.trapFocus()
+
+      // Prevent body scroll
+      document.body.style.overflow = "hidden"
+    }
+  }
+
+  hide() {
+    if (this.hasOverlayTarget) {
+      this.overlayTarget.dataset.state = "closed"
+
+      if (this.hasContentTarget) {
+        this.contentTarget.dataset.state = "closed"
+      }
+
+      // Remove event listener
+      document.removeEventListener("keydown", this.boundHandleEscape)
+
+      // Restore body scroll
+      document.body.style.overflow = ""
+
+      // Hide after animation
+      setTimeout(() => {
+        if (!this.openValue && this.hasOverlayTarget) {
+          this.overlayTarget.style.display = "none"
+        }
+      }, 200)
+    }
+  }
+
+  handleBackdropClick(event) {
+    // Only close if clicking directly on overlay, not content
+    if (event.target === this.overlayTarget) {
+      this.close()
+    }
+  }
+
+  handleEscape(event) {
+    if (event.key === "Escape" || event.keyCode === 27) {
+      this.close()
+    }
+  }
+
+  trapFocus() {
+    if (!this.hasContentTarget) return
+
+    const focusableElements = this.contentTarget.querySelectorAll(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    )
+
+    if (focusableElements.length === 0) return
+
+    const firstElement = focusableElements[0]
+    const lastElement = focusableElements[focusableElements.length - 1]
+
+    // Focus first element
+    firstElement.focus()
+
+    // Trap focus within dialog
+    this.contentTarget.addEventListener("keydown", (event) => {
+      if (event.key !== "Tab") return
+
+      if (event.shiftKey) {
+        if (document.activeElement === firstElement) {
+          event.preventDefault()
+          lastElement.focus()
+        }
+      } else {
+        if (document.activeElement === lastElement) {
+          event.preventDefault()
+          firstElement.focus()
+        }
+      }
+    })
+  }
+}

data/app/javascript/controllers/m9sh/dropdown_menu_controller.js

@@ -0,0 +1,103 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["trigger", "content"]
+  static values = {
+    align: { type: String, default: "end" },
+    side: { type: String, default: "bottom" }
+  }
+
+  connect() {
+    this.isOpen = false
+    this.positionContent()
+  }
+
+  toggle(event) {
+    event.stopPropagation()
+    this.isOpen ? this.close() : this.open()
+  }
+
+  open() {
+    if (this.isOpen) return
+
+    this.isOpen = true
+    this.contentTarget.classList.remove("hidden")
+    this.positionContent()
+
+    // Add animation classes
+    requestAnimationFrame(() => {
+      this.contentTarget.classList.add("transform", "opacity-100", "scale-100")
+      this.contentTarget.classList.remove("opacity-0", "scale-95")
+    })
+  }
+
+  close() {
+    if (!this.isOpen) return
+
+    this.isOpen = false
+
+    // Add closing animation
+    this.contentTarget.classList.add("opacity-0", "scale-95")
+    this.contentTarget.classList.remove("opacity-100", "scale-100")
+
+    // Hide after animation
+    setTimeout(() => {
+      if (!this.isOpen) {
+        this.contentTarget.classList.add("hidden")
+      }
+    }, 75)
+  }
+
+  hide(event) {
+    // Don't hide if clicking inside the dropdown
+    if (this.element.contains(event.target)) return
+    this.close()
+  }
+
+  positionContent() {
+    if (!this.hasTriggerTarget || !this.hasContentTarget) return
+
+    const triggerRect = this.triggerTarget.getBoundingClientRect()
+    const contentRect = this.contentTarget.getBoundingClientRect()
+    const viewportHeight = window.innerHeight
+    const viewportWidth = window.innerWidth
+
+    let top = 0
+    let left = 0
+
+    // Vertical positioning
+    if (this.sideValue === "top") {
+      top = -contentRect.height - 4
+    } else {
+      top = triggerRect.height + 4
+    }
+
+    // Horizontal positioning
+    if (this.alignValue === "start") {
+      left = 0
+    } else if (this.alignValue === "center") {
+      left = (triggerRect.width - contentRect.width) / 2
+    } else {
+      left = triggerRect.width - contentRect.width
+    }
+
+    // Adjust if content would go outside viewport
+    const absoluteTop = triggerRect.top + top
+    const absoluteLeft = triggerRect.left + left
+
+    if (absoluteTop < 0) {
+      top = triggerRect.height + 4
+    } else if (absoluteTop + contentRect.height > viewportHeight) {
+      top = -contentRect.height - 4
+    }
+
+    if (absoluteLeft < 0) {
+      left = 0
+    } else if (absoluteLeft + contentRect.width > viewportWidth) {
+      left = triggerRect.width - contentRect.width
+    }
+
+    this.contentTarget.style.top = `${top}px`
+    this.contentTarget.style.left = `${left}px`
+  }
+}

data/app/javascript/controllers/m9sh/hover_card_controller.js

@@ -0,0 +1,66 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["trigger", "content"]
+  static values = {
+    openDelay: { type: Number, default: 200 },
+    closeDelay: { type: Number, default: 300 }
+  }
+
+  connect() {
+    this.showTimeout = null
+    this.hideTimeout = null
+  }
+
+  disconnect() {
+    this.clearTimeouts()
+  }
+
+  show() {
+    this.clearTimeouts()
+
+    this.showTimeout = setTimeout(() => {
+      this.contentTarget.classList.remove("hidden")
+      this.contentTarget.setAttribute("data-state", "open")
+      this.positionContent()
+    }, this.openDelayValue)
+  }
+
+  hide() {
+    this.clearTimeouts()
+
+    this.hideTimeout = setTimeout(() => {
+      this.contentTarget.setAttribute("data-state", "closed")
+
+      setTimeout(() => {
+        this.contentTarget.classList.add("hidden")
+      }, 150)
+    }, this.closeDelayValue)
+  }
+
+  cancelHide() {
+    this.clearTimeouts()
+  }
+
+  clearTimeouts() {
+    if (this.showTimeout) {
+      clearTimeout(this.showTimeout)
+      this.showTimeout = null
+    }
+    if (this.hideTimeout) {
+      clearTimeout(this.hideTimeout)
+      this.hideTimeout = null
+    }
+  }
+
+  positionContent() {
+    if (!this.hasContentTarget) return
+
+    const triggerRect = this.triggerTarget.getBoundingClientRect()
+
+    // Position below the trigger, aligned to the left
+    this.contentTarget.style.top = "100%"
+    this.contentTarget.style.left = "0"
+    this.contentTarget.style.marginTop = "0.5rem"
+  }
+}