shadcn-rails 0.1.0 → 0.2.1

data/app/assets/javascripts/shadcn/controllers/select_controller.js

@@ -1,18 +1,26 @@
 import { Controller } from "@hotwired/stimulus"
+import { useClickOutside } from "stimulus-use"
+import { positionFloating } from "../utils/floating"
 
 /**
  * Select controller for custom select dropdowns
+ * Uses Floating UI for smart positioning and stimulus-use for click outside detection
  */
 export default class extends Controller {
   static targets = ["trigger", "content", "input", "item", "display", "checkIcon"]
   static values = {
-    value: String
+    value: String,
+    placement: { type: String, default: "bottom-start" },
+    sameWidth: { type: Boolean, default: true }
   }
 
   connect() {
     this.isOpen = false
     this.focusedIndex = -1
-    this.boundHandleClickOutside = this.handleClickOutside.bind(this)
+    this.cleanupFloating = null
+
+    // Use stimulus-use for click outside detection
+    useClickOutside(this)
 
     // Set initial value display
     if (this.valueValue) {
@@ -22,6 +30,14 @@ export default class extends Controller {
 
   disconnect() {
     this.close()
+    this.cleanupPositioning()
+  }
+
+  cleanupPositioning() {
+    if (this.cleanupFloating) {
+      this.cleanupFloating()
+      this.cleanupFloating = null
+    }
   }
 
   toggle(event) {
@@ -38,23 +54,24 @@ export default class extends Controller {
 
     this.isOpen = true
 
-    // Set trigger width as CSS variable for dropdown sizing
-    if (this.hasTriggerTarget && this.hasContentTarget) {
-      const triggerWidth = this.triggerTarget.offsetWidth
-      this.contentTarget.style.setProperty('--radix-select-trigger-width', `${triggerWidth}px`)
-    }
-
     if (this.hasContentTarget) {
       this.contentTarget.hidden = false
       this.contentTarget.dataset.state = "open"
+
+      // Use Floating UI for smart positioning
+      if (this.hasTriggerTarget) {
+        this.cleanupFloating = positionFloating(this.triggerTarget, this.contentTarget, {
+          placement: this.placementValue,
+          sameWidth: this.sameWidthValue,
+          maxHeight: 384 // max-h-96
+        })
+      }
     }
 
     if (this.hasTriggerTarget) {
       this.triggerTarget.setAttribute("aria-expanded", "true")
     }
 
-    document.addEventListener("click", this.boundHandleClickOutside)
-
     // Focus current value or first item
     this.focusedIndex = -1
     const currentItem = this.itemTargets.find(item => item.dataset.value === this.valueValue)
@@ -73,6 +90,9 @@ export default class extends Controller {
 
     this.isOpen = false
 
+    // Cleanup Floating UI auto-update
+    this.cleanupPositioning()
+
     if (this.hasContentTarget) {
       this.contentTarget.dataset.state = "closed"
       setTimeout(() => {
@@ -86,12 +106,18 @@ export default class extends Controller {
       this.triggerTarget.setAttribute("aria-expanded", "false")
     }
 
-    document.removeEventListener("click", this.boundHandleClickOutside)
     this.focusedIndex = -1
 
     this.dispatch("closed")
   }
 
+  // Called by stimulus-use when clicking outside the element
+  clickOutside(event) {
+    if (this.isOpen) {
+      this.close()
+    }
+  }
+
   select(event) {
     const item = event.currentTarget
     if (item.dataset.disabled !== undefined) return
@@ -132,12 +158,6 @@ export default class extends Controller {
     }
   }
 
-  handleClickOutside(event) {
-    if (!this.element.contains(event.target)) {
-      this.close()
-    }
-  }
-
   handleKeydown(event) {
     if (!this.isOpen) {
       if (event.key === "Enter" || event.key === " " || event.key === "ArrowDown") {

data/app/assets/javascripts/shadcn/controllers/sidebar_controller.js

@@ -1,4 +1,5 @@
 import { Controller } from "@hotwired/stimulus"
+import { useMatchMedia } from "stimulus-use"
 
 // Constants for sidebar dimensions
 const SIDEBAR_COOKIE_NAME = "sidebar:state"
@@ -7,6 +8,10 @@ const SIDEBAR_WIDTH = "16rem"
 const SIDEBAR_WIDTH_MOBILE = "18rem"
 const SIDEBAR_WIDTH_ICON = "3rem"
 
+/**
+ * Sidebar Controller
+ * Uses stimulus-use useMatchMedia for responsive behavior
+ */
 export default class extends Controller {
   static targets = ["sidebar"]
   static values = {
@@ -26,10 +31,13 @@ export default class extends Controller {
     this.handleKeyDown = this.handleKeyDown.bind(this)
     document.addEventListener("keydown", this.handleKeyDown)
 
-    // Set up mobile detection
+    // Use stimulus-use for responsive media query detection
     this.isMobile = window.innerWidth < 768
-    this.handleResize = this.handleResize.bind(this)
-    window.addEventListener("resize", this.handleResize)
+    useMatchMedia(this, {
+      mediaQueries: {
+        mobile: "(max-width: 767px)"
+      }
+    })
 
     // Initial state sync
     this.syncState()
@@ -37,7 +45,19 @@ export default class extends Controller {
 
   disconnect() {
     document.removeEventListener("keydown", this.handleKeyDown)
-    window.removeEventListener("resize", this.handleResize)
+  }
+
+  // Called by stimulus-use when mobile media query state changes
+  mobileChanged({ matches }) {
+    const wasMobile = this.isMobile
+    this.isMobile = matches
+
+    // Close mobile sidebar when switching to desktop
+    if (wasMobile && !this.isMobile) {
+      this.openMobileValue = false
+    }
+
+    this.syncState()
   }
 
   handleKeyDown(event) {
@@ -51,16 +71,6 @@ export default class extends Controller {
     }
   }
 
-  handleResize() {
-    const wasMobile = this.isMobile
-    this.isMobile = window.innerWidth < 768
-
-    // Close mobile sidebar when switching to desktop
-    if (wasMobile && !this.isMobile) {
-      this.openMobileValue = false
-    }
-  }
-
   toggle() {
     if (this.isMobile) {
       this.openMobileValue = !this.openMobileValue

data/app/assets/javascripts/shadcn/controllers/tooltip_controller.js

@@ -1,7 +1,9 @@
 import { Controller } from "@hotwired/stimulus"
+import { positionFloating } from "../utils/floating"
 
 /**
  * Tooltip controller for contextual information
+ * Uses Floating UI for smart positioning
  */
 export default class extends Controller {
   static targets = ["trigger", "content"]
@@ -15,10 +17,25 @@ export default class extends Controller {
   connect() {
     this.showTimeout = null
     this.hideTimeout = null
+    this.cleanupFloating = null
   }
 
   disconnect() {
     this.clearTimeouts()
+    this.cleanupPositioning()
+  }
+
+  cleanupPositioning() {
+    if (this.cleanupFloating) {
+      this.cleanupFloating()
+      this.cleanupFloating = null
+    }
+  }
+
+  get placement() {
+    // Convert side/align to Floating UI placement
+    const align = this.alignValue === "center" ? "" : `-${this.alignValue}`
+    return `${this.sideValue}${align}`
   }
 
   show() {
@@ -28,7 +45,14 @@ export default class extends Controller {
       if (this.hasContentTarget) {
         this.contentTarget.hidden = false
         this.contentTarget.dataset.state = "open"
-        this.positionTooltip()
+
+        // Use Floating UI for smart positioning
+        if (this.hasTriggerTarget) {
+          this.cleanupFloating = positionFloating(this.triggerTarget, this.contentTarget, {
+            placement: this.placement,
+            offset: 8
+          })
+        }
       }
     }, this.delayValue)
   }
@@ -36,6 +60,9 @@ export default class extends Controller {
   hide() {
     this.clearTimeouts()
 
+    // Cleanup Floating UI
+    this.cleanupPositioning()
+
     this.hideTimeout = setTimeout(() => {
       if (this.hasContentTarget) {
         this.contentTarget.dataset.state = "closed"
@@ -56,62 +83,4 @@ export default class extends Controller {
       this.hideTimeout = null
     }
   }
-
-  positionTooltip() {
-    if (!this.hasContentTarget || !this.hasTriggerTarget) return
-
-    const trigger = this.triggerTarget.getBoundingClientRect()
-    const tooltip = this.contentTarget
-    const tooltipRect = tooltip.getBoundingClientRect()
-
-    // Reset positioning
-    tooltip.style.position = "absolute"
-    tooltip.style.top = ""
-    tooltip.style.bottom = ""
-    tooltip.style.left = ""
-    tooltip.style.right = ""
-    tooltip.style.transform = ""
-
-    const gap = 8
-
-    switch (this.sideValue) {
-      case "top":
-        tooltip.style.bottom = "100%"
-        tooltip.style.marginBottom = `${gap}px`
-        break
-      case "bottom":
-        tooltip.style.top = "100%"
-        tooltip.style.marginTop = `${gap}px`
-        break
-      case "left":
-        tooltip.style.right = "100%"
-        tooltip.style.marginRight = `${gap}px`
-        tooltip.style.top = "50%"
-        tooltip.style.transform = "translateY(-50%)"
-        break
-      case "right":
-        tooltip.style.left = "100%"
-        tooltip.style.marginLeft = `${gap}px`
-        tooltip.style.top = "50%"
-        tooltip.style.transform = "translateY(-50%)"
-        break
-    }
-
-    if (this.sideValue === "top" || this.sideValue === "bottom") {
-      switch (this.alignValue) {
-        case "start":
-          tooltip.style.left = "0"
-          break
-        case "center":
-          tooltip.style.left = "50%"
-          tooltip.style.transform = "translateX(-50%)"
-          break
-        case "end":
-          tooltip.style.right = "0"
-          break
-      }
-    }
-
-    tooltip.dataset.side = this.sideValue
-  }
 }

data/app/assets/javascripts/shadcn/index.js

@@ -14,6 +14,7 @@
  */
 
 // Import all controllers
+import BaseMenuController from "./controllers/base_menu_controller"
 import AccordionController from "./controllers/accordion_controller"
 import AvatarController from "./controllers/avatar_controller"
 import CalendarController from "./controllers/calendar_controller"
@@ -47,8 +48,12 @@ import TooltipController from "./controllers/tooltip_controller"
 import InputOtpController from "./controllers/input_otp_controller"
 import SidebarController from "./controllers/sidebar_controller"
 
+// Import floating utility
+import { positionFloating, positionAtPoint } from "./utils/floating"
+
 // Export individual controllers
 export {
+  BaseMenuController,
   AccordionController,
   AvatarController,
   CalendarController,
@@ -80,7 +85,10 @@ export {
   ToggleController,
   ToggleGroupController,
   TooltipController,
-  SidebarController
+  SidebarController,
+  // Utilities
+  positionFloating,
+  positionAtPoint
 }
 
 // Controller definitions for registration

data/app/assets/javascripts/shadcn/utils/floating.js

@@ -0,0 +1,179 @@
+import { computePosition, autoUpdate, flip, shift, offset, size } from "@floating-ui/dom"
+
+/**
+ * Floating UI positioning utility for shadcn-rails components
+ *
+ * Provides smart positioning for dropdowns, popovers, tooltips, etc.
+ * that automatically handles:
+ * - Viewport edge detection (flip to opposite side)
+ * - Sliding along axis to stay in view (shift)
+ * - Consistent spacing (offset)
+ * - Dynamic content sizing
+ */
+
+/**
+ * Default middleware configuration
+ */
+const defaultMiddleware = [
+  offset(4),
+  flip({
+    fallbackAxisSideDirection: "start",
+    crossAxis: false
+  }),
+  shift({ padding: 8 })
+]
+
+/**
+ * Middleware that includes size constraints for dropdowns/selects
+ */
+const sizeMiddleware = (options = {}) => size({
+  apply({ availableWidth, availableHeight, elements }) {
+    Object.assign(elements.floating.style, {
+      maxWidth: `${Math.max(0, availableWidth)}px`,
+      maxHeight: options.maxHeight ? `${Math.min(options.maxHeight, availableHeight)}px` : `${Math.max(0, availableHeight - 10)}px`
+    })
+  },
+  padding: 10
+})
+
+/**
+ * Position a floating element relative to a reference element
+ *
+ * @param {HTMLElement} reference - The trigger/reference element
+ * @param {HTMLElement} floating - The floating content element
+ * @param {Object} options - Positioning options
+ * @param {string} options.placement - Placement (top, bottom, left, right, with -start/-end variants)
+ * @param {number} options.offset - Offset distance in pixels (default: 4)
+ * @param {boolean} options.sameWidth - Make floating element same width as reference
+ * @param {number} options.maxHeight - Maximum height for the floating element
+ * @param {Function} options.onPositioned - Callback after positioning
+ * @returns {Function} Cleanup function to stop auto-updates
+ */
+export function positionFloating(reference, floating, options = {}) {
+  const {
+    placement = "bottom-start",
+    offset: offsetValue = 4,
+    sameWidth = false,
+    maxHeight = null,
+    onPositioned = null
+  } = options
+
+  // Build middleware array
+  const middleware = [
+    offset(offsetValue),
+    flip({
+      fallbackAxisSideDirection: "start",
+      crossAxis: false
+    }),
+    shift({ padding: 8 })
+  ]
+
+  // Add size middleware if needed
+  if (maxHeight || sameWidth) {
+    middleware.push(size({
+      apply({ availableWidth, availableHeight, elements, rects }) {
+        const styles = {}
+
+        if (sameWidth) {
+          styles.width = `${rects.reference.width}px`
+          styles.minWidth = `${rects.reference.width}px`
+        }
+
+        if (maxHeight) {
+          styles.maxHeight = `${Math.min(maxHeight, availableHeight - 10)}px`
+        } else {
+          styles.maxHeight = `${Math.max(0, availableHeight - 10)}px`
+        }
+
+        Object.assign(elements.floating.style, styles)
+      },
+      padding: 10
+    }))
+  }
+
+  // Set up auto-updating position
+  const cleanup = autoUpdate(reference, floating, () => {
+    computePosition(reference, floating, {
+      placement,
+      middleware
+    }).then(({ x, y, placement: finalPlacement }) => {
+      // Apply position
+      Object.assign(floating.style, {
+        position: "absolute",
+        left: `${x}px`,
+        top: `${y}px`
+      })
+
+      // Update data-side attribute for animations
+      const side = finalPlacement.split("-")[0]
+      floating.dataset.side = side
+
+      // Call callback if provided
+      if (onPositioned) {
+        onPositioned({ x, y, placement: finalPlacement })
+      }
+    })
+  })
+
+  return cleanup
+}
+
+/**
+ * Position a context menu at specific coordinates
+ *
+ * @param {HTMLElement} floating - The floating content element
+ * @param {number} x - X coordinate (clientX from event)
+ * @param {number} y - Y coordinate (clientY from event)
+ * @param {Object} options - Positioning options
+ * @returns {void}
+ */
+export function positionAtPoint(floating, x, y, options = {}) {
+  const { maxHeight = null } = options
+
+  // Create a virtual reference element at the click point
+  const virtualRef = {
+    getBoundingClientRect() {
+      return {
+        width: 0,
+        height: 0,
+        x,
+        y,
+        top: y,
+        left: x,
+        right: x,
+        bottom: y
+      }
+    }
+  }
+
+  const middleware = [
+    offset(4),
+    flip(),
+    shift({ padding: 8 })
+  ]
+
+  if (maxHeight) {
+    middleware.push(size({
+      apply({ availableHeight, elements }) {
+        elements.floating.style.maxHeight = `${Math.min(maxHeight, availableHeight - 10)}px`
+      },
+      padding: 10
+    }))
+  }
+
+  computePosition(virtualRef, floating, {
+    placement: "bottom-start",
+    middleware
+  }).then(({ x: posX, y: posY, placement }) => {
+    Object.assign(floating.style, {
+      position: "fixed",
+      left: `${posX}px`,
+      top: `${posY}px`
+    })
+
+    const side = placement.split("-")[0]
+    floating.dataset.side = side
+  })
+}
+
+export { computePosition, autoUpdate, flip, shift, offset, size }

data/app/assets/stylesheets/shadcn/base.css

@@ -302,6 +302,29 @@ body {
   }
 }
 
+/* Tooltip animations - subtle pop effect */
+@keyframes tooltip-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96) translateY(2px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+@keyframes tooltip-out {
+  from {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.96) translateY(2px);
+  }
+}
+
 /* ============================================
    Animation Utility Classes
    ============================================ */
@@ -386,6 +409,15 @@ body {
   animation-name: slide-out-to-right;
 }
 
+/* Tooltip animation classes */
+.animate-tooltip-in {
+  animation: tooltip-in 150ms ease-out both;
+}
+
+.animate-tooltip-out {
+  animation: tooltip-out 100ms ease-in both;
+}
+
 .animate-spin {
   animation: spin 1s linear infinite;
 }

data/app/assets/stylesheets/shadcn/components.css

@@ -437,6 +437,18 @@ button[data-state="off"].shadcn-toggle {
   animation: fade-out 150ms ease-in, zoom-out 150ms ease-in;
 }
 
+/* ============================================
+   Context Menu Component
+   ============================================ */
+
+.shadcn-context-menu[data-state="open"] {
+  animation: fade-in 100ms ease-out, zoom-in 100ms ease-out;
+}
+
+.shadcn-context-menu[data-state="closed"] {
+  animation: fade-out 100ms ease-in, zoom-out 100ms ease-in;
+}
+
 /* ============================================
    Drawer Component
    ============================================ */

data/app/components/shadcn/accordion_component.html.erb

@@ -0,0 +1,8 @@
+<div class="<%= accordion_classes %>"
+     data-controller="shadcn--accordion"
+     data-shadcn--accordion-type-value="<%= @type %>"
+     data-shadcn--accordion-collapsible-value="<%= @collapsible %>"
+     <% if @default_value %>data-shadcn--accordion-default-value="<%= default_value_string %>"<% end %>
+     <%= tag_attributes %>>
+  <%= accordion_content %>
+</div>

data/app/components/shadcn/accordion_component.rb

@@ -37,27 +37,18 @@ module Shadcn
       @default_value = default_value
     end
 
-    def call
-      content_tag(:div, accordion_content, accordion_attributes)
-    end
-
     private
 
+    def accordion_classes
+      class_name
+    end
+
     def accordion_content
       safe_join([items, content].compact.flatten)
     end
 
-    def accordion_attributes
-      attrs = {
-        class: class_name,
-        "data-controller": "shadcn--accordion",
-        "data-shadcn--accordion-type-value": @type.to_s,
-        "data-shadcn--accordion-collapsible-value": @collapsible.to_s,
-        "data-shadcn--accordion-default-value": Array(@default_value).join(",")
-      }
-      attrs.merge!(html_options)
-      attrs.merge!(build_data)
-      attrs.compact
+    def default_value_string
+      Array(@default_value).join(",")
     end
   end
 end

data/app/components/shadcn/alert_component.html.erb

@@ -0,0 +1,6 @@
+<div role="alert" class="<%= alert_classes %>" <%= tag_attributes %>>
+  <%= icon if icon? %>
+  <%= title if title? %>
+  <%= description if description? %>
+  <%= content %>
+</div>

data/app/components/shadcn/alert_component.rb

@@ -48,28 +48,10 @@ module Shadcn
       @variant = variant.to_sym
     end
 
-    def call
-      content_tag(:div, alert_content, alert_attributes)
-    end
-
     private
 
-    def alert_content
-      safe_join([icon, title, description, content].compact)
-    end
-
     def alert_classes
       cn(BASE_CLASSES, VARIANTS[@variant], class_name)
     end
-
-    def alert_attributes
-      attrs = {
-        class: alert_classes,
-        role: "alert"
-      }
-      attrs.merge!(html_options)
-      attrs.merge!(build_data)
-      attrs.compact
-    end
   end
 end

data/app/components/shadcn/alert_dialog_component.html.erb

@@ -0,0 +1,12 @@
+<div class="<%= alert_dialog_classes %>"
+     data-controller="<%= alert_dialog_data_attrs[:controller] %>"
+     data-shadcn--dialog-open-value="<%= alert_dialog_data_attrs[:"shadcn--dialog-open-value"] %>"
+     data-shadcn--dialog-modal-value="<%= alert_dialog_data_attrs[:"shadcn--dialog-modal-value"] %>"
+     <%= tag_attributes %>>
+  <% if trigger? %>
+    <div data-shadcn--dialog-target="trigger" data-action="click->shadcn--dialog#open">
+      <%= trigger %>
+    </div>
+  <% end %>
+  <%= body if body? %>
+</div>