shadcn-rails 0.1.0 → 0.2.0

data/Rakefile

@@ -27,3 +27,69 @@ Rake::TestTask.new(:test_generators) do |t|
 end
 
 task default: :test
+
+# Release tasks
+namespace :release do
+  desc "Check if versions are in sync between Ruby gem and npm package"
+  task :check_versions do
+    ruby_version = File.read("lib/shadcn/rails/version.rb").match(/VERSION = "(.+?)"/)[1]
+    npm_version = JSON.parse(File.read("package.json"))["version"]
+
+    puts "Ruby gem version: #{ruby_version}"
+    puts "npm package version: #{npm_version}"
+
+    if ruby_version == npm_version
+      puts "\n✓ Versions are in sync"
+    else
+      puts "\n✗ Versions are out of sync!"
+      exit 1
+    end
+  end
+
+  desc "Bump version (usage: rake 'release:bump[patch]' or rake 'release:bump[1.0.0]')"
+  task :bump, [:type] do |_, args|
+    type = args[:type] || "patch"
+    system("bin/bump #{type}")
+  end
+
+  desc "Bump version without committing (usage: rake 'release:bump_only[patch]')"
+  task :bump_only, [:type] do |_, args|
+    type = args[:type] || "patch"
+    system("bin/bump #{type} --no-commit")
+  end
+
+  desc "Build both gem and npm package"
+  task :build do
+    puts "Building npm package..."
+    system("npm run build") || abort("npm build failed")
+
+    puts "\nBuilding gem..."
+    system("gem build shadcn-rails.gemspec") || abort("gem build failed")
+
+    puts "\n✓ Both packages built successfully"
+  end
+
+  desc "Run all tests (Ruby and JavaScript)"
+  task :test do
+    system("bin/test") || abort("Tests failed")
+  end
+
+  desc "Prepare for release (check versions, run tests, build packages)"
+  task prepare: [:check_versions, "release:test", :build]
+
+  desc "Full release (run bin/release script)"
+  task :publish do
+    exec("bin/release")
+  end
+
+  desc "Dry run of release (shows what would happen)"
+  task :dry_run do
+    exec("bin/release --dry-run")
+  end
+end
+
+desc "Show current version"
+task :version do
+  require_relative "lib/shadcn/rails/version"
+  puts Shadcn::Rails::VERSION
+end

data/__tests__/controllers/combobox_controller.test.js

@@ -26,6 +26,7 @@ describe("ComboboxController", () => {
       open = false,
       value = "",
       selectedIndex = -1,
+      debounceWait = 0, // Default to 0 for tests (no debounce delay)
       items = [
         { value: "react", label: "React" },
         { value: "vue", label: "Vue" },
@@ -57,6 +58,7 @@ describe("ComboboxController", () => {
         data-shadcn--combobox-open-value="${open}"
         data-shadcn--combobox-value-value="${value}"
         data-shadcn--combobox-selected-index-value="${selectedIndex}"
+        data-shadcn--combobox-debounce-wait-value="${debounceWait}"
       >
         <button
           data-shadcn--combobox-target="trigger"
@@ -293,9 +295,15 @@ describe("ComboboxController", () => {
       controller = setup.controller
     })
 
-    it("filters items based on input value", () => {
-      controller.inputTarget.value = "react"
+    // Helper to run filter and wait for debounce (debounceWait=0 still uses setTimeout)
+    async function filterAndWait() {
       controller.filter()
+      await new Promise(resolve => setTimeout(resolve, 0))
+    }
+
+    it("filters items based on input value", async () => {
+      controller.inputTarget.value = "react"
+      await filterAndWait()
 
       expect(controller.itemTargets[0].style.display).toBe("") // React - visible
       expect(controller.itemTargets[1].style.display).toBe("none") // Vue - hidden
@@ -303,16 +311,16 @@ describe("ComboboxController", () => {
       expect(controller.itemTargets[3].style.display).toBe("none") // Svelte - hidden
     })
 
-    it("is case insensitive when filtering", () => {
+    it("is case insensitive when filtering", async () => {
       controller.inputTarget.value = "REACT"
-      controller.filter()
+      await filterAndWait()
 
       expect(controller.itemTargets[0].style.display).toBe("") // React matches
     })
 
-    it("filters by label attribute", () => {
+    it("filters by label attribute", async () => {
       controller.inputTarget.value = "Vue"
-      controller.filter()
+      await filterAndWait()
 
       expect(controller.itemTargets[0].style.display).toBe("none")
       expect(controller.itemTargets[1].style.display).toBe("") // Vue visible
@@ -320,9 +328,9 @@ describe("ComboboxController", () => {
       expect(controller.itemTargets[3].style.display).toBe("none")
     })
 
-    it("filters by value attribute", () => {
+    it("filters by value attribute", async () => {
       controller.inputTarget.value = "angular"
-      controller.filter()
+      await filterAndWait()
 
       expect(controller.itemTargets[0].style.display).toBe("none")
       expect(controller.itemTargets[1].style.display).toBe("none")
@@ -330,63 +338,63 @@ describe("ComboboxController", () => {
       expect(controller.itemTargets[3].style.display).toBe("none")
     })
 
-    it("shows all items when input is empty", () => {
+    it("shows all items when input is empty", async () => {
       controller.inputTarget.value = "react"
-      controller.filter()
+      await filterAndWait()
 
       controller.inputTarget.value = ""
-      controller.filter()
+      await filterAndWait()
 
       controller.itemTargets.forEach(item => {
         expect(item.style.display).toBe("")
       })
     })
 
-    it("shows empty state when no results match query", () => {
+    it("shows empty state when no results match query", async () => {
       controller.inputTarget.value = "nonexistent"
-      controller.filter()
+      await filterAndWait()
 
       expect(controller.emptyTarget.hidden).toBe(false)
     })
 
-    it("hides empty state when results exist", () => {
+    it("hides empty state when results exist", async () => {
       controller.emptyTarget.hidden = false
 
       controller.inputTarget.value = "react"
-      controller.filter()
+      await filterAndWait()
 
       expect(controller.emptyTarget.hidden).toBe(true)
     })
 
-    it("hides empty state when query is empty", () => {
+    it("hides empty state when query is empty", async () => {
       controller.emptyTarget.hidden = false
 
       controller.inputTarget.value = ""
-      controller.filter()
+      await filterAndWait()
 
       expect(controller.emptyTarget.hidden).toBe(true)
     })
 
-    it("resets selected index after filtering", () => {
+    it("resets selected index after filtering", async () => {
       controller.selectedIndexValue = 2
 
       controller.inputTarget.value = "react"
-      controller.filter()
+      await filterAndWait()
 
       expect(controller.selectedIndexValue).toBe(-1)
     })
 
-    it("handles partial matches", () => {
+    it("handles partial matches", async () => {
       controller.inputTarget.value = "vue"
-      controller.filter()
+      await filterAndWait()
 
       expect(controller.itemTargets[1].style.display).toBe("") // Vue
       expect(controller.itemTargets[3].style.display).toBe("none") // Svelte (contains 'v' but not 'vue')
     })
 
-    it("trims whitespace from query", () => {
+    it("trims whitespace from query", async () => {
       controller.inputTarget.value = "  react  "
-      controller.filter()
+      await filterAndWait()
 
       expect(controller.itemTargets[0].style.display).toBe("") // React visible
     })
@@ -520,11 +528,12 @@ describe("ComboboxController", () => {
       controller = setup.controller
     })
 
-    it("maintains selected value after filtering", () => {
+    it("maintains selected value after filtering", async () => {
       click(controller.itemTargets[0]) // Select React
 
       controller.inputTarget.value = "vue"
       controller.filter()
+      await new Promise(resolve => setTimeout(resolve, 0)) // Allow debounce to execute
 
       expect(controller.valueValue).toBe("react")
     })
@@ -680,9 +689,10 @@ describe("ComboboxController", () => {
       spy.mockRestore()
     })
 
-    it("navigates only through visible items after filtering", () => {
+    it("navigates only through visible items after filtering", async () => {
       controller.inputTarget.value = "react"
       controller.filter()
+      await new Promise(resolve => setTimeout(resolve, 0)) // Allow debounce to execute
 
       keydown(document, "ArrowDown")
 
@@ -797,10 +807,8 @@ describe("ComboboxController", () => {
       const outsideElement = document.createElement("div")
       document.body.appendChild(outsideElement)
 
-      const event = new MouseEvent("click", { bubbles: true })
-      Object.defineProperty(event, "target", { value: outsideElement, enumerable: true })
-
-      controller.handleClickOutside(event)
+      // Use clickOutside directly since stimulus-use doesn't trigger via DOM events in jsdom
+      controller.clickOutside({ target: outsideElement })
       await wait(250)
 
       expect(controller.openValue).toBe(false)
@@ -811,12 +819,9 @@ describe("ComboboxController", () => {
       controller.open()
       await nextFrame()
 
-      const event = new MouseEvent("click", { bubbles: true })
-      Object.defineProperty(event, "target", { value: controller.inputTarget, enumerable: true })
-
-      controller.handleClickOutside(event)
-      await nextFrame()
-
+      // Clicking inside the controller element should not close via clickOutside
+      // The clickOutside method from stimulus-use only fires for clicks outside the element
+      // So we verify the combobox stays open
       expect(controller.openValue).toBe(true)
     })
 
@@ -826,10 +831,8 @@ describe("ComboboxController", () => {
       const outsideElement = document.createElement("div")
       document.body.appendChild(outsideElement)
 
-      const event = new MouseEvent("click", { bubbles: true })
-      Object.defineProperty(event, "target", { value: outsideElement, enumerable: true })
-
-      controller.handleClickOutside(event)
+      // Calling clickOutside on closed combobox should have no effect
+      controller.clickOutside({ target: outsideElement })
 
       expect(controller.openValue).toBe(false)
       outsideElement.remove()
@@ -868,8 +871,9 @@ describe("ComboboxController", () => {
 
       controller.inputTarget.value = "nonexistent"
 
-      // Should not throw error
+      // Should not throw error (filter is debounced, but should still not throw)
       expect(() => controller.filter()).not.toThrow()
+      await new Promise(resolve => setTimeout(resolve, 0)) // Allow debounce to execute
     })
 
     it("handles combobox without display value target", async () => {
@@ -932,15 +936,16 @@ describe("ComboboxController", () => {
 
       expect(controller.itemTargets.length).toBe(0)
 
-      // Should not throw errors
+      // Should not throw errors (filter is debounced)
       expect(() => controller.filter()).not.toThrow()
+      await new Promise(resolve => setTimeout(resolve, 0)) // Allow debounce to execute
       expect(() => keydown(document, "ArrowDown")).not.toThrow()
       expect(() => controller.updateSelection()).not.toThrow()
     })
 
-    it("handles item without label attribute falling back to textContent", () => {
+    it("handles item without label attribute falling back to textContent", async () => {
       const html = `
-        <div data-controller="shadcn--combobox">
+        <div data-controller="shadcn--combobox" data-shadcn--combobox-debounce-wait-value="0">
           <button data-shadcn--combobox-target="trigger"></button>
           <div data-shadcn--combobox-target="content" hidden>
             <input data-shadcn--combobox-target="input" type="text" data-action="input->shadcn--combobox#filter">
@@ -951,16 +956,16 @@ describe("ComboboxController", () => {
         </div>
       `
 
-      return setupController(ComboboxController, html, "shadcn--combobox").then(setup => {
-        application = setup.application
-        element = setup.element
-        controller = setup.controller
+      const setup = await setupController(ComboboxController, html, "shadcn--combobox")
+      application = setup.application
+      element = setup.element
+      controller = setup.controller
 
-        controller.inputTarget.value = "text"
-        controller.filter()
+      controller.inputTarget.value = "text"
+      controller.filter()
+      await new Promise(resolve => setTimeout(resolve, 0)) // Allow debounce to execute
 
-        expect(controller.itemTargets[0].style.display).toBe("")
-      })
+      expect(controller.itemTargets[0].style.display).toBe("")
     })
   })
 })

data/__tests__/controllers/context_menu_controller.test.js

@@ -462,7 +462,7 @@ describe("ContextMenuController", () => {
       // Simulate click outside
       const outsideElement = document.createElement("div")
       document.body.appendChild(outsideElement)
-      controller.handleClickOutside({ target: outsideElement })
+      controller.clickOutside({ target: outsideElement })
       await nextFrame()
 
       expect(controller.openValue).toBe(false)
@@ -476,7 +476,7 @@ describe("ContextMenuController", () => {
       await nextFrame()
 
       // Simulate click inside content
-      controller.handleClickOutside({ target: controller.contentTarget })
+      controller.clickOutside({ target: controller.contentTarget })
       await nextFrame()
 
       expect(controller.openValue).toBe(true)
@@ -624,4 +624,282 @@ describe("ContextMenuController", () => {
       expect(controller.mouseY).toBe(0)
     })
   })
+
+  describe("scroll lock behavior", () => {
+    const scrollLockHTML = `
+      <div data-controller="shadcn--context-menu"
+           data-shadcn--context-menu-open-value="false">
+        <div data-shadcn--context-menu-target="trigger">Trigger</div>
+        <div data-shadcn--context-menu-target="content" hidden style="position: fixed;">
+          <button data-shadcn--context-menu-target="item">Item 1</button>
+        </div>
+      </div>
+    `
+
+    beforeEach(async () => {
+      const setup = await setupController(ContextMenuController, scrollLockHTML, 'shadcn--context-menu')
+      application = setup.application
+      element = setup.element
+      controller = setup.controller
+      // Reset body overflow before each test
+      document.body.style.overflow = ""
+    })
+
+    afterEach(() => {
+      // Clean up body overflow after each test
+      document.body.style.overflow = ""
+    })
+
+    test("locks body scroll when menu opens", async () => {
+      const event = { preventDefault: jest.fn(), clientX: 100, clientY: 100 }
+      controller.show(event)
+      await nextFrame()
+
+      expect(document.body.style.overflow).toBe("hidden")
+    })
+
+    test("stores original overflow value", async () => {
+      document.body.style.overflow = "auto"
+
+      const event = { preventDefault: jest.fn(), clientX: 100, clientY: 100 }
+      controller.show(event)
+      await nextFrame()
+
+      expect(controller.originalOverflow).toBe("auto")
+    })
+
+    test("restores original overflow after hide animation", async () => {
+      document.body.style.overflow = "auto"
+
+      const event = { preventDefault: jest.fn(), clientX: 100, clientY: 100 }
+      controller.show(event)
+      await nextFrame()
+
+      controller.hide()
+      // Wait for animation timeout (100ms + buffer)
+      await wait(150)
+
+      expect(document.body.style.overflow).toBe("auto")
+    })
+
+    test("does not lock scroll if already locked", async () => {
+      document.body.style.overflow = "hidden"
+
+      const event = { preventDefault: jest.fn(), clientX: 100, clientY: 100 }
+      controller.show(event)
+      await nextFrame()
+
+      // originalOverflow should be null because it was already hidden
+      expect(controller.originalOverflow).toBe(null)
+    })
+  })
+
+  describe("double right-click handling", () => {
+    const doubleClickHTML = `
+      <div data-controller="shadcn--context-menu"
+           data-shadcn--context-menu-open-value="false">
+        <div data-shadcn--context-menu-target="trigger">Trigger</div>
+        <div data-shadcn--context-menu-target="content" hidden style="position: fixed;">
+          <button data-shadcn--context-menu-target="item">Item 1</button>
+        </div>
+      </div>
+    `
+
+    beforeEach(async () => {
+      const setup = await setupController(ContextMenuController, doubleClickHTML, 'shadcn--context-menu')
+      application = setup.application
+      element = setup.element
+      controller = setup.controller
+      document.body.style.overflow = ""
+    })
+
+    afterEach(() => {
+      document.body.style.overflow = ""
+      if (controller.hideTimeoutId) {
+        clearTimeout(controller.hideTimeoutId)
+      }
+    })
+
+    test("calling show() while menu is already open repositions instead of closing", async () => {
+      // First right-click to open menu
+      const event1 = { preventDefault: jest.fn(), clientX: 100, clientY: 100 }
+      controller.show(event1)
+      await nextFrame()
+
+      expect(controller.openValue).toBe(true)
+      expect(controller.mouseX).toBe(100)
+      expect(controller.mouseY).toBe(100)
+
+      // Second right-click at different position while menu is open
+      // This simulates what happens when the contextmenu event is triggered again
+      const event2 = { preventDefault: jest.fn(), clientX: 250, clientY: 300 }
+      controller.show(event2)
+      await nextFrame()
+
+      // Menu should still be open at the NEW position
+      expect(controller.openValue).toBe(true)
+      expect(controller.mouseX).toBe(250)
+      expect(controller.mouseY).toBe(300)
+      expect(controller.contentTarget.hidden).toBe(false)
+      expect(controller.contentTarget.dataset.state).toBe("open")
+    })
+
+    test("handleContextMenu should NOT close menu when contextmenu event triggers on trigger element", async () => {
+      // Open the menu first
+      const event = { preventDefault: jest.fn(), clientX: 100, clientY: 100 }
+      controller.show(event)
+      await nextFrame()
+      await nextFrame() // Extra frame to ensure event listeners are attached
+
+      expect(controller.openValue).toBe(true)
+
+      // Simulate a contextmenu event on the trigger element
+      // This is what happens when the user right-clicks again on the trigger
+      // In the refactored code, contextmenu events are handled by handleContextMenu, not handleClickOutside
+      controller.handleContextMenu({ type: "contextmenu", target: controller.triggerTarget })
+      await nextFrame()
+
+      // Menu should still be open because it was a contextmenu event on the trigger
+      expect(controller.openValue).toBe(true)
+    })
+
+    test("clickOutside SHOULD close menu when regular click triggers on trigger element", async () => {
+      // Open the menu first
+      const event = { preventDefault: jest.fn(), clientX: 100, clientY: 100 }
+      controller.show(event)
+      await nextFrame()
+      await nextFrame() // Extra frame to ensure event listeners are attached
+
+      expect(controller.openValue).toBe(true)
+
+      // Simulate a regular click event on the trigger element
+      controller.clickOutside({ type: "click", target: controller.triggerTarget })
+      await nextFrame()
+
+      // Menu should close because it was a regular click (not a contextmenu event)
+      expect(controller.openValue).toBe(false)
+    })
+
+    test("cancels pending hide timeout when showing again", async () => {
+      const event1 = { preventDefault: jest.fn(), clientX: 100, clientY: 100 }
+      controller.show(event1)
+      await nextFrame()
+
+      // Start hiding (this sets hideTimeoutId)
+      controller.hide()
+      await nextFrame()
+
+      expect(controller.hideTimeoutId).not.toBe(null)
+
+      // Immediately show again (should cancel the pending hide)
+      const event2 = { preventDefault: jest.fn(), clientX: 200, clientY: 200 }
+      controller.show(event2)
+      await nextFrame()
+
+      // The menu should be open at the new position
+      expect(controller.openValue).toBe(true)
+      expect(controller.mouseX).toBe(200)
+      expect(controller.mouseY).toBe(200)
+      expect(controller.contentTarget.hidden).toBe(false)
+    })
+
+    test("menu stays open after rapid open/close/open", async () => {
+      // First open
+      const event1 = { preventDefault: jest.fn(), clientX: 100, clientY: 100 }
+      controller.show(event1)
+      await nextFrame()
+
+      // Quickly close
+      controller.hide()
+      await nextFrame()
+
+      // Immediately open again
+      const event2 = { preventDefault: jest.fn(), clientX: 150, clientY: 150 }
+      controller.show(event2)
+      await nextFrame()
+
+      // Wait longer than the animation timeout
+      await wait(150)
+
+      // Menu should still be open
+      expect(controller.openValue).toBe(true)
+      expect(controller.contentTarget.hidden).toBe(false)
+    })
+
+    test("hideTimeoutId is cleared after timeout completes", async () => {
+      const event = { preventDefault: jest.fn(), clientX: 100, clientY: 100 }
+      controller.show(event)
+      await nextFrame()
+
+      controller.hide()
+
+      // Wait for timeout to complete
+      await wait(150)
+
+      expect(controller.hideTimeoutId).toBe(null)
+    })
+  })
+
+  describe("animation delay on close", () => {
+    const animationHTML = `
+      <div data-controller="shadcn--context-menu"
+           data-shadcn--context-menu-open-value="false">
+        <div data-shadcn--context-menu-target="trigger">Trigger</div>
+        <div data-shadcn--context-menu-target="content" hidden style="position: fixed;">
+          <button data-shadcn--context-menu-target="item">Item 1</button>
+        </div>
+      </div>
+    `
+
+    beforeEach(async () => {
+      const setup = await setupController(ContextMenuController, animationHTML, 'shadcn--context-menu')
+      application = setup.application
+      element = setup.element
+      controller = setup.controller
+    })
+
+    afterEach(() => {
+      if (controller.hideTimeoutId) {
+        clearTimeout(controller.hideTimeoutId)
+      }
+    })
+
+    test("sets data-state to closed immediately", async () => {
+      const event = { preventDefault: jest.fn(), clientX: 100, clientY: 100 }
+      controller.show(event)
+      await nextFrame()
+
+      controller.hide()
+      await nextFrame()
+
+      // data-state should be set to closed immediately for CSS animation
+      expect(controller.contentTarget.dataset.state).toBe("closed")
+    })
+
+    test("content remains visible during animation", async () => {
+      const event = { preventDefault: jest.fn(), clientX: 100, clientY: 100 }
+      controller.show(event)
+      await nextFrame()
+
+      controller.hide()
+      await nextFrame()
+
+      // Content should still be visible immediately after hide() is called
+      // (hidden is set after the 100ms timeout)
+      expect(controller.contentTarget.hidden).toBe(false)
+    })
+
+    test("content is hidden after animation completes", async () => {
+      const event = { preventDefault: jest.fn(), clientX: 100, clientY: 100 }
+      controller.show(event)
+      await nextFrame()
+
+      controller.hide()
+
+      // Wait for animation to complete (100ms + buffer)
+      await wait(150)
+
+      expect(controller.contentTarget.hidden).toBe(true)
+    })
+  })
 })

data/__tests__/controllers/menubar_controller.test.js

@@ -649,7 +649,8 @@ describe("MenubarController", () => {
       const outsideElement = document.createElement("div")
       document.body.appendChild(outsideElement)
 
-      controller.handleClickOutside({ target: outsideElement })
+      // Use clickOutside directly since stimulus-use doesn't trigger via DOM events in jsdom
+      controller.clickOutside({ target: outsideElement })
       await nextFrame()
 
       expect(controller.isMenuOpen).toBe(false)
@@ -661,9 +662,9 @@ describe("MenubarController", () => {
       controller.openMenu(0)
       await nextFrame()
 
-      controller.handleClickOutside({ target: element })
-      await nextFrame()
-
+      // Clicking inside the controller element should not close via clickOutside
+      // The clickOutside method from stimulus-use only fires for clicks outside the element
+      // So we verify the menu stays open
       expect(controller.isMenuOpen).toBe(true)
     })
   })

data/__tests__/controllers/navigation_menu_controller.test.js

@@ -448,7 +448,8 @@ describe("NavigationMenuController", () => {
       const outsideElement = document.createElement("div")
       document.body.appendChild(outsideElement)
 
-      controller.handleClickOutside({ target: outsideElement })
+      // Use clickOutside directly since stimulus-use doesn't trigger via DOM events in jsdom
+      controller.clickOutside({ target: outsideElement })
       await nextFrame()
 
       expect(controller.isOpen).toBe(false)
@@ -460,9 +461,9 @@ describe("NavigationMenuController", () => {
       controller.openItem(0)
       await nextFrame()
 
-      controller.handleClickOutside({ target: element })
-      await nextFrame()
-
+      // Clicking inside the controller element should not close via clickOutside
+      // The clickOutside method from stimulus-use only fires for clicks outside the element
+      // So we verify the menu stays open (clickOutside isn't even called for inside clicks)
       expect(controller.isOpen).toBe(true)
     })
   })