plutonium 0.6.1 → 0.8.0

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

@@ -0,0 +1,12 @@
+<%= 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  %>

data/app/views/components/action_button/action_button_component.html.erb

@@ -0,0 +1,7 @@
+<% if method == :get %>
+  <%= render_component :button, to:, icon:, label:, size:, tooltip:, color:, variant:, classname:, data: {turbo_frame:} %>
+<% else %>
+  <%= form_for :action, url: to, method:, html: {class: classname, data: {turbo_confirm: confirmation, turbo_frame:}} do %>
+    <%= render_component :button, type: :submit, icon:, label:, size:, tooltip:, color:, variant:, classname: "w-full" %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,15 @@
+module Plutonium::Ui
+  class ActionButtonComponent < Plutonium::Ui::Base
+    option :label
+    option :to
+    option :method
+    option :icon, optional: true
+    option :color, optional: true
+    option :variant, optional: true
+    option :size, default: proc { :sm }
+    option :turbo_frame, optional: true
+    option :confirmation, optional: true
+  end
+end
+
+Plutonium::ComponentRegistry.register :action_button, to: Plutonium::Ui::ActionButtonComponent

data/app/views/components/base.rb

@@ -0,0 +1,50 @@
+require "view_component"
+require "dry-initializer"
+
+module Plutonium::Ui
+  class Base < ViewComponent::Base
+    extend Dry::Initializer
+    include Plutonium::Helpers::ComponentHelper
+
+    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__ }

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

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

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

@@ -0,0 +1,40 @@
+module Plutonium::Ui
+  class BlockComponent < Plutonium::Ui::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 " "
+    end
+
+    def scroll_classes
+      case scroll
+      when :x
+        "overflow-x-auto"
+      when :y
+        "overflow-y-auto"
+      when :both
+        "overflow-auto"
+      else
+        "overflow-hidden"
+      end
+    end
+
+    def rounded_classes
+      case rounded
+      when :top
+        "sm:rounded-t-lg mt-3"
+      when :bottom
+        "sm:rounded-b-lg mb-3"
+      when :all
+        "sm:rounded-lg my-3"
+      end
+    end
+  end
+end
+
+Plutonium::ComponentRegistry.register :block, to: Plutonium::Ui::BlockComponent

data/app/views/components/breadcrumbs/breadcrumbs_component.html.erb

@@ -0,0 +1,96 @@
+<nav class="flex px-5 py-3 text-gray-700 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700 mb-3" aria-label="Breadcrumb">
+  <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse">
+
+    <li class="inline-flex items-center">
+      <a href="<%= root_path %>" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-primary-600 dark:text-gray-200 dark:hover:text-white">
+        <svg class="w-3 h-3 me-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+          <path d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z"/>
+        </svg>
+        Dashboard
+      </a>
+    </li>
+
+    <% if parent.present? %>
+      <li class="flex items-center">
+        <svg class="rtl:rotate-180 block w-3 h-3 mx-1 text-gray-400 " 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>
+        <%=  link_to resource_name_plural(parent.class), resource_url_for(parent.class, parent: nil),
+              class: 'ms-1 text-sm font-medium text-gray-700 hover:text-primary-600 md:ms-2 dark:text-gray-200 dark:hover:text-white' %>
+      </li>
+      <li class="flex items-center">
+        <svg class="rtl:rotate-180 block w-3 h-3 mx-1 text-gray-400 " 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>
+        <%= link_to display_name_of(parent), resource_url_for(parent, parent: nil),
+              class: 'ms-1 text-sm font-medium text-gray-700 hover:text-primary-600 md:ms-2 dark:text-gray-200 dark:hover:text-white' %>
+      </li>
+    <% end %>
+
+    <% if resource.present? %>
+      <li class="flex items-center">
+        <svg class="rtl:rotate-180 block w-3 h-3 mx-1 text-gray-400 " 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>
+        <%= link_to resource_name_plural(resource_class), resource_url_for(resource_class),
+              class: 'ms-1 text-sm font-medium text-gray-700 hover:text-primary-600 md:ms-2 dark:text-gray-200 dark:hover:text-white' %>
+      </li>
+
+      <% if /edit|update|.*interactive_resource.*/.match? action_name %>
+        <li class="flex items-center">
+          <svg class="rtl:rotate-180 block w-3 h-3 mx-1 text-gray-400 " 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>
+          <%= link_to display_name_of(resource), resource_url_for(resource),
+                class: 'ms-1 text-sm font-medium text-gray-700 hover:text-primary-600 md:ms-2 dark:text-gray-200 dark:hover:text-white' %>
+        </li>
+
+        <li class="flex items-center" aria-current="page">
+          <svg class="rtl:rotate-180 block w-3 h-3 mx-1 text-gray-400 " 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>
+          <span class="ms-1 text-sm font-medium text-gray-500 md:ms-2 dark:text-gray-200">
+            <%= (params[:interactive_action] || 'Edit').titleize %>
+          </span>
+        </li>
+      <% else %>
+        <li class="flex items-center" aria-current="page">
+          <svg class="rtl:rotate-180 block w-3 h-3 mx-1 text-gray-400 " 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>
+          <span class="ms-1 text-sm font-medium text-gray-500 md:ms-2 dark:text-gray-200">
+            <%= resource.persisted? ? display_name_of(resource) : 'New' %>
+          </span>
+        </li>
+      <% end %>
+    <% else %>
+      <% if /.*interactive_resource.*/.match? action_name %>
+        <li class="flex items-center">
+          <svg class="rtl:rotate-180 block w-3 h-3 mx-1 text-gray-400 " 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>
+          <%= link_to resource_name_plural(resource_class), resource_url_for(resource_class),
+                class: 'ms-1 text-sm font-medium text-gray-700 hover:text-primary-600 md:ms-2 dark:text-gray-200 dark:hover:text-white' %>
+        </li>
+
+        <li class="flex items-center" aria-current="page">
+          <svg class="rtl:rotate-180 block w-3 h-3 mx-1 text-gray-400 " 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>
+          <span class="ms-1 text-sm font-medium text-gray-500 md:ms-2 dark:text-gray-200">
+            <%= params[:interactive_action].titleize %>
+          </span>
+        </li>
+      <% else %>
+        <li class="flex items-center" aria-current="page">
+          <svg class="rtl:rotate-180 block w-3 h-3 mx-1 text-gray-400 " 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>
+          <span class="ms-1 text-sm font-medium text-gray-500 md:ms-2 dark:text-gray-200">
+            <%= resource_name_plural(resource_class) %>
+          </span>
+        </li>
+      <% end %>
+    <% end %>
+  </ol>
+</nav>

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

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

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

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

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

@@ -0,0 +1,123 @@
+module Plutonium::Ui
+  class ButtonComponent < Plutonium::Ui::Base
+    option :label
+    option :to, optional: true
+    option :icon, optional: true
+    option :color, optional: true
+    option :variant, optional: true
+    option :size, optional: true
+    option :type, default: proc { :button }
+
+    private
+
+    def classname
+      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
+
+    def color_classes
+      case variant
+      when :outline
+        outline_color_classes
+      when :link
+        link_color_classes
+      else
+        default_color_classes
+      end
+    end
+
+    def shape_classes
+      case variant
+      when :link
+        nil
+      when :pill
+        "rounded-full focus:outline-none focus:ring-4"
+      else
+        "rounded-lg focus:outline-none focus:ring-4"
+      end
+    end
+
+    def size_classes
+      case size
+      when :xs
+        "text-xs"
+      when :lg
+        "text-base"
+      when :xl
+        "py-3.5 text-base"
+      else
+        "text-sm"
+      end
+    end
+
+    def outline_color_classes
+      case color
+      when :primary
+        "border border-primary-700 text-primary-700 hover:bg-primary-800 hover:text-white focus:ring-primary-300 dark:border-primary-500 dark:text-primary-600 dark:hover:bg-primary-500 dark:hover:text-white dark:focus:ring-primary-800"
+      when :blue
+        "border border-blue-700 text-blue-700 hover:bg-blue-800 hover:text-white focus:ring-blue-300 dark:border-blue-500 dark:text-blue-500 dark:hover:bg-blue-500 dark:hover:text-white dark:focus:ring-blue-800"
+      when :green
+        "border border-green-700 text-green-700 hover:bg-green-800 hover:text-white focus:ring-green-300 dark:border-green-500 dark:text-green-500 dark:hover:bg-green-600 dark:hover:text-white dark:focus:ring-green-800"
+      when :red
+        "border border-red-700 text-red-700 hover:bg-red-800 hover:text-white focus:ring-red-300 dark:border-red-500 dark:text-red-500 dark:hover:bg-red-600 dark:hover:text-white dark:focus:ring-red-900"
+      when :yellow
+        "border border-yellow-400 text-yellow-400 hover:bg-yellow-500 hover:text-white focus:ring-yellow-300 dark:border-yellow-300 dark:text-yellow-300 dark:hover:bg-yellow-400 dark:hover:text-white dark:focus:ring-yellow-900"
+      when :purple
+        "border border-purple-700 text-purple-700 hover:bg-purple-800 hover:text-white focus:ring-purple-300 dark:border-purple-400 dark:text-purple-400 dark:hover:bg-purple-500 dark:hover:text-white dark:focus:ring-purple-900"
+      when :dark
+        "border border-gray-800 text-gray-900 hover:bg-gray-900 hover:text-white focus:ring-gray-300 dark:border-gray-600 dark:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-800 "
+      when :light
+        "border border-gray-300 bg-white text-gray-900 hover:bg-gray-100 focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:hover:border-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
+      else
+        "border border-gray-200 bg-white text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
+      end
+    end
+
+    def link_color_classes
+      case color
+      when :primary
+        "text-primary-600 dark:text-primary-500 hover:underline text-primary-600 dark:text-primary-500 hover:underline"
+      when :blue
+        "text-blue-600 dark:text-blue-500 hover:underline text-blue-600 dark:text-blue-500 hover:underline"
+      when :green
+        "text-green-600 dark:text-green-500 hover:underline text-green-600 dark:text-green-500 hover:underline"
+      when :red
+        "text-red-600 dark:text-red-500 hover:underline text-red-600 dark:text-red-500 hover:underline"
+      when :yellow
+        "text-yellow-600 dark:text-yellow-500 hover:underline text-yellow-600 dark:text-yellow-500 hover:underline"
+      when :purple
+        "text-purple-600 dark:text-purple-500 hover:underline text-purple-600 dark:text-purple-500 hover:underline"
+      else
+        "text-gray-800 dark:text-gray-900 hover:underline text-gray-600 dark:text-gray-900 hover:underline"
+      end
+    end
+
+    def default_color_classes
+      case color
+      when :primary
+        "bg-primary-700 text-white hover:bg-primary-800 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
+      when :blue
+        "bg-blue-700 text-white hover:bg-blue-800 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+      when :green
+        "bg-green-700 text-white hover:bg-green-800 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800"
+      when :red
+        "bg-red-700 text-white hover:bg-red-800 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900"
+      when :yellow
+        "bg-yellow-400 text-white hover:bg-yellow-500 focus:ring-yellow-300 dark:focus:ring-yellow-900"
+      when :purple
+        "bg-purple-700 text-white hover:bg-purple-800 focus:ring-purple-300 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900"
+      when :dark
+        "bg-gray-800 text-white hover:bg-gray-900 focus:ring-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
+      when :light
+        "border border-gray-300 bg-white text-gray-900 hover:bg-gray-100 focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:hover:border-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
+      else
+        "border border-gray-200 bg-white text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
+      end
+    end
+  end
+end
+
+Plutonium::ComponentRegistry.register :button, to: Plutonium::Ui::ButtonComponent

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

@@ -0,0 +1,7 @@
+<% if current_turbo_frame.present? %>
+  <%= turbo_frame_tag current_turbo_frame do %>
+    <%= content %>
+  <% end %>
+<% else %>
+  <%= content %>
+<% end %>

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

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

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

@@ -0,0 +1,4 @@
+
+<%= turbo_frame_tag id, src: do %>
+  <%= content %>
+<% end %>

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

@@ -0,0 +1,11 @@
+module Plutonium::Ui
+  class DynaFrameHostComponent < Plutonium::Ui::Base
+    option :src
+
+    def id
+      super || SecureRandom.hex
+    end
+  end
+end
+
+Plutonium::ComponentRegistry.register :dyna_frame_host, to: Plutonium::Ui::DynaFrameHostComponent

data/app/views/components/empty_card/empty_card_component.html.erb

@@ -0,0 +1,6 @@
+<%= render_component :block do %>
+  <div class="p-6 flex items-center flex-col gap-2">
+    <p class="text-gray-500 sm:text-lg dark:text-gray-200"><%= message %></p>
+    <%= content %>
+  </div>
+<% end %>

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

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

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

@@ -0,0 +1,71 @@
+require "simple_form"
+
+module Plutonium::Ui
+  class FormBuilder < SimpleForm::FormBuilder
+    def input(attribute_name, options = {}, &block)
+      label_class = options.dig(:label_html, :class)
+      if object.errors[attribute_name].present?
+        # Don't show the hint
+        options.delete(:hint)
+        # Apply error class if there are errors
+        label_class = [label_class, "text-red-700 dark:text-red-500"].compact.join(" ")
+      elsif object.persisted? || !object.errors.empty?
+        # Apply success class if the object is persisted, has been validated (errors are not empty), and the field has no errors
+        label_class = [label_class, "block mb-2 text-sm font-medium text-green-700 dark:text-green-500"].compact.join(" ")
+      else
+        label_class = [label_class, "text-gray-700 dark:text-white"].compact.join(" ")
+      end
+
+      options[:label_html] ||= {}
+      options[:label_html][:class] = label_class
+
+      super(attribute_name, options, &block)
+    end
+
+    def hint(...)
+      return if object.errors[attribute_name].present?
+
+      super(...)
+    end
+
+    def error_notification(options = {})
+      # Overriding this because we want an unstyled error notification
+      translate_error_notification = lambda {
+        lookups = []
+        lookups << :"#{object_name}"
+        lookups << :default_message
+        lookups << "Please review the problems below"
+        I18n.t(lookups.shift, scope: :"plutonium.error_notification", default: lookups)
+      }
+
+      (options.delete(:message) || translate_error_notification.call).html_safe
+    end
+
+    def submit_default_value
+      object = convert_to_model(@object)
+      key = if object
+        object.persisted? ? :update : :create
+      else
+        :submit
+      end
+
+      model = if object.respond_to?(:model_name)
+        object.model_name.human
+      else
+        @object_name.to_s.humanize
+      end
+
+      defaults = []
+      # Object is a model and it is not overwritten by as and scope option.
+      defaults << if object.respond_to?(:model_name) && object_name.to_s == model.downcase
+        :"helpers.submit.#{object.model_name.i18n_key}.#{key}"
+      else
+        :"helpers.submit.#{object_name}.#{key}"
+      end
+      defaults << :"helpers.submit.#{key}"
+      defaults << "#{key.to_s.humanize} #{model}"
+
+      I18n.t(defaults.shift, model: model, default: defaults)
+    end
+  end
+end

data/app/views/components/form/form_component.html.erb

@@ -0,0 +1,77 @@
+<%= resource_form_for resource_url_args_for(form.record), html: {class: "flex flex-col space-y-6 px-4 py-2"} do |f| %>
+  <h2 class="mb-4 text-xl font-bold text-gray-900 dark:text-gray-200"><%= f.submit_default_value %></h2>
+
+  <% if f.object.errors.present? %>
+    <div class="flex p-4 px-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400" role="alert">
+      <svg class="shrink-0 inline w-4 h-4 me-3 mt-[2px]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+        <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
+      </svg>
+      <div>
+        <span class="font-medium"><%= f.error_notification %></span>
+        <!--
+          <ul class="mt-1.5 list-disc list-inside">
+            <% f.object.errors.full_messages.each do |message|  %>
+              <li><%= f.error_notification message: message  %></li>
+            <% end  %>
+        </ul>
+        -->
+      </div>
+    </div>
+  <% end %>
+
+  <div>
+  <% form.inputs.values.each do |input| %>
+    <%= input.render f, form.record %>
+  <% end %>
+  </div>
+
+  <div class="flex justify-end space-x-2">
+    <%# TODO: move this into its own component %>
+    <div class="flex">
+      <button type="submit"
+              name="commit"
+              value="<%= preferred_action_after_submit %>"
+              class="inline-flex items-center px-4 py-2 bg-primary-600 text-white
+                     rounded-s-md hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500"
+              data-disable-with="<%= f.submit_default_value %>"
+              title="<%= action_after_submit_label preferred_action_after_submit %>"
+      >
+        Save <%= action_after_submit_label preferred_action_after_submit %>
+      </button>
+      <button type="button"
+              id="form-submit-options-toggle"
+              data-dropdown-toggle="form-submit-options-dropdown"
+              class="inline-flex items-center px-4 py-2 bg-primary-600 text-white
+                     rounded-e-md hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500
+                     dark:border-gray-300
+                     border-s"
+      >
+        <svg class="w-2.5 h-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
+          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
+        </svg>
+      </button>
+
+      <!-- Dropdown menu -->
+      <div id="form-submit-options-dropdown"
+           class="z-10 hidden w-56 bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700 dark:divide-gray-600">
+          <ul class="p-3 space-y-3 text-sm text-gray-700 dark:text-gray-200"
+              aria-labelledby="form-submit-options-toggle">
+            <% supported_actions_after_submit.each do |action_after_submit| %>
+            <% next if action_after_submit == preferred_action_after_submit %>
+            <li>
+              <div class="flex items-center">
+                <button type="submit"
+                        name="commit"
+                        value="<%= action_after_submit %>"
+                        class="w-full text-primary-700 hover:text-white border border-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-1.5 text-center dark:border-primary-500 dark:text-primary-500 dark:hover:text-white dark:hover:bg-primary-500 dark:focus:ring-primary-800">
+                        <%= action_after_submit_label action_after_submit %>
+                </button>
+              </div>
+            </li>
+            <% end %>
+          </ul>
+      </div>
+    </div>
+  </div>
+
+<% end %>

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

@@ -0,0 +1,23 @@
+module Plutonium::Ui
+  class FormComponent < Plutonium::Ui::Base
+    option :form
+    option :preferred_action_after_submit, default: proc { "show" }
+
+    private
+
+    def supported_actions_after_submit
+      %w[show edit new index]
+    end
+
+    def action_after_submit_label(action)
+      {
+        "show" => "and view details",
+        "edit" => "and continue editing",
+        "new" => "and add another",
+        "index" => "and view all"
+      }[action]
+    end
+  end
+end
+
+Plutonium::ComponentRegistry.register :form, to: Plutonium::Ui::FormComponent

data/app/views/components/form/form_controller.js

@@ -0,0 +1,13 @@
+import { Controller } from "@hotwired/stimulus"
+import debounce from "lodash.debounce";
+
+// Connects to data-controller="form"
+export default class extends Controller {
+  connect() {
+    console.log(`form connected: ${this.element}`)
+  }
+
+  submit() {
+    this.element.requestSubmit()
+  }
+}

data/app/views/components/header/header_component.html.erb

@@ -0,0 +1 @@
+<span title="<%= @title %>"><%= content %></span>

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

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