lookbook 1.0.0.beta.6 → 1.0.0.rc.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c0be6f1f0dc2e74e64585f664af67c7a3b05b8de3cd875cfa4732d2cecb37465
-  data.tar.gz: a315fa37ed07664a06096709b8bc88b81011e0f8f54b438362b8e6803eee6e3d
+  metadata.gz: 74c62e76c265b02970bc86ad242fb43c347ccf0ad141b512148f3ef1e3eb2ae9
+  data.tar.gz: d389ed323fa6918a5919865414e6c4b17e23870a27d398ba92af055ffa958bf4
 SHA512:
-  metadata.gz: 87214ff5e7f0292276b5ddbd3ff4b1b41f8ae685e9fa28de92043af5f6a5736c51b8729a5432e3fe2c0ff7fe75dd6f7ee145796d36c0d08528d20c37e6886d06
-  data.tar.gz: c615b04dd5ee26613fd3ea804473727114cd8acc97aa6b0aeb4f280255adf56cd645228e45dd40e0e864915a328eb8c2a1adde198256bdf4b7923dbb4009a714
+  metadata.gz: a64d8542e71251f52b36d88548dfe5fbd0347c1d6a52ff6e0f6bbe8e1e256d93a5761089f7594b95453c7865bf619822483efa229fe011474d2f2818d9bcd96c
+  data.tar.gz: 2360d8e4a06cf428dd10c7ea3d39d9d17b4bea377fa98861e9f3848026d3b9ed60da882df07005bd9547891fd63b88a8368da4a15dedc076de759a1418a06385

data/README.md

@@ -1,53 +1,61 @@
-# Lookbook v1.0 [beta]
+# Lookbook v1.0
 
-**This is the development branch for Lookbook v1.0.**
+<div>
+<a href="https://rubygems.org/gems/lookbook"><img src="https://img.shields.io/gem/v/lookbook?include_prereleases" alt="Gem version"></a>
+<img src="https://github.com/allmarkedup/lookbook/actions/workflows/ci.yml/badge.svg?branch=v1.0-beta" alt="CI status">
+</div>
+<br>
 
-_For code and documentation for the current stable release see the [main branch](https://github.com/allmarkedup/lookbook/tree/main)._
+> **This is the Lookbook v1.0 BETA development branch.**<br>
+>_For code and documentation for the current stable release see the [main branch](https://github.com/allmarkedup/lookbook/tree/main)._
 
----
 
-📣 **This v1.0 beta is still under active development.** However no breaking changes are envisaged to the current implementation and it should now be stable enough to be used for day-to-day development. Give it a try! 🎉
+## Get started
 
----
- 
-## 📚 Documentation
+If you are already using Lookbook in your project, just update the Lookbook gem to the latest beta release and then head over to the [beta documentation site](https://beta.lookbook.build/) to read more about the new features.
 
-The new (work-in-progress) **documentation site** for Lookbook v1.0 is available here:
+```ruby
+gem "lookbook", ">= 1.0.0.beta.8"
+```
 
-👉 **https://lookbook-docs-v1-beta.netlify.app/** 👈
+If you are **new to Lookbook** then check out the <a href="https://beta.lookbook.build/guide/quick-start/">v1.0 quick start guide</a> for more detailed instructions on installing Lookbook in your project
 
-> Documentation source files are located in the `/docs` directory within this repository. The docs are built using [Bridgetown](https://www.bridgetownrb.com/).
 
-## 🚀 Demo app
+<h4>Useful Resources</h4>
 
-There is a demo of the latest v1.0 beta here:
+* 👉 <a href="https://beta.lookbook.build/">v1.0 docs</a>
+* 👉 <a href="https://lookbook-demo-app-v1-0-beta.herokuapp.com/lookbook">v1.0 demo app</a> <em>(The repo for the demo <a href="https://github.com/allmarkedup/lookbook-demo/tree/v1.0-beta">is here</a> if you want to dig in further)</em>
 
-👉 **https://lookbook-demo-app-v1-0-beta.herokuapp.com/lookbook/** 👈
 
-[![Lookbook UI](.github/assets/lookbook_screenshot_v1.0_beta.png)](https://lookbook-demo-app-v1-0-beta.herokuapp.com/lookbook/)
 
+## Changes and new features in v1.0
 
-## 🔎 Release focus
+Lookbook v1.0 includes a completely re-written UI, many under-the hood improvements and a some exciting new customisation options.
 
-The main goals of the v1.0 release are:
+### Frontend changes:
 
-- [x] Rebuild app UI using ViewComponent components
-- [x] Improve usability of the small screen/mobile layout
-- [x] Add support for basic UI color theme customisation
-- [x] Allow users to extend Lookbook with custom panels and by hooking into lifecycle events
-- [x] Remove the `experimental` flag from the [Pages](https://github.com/allmarkedup/lookbook#pages)
-- [x] Improve the development/debugging setup
-- [ ] Improve the test setup and test coverage, switch to RSpec **[in progress]**
+* Completely re-written UI - now built with ViewComponents
+* New [UI themes and customisation options](https://beta.lookbook.build/guide/themes/)
+* Improved small-screen/mobile view
+* Debug menu
+* ...and many other small visual and usability improvements
 
-**No breaking changes** are planned for user-facing features, although the app UI will include some minor visual updates and usability improvements.
+### New options for extending Lookbook:
 
-## 👋 Testing and feedback - help wanted!
+* Define [custom tags](https://beta.lookbook.build/guide/extend/tags/) for preview file annotations
+* Create [your own tab panels](https://beta.lookbook.build/guide/extend/panels/) - with complete control over content/layout and access to all Lookbook data
+* Use [lifecycle hooks](https://beta.lookbook.build/guide/extend/hooks/) to run your own code when Lookbook starts up, when files change or at shutdown
 
-The bulk of the v1.0 'new feature' development work is now mostly complete, although testing and bug fixing is ongoing.
+### Other changes
 
-**If you are an existing Lookbook user** I'd greatly appreciate if you can kick the tyres on the v1.0 beta and open an issue with any bug reports, suggestions or feedback you might have, either about Lookbook itself or the [new docs site](https://lookbook-docs-v1-beta.netlify.app/).
+* 'Workbench' app for developing Lookbook's UI components in Lookbook
+* New Rspec-based test suite and dummy app
+* All new documentation site built using [Bridgetown](https://www.bridgetownrb.com/)
+
+
+[![Lookbook UI](.github/assets/lookbook_screenshot_v1.0_beta.png)](https://lookbook-demo-app-v1-0-beta.herokuapp.com/lookbook/)
 
-## 🛠 Workbench
+## Workbench
 
 As of this release, Lookbook's UI is itself built using ViewComponent components. To help with development it is possible to preview these components (in a Lookbook instance!) by running the included 'Workbench" app, as follows:
 
@@ -59,7 +67,7 @@ As of this release, Lookbook's UI is itself built using ViewComponent components
 This will start the Workbench app in development mode and any changes to Lookbooks views or assets will immediately be visible in the UI.
 
 
-## 🚦 Running tests
+## Running tests
 
 The test suite is in the process of being completely overhauled.
 

data/app/assets/lookbook/css/themes/blue.css

@@ -58,6 +58,7 @@
   --lookbook-header-bg: var(--lookbook-accent-600);
   --lookbook-header-text: var(--lookbook-white);
   --lookbook-header-border: var(--lookbook-accent-700);
+  --lookbook-blank-slate-title: var(--lookbook-accent-600);
   --lookbook-branding-text: var(--lookbook-header-text);
   --lookbook-draggable-hint: rgb(224 231 255 / 0.2);
-}
+}

data/app/assets/lookbook/css/themes/indigo.css

@@ -58,6 +58,7 @@
   --lookbook-header-bg: var(--lookbook-accent-600);
   --lookbook-header-text: var(--lookbook-white);
   --lookbook-header-border: var(--lookbook-accent-700);
+  --lookbook-blank-slate-title: var(--lookbook-accent-600);
   --lookbook-branding-text: var(--lookbook-header-text);
   --lookbook-draggable-hint: rgb(224 231 255 / 0.2);
-}
+}

data/app/assets/lookbook/css/themes/zinc.css

@@ -58,6 +58,7 @@
   --lookbook-header-bg: var(--lookbook-accent-600);
   --lookbook-header-text: var(--lookbook-white);
   --lookbook-header-border: var(--lookbook-accent-700);
+  --lookbook-blank-slate-title: var(--lookbook-accent-600);
   --lookbook-branding-text: var(--lookbook-header-text);
   --lookbook-draggable-hint: rgb(224 231 255 / 0.2);
-}
+}

data/app/components/lookbook/base_component.rb

@@ -12,7 +12,6 @@ module Lookbook
       merged_classes = class_names(attrs[:class], @html_attrs[:class])
       merged_attrs = @html_attrs.except(:class).deep_merge(attrs.except(:class))
 
-
       render Lookbook::TagComponent.new(tag: tag,
         name: component_name,
         **merged_attrs,

data/app/components/lookbook/inspector_panel/component.css

@@ -0,0 +1,5 @@
+@layer components {
+  .lookbook-panel {
+    @apply p-4 min-h-full;
+  }
+}

data/app/components/lookbook/inspector_panel/component.html.erb

@@ -1,4 +1,6 @@
-<% if panel_styles %>
-  <% content_for :panel_css do %><%= panel_styles %><% end %>
-<% end %>
-<%= panel_html %>
+<%= render_component_tag :div, class: "h-full" do %>
+  <% if panel_styles %>
+    <% content_for :panel_css do %><%= panel_styles %><% end %>
+  <% end %>
+  <%= panel_html %>
+<% end %>

data/app/components/lookbook/inspector_panel/component.rb

@@ -15,8 +15,8 @@ module Lookbook
 
     def before_render
       if @system == false
-        panel_dom = ::Nokogiri::HTML::fragment(content)
-        style_tags = panel_dom.css('style')
+        panel_dom = ::Nokogiri::HTML.fragment(content)
+        style_tags = panel_dom.css("style")
         if style_tags.any?
           css_parser = ::CssParser::Parser.new
           @panel_styles = ""
@@ -27,7 +27,7 @@ module Lookbook
             end
             style_tag.unlink
           end
-          @panel_html = panel_dom.to_html.html_safe 
+          @panel_html = panel_dom.to_html.html_safe
         end
       end
       @panel_html ||= content

data/app/components/lookbook/nav/component.rb

@@ -4,8 +4,7 @@ module Lookbook
     renders_one :toolbar, Lookbook::Toolbar::Component
 
     def initialize(
-      id: nil,
-      collection:,
+      collection:, id: nil,
       collapse_singles: false,
       **attrs
     )

data/app/components/lookbook/nav/item/component.html.erb

@@ -17,7 +17,7 @@
         class: "mr-1 text-lookbook-nav-toggle absolute -left-4",
         "x-effect": "iconName = open ? 'chevron-down' : 'chevron-right'" if children? %>
       <%= icon nav_icon, size: 3.5, class: "mr-1.5 text-lookbook-nav-icon-stroke" %>
-      <span><%= label %></span>
+      <span <% if @item.type == :preview %>class="font-bold"<% end %>><%= label %></span>
     </div>
   <% end %>
   

data/app/components/lookbook/params_editor/field/component.rb

@@ -31,7 +31,8 @@ module Lookbook
     protected
 
     def alpine_data
-      "{name: '#{@name}', value: #{value.to_json}}"
+      escaped_value = value.is_a?(String) ? helpers.j(value) : value
+      "{name: '#{@name}', value: '#{escaped_value}'}"
     end
 
     def alpine_component

data/app/components/lookbook/tab_panels/component.rb

@@ -3,7 +3,7 @@ module Lookbook
     renders_many :panels, ->(**attrs) do
       @panel_counter += 1
       attrs[:name] ||= "tab-#{@panel_counter}"
-      Lookbook::TabPanels::Panel::Component.new **attrs
+      Lookbook::TabPanels::Panel::Component.new(**attrs)
     end
 
     def initialize(**html_attrs)

data/app/components/lookbook/tab_panels/panel/component.rb

@@ -1,8 +1,8 @@
 module Lookbook
   class TabPanels::Panel::Component < Lookbook::BaseComponent
     def initialize(name:, id: nil, **html_attrs)
-      @name = name 
-      @id = "#{id || "panel-#{name}"}"
+      @name = name
+      @id = (id || "panel-#{name}").to_s
       super(**html_attrs)
     end
   end

data/app/components/lookbook/tag_component.rb

@@ -6,19 +6,19 @@ module Lookbook
       @tag = tag
       html_attrs[:data] ||= {}
       html_attrs[:data][:component] = name if name.present?
-      html_attrs["x-cloak"] = true if cloak == true
+      html_attrs[:"x-cloak"] = true if cloak == true
       html_attrs[self.class.escape_attribute_key] = false
       @html_attrs = html_attrs
     end
 
     def call
-      tag.public_send(@tag, **@html_attrs) do
+      tag.public_send(@tag.to_sym, **@html_attrs) do
         content
       end
     end
 
     def self.escape_attribute_key
-      @escape_attribute_key ||= Gem::Version.new(Rails.version) < Gem::Version.new('6.1.5.1') ? :escape_attributes : :escape
+      @escape_attribute_key ||= Gem::Version.new(Rails.version) < Gem::Version.new("6.1.5.1") ? :escape_attributes : :escape
     end
   end
 end

data/app/controllers/lookbook/application_controller.rb

@@ -24,7 +24,7 @@ module Lookbook
     protected
 
     def generate_theme_overrides
-      @theme_overrides ||= Lookbook::Theme.new(Lookbook.config.ui_theme_overrides).to_css
+      @theme_overrides ||= Lookbook.theme.to_css
     end
 
     def feature_enabled?(feature)

data/app/controllers/lookbook/page_controller.rb

@@ -13,7 +13,12 @@ module Lookbook
       @pages = Lookbook.pages
       @next_page = @pages.find_next(@page)
       @previous_page = @pages.find_previous(@page)
-      content = render_to_string inline: @page.content
+      content = render_to_string inline: @page.content, locals: {
+        page: @page,
+        next_page: @next_page,
+        previous_page: @previous_page,
+        pages: @pages
+      }
       @page.markdown? ? Lookbook::Markdown.render(content) : content
     end
   end

data/app/controllers/lookbook/previews_controller.rb

@@ -2,6 +2,8 @@ module Lookbook
   class PreviewsController < ApplicationController
     layout "lookbook/inspector"
 
+    helper Lookbook::PreviewHelper
+
     def self.controller_path
       "lookbook/previews"
     end
@@ -47,16 +49,6 @@ module Lookbook
       redirect_to lookbook_inspect_path params[:path]
     end
 
-    # Namespaced preview helpers
-
-    def lookbook_display(key, fallback = nil)
-      params.dig(:lookbook, :display, key.to_sym) || fallback
-    end
-
-    def lookbook_data(key, fallback = nil)
-      Lookbook.data.get(key, fallback)
-    end
-
     private
 
     def lookup_entities
@@ -130,7 +122,7 @@ module Lookbook
 
       context_data = {
         preview_params: preview_params,
-        path: params[:path],
+        path: params[:path]
       }
 
       example = @example
@@ -145,7 +137,7 @@ module Lookbook
         output = preview_controller.process(:render_example_to_string, @preview, example.name)
         source = has_template ? example.template_source(render_args[:template]) : example.method_source
         source_lang = has_template ? example.template_lang(render_args[:template]) : example.lang
-        
+
         example.define_singleton_method(:output, proc { output })
         example.define_singleton_method(:source, proc { source })
         example.define_singleton_method(:source_lang, proc { source_lang })
@@ -170,21 +162,21 @@ module Lookbook
 
         callable_data = {
           name: name.to_s,
-          index_position: (@panels.select { |p| p.pane == config.pane }.size + 1),
+          index_position: (@panels.count { |p| p.pane == config.pane } + 1),
           **inspector_data
         }
 
         resolved_config = config_with_defaults.transform_values do |value|
-          value.class == Proc ? value.call(Lookbook::Store.new(callable_data)) : value
+          value.instance_of?(Proc) ? value.call(Lookbook::Store.new(callable_data)) : value
         end
         resolved_config[:name] = name.to_s
-        
+
         @panels << Lookbook::Store.new(resolved_config, deep: false)
       end
 
       @panels = @panels.select(&:show).sort_by { |p| [p.position, p.label] }
     end
-   
+
     def main_panels
       panels.select { |panel| panel.pane == :main }
     end

data/app/helpers/lookbook/application_helper.rb

@@ -4,6 +4,15 @@ module Lookbook
       Lookbook::Engine.config.lookbook
     end
 
+    def theme
+      Lookbook.theme
+    end
+
+    def asset_path(file, version: true)
+      path = "/lookbook-assets/#{file}".gsub("//", "/")
+      version ? "#{path}?v=#{Lookbook::VERSION}" : path
+    end
+
     def feature_enabled?(name)
       Lookbook::Features.enabled?(name)
     end

data/app/helpers/lookbook/preview_helper.rb

@@ -1,6 +1,11 @@
 module Lookbook
   module PreviewHelper
-    # Left intentionally empty.
-    # Included for backwards compatability.
+    def lookbook_display(key, fallback = nil)
+      params.dig(:lookbook, :display, key.to_sym) || fallback
+    end
+
+    def lookbook_data(key, fallback = nil)
+      Lookbook.data.get(key, fallback)
+    end
   end
 end

data/app/views/layouts/lookbook/skeleton.html.erb

@@ -5,16 +5,24 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
 
-  <link href="/lookbook-assets/css/lookbook.css?v=<%= Lookbook::VERSION %>" rel="stylesheet">
-  <link href="/lookbook-assets/css/themes/<%= config.ui_theme %>.css?v=<%= Lookbook::VERSION %>" rel="stylesheet">
-  <% if @theme_overrides.present? %>
+  <link href="<%= asset_path("/css/lookbook.css") %>" rel="stylesheet">
+  <link href="<%= asset_path("/css/themes/#{config.ui_theme}.css") %>" rel="stylesheet">
+
+  <%- if @theme_overrides.present? %>
     <style media="all">
       <%== @theme_overrides %>
     </style>
   <% end %>
 
-  <% if config.ui_favicon != false %>
-    <link rel="icon" href="<%= config.ui_favicon || "data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>👀</text></svg>" %>">
+  <% if config.ui_favicon == true %>
+    <link
+      rel="icon"
+      href="data:image/svg+xml,%3Csvg width='96' height='84' viewBox='0 0 96 84' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath d='M96 0v84H0V0h96Z'/%3E%3C/clipPath%3E%3CclipPath id='b'%3E%3Cpath d='M71.897 0a1.5 1.5 0 0 1 1.31.769l22.605 40.5a1.5 1.5 0 0 1 0 1.462l-22.605 40.5a1.5 1.5 0 0 1-1.31.769H49.481a1 1 0 0 1-.873-1.487L70.812 42.73a1.5 1.5 0 0 0 0-1.462L48.608 1.487A1 1 0 0 1 49.481 0ZM24.655.564l22.72 40.705a1.5 1.5 0 0 1 0 1.462l-22.72 40.705a1 1 0 0 1-1.746 0L.19 42.73a1.5 1.5 0 0 1 0-1.462L22.91.564a1 1 0 0 1 1.746 0Z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23a)'%3E%3Cg clip-path='url(%23b)'%3E%3Cpath fill='<%= url_encode theme.favicon_dark_mode %>' d='M0 0h96v84H0V0z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"
+      media="(prefers-color-scheme: dark)">
+    <link
+      rel="icon"
+      href="data:image/svg+xml,%3Csvg width='96' height='84' viewBox='0 0 96 84' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath d='M96 0v84H0V0h96Z'/%3E%3C/clipPath%3E%3CclipPath id='b'%3E%3Cpath d='M71.897 0a1.5 1.5 0 0 1 1.31.769l22.605 40.5a1.5 1.5 0 0 1 0 1.462l-22.605 40.5a1.5 1.5 0 0 1-1.31.769H49.481a1 1 0 0 1-.873-1.487L70.812 42.73a1.5 1.5 0 0 0 0-1.462L48.608 1.487A1 1 0 0 1 49.481 0ZM24.655.564l22.72 40.705a1.5 1.5 0 0 1 0 1.462l-22.72 40.705a1 1 0 0 1-1.746 0L.19 42.73a1.5 1.5 0 0 1 0-1.462L22.91.564a1 1 0 0 1 1.746 0Z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23a)'%3E%3Cg clip-path='url(%23b)'%3E%3Cpath fill='<%= url_encode theme.favicon_light_mode %>' d='M0 0h96v84H0V0z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"
+      media="(prefers-color-scheme: light)">
   <% end %>
 
   <script>
@@ -25,15 +33,14 @@
     <% end %>
   </script>
   
-  <script src="/lookbook-assets/js/lookbook.js?v=<%= Lookbook::VERSION %>" defer></script>
+  <script src="<%= asset_path("/js/lookbook.js") %>" defer></script>
   <% if params[:lookbook_embed] %>
-    <script src="/lookbook-assets/js/embed.js?v=<%= Lookbook::VERSION %>" defer></script>
+    <script src="<%= asset_path("/js/embed.js") %>" defer></script>
   <% end %>
   
   <title><%= [@title, config.project_name || "Lookbook"].compact.join(" :: ") %></title>
 </head>
 <body>
-  
   <%= yield :body %>
   
   <% if Rails.env.development? %>

data/app/views/lookbook/index.html.erb

@@ -1,27 +1,14 @@
 <div id="landing" class="flex flex-col items-center justify-center h-full w-full">
-  <div class="p-4 text-center mx-auto">
-    <% if Lookbook.previews? %>
-      <div id="landing-with-content">
-        <h5 class="text-lg opacity-50"><%= config.project_name %></h5>
-        <div class="mt-2 italic opacity-30 max-w-[400px]">
-          <p>
-            Select a preview from the nav to get started.
-          </p>
-        </div>
-      </div>
-    <% else %>
-      <div id="landing-no-content">
-        <h5 class="text-lg font-bold opacity-80"><%= config.project_name %></h5>
-        <div class="mt-3 italic opacity-40 max-w-[400px]">
-          <p>
-            Nothing here yet! 
-            <a class="underline" href="https://viewcomponent.org/guide/previews.html" target="_blank">
-              Create a preview
-            </a>
-            to get started.
-          </p>
-        </div>
-      </div>
-    <% end %>
+  <div class="text-center" id="landing-<%= Lookbook.previews? ? "with" : "no" %>-content">
+    <h5 class="text-base text-lookbook-blank-slate-title truncate uppercase font-black tracking-wider mb-2">
+      <%= config.project_name %>
+    </h5>
+    <div class="opacity-60">
+      <% if Lookbook.previews? %>
+        <p>Select a preview from the nav to get started.</p>
+      <% else %>
+        <p><a class="underline" href="https://beta.lookbook.build/guide/previews" target="_blank">Create a preview</a> to get started.</p>
+      <% end %>
+    </div>
   </div>
 </div>

data/app/views/lookbook/previews/panels/_notes.html.erb

@@ -11,7 +11,7 @@
     <% end %>
   </div>
 <% else %>
-  <div class="p-4 bg-lookbook-prose-bg w-full h-full">
+  <div class="px-4 py-6 bg-lookbook-prose-bg w-full h-full">
     <%= render_component :prose do %>
       <%== items.any? ? items.first.notes : "<em class='opacity-50'>No notes provided.</em>" %>
     <% end %>

data/app/views/lookbook/previews/show.html.erb

@@ -55,7 +55,7 @@
     <div class="h-full relative overflow-auto">
       <%= render_component :tab_panels, alpine_data: "$store.inspector.main" do |tabs| %>
         <% @main_panels.each do |panel| %>
-          <% tabs.panel id: panel.id, name: panel.name, class: [panel.panel_classes, { "p-4": panel.padded, "prose": panel.prose }] do %>
+          <% tabs.panel id: panel.id, name: panel.name, class: panel.panel_classes do %>
             <%= render panel.partial, **@inspector_data, panel: panel, **panel.locals %>
           <% end %>
         <% end %>
@@ -123,7 +123,7 @@
     <div class="h-full overflow-auto">
       <%= render_component :tab_panels, alpine_data: "$store.inspector.drawer" do |tabs| %>
         <% @drawer_panels.each do |panel| %>
-          <% tabs.panel id: panel.id, name: panel.name, class: [panel.panel_classes, { "p-4": panel.padded, "prose": panel.prose }]  do %>
+          <% tabs.panel id: panel.id, name: panel.name, class: panel.panel_classes  do %>
             <%= render_component :inspector_panel, **panel.slice(:id, :name, :system) do %>
               <%= render panel.partial, **@inspector_data, panel: panel, **panel.locals %>
             <% end %>

data/lib/lookbook/code_formatter.rb

@@ -1,6 +1,6 @@
 require "rouge"
 require "htmlbeautifier"
-require 'htmlentities'
+require "htmlentities"
 
 module Lookbook
   module CodeFormatter

data/lib/lookbook/collection.rb

@@ -10,7 +10,7 @@ module Lookbook
         items = path
         path = ""
       end
-      
+
       @path = path.delete_prefix("/").delete_suffix("/")
       super(@path)
 
@@ -37,6 +37,10 @@ module Lookbook
       @items.sort_by { |item| [item.hierarchy_depth, item&.position, item.label] }
     end
 
+    def clear
+      @items = []
+    end
+
     def visible_items
       reject { |i| i.hidden? }
     end
@@ -68,14 +72,15 @@ module Lookbook
 
     def find(lookup = nil, &block)
       if lookup
-        lookup.is_a?(Symbol) ? find_by_id(lookup.to_s.tr("_", "-")) : find_by_path(lookup)
+        lookup.is_a?(Symbol) ? find_by_id(lookup) : find_by_path(lookup)
       elsif block
         items.find(&block)
       end
     end
 
     def find_by_id(id)
-      items.find { |i| i.id == id }
+      id = id.to_s.tr("_", "-")
+      items.find { |i| i.id.to_s == id }
     end
 
     def find_by_path(path)

data/lib/lookbook/component.rb

@@ -1,13 +1,12 @@
 module Lookbook
   class Component < Entity
-
     attr_accessor :name
 
     def initialize(name)
       @name = name
       super(path)
     end
-    
+
     def path
       name.underscore
     end
@@ -28,4 +27,4 @@ module Lookbook
       template_path.present?
     end
   end
-end
+end