Adding an assets panel to the lookbook demo to show assets for the co…

…mponent (#1578)

demo/Gemfile

@@ -36,7 +36,7 @@ gem "bootsnap", ">= 1.4.2", require: false
 
 gem "primer_view_components", path: "../"
 gem "view_component", '>= 2.74.1'
-gem "lookbook", "~> 1.2.1" unless rails_version.to_f < 7
+gem "lookbook", "~> 1.3.3" unless rails_version.to_f < 7
 
 group :development do
   # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring

demo/Gemfile.lock

@@ -242,7 +242,7 @@ GEM
     loofah (2.19.0)
       crass (~> 1.0.2)
       nokogiri (>= 1.5.9)
-    lookbook (1.2.1)
+    lookbook (1.3.3)
       actioncable
       activemodel
       css_parser
@@ -284,7 +284,7 @@ GEM
       net-protocol
     net-protocol (0.1.3)
       timeout
-    net-smtp (0.3.2)
+    net-smtp (0.3.3)
       net-protocol
     netrc (0.11.0)
     nio4r (2.5.8)
@@ -296,7 +296,7 @@ GEM
     nokogiri (1.13.9-x86_64-linux)
       racc (~> 1.4)
     octicons (17.9.0)
-    oj (3.13.21)
+    oj (3.13.23)
     os (1.1.4)
     pry (0.14.1)
       coderay (~> 1.1)
@@ -370,13 +370,13 @@ GEM
       activesupport (>= 5.2)
       sprockets (>= 3.0.0)
     statsd-instrument (3.0.2)
-    stimulus-rails (1.1.0)
+    stimulus-rails (1.1.1)
       railties (>= 6.0.0)
     thor (1.2.1)
     timeliness (0.3.10)
     timeout (0.3.0)
     to_regexp (0.2.1)
-    turbo-rails (1.3.1)
+    turbo-rails (1.3.2)
       actionpack (>= 6.0.0)
       activejob (>= 6.0.0)
       railties (>= 6.0.0)
@@ -385,7 +385,7 @@ GEM
     unf (0.1.4)
       unf_ext
     unf_ext (0.0.8.2)
-    view_component (2.74.1)
+    view_component (2.75.0)
       activesupport (>= 5.0.0, < 8.0)
       concurrent-ruby (~> 1.0)
       method_source (~> 1.0)
@@ -395,7 +395,7 @@ GEM
     websocket-extensions (0.1.5)
     yard (0.9.28)
       webrick (~> 1.7.0)
-    zeitwerk (2.6.1)
+    zeitwerk (2.6.5)
 
 PLATFORMS
   ruby
@@ -414,7 +414,7 @@ DEPENDENCIES
   kuby-azure (>= 0.3.3, < 1.0)
   kuby-core!
   kuby-kind (~> 0.1)
-  lookbook (~> 1.2.1)
+  lookbook (~> 1.3.3)
   primer_view_components!
   pry-byebug
   puma (~> 6.0.0)

demo/app/views/lookbook/panels/_assets.html.erb

@@ -0,0 +1,45 @@
+<style type="text/css">
+  .asset-preview + .asset-preview {
+    margin-top: 30px;
+  }
+  .asset-header {
+    display: flex;
+    align-items: center;
+    padding-left: 4px;
+    padding-right: 4px;
+    margin-bottom: 6px;
+  }
+  .asset-icon {
+    margin-right: 6px;
+    color: var(--lookbook-accent-500);
+  }
+  .asset-title {
+    font-size: 12px;
+    opacity: 0.75;
+  }
+  .asset-contents {
+    background: #fff;
+    overflow: hidden;
+    border-radius: 6px;
+    border: 1px solid var(--lookbook-divider);
+  }
+</style>
+
+<div class="lookbook-panel">
+  <% if assets.any? %>
+    <% assets.each do |asset| %>
+      <div class="asset-preview">
+        <header class="asset-header">
+          <%= icon :file, size: 3.5, class: "asset-icon" %>
+          <h4 class="asset-title font-mono"><%= asset.basename %></h4>
+        </header>
+        <div class="asset-contents">
+          <% extension = asset.extname %>
+          <%= code language: extension == ".css" ? :css : :js, line_numbers: true do %><%== File.read(asset) %><% end %>
+        </div>
+      </div>
+    <% end %>
+  <% else %>
+    <p>No assets to display.</p>
+  <% end %>
+</div>

demo/config/application.rb

@@ -4,6 +4,7 @@
 
 require "action_controller/railtie"
 require "action_view/railtie"
+require "active_model/railtie"
 require "sprockets/railtie"
 require "view_component"
 require "primer/view_components/engine"
@@ -37,6 +38,19 @@ class Application < Rails::Application
     }
 
     if config.respond_to?(:lookbook)
+      asset_panel_config = {
+        label: "Assets",
+        partial: "lookbook/panels/assets",
+        locals: lambda do |data|
+          assets = data.preview.components.map do |component|
+            asset_files = Dir[Rails.root.join("../", "#{component.full_path.to_s.chomp('.rb')}.{css,ts}")]
+            asset_files.map { |path| Pathname.new path }
+          end.flatten.compact
+          { assets: assets }
+        end
+      }
+      Lookbook.define_panel("assets", asset_panel_config)
+
       config.lookbook.project_name = "Primer ViewComponents v#{Primer::ViewComponents::VERSION::STRING}"
       config.lookbook.preview_display_options = {
         theme: [

postcss.config.js

@@ -17,6 +17,6 @@ module.exports = {
         'focus-visible-pseudo-class': false
       }
     }),
-    require('cssnano'),
+    process.env.CI === 'true' ? require('cssnano') : null
   ],
 };