shadcn-rails 0.2.0 → 0.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6ed3ecfa5b3774e31da3ea629fe24151b003bdb80ab5e3032e726987e7756327
-  data.tar.gz: bdb60df75e3eac0c4e3e1eeea2a1d121865964d2aaf878ab3a037ef435f0f333
+  metadata.gz: 169b88e9623277a0a148a98510ea1b5f0fbe56f8edd12bd160c406aa6516c681
+  data.tar.gz: 0da7fa6d9b3e1e20a2ebd081dec32140a44641c4aadb2fd096ba0de5545ae848
 SHA512:
-  metadata.gz: 7f2ac29443aecaa53f1a989d070bb8d390e4b96308f0509b021129af1a8e27f1016b87938a17cc831fd0aca2e54f821c3a24561bb930637da0d5e5efe6fba5c2
-  data.tar.gz: '09d5d7e5293bf5ea755ac9911a049799d0a38464e16432c1597d18d860f401a874980a5f6f304e8ee9e9b2c8a1f1046957eabce7883d71f964b8cbdb09a7e96e'
+  metadata.gz: 4adc7d30a2a186e968569e0c11a899bea9efe640b6782e227aba2608fec962e2701355351d4fc56333dae4ef582fe8a9ec0f0662c06da01994593b2d2efb9376
+  data.tar.gz: 3f754ff7d630b0e630101da96f1a9255625bb919dc7ad3d9e7ff11b62ee575d3d434cd0dba0de35f3b9c7652a173eec730b826c136d9a9b209f468fbc1a2b791

data/CHANGELOG.md

@@ -7,9 +7,72 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.2.1] - 2025-11-27
+
+### Added
+
+- **Clipboard controller** for documentation site - Copy buttons now work with "Copied!" feedback
+- **Jest tests for ClipboardController** - Comprehensive test suite for copy functionality
+- **Sidecar templates** for all 47 components - Each component now has its own `.html.erb` template file
+- **Components page** in documentation - New `/docs/components` listing page
+- **Flexible class name support** - Components now accept both `class` and `class_name` attributes
+
+### Changed
+
+- **Floating UI migration started** - Begun work on migrating popover/dropdown positioning to Floating UI
+- **Tooltip animation polish** - Smoother entrance/exit animations
+- **Generator improvements** - Updated component generators with better defaults
+- **Field component updates** - Improved form field wrapper component
+
+### Fixed
+
+- **Copy button styling** - Fixed code block padding to prevent text overlap with Copy button
+- **Select dropdown clipping** - Fixed overflow issue causing white line through dropdown borders
+- **Sidebar component** - Fixed layout issues in sidebar navigation
+- **OTPSeparatorComponent** - Fixed rendering issues with OTP input separators
+- **Tooltip component styling** - Fixed visual styling issues
+- **Dashboard layout** - Fixed layout issues in example dashboard
+- **HTML escaping** - Use `escape_once` instead of `escape` to prevent double-escaping
+
+### Documentation
+
+- Added consistent widths to Select component examples
+- Fixed Form Integration example spacing between label and select
+- Updated links throughout docs to point to correct demo app URLs
+- Simplified homepage navigation structure
+- README updates with improved installation instructions
+
 ## [0.2.0] - 2025-11-27
 
-## [0.1.0] - 2024-11-27
+### Added
+
+- **Context Menu component** - Right-click context menus with full keyboard navigation
+- **stimulus-use integration** - Added `useClickOutside` for better click-outside detection across menu components
+- **BaseMenuController** - Shared base controller for menu components (DropdownMenu, ContextMenu, Menubar)
+- **Polymorphic menu items** - Menu items can render as buttons, links, or custom elements
+- **Two-way slider binding** - Sliders can now sync bidirectionally with input fields via `data-input-target`
+
+### Changed
+
+- Refactored menu controllers to use shared `BaseMenuController`
+- Improved click-outside handling using stimulus-use library
+- Better keyboard navigation across all menu components
+
+### Fixed
+
+- Combobox debouncing now works correctly
+- Context menu positioning and click handling
+- Radio group label click behavior
+- Interleaved content rendering in menus
+
+### Developer Experience
+
+- New `bin/bump` script for unified version bumping (replaces `bin/bump-version`)
+- New `bin/test` script to run both Ruby and JavaScript tests
+- Improved gemspec to exclude development files from published gem
+- Added comprehensive Jest test suite for Stimulus controllers
+
+## [0.1.0] - 2025-11-27
 
 ### Added
 
@@ -52,6 +115,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Accessibility guidelines
 - Installation instructions for various JavaScript bundlers
 
-[Unreleased]: https://github.com/iheanyi/shadcn-rails/compare/v0.2.0...HEAD
+[Unreleased]: https://github.com/iheanyi/shadcn-rails/compare/v0.2.1...HEAD
+[0.2.1]: https://github.com/iheanyi/shadcn-rails/compare/v0.2.0...v0.2.1
 [0.2.0]: https://github.com/iheanyi/shadcn-rails/compare/v0.1.0...v0.2.0
 [0.1.0]: https://github.com/iheanyi/shadcn-rails/releases/tag/v0.1.0

data/README.md

@@ -41,6 +41,26 @@ const application = Application.start()
 registerShadcnControllers(application)
 ```
 
+## Adding Components
+
+Copy components into your app for customization:
+
+```bash
+# List all available components
+rails generate shadcn:add --list
+
+# Add specific components
+rails generate shadcn:add button dialog tabs
+
+# Add all components
+rails generate shadcn:add --all
+
+# Add without Stimulus controllers
+rails generate shadcn:add dialog --exclude-controllers
+```
+
+Components are copied to `app/components/shadcn/` and controllers to `app/javascript/controllers/shadcn/`. Local files take precedence over the gem's built-in components.
+
 ## Quick Start
 
 ```erb
@@ -91,17 +111,10 @@ Configure colors in your initializer:
 # config/initializers/shadcn.rb
 Shadcn::Rails.configure do |config|
   config.base_color = "slate"  # neutral, slate, stone, gray, zinc
-  config.dark_mode = :class    # :class, :media
-  config.radius = "0.5rem"
+  config.dark_mode = :class    # :class, :media, :both
 end
 ```
 
-Or use the generator:
-
-```bash
-rails generate shadcn:theme slate
-```
-
 ## Stimulus Controllers
 
 All interactive components have corresponding Stimulus controllers:

data/__mocks__/@floating-ui/dom.js

@@ -0,0 +1,67 @@
+/**
+ * Mock for @floating-ui/dom
+ * Used in tests since JSDOM doesn't properly support the DOM APIs Floating UI needs
+ */
+
+// Store references for size middleware to apply
+let _computeRef = null
+let _computeFloating = null
+
+export const computePosition = async (reference, floating, options = {}) => {
+  _computeRef = reference
+  _computeFloating = floating
+
+  // Call size middleware apply if present
+  if (options.middleware) {
+    for (const mw of options.middleware) {
+      if (mw.name === 'size' && mw.applyFn) {
+        mw.applyFn({
+          availableWidth: 400,
+          availableHeight: 300,
+          elements: { floating },
+          rects: {
+            reference: {
+              width: reference?.getBoundingClientRect?.()?.width || 100,
+              height: reference?.getBoundingClientRect?.()?.height || 40
+            }
+          }
+        })
+      }
+    }
+  }
+
+  return {
+    x: 100,
+    y: 140,
+    placement: options.placement || 'bottom-start',
+    middlewareData: {}
+  }
+}
+
+export const autoUpdate = (reference, floating, update) => {
+  // Call update once immediately
+  update()
+  // Return cleanup function
+  return () => {}
+}
+
+export const flip = (options = {}) => ({
+  name: 'flip',
+  options
+})
+
+export const shift = (options = {}) => ({
+  name: 'shift',
+  options
+})
+
+export const offset = (value = 0) => ({
+  name: 'offset',
+  options: { mainAxis: value }
+})
+
+export const size = (options = {}) => ({
+  name: 'size',
+  options,
+  applyFn: options.apply
+})

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

@@ -1,10 +1,11 @@
 import { Controller } from "@hotwired/stimulus"
 import { useClickOutside, useDebounce } from "stimulus-use"
+import { positionFloating } from "../utils/floating"
 
 /**
  * Combobox controller for searchable select dropdown
  * Handles open/close, filtering, keyboard navigation, and item selection
- * Uses stimulus-use for click outside detection and debounced filtering
+ * Uses Floating UI for smart positioning and stimulus-use for utilities
  */
 export default class extends Controller {
   static targets = ["trigger", "content", "input", "list", "item", "empty", "displayValue", "hiddenInput"]
@@ -12,12 +13,14 @@ export default class extends Controller {
     open: { type: Boolean, default: false },
     value: { type: String, default: "" },
     selectedIndex: { type: Number, default: -1 },
-    debounceWait: { type: Number, default: 150 }
+    debounceWait: { type: Number, default: 150 },
+    placement: { type: String, default: "bottom-start" }
   }
   static debounces = ["filter"]
 
   connect() {
     this.boundHandleKeydown = this.handleKeydown.bind(this)
+    this.cleanupFloating = null
 
     // Use stimulus-use for click outside detection
     useClickOutside(this)
@@ -27,6 +30,14 @@ export default class extends Controller {
 
   disconnect() {
     document.removeEventListener("keydown", this.boundHandleKeydown)
+    this.cleanupPositioning()
+  }
+
+  cleanupPositioning() {
+    if (this.cleanupFloating) {
+      this.cleanupFloating()
+      this.cleanupFloating = null
+    }
   }
 
   toggle() {
@@ -45,6 +56,13 @@ export default class extends Controller {
     this.contentTarget.dataset.state = "open"
     this.triggerTarget.setAttribute("aria-expanded", "true")
 
+    // Use Floating UI for smart positioning
+    this.cleanupFloating = positionFloating(this.triggerTarget, this.contentTarget, {
+      placement: this.placementValue,
+      sameWidth: true,
+      maxHeight: 384 // max-h-96
+    })
+
     // Focus the input
     requestAnimationFrame(() => {
       if (this.hasInputTarget) {
@@ -67,6 +85,9 @@ export default class extends Controller {
     this.contentTarget.dataset.state = "closed"
     this.triggerTarget.setAttribute("aria-expanded", "false")
 
+    // Cleanup Floating UI
+    this.cleanupPositioning()
+
     // Hide after animation completes, then reset filter state
     const hideAndReset = () => {
       this.contentTarget.hidden = true

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

@@ -1,8 +1,9 @@
 import BaseMenuController from "./base_menu_controller"
+import { positionAtPoint } from "../utils/floating"
 
 /**
  * Context Menu controller for right-click menus
- * Extends BaseMenuController with context menu-specific positioning and event handling
+ * Extends BaseMenuController with Floating UI positioning at cursor location
  */
 export default class extends BaseMenuController {
   static targets = [...BaseMenuController.targets]
@@ -124,35 +125,7 @@ export default class extends BaseMenuController {
   positionContent() {
     if (!this.hasContentTarget) return
 
-    const content = this.contentTarget
-    const viewportWidth = window.innerWidth
-    const viewportHeight = window.innerHeight
-
-    // Reset position to measure actual size
-    content.style.left = "0"
-    content.style.top = "0"
-
-    const contentRect = content.getBoundingClientRect()
-
-    // Calculate position, keeping menu within viewport
-    let x = this.mouseX
-    let y = this.mouseY
-
-    // Adjust if menu would overflow right edge
-    if (x + contentRect.width > viewportWidth) {
-      x = viewportWidth - contentRect.width - 8
-    }
-
-    // Adjust if menu would overflow bottom edge
-    if (y + contentRect.height > viewportHeight) {
-      y = viewportHeight - contentRect.height - 8
-    }
-
-    // Ensure menu doesn't go off left or top edge
-    x = Math.max(8, x)
-    y = Math.max(8, y)
-
-    content.style.left = `${x}px`
-    content.style.top = `${y}px`
+    // Use Floating UI for smart positioning at cursor location
+    positionAtPoint(this.contentTarget, this.mouseX, this.mouseY)
   }
 }

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

@@ -1,8 +1,9 @@
 import BaseMenuController from "./base_menu_controller"
+import { positionFloating } from "../utils/floating"
 
 /**
  * Dropdown controller for dropdown menus
- * Extends BaseMenuController with dropdown-specific positioning
+ * Extends BaseMenuController with Floating UI positioning
  */
 export default class extends BaseMenuController {
   static targets = [...BaseMenuController.targets]
@@ -12,53 +13,43 @@ export default class extends BaseMenuController {
     side: { type: String, default: "bottom" }
   }
 
-  show(event) {
-    // Store side value for positioning before showing
-    if (this.hasContentTarget) {
-      this.contentTarget.dataset.side = this.sideValue
+  connect() {
+    this.cleanupFloating = null
+    super.connect()
+  }
+
+  disconnect() {
+    this.cleanupPositioning()
+    super.disconnect()
+  }
+
+  cleanupPositioning() {
+    if (this.cleanupFloating) {
+      this.cleanupFloating()
+      this.cleanupFloating = null
     }
-    super.show(event)
+  }
+
+  get placement() {
+    // Convert side/align to Floating UI placement
+    const align = this.alignValue === "center" ? "" : `-${this.alignValue}`
+    return `${this.sideValue}${align}`
   }
 
   positionContent() {
     if (!this.hasContentTarget || !this.hasTriggerTarget) return
 
-    const trigger = this.triggerTarget.getBoundingClientRect()
-    const content = this.contentTarget
-
-    // Position based on side and align
-    content.style.position = "absolute"
-    content.style.minWidth = `${trigger.width}px`
-
-    switch (this.sideValue) {
-      case "top":
-        content.style.bottom = "100%"
-        content.style.top = "auto"
-        content.style.marginBottom = "4px"
-        break
-      case "bottom":
-      default:
-        content.style.top = "100%"
-        content.style.bottom = "auto"
-        content.style.marginTop = "4px"
-        break
-    }
+    // Use Floating UI for smart positioning
+    this.cleanupFloating = positionFloating(this.triggerTarget, this.contentTarget, {
+      placement: this.placement,
+      offset: 4,
+      sameWidth: false
+    })
+  }
 
-    switch (this.alignValue) {
-      case "start":
-        content.style.left = "0"
-        content.style.right = "auto"
-        break
-      case "center":
-        content.style.left = "50%"
-        content.style.transform = "translateX(-50%)"
-        break
-      case "end":
-      default:
-        content.style.right = "0"
-        content.style.left = "auto"
-        break
-    }
+  hideMenu() {
+    this.cleanupPositioning()
+    super.hideMenu()
   }
 
   toggleCheckbox(event) {

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

@@ -1,20 +1,25 @@
 import { Controller } from "@hotwired/stimulus"
+import { positionFloating } from "../utils/floating"
 
 /**
  * Hover Card Controller
  * Handles showing/hiding content on hover with delays
+ * Uses Floating UI for smart positioning
  */
 export default class extends Controller {
   static targets = ["trigger", "content"]
   static values = {
     openDelay: { type: Number, default: 700 },
-    closeDelay: { type: Number, default: 300 }
+    closeDelay: { type: Number, default: 300 },
+    side: { type: String, default: "bottom" },
+    align: { type: String, default: "center" }
   }
 
   connect() {
     this.openTimeout = null
     this.closeTimeout = null
     this.isOpen = false
+    this.cleanupFloating = null
 
     this.triggerTarget.addEventListener("mouseenter", this.scheduleOpen.bind(this))
     this.triggerTarget.addEventListener("mouseleave", this.scheduleClose.bind(this))
@@ -27,6 +32,20 @@ export default class extends Controller {
 
   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}`
   }
 
   scheduleOpen() {
@@ -67,7 +86,12 @@ export default class extends Controller {
     this.isOpen = true
     this.contentTarget.style.display = "block"
     this.contentTarget.setAttribute("data-state", "open")
-    this.positionContent()
+
+    // Use Floating UI for smart positioning
+    this.cleanupFloating = positionFloating(this.triggerTarget, this.contentTarget, {
+      placement: this.placement,
+      offset: 8
+    })
 
     this.dispatch("open")
   }
@@ -78,6 +102,9 @@ export default class extends Controller {
     this.isOpen = false
     this.contentTarget.setAttribute("data-state", "closed")
 
+    // Cleanup Floating UI
+    this.cleanupPositioning()
+
     // Wait for animation to complete
     setTimeout(() => {
       if (!this.isOpen) {
@@ -87,57 +114,4 @@ export default class extends Controller {
 
     this.dispatch("close")
   }
-
-  positionContent() {
-    const trigger = this.triggerTarget.getBoundingClientRect()
-    const content = this.contentTarget
-    const side = content.dataset.side || "bottom"
-    const align = content.dataset.align || "center"
-
-    // Reset position
-    content.style.top = ""
-    content.style.left = ""
-    content.style.right = ""
-    content.style.bottom = ""
-
-    const gap = 8 // Gap between trigger and content
-
-    switch (side) {
-      case "top":
-        content.style.bottom = "100%"
-        content.style.marginBottom = `${gap}px`
-        break
-      case "bottom":
-        content.style.top = "100%"
-        content.style.marginTop = `${gap}px`
-        break
-      case "left":
-        content.style.right = "100%"
-        content.style.marginRight = `${gap}px`
-        content.style.top = "0"
-        break
-      case "right":
-        content.style.left = "100%"
-        content.style.marginLeft = `${gap}px`
-        content.style.top = "0"
-        break
-    }
-
-    // Handle alignment for top/bottom
-    if (side === "top" || side === "bottom") {
-      switch (align) {
-        case "start":
-          content.style.left = "0"
-          break
-        case "end":
-          content.style.right = "0"
-          break
-        case "center":
-        default:
-          content.style.left = "50%"
-          content.style.transform = "translateX(-50%)"
-          break
-      }
-    }
-  }
 }

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

@@ -1,9 +1,10 @@
 import { Controller } from "@hotwired/stimulus"
 import { useClickOutside } from "stimulus-use"
+import { positionFloating } from "../utils/floating"
 
 /**
  * Popover controller for rich content overlays
- * Uses stimulus-use for click outside detection
+ * Uses Floating UI for smart positioning and stimulus-use for click outside detection
  */
 export default class extends Controller {
   static targets = ["trigger", "content"]
@@ -15,6 +16,8 @@ export default class extends Controller {
   }
 
   connect() {
+    this.cleanupFloating = null
+
     // Use stimulus-use for click outside detection
     useClickOutside(this)
 
@@ -25,6 +28,20 @@ export default class extends Controller {
 
   disconnect() {
     this.hide()
+    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}`
   }
 
   toggle(event) {
@@ -44,8 +61,14 @@ export default class extends Controller {
     if (this.hasContentTarget) {
       this.contentTarget.hidden = false
       this.contentTarget.dataset.state = "open"
-      this.contentTarget.dataset.side = this.sideValue
-      this.positionContent()
+
+      // Use Floating UI for smart positioning
+      if (this.hasTriggerTarget) {
+        this.cleanupFloating = positionFloating(this.triggerTarget, this.contentTarget, {
+          placement: this.placement,
+          offset: 8
+        })
+      }
     }
 
     if (this.modalValue) {
@@ -61,6 +84,9 @@ export default class extends Controller {
 
     this.openValue = false
 
+    // Cleanup Floating UI auto-update
+    this.cleanupPositioning()
+
     if (this.hasContentTarget) {
       this.contentTarget.dataset.state = "closed"
       setTimeout(() => {
@@ -87,55 +113,4 @@ export default class extends Controller {
       this.hide()
     }
   }
-
-  positionContent() {
-    if (!this.hasContentTarget || !this.hasTriggerTarget) return
-
-    const trigger = this.triggerTarget.getBoundingClientRect()
-    const content = this.contentTarget
-
-    content.style.position = "absolute"
-
-    const gap = 8
-
-    switch (this.sideValue) {
-      case "top":
-        content.style.bottom = "100%"
-        content.style.top = "auto"
-        content.style.marginBottom = `${gap}px`
-        break
-      case "bottom":
-        content.style.top = "100%"
-        content.style.bottom = "auto"
-        content.style.marginTop = `${gap}px`
-        break
-      case "left":
-        content.style.right = "100%"
-        content.style.left = "auto"
-        content.style.marginRight = `${gap}px`
-        break
-      case "right":
-        content.style.left = "100%"
-        content.style.right = "auto"
-        content.style.marginLeft = `${gap}px`
-        break
-    }
-
-    switch (this.alignValue) {
-      case "start":
-        content.style.left = "0"
-        content.style.right = "auto"
-        break
-      case "center":
-        if (this.sideValue === "top" || this.sideValue === "bottom") {
-          content.style.left = "50%"
-          content.style.transform = "translateX(-50%)"
-        }
-        break
-      case "end":
-        content.style.right = "0"
-        content.style.left = "auto"
-        break
-    }
-  }
 }