Initial commit

.babelrc

@@ -0,0 +1,5 @@
+{
+  "plugins": [
+    "@babel/plugin-proposal-class-properties"
+  ]
+}

.eslintignore

@@ -0,0 +1 @@
+pkg

.eslintrc.js

@@ -0,0 +1,13 @@
+// https://eslint.org/docs/user-guide/configuring
+
+module.exports = {
+  env: {
+    browser: true,
+    node: true,
+    es6: true
+  },
+
+  globals: {
+    page: 'readonly'
+  }
+}

.github/FUNDING.yml

@@ -0,0 +1 @@
+patreon: guillaumebriday

.github/workflows/lint.yml

@@ -0,0 +1,15 @@
+name: Lint
+
+on: [push]
+
+jobs:
+  eslint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - uses: actions/setup-node@v1
+        with:
+          node-version: '14.x'
+      - run: |
+          yarn install
+          yarn lint

.github/workflows/test.yml

@@ -0,0 +1,20 @@
+
+name: Test
+
+on: [push]
+
+jobs:
+  jest:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - uses: actions/setup-node@v1
+        with:
+          node-version: '14.x'
+      - name: test
+        run: |
+          yarn install
+          yarn test
+        env:
+          CI: true
+          NOVE_ENV: test

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+pkg
+build

.node-version

@@ -0,0 +1 @@
+14.13.0

.npmignore

@@ -0,0 +1,10 @@
+.github
+jest
+.babelrc
+jest.config.js
+index.html
+snowpack.config.json
+netlify.toml
+.node-version
+.eslintrc.js
+src

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "printWidth": 120
+}

CHANGELOG.md

@@ -0,0 +1,13 @@
+# Changelog
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+## [1.0.0] - 2020-10-15
+
+### Added
+
+- Adding controller

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Guillaume Briday
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,150 @@
+# Stimulus Rails Nested Form
+
+[![](https://img.shields.io/npm/dt/stimulus-rails-nested-form.svg)](https://www.npmjs.com/package/stimulus-rails-nested-form)
+[![](https://img.shields.io/npm/v/stimulus-rails-nested-form.svg)](https://www.npmjs.com/package/stimulus-rails-nested-form)
+[![](https://github.com/stimulus-components/stimulus-rails-nested-form/workflows/Lint/badge.svg)](https://github.com/stimulus-components/stimulus-rails-nested-form)
+[![](https://github.com/stimulus-components/stimulus-rails-nested-form/workflows/Test/badge.svg)](https://github.com/stimulus-components/stimulus-rails-nested-form)
+[![](https://img.shields.io/github/license/stimulus-components/stimulus-rails-nested-form.svg)](https://github.com/stimulus-components/stimulus-rails-nested-form)
+[![Netlify Status](https://api.netlify.com/api/v1/badges/c21b3ca7-40fa-4de3-aad5-56dbc343ace6/deploy-status)](https://stimulus-rails-nested-form.netlify.com)
+
+## Getting started
+
+A Stimulus controller to create new fields on the fly to populate your Rails relationship with `accepts_nested_attributes_for`.
+
+[Nested attributes](https://apidock.com/rails/ActiveRecord/NestedAttributes/ClassMethods) allow you to save attributes on associated records through the parent.
+
+## Installation
+
+```bash
+$ yarn add stimulus-rails-nested-form
+```
+
+And use it in your JS file:
+```js
+import { Application } from "stimulus"
+import NestedForm from "stimulus-rails-nested-form"
+
+const application = Application.start()
+application.register("nested-form", NestedForm)
+```
+
+## Usage
+
+In your models:
+```ruby
+class User < ApplicationRecord
+  has_many :todos
+  accepts_nested_attributes_for :todos, reject_if: :all_blank, allow_destroy: true
+end
+
+class Todo < ApplicationRecord
+  belongs_to :user
+end
+```
+
+In your controller:
+```ruby
+class UsersController < ApplicationController
+  def update
+    if user.update(user_params)
+      redirect_to users_path
+    else
+      render :edit
+    end
+  end
+
+  private
+
+  def user_params
+    params
+      .require(:user)
+       .permit(
+         todos_attributes: [:id, :_destroy, :description]
+       )
+  end
+end
+```
+
+To DRY up the code, we extract the fields in a partial called `todo_form` to use it in the [template](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template) with a new `Todo` and in the default `fields_for`.
+
+In your view:
+```html
+<%= form_with model: @user, data: { controller: 'nested-form' } do |f| %>
+  <template data-target="nested-form.template">
+    <%= f.fields_for :todos, Todo.new, child_index: 'NEW_RECORD' do |todo_fields| %>
+      <%= render "todo_form", f: todo_fields %>
+    <% end %>
+  </template>
+
+  <%= f.fields_for :todos do |todo_fields| %>
+    <%= render "todo_form", f: todo_fields %>
+  <% end %>
+
+  <!-- Inserted elements will be injected before that target. -->
+  <div data-target="nested-form.target"></div>
+
+  <button type="button" data-action="click->nested-form#add">
+    Add todo
+  </button>
+
+  <%= f.submit 'Save todos' %>
+<% end %>
+```
+
+In the `todo_form.html.erb` partial:
+```html
+<%= f.label :description %>
+<%= f.text_field :description %>
+```
+
+As explained in the [documentation](https://apidock.com/rails/ActionView/Helpers/FormHelper/fields_for), we need to
+ specify the `child_index`  and replace its value in JavaScript because the index needs to be unique for each fields.
+
+## Extending Controller
+
+You can use inheritance to extend the functionality of any Stimulus components.
+
+```js
+import NestedForm from "stimulus-rails-nested-form"
+
+export default class extends NestedForm {
+  connect() {
+    super.connect()
+    console.log("Do what you cant here.")
+  }
+}
+```
+
+These controllers will automatically have access to targets defined in the parent class.
+
+If you override the connect, disconnect or any other methods from the parent, you'll want to call `super.method()` to make sure the parent functionality is executed.
+
+## Development
+
+### Project setup
+```bash
+$ yarn install
+$ yarn dev
+```
+
+### Tests
+
+[Jest](https://jestjs.io/) and [Puppeteer](https://github.com/puppeteer/puppeteer) are responsible to test this component:
+```bash
+$ yarn test
+```
+
+### Linter
+[Prettier](https://prettier.io/) and [ESLint](https://eslint.org/) are responsible to lint and format this component:
+```bash
+$ yarn lint
+$ yarn format
+```
+
+## Contributing
+
+Do not hesitate to contribute to the project by adapting or adding features ! Bug reports or pull requests are welcome.
+
+## License
+
+This project is released under the [MIT](http://opensource.org/licenses/MIT) license.