🛠️ Component: Sprout CardComponentPreview

- #1187

This:

3. Adds a `CardComponentPreview`
4. Sprouts an `ApplicationComponent` which we can start to massage into playing well with tailwind's class syntax

<img width="577" alt="Screenshot 2023-03-05 at 6 14 16 PM" src="https://user-images.githubusercontent.com/50284/223004317-f0bf8d69-0c13-40e9-862c-5bf7826f6654.png">
<img width="575" alt="Screenshot 2023-03-05 at 6 14 08 PM" src="https://user-images.githubusercontent.com/50284/223004320-057da756-7d6d-49e1-9691-e81255adff6b.png">

app/components/application_component.rb

@@ -0,0 +1,19 @@
+class ApplicationComponent < ViewComponent::Base
+  attr_accessor :data
+  attr_writer :classes
+
+  def initialize(data: {}, classes: "")
+    self.data = data
+    self.classes = classes
+  end
+
+  # @todo this should gracefully merge left passed in data
+  def attributes(classes: "")
+    tag_builder.tag_options(data: data, class: self.classes(classes))
+  end
+
+  # @todo how do we want to handle when tailwind is given conflicting classes? i.e. `mt-5 mt-3`
+  def classes(others = "")
+    "#{@classes} #{others}".strip.split.compact.uniq.join(" ")
+  end
+end

app/components/card_component.html.erb

@@ -1,3 +1,3 @@
-<div <%= data_attributes %> class="grid grid-cols-1 grid-rows-2 grid-flow-col shadow rounded-lg px-3 bg-white">
+<div <%== attributes(classes: "grid grid-cols-1 grid-rows-2 grid-flow-col shadow rounded-lg px-3 bg-white") %>>
   <%= content %>
 </div>

app/components/card_component.rb

@@ -1,11 +1,2 @@
-class CardComponent < ViewComponent::Base
-  attr_accessor :data
-
-  def initialize(data: {})
-    self.data = data
-  end
-
-  def data_attributes
-    @data_attributes ||= tag_builder.tag_options(data: data)&.html_safe
-  end
+class CardComponent < ApplicationComponent
 end

spec/components/previews/card_component_preview.rb

@@ -0,0 +1,11 @@
+class CardComponentPreview < ViewComponent::Preview
+  def card
+    render(CardComponent.new(data: {fancy: :pants}, classes: "m-2")) do
+      <<~HTML.chomp.html_safe # rubocop:disable Rails/OutputSafety
+        <h3 class='p-2'>Hey There</h3>
+
+        <p class='p-2'>You can put stuff in me!</p>
+      HTML
+    end
+  end
+end