formstrap 0.1.0

data/app/views/formstrap/media/_item.html.erb

@@ -0,0 +1,38 @@
+<%
+  # formstrap/media/item
+  #
+  # ==== Required parameters
+  # * +form+ - Form object
+  # * +url+ - URL for the media modal
+  #
+  # ==== Optional parameters
+  # * +sort+ - Allow sorting by dragging items. `active_storage_attachments` must have a position column.
+  # * +width+ - Width of the thumbnail
+  # * +height+ - Height of the thumbnail
+  #
+
+  media_item = Formstrap::MediaItemView.new(local_assigns)
+%>
+
+<div class="h-form-file-thumbnail media-drag-sort-handle" title="<%= "#{media_item.filename} (#{media_item.size})" %>" data-media-target="item">
+  <%= form.hidden_field(:id) %>
+  <%= form.hidden_field(:blob_id) %>
+  <%= form.hidden_field(:position, value: media_item.position_value) if media_item.sort %>
+  <%= form.hidden_field(:_destroy) %>
+
+  <a href="<%= media_item.url %>" data-turbo-frame="remote_modal" data-media-target="modalButton">
+    <%= render "formstrap/shared/thumbnail", media_item.thumbnail_options %>
+  </a>
+
+  <div class="h-form-file-thumbnail-actions">
+    <!-- Edit -->
+    <a href="<%= formstrap_media_item_path(id: media_item.id) %>" class="h-form-file-thumbnail-edit" data-turbo-frame="remote_modal" data-media-target="editButton">
+      <%= bootstrap_icon("pencil") %>
+    </a>
+
+    <!-- Remove -->
+    <div class="h-form-file-thumbnail-remove" data-action="click->media#destroy">
+      <%= bootstrap_icon("x") %>
+    </div>
+  </div>
+</div>

data/app/views/formstrap/media/_media_item_modal.html.erb

@@ -0,0 +1,77 @@
+<%= turbo_frame_tag "modal_content" do %>
+  <%= formstrap_form_with url: formstrap_media_item_url(id: @blob.id), model: @blob do |form| %>
+    <div class="modal-header">
+      <h5 class="modal-title"><%= t(".edit") %></h5>
+      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="<%= t(".close") %>"></button>
+    </div>
+    <div class="modal-body">
+      <%= render "formstrap/shared/notifications" %>
+      <div class="row">
+        <div class="col-4">
+          <%= render "formstrap/shared/thumbnail", file: @blob %>
+        </div>
+        <div class="col-8 d-flex flex-column justify-content-center">
+          <p class="small text-secondary m-0">
+            <strong><%= t(".uploaded_at") %>:</strong>
+            <%= l(@blob.created_at, format: :long) %>
+          </p>
+          <p class="small text-secondary m-0">
+            <strong><%= t(".type") %>:</strong>
+            <%= @blob.content_type %>
+          </p>
+          <p class="small text-secondary m-0">
+            <strong><%= t(".dimensions") %>:</strong>
+            <% if @blob.metadata[:width] && @blob.metadata[:height] %>
+              <%= "#{@blob.metadata[:width]}px x #{@blob.metadata[:height]}px" %>
+            <% else %>
+              <%= t(".not_analysed") %>
+            <% end %>
+          </p>
+          <p class="small text-secondary m-0">
+            <strong><%= t(".size") %>:</strong>
+            <% if @blob.byte_size > 0 %>
+              <%= number_to_human_size(@blob.byte_size) %>
+            <% else %>
+              <%= t(".not_analysed") %>
+            <% end %>
+          </p>
+        </div>
+      </div>
+      <div class="row mt-3">
+        <div class="col-12">
+          <%= form.text :filename, append: "." + form.object.filename.to_s.rpartition(".").last, value: form.object.filename.to_s.rpartition(".").first %>
+        </div>
+      </div>
+      <% attachments = @blob.attachments.not_a_variant.all %>
+      <% if attachments.any? %>
+        <hr>
+        <h6><%= t(".attachment_used_by") %>:</h6>
+        <table class="table table-sm">
+          <tbody>
+          <% attachments.each do |attachment| %>
+            <% context_resource = attachment.record_hierarchy.last %>
+            <% context_resource_path = polymorphic_path([:admin, context_resource]) rescue nil %>
+            <tr>
+              <td width="40%">
+                <% if context_resource_path.present? %>
+                  <%= link_to truncate(context_resource.to_s), context_resource_path, title: context_resource %>
+                <% else %>
+                  <%= context_resource %>
+                <% end %>
+              </td>
+              <td width="25%"><%= "#{context_resource.model_name.human(count: 1)} (#{attachment.class.human_attribute_name(attachment.name.to_sym)})" %></td>
+              <td width="35%">
+                <small class="text-secondary"><%= l(attachment.created_at, format: :long) %></small>
+              </td>
+            </tr>
+          <% end %>
+          </tbody>
+        </table>
+      <% end %>
+    </div>
+    <div class="modal-footer">
+      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"><%= t(".close") %></button>
+      <%= form.submit t(".update"), class: "btn btn-primary" %>
+    </div>
+  <% end %>
+<% end %>

data/app/views/formstrap/media/_modal.html.erb

@@ -0,0 +1,40 @@
+<div class="media-modal modal fade" tabindex="-1" data-controller="remote-modal media-modal" data-media-modal-ids-value="<%= params[:ids] ? params[:ids] : [] %>" data-name="<%= name %>" data-min="<%= min %>" data-max="<%= max %>">
+  <div class="modal-dialog modal-lg modal-dialog-scrollable">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title">
+          <%= t(".title", count: min.to_i < 1 ? 1 : min.to_i) %>
+        </h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="<%= t(".close") %>"></button>
+      </div>
+      <div class="modal-body">
+        <%= turbo_frame_tag "thumbnails", class: "d-flex flex-wrap gap-2" do %>
+          <% @blobs.each do |blob| %>
+            <%= turbo_frame_tag blob, src: formstrap_media_item_thumbnail_path(blob), loading: "lazy" do %>
+              <%= render "thumbnail" %>
+            <% end %>
+          <% end %>
+          <div data-media-modal-target="placeholder" class="<%= "d-none" if !@blobs.empty? %>">
+            <p><%= t(".placeholder") %></p>
+          </div>
+        <% end %>
+        <div class="mt-3">
+          <%= render "formstrap/pagination/infinite", items: @blobs %>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <%= form_with url: formstrap_new_media_path, multipart: true, data: {"media-modal-target": "form"}, class: "me-auto" do |form| %>
+          <%= form.label :files, class: "btn h-btn-outline-light" do %>
+            <%= bootstrap_icon("upload") %>
+            <%= t(".upload") %>
+            <%= form.file_field :files, accept: mimetypes, class: "d-none", multiple: true, data: {action: "change->media-modal#submitForm"} %>
+          <% end %>
+        <% end %>
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"><%= t(".close") %></button>
+        <button type="button" class="btn btn-primary" data-bs-dismiss="modal" data-action="click->media-modal#select" data-media-modal-target="selectButton">
+          <%= t(".select") %> (<span data-media-modal-target="count">0</span><%= t(".maximum", count: max.to_i) if max.present? %>)
+        </button>
+      </div>
+    </div>
+  </div>
+</div>

data/app/views/formstrap/media/_thumbnail.html.erb

@@ -0,0 +1,20 @@
+<% blob = local_assigns.has_key?(:blob) ? local_assigns[:blob] : nil %>
+<% if blob.present? %>
+  <div data-media-modal-target="item" title="<%= "#{blob.filename} (#{l(blob.created_at, format: :long)})" %>">
+    <!-- Input -->
+    <input
+      id="media-item-<%= blob.id %>"
+      type="checkbox"
+      value="<%= blob.id %>"
+      data-action="change->media-modal#inputChange"
+      data-media-modal-target="idCheckbox"
+      hidden>
+
+    <!-- Label -->
+    <label for="media-item-<%= blob.id %>">
+      <%= render "formstrap/shared/thumbnail", file: blob %>
+    </label>
+  </div>
+<% else %>
+  <%= render "formstrap/shared/thumbnail", file: nil %>
+<% end %>

data/app/views/formstrap/media/_validation.html.erb

@@ -0,0 +1,10 @@
+<!-- Custom validation field -->
+<%= form.text_field :"validation_#{attribute}",
+  name: nil,
+  value: nil,
+  class: "h-form-media-validation",
+  data: {
+    "media-target": "validationInput",
+    "min-message": t(".min", count: min),
+    "max-message": t(".max", count: max),
+  } %>

data/app/views/formstrap/media/create.turbo_stream.erb

@@ -0,0 +1,5 @@
+<%= turbo_stream.prepend "thumbnails" do %>
+  <% @blobs.each do |blob| %>
+    <%= render "formstrap/media/thumbnail", blob: blob %>
+  <% end %>
+<% end %>

data/app/views/formstrap/media/index.html.erb

@@ -0,0 +1,3 @@
+<%= turbo_frame_tag "remote_modal" do %>
+  <%= render "formstrap/media/modal", blobs: @blobs, mimetypes: @mimetypes, name: params[:name], min: params[:min], max: params[:max] %>
+<% end %>

data/app/views/formstrap/media/index.turbo_stream.erb

@@ -0,0 +1,11 @@
+<%= turbo_stream.append "thumbnails" do %>
+  <% @blobs.each do |blob| %>
+    <%= turbo_frame_tag blob, src: formstrap_media_item_thumbnail_path(blob), loading: "lazy" do %>
+      <%= render 'thumbnail' %>
+    <% end %>
+  <% end %>
+<% end %>
+
+<%= turbo_stream.replace "infinite" do %>
+    <%= render "formstrap/pagination/infinite", items: @blobs %>
+<% end %>

data/app/views/formstrap/media/show.html.erb

@@ -0,0 +1,9 @@
+<%= turbo_frame_tag "remote_modal" do %>
+  <div class="media-item-modal modal fade" tabindex="-1" data-controller="remote-modal">
+    <div class="modal-dialog modal-md modal-dialog-scrollable">
+      <div class="modal-content">
+        <%= render "formstrap/media/media_item_modal" %>
+      </div>
+    </div>
+  </div>
+<% end %>

data/app/views/formstrap/media/thumbnail.html.erb

@@ -0,0 +1,3 @@
+<%= turbo_frame_tag @blob do %>
+ <%= render "thumbnail", blob: @blob %>
+<% end %>

data/app/views/formstrap/media/update.turbo_stream.erb

@@ -0,0 +1,3 @@
+<%= turbo_stream.update "modal_content" do %>
+  <%= render "formstrap/media/media_item_modal" %>
+<% end %>

data/app/views/formstrap/pagination/_infinite.html.erb

@@ -0,0 +1,7 @@
+<% auto_load = local_assigns.has_key?(:auto_load) ? local_assigns[:auto_load] : true %>
+
+<% unless items.page(params[:page]).last_page? %>
+  <div id="infinite">
+    <%= link_to t(".load_more"), path_to_next_page(items), class: "btn btn-primary", data: {turbo_stream: true, controller: auto_load ? "infinite-scroller" : ""} %>
+  </div>
+<% end %>

data/app/views/formstrap/repeater/_row.html.erb

@@ -0,0 +1,53 @@
+<%
+  # admin/fields/repeater/row
+  # accepts block: yes
+  # parameters:
+  #   form: Form object
+  #   pass_thru: (string) Pass thru for add button if needed
+
+  draggable = form.object.respond_to?(:position)
+  destroyable = form.object.respond_to?(:destroy)
+  error_class = form.object.errors.present? ? "border border-danger" : ""
+  class_names = local_assigns.has_key?(:class) ? local_assigns[:class] : "repeater-row list-group-item"
+%>
+<div class="<%= class_names %> <%= error_class %>"
+     data-repeater-target="row"
+     data-row-index="<%= form.options[:child_index] %>"
+     data-new-record="<%= form.object.new_record? %>"
+>
+
+  <%= form.hidden_field :id %>
+  <%= form.hidden_field :_destroy if destroyable %>
+  <%= form.hidden_field :position if draggable %>
+
+  <!--  Drag handle -->
+  <% if draggable %>
+    <div class="repeater-row-handle">
+      <%= bootstrap_icon("grip-vertical") %>
+    </div>
+  <% end %>
+
+  <!--  Add button-->
+  <div
+    class="repeater-row-add btn btn-link"
+    title="<%= t(".add") %>"
+    data-repeater-target="addButton"
+    data-popup-target="button"
+    data-popup-id="<%= "repeater-buttons-#{repeater_id}" %>"
+    data-popup-pass-thru="<%= pass_thru %>"
+    data-action="click->repeater#resetButtonIndices click->popup#open"
+  >
+    <%= bootstrap_icon("plus-circle") %>
+  </div>
+
+  <!--  Remove button-->
+  <div
+    class="repeater-row-remove btn btn-link"
+    title="<%= t(".remove") %>"
+    data-action="click->repeater#removeRow"
+  >
+    <%= bootstrap_icon("dash-circle") %>
+  </div>
+
+  <%= yield %>
+</div>

data/app/views/formstrap/shared/_notifications.html.erb

@@ -0,0 +1,20 @@
+<%
+  # formstrap/shared/notifications
+  #
+  # ==== Examples
+  #   Basic version
+  #   <%= render "formstrap/shared/notifications" %#>
+%>
+
+<div class="toast-container position-absolute top-0 end-0 p-3">
+  <% flash.each do |name, message| %>
+    <div class="toast align-items-center text-white show <%= notification_color(name.to_sym)[:background] %>" role="alert" aria-live="assertive" aria-atomic="true" data-controller="toast">
+      <div class="d-flex">
+        <div class="toast-body <%= notification_color(name.to_sym)[:text] %>">
+          <%= message %>
+        </div>
+        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
+      </div>
+    </div>
+  <% end %>
+</div>

data/app/views/formstrap/shared/_popup.html.erb

@@ -0,0 +1,32 @@
+<%
+  # formstrap/shared/popup
+  #
+  # ==== Options
+  # * +id</tt> - Identifier for this popup
+  #
+  # ==== Examples
+  #   To trigger this popup create an element with a data attribute like this
+  #
+  #   <button data-popup-id="popupId">open Popup</button>
+  #   <%= render "formstrap/shared/popup", id: "popupId" do %#>
+  #     popup Content
+  #   <% end %#>
+  #
+  #   If you want to pass a click event to an element inside the popup without opening the popup you can use the
+  #   "data-popup-pass-thru" attribute.
+  #
+  #   <button data-popup-id="popupId" data-popup-pass-thru="#link">open Popup</button>
+  #   <%= render "formstrap/shared/popup", id: "popupId" do %#>
+  #     <a href="https://example.com" id="link">
+  #   <% end %#>
+  data = local_assigns.has_key?(:data) ? data : {}
+
+  options = {
+    class: ["h-popup", "closed"],
+    data: data.merge("popup-target": "popup", "popup-id": id)
+  }
+%>
+
+<%= content_tag(:div, options) do %>
+  <%= yield %>
+<% end %>

data/app/views/formstrap/shared/_thumbnail.html.erb

@@ -0,0 +1,35 @@
+<%
+  # formstrap/shared/thumbnail
+  #
+  # ==== Required parameters
+  # * +file+ - Name of the attribute of the form model
+  #
+  # ==== Optional parameters
+  # * +width+ - Width of the thumbnail. Set to nil to fill according to the original aspect ratio
+  # * +height+ - Height of the thumbnail. Set to nil to fill according to the original aspect ratio
+  # * +icon+ - Force icon to be shown instead of a thumbnail
+  #
+  # ==== References
+  # https://headmin.dev/docs/thumbnail
+  #
+  # ==== Examples
+  #   Basic version
+  #   <%= render "formstrap/shared/thumbnail", file: file %#>
+  #
+  #   Custom size (200px x 100px)
+  #   <%= render "formstrap/shared/thumbnail", file: file, width: 200, height: 100 %#>
+  #
+  #   Custom (bootstrap) icon
+  #   <%= render "formstrap/shared/thumbnail", file: file, icon: "file-earmark-excel" %#>
+  thumbnail = Admin::ThumbnailView.new(local_assigns)
+%>
+
+<div class="<%= thumbnail.class_names %>">
+  <div class="h-thumbnail-bg" style="min-width: <%= thumbnail.width || 100 %>px; min-height: <%= thumbnail.height || 100 %>px;">
+    <% if thumbnail.variable? && !thumbnail.icon? %>
+      <%= image_tag(thumbnail.file.variant(thumbnail.variant_options)) %>
+    <% else %>
+      <%= bootstrap_icon(thumbnail.icon_name, class: "h-thumbnail-icon") %>
+    <% end %>
+  </div>
+</div>

data/bin/console

@@ -0,0 +1,14 @@
+#!/usr/bin/env ruby
+
+require "bundler/setup"
+require "formstrap"
+
+# You can add fixtures and/or initialization code here to make experimenting
+# with your gem easier. You can also use a different console, if you like.
+
+# (If you use this, don't forget to add pry to your Gemfile!)
+# require "pry"
+# Pry.start
+
+require "irb"
+IRB.start(__FILE__)

data/bin/setup

@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+set -euo pipefail
+IFS=$'\n\t'
+set -vx
+
+bundle install
+
+# Do any other automated setup that you need to do here

data/config/importmap.rb

@@ -0,0 +1,2 @@
+# Pin npm packages by running ./bin/importmap
+pin "formstrap"

data/config/locales/activerecord/en.yml

@@ -0,0 +1,12 @@
+en:
+  attributes:
+    created_at: Created at
+    email: Email
+    filename: Filename
+    handle: Handle
+    password: Password
+    password_confirmation: Password confirmation
+    remember_me: Stay logged in
+    updated_at: Updated at
+    value: Value
+    visible: Visible?

data/config/locales/activerecord/nl.yml

@@ -0,0 +1,13 @@
+nl:
+  attributes:
+    created_at: Aangemaakt
+    email: E-mailadres
+    filename: Bestandsnaam
+    handle: Naam
+    password: Wachtwoord
+    password_confirmation: Wachtwoord bevestiging
+    remember_me: Aangemeld blijven
+    updated_at: Aangepast
+    value: Waarde
+    visible: Zichtbaar?
+

data/config/locales/defaults/en.yml

@@ -0,0 +1,215 @@
+---
+en:
+  activerecord:
+    errors:
+      messages:
+        record_invalid: 'Validation failed: %{errors}'
+        restrict_dependent_destroy:
+          has_one: Cannot delete record because a dependent %{record} exists
+          has_many: Cannot delete record because dependent %{record} exist
+  date:
+    abbr_day_names:
+      - Sun
+      - Mon
+      - Tue
+      - Wed
+      - Thu
+      - Fri
+      - Sat
+    abbr_month_names:
+      -
+      - Jan
+      - Feb
+      - Mar
+      - Apr
+      - May
+      - Jun
+      - Jul
+      - Aug
+      - Sep
+      - Oct
+      - Nov
+      - Dec
+    day_names:
+      - Sunday
+      - Monday
+      - Tuesday
+      - Wednesday
+      - Thursday
+      - Friday
+      - Saturday
+    formats:
+      default: "%Y-%m-%d"
+      long: "%B %d, %Y"
+      short: "%b %d"
+    month_names:
+      -
+      - January
+      - February
+      - March
+      - April
+      - May
+      - June
+      - July
+      - August
+      - September
+      - October
+      - November
+      - December
+    order:
+      - :year
+      - :month
+      - :day
+  datetime:
+    distance_in_words:
+      about_x_hours:
+        one: about 1 hour
+        other: about %{count} hours
+      about_x_months:
+        one: about 1 month
+        other: about %{count} months
+      about_x_years:
+        one: about 1 year
+        other: about %{count} years
+      almost_x_years:
+        one: almost 1 year
+        other: almost %{count} years
+      half_a_minute: half a minute
+      less_than_x_seconds:
+        one: less than 1 second
+        other: less than %{count} seconds
+      less_than_x_minutes:
+        one: less than a minute
+        other: less than %{count} minutes
+      over_x_years:
+        one: over 1 year
+        other: over %{count} years
+      x_seconds:
+        one: 1 second
+        other: "%{count} seconds"
+      x_minutes:
+        one: 1 minute
+        other: "%{count} minutes"
+      x_days:
+        one: 1 day
+        other: "%{count} days"
+      x_months:
+        one: 1 month
+        other: "%{count} months"
+      x_years:
+        one: 1 year
+        other: "%{count} years"
+    prompts:
+      second: Second
+      minute: Minute
+      hour: Hour
+      day: Day
+      month: Month
+      year: Year
+  errors:
+    format: "%{attribute} %{message}"
+    messages:
+      accepted: must be accepted
+      blank: can't be blank
+      confirmation: doesn't match %{attribute}
+      empty: can't be empty
+      equal_to: must be equal to %{count}
+      even: must be even
+      exclusion: is reserved
+      greater_than: must be greater than %{count}
+      greater_than_or_equal_to: must be greater than or equal to %{count}
+      inclusion: is not included in the list
+      invalid: is invalid
+      less_than: must be less than %{count}
+      less_than_or_equal_to: must be less than or equal to %{count}
+      model_invalid: 'Validation failed: %{errors}'
+      not_a_number: is not a number
+      not_an_integer: must be an integer
+      odd: must be odd
+      other_than: must be other than %{count}
+      present: must be blank
+      required: must exist
+      taken: has already been taken
+      too_long:
+        one: is too long (maximum is 1 character)
+        other: is too long (maximum is %{count} characters)
+      too_short:
+        one: is too short (minimum is 1 character)
+        other: is too short (minimum is %{count} characters)
+      wrong_length:
+        one: is the wrong length (should be 1 character)
+        other: is the wrong length (should be %{count} characters)
+    template:
+      body: 'There were problems with the following fields:'
+      header:
+        one: 1 error prohibited this %{model} from being saved
+        other: "%{count} errors prohibited this %{model} from being saved"
+  helpers:
+    select:
+      prompt: Please select
+    submit:
+      create: Create %{model}
+      submit: Save %{model}
+      update: Update %{model}
+  number:
+    currency:
+      format:
+        delimiter: ","
+        format: "%u%n"
+        precision: 2
+        separator: "."
+        significant: false
+        strip_insignificant_zeros: false
+        unit: "$"
+    format:
+      delimiter: ","
+      precision: 3
+      separator: "."
+      significant: false
+      strip_insignificant_zeros: false
+    human:
+      decimal_units:
+        format: "%n %u"
+        units:
+          billion: Billion
+          million: Million
+          quadrillion: Quadrillion
+          thousand: Thousand
+          trillion: Trillion
+          unit: ''
+      format:
+        delimiter: ''
+        precision: 3
+        significant: true
+        strip_insignificant_zeros: true
+      storage_units:
+        format: "%n %u"
+        units:
+          byte:
+            one: Byte
+            other: Bytes
+          eb: EB
+          gb: GB
+          kb: KB
+          mb: MB
+          pb: PB
+          tb: TB
+    percentage:
+      format:
+        delimiter: ''
+        format: "%n%"
+    precision:
+      format:
+        delimiter: ''
+  support:
+    array:
+      last_word_connector: ", and "
+      two_words_connector: " and "
+      words_connector: ", "
+  time:
+    am: am
+    formats:
+      default: "%a, %d %b %Y %H:%M:%S %z"
+      long: "%B %d, %Y %H:%M"
+      short: "%d %b %H:%M"
+    pm: pm