From 0b459207c6f3de9e7cdb57e854ac01a3f6778713 Mon Sep 17 00:00:00 2001
From: Elia Schito <elia@schito.me>
Date: Tue, 5 Sep 2023 17:50:21 +0200
Subject: [PATCH] Add a ui/panel component

---
 .../solidus_admin/ui/panel/component.html.erb | 36 +++++++++++
 .../solidus_admin/ui/panel/component.js       | 14 +++++
 .../solidus_admin/ui/panel/component.rb       | 12 ++++
 .../solidus_admin/ui/panel/component.yml      |  4 ++
 .../ui/panel/component_preview.rb             | 10 +++
 .../panel/component_preview/overview.html.erb | 63 +++++++++++++++++++
 .../solidus_admin/ui/panel/component_spec.rb  |  9 +++
 7 files changed, 148 insertions(+)
 create mode 100644 admin/app/components/solidus_admin/ui/panel/component.html.erb
 create mode 100644 admin/app/components/solidus_admin/ui/panel/component.js
 create mode 100644 admin/app/components/solidus_admin/ui/panel/component.rb
 create mode 100644 admin/app/components/solidus_admin/ui/panel/component.yml
 create mode 100644 admin/spec/components/previews/solidus_admin/ui/panel/component_preview.rb
 create mode 100644 admin/spec/components/previews/solidus_admin/ui/panel/component_preview/overview.html.erb
 create mode 100644 admin/spec/components/solidus_admin/ui/panel/component_spec.rb

diff --git a/admin/app/components/solidus_admin/ui/panel/component.html.erb b/admin/app/components/solidus_admin/ui/panel/component.html.erb
new file mode 100644
index 00000000000..38fd349fb2c
--- /dev/null
+++ b/admin/app/components/solidus_admin/ui/panel/component.html.erb
@@ -0,0 +1,36 @@
+<div
+  class="
+    bg-white
+    rounded-lg
+    shadow-sm
+    border
+    border-gray-100
+    flex-col
+    justify-start
+    items-start
+    gap-6
+    inline-flex
+    w-full
+    py-6
+  "
+  data-controller="<%= stimulus_id %>"
+>
+  <% if @title %>
+    <h6 class="mt-0 px-6 w-full">
+      <span class="body-title"><%= @title %></span>
+      <%= render component('ui/toggletip').new(guide: @title_hint, position: :left) if @title_hint %>
+    </h6>
+  <% end %>
+
+  <% if content&.present? %>
+    <div class="px-6 w-full">
+      <%= content %>
+    </div>
+  <% end %>
+
+  <% if actions? %>
+    <div class="flex gap-2 items-center border-t border-gray-100 px-6 pt-6 w-full">
+      <%= actions %>
+    </div>
+  <% end %>
+</div>
diff --git a/admin/app/components/solidus_admin/ui/panel/component.js b/admin/app/components/solidus_admin/ui/panel/component.js
new file mode 100644
index 00000000000..b6e2b996c67
--- /dev/null
+++ b/admin/app/components/solidus_admin/ui/panel/component.js
@@ -0,0 +1,14 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['output']
+
+  typed(event) {
+    this.text = event.currentTarget.value
+    this.render()
+  }
+
+  render() {
+    this.outputTarget.innerText = this.text
+  }
+}
diff --git a/admin/app/components/solidus_admin/ui/panel/component.rb b/admin/app/components/solidus_admin/ui/panel/component.rb
new file mode 100644
index 00000000000..0c9523742ed
--- /dev/null
+++ b/admin/app/components/solidus_admin/ui/panel/component.rb
@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::UI::Panel::Component < SolidusAdmin::BaseComponent
+  renders_one :actions
+
+  # @param title [String] the title of the panel
+  # @param title_hint [String] the title hint of the panel
+  def initialize(title: nil, title_hint: nil)
+    @title = title
+    @title_hint = title_hint
+  end
+end
diff --git a/admin/app/components/solidus_admin/ui/panel/component.yml b/admin/app/components/solidus_admin/ui/panel/component.yml
new file mode 100644
index 00000000000..6fcfbdd6df7
--- /dev/null
+++ b/admin/app/components/solidus_admin/ui/panel/component.yml
@@ -0,0 +1,4 @@
+# Add your component translations here.
+# Use the translation in the example in your template with `t(".hello")`.
+en:
+  hello: "Hello world!"
diff --git a/admin/spec/components/previews/solidus_admin/ui/panel/component_preview.rb b/admin/spec/components/previews/solidus_admin/ui/panel/component_preview.rb
new file mode 100644
index 00000000000..c6e96d0e5c5
--- /dev/null
+++ b/admin/spec/components/previews/solidus_admin/ui/panel/component_preview.rb
@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+# @component "ui/panel"
+class SolidusAdmin::UI::Panel::ComponentPreview < ViewComponent::Preview
+  include SolidusAdmin::Preview
+
+  def overview
+    render_with_template
+  end
+end
diff --git a/admin/spec/components/previews/solidus_admin/ui/panel/component_preview/overview.html.erb b/admin/spec/components/previews/solidus_admin/ui/panel/component_preview/overview.html.erb
new file mode 100644
index 00000000000..a96f55e179a
--- /dev/null
+++ b/admin/spec/components/previews/solidus_admin/ui/panel/component_preview/overview.html.erb
@@ -0,0 +1,63 @@
+<div class="mb-8">
+  <h6 class="text-gray-500 mb-3 mt-0">
+    Content only
+  </h6>
+
+  <%= render current_component.new do %>
+    <label>
+      SKU:
+      ABC-123
+    </label>
+  <% end %>
+</div>
+
+<div class="mb-8">
+  <h6 class="text-gray-500 mb-3 mt-0">
+    With title
+  </h6>
+
+  <%= render current_component.new(title: "SEO") do %>
+    <label>
+      SKU:
+      ABC-123
+    </label>
+  <% end %>
+</div>
+
+<div class="mb-8">
+  <h6 class="text-gray-500 mb-3 mt-0">
+    With title and hint
+  </h6>
+
+  <%= render current_component.new(title: "SEO", title_hint: "Search Engine Optimization") do %>
+    <label>
+      SKU:
+      ABC-123
+    </label>
+  <% end %>
+</div>
+
+<div class="mb-8">
+  <h6 class="text-gray-500 mb-3 mt-0">
+    With title, hint, and actions
+  </h6>
+
+  <%= render current_component.new(title: "SEO", title_hint: "Search Engine Optimization") do |panel| %>
+    <label>
+      SKU:
+      ABC-123
+    </label>
+
+    <% panel.with_actions do %>
+      foo action
+    <% end %>
+  <% end %>
+</div>
+
+<div class="mb-8">
+  <h6 class="text-gray-500 mb-3 mt-0">
+    With no content
+  </h6>
+
+  <%= render current_component.new(title: "SEO", title_hint: "Search Engine Optimization").with_actions_content("foo action") %>
+</div>
diff --git a/admin/spec/components/solidus_admin/ui/panel/component_spec.rb b/admin/spec/components/solidus_admin/ui/panel/component_spec.rb
new file mode 100644
index 00000000000..1da12566322
--- /dev/null
+++ b/admin/spec/components/solidus_admin/ui/panel/component_spec.rb
@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+require "spec_helper"
+
+RSpec.describe SolidusAdmin::UI::Panel::Component, type: :component do
+  it "renders the overview preview" do
+    render_preview(:overview)
+  end
+end