🛠️ Component: Set up view_component ComponentPreviews

- #1187 This is an intermediary step before we look into `LookBook` or similar, but it: 1. Makes it possible to define component previews in `spec/components/previews` 2. Creates a basic layout for showing Components 3. Adds a `CardComponentPreview` 4. Sprouts an `ApplicationComponent` which we can start to massage into playing well with tailwind's class syntax
zinc-collective · Mar 6, 2023 · 17ddcdc · 17ddcdc
1 parent e02407f
commit 17ddcdc
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 11 deletions.
diff --git a/app/components/application_component.rb b/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
diff --git a/app/components/card_component.html.erb b/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>
diff --git a/app/components/card_component.rb b/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
diff --git a/app/views/layouts/component_preview.html.erb b/app/views/layouts/component_preview.html.erb
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title></title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <%= csrf_meta_tags %>
+    <%= csp_meta_tag %>
+    <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
+    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
+  </head>
+
+  <body>
+    <%= yield %>
+  </body>
+</html>
diff --git a/config/application.rb b/config/application.rb
@@ -37,5 +37,8 @@ class Application < Rails::Application
 
     config.i18n.load_path += Dir[Rails.root.join("config", "locales", "**", "*.{rb,yml}")]
     config.i18n.load_path += Dir[Rails.root.join("app", "furniture", "**", "locales", "**", "*.{rb,yml}")]
+
+    config.view_component.preview_paths << "#{Rails.root}/spec/components/previews"
+    config.view_component.default_preview_layout = "component_preview"
   end
 end
diff --git a/spec/components/previews/card_component_preview.rb b/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