hotwire_nested_form 1.0.0 → 1.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: feaf2e256fd22252ab8270a20cfdf0cf77fff4c0937c937be19fa07d6a0dee73
-  data.tar.gz: c77e047a69062a5a37f4634cf0950e80f812c0d7af70c72d2df9f63fd827213b
+  metadata.gz: 614ce7e4bb9ee960608d18431bd94319feac263ce6a83f79bc36525f5c2d5061
+  data.tar.gz: 3c8c196d819cf4954fbedf3444070a95244636427bb73147d3edc71465d5afb2
 SHA512:
-  metadata.gz: 603c4baba0d02740cd5fa54d2002c5580c16a7fc4e2de3909917d97bd99d9b08976daff5dd74ccc9bd01c40e4a8a9936d0a8f637f1eb05d4a65682295fab1b33
-  data.tar.gz: ac9266803d3881bd3794799bf870f95a6c569b796407b8f3318c11b5dc8562b898b41849e614996c18141a1c24c5aab1f6a3a535fa58f6eed9d3fa622e1cdb53
+  metadata.gz: 5ec8765adbc4c27dbd3297f6497971f29a22872381c114c12ce03c7ee8649e0e47e6c500be06c7f1ee71a3512f7897f9a94bc96f95474e730874828188784579
+  data.tar.gz: d90976447adf75d242bdb1f200af575e3724036b7441876e48134a28f4abd7c603cc62cb9c997679a8234b19b3a6a3465e77e51fb944a144b25b0f4c4e1dc7ad

data/.rubocop.yml

@@ -107,6 +107,15 @@ RSpec/DescribeClass:
 RSpec/SpecFilePathFormat:
   Exclude:
     - 'spec/helpers/**/*'
+    - 'spec/lib/**/*'
+    - 'spec/integration/**/*'
+
+# Allow regular doubles when mocking classes that may not exist (e.g., SimpleForm)
+RSpec/VerifiedDoubles:
+  Exclude:
+    - 'spec/lib/**/*'
+    - 'spec/helpers/**/*'
+    - 'spec/integration/**/*'
 
 RSpec/LetSetup:
   Exclude:

data/CHANGELOG.md

@@ -7,6 +7,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.1.0] - 2026-02-05
+
+### Added
+- SimpleForm auto-detection and compatibility
+- NPM package `@hotwire-nested-form/stimulus` for JavaScript-only users
+- `FormBuilderDetector` module for form builder type detection
+
+### Changed
+- Improved documentation for SimpleForm usage
+
 ## [1.0.0] - 2026-02-05
 
 ### Added

data/Gemfile

@@ -14,6 +14,7 @@ group :development, :test do
   gem 'puma', '~> 6.0'
   gem 'rspec-rails', '~> 6.0'
   gem 'selenium-webdriver', '~> 4.10'
+  gem 'simple_form', '~> 5.3'
   gem 'sqlite3', '>= 1.6'
 
   # Code quality

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    hotwire_nested_form (1.0.0)
+    hotwire_nested_form (1.1.0)
       rails (>= 7.0)
 
 GEM
@@ -270,6 +270,9 @@ GEM
       rexml (~> 3.2, >= 3.2.5)
       rubyzip (>= 1.2.2, < 4.0)
       websocket (~> 1.0)
+    simple_form (5.4.1)
+      actionpack (>= 7.0)
+      activemodel (>= 7.0)
     sqlite3 (2.9.0-aarch64-linux-gnu)
     sqlite3 (2.9.0-aarch64-linux-musl)
     sqlite3 (2.9.0-arm-linux-gnu)
@@ -319,6 +322,7 @@ DEPENDENCIES
   rubocop-rails
   rubocop-rspec
   selenium-webdriver (~> 4.10)
+  simple_form (~> 5.3)
   sqlite3 (>= 1.6)
 
 BUNDLED WITH

data/README.md

@@ -84,6 +84,46 @@ end
 
 That's it! Click "Add Task" to add fields, "Remove" to remove them.
 
+## SimpleForm Support
+
+Works automatically with SimpleForm! No configuration needed.
+
+```erb
+<%= simple_form_for @project do |f| %>
+  <%= f.input :name %>
+
+  <div data-controller="nested-form">
+    <%= f.simple_fields_for :tasks do |task_form| %>
+      <%= render "task_fields", f: task_form %>
+    <% end %>
+
+    <%= link_to_add_association "Add Task", f, :tasks %>
+  </div>
+
+  <%= f.button :submit %>
+<% end %>
+```
+
+## NPM Package (JavaScript-only)
+
+For non-Rails projects using Stimulus, install via npm:
+
+```bash
+npm install @hotwire-nested-form/stimulus
+```
+
+Register the controller:
+
+```javascript
+import { Application } from "@hotwired/stimulus"
+import NestedFormController from "@hotwire-nested-form/stimulus"
+
+const application = Application.start()
+application.register("nested-form", NestedFormController)
+```
+
+See [NPM package documentation](npm/README.md) for full details.
+
 ## API Reference
 
 ### link_to_add_association

data/lib/hotwire_nested_form/form_builder_detector.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module HotwireNestedForm
+  module FormBuilderDetector
+    module_function
+
+    def simple_form?(form_builder)
+      return false unless form_builder
+
+      builder_class = form_builder.class.name.to_s
+      builder_class.include?('SimpleForm')
+    end
+
+    def simple_form_available?
+      defined?(::SimpleForm) ? true : false
+    end
+  end
+end

data/lib/hotwire_nested_form/helpers/add_association.rb

@@ -78,7 +78,9 @@ module HotwireNestedForm
         # Determine partial name
         partial_name = partial || "#{association.to_s.singularize}_fields"
 
-        # Render the fields
+        # Render the fields using fields_for
+        # This works with both standard Rails FormBuilder and SimpleForm::FormBuilder
+        # SimpleForm overrides fields_for to use simple_fields_for internally
         form.fields_for(association, new_object, child_index: 'NEW_RECORD') do |builder|
           locals = (render_options[:locals] || {}).merge(f: builder)
           render(partial: partial_name, locals: locals)

data/lib/hotwire_nested_form/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module HotwireNestedForm
-  VERSION = '1.0.0'
+  VERSION = '1.1.0'
 end

data/lib/hotwire_nested_form.rb

@@ -3,6 +3,7 @@
 require_relative 'hotwire_nested_form/version'
 require_relative 'hotwire_nested_form/engine'
 require_relative 'hotwire_nested_form/helpers'
+require_relative 'hotwire_nested_form/form_builder_detector'
 
 module HotwireNestedForm
   class Error < StandardError; end

data/npm/.npmignore

@@ -0,0 +1,6 @@
+# Ignore everything except src
+*
+!src/
+!src/**
+!README.md
+!package.json

data/npm/README.md

@@ -0,0 +1,79 @@
+# @hotwire-nested-form/stimulus
+
+A Stimulus controller for dynamic nested forms. Add and remove nested form fields with ease.
+
+## Installation
+
+```bash
+npm install @hotwire-nested-form/stimulus
+# or
+yarn add @hotwire-nested-form/stimulus
+```
+
+## Usage
+
+### Register the Controller
+
+```javascript
+import { Application } from "@hotwired/stimulus"
+import NestedFormController from "@hotwire-nested-form/stimulus"
+
+const application = Application.start()
+application.register("nested-form", NestedFormController)
+```
+
+### HTML Structure
+
+```html
+<div data-controller="nested-form">
+  <div id="items">
+    <!-- Existing nested fields go here -->
+  </div>
+
+  <a href="#"
+     data-action="nested-form#add"
+     data-template="<div class='nested-fields'><input name='items[][name]'><a href='#' data-action='nested-form#remove'>Remove</a></div>">
+    Add Item
+  </a>
+</div>
+```
+
+### Data Attributes
+
+| Attribute | Description | Default |
+|-----------|-------------|---------|
+| `data-template` | HTML template for new fields (use `NEW_RECORD` as placeholder) | Required |
+| `data-insertion` | Where to insert: `before`, `after`, `append`, `prepend` | `before` |
+| `data-count` | Number of fields to add per click | `1` |
+| `data-target` | CSS selector for insertion container | Parent element |
+
+### Events
+
+| Event | Cancelable | Detail |
+|-------|------------|--------|
+| `nested-form:before-add` | Yes | `{ wrapper }` |
+| `nested-form:after-add` | No | `{ wrapper }` |
+| `nested-form:before-remove` | Yes | `{ wrapper }` |
+| `nested-form:after-remove` | No | `{ wrapper }` |
+
+### Example: Listen for Events
+
+```javascript
+document.addEventListener("nested-form:after-add", (event) => {
+  console.log("Added:", event.detail.wrapper)
+})
+
+document.addEventListener("nested-form:before-remove", (event) => {
+  if (!confirm("Are you sure?")) {
+    event.preventDefault()
+  }
+})
+```
+
+### With Rails
+
+For Rails users, we recommend using the [hotwire_nested_form](https://rubygems.org/gems/hotwire_nested_form) gem which provides view helpers.
+
+## License
+
+MIT

data/npm/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@hotwire-nested-form/stimulus",
+  "version": "1.1.0",
+  "description": "Stimulus controller for dynamic nested forms - works with Rails, React, Vue, or any Stimulus app",
+  "main": "src/index.js",
+  "module": "src/index.js",
+  "type": "module",
+  "files": [
+    "src"
+  ],
+  "keywords": [
+    "stimulus",
+    "hotwire",
+    "nested-forms",
+    "rails",
+    "dynamic-forms",
+    "cocoon-alternative"
+  ],
+  "author": "BhumitBhadani <bhumit2520@gmail.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bhumit4220/hotwire_nested_form.git"
+  },
+  "bugs": {
+    "url": "https://github.com/bhumit4220/hotwire_nested_form/issues"
+  },
+  "homepage": "https://github.com/bhumit4220/hotwire_nested_form#readme",
+  "peerDependencies": {
+    "@hotwired/stimulus": "^3.0.0"
+  }
+}

data/npm/src/index.js

@@ -0,0 +1,2 @@
+export { default as NestedFormController } from "./nested_form_controller.js"
+export { default } from "./nested_form_controller.js"

data/npm/src/nested_form_controller.js

@@ -0,0 +1,80 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = {
+    wrapperClass: { type: String, default: "nested-fields" }
+  }
+
+  add(event) {
+    event.preventDefault()
+
+    const template = event.currentTarget.dataset.template
+    const insertion = event.currentTarget.dataset.insertion || "before"
+    const targetSelector = event.currentTarget.dataset.target
+    const count = parseInt(event.currentTarget.dataset.count) || 1
+
+    for (let i = 0; i < count; i++) {
+      this.insertFields(template, insertion, targetSelector, event.currentTarget)
+    }
+  }
+
+  remove(event) {
+    event.preventDefault()
+
+    const wrapper = event.currentTarget.closest(`.${this.wrapperClassValue}`)
+    if (!wrapper) return
+
+    const beforeEvent = this.dispatch("before-remove", {
+      cancelable: true,
+      detail: { wrapper }
+    })
+
+    if (beforeEvent.defaultPrevented) return
+
+    const destroyInput = wrapper.querySelector("input[name*='_destroy']")
+
+    if (destroyInput) {
+      destroyInput.value = "true"
+      wrapper.style.display = "none"
+    } else {
+      wrapper.remove()
+    }
+
+    this.dispatch("after-remove", { detail: { wrapper } })
+  }
+
+  insertFields(template, insertion, targetSelector, trigger) {
+    const newId = new Date().getTime()
+    const content = template.replace(/NEW_RECORD/g, newId)
+
+    const fragment = document.createRange().createContextualFragment(content)
+    const wrapper = fragment.firstElementChild
+
+    const beforeEvent = this.dispatch("before-add", {
+      cancelable: true,
+      detail: { wrapper }
+    })
+
+    if (beforeEvent.defaultPrevented) return
+
+    const container = targetSelector
+      ? document.querySelector(targetSelector)
+      : trigger.parentElement
+
+    switch (insertion) {
+      case "after":
+        trigger.after(fragment)
+        break
+      case "append":
+        container.append(fragment)
+        break
+      case "prepend":
+        container.prepend(fragment)
+        break
+      default:
+        trigger.before(fragment)
+    }
+
+    this.dispatch("after-add", { detail: { wrapper } })
+  }
+}

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: hotwire_nested_form
 version: !ruby/object:Gem::Version
-  version: 1.0.0
+  version: 1.1.0
 platform: ruby
 authors:
 - BhumitBhadani
@@ -47,10 +47,16 @@ files:
 - lib/generators/hotwire_nested_form/templates/nested_form_controller.js
 - lib/hotwire_nested_form.rb
 - lib/hotwire_nested_form/engine.rb
+- lib/hotwire_nested_form/form_builder_detector.rb
 - lib/hotwire_nested_form/helpers.rb
 - lib/hotwire_nested_form/helpers/add_association.rb
 - lib/hotwire_nested_form/helpers/remove_association.rb
 - lib/hotwire_nested_form/version.rb
+- npm/.npmignore
+- npm/README.md
+- npm/package.json
+- npm/src/index.js
+- npm/src/nested_form_controller.js
 homepage: https://github.com/bhumit4220/hotwire_nested_form
 licenses:
 - MIT