plutonium 0.6.1 → 0.8.0

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

@@ -0,0 +1,63 @@
+module Plutonium::Ui
+  class TableComponent < Plutonium::Ui::Base
+    option :resource_class
+    option :resources
+    option :record_actions
+    option :search_object
+    option :fields
+    option :pager
+
+    def classname
+      "table-auto w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-200 #{super}"
+    end
+
+    private
+
+    def table_rounding
+      search_object.scope_definitions.present? ? :bottom : :all
+    end
+
+    def table_head_classes
+      "text-xs text-gray-700 uppercase bg-gray-200 dark:bg-gray-700 dark:text-gray-200"
+    end
+
+    def table_row_classes
+      "bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600"
+    end
+
+    def table_row_cell_classes
+      "px-6 py-4 whitespace-nowrap max-w-[250px] hover:max-w-fit overflow-hidden text-ellipsis"
+    end
+
+    def table_actions_cell_classes
+      "flex justify-end px-6 py-4"
+    end
+
+    def table_header(name, label, search_object)
+      if (sort_params = search_object.sort_params_for(name))
+        tag.span do
+          concat begin
+            link_to(sort_params[:url], class: "text-decoration-none") do
+              concat label
+              if sort_params[:direction].present?
+                icon = (sort_params[:direction] == "ASC") ? "up" : "down"
+                concat " "
+                concat tag.i(icon, class: "bi bi-sort-#{icon} text-muted", title: sort_params[:direction])
+              end
+            end
+          end
+          if sort_params[:position].present?
+            concat " "
+            concat link_to(sort_params[:position] + 1, sort_params[:reset_url],
+              class: "badge rounded-pill text-bg-secondary text-decoration-none", title: "remove sorting",
+              style: "font-size: 0.6em;")
+          end
+        end
+      else
+        label
+      end
+    end
+  end
+end
+
+Plutonium::ComponentRegistry.register :table, to: Plutonium::Ui::TableComponent

data/app/views/components/table/table_controller.js

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

data/app/views/components/table_search_input/table_search_input_component.html.erb

@@ -0,0 +1,42 @@
+<div data-controller="table-search-input" <%= render_component_attributes %>>
+  <%= simple_form_for :q, url: "", method: :get, html: { class: "flex items-center", data: { controller: "form", turbo_frame: nil } } do |f| %>
+    <label for="search" class="sr-only">Search</label>
+    <div class="relative w-full">
+        <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+            <svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-200" fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
+            </svg>
+        </div>
+        <%= search_object.search_filter.input_definitions[:search].render f, nil,
+            wrapper: false, label: false,
+            as: :string, # force string for search
+            placeholder: "search...",
+            required: false,
+            input_html: {
+              id: "search",
+              value: search_object.search_query,
+              class: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full pl-10 p-2 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500",
+              data: {
+                action: "form#submit",
+                # form_target: "focus",
+                turbo_permanent: true
+              }
+        } %>
+    </div>
+
+
+    <%# preserve collection filters %>
+
+    <%= f.hidden_field :scope, value: resource_query_params[:scope] %>
+    <%= f.simple_fields_for :sort_fields do |nested| %>
+      <% Array(resource_query_params[:sort_fields]).each do |key| %>
+        <%= nested.hidden_field nil, value: key %>
+      <% end %>
+    <% end %>
+    <%= f.simple_fields_for :sort_directions do |nested| %>
+      <% (resource_query_params[:sort_directions] || {}).each do |key, value| %>
+        <%= nested.hidden_field key, value: %>
+      <% end %>
+    <% end %>
+  <% end %>
+</div>

data/app/views/components/table_search_input/table_search_input_component.rb

@@ -0,0 +1,10 @@
+module Plutonium::Ui
+  class TableSearchInputComponent < Plutonium::Ui::Base
+    option :search_object
+    # def classname
+    #   "custom classnames here #{super}"
+    # end
+  end
+end
+
+Plutonium::ComponentRegistry.register :table_search_input, to: Plutonium::Ui::TableSearchInputComponent

data/app/views/components/table_search_input/table_search_input_controller.js

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

data/app/views/components/table_toolbar/table_toolbar_component.html.erb

@@ -0,0 +1,7 @@
+<div data-controller="table-toolbar" <%= render_component_attributes %>>
+    <%= render_component :toolbar, actions:, resource: resource_class do %>
+        <% if search_object.search_filter.present? && current_policy.search? %>
+            <%= render_component "table_search_input", search_object: search_object %>
+        <% end %>
+    <% end %>
+</div>

data/app/views/components/table_toolbar/table_toolbar_component.rb

@@ -0,0 +1,9 @@
+module Plutonium::Ui
+  class TableToolbarComponent < Plutonium::Ui::Base
+    option :resource_class
+    option :search_object
+    option :actions
+  end
+end
+
+Plutonium::ComponentRegistry.register :table_toolbar, to: Plutonium::Ui::TableToolbarComponent

data/app/views/components/table_toolbar/table_toolbar_controller.js

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

data/app/views/components/toolbar/toolbar_component.html.erb

@@ -0,0 +1,67 @@
+<%#= render_component :panel do %>
+  <div data-controller="toolbar" <%= render_component_attributes %>>
+    <div class="w-full md:w-1/2">
+        <%= content %>
+    </div>
+    <div class="<%= toolbar_actions_classes %>">
+      <% actions.values.each do |action| %>
+        <%= toolbar_action_button resource, action %>
+      <% end %>
+
+      <!--
+      <div class="flex items-center space-x-3 w-full md:w-auto">
+          <button id="actionsDropdownButton" data-dropdown-toggle="actionsDropdown" class="w-full md:w-auto flex items-center justify-center py-2 px-4 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700" type="button">
+              <svg class="-ml-1 mr-1.5 w-5 h-5" fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                  <path clip-rule="evenodd" 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" />
+              </svg>
+              Actions
+          </button>
+          <div id="actionsDropdown" class="hidden z-10 w-44 bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 dark:divide-gray-600">
+              <ul class="py-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="actionsDropdownButton">
+                  <li>
+                      <a href="#" class="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Mass Edit</a>
+                  </li>
+              </ul>
+              <div class="py-1">
+                  <a href="#" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Delete all</a>
+              </div>
+          </div>
+          <button id="filterDropdownButton" data-dropdown-toggle="filterDropdown" class="w-full md:w-auto flex items-center justify-center py-2 px-4 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700" type="button">
+              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="h-4 w-4 mr-2 text-gray-400" viewbox="0 0 20 20" fill="currentColor">
+                  <path fill-rule="evenodd" d="M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-5.586L3.293 6.707A1 1 0 013 6V3z" clip-rule="evenodd" />
+              </svg>
+              Filter
+              <svg class="-mr-1 ml-1.5 w-5 h-5" fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                  <path clip-rule="evenodd" 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" />
+              </svg>
+          </button>
+          <div id="filterDropdown" class="z-10 hidden w-48 p-3 bg-white rounded-lg shadow dark:bg-gray-700">
+              <h6 class="mb-3 text-sm font-medium text-gray-900 dark:text-white">Choose brand</h6>
+              <ul class="space-y-2 text-sm" aria-labelledby="filterDropdownButton">
+                  <li class="flex items-center">
+                      <input id="apple" type="checkbox" value="" class="w-4 h-4 bg-gray-100 border-gray-300 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500">
+                      <label for="apple" class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-100">Apple (56)</label>
+                  </li>
+                  <li class="flex items-center">
+                      <input id="fitbit" type="checkbox" value="" class="w-4 h-4 bg-gray-100 border-gray-300 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500">
+                      <label for="fitbit" class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-100">Microsoft (16)</label>
+                  </li>
+                  <li class="flex items-center">
+                      <input id="razor" type="checkbox" value="" class="w-4 h-4 bg-gray-100 border-gray-300 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500">
+                      <label for="razor" class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-100">Razor (49)</label>
+                  </li>
+                  <li class="flex items-center">
+                      <input id="nikon" type="checkbox" value="" class="w-4 h-4 bg-gray-100 border-gray-300 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500">
+                      <label for="nikon" class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-100">Nikon (12)</label>
+                  </li>
+                  <li class="flex items-center">
+                      <input id="benq" type="checkbox" value="" class="w-4 h-4 bg-gray-100 border-gray-300 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500">
+                      <label for="benq" class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-100">BenQ (74)</label>
+                  </li>
+              </ul>
+          </div>
+      </div>
+      -->
+    </div>
+  </div>
+<%# end %>

data/app/views/components/toolbar/toolbar_component.rb

@@ -0,0 +1,18 @@
+module Plutonium::Ui
+  class ToolbarComponent < Plutonium::Ui::Base
+    option :resource
+    option :actions, default: proc { {} }
+
+    def classname
+      "flex flex-col md:flex-row items-center justify-between space-y-3 md:space-y-0 md:space-x-4 #{super}"
+    end
+
+    private
+
+    def toolbar_actions_classes
+      "w-full md:w-auto flex flex-col md:flex-row space-y-1 md:space-y-0 items-stretch md:items-center justify-end shrink-0"
+    end
+  end
+end
+
+Plutonium::ComponentRegistry.register :toolbar, to: Plutonium::Ui::ToolbarComponent

data/app/views/components/toolbar/toolbar_controller.js

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

data/app/views/layouts/resource.html copy.erb

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en" data-bs-theme="auto">
+  <head>
+    <title><%= page_title @page_title %></title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <meta name="turbo-cache-control" content="no-cache">
+    <meta name="turbo-refresh-method" content="morph">
+    <%= csrf_meta_tags %>
+    <%= csp_meta_tag %>
+    <%= yield(:meta) %>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.7/quill.snow.min.css" integrity="sha512-/FHUK/LsH78K9XTqsR9hbzr21J8B8RwHR/r8Jv9fzry6NVAOVIGFKQCNINsbhK7a1xubVu2r5QZcz2T9cKpubw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.7/quill.min.js" integrity="sha512-P2W2rr8ikUPfa31PLBo5bcBQrsa+TNj8jiKadtaIrHQGMo6hQM6RdPjQYxlNguwHz8AwSQ28VkBK6kHBLgd/8g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slim-select/2.6.0/slimselect.min.css" integrity="sha512-GvqWM4KWH8mbgWIyvwdH8HgjUbyZTXrCq0sjGij9fDNiXz3vJoy3jCcAaWNekH2rJe4hXVWCJKN+bEW8V7AAEQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/slim-select/2.6.0/slimselect.min.js" integrity="sha512-0E8oaoA2v32h26IycsmRDShtQ8kMgD91zWVBxdIvUCjU3xBw81PV61QBsBqNQpWkp/zYJZip8Ag3ifmzz1wCKQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.js"></script>
+
+    <%== Plutonium::Config.stylesheet_tag.call self %>
+    <%== Plutonium::Config.script_tag.call self %>
+    <%= yield(:head) %>
+  </head>
+  <body class="bg-body-tertiary">
+    <%= modal_frame_tag do %>
+      <%= yield(:modal) %>
+    <% end %>
+    <%= render "flash" %>
+
+
+
+
+    <%= content_for?(:header) ? yield(:header) : render("header") %>
+    <div class="container-fluid">
+      <div class="row">
+        <div class="col-12 col-sm-3 col-xl-2 pt-2">
+          <%= render "sidebar", sidebar_menu: @sidebar_menu %>
+        </div>
+        <div class="col-12 col-sm-9 col-xl-10 pt-2">
+          <div class="container-fluid">
+              <%= yield(:toolbar) %>
+              <%= yield %>
+          </div>
+        </div>
+      </div>
+    </div>
+    <%= render "color_modes" %>
+
+
+  </body>
+</html>

data/app/views/layouts/resource.html.erb

@@ -1,43 +1,50 @@
 <!DOCTYPE html>
-<html lang="en" data-bs-theme="auto">
+<html lang="en">
   <head>
     <title><%= page_title @page_title %></title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <meta name="turbo-cache-control" content="no-cache">
+    <meta name="turbo-refresh-method" content="morph">
+    <meta name="turbo-refresh-scroll" content="preserve">
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
     <%= yield(:meta) %>
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">
+
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.7/quill.snow.min.css" integrity="sha512-/FHUK/LsH78K9XTqsR9hbzr21J8B8RwHR/r8Jv9fzry6NVAOVIGFKQCNINsbhK7a1xubVu2r5QZcz2T9cKpubw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.7/quill.min.js" integrity="sha512-P2W2rr8ikUPfa31PLBo5bcBQrsa+TNj8jiKadtaIrHQGMo6hQM6RdPjQYxlNguwHz8AwSQ28VkBK6kHBLgd/8g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slim-select/2.6.0/slimselect.min.css" integrity="sha512-GvqWM4KWH8mbgWIyvwdH8HgjUbyZTXrCq0sjGij9fDNiXz3vJoy3jCcAaWNekH2rJe4hXVWCJKN+bEW8V7AAEQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/slim-select/2.6.0/slimselect.min.js" integrity="sha512-0E8oaoA2v32h26IycsmRDShtQ8kMgD91zWVBxdIvUCjU3xBw81PV61QBsBqNQpWkp/zYJZip8Ag3ifmzz1wCKQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-    <link rel="stylesheet" href="/plutonium-assets/application.css" />
-    <script src="/plutonium-assets/application.js"></script>
-    <script src="/plutonium-assets/application.css"></script>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.js"></script>
+
+    <%= yield(:assets) %>
+
+    <%== Plutonium::Config.stylesheet_tag.call self %>
+    <%== Plutonium::Config.script_tag.call self %>
+
     <%= yield(:head) %>
   </head>
-  <body class="bg-body-tertiary">
+  <body class="antialiased bg-gray-50 dark:bg-gray-900">
+    <%= render("resource_header") %>
+    <%= render("resource_sidebar") %>
+    <main class="p-4 lg:ml-64 h-auto pt-20">
+      <%= yield %>
+    </main>
+  </body>
+</html>
+
+
+<!--
+
     <%= modal_frame_tag do %>
       <%= yield(:modal) %>
     <% end %>
-    <%= render "messages" %>
-    <%= content_for?(:header) ? yield(:header) : render("header") %>
-    <div class="container-fluid">
-      <div class="row">
-        <div class="col-12 col-sm-3 col-xl-2 pt-2">
-          <%= render 'sidebar' %>
-        </div>
-        <div class="col-12 col-sm-9 col-xl-10 pt-2">
-          <div class="container-fluid">
-            <turbo-frame id="content" data-turbo-action="advance">
-              <%= yield(:toolbar) %>
-              <%= yield %>
-            </turbo-frame>
-          </div>
-        </div>
-      </div>
-    </div>
-    <%= render 'color_modes' %>
-  </body>
-</html>
+    <%= render "flash" %>
+
+-->

data/app/views/layouts/rodauth.html.erb

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title><%= @page_title %></title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <meta name="turbo-cache-control" content="no-cache">
+    <meta name="turbo-refresh-method" content="morph">
+    <meta name="turbo-refresh-scroll" content="preserve">
+    <%= csrf_meta_tags %>
+    <%= csp_meta_tag %>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.js"></script>
+    <%== Plutonium::Config.stylesheet_tag.call self %>
+    <%== Plutonium::Config.script_tag.call self %>
+  </head>
+  <body class="antialiased bg-gray-50 dark:bg-gray-900">
+    <main div class="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
+      <a href="#" class="flex items-center mb-6 text-2xl font-semibold text-gray-900 dark:text-white">
+        <img class="w-8 h-8 mr-2" src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/logo.svg" alt="logo">
+        Flowbite
+      </a>
+      <div class="w-full bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-800 dark:border-gray-700">
+        <div class="p-6 space-y-4 md:space-y-6 sm:p-8">
+          <%= yield %>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>

data/app/views/resource/_interactive_resource_action_form.html.erb

@@ -1,8 +1,5 @@
-<%#
-  locals: {
-    interactive_action
-  }
-%>
+<%# locals: (interactive_action:) -%>
+
 <% if current_turbo_frame == 'modal' %>
   <%= turbo_frame_tag "modal" do %>
     <div class="modal " tabindex="-1" data-controller="modal">
@@ -42,26 +39,7 @@
     </div>
   <% end %>
 <% else%>
-  <%= resource_form_for @interaction, as: :interaction, method: :post, url: "" do |f| %>
-    <div class="row row-gap-2">
-      <div class="container">
-        <div class="form-errors">
-          <%= f.error_notification %>
-          <%= f.error_notification message: f.object.errors[:base].to_sentence if f.object.errors[:base].present? %>
-          <% f.object.errors.full_messages.each do |message|  %>
-            <%= f.error_notification message: message  %>
-          <% end  %>
-        </div>
-      </div>
-      <div class="form-inputs">
-        <% interactive_action.inputs.values.each do |input| %>
-          <%= input.render f, @interaction %>
-        <% end %>
-      </div>
-      <div class="form-actions">
-        <%#= f.button :button, class: "btn btn-outline-secondary", formaction: "", formmethod: :get %>
-        <%= f.button :submit, interactive_action.label, class: "btn btn-outline-primary" %>
-      </div>
-    </div>
+  <%= render_component :panel do %>
+    <%= render_component :interactive_action_form, interactive_action:, interaction: @interaction %>
   <% end %>
 <% end %>

data/app/views/resource/_resource_details.html.erb

@@ -0,0 +1,26 @@
+<%# locals: (details:) -%>
+
+<%=
+  render_component :toolbar, resource: details.record,
+                             actions: details.actions.record_actions.permitted_for(policy(details.record))
+%>
+
+
+<%= render_component :block, rounded: :all do %>
+
+  <div class="p-4">
+    <dl class="divide-y divide-gray-100">
+      <% details.fields.each do |name, field| %>
+        <div class="py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+          <dt class="text-sm font-medium leading-6 text-gray-900 dark:text-gray-300">
+            <%= field.label %>
+          </dt>
+          <dd class="mt-1 text-sm leading-6 text-gray-700 dark:text-gray-200 sm:col-span-2 sm:mt-0">
+            <%= field.render self, details.record %>
+          </dd>
+        </div>
+      <% end %>
+    </dl>
+  </div>
+
+<% end %>

data/app/views/resource/{_resource.rabl → _resource_details.rabl}

@@ -2,4 +2,4 @@ attributes :id
 attributes(*permitted_attributes)
 attributes :created_at, :updated_at
 
-node(:url) { |resource| url_for(adapt_route_args(resource)) }
+node(:url) { |resource| resource_url_for(resource) }

data/app/views/resource/_resource_form.html.erb

@@ -0,0 +1,5 @@
+<%# locals: (form:) -%>
+
+<%= render_component :panel do %>
+  <%= render_component :form, form:, preferred_action_after_submit: %>
+<% end %>

data/app/views/resource/_resource_table.html.erb

@@ -0,0 +1,15 @@
+<%# locals: (collection:) -%>
+
+<%
+  resource_class = collection.resource_class
+  resources = collection.records.to_a
+  record_actions = collection.actions.collection_record_actions
+  search_object = collection.search_object
+  fields = collection.fields
+  pager = collection.pager
+  collection_actions = @collection.actions.collection_actions.permitted_for(current_policy)
+-%>
+
+<%= render_component :table_toolbar, resource_class:, search_object:, actions: collection_actions %>
+
+<%= render_component :table, resource_class:, resources:, record_actions:, search_object:, fields:, pager:  %>

data/app/views/resource/edit.html.erb

@@ -1,10 +1,5 @@
-<% content_for :toolbar do %>
-  <%=
-    render partial: 'toolbar', locals: {
-      resource_class: resource_class,
-      resource: @form.record,
-      parent: current_parent,
-    }
-  %>
+<%= render_component :breadcrumbs, resource_class:, parent: current_parent, resource: @form.record %>
+
+<%= render_component :dyna_frame_content do %>
+  <%= render "resource_form", form: @form %>
 <% end %>
-<%= render "form", form: @form %>

data/app/views/resource/index.html.erb

@@ -1,19 +1,5 @@
-<% content_for :toolbar do %>
-  <%= render 'toolbar', resource_class: resource_class,
-                        parent: current_parent do %>
-    <%=
-      render partial: 'toolbar_search_input', locals: {
-        search_object: @collection.search_object,
-        search_field: @collection.search_field
-      }
-    %>
-    <%=
-      render partial: 'toolbar_actions', locals: {
-        actions: @collection.actions.collection_actions.permitted_for(policy(resource_class)),
-        resource: resource_class
-      }
-    %>
-  <% end %>
-<% end %>
+<%= render_component :breadcrumbs, resource_class:, parent: current_parent %>
 
-<%= render 'table', table: @collection %>
+<%= render_component :dyna_frame_content do %>
+  <%= render "resource_table", collection: @collection %>
+<% end %>

data/app/views/resource/interactive_resource_collection_action.html.erb

@@ -1,11 +1,4 @@
-<% content_for :toolbar do %>
-  <%=
-    render partial: 'toolbar', locals: {
-      resource_class: resource_class,
-      resource: resource_record,
-      parent: current_parent,
-    }
-  %>
+<%= render_component :breadcrumbs, resource_class:, parent: current_parent, resource: resource_record %>
+<%= render_component :dyna_frame_content do %>
+  <%= render "interactive_resource_action_form", interactive_action: current_interactive_action %>
 <% end %>
-
-<%= render "interactive_resource_action_form", interactive_action: current_interactive_action %>

data/app/views/resource/interactive_resource_record_action.html.erb

@@ -1,11 +1,4 @@
-<% content_for :toolbar do %>
-  <%=
-    render partial: 'toolbar', locals: {
-      resource_class: resource_class,
-      resource: resource_record,
-      parent: current_parent,
-    }
-  %>
+<%= render_component :breadcrumbs, resource_class:, parent: current_parent, resource: resource_record %>
+<%= render_component :dyna_frame_content do %>
+  <%= render "interactive_resource_action_form", interactive_action: current_interactive_action %>
 <% end %>
-
-<%= render "interactive_resource_action_form", interactive_action: current_interactive_action %>

data/app/views/resource/interactive_resource_recordless_action.html.erb

@@ -1,11 +1,4 @@
-<% content_for :toolbar do %>
-  <%=
-    render partial: 'toolbar', locals: {
-      resource_class: resource_class,
-      resource: resource_record,
-      parent: current_parent,
-    }
-  %>
+<%= render_component :breadcrumbs, resource_class:, parent: current_parent, resource: resource_record %>
+<%= render_component :dyna_frame_content do %>
+  <%= render "interactive_resource_action_form", interactive_action: current_interactive_action %>
 <% end %>
-
-<%= render "interactive_resource_action_form", interactive_action: current_interactive_action %>

data/app/views/resource/new.html.erb

@@ -1,11 +1,4 @@
-<% content_for :toolbar do %>
-  <%=
-    render partial: 'toolbar', locals: {
-      resource_class: resource_class,
-      resource: @form.record,
-      parent: current_parent,
-    }
-  %>
+<%= render_component :breadcrumbs, resource_class:, parent: current_parent, resource: @form.record %>
+<%= render_component :dyna_frame_content do %>
+  <%= render "resource_form", form: @form %>
 <% end %>
-
-<%= render "form", form: @form %>