crud_components 0.1.0

data/app/views/crud_components/filters/_number_range.html.erb

@@ -0,0 +1,13 @@
+<%# Locals: field, query, form_id, compact, autosubmit, param_name, css
+    Inline (compact) stacks the two inputs tightly; the sidebar lays them out
+    as a horizontal group. %>
+<div class="<%= compact ? 'd-flex flex-column gap-1' : css.input_group %>">
+  <%= tag.input type: 'number', step: 'any', name: "#{param_name}_geq",
+                value: query.value("#{field.name}_geq"),
+                class: compact ? css.input_sm : css.input, form: form_id,
+                placeholder: '≥', aria: { label: "#{field.human_name} ≥" } %>
+  <%= tag.input type: 'number', step: 'any', name: "#{param_name}_leq",
+                value: query.value("#{field.name}_leq"),
+                class: compact ? css.input_sm : css.input, form: form_id,
+                placeholder: '≤', aria: { label: "#{field.human_name} ≤" } %>
+</div>

data/app/views/crud_components/filters/_select.html.erb

@@ -0,0 +1,8 @@
+<%# Locals: field, query, form_id, compact, autosubmit, param_name, css %>
+<% choices = [[t('crud_components.filter.any', default: '–'), '']] + field.filter_choices(query) %>
+<% choices << [t('crud_components.filter.not_set', default: 'Not set'), CrudComponents::NULL_FILTER_VALUE] if field.filter_includes_null? %>
+<%= select_tag param_name,
+               options_for_select(choices, query.value(field.name.to_s)),
+               class: compact ? css.select_input_sm : css.select_input, form: form_id, id: nil,
+               data: (autosubmit ? { action: 'change->crud-filter#submit' } : {}),
+               aria: { label: field.human_name } %>

data/app/views/crud_components/filters/_text.html.erb

@@ -0,0 +1,5 @@
+<%# Locals: field, query, form_id, compact, autosubmit, param_name, css %>
+<%= tag.input type: 'search', name: param_name, value: query.value(field.name.to_s),
+              class: compact ? css.input_sm : css.input, form: form_id,
+              placeholder: (field.human_name if compact),
+              aria: { label: field.human_name } %>

data/app/views/crud_components/form_fields/_belongs_to.html.erb

@@ -0,0 +1,3 @@
+<%# Form input for a belongs_to. Locals: f, field, form.
+    Submits the real foreign-key id (a POST body, not a shareable URL). %>
+<%= f.association field.reflection.name, collection: field.form_choices %>

data/app/views/crud_components/form_fields/_boolean.html.erb

@@ -0,0 +1,12 @@
+<%# Form input for a boolean column. Locals: f, field, form.
+    A non-null column is a plain checkbox. A nullable column becomes a 3-state
+    select (Yes / No / not set), so the absence of a value is expressible — the
+    blank option submits "" and persists NULL. %>
+<% if field.nullable? %>
+  <%= f.input field.name, as: :select,
+              collection: [[t('crud_components.filter.yes', default: 'Yes'), true],
+                           [t('crud_components.filter.no', default: 'No'), false]],
+              include_blank: t('crud_components.filter.not_set', default: 'Not set') %>
+<% else %>
+  <%= f.input field.name, as: :boolean %>
+<% end %>

data/app/views/crud_components/form_fields/_date.html.erb

@@ -0,0 +1,2 @@
+<%# Form input for a date column. Locals: f, field, form. %>
+<%= f.input field.name %>

data/app/views/crud_components/form_fields/_datetime.html.erb

@@ -0,0 +1,2 @@
+<%# Form input for a datetime column. Locals: f, field, form. %>
+<%= f.input field.name %>

data/app/views/crud_components/form_fields/_enum.html.erb

@@ -0,0 +1,8 @@
+<%# Form input for an enum column. Locals: f, field, form.
+    A nullable column gets a "not set" blank option so NULL stays expressible. %>
+<% if field.nullable? %>
+  <%= f.input field.name, collection: field.form_choices,
+              include_blank: t('crud_components.filter.not_set', default: 'Not set') %>
+<% else %>
+  <%= f.input field.name, collection: field.form_choices %>
+<% end %>

data/app/views/crud_components/form_fields/_file.html.erb

@@ -0,0 +1,47 @@
+<%# Form input for an Active Storage attachment. Locals: f, field, form.
+    Keep / add / remove all flow through the standard permit list (`:cover` /
+    `{ images: [] }`) with no controller code, relying on one fact: an empty
+    file input submits nothing, so leaving it empty keeps the current file(s).
+
+    has_one : choose a file to replace; tick "Remove" to delete (submits "").
+    has_many: each existing file has a "Keep" checkbox carrying its signed_id
+              (untick to remove); the file input adds. A hidden blank keeps the
+              array present so unticking everything actually clears it. %>
+<% name = field.name %>
+<% many = field.respond_to?(:many?) && field.many? %>
+<% value = field.value(form.record) %>
+<% attachments = value.respond_to?(:attached?) && value.attached? ? Array(many ? value.to_a : value) : [] %>
+<div class="mb-3 crud-attachment-field">
+  <%= f.label name, class: form.css.form_label %>
+
+  <% if many %>
+    <%= hidden_field_tag "#{f.object_name}[#{name}][]", '', id: nil %>
+    <% if attachments.any? %>
+      <div class="d-flex flex-wrap gap-2 mb-2">
+        <% attachments.each do |attachment| %>
+          <label class="d-flex flex-column align-items-center gap-1 border rounded p-1">
+            <%= render 'crud_components/fields/attachment_thumb', attachment: attachment, surface: :collection %>
+            <span class="form-check small mb-0">
+              <%= check_box_tag "#{f.object_name}[#{name}][]", attachment.signed_id, true, id: nil, class: 'form-check-input' %>
+              <%= t('crud_components.attachment.keep', default: 'Keep') %>
+            </span>
+          </label>
+        <% end %>
+      </div>
+    <% end %>
+    <%# f.file_field (not file_field_tag) so simple_form marks the form multipart %>
+    <%= f.file_field name, multiple: true, class: form.css.input %>
+  <% else %>
+    <% attachment = attachments.first %>
+    <% if attachment %>
+      <div class="mb-2"><%= render 'crud_components/fields/attachment_thumb', attachment: attachment, surface: :record %></div>
+      <span class="form-check small mb-1">
+        <%# value "" purges on submit; rendered before the file input so an upload still wins %>
+        <%= check_box_tag "#{f.object_name}[#{name}]", '', false, id: nil, class: 'form-check-input' %>
+        <%= t('crud_components.attachment.remove', default: 'Remove') %>
+      </span>
+    <% end %>
+    <%# f.file_field (not file_field_tag) so simple_form marks the form multipart %>
+    <%= f.file_field name, class: form.css.input %>
+  <% end %>
+</div>

data/app/views/crud_components/form_fields/_habtm.html.erb

@@ -0,0 +1,5 @@
+<%# Form input for a habtm / has_many(:through) association. Locals: f, field,
+    form. A no-JS multiselect baseline carrying the optional `crud-multiselect`
+    Stimulus hook (chips + add picker); without JS the multiselect stands. %>
+<%= f.association field.reflection.name, as: :select, collection: field.form_choices,
+                 input_html: { multiple: true, data: { controller: 'crud-multiselect' } } %>

data/app/views/crud_components/form_fields/_number.html.erb

@@ -0,0 +1,2 @@
+<%# Form input for a numeric column. Locals: f, field, form. %>
+<%= f.input field.name %>

data/app/views/crud_components/form_fields/_string.html.erb

@@ -0,0 +1,3 @@
+<%# Form input for a string column. Locals: f (simple_form builder), field, form.
+    simple_form infers the input type from the column. %>
+<%= f.input field.name %>

data/app/views/crud_components/form_fields/_text.html.erb

@@ -0,0 +1,2 @@
+<%# Form input for a text column. Locals: f, field, form. %>
+<%= f.input field.name, as: :text %>

data/app/views/crud_components/layouts/_table.html.erb

@@ -0,0 +1,143 @@
+<%# The default collection layout. Receives one local: `collection`
+    (CrudComponents::Presenters::Collection). %>
+<% css = collection.css %>
+<div class="crud-collection" data-controller="crud-filter<%= ' crud-select' if collection.selectable? %>">
+  <% if collection.filterable? %>
+    <%# The inline filter row lives inside <thead>; a form cannot wrap table
+        cells, so the inputs bind to this external form via the HTML `form`
+        attribute. Plain GET — works without JavaScript. %>
+    <form method="get" action="<%= request.path %>" id="<%= collection.filter_form_id %>"
+          data-turbo-action="advance" data-crud-filter-target="form"
+          data-action="submit->crud-filter#clean">
+      <% collection.preserved_params.each do |name, value| %>
+        <%= hidden_field_tag name, value, id: nil %>
+      <% end %>
+    </form>
+  <% end %>
+  <% if collection.selectable? %>
+    <%# Selection form: the row checkboxes bind to it via the HTML `form`
+        attribute (same trick as the filter row); the toolbar's bulk-action
+        buttons submit it with per-button formaction/formmethod. A *global* CSRF
+        token (not form_tag's per-form one) so it stays valid for whichever
+        action a button posts to. Plain POST — works without JavaScript. %>
+    <form id="<%= collection.select_form_id %>" method="post" action="<%= request.path %>">
+      <%= hidden_field_tag 'authenticity_token', form_authenticity_token, id: nil %>
+    </form>
+  <% end %>
+
+  <div class="table-responsive">
+    <table class="<%= css.table %>">
+      <thead class="<%= css.thead %>">
+        <% if collection.show_toolbar? %>
+          <%# Search + collection actions, seated in the table head (a full-width
+              cell) so they read as part of the table rather than floating above. %>
+          <tr>
+            <th colspan="<%= collection.columns_count %>" class="crud-toolbar-cell">
+              <%= render 'crud_components/toolbar', collection: collection %>
+            </th>
+          </tr>
+        <% end %>
+        <tr>
+          <% if collection.selectable? %>
+            <th scope="col" class="crud-select-cell">
+              <input type="checkbox" class="form-check-input" aria-label="Select all"
+                     data-crud-select-target="all" data-action="change->crud-select#toggleAll">
+            </th>
+          <% end %>
+          <% collection.fields.each do |field| %>
+            <th scope="col"><%= render 'crud_components/column_header', collection: collection, field: field %></th>
+          <% end %>
+          <% if collection.trailing_column? %>
+            <th scope="col" class="<%= css.actions_cell %>">
+              <% if collection.column_picker? %>
+                <%= render 'crud_components/column_picker', collection: collection, url: request.path %>
+              <% end %>
+            </th>
+          <% end %>
+        </tr>
+        <% if collection.filterable? %>
+          <tr class="<%= css.filter_row %>">
+            <% if collection.selectable? %><td class="crud-select-cell"></td><% end %>
+            <% collection.fields.each do |field| %>
+              <td>
+                <% if collection.filterable_field?(field) %>
+                  <%= collection.render_filter_control(field, collection.query,
+                                                       form_id: collection.filter_form_id,
+                                                       compact: true, autosubmit: true) %>
+                <% end %>
+              </td>
+            <% end %>
+            <% if collection.trailing_column? %>
+              <td class="<%= css.actions_cell %>">
+                <div class="<%= css.button_group %>">
+                  <button type="submit" form="<%= collection.filter_form_id %>" class="<%= css.button %>">
+                    <%= t('crud_components.filter.submit', default: 'Filter') %>
+                  </button>
+                  <% if collection.filtered? %>
+                    <%= link_to t('crud_components.filter.reset', default: 'Reset'),
+                                collection.reset_url, class: css.button,
+                                title: t('crud_components.filter.reset', default: 'Reset'),
+                                data: { turbo_action: 'advance' } %>
+                  <% end %>
+                </div>
+              </td>
+            <% end %>
+          </tr>
+        <% end %>
+      </thead>
+      <tbody>
+        <% if collection.grouped? %>
+          <% collection.groups.each do |group| %>
+            <tr class="crud-group-row">
+              <td colspan="<%= collection.columns_count %>">
+                <span class="d-inline-flex align-items-center gap-2">
+                  <% if collection.selectable? && collection.group_open?(group) %>
+                    <input type="checkbox" class="form-check-input" aria-label="Select group"
+                           data-crud-select-target="group" data-group="<%= group.key %>"
+                           data-action="change->crud-select#toggleGroup">
+                  <% end %>
+                  <%# turbo_action: replace (not advance) so toggling ?open= counts as a
+                      Turbo page refresh — same pathname + replace → morph (only the
+                      affected rows change, scroll preserved per the layout's
+                      turbo-refresh-* metas). Collapsed rows stay unrendered. No JS
+                      needed; without Turbo this is a plain GET that reloads as before. %>
+                  <%= link_to collection.group_toggle_url(group), data: { turbo_action: 'replace' },
+                              class: 'text-reset text-decoration-none d-inline-flex align-items-center gap-2' do %>
+                    <i class="<%= css.icon_prefix %><%= collection.group_open?(group) ? 'chevron-down' : 'chevron-right' %>"></i>
+                    <span class="fw-medium"><%= group.label %></span>
+                    <span class="<%= css.badge_muted %>"><%= group.count %></span>
+                  <% end %>
+                </span>
+              </td>
+            </tr>
+            <% if collection.group_open?(group) %>
+              <% group.records.each do |record| %>
+                <%= render 'crud_components/row', collection: collection, record: record, css: css, group: group %>
+              <% end %>
+            <% end %>
+          <% end %>
+        <% else %>
+          <% collection.records.each do |record| %>
+            <%= render 'crud_components/row', collection: collection, record: record, css: css %>
+          <% end %>
+        <% end %>
+        <% if collection.records.empty? %>
+          <tr>
+            <td colspan="<%= collection.columns_count %>" class="<%= css.muted %>">
+              <%= t('crud_components.empty', default: 'No records') %>
+            </td>
+          </tr>
+        <% end %>
+      </tbody>
+      <% if collection.show_pager? %>
+        <tfoot>
+          <tr>
+            <td colspan="<%= collection.columns_count %>" class="crud-pager-cell">
+              <%= render 'crud_components/pager', collection: collection %>
+            </td>
+          </tr>
+        </tfoot>
+      <% end %>
+    </table>
+  </div>
+</div>

data/config/locales/crud_components.de.yml

@@ -0,0 +1,39 @@
+# Deutsche Standardtexte für die eingebaute Oberfläche des Gems. Jede Abfrage
+# übergibt zusätzlich einen Inline-Default, daher sind diese Schlüssel optional
+# und jederzeit in der eigenen config/locales/*.yml überschreibbar.
+de:
+  crud_components:
+    confirm: "Sind Sie sicher?"
+    empty: "Keine Einträge"
+    more: "+%{count} weitere"
+    sort: "Sortieren"
+    filter_by: "Nach %{name} filtern"
+    columns:
+      edit: "Spalten"
+      apply: "Anwenden"
+      reset: "Zurücksetzen"
+      legend: "Spalten anzeigen"
+    attachment:
+      keep: "Behalten"
+      remove: "Entfernen"
+    actions:
+      new: "Neu"
+      show: "Anzeigen"
+      edit: "Bearbeiten"
+      destroy: "Löschen"
+    filter:
+      any: "–"
+      not_set: "Nicht gesetzt"
+      "yes": "Ja"
+      "no": "Nein"
+      search: "Suche"
+      apply: "Anwenden"
+      submit: "Filtern"
+      reset: "Zurücksetzen"
+    pager:
+      label: "Seitennummerierung"
+      summary: "Seite %{page} von %{total} · %{count} gesamt"
+      previous: "‹"
+      next: "›"
+      previous_label: "Zurück"
+      next_label: "Weiter"

data/config/locales/crud_components.en.yml

@@ -0,0 +1,40 @@
+# Default strings for the gem's built-in UI. Every lookup also passes an inline
+# default, so these are overridable in your app and never required — they just
+# spare you from translating the defaults yourself. Override any key by defining
+# it in your own config/locales/*.yml.
+en:
+  crud_components:
+    confirm: "Are you sure?"
+    empty: "No records"
+    more: "+%{count} more"
+    sort: "Sort"
+    filter_by: "Filter by %{name}"
+    columns:
+      edit: "Columns"
+      apply: "Apply"
+      reset: "Reset"
+      legend: "Show columns"
+    attachment:
+      keep: "Keep"
+      remove: "Remove"
+    actions:
+      new: "New"
+      show: "Show"
+      edit: "Edit"
+      destroy: "Delete"
+    filter:
+      any: "–"
+      not_set: "Not set"
+      "yes": "Yes"
+      "no": "No"
+      search: "Search"
+      apply: "Apply"
+      submit: "Filter"
+      reset: "Reset"
+    pager:
+      label: "Pagination"
+      summary: "Page %{page} of %{total} · %{count} total"
+      previous: "‹"
+      next: "›"
+      previous_label: "Previous"
+      next_label: "Next"

data/crud_components.gemspec

@@ -0,0 +1,48 @@
+require_relative 'lib/crud_components/version'
+
+Gem::Specification.new do |spec|
+  spec.name = 'crud_components'
+  spec.version = CrudComponents::VERSION
+  spec.authors = ['Anatoly Zelenin']
+  spec.email = ['anatoly@zelenin.de']
+
+  spec.summary = 'Declarative CRUD UI for ActiveRecord models, rendered inside your app'
+  spec.description = 'Tables, record views and filter forms derived from what Rails ' \
+                     'already knows about your models. Zero configuration works; ' \
+                     'declarations only improve. Forms render through simple_form; ' \
+                     'nothing beyond Rails is otherwise required.'
+  spec.homepage = 'https://github.com/itadventurer/crud_components'
+  spec.license = 'MIT'
+  # 3.2 floor: the lib itself only needs 3.1-era syntax, but Ruby 3.1 is EOL and
+  # i18n (>= 1.15, pulled transitively by Rails) uses Fiber storage that needs
+  # 3.2+. The CI matrix proves Ruby 3.2–3.4.
+  spec.required_ruby_version = '>= 3.2'
+
+  spec.metadata['homepage_uri'] = spec.homepage
+  spec.metadata['source_code_uri'] = spec.homepage
+  spec.metadata['rubygems_mfa_required'] = 'true'
+
+  # Prefer git, but fall back to a glob so the gem (and the demo image) build
+  # without git or a .git directory. Excludes tests, the dummy, CI and demo-deploy
+  # artifacts — none ship in the gem. (`git` is absent in the slim demo image, so
+  # the backtick is rescued — Errno::ENOENT otherwise aborts the build.)
+  tracked = begin
+    `git ls-files -z`.split("\x0")
+  rescue StandardError
+    []
+  end
+  tracked = Dir.glob('**/*', File::FNM_DOTMATCH).select { |f| File.file?(f) } if tracked.empty?
+  spec.files = tracked.reject do |f|
+    f.start_with?('test/', 'script/', '.github/', 'docs/screenshots/', 'deploy/') ||
+      %w[AGENTS.md Dockerfile .dockerignore].include?(f)
+  end
+  spec.require_paths = ['lib']
+
+  spec.add_dependency 'actionview', '>= 7.1'
+  spec.add_dependency 'activerecord', '>= 7.1'
+  spec.add_dependency 'activesupport', '>= 7.1'
+  # Form rendering. simple_form's wrappers are the standard way to make form
+  # markup match a design system (Bootstrap/Tailwind/Bulma/…); deferring to it
+  # is less code and a better fit than reinventing wrappers. Light + ubiquitous.
+  spec.add_dependency 'simple_form', '>= 5.0'
+end