uchi 0.1.6 → 0.1.8

data/app/assets/tailwind/uchi.css

@@ -17,5 +17,5 @@ running the following command:
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
 @import "flowbite/src/themes/default"; /* This imports them from node_modules/flowbite/src/themes/default.css */
 
-/* Configure the source files of Flowbite */
-@source "../../../node_modules/flowbite";
+/* Don't include classes used in docs into Uchis stylesheet */
+@source not "docs";

data/app/components/uchi/field/belongs_to/edit.html.erb

@@ -1 +1,73 @@
-<%= render(Uchi::Flowbite::InputField::Select.new(**options)) %>
+<div
+  class="relative"
+  data-action="keydown.esc->belongs-to#closeDropdown"
+  data-controller="belongs-to"
+  data-belongs-to-backend-url-value="<%= helpers.uchi.belongs_to_associated_records_path(field: field.name, model: repository.model, record_id: record&.id) %>"
+>
+  <%= render(Uchi::Flowbite::Input::Label.new(attribute: field.name, form: form, options: {for: dom_id_for_toggle})) { label } %>
+
+  <%# Actual input. This is the hidden part which is what is sent to the server %>
+  <%= form.hidden_field "#{field.name}_id",
+    data: {
+      'belongs-to-target': 'id',
+    }
+  %>
+
+  <button
+    class="<%= Uchi::Flowbite::Input::Field.classes.join(" ") %> text-left"
+    data-action="belongs-to#toggle"
+    id="<%= dom_id_for_toggle %>"
+    type="button"
+  >
+    <div class="inline-flex items-center justify-between w-full">
+      <div class="min-h-[1em]" data-belongs-to-target="label"><%= record_title(associated_record) %></div>
+      <svg
+        class="w-4 h-4 ms-1.5 -me-0.5"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        fill="none"
+        viewBox="0 0 24 24"
+      >
+        <path
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="m19 9-7 7-7-7"
+        />
+      </svg>
+    </div>
+  </button>
+
+  <div class="absolute z-10 bg-neutral-primary-medium border border-default-medium rounded-base shadow-lg w-full mt-1" data-belongs-to-target="dropdown">
+    <div class="bg-neutral-primary-medium border-b border-default-medium p-2 rounded-t-base">
+      <%# Search input. This is the visible part that users type into %>
+      <label for="<%= dom_id_for_filter_query_input %>" class="sr-only">Search</label>
+      <%=
+        text_field_tag(
+          "filter_query",
+          nil,
+          class: "bg-neutral-secondary-strong border border-default-strong text-heading text-sm rounded focus:ring-brand focus:border-brand block w-full px-2.5 py-2 shadow-xs placeholder:text-body",
+          data: {
+            'belongs-to-target': 'input',
+            action: 'belongs-to#handleChange focus->belongs-to#handleFocus',
+            autocomplete: 'off'
+          },
+          id: dom_id_for_filter_query_input,
+        )
+      %>
+    </div>
+    <div class="max-h-96 overflow-y-auto" data-belongs-to-target="list">
+      <!-- Options will be dynamically inserted here -->
+      <div class="grid place-items-center p-8">
+        <%= render(Uchi::Ui::Spinner.new(message: associated_repository.translate.loading_message)) %>
+      </div>
+    </div>
+  </div>
+
+  <% if hint.present? %>
+    <%= render(Uchi::Flowbite::Input::Hint.new(attribute: field.name, form: form)) { hint } %>
+  <% end %>
+</div>

data/app/components/uchi/field/belongs_to.rb

@@ -12,7 +12,21 @@ module Uchi
 
         def associated_repository
           reflection = record.class.reflect_on_association(field.name)
-          model = reflection.klass
+
+          unless reflection
+            raise \
+              ArgumentError,
+              "No association named #{field.name.inspect} found on #{record.class}"
+          end
+
+          model = if reflection.polymorphic?
+            associated_record&.class
+          else
+            reflection.klass
+          end
+
+          return nil if model.nil?
+
           repository_class = Uchi::Repository.for_model(model)
           repository_class.new
         end
@@ -23,48 +37,48 @@ module Uchi
       end
 
       class Edit < Uchi::Field::Base::Edit
+        include Helpers
+
         def associated_repository
-          model = reflection.klass
-          repository_class = Uchi::Repository.for_model(model)
-          repository_class.new
+          @associated_repository ||= begin
+            model = if reflection.polymorphic?
+              associated_record&.class
+            else
+              reflection.klass
+            end
+
+            return nil if model.nil?
+
+            repository_class = Uchi::Repository.for_model(model)
+            repository_class.new
+          end
         end
 
         def attribute_name
           reflection.foreign_key
         end
 
-        def collection
-          query = associated_repository.find_all
-          field.collection_query.call(query)
+        def dom_id_for_filter_query_input
+          "#{form.object_name}_#{attribute_name}_belongs_to_filter_query"
         end
 
-        private
+        def dom_id_for_toggle
+          "#{form.object_name}_#{attribute_name}_belongs_to_toggle"
+        end
 
-        def collection_for_select
-          repository = associated_repository
-          items = []
-          items << ["", nil] if optional?
-          items + collection.map do |item|
-            [repository.title(item), item.id]
-          end
+        def record_title(record)
+          return "" if record.nil?
+
+          associated_repository.title(record)
         end
 
+        private
+
         # Returns true if the association is optional.
         def optional?
           reflection.options[:optional] == true
         end
 
-        def options
-          options = {
-            attribute: attribute_name,
-            collection: collection_for_select,
-            form: form,
-            label: {content: label}
-          }
-          options[:hint] = {content: hint} if hint.present?
-          options
-        end
-
         def reflection
           @reflection ||= record.class.reflect_on_association(field.name)
         end
@@ -125,11 +139,31 @@ module Uchi
         :attributes
       end
 
+      # Returns the actions this field should appear on.
+      #
+      # For polymorphic associations, excludes :edit and :new to prevent showing
+      # the field on forms where the type cannot be determined.
+      def on(*actions)
+        on = super
+        return on - [:edit, :new] if polymorphic? && actions.empty?
+
+        on
+      end
+
       def param_key
         # TODO: This is too naive. We need to match this to the actual foreign
         # key of the model.
         :"#{name}_id"
       end
+
+      private
+
+      def polymorphic?
+        return false unless repository
+
+        reflection = repository.model.reflect_on_association(name)
+        reflection&.polymorphic? || false
+      end
     end
   end
 end

data/app/components/uchi/field/has_and_belongs_to_many/show.html.erb

@@ -22,7 +22,7 @@
     )
   )) do %>
     <%= render(Uchi::Ui::Frame.new) do %>
-      <div class="grid grid place-items-center p-8">
+      <div class="grid place-items-center p-8">
         <%= render(Uchi::Ui::Spinner.new(message: repository.translate.loading_message)) %>
       </div>
     <% end %>

data/app/components/uchi/field/has_many/edit.html.erb

@@ -1 +1,86 @@
-<%# This space intentionally left blank %>
+<div
+  class="relative"
+  data-action="keydown.esc->has-many#closeDropdown"
+  data-controller="has-many"
+  data-has-many-backend-url-value="<%= helpers.uchi.has_many_associated_records_path(field: field.name, model: repository.model, record_id: record&.id) %>"
+  data-has-many-field-name-value="<%= field_name_for_input %>"
+>
+  <%= render(Uchi::Flowbite::Input::Label.new(attribute: field.name, form: form, options: {for: dom_id_for_toggle})) { label } %>
+
+  <%# Hidden fields to store selected IDs as an array %>
+  <div data-has-many-target="idsContainer">
+    <% associated_records.each do |assoc_record| %>
+      <input
+        type="hidden"
+        name="<%= field_name_for_input %>"
+        value="<%= assoc_record.id %>"
+        data-has-many-target="idField"
+        data-title="<%= record_title(assoc_record) %>"
+      >
+    <% end %>
+  </div>
+
+  <button
+    class="<%= Uchi::Flowbite::Input::Field.classes.join(" ") %> text-left"
+    data-action="has-many#toggle"
+    id="<%= dom_id_for_toggle %>"
+    type="button"
+  >
+    <div class="inline-flex items-center justify-between w-full">
+      <div class="min-h-[1em] truncate" data-has-many-target="label">
+        <% if associated_records.any? %>
+          <%= selected_titles %>
+        <% else %>
+          <span class="text-body-subtle">Select items...</span>
+        <% end %>
+      </div>
+      <svg
+        class="w-4 h-4 ms-1.5 -me-0.5 flex-shrink-0"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        fill="none"
+        viewBox="0 0 24 24"
+      >
+        <path
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="m19 9-7 7-7-7"
+        />
+      </svg>
+    </div>
+  </button>
+
+  <div class="absolute z-10 bg-neutral-primary-medium border border-default-medium rounded-base shadow-lg w-full mt-1" data-has-many-target="dropdown">
+    <div class="p-2 border-b border-default-medium">
+      <%# Search input. This is the visible part that users type into %>
+      <label for="<%= dom_id_for_filter_query_input %>" class="sr-only">Search</label>
+      <%=
+        text_field_tag(
+          "filter_query",
+          nil,
+          class: "bg-neutral-secondary-strong border border-default-strong text-heading text-sm rounded focus:ring-brand focus:border-brand block w-full px-2.5 py-2 shadow-xs placeholder:text-body",
+          data: {
+            'has-many-target': 'input',
+            action: 'has-many#handleChange focus->has-many#handleFocus',
+            autocomplete: 'off'
+          },
+          id: dom_id_for_filter_query_input,
+        )
+      %>
+    </div>
+    <div class="max-h-96 overflow-y-auto" data-has-many-target="list">
+      <!-- Options will be dynamically inserted here -->
+      <div class="grid place-items-center p-8">
+        <%= render(Uchi::Ui::Spinner.new(message: associated_repository.translate.loading_message)) %>
+      </div>
+    </div>
+  </div>
+
+  <% if hint.present? %>
+    <%= render(Uchi::Flowbite::Input::Hint.new(attribute: field.name, form: form)) { hint } %>
+  <% end %>
+</div>

data/app/components/uchi/field/has_many/show.html.erb

@@ -22,7 +22,7 @@
     )
   )) do %>
     <%= render(Uchi::Ui::Frame.new) do %>
-      <div class="grid grid place-items-center p-8">
+      <div class="grid place-items-center p-8">
         <%= render(Uchi::Ui::Spinner.new(message: repository.translate.loading_message)) %>
       </div>
     <% end %>

data/app/components/uchi/field/has_many.rb

@@ -6,6 +6,52 @@ module Uchi
       DEFAULT_COLLECTION_QUERY = ->(query) { query }.freeze
 
       class Edit < Uchi::Field::Base::Edit
+        def associated_records
+          records = field.value(record)
+          return [] if records.nil?
+
+          associated_repository.find_all(scope: records)
+        end
+
+        def associated_repository
+          @associated_repository ||= begin
+            model = reflection.klass
+            repository_class = Uchi::Repository.for_model(model)
+            repository_class.new
+          end
+        end
+
+        def attribute_name
+          "#{field.name.to_s.singularize}_ids"
+        end
+
+        def dom_id_for_filter_query_input
+          "#{form.object_name}_#{attribute_name}_has_many_filter_query"
+        end
+
+        def dom_id_for_toggle
+          "#{form.object_name}_#{attribute_name}_has_many_toggle"
+        end
+
+        def field_name_for_input
+          "#{form.object_name}[#{attribute_name}][]"
+        end
+
+        def record_title(record)
+          return "" if record.nil?
+
+          associated_repository.title(record)
+        end
+
+        def selected_titles
+          associated_records.map { |record| record_title(record) }.join(", ")
+        end
+
+        private
+
+        def reflection
+          @reflection ||= record.class.reflect_on_association(field.name)
+        end
       end
 
       class Index < Uchi::Field::Base::Index
@@ -19,10 +65,15 @@ module Uchi
         end
 
         def associated_repository
-          reflection = record.class.reflect_on_association(field.name)
-          model = reflection.klass
-          repository_class = Uchi::Repository.for_model(model)
-          raise NameError, "No repository found for associated model #{model}" unless repository_class
+          raise NameError, "No association named #{field.name.inspect} found on #{record.class}" unless reflection
+
+          associated_model = reflection.klass
+          repository_class = Uchi::Repository.for_model(associated_model)
+          unless repository_class
+            raise \
+              NameError,
+              "No repository found for associated model #{associated_model}"
+          end
 
           repository_class.new
         end
@@ -46,13 +97,12 @@ module Uchi
         #
         # @return [ActiveRecord::Reflection, nil]
         def inverse_association
-          reflection = record.class.reflect_on_association(field.name)
           reflection&.inverse_of
         end
 
         # Returns the ActiveRecord::Reflection for this association.
         #
-        # @return [ActiveRecord::Reflection]
+        # @return [ActiveRecord::Reflection, nil]
         def reflection
           @reflection ||= record.class.reflect_on_association(field.name)
         end
@@ -94,13 +144,11 @@ module Uchi
       def param_key
         # TODO: This is too naive. We need to match this to the actual foreign
         # key of the model.
-        :"#{name}_id"
+        :"#{name.to_s.singularize}_ids"
       end
 
-      protected
-
-      def default_on
-        [:show]
+      def permitted_param
+        {param_key => []}
       end
     end
   end

data/app/components/uchi/flowbite/button.rb

@@ -20,7 +20,7 @@ module Uchi::Flowbite
 
     class << self
       def classes(size: :default, state: :default, style: :default)
-        style = styles.fetch(style) or raise "wut"
+        style = styles.fetch(style)
         classes = style.fetch(state)
         classes + sizes.fetch(size)
       end

data/app/components/uchi/flowbite/input/field.rb

@@ -93,7 +93,13 @@ module Uchi::Flowbite
         !!@disabled
       end
 
+      # Returns true if the object has errors. Returns false if there is no
+      # object.
+      #
+      # @return [Boolean] true if there are errors, false otherwise.
       def errors?
+        return false unless @object
+
         @object.errors.include?(@attribute.intern)
       end
 

data/app/components/uchi/flowbite/input/label.rb

@@ -36,6 +36,8 @@ module Uchi::Flowbite
       end
 
       def errors?
+        return false unless @object
+
         @object.errors.include?(@attribute.intern)
       end
 

data/app/components/uchi/flowbite/input_field.rb

@@ -67,7 +67,11 @@ module Uchi::Flowbite
     renders_one :label
 
     # Returns the errors for attribute
+    #
+    # @return [Array<String>] An array of error messages for the attribute.
     def errors
+      return [] unless @object
+
       @object.errors[@attribute] || []
     end
 
@@ -185,7 +189,13 @@ module Uchi::Flowbite
     end
 
     def id_for_hint_element
-      "#{@form.object_name}_#{@attribute}_hint"
+      [
+        @form.object_name,
+        @attribute,
+        "hint"
+      ]
+        .compact_blank
+        .join("_")
     end
 
     # @return [Hash] The keyword arguments for the input component.

data/app/components/uchi/flowbite/styles.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module Uchi::Flowbite
+  class Styles
+    class StyleNotFoundError < ::KeyError; end
+
+    class << self
+      def from_hash(styles_hash)
+        styles = Styles.new
+        styles_hash.each do |style_name, states_hash|
+          styles.add_style(style_name, states_hash)
+        end
+        styles
+      end
+    end
+
+    def add_style(style_name, states_hash)
+      @styles[style_name] = Uchi::Flowbite::Style.new(states_hash)
+    end
+
+    def fetch(style_name)
+      return @styles[style_name] if @styles.key?(style_name)
+
+      raise \
+        StyleNotFoundError,
+        "Style not found: #{style_name}. Available styles: " \
+        "#{@styles.keys.sort.join(", ")}"
+    end
+
+    def initialize
+      @styles = {}
+    end
+  end
+end

data/app/components/uchi/ui/actions/dropdown/dropdown.html.erb

@@ -42,7 +42,7 @@
     >
       <% actions.each do |action| %>
         <li role="menuitem">
-          <%= form_with url: helpers.actions_executions_path, method: :post, class: "block" do %>
+          <%= form_with url: helpers.uchi.actions_executions_path, method: :post, class: "block" do %>
             <%= hidden_field_tag :model, repository.model.name %>
             <%= hidden_field_tag :action_name, action.class.name %>
             <%= hidden_field_tag :id, record.id %>

data/app/components/uchi/ui/navigation/navigation.html.erb

@@ -1,7 +1,7 @@
 <ul class="space-y-2 font-medium">
   <% items.each do |item| %>
     <li>
-      <%= link_to(item[:path], :class => "flex items-center px-2 py-1.5 text-body rounded-base hover:bg-neutral-tertiary hover:text-fg-brand group") do %>
+      <%= link_to(item[:path], :class => "flex items-center py-1.5 text-body rounded-base hover:bg-neutral-tertiary hover:text-fg-brand group md:px-2") do %>
         <span class="ms-3"><%= item[:label] %></span>
       <% end %>
     </li>

data/app/components/uchi/ui/page_header/page_header.html.erb

@@ -1,13 +1,13 @@
-<header class="px-4 mb-6 space-y-6 md:px-0">
-  <div>
-    <% if breadcrumb? %>
+<header class="px-0 mb-6 space-y-6 md:px-0">
+  <% if breadcrumb? %>
+    <div class="px-2">
       <%= breadcrumb %>
-    <% end %>
-  </div>
+    </div>
+  <% end %>
 
-  <div class="items-start justify-between space-x-6 md:flex md:px-0">
+  <div class="items-start justify-between space-y-2 space-x-6 md:flex md:px-0 md:space-y-0">
     <div>
-      <h1 class="text-3xl font-semibold tracking-tight text-heading group">
+      <h1 class="px-1 text-3xl font-semibold tracking-tight text-heading group">
         <%= title %>
       </h1>
 

data/app/controllers/uchi/belongs_to/associated_records_controller.rb

@@ -0,0 +1,89 @@
+# frozen_string_literal: true
+
+require "uchi/pagination/controller"
+
+module Uchi
+  module BelongsTo
+    # Companion controller for the Stimulus-based belongs_to_controller.
+    #
+    # Provides backend support for fetching associated records for a belongs_to
+    # field via AJAX.
+    class AssociatedRecordsController < Uchi::ApplicationController
+      layout false
+
+      def index
+        @current_value = field.value(parent_record)
+
+        @field_name = params[:field]
+        @records = field.collection_query.call(find_all_records_from_association)
+      end
+
+      protected
+
+      helper_method def record_title(record)
+        return "" if record.nil?
+
+        associated_repository.title(record)
+      end
+
+      helper_method def source_repository
+        @source_repository ||= begin
+          model_name = params[:model]
+          repository_class = Uchi::Repository.for_model(model_name)
+          raise NameError, "No repository found for model #{model_name}" unless repository_class
+
+          repository_class.new
+        end
+      end
+
+      private
+
+      def associated_repository
+        @associated_repository ||= begin
+          associated_repository = Uchi::Repository.for_model(association.klass)&.new
+          raise NameError, "No repository found for associated model #{association.klass}" unless associated_repository
+
+          associated_repository
+        end
+      end
+
+      def association
+        @association ||= begin
+          association = source_repository.model.reflect_on_association(field.name.to_sym)
+          raise NameError, "No association named #{field.name} on #{source_repository.model}" unless association
+
+          association
+        end
+      end
+
+      def field
+        @field ||= begin
+          field_name = params[:field]
+          field = source_repository.fields.find { |f| f.name == field_name.to_sym }
+          raise NameError, "No field named #{field_name} on #{source_repository.model}" unless field
+
+          field
+        end
+      end
+
+      def find_all_records(repository:, scope: nil)
+        # Duplicated from Uchi::RepositoryController; consider refactoring.
+        repository
+          .find_all(
+            scope: scope,
+            search: params[:query]
+          )
+      end
+
+      def find_all_records_from_association
+        find_all_records(repository: associated_repository)
+      end
+
+      def parent_record
+        return nil unless params[:record_id].present?
+
+        source_repository.find(params[:record_id])
+      end
+    end
+  end
+end