uchi 0.1.2 → 0.1.4

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

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module Uchi
+  class Field
+    class String < Field
+      class Edit < Uchi::Field::Base::Edit
+        private
+
+        def options
+          options = {
+            attribute: field.name,
+            form: form,
+            label: {content: label}
+          }
+          options[:hint] = {content: hint} if hint.present?
+          options
+        end
+      end
+
+      class Index < Uchi::Field::Base::Index
+      end
+
+      class Show < Uchi::Field::Base::Show
+      end
+
+      protected
+
+      def default_searchable?
+        true
+      end
+    end
+  end
+end

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

@@ -0,0 +1 @@
+<%= render(Flowbite::InputField::Textarea.new(**options)) %>

data/app/components/uchi/field/text/index.html.erb

@@ -0,0 +1 @@
+<%= field.value(record) %>

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

@@ -0,0 +1 @@
+<%= field.value(record) %>

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

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module Uchi
+  class Field
+    class Text < Field
+      class Edit < Uchi::Field::Base::Edit
+        private
+
+        def options
+          options = {
+            attribute: field.name,
+            form: form,
+            label: {content: label},
+            input: {options: {rows: 8}}
+          }
+          options[:hint] = {content: hint} if hint.present?
+          options
+        end
+      end
+
+      class Index < Uchi::Field::Base::Index
+      end
+
+      class Show < Uchi::Field::Base::Show
+      end
+
+      protected
+
+      def default_on
+        [:edit, :show]
+      end
+
+      def default_searchable?
+        true
+      end
+    end
+  end
+end

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

@@ -0,0 +1,13 @@
+<%= render(Flowbite::Breadcrumb.new) do |breadcrumb| %>
+  <% items.each.with_index do |item, index| %>
+    <% breadcrumb.with_item do %>
+      <% if index.zero? %>
+        <%= render Flowbite::BreadcrumbItem::First.new(href: item[:href]).with_content(item[:label]) %>
+      <% elsif index == items.size - 1 %>
+        <%= render Flowbite::BreadcrumbItem::Current.new.with_content(item[:label]) %>
+      <% else %>
+        <%= render Flowbite::BreadcrumbItem.new(href: item[:href]).with_content(item[:label]) %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/uchi/ui/breadcrumb.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module Uchi
+  module Ui
+    class Breadcrumb < ViewComponent::Base
+      attr_reader :items
+
+      def initialize(items:)
+        super()
+        @items = items
+      end
+    end
+  end
+end

data/app/components/uchi/ui/form/footer/footer.html.erb

@@ -0,0 +1,5 @@
+<div class="flex items-center space-x-4">
+  <% actions.each do |action| %>
+    <%= action %>
+  <% end %>
+</div>

data/app/components/uchi/ui/form/footer.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Uchi
+  module Ui
+    module Form
+      class Footer < ViewComponent::Base
+        renders_many :actions
+
+        def render?
+          actions.any?
+        end
+      end
+    end
+  end
+end

data/app/components/uchi/ui/form/input/collection_checkboxes.html.erb

@@ -0,0 +1,32 @@
+<div>
+  <% if render_label? %>
+    <%= form.label attribute, label_text, class: label_classes.join(" ") %>
+  <% end %>
+
+  <div class="mt-2 space-y-3">
+    <%= form.collection_check_boxes(
+      attribute,
+      collection,
+      value_method,
+      text_method,
+      collection_check_boxes_options
+    ) do |b| %>
+      <div class="<%= checkbox_item_classes.join(" ") %>">
+        <div class="flex items-center h-5">
+          <%= b.check_box(class: checkbox_classes.join(" "), disabled: disabled?) %>
+        </div>
+        <div class="ms-2 text-sm">
+          <%= b.label(class: checkbox_label_classes.join(" ")) %>
+        </div>
+      </div>
+    <% end %>
+  </div>
+
+  <% if render_hint? %>
+    <p class="<%= hint_classes.join(" ") %>"><%= hint_text %></p>
+  <% end %>
+
+  <% errors.each do |error| %>
+    <%= render(Flowbite::Input::ValidationError.new) { error.upcase_first } %>
+  <% end %>
+</div>

data/app/components/uchi/ui/form/input/collection_checkboxes.rb

@@ -0,0 +1,125 @@
+# frozen_string_literal: true
+
+module Uchi
+  module Ui
+    module Form
+      module Input
+        # A component that wraps Rails' collection_check_boxes form helper
+        # to render multiple checkboxes from a collection using Flowbite styling.
+        #
+        # Example usage:
+        #   <%= render Uchi::Ui::Form::Input::CollectionCheckboxes.new(
+        #     attribute: :tag_ids,
+        #     collection: @tags,
+        #     form: form,
+        #     label: "Select Tags",
+        #     value_method: :id,
+        #     text_method: :name
+        #   ) %>
+        class CollectionCheckboxes < ViewComponent::Base
+          attr_reader :attribute, :collection, :form, :label_text, :hint_text,
+            :value_method, :text_method, :disabled
+
+          def initialize(
+            attribute:,
+            collection:,
+            form:,
+            label: nil,
+            hint: nil,
+            value_method: :id,
+            text_method: :name,
+            disabled: false,
+            options: {}
+          )
+            super()
+            @attribute = attribute
+            @collection = collection
+            @form = form
+            @label_text = label
+            @hint_text = hint
+            @value_method = value_method
+            @text_method = text_method
+            @disabled = disabled
+            @options = options || {}
+          end
+
+          def object
+            @object ||= form.object
+          end
+
+          def errors
+            @errors ||= object.errors[attribute] || []
+          end
+
+          def errors?
+            errors.any?
+          end
+
+          def disabled?
+            !!disabled
+          end
+
+          def render_label?
+            label_text.present?
+          end
+
+          def render_hint?
+            hint_text.present?
+          end
+
+          def label_classes
+            base = ["block", "mb-2", "text-sm", "font-medium"]
+            if disabled?
+              base + ["text-gray-400", "dark:text-gray-500"]
+            elsif errors?
+              base + ["text-red-700", "dark:text-red-500"]
+            else
+              base + ["text-gray-900", "dark:text-white"]
+            end
+          end
+
+          def hint_classes
+            base = ["text-xs", "font-normal", "mt-1"]
+            if disabled?
+              base + ["text-gray-400", "dark:text-gray-500"]
+            else
+              base + ["text-gray-500", "dark:text-gray-300"]
+            end
+          end
+
+          def checkbox_item_classes
+            ["flex", "items-start", "mb-3"]
+          end
+
+          def checkbox_classes
+            base = ["w-4", "h-4", "rounded-sm", "focus:ring-2", "focus:ring-offset-2"]
+            if disabled?
+              base + ["text-blue-600", "bg-gray-100", "border-gray-300",
+                "dark:bg-gray-700", "dark:border-gray-600"]
+            elsif errors?
+              base + ["text-red-600", "bg-red-50", "border-red-500",
+                "focus:ring-red-500", "dark:focus:ring-red-600",
+                "dark:bg-gray-700", "dark:border-red-500"]
+            else
+              base + ["text-blue-600", "bg-gray-100", "border-gray-300",
+                "focus:ring-blue-500", "dark:focus:ring-blue-600",
+                "dark:bg-gray-700", "dark:border-gray-600"]
+            end
+          end
+
+          def checkbox_label_classes
+            if disabled?
+              ["ms-2", "text-sm", "font-medium", "text-gray-400", "dark:text-gray-500"]
+            else
+              ["ms-2", "text-sm", "font-medium", "text-gray-900", "dark:text-gray-300"]
+            end
+          end
+
+          def collection_check_boxes_options
+            @options
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,3 @@
+<div class="bg-white border border-gray-200 shadow-sm md:rounded-lg dark:bg-gray-800 dark:border-gray-700">
+  <%= content %>
+</div>

data/app/components/uchi/ui/frame.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+module Uchi
+  module Ui
+    # Renders a styled frame around its content. Rounded corners, border,
+    # shadow, no inner whitespace.
+    class Frame < ViewComponent::Base
+    end
+  end
+end

data/app/components/uchi/ui/index/records_table/records_table.html.erb

@@ -0,0 +1,67 @@
+<table class="w-full text-left text-gray-500 rtl:text-right dark:text-gray-400">
+  <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+    <tr>
+      <% columns.each do |field| %>
+        <% component_class = field.index_component_class %>
+        <th scope="col" class="px-4 py-3 md:px-6 whitespace-nowrap <%= component_class.classes_for_table_cell.join(" ") %>">
+          <% if field.sortable? %>
+            <% if field.name == sort_order&.name %>
+              <% if sort_order&.ascending? %>
+                <%= link_to(repository.routes.path_for(:index, query: query, scope: scope, sort: {:by => field.name, :direction => :desc})) do %>
+                  <%= repository.translate.field_label(field) %>
+                  <svg class="inline w-4 h-4 text-gray-800 dark:text-white" 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="M12 19V5m0 14-4-4m4 4 4-4"/>
+                  </svg>
+                <% end %>
+              <% else %>
+                <%= link_to(repository.routes.path_for(:index, query: query, scope: scope, sort: {:by => field.name, :direction => :asc})) do %>
+                  <%= repository.translate.field_label(field) %>
+                  <svg class="inline w-4 h-4 text-gray-800 dark:text-white" 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="M12 6v13m0-13 4 4m-4-4-4 4"/>
+                  </svg>
+                <% end %>
+              <% end %>
+            <% else %>
+              <%= link_to(repository.routes.path_for(:index, query: query, scope: scope, sort: {:by => field.name, :direction => :asc})) do %>
+                <%= repository.translate.field_label(field) %>
+                <svg class="inline w-4 h-4 text-gray-800 dark:text-white" 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="M8 20V7m0 13-4-4m4 4 4-4m4-12v13m0-13 4 4m-4-4-4 4"/>
+                </svg>
+              <% end %>
+            <% end %>
+          <% else %>
+            <%= repository.translate.field_label(field) %>
+          <% end %>
+        </th>
+      <% end %>
+      <th scope="col" class="px-4 py-3 md:px-6"></th>
+    </tr>
+  </thead>
+  <tbody>
+    <% records.each do |record| %>
+      <tr class="bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700">
+        <% columns.each do |field| %>
+          <% component_class = field.index_component_class %>
+          <td class="px-4 py-4 md:px-6 <%= component_class.classes_for_table_cell.join(" ") %>">
+            <%= render(field.index_component(record: record, repository: repository)) %>
+          </td>
+        <% end %>
+        <td class="px-4 py-4 text-right md:px-6">
+          <div class="flex justify-end space-x-2">
+            <%= link_to(repository.routes.path_for(:show, id: record.id), class: "inline-block hover:text-blue-600 hover:dark:text-blue-500", :data => {:"turbo-frame" => "_top"}) do %>
+              <svg class="w-6 h-6" 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-width="2" d="M21 12c0 1.2-4.03 6-9 6s-9-4.8-9-6c0-1.2 4.03-6 9-6s9 4.8 9 6Z"/>
+                <path stroke="currentColor" stroke-width="2" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/>
+              </svg>
+            <% end %>
+            <%= link_to(path_for_edit(record), class: "inline-block hover:text-blue-600 hover:dark:text-blue-500", :data => {:"turbo-frame" => "_top"}) do %>
+              <svg class="w-6 h-6" 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="m14.304 4.844 2.852 2.852M7 7H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-4.5m2.409-9.91a2.017 2.017 0 0 1 0 2.853l-6.844 6.844L8 14l.713-3.565 6.844-6.844a2.015 2.015 0 0 1 2.852 0Z"/>
+              </svg>
+            <% end %>
+          </div>
+        </td>
+      </tr>
+    <% end %>
+  </tbody>
+</table>

data/app/components/uchi/ui/index/records_table/search_form/search_form.html.erb

@@ -0,0 +1,21 @@
+<%= form_tag(repository.routes.path_for(:index), class: "flex items-center max-w-sm", method: :get) do %>
+  <%= label_tag(:query, repository.translate.search_label, class: "sr-only") %>
+  <div class="relative w-full">
+    <%= search_field_tag(:query, query, class: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500") %>
+  </div>
+  <%= button_tag(class: "p-2.5 ms-2 text-sm font-medium text-white bg-blue-700 rounded-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800") do %>
+    <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
+    </svg>
+    <span class="sr-only"><%= repository.translate.search_button %></span>
+  <% end %>
+
+  <% if scoped? %>
+    <%= hidden_field_tag("scope[field]", scope[:field]) %>
+    <%= hidden_field_tag("scope[id]", scope[:id]) %>
+    <%= hidden_field_tag("scope[inverse_of]", scope[:inverse_of]) %>
+    <%= hidden_field_tag("scope[model]", scope[:model]) %>
+  <% end %>
+  <%= hidden_field_tag("sort[by]", sort_by) if sort_by? %>
+  <%= hidden_field_tag("sort[direction]", sort_direction) if sort_direction? %>
+<% end %>

data/app/components/uchi/ui/index/records_table/search_form.rb

@@ -0,0 +1,49 @@
+module Uchi
+  module Ui
+    module Index
+      class RecordsTable
+        # Renders a search for the records table.
+        #
+        # Based on Flowbites Simple search input
+        # (https://flowbite.com/docs/forms/search-input/#simple-search-input)
+        class SearchForm < ViewComponent::Base
+          attr_reader :params, :repository
+
+          def initialize(params:, repository:)
+            super()
+            @params = params
+            @repository = repository
+          end
+
+          def query
+            params[:query]
+          end
+
+          def scope
+            params[:scope]
+          end
+
+          def scoped?
+            scope.present?
+          end
+
+          def sort_by
+            params.dig(:sort, :by)
+          end
+
+          def sort_by?
+            sort_by.present?
+          end
+
+          def sort_direction
+            params.dig(:sort, :direction)
+          end
+
+          def sort_direction?
+            sort_direction.present?
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/uchi/ui/index/records_table.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Uchi
+  module Ui
+    module Index
+      class RecordsTable < ViewComponent::Base
+        # Returns the columns to be displayed in this table. Each column is a
+        # representation of a Field from repository. Defaults to all fields.
+        attr_reader :columns
+
+        attr_reader :query, :sort_order, :records, :repository, :scope
+
+        def initialize(columns:, records:, repository:, query: nil, scope: nil, sort_order: nil)
+          super()
+          @columns = columns
+          @query = query
+          @sort_order = sort_order
+          @records = records
+          @repository = repository
+          @scope = scope
+        end
+
+        def path_for_edit(record)
+          repository.routes.path_for(:edit, id: record.id, scope: scope)
+        end
+      end
+    end
+  end
+end

data/app/components/uchi/ui/index/turbo_frame.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+module Uchi
+  module Ui
+    module Index
+      class TurboFrame < ViewComponent::Base
+        attr_reader :repository, :scope, :src
+
+        def call
+          helpers
+            .turbo_frame_tag(turbo_frame_id, **options) {
+              content
+            }
+        end
+
+        def initialize(repository:, scope: nil, src: nil)
+          super()
+          @repository = repository
+          @scope = scope
+          @src = src
+        end
+
+        protected
+
+        def options
+          options = {}
+          options[:src] = src if src.present?
+          options
+        end
+
+        def scoped?
+          scope.present?
+        end
+
+        def turbo_frame_id
+          parts = if scoped?
+            [
+              scope[:model],
+              scope[:id],
+              scope[:field]
+            ]
+          else
+            [repository.controller_name]
+          end
+          parts.compact.join("_")
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,24 @@
+<header class="px-4 mb-6 space-y-6 md:px-0">
+  <div>
+    <% if breadcrumb? %>
+      <%= breadcrumb %>
+    <% end %>
+  </div>
+
+  <div class="items-center justify-between space-x-6 space-y-3 md:flex md:px-0">
+    <div>
+      <h1 class="mb-1 text-3xl font-semibold tracking-tight text-gray-900 dark:text-white group"><%= title %></h1>
+      <% if description.present? %>
+        <div class="text-lg text-gray-500 lg:mb-0 dark:text-gray-400 lg:max-w-2xl"><%= description %></div>
+      <% end %>
+    </div>
+
+    <% if actions.any? %>
+      <div class="flex items-center space-x-2">
+        <% actions.each do |action| %>
+          <%= action %>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+</header>

data/app/components/uchi/ui/page_header.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module Uchi
+  module Ui
+    class PageHeader < ViewComponent::Base
+      attr_reader :description, :title
+
+      renders_many :actions
+      renders_one :breadcrumb, Uchi::Ui::Breadcrumb
+
+      def initialize(title:, description: nil)
+        super()
+        @description = description
+        @title = title
+      end
+    end
+  end
+end

data/app/components/uchi/ui/pagination/current_link.html.erb

@@ -0,0 +1,3 @@
+<li>
+  <%= link_to(@paginator.page, page_url(page_number), aria: { current: "page" }, class: "z-10 flex items-center justify-center px-3 h-8 leading-tight text-blue-600 border border-blue-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white") %>
+</li>

data/app/components/uchi/ui/pagination/current_link.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+module Uchi
+  module Ui
+    class Pagination
+      class CurrentLink < Item
+      end
+    end
+  end
+end

data/app/components/uchi/ui/pagination/gap.html.erb

@@ -0,0 +1,3 @@
+<li class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400">
+  &hellip;
+</li>

data/app/components/uchi/ui/pagination/gap.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+module Uchi
+  module Ui
+    class Pagination
+      class Gap < Item
+      end
+    end
+  end
+end

data/app/components/uchi/ui/pagination/item.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Uchi
+  module Ui
+    class Pagination
+      class Item < ViewComponent::Base
+        attr_reader :page_number, :paginator
+
+        # @param paginator [Uchi::Pagination::Page] The page object
+        def initialize(paginator:, page_number: nil)
+          super()
+          @page_number = page_number
+          @paginator = paginator
+        end
+
+        # Returns the URL for a given page. page can be a number, of :first,
+        # :last, :previous, :next, :current.
+        def page_url(page)
+          paginator.page_url(page)
+        end
+      end
+    end
+  end
+end

data/app/components/uchi/ui/pagination/link.html.erb

@@ -0,0 +1,3 @@
+<li>
+  <%= link_to(page_number, page_url(page_number), class: "flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white") %>
+</li>

data/app/components/uchi/ui/pagination/link.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+module Uchi
+  module Ui
+    class Pagination
+      class Link < Item
+      end
+    end
+  end
+end

data/app/components/uchi/ui/pagination/next_link.html.erb

@@ -0,0 +1,8 @@
+<li>
+  <%= link_to(url, class: "flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white") do %>
+    <span class="sr-only">Next</span>
+    <svg class="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
+      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
+    </svg>
+  <% end %>
+</li>