RubyGems - not_pressed-core - Versions diffs - 0.1.0 - Mend

not_pressed-core 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (157) hide show

data/app/views/layouts/not_pressed/application.html.erb ADDED Viewed

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>NotPressed</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <%= csrf_meta_tags %>
+  <%= csp_meta_tag %>
+</head>
+<body>
+  <%= yield %>
+</body>
+</html>

data/app/views/layouts/not_pressed/page.html.erb ADDED Viewed

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <%= seo_meta_tags(@page, request) %>
+  <%= stylesheet_link_tag "not_pressed/content", media: "all" %>
+  <%= stylesheet_link_tag "not_pressed/gallery", media: "all" %>
+  <%= theme_stylesheet_tag %>
+  <%= theme_color_overrides %>
+  <%= csrf_meta_tags %>
+  <%= csp_meta_tag %>
+  <%= head_injection(@page) %>
+</head>
+<body class="np-page-body <%= active_theme_class %>">
+  <main class="np-page-main">
+    <%= yield %>
+  </main>
+  <%= javascript_include_tag "not_pressed/lightbox" %>
+  <%= body_injection(@page) %>
+</body>
+</html>

data/app/views/not_pressed/admin/categories/index.html.erb ADDED Viewed

@@ -0,0 +1,58 @@
+<div class="np-actions" style="margin-bottom: 1.5rem;">
+  <h2 style="margin: 0;">Add Category</h2>
+</div>
+<%= form_with model: @category, url: admin_categories_path, class: "np-form", style: "margin-bottom: 2rem;" do |f| %>
+  <% if @category.errors.any? %>
+    <div class="np-form-errors">
+      <ul>
+        <% @category.errors.full_messages.each do |message| %>
+          <li><%= message %></li>
+        <% end %>
+      </ul>
+    </div>
+  <% end %>
+  <div style="display: flex; gap: 0.5rem; align-items: flex-end;">
+    <div class="np-form-group" style="margin-bottom: 0; flex: 1;">
+      <%= f.label :name, class: "np-label" %>
+      <%= f.text_field :name, class: "np-input", placeholder: "Category name" %>
+    </div>
+    <div class="np-form-group" style="margin-bottom: 0; flex: 2;">
+      <%= f.label :description, class: "np-label" %>
+      <%= f.text_field :description, class: "np-input", placeholder: "Optional description" %>
+    </div>
+    <div>
+      <%= f.submit "Add", class: "np-btn np-btn--primary" %>
+    </div>
+  </div>
+<% end %>
+<% if @categories.any? %>
+  <table class="np-table">
+    <thead>
+      <tr>
+        <th>Name</th>
+        <th>Slug</th>
+        <th>Description</th>
+        <th>Posts</th>
+        <th>Actions</th>
+      </tr>
+    </thead>
+    <tbody>
+      <% @categories.each do |category| %>
+        <tr>
+          <td><%= category.name %></td>
+          <td><code><%= category.slug %></code></td>
+          <td><%= category.description %></td>
+          <td><%= category.pages.count %></td>
+          <td>
+            <%= link_to "Delete", admin_category_path(category), data: { turbo_method: :delete, turbo_confirm: "Are you sure you want to delete this category?" }, class: "np-btn np-btn--small np-btn--danger" %>
+          </td>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+<% else %>
+  <p>No categories yet. Add one above.</p>
+<% end %>

data/app/views/not_pressed/admin/content_blocks/_block.html.erb ADDED Viewed

@@ -0,0 +1,18 @@
+<div id="<%= dom_id(block) %>" class="np-block" draggable="true" data-block-id="<%= block.id %>" data-np-sortable-target="item">
+  <div class="np-block-header">
+    <div class="np-block-header-left">
+      <span class="np-drag-handle" data-action="mousedown->np-sortable#grabHandle" title="Drag to reorder">&#9776;</span>
+      <span class="np-block-type-label"><%= block.block_type.humanize %></span>
+    </div>
+    <%= button_to "Remove", admin_page_content_block_path(block.page, block), method: :delete, class: "np-btn np-btn--danger np-btn--small", data: { turbo_confirm: "Remove this block?" } %>
+  </div>
+  <div class="np-block-body" data-controller="np-block-content" data-np-block-content-url-value="<%= admin_page_content_block_path(block.page, block) %>">
+    <%= form_with model: block, url: admin_page_content_block_path(block.page, block), method: :patch, class: "np-block-form" do |f| %>
+      <%= render NotPressed::Rendering::RendererRegistry.editor_partial(block.block_type), block: block %>
+      <div class="np-form-actions" style="margin-top: 0.5rem;">
+        <%= f.submit "Save", class: "np-btn np-btn--primary np-btn--small" %>
+        <span class="np-save-indicator" data-np-block-content-target="indicator"></span>
+      </div>
+    <% end %>
+  </div>
+</div>

data/app/views/not_pressed/admin/content_blocks/_block_picker.html.erb ADDED Viewed

@@ -0,0 +1,32 @@
+<dialog class="np-modal np-block-picker" data-controller="np-modal">
+  <div class="np-modal-header">
+    <h3>Add a Block</h3>
+    <button type="button" class="np-modal-close" data-action="np-modal#close">&times;</button>
+  </div>
+  <div class="np-modal-body">
+    <div class="np-block-picker-grid">
+      <% block_descriptions = {
+        "text" => { emoji: "\u{1F4DD}", desc: "Rich text content" },
+        "heading" => { emoji: "\u{1F520}", desc: "Section heading" },
+        "image" => { emoji: "\u{1F5BC}", desc: "Image with caption" },
+        "video" => { emoji: "\u{1F3AC}", desc: "Embedded video" },
+        "code" => { emoji: "\u{1F4BB}", desc: "Code snippet" },
+        "quote" => { emoji: "\u{1F4AC}", desc: "Blockquote with attribution" },
+        "divider" => { emoji: "\u2796", desc: "Horizontal divider" },
+        "html" => { emoji: "\u{1F9F1}", desc: "Raw HTML block" },
+        "form" => { emoji: "\u{1F4CB}", desc: "Embeddable form" }
+      } %>
+      <% NotPressed::ContentBlock.registered_types.each do |type| %>
+        <% info = block_descriptions[type] || { emoji: "\u{1F4E6}", desc: type.humanize } %>
+        <%= button_to admin_page_content_blocks_path(page, block_type: type),
+              method: :post,
+              class: "np-block-picker-card",
+              data: { turbo_stream: true, action: "np-modal#close" } do %>
+          <span class="np-block-picker-icon"><%= info[:emoji] %></span>
+          <span class="np-block-picker-name"><%= type.humanize %></span>
+          <span class="np-block-picker-desc"><%= info[:desc] %></span>
+        <% end %>
+      <% end %>
+    </div>
+  </div>
+</dialog>

data/app/views/not_pressed/admin/content_blocks/create.turbo_stream.erb ADDED Viewed

@@ -0,0 +1,3 @@
+<%= turbo_stream.append "blocks-list" do %>
+  <%= render "not_pressed/admin/content_blocks/block", block: @block %>
+<% end %>

data/app/views/not_pressed/admin/content_blocks/destroy.turbo_stream.erb ADDED Viewed

	@@ -0,0 +1 @@
1	+ <%= turbo_stream.remove dom_id(@block) %>

data/app/views/not_pressed/admin/content_blocks/editors/_callout.html.erb ADDED Viewed

@@ -0,0 +1,38 @@
+<div class="np-editor-callout">
+  <div class="np-editor-field">
+    <label class="np-label" for="content_style_<%= block.id %>">Style</label>
+    <select
+      name="content_block[content][style]"
+      id="content_style_<%= block.id %>"
+      class="np-input"
+      data-action="change->np-block-content#save"
+    >
+      <% %w[info warning success danger].each do |style| %>
+        <option value="<%= style %>" <%= "selected" if block.content["style"] == style %>><%= style.capitalize %></option>
+      <% end %>
+    </select>
+  </div>
+  <div class="np-editor-field">
+    <label class="np-label" for="content_title_<%= block.id %>">Title</label>
+    <input
+      type="text"
+      name="content_block[content][title]"
+      id="content_title_<%= block.id %>"
+      value="<%= block.content["title"] %>"
+      class="np-input"
+      placeholder="Callout title"
+      data-action="blur->np-block-content#save change->np-block-content#save"
+    >
+  </div>
+  <div class="np-editor-field">
+    <label class="np-label" for="content_text_<%= block.id %>">Text</label>
+    <textarea
+      name="content_block[content][text]"
+      id="content_text_<%= block.id %>"
+      class="np-input"
+      rows="4"
+      placeholder="Callout text content"
+      data-action="blur->np-block-content#save change->np-block-content#save"
+    ><%= block.content["text"] %></textarea>
+  </div>
+</div>

data/app/views/not_pressed/admin/content_blocks/editors/_code.html.erb ADDED Viewed

@@ -0,0 +1,26 @@
+<div class="np-editor-code">
+  <div class="np-editor-field">
+    <label class="np-label" for="content_language_<%= block.id %>">Language</label>
+    <select
+      name="content_block[content][language]"
+      id="content_language_<%= block.id %>"
+      class="np-input"
+      data-action="change->np-block-content#save"
+    >
+      <option value="">Select language</option>
+      <% %w[ruby javascript python html css sql bash other].each do |lang| %>
+        <option value="<%= lang %>" <%= "selected" if block.content["language"] == lang %>><%= lang.capitalize %></option>
+      <% end %>
+    </select>
+  </div>
+  <div class="np-editor-field">
+    <label class="np-label" for="content_code_<%= block.id %>">Code</label>
+    <textarea
+      name="content_block[content][code]"
+      id="content_code_<%= block.id %>"
+      class="np-input"
+      rows="10"
+      data-action="blur->np-block-content#save change->np-block-content#save"
+    ><%= block.content["code"] %></textarea>
+  </div>
+</div>

data/app/views/not_pressed/admin/content_blocks/editors/_divider.html.erb ADDED Viewed

@@ -0,0 +1,4 @@
+<div class="np-editor-divider">
+  <p class="np-label">Horizontal Divider</p>
+  <hr class="np-divider-preview">
+</div>

data/app/views/not_pressed/admin/content_blocks/editors/_form.html.erb ADDED Viewed

@@ -0,0 +1,16 @@
+<div class="np-editor-form">
+  <div class="np-editor-field">
+    <label class="np-label" for="content_form_id_<%= block.id %>">Select Form</label>
+    <select
+      name="content_block[content][form_id]"
+      id="content_form_id_<%= block.id %>"
+      class="np-input"
+      data-action="change->np-block-content#save"
+    >
+      <option value="">Choose a form...</option>
+      <% NotPressed::Form.active.ordered.each do |form| %>
+        <option value="<%= form.id %>" <%= "selected" if block.content["form_id"].to_s == form.id.to_s %>><%= form.name %></option>
+      <% end %>
+    </select>
+  </div>
+</div>

data/app/views/not_pressed/admin/content_blocks/editors/_gallery.html.erb ADDED Viewed

@@ -0,0 +1,75 @@
+<div class="np-editor-gallery">
+  <div class="np-editor-field">
+    <label class="np-label" for="content_columns_<%= block.id %>">Columns</label>
+    <select
+      name="content_block[content][columns]"
+      id="content_columns_<%= block.id %>"
+      class="np-input"
+      data-action="change->np-block-content#save"
+    >
+      <% [2, 3, 4].each do |col| %>
+        <option value="<%= col %>" <%= "selected" if block.content["columns"].to_i == col %>><%= col %> Columns</option>
+      <% end %>
+    </select>
+  </div>
+  <% images = block.content["images"] || [] %>
+  <div class="np-gallery-editor-images">
+    <% images.each_with_index do |img, idx| %>
+      <div class="np-gallery-editor-item" style="display:flex; gap:0.5rem; align-items:center; margin-bottom:0.5rem; padding:0.5rem; border:1px solid #e2e8f0; border-radius:4px;">
+        <div style="flex:1;">
+          <label class="np-label">Media ID</label>
+          <input
+            type="text"
+            name="content_block[content][images][][media_id]"
+            value="<%= img["media_id"] %>"
+            class="np-input"
+            placeholder="Media attachment ID"
+            data-action="blur->np-block-content#save"
+          >
+        </div>
+        <div style="flex:2;">
+          <label class="np-label">Caption</label>
+          <input
+            type="text"
+            name="content_block[content][images][][caption]"
+            value="<%= img["caption"] %>"
+            class="np-input"
+            placeholder="Image caption"
+            data-action="blur->np-block-content#save"
+          >
+        </div>
+      </div>
+    <% end %>
+  </div>
+  <div style="margin-top:0.5rem;">
+    <p style="font-size:0.75rem; color:#64748b;">Add images by entering media attachment IDs and captions above. Save after adding each image.</p>
+    <% if images.empty? %>
+      <div class="np-gallery-editor-item" style="display:flex; gap:0.5rem; align-items:center; margin-bottom:0.5rem; padding:0.5rem; border:1px solid #e2e8f0; border-radius:4px;">
+        <div style="flex:1;">
+          <label class="np-label">Media ID</label>
+          <input
+            type="text"
+            name="content_block[content][images][][media_id]"
+            value=""
+            class="np-input"
+            placeholder="Media attachment ID"
+            data-action="blur->np-block-content#save"
+          >
+        </div>
+        <div style="flex:2;">
+          <label class="np-label">Caption</label>
+          <input
+            type="text"
+            name="content_block[content][images][][caption]"
+            value=""
+            class="np-input"
+            placeholder="Image caption"
+            data-action="blur->np-block-content#save"
+          >
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>

data/app/views/not_pressed/admin/content_blocks/editors/_heading.html.erb ADDED Viewed

@@ -0,0 +1,26 @@
+<div class="np-editor-heading">
+  <div class="np-editor-field">
+    <label class="np-label" for="content_text_<%= block.id %>">Heading Text</label>
+    <input
+      type="text"
+      name="content_block[content][text]"
+      id="content_text_<%= block.id %>"
+      value="<%= block.content["text"] %>"
+      class="np-input"
+      data-action="blur->np-block-content#save change->np-block-content#save"
+    >
+  </div>
+  <div class="np-editor-field">
+    <label class="np-label" for="content_level_<%= block.id %>">Level</label>
+    <select
+      name="content_block[content][level]"
+      id="content_level_<%= block.id %>"
+      class="np-input"
+      data-action="change->np-block-content#save"
+    >
+      <% (1..6).each do |level| %>
+        <option value="<%= level %>" <%= "selected" if block.content["level"].to_i == level %>><%= "H#{level}" %></option>
+      <% end %>
+    </select>
+  </div>
+</div>

data/app/views/not_pressed/admin/content_blocks/editors/_html.html.erb ADDED Viewed

@@ -0,0 +1,13 @@
+<div class="np-editor-html">
+  <div class="np-editor-field">
+    <label class="np-label" for="content_markup_<%= block.id %>">Raw HTML</label>
+    <p class="np-html-warning">Warning: Raw HTML is rendered without sanitization. Use with caution.</p>
+    <textarea
+      name="content_block[content][markup]"
+      id="content_markup_<%= block.id %>"
+      class="np-input"
+      rows="8"
+      data-action="blur->np-block-content#save change->np-block-content#save"
+    ><%= block.content["markup"] %></textarea>
+  </div>
+</div>

data/app/views/not_pressed/admin/content_blocks/editors/_image.html.erb ADDED Viewed

@@ -0,0 +1,56 @@
+<div class="np-editor-image" data-controller="np-media-picker" data-np-media-picker-picker-url-value="<%= picker_admin_media_attachments_path %>">
+  <div class="np-editor-field">
+    <label class="np-label" for="content_url_<%= block.id %>">Image URL</label>
+    <input
+      type="text"
+      name="content_block[content][url]"
+      id="content_url_<%= block.id %>"
+      value="<%= block.content["url"] %>"
+      class="np-input"
+      placeholder="https://example.com/image.jpg"
+      data-action="blur->np-block-content#save change->np-block-content#save"
+      data-np-media-picker-target="urlField"
+    >
+  </div>
+  <input type="hidden" name="content_block[content][media_id]" value="<%= block.content["media_id"] %>" data-np-media-picker-target="mediaIdField">
+  <div style="margin-bottom: 0.75rem;">
+    <button type="button" class="np-btn np-btn--small" data-action="np-media-picker#openModal">Choose from Library</button>
+  </div>
+  <% if block.content["url"].present? %>
+    <div class="np-image-preview">
+      <img src="<%= block.content["url"] %>" alt="<%= block.content["alt"] %>">
+    </div>
+  <% end %>
+  <div class="np-editor-field">
+    <label class="np-label" for="content_alt_<%= block.id %>">Alt Text</label>
+    <input
+      type="text"
+      name="content_block[content][alt]"
+      id="content_alt_<%= block.id %>"
+      value="<%= block.content["alt"] %>"
+      class="np-input"
+      data-action="blur->np-block-content#save change->np-block-content#save"
+      data-np-media-picker-target="altField"
+    >
+  </div>
+  <div class="np-editor-field">
+    <label class="np-label" for="content_caption_<%= block.id %>">Caption</label>
+    <input
+      type="text"
+      name="content_block[content][caption]"
+      id="content_caption_<%= block.id %>"
+      value="<%= block.content["caption"] %>"
+      class="np-input"
+      data-action="blur->np-block-content#save change->np-block-content#save"
+    >
+  </div>
+  <dialog class="np-modal np-media-picker-dialog" data-np-media-picker-target="dialog" style="width:80%; max-width:900px; max-height:80vh; border:1px solid #e2e8f0; border-radius:8px; padding:0;">
+    <div style="display:flex; justify-content:space-between; align-items:center; padding:1rem; border-bottom:1px solid #e2e8f0;">
+      <h3 style="margin:0;">Select Image from Media Library</h3>
+      <button type="button" class="np-btn np-btn--small" data-action="np-media-picker#closeModal">&times;</button>
+    </div>
+    <div data-np-media-picker-target="grid" style="overflow-y:auto; max-height:60vh;">
+      <p style="text-align:center; padding:2rem; color:#64748b;">Loading...</p>
+    </div>
+  </dialog>
+</div>

data/app/views/not_pressed/admin/content_blocks/editors/_quote.html.erb ADDED Viewed

@@ -0,0 +1,24 @@
+<div class="np-editor-quote">
+  <div class="np-editor-field">
+    <label class="np-label" for="content_text_<%= block.id %>">Quote Text</label>
+    <textarea
+      name="content_block[content][text]"
+      id="content_text_<%= block.id %>"
+      class="np-input"
+      rows="4"
+      data-action="blur->np-block-content#save change->np-block-content#save"
+    ><%= block.content["text"] %></textarea>
+  </div>
+  <div class="np-editor-field">
+    <label class="np-label" for="content_attribution_<%= block.id %>">Attribution</label>
+    <input
+      type="text"
+      name="content_block[content][attribution]"
+      id="content_attribution_<%= block.id %>"
+      value="<%= block.content["attribution"] %>"
+      class="np-input"
+      placeholder="Author name"
+      data-action="blur->np-block-content#save change->np-block-content#save"
+    >
+  </div>
+</div>

data/app/views/not_pressed/admin/content_blocks/editors/_text.html.erb ADDED Viewed

@@ -0,0 +1,28 @@
+<div class="np-editor-text" data-controller="np-rich-text">
+  <div class="np-editor-field">
+    <label class="np-label">Body</label>
+    <div class="np-toolbar">
+      <button type="button" class="np-toolbar-btn" data-action="click->np-rich-text#bold" title="Bold">B</button>
+      <button type="button" class="np-toolbar-btn" data-action="click->np-rich-text#italic" title="Italic"><em>I</em></button>
+      <button type="button" class="np-toolbar-btn" data-action="click->np-rich-text#underline" title="Underline"><u>U</u></button>
+      <button type="button" class="np-toolbar-btn" data-action="click->np-rich-text#link" title="Insert Link">&#128279;</button>
+      <button type="button" class="np-toolbar-btn" data-action="click->np-rich-text#insertUnorderedList" title="Unordered List">&#8226; List</button>
+      <button type="button" class="np-toolbar-btn" data-action="click->np-rich-text#insertOrderedList" title="Ordered List">1. List</button>
+    </div>
+    <div
+      class="np-rich-text-editor np-input"
+      contenteditable="true"
+      data-np-rich-text-target="editor"
+      data-action="blur->np-rich-text#sync blur->np-block-content#save"
+    ><%= raw block.content["body"] %></div>
+    <textarea
+      name="content_block[content][body]"
+      id="content_body_<%= block.id %>"
+      class="np-input"
+      rows="8"
+      style="display: none;"
+      data-np-rich-text-target="textarea"
+      data-action="change->np-block-content#save"
+    ><%= block.content["body"] %></textarea>
+  </div>
+</div>

data/app/views/not_pressed/admin/content_blocks/editors/_video.html.erb ADDED Viewed

@@ -0,0 +1,25 @@
+<div class="np-editor-video">
+  <div class="np-editor-field">
+    <label class="np-label" for="content_url_<%= block.id %>">Video URL</label>
+    <input
+      type="text"
+      name="content_block[content][url]"
+      id="content_url_<%= block.id %>"
+      value="<%= block.content["url"] %>"
+      class="np-input"
+      placeholder="https://www.youtube.com/watch?v=..."
+      data-action="blur->np-block-content#save change->np-block-content#save"
+    >
+  </div>
+  <div class="np-editor-field">
+    <label class="np-label" for="content_caption_<%= block.id %>">Caption</label>
+    <input
+      type="text"
+      name="content_block[content][caption]"
+      id="content_caption_<%= block.id %>"
+      value="<%= block.content["caption"] %>"
+      class="np-input"
+      data-action="blur->np-block-content#save change->np-block-content#save"
+    >
+  </div>
+</div>

data/app/views/not_pressed/admin/dashboard/index.html.erb ADDED Viewed

@@ -0,0 +1,60 @@
+<h1>Dashboard</h1>
+<div class="np-stats-grid">
+  <div class="np-stat-card">
+    <div class="np-stat-number"><%= @total_pages %></div>
+    <div class="np-stat-label">Total Pages</div>
+    <div class="np-stat-detail"><%= @published_pages %> published, <%= @draft_pages %> draft</div>
+  </div>
+  <div class="np-stat-card">
+    <div class="np-stat-number"><%= @total_blocks %></div>
+    <div class="np-stat-label">Content Blocks</div>
+  </div>
+  <div class="np-stat-card">
+    <div class="np-stat-number"><%= @total_media %></div>
+    <div class="np-stat-label">Media Files</div>
+  </div>
+  <div class="np-stat-card">
+    <div class="np-stat-number"><%= @total_forms %></div>
+    <div class="np-stat-label">Forms</div>
+    <div class="np-stat-detail"><%= @active_forms %> active</div>
+  </div>
+</div>
+<h2>Recent Pages</h2>
+<% if @recent_pages.any? %>
+  <table class="np-table">
+    <thead>
+      <tr>
+        <th>Title</th>
+        <th>Status</th>
+        <th>Content Type</th>
+        <th>Updated</th>
+      </tr>
+    </thead>
+    <tbody>
+      <% @recent_pages.each do |page| %>
+        <tr>
+          <td><a href="#"><%= page.title %></a></td>
+          <td><span class="np-badge np-badge--<%= page.status %>"><%= page.status %></span></td>
+          <td><%= page.content_type %></td>
+          <td><%= page.updated_at.strftime("%b %d, %Y %H:%M") %></td>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+<% else %>
+  <p>No pages yet. Create your first page.</p>
+<% end %>
+<h2>Quick Actions</h2>
+<div class="np-actions">
+  <a href="#" class="np-btn np-btn--primary">New Page</a>
+  <a href="/" class="np-btn">View Site</a>
+  <a href="#" class="np-btn">Media Library</a>
+</div>

data/app/views/not_pressed/admin/forms/_field_row.html.erb ADDED Viewed

@@ -0,0 +1,33 @@
+<div class="np-field-row" draggable="true" data-np-form-fields-target="item" data-action="dragstart->np-form-fields#dragstart dragover->np-form-fields#dragover dragend->np-form-fields#dragend drop->np-form-fields#drop">
+  <%= ff.hidden_field :id %>
+  <%= ff.hidden_field :position, data: { np_form_fields_target: "position" } %>
+  <%= ff.hidden_field :_destroy, value: "0", data: { np_form_fields_target: "destroy" } %>
+  <span class="np-drag-handle" title="Drag to reorder">&#9776;</span>
+  <div class="np-field-row-inputs">
+    <div class="np-field-row-group np-field-row-group--label">
+      <%= ff.text_field :label, class: "np-input", placeholder: "Field label" %>
+    </div>
+    <div class="np-field-row-group np-field-row-group--type">
+      <%= ff.select :field_type, NotPressed::FormField.field_types.keys.map { |t| [t.humanize, t] }, {}, class: "np-input", data: { action: "change->np-form-fields#toggleOptions" } %>
+    </div>
+    <div class="np-field-row-group np-field-row-group--required">
+      <label class="np-checkbox-label">
+        <%= ff.check_box :required %> Required
+      </label>
+    </div>
+    <div class="np-field-row-group np-field-row-group--placeholder">
+      <%= ff.text_field :placeholder, class: "np-input", placeholder: "Placeholder text" %>
+    </div>
+    <div class="np-field-row-group np-field-row-group--options" data-np-form-fields-target="optionsGroup" style="<%= ff.object.has_options? ? '' : 'display:none;' %>">
+      <%= ff.text_area :options, class: "np-input", rows: 2, placeholder: "Comma-separated options" %>
+    </div>
+  </div>
+  <button type="button" class="np-btn np-btn--small np-btn--danger" data-action="np-form-fields#removeField" title="Remove field">&times;</button>
+</div>