plutonium 0.10.2 → 0.11.0

data/app/views/application/_resource_sidebar.html.erb

@@ -1,12 +1,14 @@
-<%= render_component :sidebar do %>
-  <%= render_component :sidebar_menu do %>
-    <%= render_component :sidebar_menu_item, name: "Dashboard", value: root_path %>
-
-    <% resource_items = registered_resources.map { |resource| [resource.model_name.human.pluralize, resource_url_for(resource, parent: nil)] } %>
-    <%= render_component :sidebar_menu_item, name: "Resources", value: resource_items %>
-  <% end %>
-
-  <%#= render_component :sidebar_menu, separated: true do %>
-    <%#= render_component :sidebar_menu_item, name: "Docs", value: "/" %>
-  <%# end %>
-<% end  %>
+<%= render_component(:sidebar) do %>
+  <%=
+    render_component(:sidebar_menu) do |menu|
+      menu.with_item(name: "Dashboard", url: root_path, icon: "outline/home")
+      if registered_resources.any?
+        menu.with_item(name: "Resources", icon: "outline/grid") do |sub_menu|
+          registered_resources.each do |resource|
+            sub_menu.with_sub_item(name: resource.model_name.human.pluralize, url: resource_url_for(resource, parent: nil))
+          end
+        end
+      end
+    end
+  %>
+<% end %>

data/app/views/components/action_button/action_button_component.rb

@@ -1,5 +1,5 @@
-module Plutonium::Ui
-  class ActionButtonComponent < Plutonium::Ui::Base
+module PlutoniumUi
+  class ActionButtonComponent < PlutoniumUi::Base
     option :label
     option :to
     option :method
@@ -12,4 +12,4 @@ module Plutonium::Ui
   end
 end
 
-Plutonium::ComponentRegistry.register :action_button, to: Plutonium::Ui::ActionButtonComponent
+Plutonium::ComponentRegistry.register :action_button, to: PlutoniumUi::ActionButtonComponent

data/app/views/components/attributes.rb

@@ -0,0 +1,184 @@
+module PlutoniumUi
+  module Attributes
+    extend ActiveSupport::Concern
+
+    # Provides methods for handling a base set of UI attributes.
+    # The attributes include `id`, `data`, `classname`, `controllers`, and `tooltip`.
+    #
+    # @example Usage
+    #    class MyComponent < PlutoniumUi::Base
+    #      include PlutoniumUi::Attributes
+    #      private
+    #      # default set of attributes
+    #      def base_attributes
+    #        {
+    #          id: "my-id",
+    #          classname: "my-class", # classname can be an array or string
+    #          controller: "my-controller",
+    #          data: {
+    #            key1: :value1,
+    #            key2: :value2
+    #          },
+    #          custom_key1: :custom_value1,
+    #          custom_key2: :custom_value2
+    #        }
+    #      end
+    #    end
+    #
+    #    object = MyComponent.new(
+    #      id: "my-preferred-id", # takes highest precedence, even over attributes hash
+    #      classname: ["appended-class1", "appended-class2"], # appends to the class
+    #      controllers: ["my-custom-controller"],
+    #      # attributes hash allows us to override values set in base_attributes
+    #      # hash is merged with attributes taking precedence
+    #      attributes: {
+    #        data: {
+    #          key1: :overridden_value,
+    #          key3: :attributes_value
+    #        },
+    #        custom_key1: :overridden_custom_value,
+    #        attributes_custom_key1: :attributes_custom_value
+    #      }
+    #    )
+    #    object.attributes_html
+    #    # => id="my-preferred-id" class="my-class appended-class1 appended-class2" data-key1="overridden_value" data-key2="value2" data-key3="attributes_value" data-controller="my-controller my-custom-controller" custom_key1="overridden_custom_value" custom_key2="custom_value2" attributes_custom_key1="attributes_custom_value"
+
+    included do
+      option :id, optional: true
+      # These will be merged with base_attributes
+      option :data, default: proc { {} }
+      option :classname, optional: true
+      option :controllers, optional: true
+      option :tooltip, optional: true
+      # This will override values set in base_attributes
+      option :attributes, default: proc { {} }
+    end
+
+    # Returns a memoized hash of attributes for the current object.
+    #
+    # The hash includes merged attributes from `base_attributes` and `attributes`,
+    # and further processing is done to include specific fields like `id`,
+    # `classname`, `controllers`, and `data`. The `data` field is enriched
+    # with controller information.
+    #
+    # @return [Hash] The processed and merged attributes hash.
+    #
+    # @example Usage
+    #   object = MyComponent.new
+    #   attributes = object.attributes_hash
+    #   # => { id: "some_id", title: "some_tooltip", class: "some_class", data: { controller: "some_controller", key: "value" } }
+    def attributes_hash
+      @attributes_hash ||= raw_attributes_hash.except(*filtered_attributes)
+    end
+
+    def raw_attributes_hash
+      @raw_attributes_hash ||= build_attributes_hash
+    end
+
+    # Generates an HTML-safe string of attributes for the current object.
+    #
+    # This method uses the `attributes_hash` method to get a hash of attributes
+    # and then converts it into an HTML-safe string using the `tag` helper.
+    #
+    # @return [String] An HTML-safe string of attributes.
+    #
+    # @example Usage
+    #   object = MyComponent.new
+    #   html_attributes = object.attributes_html
+    #   # => 'id="some_id" title="some_tooltip" class="some_class" data-controller="some_controller" data-key="value"'
+    def attributes_html
+      convert_attributes_to_html(attributes_hash)
+    end
+
+    private
+
+    # Returns the base attributes for the object.
+    # This can be overridden in subclasses to provide additional attributes.
+    #
+    # @return [Hash] The base attributes hash.
+    def base_attributes
+      {}
+    end
+
+    # Returns the list of attributes that should be filtered from #attributes_hash
+    # Useful for allowing attributes to be overriden while not rendering them on the dom element.
+    #
+    # @return [Array] The list of attributes to filter.
+    def filtered_attributes
+      []
+    end
+
+    # Returns the list of attributes that are we include in our attributes_hash.
+    # Can be used in #filtered_attributes to simplify filtering.
+    #
+    # @return [Array] The list of possible attributes.
+    def possible_attributes
+      %i[id class data title]
+    end
+
+    # Builds the attributes hash by merging base attributes and custom attributes,
+    # and processing specific fields like id, classname, controllers, and data.
+    #
+    # @return [Hash] The processed and merged attributes hash.
+    def build_attributes_hash
+      merged_attributes = merge_base_and_custom_attributes
+      {
+        id: extract_id(merged_attributes),
+        title: tooltip,
+        class: extract_classname(merged_attributes),
+        data: build_data(merged_attributes)
+      }.deep_merge(merged_attributes).compact
+    end
+
+    # Merges base attributes with custom attributes.
+    #
+    # @return [Hash] The merged attributes.
+    def merge_base_and_custom_attributes
+      base_attributes.deep_merge(attributes)
+    end
+
+    # Extracts the id from the merged attributes or the current object.
+    #
+    # @param merged_attributes [Hash] The merged attributes hash.
+    # @return [Object] The extracted id.
+    def extract_id(merged_attributes)
+      [id, merged_attributes.delete(:id)].compact.first
+    end
+
+    # Extracts and combines class names from merged attributes and the current object.
+    #
+    # @param merged_attributes [Hash] The merged attributes hash.
+    # @return [String, nil] The combined class names.
+    def extract_classname(merged_attributes)
+      (Array(merged_attributes.delete(:classname)) + Array(classname)).compact.join(" ").presence
+    end
+
+    # Extracts and combines controller names from merged attributes and the current object.
+    #
+    # @param merged_attributes [Hash] The merged attributes hash.
+    # @return [String, nil] The combined controller names.
+    def extract_controllers(merged_attributes)
+      (Array(merged_attributes.delete(:controller)) + Array(controllers)).compact.join(" ").presence
+    end
+
+    # Builds the data hash by merging data from merged attributes and the current object,
+    # and adding controller information.
+    #
+    # @param merged_attributes [Hash] The merged attributes hash.
+    # @return [Hash] The built data hash.
+    def build_data(merged_attributes)
+      data = (merged_attributes.delete(:data) || {}).merge(self.data)
+      data[:controller] = extract_controllers(merged_attributes)
+      data.compact!
+      data
+    end
+
+    # Converts a hash of attributes to an HTML-safe string.
+    #
+    # @param attributes [Hash] The hash of attributes to convert.
+    # @return [String] An HTML-safe string of attributes.
+    def convert_attributes_to_html(attributes)
+      tag.attributes(attributes)
+    end
+  end
+end

data/app/views/components/base.rb

@@ -1,50 +1,29 @@
 require "view_component"
 require "dry-initializer"
-
-module Plutonium::Ui
+require "active_support/notifications"
+
+load File.join(__dir__, "attributes.rb")
+
+module PlutoniumUi
+  # Base class for all Plutonium UI components.
+  # This class inherits from `ViewComponent::Base` and includes additional functionality
+  # provided by `Dry::Initializer` for managing component options, and the
+  # `PlutoniumUi::Attributes` module for handling UI attributes.
+  #
+  # It also includes `Plutonium::Helpers::ComponentHelper` for additional helper methods
+  # and delegates missing methods to the Rails helpers.
   class Base < ViewComponent::Base
     extend Dry::Initializer
     include Plutonium::Helpers::ComponentHelper
+    include PlutoniumUi::Attributes
 
     delegate_missing_to :helpers
-
-    option :id, optional: true
-    option :data, default: proc { {} }
-    option :classname, optional: true
-    option :tooltip, optional: true
-    option :attributes, default: proc { {} }
-
-    private
-
-    def base_classname = nil
-
-    def merged_classname
-      [base_classname, classname].compact.join.presence
-    end
-
-    def component_attributes
-      {id:, data:, class: merged_classname, title: tooltip}.merge(attributes).compact
-    end
-
-    def render_component_attributes
-      attributes_to_string(component_attributes).html_safe
-    end
-
-    def render_icon(icon)
-      Plutonium::Icons.render(icon).html_safe
-    end
-
-    def attributes_to_string(attributes, prefix = nil)
-      attributes.map do |key, value|
-        if value.is_a?(Hash)
-          attributes_to_string(value, "#{prefix ? "#{prefix}-" : ""}#{key}")
-        else
-          "#{prefix ? "#{prefix}-" : ""}#{key}=\"#{value}\""
-        end
-      end.join(" ")
-    end
   end
 end
 
-# Require components
-Dir.glob(File.expand_path("**/*.rb", __dir__)) { |component| load component unless component == __FILE__ }
+ActiveSupport::Notifications.instrument("plutonium.components.load") do
+  # Require all component files within the same directory and subdirectories
+  Dir.glob(File.expand_path("**/*.rb", __dir__)) do |component_file_path|
+    load component_file_path unless component_file_path == __FILE__
+  end
+end

data/app/views/components/block/block_component.html.erb

@@ -1,3 +1,3 @@
-<div <%= render_component_attributes %>>
+<div <%= attributes_html %>>
   <%= content %>
 </div>

data/app/views/components/block/block_component.rb

@@ -1,14 +1,18 @@
-module Plutonium::Ui
-  class BlockComponent < Plutonium::Ui::Base
+module PlutoniumUi
+  class BlockComponent < PlutoniumUi::Base
     option :rounded, optional: true
     option :scroll, optional: true
 
     private
 
-    def classname
-      classnames = ["relative bg-white dark:bg-gray-800 shadow-md", rounded_classes, scroll_classes]
-      classnames << super.presence
-      classnames.compact.join " "
+    def base_attributes
+      {
+        classname: classnames
+      }
+    end
+
+    def classnames
+      ["relative bg-white dark:bg-gray-800 shadow-md", rounded_classes, scroll_classes]
     end
 
     def scroll_classes
@@ -37,4 +41,4 @@ module Plutonium::Ui
   end
 end
 
-Plutonium::ComponentRegistry.register :block, to: Plutonium::Ui::BlockComponent
+Plutonium::ComponentRegistry.register :block, to: PlutoniumUi::BlockComponent

data/app/views/components/breadcrumbs/breadcrumbs_component.rb

@@ -1,9 +1,9 @@
-module Plutonium::Ui
-  class BreadcrumbsComponent < Plutonium::Ui::Base
+module PlutoniumUi
+  class BreadcrumbsComponent < PlutoniumUi::Base
     option :resource_class
     option :parent, optional: true
     option :resource, optional: true
   end
 end
 
-Plutonium::ComponentRegistry.register :breadcrumbs, to: Plutonium::Ui::BreadcrumbsComponent
+Plutonium::ComponentRegistry.register :breadcrumbs, to: PlutoniumUi::BreadcrumbsComponent

data/app/views/components/button/button_component.html.erb

@@ -1,10 +1,10 @@
 <% if to %>
-  <%= link_to to, role: "button", **component_attributes do %>
+  <%= link_to to, role: "button", **attributes_hash do %>
     <%= render_icon icon if icon %>
     <span><%= label %></span>
   <% end %>
 <% else %>
-  <button <%= render_component_attributes %> type="<%= type %>" %>
+  <button <%= attributes_html %> type="<%= type %>" %>
     <%= render_icon icon if icon %>
     <span><%= label %></span>
   </button>

data/app/views/components/button/button_component.rb

@@ -1,5 +1,5 @@
-module Plutonium::Ui
-  class ButtonComponent < Plutonium::Ui::Base
+module PlutoniumUi
+  class ButtonComponent < PlutoniumUi::Base
     option :label
     option :to, optional: true
     option :icon, optional: true
@@ -10,11 +10,16 @@ module Plutonium::Ui
 
     private
 
-    def classname
+    def base_attributes
+      {
+        classname: classnames
+      }
+    end
+
+    def classnames
       classnames = ["text-center py-2.5 font-medium px-5", color_classes, shape_classes, size_classes]
       classnames << "flex items-center justify-center"
       classnames << "space-x-1" if icon.present? && label.present?
-      classnames << super.presence
       classnames.join " "
     end
 
@@ -120,4 +125,4 @@ module Plutonium::Ui
   end
 end
 
-Plutonium::ComponentRegistry.register :button, to: Plutonium::Ui::ButtonComponent
+Plutonium::ComponentRegistry.register :button, to: PlutoniumUi::ButtonComponent

data/app/views/components/dyna_frame_content/dyna_frame_content_component.html.erb

@@ -1,5 +1,6 @@
 <% if current_turbo_frame.present? %>
   <%= turbo_frame_tag current_turbo_frame do %>
+    <%= render "flash" %>
     <%= content %>
   <% end %>
 <% else %>

data/app/views/components/dyna_frame_content/dyna_frame_content_component.rb

@@ -1,6 +1,6 @@
-module Plutonium::Ui
-  class DynaFrameContentComponent < Plutonium::Ui::Base
+module PlutoniumUi
+  class DynaFrameContentComponent < PlutoniumUi::Base
   end
 end
 
-Plutonium::ComponentRegistry.register :dyna_frame_content, to: Plutonium::Ui::DynaFrameContentComponent
+Plutonium::ComponentRegistry.register :dyna_frame_content, to: PlutoniumUi::DynaFrameContentComponent

data/app/views/components/dyna_frame_host/dyna_frame_host_component.html.erb

@@ -1,4 +1,3 @@
-
-<%= turbo_frame_tag id, src: do %>
+<%= turbo_frame_tag attributes_hash.delete(:id), **attributes_hash do %>
   <%= content %>
 <% end %>

data/app/views/components/dyna_frame_host/dyna_frame_host_component.rb

@@ -1,11 +1,18 @@
-module Plutonium::Ui
-  class DynaFrameHostComponent < Plutonium::Ui::Base
+module PlutoniumUi
+  class DynaFrameHostComponent < PlutoniumUi::Base
     option :src
+    option :loading
 
-    def id
-      super || SecureRandom.hex
+    private
+
+    def base_attributes
+      {
+        id: SecureRandom.hex,
+        src:,
+        loading:
+      }
     end
   end
 end
 
-Plutonium::ComponentRegistry.register :dyna_frame_host, to: Plutonium::Ui::DynaFrameHostComponent
+Plutonium::ComponentRegistry.register :dyna_frame_host, to: PlutoniumUi::DynaFrameHostComponent

data/app/views/components/empty_card/empty_card_component.rb

@@ -1,7 +1,7 @@
-module Plutonium::Ui
-  class EmptyCardComponent < Plutonium::Ui::Base
+module PlutoniumUi
+  class EmptyCardComponent < PlutoniumUi::Base
     option :message
   end
 end
 
-Plutonium::ComponentRegistry.register :empty_card, to: Plutonium::Ui::EmptyCardComponent
+Plutonium::ComponentRegistry.register :empty_card, to: PlutoniumUi::EmptyCardComponent

data/app/views/components/form/form_builder.rb

@@ -1,6 +1,6 @@
 require "simple_form"
 
-module Plutonium::Ui
+module PlutoniumUi
   class FormBuilder < SimpleForm::FormBuilder
     def input(attribute_name, options = {}, &block)
       label_class = options.dig(:label_html, :class)

data/app/views/components/form/form_component.rb

@@ -1,5 +1,5 @@
-module Plutonium::Ui
-  class FormComponent < Plutonium::Ui::Base
+module PlutoniumUi
+  class FormComponent < PlutoniumUi::Base
     option :form
     option :preferred_action_after_submit, default: proc { "show" }
 
@@ -20,4 +20,4 @@ module Plutonium::Ui
   end
 end
 
-Plutonium::ComponentRegistry.register :form, to: Plutonium::Ui::FormComponent
+Plutonium::ComponentRegistry.register :form, to: PlutoniumUi::FormComponent

data/app/views/components/has_many_panel/has_many_panel_component.html.erb

@@ -0,0 +1,25 @@
+<div <%= attributes_html %>>
+  <%= render_component :panel, title: do |panel| %>
+    <% panel.with_action do %>
+      <button title="Back" class="mr-2 text-gray-600 dark:text-gray-300" style="display:none" data-frame-navigator-target="backButton">
+        <%= render_icon "outline/chevron-left", size: :xl %>
+      </button>
+    <% end %>
+
+    <% panel.with_action do %>
+      <button title="Home" class="mr-2 text-gray-600 dark:text-gray-300" style="display:none" data-frame-navigator-target="homeButton">
+        <%= render_icon "outline/home", size: :xl %>
+      </button>
+    <% end %>
+
+    <% panel.with_action do %>
+      <button title="Refresh" data-frame-navigator-target="refreshButton" style="display:none" class="text-gray-600 dark:text-gray-300">
+        <%= render_icon "outline/refresh", size: :xl %>
+      </button>
+    <% end %>
+
+    <%= render_component :dyna_frame_host, loading: :lazy, data: { "frame-navigator-target": "frame" }, src: do %>
+      <%= render_component :skeleton__table %>
+    <% end %>
+  <% end %>
+</div>

data/app/views/components/has_many_panel/has_many_panel_component.rb

@@ -0,0 +1,16 @@
+module PlutoniumUi
+  class HasManyPanelComponent < PlutoniumUi::Base
+    option :title
+    option :src
+
+    private
+
+    def base_attributes
+      {
+        controller: %w[has-many-panel frame-navigator]
+      }
+    end
+  end
+end
+
+Plutonium::ComponentRegistry.register :has_many_panel, to: PlutoniumUi::HasManyPanelComponent

data/app/views/components/header/header_component.rb

@@ -1,7 +1,7 @@
-module Plutonium::Ui
-  class HeaderComponent < Plutonium::Ui::Base
+module PlutoniumUi
+  class HeaderComponent < PlutoniumUi::Base
     option :title
   end
 end
 
-Plutonium::ComponentRegistry.register :header, to: Plutonium::Ui::HeaderComponent
+Plutonium::ComponentRegistry.register :header, to: PlutoniumUi::HeaderComponent

data/app/views/components/interactive_action_form/interactive_action_form_component.rb

@@ -1,8 +1,8 @@
-module Plutonium::Ui
-  class InteractiveActionFormComponent < Plutonium::Ui::Base
+module PlutoniumUi
+  class InteractiveActionFormComponent < PlutoniumUi::Base
     option :interaction
     option :interactive_action
   end
 end
 
-Plutonium::ComponentRegistry.register :interactive_action_form, to: Plutonium::Ui::InteractiveActionFormComponent
+Plutonium::ComponentRegistry.register :interactive_action_form, to: PlutoniumUi::InteractiveActionFormComponent

data/app/views/components/nav_grid_menu/nav_grid_menu_component.html.erb

@@ -0,0 +1,24 @@
+<div <%= attributes_html %>>
+  <button
+    type="button"
+    data-resource-drop-down-target="trigger"
+    class="p-2 text-gray-500 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:text-gray-200 dark:hover:text-white dark:hover:bg-gray-700 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600">
+    <span class="sr-only">View <%= label %></span>
+    <!-- Icon -->
+    <%= render_icon "solid/grid", size: :lg %>
+  </button>
+  <!-- Dropdown menu -->
+  <div
+    class="hidden overflow-hidden z-50 my-4 max-w-sm text-base list-none bg-white divide-y divide-gray-100 shadow-lg dark:bg-gray-700 dark:divide-gray-600 rounded-xl"
+    data-resource-drop-down-target="menu">
+    <div
+      class="block py-2 px-4 text-base font-medium text-center text-gray-700 bg-gray-50 dark:bg-gray-600 dark:text-gray-300">
+      <%= label %>
+    </div>
+    <div class="grid grid-cols-3 gap-4 p-4">
+      <% items.each do |item| %>
+        <%= item %>
+      <% end %>
+    </div>
+  </div>
+</div>

data/app/views/components/nav_grid_menu/nav_grid_menu_component.rb

@@ -0,0 +1,23 @@
+module PlutoniumUi
+  class NavGridMenuComponent < PlutoniumUi::Base
+    renders_many :items, "PlutoniumUi::NavGridMenuItemComponent"
+
+    option :label
+
+    private
+
+    def base_attributes
+      # base attributes go here
+      {
+        classname: "nav-grid-menu",
+        controller: "nav-grid-menu resource-drop-down"
+      }
+    end
+
+    def render?
+      items.any?
+    end
+  end
+end
+
+Plutonium::ComponentRegistry.register :nav_grid_menu, to: PlutoniumUi::NavGridMenuComponent

data/app/views/components/nav_grid_menu_item/nav_grid_menu_item_component.html.erb

@@ -0,0 +1,4 @@
+<a <%= attributes_html %>>
+  <%= render_icon icon, size: :xl, classname: "text-gray-400 group-hover:text-gray-500 dark:text-gray-200 dark:group-hover:text-gray-400" %>
+  <div class="text-sm text-gray-900 dark:text-white"><%= name %></div>
+</a>

data/app/views/components/nav_grid_menu_item/nav_grid_menu_item_component.rb

@@ -0,0 +1,20 @@
+module PlutoniumUi
+  class NavGridMenuItemComponent < PlutoniumUi::Base
+    option :name
+    option :icon
+    option :url, as: :href
+
+    private
+
+    def base_attributes
+      # base attributes go here
+      {
+        classname: "nav-grid-menu-item block p-4 text-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 group",
+        controller: "nav-grid-menu-item",
+        href:
+      }
+    end
+  end
+end
+
+Plutonium::ComponentRegistry.register :nav_grid_menu_item, to: PlutoniumUi::NavGridMenuItemComponent