plutonium 0.6.2 → 0.9.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 self, 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/nested_resource_form_fields/nested_resource_form_fields_component.html.erb

@@ -0,0 +1,66 @@
+<div data-controller="nested-resource-form-fields"
+      data-nested-resource-form-fields-limit-value="<%= limit %>"
+      <%= render_component_attributes %>>
+  <h2 class="text-lg font-bold dark:text-white ">
+    <%= label %>
+  </h2>
+  <p class="mb-4 text-md font-normal text-gray-500 dark:text-gray-400">
+    <%= description %>
+  </p>
+
+  <template data-nested-resource-form-fields-target="template">
+    <% new_record = resource_class.new %>
+    <%= form.simple_fields_for name, new_record, child_index: 'NEW_RECORD' do |nested| %>
+      <fieldset class="border-t mt-4 pt-4 first:border-t-0 first:pt-0 nested-resource-form-fields" data-new-record="<%= nested.object.new_record? %>">
+        <% inputs.values.each do |input| %>
+          <%= input.render self, nested, new_record %>
+        <% end %>
+
+        <div class="text-right">
+          <% if nested.object.new_record? || allow_destroy %>
+            <label class="text-md font-medium text-red-900">
+              <%= "Delete" %>
+              <input type="checkbox" value=""
+                      data-action="nested-resource-form-fields#remove"
+                      class="w-4 h-4 ms-2 text-red-600 bg-red-100 border-red-300 rounded focus:ring-red-500 dark:focus:ring-red-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
+            </label>
+          <% end %>
+        </div>
+
+        <%= nested.hidden_field :_destroy %>
+      </fieldset>
+    <% end %>
+  </template>
+
+  <div>
+    <%= form.simple_fields_for name do |nested| %>
+      <fieldset class="border-t mt-4 pt-4 first:border-t-0 first:pt-0 nested-resource-form-fields" data-new-record="<%= nested.object.new_record? %>">
+        <% inputs.values.each do |input| %>
+          <%= input.render self, nested, new_record %>
+        <% end %>
+
+        <div>
+          <% if nested.object.new_record? || allow_destroy %>
+            <label class="flex items-center justify-end text-md font-medium text-red-900">
+              <%= "Delete" %>
+              <input type="checkbox" value=""
+                      data-action="nested-resource-form-fields#remove"
+                      class="w-4 h-4 ms-2 text-red-600 bg-red-100 border-red-300 rounded focus:ring-red-500 dark:focus:ring-red-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
+            </label>
+          <% end %>
+        </div>
+
+        <%= nested.hidden_field :_destroy %>
+      </fieldset>
+    <% end %>
+
+    <div data-nested-resource-form-fields-target="target" hidden></div>
+  </div>
+
+  <%=
+    render_component :button, label: "Add #{name.to_s.singularize.humanize}", classname: "mt-4", data: {
+      action: "nested-resource-form-fields#add",
+      "nested-resource-form-fields-target": "addButton"
+    }
+  %>
+</div>

data/app/views/components/nested_resource_form_fields/nested_resource_form_fields_component.rb

@@ -0,0 +1,23 @@
+module Plutonium::Ui
+  class NestedResourceFormFieldsComponent < Plutonium::Ui::Base
+    option :name
+    option :resource_class
+    option :form
+    option :inputs
+    option :label, optional: true
+    option :description, optional: true
+    option :allow_destroy, optional: true
+    option :update_only, optional: true
+    option :limit, optional: true
+
+    def base_classname
+      "mt-6 mb-4"
+    end
+
+    def label
+      super || name.to_s.humanize
+    end
+  end
+end
+
+Plutonium::ComponentRegistry.register :nested_resource_form_fields, to: Plutonium::Ui::NestedResourceFormFieldsComponent

data/app/views/components/nested_resource_form_fields/nested_resource_form_fields_controller.js

@@ -0,0 +1,64 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="nested-resource-form-fields"
+// Copied from https://github.com/stimulus-components/stimulus-rails-nested-form/blob/master/src/index.ts
+export default class extends Controller {
+  static targets = ["target", "template", "addButton"]
+
+  static values = {
+    wrapperSelector: {
+      type: String,
+      default: ".nested-resource-form-fields",
+    },
+    limit: Number,
+  }
+
+  connect() {
+    this.updateState()
+  }
+
+  add(e) {
+    e.preventDefault()
+
+    const content = this.templateTarget.innerHTML.replace(/NEW_RECORD/g, new Date().getTime().toString())
+    this.targetTarget.insertAdjacentHTML("beforebegin", content)
+
+    const event = new CustomEvent("nested-resource-form-fields:add", { bubbles: true })
+    this.element.dispatchEvent(event)
+
+    this.updateState()
+  }
+
+  remove(e) {
+    e.preventDefault()
+
+    const wrapper = e.target.closest(this.wrapperSelectorValue)
+
+    if (wrapper.dataset.newRecord === "true") {
+      wrapper.remove()
+    } else {
+      wrapper.style.display = "none"
+
+      const input = wrapper.querySelector("input[name*='_destroy']")
+      input.value = "1"
+    }
+
+    const event = new CustomEvent("nested-resource-form-fields:remove", { bubbles: true })
+    this.element.dispatchEvent(event)
+
+    this.updateState()
+  }
+
+  updateState() {
+    if (!this.hasAddButtonTarget || this.limitValue == 0) return
+
+    if (this.childCount >= this.limitValue)
+      this.addButtonTarget.style.display = "none"
+    else
+      this.addButtonTarget.style.display = "initial"
+  }
+
+  get childCount() {
+    return this.element.querySelectorAll(this.wrapperSelectorValue).length
+  }
+}

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,152 @@
+<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>
+
+    <!-- Color Modes -->
+    <div data-controller="resource-drop-down">
+      <button
+        type="button"
+        data-resource-drop-down-target="trigger"
+        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"
+        data-resource-drop-down-target="menu">
+        <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>
+  </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