Merge pull request #5364 from nebulab/the-krg/admin/modal_component

[Admin] Add modal component

admin/app/components/solidus_admin/ui/modal/component.html.erb

@@ -0,0 +1,37 @@
+<dialog
+  data-controller="<%= stimulus_id %>"
+  <%= tag.attributes(
+    "aria-label": @title,
+    class: "relative z-10",
+    **@attributes
+  ) %>
+>
+  <a href="<%= @close_path %>" aria-hidden="true" class="cursor-default fixed inset-0 bg-gray-100/30 backdrop-blur-sm overflow-y-auto"></a>
+  <div class="fixed inset-0 z-10 pointer-events-none flex min-h-full justify-center p-4 text-center items-center">
+    <div class="pointer-events-auto cursor-auto relative transform overflow-auto rounded-lg bg-white text-left shadow-xl max-w-lg divide-y divide-gray-100">
+
+      <header class="flex items-center justify-between p-4">
+        <h3 class="text-xl font-semibold text-gray-900">
+          <%= @title %>
+        </h3>
+        <%= render component('ui/button').new(
+          tag: :a,
+          href: @close_path,
+          icon: 'close-line',
+          scheme: :ghost,
+          title: t('.close'),
+        ) %>
+      </header>
+
+      <div class="p-4 overflow-auto max-h-96">
+        <%= content %>
+      </div>
+
+      <% if actions? %>
+        <footer class="p-4 flex gap-2 justify-end">
+          <%= actions %>
+        </footer>
+      <% end %>
+    </div>
+  </div>
+</dialog>

admin/app/components/solidus_admin/ui/modal/component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::UI::Modal::Component < SolidusAdmin::BaseComponent
+  renders_one :actions
+
+  def initialize(title:, close_path: nil, open: true, **attributes)
+    @title = title
+    @close_path = close_path
+    @attributes = attributes
+    @attributes[:open] = open
+  end
+end

admin/app/components/solidus_admin/ui/modal/component.yml

@@ -0,0 +1,2 @@
+en:
+  close: Close

admin/spec/components/previews/solidus_admin/ui/modal/component_preview.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+# @component "ui/modal"
+class SolidusAdmin::UI::Modal::ComponentPreview < ViewComponent::Preview
+  include SolidusAdmin::Preview
+
+  def with_text
+    render_with_template
+  end
+
+  def with_form
+    render_with_template
+  end
+
+  def with_actions
+    render_with_template
+  end
+end

admin/spec/components/previews/solidus_admin/ui/modal/component_preview/with_actions.html.erb

@@ -0,0 +1,16 @@
+<section>
+  <div class="mb-8 text-lg">
+    With Actions
+  </div>
+
+  <%= render current_component.new(title: 'Delete view?', open: true) do |component| %>
+    <p>
+      This can't be undone. T-shirt SM view will no longer be available in your
+      admin!
+    </p>
+    <% component.with_actions do %>
+      <%= render component("ui/button").new(text: t('.close'), scheme: :secondary) %>
+      <%= render component("ui/button").new(scheme: :primary, text: "Delete") %>
+    <% end %>
+  <% end %>
+</section>

admin/spec/components/previews/solidus_admin/ui/modal/component_preview/with_form.html.erb

@@ -0,0 +1,22 @@
+<section>
+  <div class="mb-8 text-lg">
+    With Form
+  </div>
+
+  <%= render current_component.new(id: 'formModal', title: 'Create user') do |component| %>
+    <%= form_with(url: "#", scope: :overview, method: :get) do |form| %>
+      <%= render component('ui/forms/field').new(label: "My field") do %>
+        <%= render component("ui/forms/input").new(type: :text) %>
+      <% end %>
+
+      <% component.with_actions do %>
+        <%= render component("ui/button").new(
+          scheme: :primary,
+          form: form.id,
+          type: :submit,
+          text: "Create"
+        ) %>
+      <% end %>
+    <% end %>
+  <% end %>
+</section>

admin/spec/components/previews/solidus_admin/ui/modal/component_preview/with_text.html.erb

@@ -0,0 +1,75 @@
+<section>
+  <div class="mb-8 text-lg">
+    With Text
+  </div>
+
+  <%= render current_component.new(id: 'testModal', open: true, title: 'Modal Title') do |modal| %>
+    <% modal.with_actions do %>
+      <%= render component("ui/button").new(text: t('.close'), scheme: :secondary) %>
+      <%= render component("ui/button").new(scheme: :primary, text: "Delete") %>
+    <% end %>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+    commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+    velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+    occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+    mollit anim id est laborum.
+
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+    commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+    velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+    occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+    mollit anim id est laborum.
+
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+    commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+    velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+    occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+    mollit anim id est laborum.
+
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+    commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+    velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+    occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+    mollit anim id est laborum.
+
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+    commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+    velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+    occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+    mollit anim id est laborum.
+
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+    commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+    velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+    occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+    mollit anim id est laborum.
+
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+    commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+    velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+    occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+    mollit anim id est laborum.
+
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+    commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+    velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+    occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+    mollit anim id est laborum.
+  <% end %>
+</section>

admin/spec/components/solidus_admin/ui/modal/component_spec.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+require "spec_helper"
+
+RSpec.describe SolidusAdmin::UI::Modal::Component, type: :component do
+  it "renders the overview preview" do
+    render_preview(:with_text)
+    render_preview(:with_form)
+    render_preview(:with_actions)
+  end
+end