plutonium 0.6.2 → 0.8.0

data/app/views/components/interactive_action_form/interactive_action_form_component.html.erb

@@ -0,0 +1,41 @@
+<%= resource_form_for interaction, as: :interaction, method: :post, url: "", 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"><%= interactive_action.name.to_s.titleize %></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>
+  <% interactive_action.inputs.values.each do |input| %>
+    <%= input.render f, interaction %>
+  <% 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"
+              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"
+      >
+        Submit
+      </button>
+    </div>
+  </div>
+
+<% end %>

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

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

data/app/views/components/interactive_action_form/interactive_action_form_controller.js

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

data/app/views/components/pagination/pagination_component.html.erb

@@ -0,0 +1,6 @@
+<div data-controller="pagination" <%= render_component_attributes %>>
+  <%== pagy_info(pager) %>
+  <% if pager.pages > 1 %>
+    <%== pagy_nav(pager) %>
+  <% end %>
+</div>

data/app/views/components/pagination/pagination_component.rb

@@ -0,0 +1,91 @@
+require "pagy"
+
+module Plutonium::Ui
+  class PaginationComponent < Plutonium::Ui::Base
+    include Pagy::Frontend
+
+    option :pager
+    option :pagy_id, optional: true
+    option :nav_aria_label, optional: true
+    option :nav_i18n_key, optional: true
+
+    def classname
+      "flex flex-col items-center space-y-2 p-6 #{super}"
+    end
+
+    def pagy_nav(pagy, **vars)
+      p_id = %( id="#{pagy_id}") if pagy_id
+      link = pagy_link_proc(pagy, link_extra: "class=\"#{default_link_classes} #{page_link_classes}\"")
+
+      html = +%(<nav#{p_id} class="pagy pagy-nav pagination" #{nav_aria_label_attr(pagy, nav_aria_label, nav_i18n_key)}>)
+      html = +%(<ul class="inline-flex -space-x-px text-sm">)
+      html << prev_html(pagy)
+      pagy.series(**vars).each do |item| # series example: [1, :gap, 7, 8, "9", 10, 11, :gap, 36]
+        html << case item
+        when Integer
+          %(<li class="page" >#{link.call(item)}</li>)
+        when String
+          %(<li class="page active">) +
+            %(<a role="link" aria-disabled="true" aria-current="page" class="#{default_link_classes} #{active_link_classes}">#{pagy.label_for(item)}</a></li>)
+        when :gap
+          %(<li class="page gap #{default_link_classes} border-y-0">#{pagy_t("pagy.gap")}</li>)
+        else
+          raise InternalError, "expected item types in series to be Integer, String or :gap; got #{item.inspect}"
+        end
+      end
+      html << %(#{next_html(pagy)}</ul></nav>)
+    end
+
+    def pagy_info(pagy, pagy_id: nil, item_name: nil, item_i18n_key: nil)
+      p_id = %( id="#{pagy_id}") if pagy_id
+      p_count = pagy.count
+      key = if p_count.zero? then "pagy.info.no_items"
+      elsif pagy.pages == 1 then "pagy.info.single_page"
+      else "pagy.info.multiple_pages" # rubocop:disable Lint/ElseLayout
+      end
+
+      %(<span#{p_id} class="text-sm text-gray-700 dark:text-gray-200 pagy-info">#{
+          pagy_t key, item_name: item_name || pagy_t(item_i18n_key || pagy.vars[:item_i18n_key], count: p_count),
+            count: p_count, from: pagy.from, to: pagy.to
+        }</span>)
+    end
+
+    private
+
+    def prev_html(pagy, text: pagy_t("pagy.prev"))
+      link = pagy_link_proc(pagy, link_extra: "class=\"#{default_link_classes} #{page_link_classes} rounded-s-lg\"")
+
+      if (p_prev = pagy.prev)
+        %(<li class="page prev">#{link.call(p_prev, text, prev_aria_label_attr)}</li>)
+      else
+        %(<li class="page prev disabled"><span role="link" aria-disabled="true" class="#{default_link_classes} #{active_link_classes} border-e-0 rounded-s-lg" #{
+          prev_aria_label_attr}>#{text}</span></li>)
+      end
+    end
+
+    def next_html(pagy, text: pagy_t("pagy.next"))
+      link = pagy_link_proc(pagy, link_extra: "class=\"#{default_link_classes} #{page_link_classes} rounded-e-lg\"")
+
+      if (p_next = pagy.next)
+        %(<li class="page next">#{link.call(p_next, text, next_aria_label_attr)}</li>)
+      else
+        %(<li class="page next disabled"><span role="link" aria-disabled="true" class="#{default_link_classes} #{active_link_classes} rounded-e-lg" #{
+          next_aria_label_attr}>#{text}</span></li>)
+      end
+    end
+
+    def default_link_classes
+      "flex items-center justify-center px-3 h-8 leading-tight text-gray-500 border border-gray-300 bg-white dark:bg-gray-800 dark:border-gray-700 dark:text-gray-200"
+    end
+
+    def page_link_classes
+      "hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-white"
+    end
+
+    def active_link_classes
+      "text-primary-600 hover:text-primary-600 dark:bg-gray-700 dark:text-white dark:hover:text-white cursor-default select-none"
+    end
+  end
+end
+
+Plutonium::ComponentRegistry.register :pagination, to: Plutonium::Ui::PaginationComponent

data/app/views/components/panel/panel_component.html.erb

@@ -0,0 +1,10 @@
+<%= render_component :block, rounded: :all do %>
+  <div <%= render_component_attributes %>>
+    <% if title.present? %>
+      <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
+        <%= title %>
+      </h5>
+    <% end %>
+    <%= content %>
+  </div>
+<% end %>

data/app/views/components/panel/panel_component.rb

@@ -0,0 +1,11 @@
+module Plutonium::Ui
+  class PanelComponent < Plutonium::Ui::Base
+    option :title, optional: true
+
+    def classname
+      "p-4 #{super}"
+    end
+  end
+end
+
+Plutonium::ComponentRegistry.register :panel, to: Plutonium::Ui::PanelComponent

data/app/views/components/sidebar/sidebar_component.html.erb

@@ -0,0 +1,154 @@
+<aside
+  id="drawer-navigation"
+  class="<%= sidebar_class %>"
+  aria-label="Sidenav"
+  data-turbo-permanent
+>
+  <div class="<%= sidebar_container_class %>">
+    <%= content %>
+  <div class="hidden absolute bottom-0 left-0 justify-center p-4 space-x-4 w-full lg:flex bg-white dark:bg-gray-800 z-20">
+
+    <!--
+    <a
+      href="#"
+      class="inline-flex justify-center p-2 text-gray-500 rounded cursor-pointer dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-600"
+    >
+      <svg
+        aria-hidden="true"
+        class="w-6 h-6"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM16 3a1 1 0 011 1v7.268a2 2 0 010 3.464V16a1 1 0 11-2 0v-1.268a2 2 0 010-3.464V4a1 1 0 011-1z"
+        ></path>
+      </svg>
+    </a>
+    <a
+      href="#"
+      data-tooltip-target="tooltip-settings"
+      class="inline-flex justify-center p-2 text-gray-500 rounded cursor-pointer dark:text-gray-200 dark:hover:text-white hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-600"
+    >
+      <svg
+        aria-hidden="true"
+        class="w-6 h-6"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fill-rule="evenodd"
+          d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z"
+          clip-rule="evenodd"
+        ></path>
+      </svg>
+    </a>
+
+    <div
+      id="tooltip-settings"
+      role="tooltip"
+      class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip"
+    >
+      Settings page
+      <div class="tooltip-arrow" data-popper-arrow></div>
+    </div>
+    -->
+
+    <script>
+      function updateColorMode() {
+        // On page load or when changing themes, best to add inline in `head` to avoid FOUC
+        if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+          document.documentElement.classList.add('dark')
+        } else {
+          document.documentElement.classList.remove('dark')
+        }
+      }
+
+      function setLightColorMode() {
+        // Whenever the user explicitly chooses light mode
+        localStorage.theme = 'light'
+        updateColorMode()
+      }
+
+      function setDarkColorMode() {
+        // Whenever the user explicitly chooses dark mode
+        localStorage.theme = 'dark'
+        updateColorMode()
+      }
+
+      function setSystemColorMode() {
+        // Whenever the user explicitly chooses to respect the OS preference
+        localStorage.removeItem('theme')
+        updateColorMode()
+      }
+
+      updateColorMode()
+    </script>
+
+
+    <button
+      type="button"
+      data-dropdown-toggle="color-mode-dropdown"
+      class="inline-flex justify-center p-2 text-gray-500 rounded cursor-pointer dark:hover:text-white dark:text-gray-200 hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-600"
+    >
+      <svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+        <path d="M5 13.17a3.001 3.001 0 0 0 0 5.66V20a1 1 0 1 0 2 0v-1.17a3.001 3.001 0 0 0 0-5.66V4a1 1 0 0 0-2 0v9.17ZM11 20v-9.17a3.001 3.001 0 0 1 0-5.66V4a1 1 0 1 1 2 0v1.17a3.001 3.001 0 0 1 0 5.66V20a1 1 0 1 1-2 0Zm6-1.17V20a1 1 0 1 0 2 0v-1.17a3.001 3.001 0 0 0 0-5.66V4a1 1 0 1 0-2 0v9.17a3.001 3.001 0 0 0 0 5.66Z"/>
+      </svg>
+    </button>
+
+
+    <div
+      class="hidden z-50 my-4 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700"
+      id="color-mode-dropdown"
+    >
+      <ul class="py-1" role="none">
+        <li>
+          <button
+            type="button"
+            class="w-full block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:text-white dark:text-gray-300 dark:hover:bg-gray-600"
+            role="menuitem"
+            onclick="setLightColorMode()"
+          >
+            <div class="flex justify-start">
+              <svg class="w-6 h-6 me-2 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 5V3m0 18v-2M7.05 7.05 5.636 5.636m12.728 12.728L16.95 16.95M5 12H3m18 0h-2M7.05 16.95l-1.414 1.414M18.364 5.636 16.95 7.05M16 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z"/>
+              </svg>
+              Light
+            </div>
+          </a>
+        </li>
+        <li>
+          <button
+            type="button"
+            class="w-full block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:text-white dark:text-gray-300 dark:hover:bg-gray-600"
+            role="menuitem"
+            onclick="setDarkColorMode()"
+          >
+            <div class="flex justify-start">
+              <svg class="w-6 h-6 me-2 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 21a9 9 0 0 1-.5-17.986V3c-.354.966-.5 1.911-.5 3a9 9 0 0 0 9 9c.239 0 .254.018.488 0A9.004 9.004 0 0 1 12 21Z"/>
+              </svg>
+              Dark
+            </div>
+          </a>
+        </li>
+        <li>
+          <button
+            type="button"
+            class="w-full block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:text-white dark:text-gray-300 dark:hover:bg-gray-600"
+            role="menuitem"
+            onclick="setSystemColorMode()"
+          >
+            <div class="flex justify-start">
+              <svg class="w-6 h-6 me-2 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="M9 16H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v1M9 12H4m8 8V9h8v11h-8Zm0 0H9m8-4a1 1 0 1 0-2 0 1 1 0 0 0 2 0Z"/>
+              </svg>
+              System
+            </div>
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</aside>

data/app/views/components/sidebar/sidebar_component.rb

@@ -0,0 +1,15 @@
+module Plutonium::Ui
+  class SidebarComponent < Plutonium::Ui::Base
+    private
+
+    def sidebar_class
+      "fixed top-0 left-0 z-40 w-64 h-screen pt-14 transition-transform -translate-x-full bg-white border-r border-gray-200 lg:translate-x-0 dark:bg-gray-800 dark:border-gray-700"
+    end
+
+    def sidebar_container_class
+      "overflow-y-auto py-5 px-3 h-full bg-white dark:bg-gray-800"
+    end
+  end
+end
+
+Plutonium::ComponentRegistry.register :sidebar, to: Plutonium::Ui::SidebarComponent

data/app/views/components/sidebar_menu/sidebar_menu_component.html.erb

@@ -0,0 +1,3 @@
+<ul class="<%= menu_class %>">
+  <%= content %>
+</ul>

data/app/views/components/sidebar_menu/sidebar_menu_component.rb

@@ -0,0 +1,13 @@
+module Plutonium::Ui
+  class SidebarMenuComponent < Plutonium::Ui::Base
+    option :separated, optional: true
+
+    private
+
+    def menu_class
+      "space-y-2 #{separated ? "pt-5 mt-5 border-t border-gray-200 dark:border-gray-700" : nil}"
+    end
+  end
+end
+
+Plutonium::ComponentRegistry.register :sidebar_menu, to: Plutonium::Ui::SidebarMenuComponent

data/app/views/components/sidebar_menu_item/sidebar_menu_item_component.html.erb

@@ -0,0 +1,72 @@
+<% if value.is_a?(String) %>
+<li>
+  <a
+    href="<%= value %>"
+    class="<%= link_button_class %>"
+  >
+    <svg
+      aria-hidden="true"
+      class="w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-200 group-hover:text-gray-900 dark:group-hover:text-white"
+      fill="currentColor"
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M2 10a8 8 0 018-8v8h8a8 8 0 11-16 0z"></path>
+      <path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z"></path>
+    </svg>
+    <span class="<%= link_label_class %>"><%= name %></span>
+    <% if indicator.present? %>
+    <span class="inline-flex justify-center items-center w-5 h-5 text-xs font-semibold rounded-full text-primary-800 bg-primary-100 dark:bg-primary-200 dark:text-primary-800">
+      <%= indicator %>
+    </span>
+    <% end %>
+  </a>
+</li>
+<% else %>
+<li>
+  <button
+    type="button"
+    class="<%= link_button_class %> w-full transition duration-75"
+    aria-controls="dropdown-<%= name.parameterize %>"
+    data-collapse-toggle="dropdown-<%= name.parameterize %>"
+  >
+    <svg
+      aria-hidden="true"
+      class="shrink-0 w-6 h-6 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-200 dark:group-hover:text-white"
+      fill="currentColor"
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill-rule="evenodd"
+        d="M10 2a4 4 0 00-4 4v1H5a1 1 0 00-.994.89l-1 9A1 1 0 004 18h12a1 1 0 00.994-1.11l-1-9A1 1 0 0015 7h-1V6a4 4 0 00-4-4zm2 5V6a2 2 0 10-4 0v1h4zm-6 3a1 1 0 112 0 1 1 0 01-2 0zm7-1a1 1 0 100 2 1 1 0 000-2z"
+        clip-rule="evenodd"
+      ></path>
+    </svg>
+    <span class="<%= link_label_class %>"><%= name %></span>
+    <svg
+      aria-hidden="true"
+      class="w-6 h-6"
+      fill="currentColor"
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill-rule="evenodd"
+        d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+        clip-rule="evenodd"
+      ></path>
+    </svg>
+  </button>
+  <ul id="dropdown-<%= name.parameterize %>" class="hidden py-2 space-y-2">
+    <% value.each do |name, value| %>
+    <li>
+      <a
+        href="<%= value %>"
+        class="<%= sub_link_button_class %>"
+        ><%= name %></a>
+    </li>
+    <% end %>
+  </ul>
+</li>
+<% end %>

data/app/views/components/sidebar_menu_item/sidebar_menu_item_component.rb

@@ -0,0 +1,23 @@
+module Plutonium::Ui
+  class SidebarMenuItemComponent < Plutonium::Ui::Base
+    option :name
+    option :value
+    option :indicator, optional: true
+
+    private
+
+    def link_button_class
+      "group flex items-center rounded-lg p-2 text-base font-medium text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700"
+    end
+
+    def link_label_class
+      "flex-1 ml-3 text-left whitespace-nowrap"
+    end
+
+    def sub_link_button_class
+      "flex items-center p-2 pl-11 w-full text-base font-medium text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700"
+    end
+  end
+end
+
+Plutonium::ComponentRegistry.register :sidebar_menu_item, to: Plutonium::Ui::SidebarMenuItemComponent

data/app/views/components/skeleton/table/table_component.html.erb

@@ -0,0 +1,18 @@
+
+    <div role="status" class="p-4 space-y-4 border border-gray-200 divide-y divide-gray-200 rounded shadow animate-pulse dark:divide-gray-700 md:p-6 dark:border-gray-700">
+      <div class="flex items-center justify-between">
+        <div>
+          <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5"></div>
+          <div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
+        </div>
+        <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12"></div>
+      </div>
+      <div class="flex items-center justify-between pt-4">
+        <div>
+          <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5"></div>
+          <div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
+        </div>
+        <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12"></div>
+      </div>
+      <span class="sr-only">Loading...</span>
+    </div>

data/app/views/components/skeleton/table/table_component.rb

@@ -0,0 +1,6 @@
+module Plutonium::Ui::Skeleton
+  class TableComponent < Plutonium::Ui::Base
+  end
+end
+
+Plutonium::ComponentRegistry.register :skeleton__table, to: Plutonium::Ui::Skeleton::TableComponent

data/app/views/components/tab_bar/tab_bar_component.html.erb

@@ -0,0 +1,11 @@
+<div data-controller="tab-bar" <%= render_component_attributes %>>
+  <%= content %>
+</div>
+
+
+<ul class="text-sm font-medium flex flex-wrap -mb-px -ms-px">
+  <li class="me-2">
+    <a class="inline-block p-4 text-primary-600 border-b-2 border-primary-600 rounded-t-lg active dark:text-primary-500 dark:border-primary-500" aria-current="page" href="">Details</a>
+    <a class="inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300" href="">Something</a>
+  </li>
+</ul>

data/app/views/components/tab_bar/tab_bar_component.rb

@@ -0,0 +1,9 @@
+module Plutonium::Ui
+  class TabBarComponent < Plutonium::Ui::Base
+    # def base_classname
+    #   "base classnames here"
+    # end
+  end
+end
+
+Plutonium::ComponentRegistry.register :tab_bar, to: Plutonium::Ui::TabBarComponent

data/app/views/components/tab_bar/tab_bar_controller.js

@@ -0,0 +1,8 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="tab-bar"
+export default class extends Controller {
+  connect() {
+    console.log(`tab-bar connected: ${this.element}`)
+  }
+}

data/app/views/components/table/table_component.html.erb

@@ -0,0 +1,92 @@
+<% if search_object.scope_definitions.present?  %>
+  <%
+    name = name.to_s
+    current_scope = resource_query_params[:scope]
+  %>
+  <%= render_component :block, rounded: :top do %>
+    <ul class="text-sm font-medium flex flex-wrap -mb-px">
+        <li class="me-2">
+          <% if current_scope.blank? %>
+            <a class="inline-block p-4 text-primary-600 border-b-2 border-primary-600 rounded-t-lg active dark:text-primary-500 dark:border-primary-500" aria-current="page" href="?<%= search_object.build_url(scope: nil) %>">All</a>
+          <% else %>
+            <a class="inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 dark:text-gray-500" href="<%= search_object.build_url(scope: nil) %>">All</a>
+          <% end %>
+        </li>
+
+        <% search_object.scope_definitions.each do |name, definition| %>
+          <li class="me-2">
+            <% if name == current_scope %>
+              <a class="inline-block p-4 text-primary-600 border-b-2 border-primary-600 rounded-t-lg active dark:text-primary-500 dark:border-primary-500" aria-current="page" href="?<%= search_object.build_url(scope: name) %>"><%= name.humanize %></a>
+            <% else %>
+              <a class="inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 dark:text-gray-500" href="<%= search_object.build_url(scope: name) %>"><%= name.humanize %></a>
+            <% end %>
+          </li>
+        <% end %>
+    </ul>
+  <% end %>
+<% end %>
+
+<%= render_component :block, id: "resource-table-container", scroll: :x, rounded: table_rounding, data: {controller:"scroll-preserver", action: "scroll->scroll-preserver#scrolled"} do %>
+  <% unless resources.any? %>
+    <div class="col-12">
+      <%=
+        render_component :empty_card, message: "No #{resource_name_plural(resource_class).downcase} match your query" do
+          if current_policy.create?
+            render_component :button, label: "Create #{resource_name(resource_class)}",
+                                        to: resource_url_for(resource_class, action: :new),
+                                        color: :primary
+          end
+        end
+      %>
+    </div>
+  <% else %>
+    <table data-controller="table" <%= render_component_attributes %>>
+      <thead class="<%= table_head_classes %>">
+        <tr>
+          <th scope="col" class="p-4">
+            <div class="flex items-center">
+              <input id="checkbox-all-search" type="checkbox" class="w-4 h-4 text-primary-600 bg-gray-100 border-gray-300 rounded focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
+              <label for="checkbox-all-search" class="sr-only">checkbox</label>
+            </div>
+          </th>
+          <% fields.each do |name, field| %>
+            <th scope="col" class="px-6 py-3">
+              <%= table_header name, field.label, search_object  %>
+            </th>
+          <% end %>
+          <th scope="col" class="px-6 py-3 text-end">&nbsp;</th>
+        </tr>
+      </thead>
+      <tbody>
+        <% resources.each do |resource| %>
+          <tr class="<%= table_row_classes %>">
+            <th scope="row" class="w-4 p-4">
+              <div class="flex items-center">
+                <input id="checkbox-table-search-1" type="checkbox" class="w-4 h-4 text-primary-600 bg-gray-100 border-gray-300 rounded focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
+                <label for="checkbox-table-search-1" class="sr-only">checkbox</label>
+              </div>
+            </th>
+            <% fields.each do |name, field| %>
+              <%
+                options = field.options
+                max_width = options.delete :pu_max_width
+              %>
+              <td class="<%= table_row_cell_classes %>">
+                <%= field.render self, resource %>
+              </td>
+            <% end %>
+            <td class="<%= table_actions_cell_classes %>">
+              <% record_actions.permitted_for(policy(resource)).values.each do |action| %>
+                <%= table_action_button resource, action %>
+              <% end %>
+            </td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+
+    <% if pager.present? %>
+      <%= render_component :pagination, pager: pager %>
+    <% end %>
+  <% end %>
+<% end %>