lookbook 1.0.0.beta.2 → 1.0.0.beta.5

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

@@ -1,16 +1,22 @@
-<%= render_component_tag :li, id: @item.id, class: "list-none", "x-show": "!filteredOut", cloak: true do %>
-  
+<%= render_component_tag :li,
+  id: id,
+  class: "list-none",
+  "x-show": "!filteredOut",
+  data: {
+    "entity-type": item.type
+  },
+  cloak: true do %>
   <%= render_tag href.present? ? :a : :div,
     href: href,
     class: "flex items-center py-1 select-none cursor-pointer text-lookbook-nav-text hover:bg-lookbook-nav-item-hover",
     style: "padding-left: #{left_pad}px",
-    x_bind: "bindings.#{href.present? ? "link" : "toggle"}" do %>
+    "x-bind": "bindings.#{href.present? ? "link" : "toggle"}" do %>
     <div class="relative flex items-center">
-      <%= render_component :icon, name: nil,
+      <%= icon nil,
         size: 3,
         class: "mr-1 text-lookbook-nav-toggle absolute -left-4",
-        x_effect: "iconName = open ? 'chevron-down' : 'chevron-right'" if children? %>
-      <%= render_component :icon, name: nav_icon(@item), size: 3.5, class: "mr-1.5 text-lookbook-nav-icon" %>
+        "x-effect": "iconName = open ? 'chevron-down' : 'chevron-right'" if children? %>
+      <%= icon nav_icon, size: 3.5, class: "mr-1.5 text-lookbook-nav-icon" %>
       <span><%= label %></span>
     </div>
   <% end %>

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

@@ -1,5 +1,5 @@
 module Lookbook
-  class Nav::Item::Component < Lookbook::Component
+  class Nav::Item::Component < Lookbook::BaseComponent
     ICONS = {
       page: :file,
       page_collection: :folder,
@@ -14,16 +14,22 @@ module Lookbook
 
     def initialize(
       item,
+      nav_id:,
       depth: 1,
       collapse_singles: false,
       **html_attrs
     )
+      @nav_id = nav_id
       @item = item
       @depth = depth
       @collapse_singles = collapse_singles
       super(**html_attrs)
     end
 
+    def id
+      "#{@nav_id}-#{@item.id}"
+    end
+
     def left_pad
       ((@depth - 1) * 12) + 24
     end
@@ -40,6 +46,7 @@ module Lookbook
       @children ||= if collection? && !collapsed?
         item.non_empty_items.map do |item|
           render Lookbook::Nav::Item::Component.new item,
+            nav_id: @nav_id,
             depth: (@depth + 1),
             collapse_singles: @collapse_singles
         end
@@ -52,8 +59,8 @@ module Lookbook
       collapsed? ? @item.first : @item
     end
 
-    def nav_icon(entity)
-      ICONS[entity.type] || :file
+    def nav_icon
+      ICONS[@item.type] || :file
     end
 
     def collection?

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

@@ -1,4 +1,4 @@
- <%= render_component_tag x_data: "{ activeTab: null }" do %>
+ <%= render_component_tag "x-data": "{ activeTab: null }" do %>
   <div class="flex w-full border-b border-lookbook-divider mb-6">
     <%= render_component :tabs, theme: :page do |t| %>
       <% @tabs.each do |props| %>

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

@@ -1,5 +1,5 @@
 module Lookbook
-  class PageTabs::Component < Lookbook::Component
+  class PageTabs::Component < Lookbook::BaseComponent
     renders_many :tabs, ->(**attrs, &block) do
       @tabs ||= []
       attrs[:content] = capture(&block)

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

@@ -1,5 +1,5 @@
 module Lookbook
-  class ParamsEditor::Component < Lookbook::Component
+  class ParamsEditor::Component < Lookbook::BaseComponent
     renders_many :fields, Lookbook::ParamsEditor::Field::Component
 
     protected

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

@@ -1,5 +1,5 @@
 module Lookbook
-  class ParamsEditor::Field::Component < Lookbook::Component
+  class ParamsEditor::Field::Component < Lookbook::BaseComponent
     def initialize(input:, name:, default: nil, value: nil, input_type: nil, type: nil, options: nil, **html_attrs)
       @input = input
       @name = name

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

@@ -1,5 +1,5 @@
 module Lookbook
-  class Prose::Component < Lookbook::Component
+  class Prose::Component < Lookbook::BaseComponent
     include Lookbook::OutputHelper
 
     def initialize(size: :md, markdown: true, **html_attrs)

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

@@ -1,4 +1,4 @@
-<%= render_component_tag class: "grid h-full w-full", x_bind: "bindings.root", x_effect: "initSplit" do %>
+<%= render_component_tag class: "grid h-full w-full", "x-bind": "bindings.root", "x-effect": "initSplit" do %>
   <% panes.each.with_index(1) do |pane, i| %>
     <%= pane %>
     <% if i < panes.size %>

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

@@ -1,5 +1,5 @@
 module Lookbook
-  class SplitLayout::Component < Lookbook::Component
+  class SplitLayout::Component < Lookbook::BaseComponent
     renders_many :panes, Lookbook::TagComponent
 
     protected

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

@@ -1,5 +1,5 @@
 module Lookbook
-  class TabPanels::Component < Lookbook::Component
+  class TabPanels::Component < Lookbook::BaseComponent
     renders_many :panels, ->(**attrs) do
       @panel_counter += 1
       attrs[:name] ||= "tab-#{@panel_counter}"

data/app/components/lookbook/tab_panels/panel/component.html.erb

@@ -1,7 +1,7 @@
 <%= render_component_tag :section,
   id: @id,
-  x_ref: @name,
-  x_cloak: true,
+  "x-ref": @name,
+  cloak: true,
   class: "h-full",
   ":class": "{ hidden: !isActive($el) }" do %>
     <%== content %>

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

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

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

@@ -9,8 +9,8 @@
     <%= safe_join(tabs) %>
   </div>
   <div x-ref="dropdownTrigger" class="absolute" x-show="hasHiddenTabs" :style="{left: `${triggerLeft}px`}">
-    <%= render_component :button, icon: :chevrons_right, x_show: "visibleTabsCount > 0" %>
-    <%= render_component :button, icon: :menu, class: "-ml-3", x_show: "visibleTabsCount === 0" %>
+    <%= render_component :button, icon: :chevrons_right, "x-show": "visibleTabsCount > 0" %>
+    <%= render_component :button, icon: :menu, class: "-ml-3", "x-show": "visibleTabsCount === 0" %>
   </div>
   <div class="hidden">
     <div x-ref="tabsDropdown" data-cloak>

data/app/components/lookbook/tabs/component.js

@@ -16,7 +16,7 @@ export default function tabsComponent(store) {
     },
 
     get tabs() {
-      return Array.from(this.$refs.tabs.children);
+      return this.$refs.tabs ? Array.from(this.$refs.tabs.children) : [];
     },
 
     get dropdownTabs() {
@@ -45,7 +45,7 @@ export default function tabsComponent(store) {
         const initialTab = initial
           ? this.tabs.find((t) => this._getRef(t) === initial)
           : this.tabs[0];
-        this.selectTab(initialTab);
+        this.selectTab(initialTab, true);
 
         this.parentObserver = observeSize(
           this.$root.parentElement,
@@ -64,13 +64,10 @@ export default function tabsComponent(store) {
       }
 
       if (width === this.$root.offsetWidth) {
-        console.log("uep");
         this.visibleTabsCount = this.tabs.length;
         return;
       }
 
-      console.log(width);
-
       let sumTabWidths = 60;
       let triggerLeft = 20;
       let visibleTabsCount = 0;
@@ -87,9 +84,12 @@ export default function tabsComponent(store) {
       this._lastMeasuredWidth = width;
     },
 
-    selectTab(el) {
+    selectTab(el, initial = false) {
       this.store.activeTab = this._getRef(el);
       dropdown.hide();
+      if (!initial) {
+        this.$dispatch("tabs:change", { tabs: this });
+      }
     },
 
     isSelected(el) {

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

@@ -1,5 +1,5 @@
 module Lookbook
-  class Tabs::Component < Lookbook::Component
+  class Tabs::Component < Lookbook::BaseComponent
     renders_many :tabs, ->(**attrs) do
       @tab_counter += 1
       attrs[:name] ||= "tab-#{@tab_counter}"

data/app/components/lookbook/tabs/dropdown_tab/component.html.erb

@@ -1,5 +1,5 @@
 <%= render_component_tag :button,
-  x_ref: @name,
+  "x-ref": @name,
   class: [
     "whitespace-nowrap px-4 border-l-2 cursor-pointer block w-full text-left",
     {

data/app/components/lookbook/tabs/dropdown_tab/component.rb

@@ -1,5 +1,5 @@
 module Lookbook
-  class Tabs::DropdownTab::Component < Lookbook::Component
+  class Tabs::DropdownTab::Component < Lookbook::BaseComponent
     def initialize(name:, label: nil, hotkey: nil, disabled: nil, position: 0, theme: :toolbar, **html_attrs)
       @name = name
       @label = label

data/app/components/lookbook/tabs/tab/component.html.erb

@@ -1,6 +1,6 @@
 <%= render_component_tag :button,
   id: @id,
-  x_ref: @name,
+  "x-ref": @name,
   class: [
     "whitespace-nowrap cursor-pointer pt-2.5 pb-1.5 border-b-2",
     {

data/app/components/lookbook/tabs/tab/component.rb

@@ -1,5 +1,5 @@
 module Lookbook
-  class Tabs::Tab::Component < Lookbook::Component
+  class Tabs::Tab::Component < Lookbook::BaseComponent
     def initialize(name:, label: nil, hotkey: nil, disabled: nil, position: 0, theme: :toolbar, **html_attrs)
       @name = name
       @label = label

data/app/components/lookbook/tag_component.rb

@@ -4,26 +4,21 @@ module Lookbook
 
     def initialize(tag: :div, name: nil, cloak: false, **html_attrs)
       @tag = tag
-      html_attrs[:class] = class_names(html_attrs[:class]) if html_attrs[:class]
       html_attrs[:data] ||= {}
       html_attrs[:data][:component] = name if name.present?
-      html_attrs[:x_cloak] = true if cloak == true
-      @html_attrs = convert_attrs(html_attrs)
+      html_attrs["x-cloak"] = true if cloak == true
+      html_attrs[self.class.escape_attribute_key] = false
+      @html_attrs = html_attrs
     end
 
     def call
-      @html_attrs[Rails.version.to_f < 7.0 ? :escape_attributes : :escape] = false
       tag.public_send(@tag, **@html_attrs) do
         content
       end
     end
 
-    protected
-
-    def convert_attrs(html_attrs)
-      html_attrs.map do |name, value|
-        [name.to_s.tr("_", "-"), value]
-      end.to_h
+    def self.escape_attribute_key
+      @escape_attribute_key ||= Gem::Version.new(Rails.version) < Gem::Version.new('6.1.5.1') ? :escape_attributes : :escape
     end
   end
 end

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

@@ -1,5 +1,5 @@
 module Lookbook
-  class Toolbar::Component < Lookbook::Component
+  class Toolbar::Component < Lookbook::BaseComponent
     DIVIDE_CLASSES = {
       left: "border-l",
       right: "border-r"

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

@@ -1,5 +1,5 @@
 module Lookbook
-  class Viewport::Component < Lookbook::Component
+  class Viewport::Component < Lookbook::BaseComponent
     def initialize(src:, resize_height: true, resize_width: true, max_height: nil, **html_attrs)
       @src = src
       @resize_height = resize_height

data/app/controllers/lookbook/application_controller.rb

@@ -17,7 +17,7 @@ module Lookbook
       if landing.present?
         redirect_to lookbook_page_path(landing.lookup_path)
       else
-        render "lookbook/index", layout: Lookbook.previews.any? ? "lookbook/application" : "lookbook/shell"
+        render "lookbook/index"
       end
     end
 

data/app/controllers/lookbook/previews_controller.rb

@@ -117,41 +117,36 @@ module Lookbook
     def inspector_data
       return @inspector_data if @inspector_data.present?
 
-      request_data = {
+      context_data = {
         preview_params: preview_params,
         path: params[:path],
-        query_parameters: request.query_parameters,
-        original: request
       }
 
-      preview_data = {
-        relative_path: @preview.full_path.relative_path_from(Rails.root.to_s),
-        full_path: @preview.full_path,
-        example_label: @example.label,
-        params: @example.params,
-      }
-      [:id, :label, :notes, :lookup_path, :full_path].each do |prop|
-        preview_data[prop] = @preview.public_send(prop)
-      end
+      example = @example
+      preview = @preview
+      preview.define_singleton_method(:params, proc {
+        example.params
+      })
 
-      examples_data = target_examples.map do |example|
+      examples = target_examples.map do |example|
         render_args = @preview.render_args(example.name, params: preview_controller.params)
         has_template = render_args[:template] != "view_components/preview"
-        example_data = Lookbook::Store.new({
-          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.source_lang,
-        })
-        [:id, :label, :notes, :lookup_path, :params, :display_params].each do |prop|
-          example_data[prop] = example.public_send(prop)
-        end
-        example_data
+        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 })
+        example
       end
 
       @inspector_data ||= Lookbook::Store.new({
-        request: request_data,
-        preview: preview_data,
-        examples: examples_data
+        context: context_data,
+        preview: preview,
+        examples: examples,
+        components: preview.components,
+        app: Lookbook
       })
     end
 
@@ -163,7 +158,7 @@ module Lookbook
 
         callable_data = {
           name: name.to_s,
-          index_position: (@panels.filter { |p| p.pane == config.pane }.size + 1),
+          index_position: (@panels.select { |p| p.pane == config.pane }.size + 1),
           **inspector_data
         }
 
@@ -175,15 +170,15 @@ module Lookbook
         @panels << Lookbook::Store.new(resolved_config, deep: false)
       end
 
-      @panels.filter(&:show).sort_by { |p| [p.position, p.label] }
+      @panels = @panels.select(&:show).sort_by { |p| [p.position, p.label] }
     end
    
     def main_panels
-      panels.filter { |panel| panel.pane == :main }
+      panels.select { |panel| panel.pane == :main }
     end
 
     def drawer_panels
-      panels.filter { |panel| panel.pane == :drawer }
+      panels.select { |panel| panel.pane == :drawer }
     end
 
     def preview_controller

data/app/helpers/lookbook/application_helper.rb

@@ -20,5 +20,11 @@ module Lookbook
     def generate_id(*args)
       args.map { |args| args.delete_prefix("/").tr("&?=/_\-", "-") }.join("-")
     end
+
+    def append_styles(&block)
+      content_for :styles do
+        capture(&block)
+      end
+    end
   end
 end

data/app/helpers/lookbook/component_helper.rb

@@ -2,6 +2,10 @@ module Lookbook
   module ComponentHelper
     COMPONENT_CLASSES = {} # cache for constantized references
 
+    def icon(name, **attrs)
+      render Lookbook::Icon::Component.new(name: name, **attrs)
+    end
+
     def render_component(ref, **attrs, &block)
       klass = component_class(ref)
       comp = attrs.key?(:content) ? klass.new(**attrs.except(:content)).with_content(attrs[:content]) : klass.new(**attrs)

data/app/helpers/lookbook/page_helper.rb

@@ -16,7 +16,7 @@ module Lookbook
 
       @embed_counter ||= 0
 
-      preview_lookup = args.first.is_a?(Symbol) ? args.first : preview_class_name(args.first)
+      preview_lookup = args.first.is_a?(Symbol) ? args.first : preview_class_path(args.first)
       preview = Lookbook.previews.find(preview_lookup)
       example = args[1] ? preview&.example(args[1]) : preview&.default_example
 

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

@@ -1,76 +1,94 @@
 <% content_for :shell do %>
-  <%= render_component :split_layout,
-    alpine_data: "$store.layout.main",
-    ":class": "$store.layout.mobile && '!block'" do |layout| %>
+  <% if Lookbook.previews? || Lookbook.pages? %>
+    <%= render_component :split_layout,
+      alpine_data: "$store.layout.main",
+      ":class": "$store.layout.mobile && '!block'" do |layout| %>
 
-    <% layout.pane class: "flex flex-col bg-lookbook-sidebar relative translate-x-0",
-      ":class": "{
-        'transition': $store.layout.mobile,
-        'translate-x-full': $store.layout.mobile && sidebarHidden,
-        '!absolute right-0 bottom-0 top-[40px] h-[calc(100%_-_40px)] w-full max-w-[420px] z-50 border-l border-lookbook-divider': $store.layout.mobile
-      }",
-      "@click.outside": "closeMobileSidebar",
-      x_cloak: true do %>
+      <% layout.pane id: "app-sidebar", class: "flex flex-col bg-lookbook-sidebar relative translate-x-0",
+        ":class": "{
+          'transition': $store.layout.mobile,
+          'translate-x-full': $store.layout.mobile && sidebarHidden,
+          '!absolute right-0 bottom-0 top-[40px] h-[calc(100%_-_40px)] w-full max-w-[420px] z-50 border-l border-lookbook-divider': $store.layout.mobile
+        }",
+        "@click.outside": "closeMobileSidebar",
+        cloak: true do %>
 
-      <%= render_component :split_layout,
-        alpine_data: "$store.layout.#{Lookbook.pages.any? ? "sidebar" : "singleSectionSidebar"}",
-        style: "height: calc(100vh - 2.5rem);" do |layout| %>
-        <% layout.pane class: "overflow-hidden" do %>
-          <%= render_component :nav,
-            collection: Lookbook.previews,
-            alpine_data: "$store.nav.previews",
-            label: "Previews",
-            collapse_singles: true do |nav| %>
-            <% nav.filter store: "$store.nav.previews.filter", placeholder: "Filter by preview name&hellip;" %>
+        <%= render_component :split_layout,
+          alpine_data: "$store.layout.#{Lookbook.pages? && Lookbook.previews? ? "sidebar" : "singleSectionSidebar"}",
+          style: "height: calc(100vh - 2.5rem);" do |layout| %>
+
+          <% if Lookbook.previews? %>
+            <% layout.pane class: "overflow-hidden" do %>
+              <%= render_component :nav,
+                id: "previews-nav",
+                collection: Lookbook.previews,
+                alpine_data: "$store.nav.previews",
+                collapse_singles: true do |nav| %>
+                <%= nav.toolbar do |toolbar| %>
+                  <% toolbar.section padded: true do %>
+                    <h4 class="pt-1">Previews</h4>
+                  <% end %>
+                <% end %>
+                <% nav.filter store: "$store.nav.previews.filter", placeholder: "Filter previews by name&hellip;" %>
+              <% end %>
+            <% end %>
           <% end %>
-        <% end %>
 
-        <% if Lookbook.pages.any? %>
-          <% layout.pane class: "overflow-hidden" do %>
-            <%= render_component :nav,
-              collection: Lookbook.pages,
-              alpine_data: "$store.nav.pages",
-              label: "Pages" %>
+          <% if Lookbook.pages? %>
+            <% layout.pane class: "overflow-hidden" do %>
+              <%= render_component :nav,
+                id: "pages-nav",
+                collection: Lookbook.pages,
+                alpine_data: "$store.nav.pages" do |nav| %>
+                <%= nav.toolbar do |toolbar| %>
+                  <% toolbar.section padded: true do %>
+                    <h4 class="pt-1">Pages</h4>
+                  <% end %>
+                <% end %>
+              <% end %>
+            <% end %>
           <% end %>
         <% end %>
 
-      <% end %>
-
-      <% if Lookbook::Preview.errors.any? %>
-        <div x-data="{hidden: false}" class="flex-none border-t border-lookbook-divider absolute bottom-0 left-0 right-0" x-show="!hidden">
-          <%= render_component :toolbar do |toolbar| %>
-            <% toolbar.section padded: true, class: "flex items-center" do %>
-              <%= render_component :icon, name: :alert_triangle, size: 4, class: "text-red-700" %>
-              <span class="ml-2">Preview load errors</span>
-            <% end %>
-            <% toolbar.section align: :right do %>
-              <% render_component :button, icon: :x, "@click": "hidden = !hidden" %>
+        <% if Lookbook::Preview.errors.any? %>
+          <div x-data="{hidden: false}" class="flex-none border-t border-lookbook-divider absolute bottom-0 left-0 right-0" x-show="!hidden">
+            <%= render_component :toolbar do |toolbar| %>
+              <% toolbar.section padded: true, class: "flex items-center" do %>
+                <%= icon  :alert_triangle, size: 4, class: "text-red-700" %>
+                <span class="ml-2">Preview load errors</span>
+              <% end %>
+              <% toolbar.section align: :right do %>
+                <% render_component :button, icon: :x, "@click": "hidden = !hidden" %>
+              <% end %>
             <% end %>
-          <% end %>
 
-          <div class="h-full max-h-[300px] overflow-hidden">
-            <div class="bg-red-50 w-full overflow-auto h-full">
-              <ul class="text-sm divide-y divide-red-200">
-                <% Lookbook::Preview.errors.each do |error| %>
-                  <% error = error.is_a?(Lookbook::Error) ? error : Lookbook::Error.new(error) %>
-                  <li class="px-4 py-3">
-                    <h4 class="break-all leading-tight text-xs ">
-                      <%= error.file_name %><%= ":#{error.line_number}" if error.line_number %>
-                    </h4>
-                    <pre class="text-red-800 text-xs mt-2 whitespace-pre-wrap opacity-80 font-mono"><%= error.message %></pre>
-                  </li>
-                <% end %>
-              </ul>
+            <div class="h-full max-h-[300px] overflow-hidden">
+              <div class="bg-red-50 w-full overflow-auto h-full">
+                <ul class="text-sm divide-y divide-red-200">
+                  <% Lookbook::Preview.errors.each do |error| %>
+                    <% error = error.is_a?(Lookbook::Error) ? error : Lookbook::Error.new(error) %>
+                    <li class="px-4 py-3">
+                      <h4 class="break-all leading-tight text-xs ">
+                        <%= error.file_name %><%= ":#{error.line_number}" if error.line_number %>
+                      </h4>
+                      <pre class="text-red-800 text-xs mt-2 whitespace-pre-wrap opacity-80 font-mono"><%= error.message %></pre>
+                    </li>
+                  <% end %>
+                </ul>
+              </div>
             </div>
           </div>
-        </div>
+        <% end %>
       <% end %>
-    <% end %>
 
-    <% layout.pane class: "overflow-hidden", ":class": "$store.layout.mobile && 'w-screen'" do %>
-      <%= content_for?(:main) ? yield(:main) : yield %>
+      <% layout.pane id: "app-main", class: "overflow-hidden h-full", ":class": "$store.layout.mobile && 'w-screen'" do %>
+        <%= content_for?(:main) ? yield(:main) : yield %>
+      <% end %>
     <% end %>
-
+  <% else %>
+    <div id="app-main" class="w-screen h-full overflow-hidden">
+      <%= content_for?(:main) ? yield(:main) : yield %>
+    </div>
   <% end %>
   <div class="absolute opacity-0 bg-black inset-0 top-[39px] z-[-1] transition-opacity" :class="($store.layout.mobile && !sidebarHidden) && '!opacity-30 !z-40'" data-cloak></div>
 <% end %>