index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="description"
      content="A Stimulus controller to create new fields on the fly to populate your Rails relationship."
    />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Stimulus Rails Nested Form</title>

    <script type="module" defer>
      import "./src/app.css"
      import { Application } from "@hotwired/stimulus"
      import RailsNestedForm from "./src/index"

      const application = Application.start()
      application.register("nested-form", RailsNestedForm)
    </script>
  </head>

  <body>
    <div class="relative bg-white overflow-hidden">
      <div class="relative isolate pt-14">
        <div
          class="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
          aria-hidden="true"
        >
          <div
            class="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-yellow-500 to-orange-500 opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
            style="
              clip-path: polygon(
                74.1% 44.1%,
                100% 61.6%,
                97.5% 26.9%,
                85.5% 0.1%,
                80.7% 2%,
                72.5% 32.5%,
                60.2% 62.4%,
                52.4% 68.1%,
                47.5% 58.3%,
                45.2% 34.5%,
                27.5% 76.7%,
                0.1% 64.9%,
                17.9% 100%,
                27.6% 76.8%,
                76.1% 97.7%,
                74.1% 44.1%
              );
            "
          ></div>
        </div>
      </div>

      <div class="relative pt-6 pb-16 sm:pb-24">
        <main class="mt-16 mx-auto max-w-7xl px-4 sm:mt-24">
          <div class="text-center">
            <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
              <span class="block xl:inline">Stimulus</span>
              <span class="block bg-gradient-to-r from-yellow-500 to-orange-500 xl:inline bg-clip-text text-transparent"
                >Rails Nested Form</span
              >
            </h1>

            <p class="mt-3 max-w-md mx-auto text-base text-gray-500 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">
              A Stimulus controller to create new fields on the fly to populate your Rails relationship.
            </p>

            <p class="text-center mt-3">
              <img
                class="inline-block"
                src="https://img.shields.io/npm/dt/@stimulus-components/rails-nested-form.svg"
              />
              <img class="inline-block" src="https://img.shields.io/npm/v/@stimulus-components/rails-nested-form.svg" />

              <img
                class="inline-block"
                src="https://github.com/stimulus-components/stimulus-rails-nested-form/workflows/Lint/badge.svg"
              />

              <img
                class="inline-block"
                src="https://github.com/stimulus-components/stimulus-rails-nested-form/workflows/Test/badge.svg"
              />

              <img
                class="inline-block"
                src="https://img.shields.io/github/license/stimulus-components/stimulus-rails-nested-form.svg"
              />
            </p>

            <div class="mt-5 max-w-md mx-auto sm:flex sm:justify-center md:mt-8">
              <div class="rounded-md shadow">
                <a
                  href="https://www.stimulus-components.com/docs/stimulus-rails-nested-form/"
                  class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-gradient-to-r from-yellow-500 to-orange-500 md:py-4 md:text-lg md:px-10"
                >
                  Documentation &rarr;
                </a>
              </div>
              <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
                <a
                  href="https://github.com/stimulus-components/stimulus-rails-nested-form"
                  class="w-full flex items-center justify-center gap-1 px-8 py-3 border border-transparent text-base font-medium rounded-md bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10"
                >
                  <svg fill="currentColor" viewBox="0 0 24 24" aria-hidden="true" class="size-6">
                    <path
                      fill-rule="evenodd"
                      d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
                      clip-rule="evenodd"
                    ></path>
                  </svg>
                  GitHub
                </a>
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>

    <div class="relative h-full max-w-5xl mx-auto px-4">
      <section class="mt-16">
        <form data-controller="nested-form">
          <template data-nested-form-target="template">
            <div class="mt-4 nested-form-wrapper" data-new-record="true">
              <label for="NEW_RECORD" class="block text-sm font-medium leading-5 text-gray-700">New todo</label>
              <div class="mt-1 flex relative rounded-md shadow-sm">
                <input
                  id="NEW_RECORD"
                  name="user[todos_attributes][NEW_RECORD][description]"
                  class="appearance-none border w-full py-2 px-3 rounded-l-md text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                  placeholder="Your todo"
                />

                <button
                  class="cursor-pointer inline-flex items-center px-3 rounded-r-md border border-l-0 border-gray-300 bg-gray-100 text-gray-500 sm:text-sm"
                  type="button"
                  data-action="nested-form#remove"
                  title="Remove todo"
                >
                  X
                </button>

                <input type="hidden" name="user[todos_attributes][NEW_RECORD][_destroy]" />
              </div>
            </div>
          </template>

          <div class="mt-4 nested-form-wrapper" data-new-record="false">
            <label for="todo-1" class="block text-sm font-medium leading-5 text-gray-700">Your todo</label>
            <div class="mt-1 flex relative rounded-md shadow-sm">
              <input
                id="todo-1"
                name="user[todos_attributes][0][description]"
                class="appearance-none border w-full py-2 px-3 rounded-l-md text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                value="Pet the cat"
              />

              <button
                class="cursor-pointer inline-flex items-center px-3 rounded-r-md border border-l-0 border-gray-300 bg-gray-100 text-gray-500 sm:text-sm"
                type="button"
                data-action="nested-form#remove"
                title="Remove todo"
              >
                X
              </button>

              <input type="hidden" name="user[todos_attributes][0][_destroy]" />
            </div>
          </div>

          <div id="nested-form-target" data-nested-form-target="target"></div>

          <button
            id="nested-form-button"
            type="button"
            data-action="nested-form#add"
            class="mt-4 bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border rounded shadow"
          >
            Add todo
          </button>

          <button
            type="submit"
            class="mt-4 bg-blue-600 hover:bg-blue-500 text-white font-semibold py-2 px-4 border rounded shadow"
          >
            Save todos
          </button>
        </form>
      </section>
    </div>

    <footer class="bg-white">
      <div class="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8">
        <div class="-mx-5 -my-2 flex flex-wrap justify-center" aria-label="Footer">
          <div class="px-5 py-2">
            <p class="text-base text-gray-500">
              stimulus-rails-nested-form is a package from the
              <a href="https://github.com/stimulus-components/stimulus-components" class="hover:text-gray-900 underline"
                >stimulus-components</a
              >
              project.
            </p>
          </div>
        </div>

        <div class="mt-8 flex justify-center space-x-6">
          <a
            href="https://twitter.com/guillaumebriday"
            target="_blank"
            rel="noopener"
            class="text-gray-400 hover:text-gray-500"
          >
            <span class="sr-only">Twitter</span>
            <svg class="size-6" fill="currentColor" viewBox="0 0 512 512">
              <path
                fill-rule="evenodd"
                d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"
                clip-rule="evenodd"
              />
            </svg>
          </a>

          <a
            href="https://github.com/stimulus-components/stimulus-rails-nested-form"
            target="_blank"
            rel="noopener"
            class="text-gray-400 hover:text-gray-500"
          >
            <span class="sr-only">GitHub</span>
            <svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path
                fill-rule="evenodd"
                d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
                clip-rule="evenodd"
              />
            </svg>
          </a>
        </div>

        <p class="mt-8 text-center text-base text-gray-400">
          This project is released under the
          <a href="https://opensource.org/licenses/MIT" class="hover:text-gray-900 underline">MIT</a>
          license.
        </p>
      </div>
    </footer>
  </body>
</html>