From 8166fb719793dfebf1b53facdbcd415ae5b2d198 Mon Sep 17 00:00:00 2001
From: Enzo Haguiwara <haguiwara68@gmail.com>
Date: Thu, 31 Aug 2023 01:50:41 -0300
Subject: [PATCH] Add modal component

Those slots allow the developer to pass a block to the component,
this enables an in-depth customization of the component,
especially for the modal, in which the body should be dynamic.

Co-Authored-By: Elia Schito <elia@schito.me>
---
 .../solidus_admin/ui/modal/component.html.erb | 37 +++++++++
 .../solidus_admin/ui/modal/component.rb       | 12 +++
 .../solidus_admin/ui/modal/component.yml      |  2 +
 .../ui/modal/component_preview.rb             | 18 +++++
 .../component_preview/with_actions.html.erb   | 16 ++++
 .../component_preview/with_form.html.erb      | 22 ++++++
 .../component_preview/with_text.html.erb      | 75 +++++++++++++++++++
 .../solidus_admin/ui/modal/component_spec.rb  | 11 +++
 8 files changed, 193 insertions(+)
 create mode 100644 admin/app/components/solidus_admin/ui/modal/component.html.erb
 create mode 100644 admin/app/components/solidus_admin/ui/modal/component.rb
 create mode 100644 admin/app/components/solidus_admin/ui/modal/component.yml
 create mode 100644 admin/spec/components/previews/solidus_admin/ui/modal/component_preview.rb
 create mode 100644 admin/spec/components/previews/solidus_admin/ui/modal/component_preview/with_actions.html.erb
 create mode 100644 admin/spec/components/previews/solidus_admin/ui/modal/component_preview/with_form.html.erb
 create mode 100644 admin/spec/components/previews/solidus_admin/ui/modal/component_preview/with_text.html.erb
 create mode 100644 admin/spec/components/solidus_admin/ui/modal/component_spec.rb

diff --git a/admin/app/components/solidus_admin/ui/modal/component.html.erb b/admin/app/components/solidus_admin/ui/modal/component.html.erb
new file mode 100644
index 00000000000..5ac096d592a
--- /dev/null
+++ b/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>
diff --git a/admin/app/components/solidus_admin/ui/modal/component.rb b/admin/app/components/solidus_admin/ui/modal/component.rb
new file mode 100644
index 00000000000..86f2401c04c
--- /dev/null
+++ b/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
diff --git a/admin/app/components/solidus_admin/ui/modal/component.yml b/admin/app/components/solidus_admin/ui/modal/component.yml
new file mode 100644
index 00000000000..a97e4c40196
--- /dev/null
+++ b/admin/app/components/solidus_admin/ui/modal/component.yml
@@ -0,0 +1,2 @@
+en:
+  close: Close
diff --git a/admin/spec/components/previews/solidus_admin/ui/modal/component_preview.rb b/admin/spec/components/previews/solidus_admin/ui/modal/component_preview.rb
new file mode 100644
index 00000000000..5ee9f4709a2
--- /dev/null
+++ b/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
diff --git a/admin/spec/components/previews/solidus_admin/ui/modal/component_preview/with_actions.html.erb b/admin/spec/components/previews/solidus_admin/ui/modal/component_preview/with_actions.html.erb
new file mode 100644
index 00000000000..28ef8b9fc58
--- /dev/null
+++ b/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>
diff --git a/admin/spec/components/previews/solidus_admin/ui/modal/component_preview/with_form.html.erb b/admin/spec/components/previews/solidus_admin/ui/modal/component_preview/with_form.html.erb
new file mode 100644
index 00000000000..ce41c51047c
--- /dev/null
+++ b/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>
diff --git a/admin/spec/components/previews/solidus_admin/ui/modal/component_preview/with_text.html.erb b/admin/spec/components/previews/solidus_admin/ui/modal/component_preview/with_text.html.erb
new file mode 100644
index 00000000000..2e28e6020fb
--- /dev/null
+++ b/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>
diff --git a/admin/spec/components/solidus_admin/ui/modal/component_spec.rb b/admin/spec/components/solidus_admin/ui/modal/component_spec.rb
new file mode 100644
index 00000000000..6d27081c71f
--- /dev/null
+++ b/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