lookbook 1.0.0.beta.0 → 1.0.0.beta.3

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

@@ -0,0 +1,25 @@
+export default function tabPanelsComponent(store) {
+  return {
+    get store() {
+      return store || this;
+    },
+
+    get id() {
+      return this.$root.id;
+    },
+
+    get panels() {
+      return Array.from(this.$refs.panels.children);
+    },
+
+    isActive(el) {
+      return this.store.activeTab === this._getRef(el);
+    },
+
+    // protected
+
+    _getRef(el) {
+      return el.getAttribute("x-ref");
+    },
+  };
+}

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

@@ -0,0 +1,20 @@
+module Lookbook
+  class TabPanels::Component < Lookbook::BaseComponent
+    renders_many :panels, ->(**attrs) do
+      @panel_counter += 1
+      attrs[:name] ||= "tab-#{@panel_counter}"
+      Lookbook::TabPanels::Panel::Component.new **attrs
+    end
+
+    def initialize(**html_attrs)
+      @panel_counter = 0
+      super(**html_attrs)
+    end
+
+    protected
+
+    def alpine_component
+      "tabPanelsComponent"
+    end
+  end
+end

data/app/components/lookbook/{tabbed_content/section → tab_panels/panel}/component.html.erb

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

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

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

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

@@ -1,5 +1,11 @@
-<%= render_component_tag class: "px-4 flex items-center relative" do %>
-  <div x-ref="tabs" class="flex items-stretch h-10 space-x-6 select-none min-w-0">
+<%= render_component_tag class: "flex items-center relative" do %>
+  <div x-ref="tabs" class="<%= class_names [
+    "flex items-stretch select-none min-w-0",
+    {
+      "h-10 space-x-6": @theme == :toolbar,
+      "space-x-3": @theme == :page,
+    }
+  ] %>">
     <%= safe_join(tabs) %>
   </div>
   <div x-ref="dropdownTrigger" class="absolute" x-show="hasHiddenTabs" :style="{left: `${triggerLeft}px`}">

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

@@ -4,15 +4,19 @@ import { observeSize } from "@helpers/layout";
 import { getElementSize } from "@helpers/dom";
 
 export default function tabsComponent(store) {
-  const initial = store.activeTab || null;
+  const initial = store ? store.activeTab : null;
   let dropdown = null;
   return {
     visibleTabsCount: 0,
 
     triggerLeft: 0,
 
+    get store() {
+      return store || this;
+    },
+
     get tabs() {
-      return Array.from(this.$refs.tabs.children);
+      return this.$refs.tabs ? Array.from(this.$refs.tabs.children) : [];
     },
 
     get dropdownTabs() {
@@ -34,13 +38,14 @@ export default function tabsComponent(store) {
           theme: "menu",
           interactive: true,
           trigger: "click",
+          placement: "bottom",
           appendTo: this.$root,
         });
 
         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,
@@ -79,13 +84,16 @@ export default function tabsComponent(store) {
       this._lastMeasuredWidth = width;
     },
 
-    selectTab(el) {
-      store.activeTab = this._getRef(el);
+    selectTab(el, initial = false) {
+      this.store.activeTab = this._getRef(el);
       dropdown.hide();
+      if (!initial) {
+        this.$dispatch("tabs:change", { tabs: this });
+      }
     },
 
     isSelected(el) {
-      return store.activeTab === this._getRef(el);
+      return this.store.activeTab === this._getRef(el);
     },
 
     isDisabled(el) {

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

@@ -1,22 +1,20 @@
 module Lookbook
-  class Tabs::Component < Lookbook::Component
-    renders_many :tabs, ->(ref: nil, **attrs) do
+  class Tabs::Component < Lookbook::BaseComponent
+    renders_many :tabs, ->(**attrs) do
       @tab_counter += 1
-      ref ||= "tab-#{@tab_counter}"
-      attrs = {
-        ref: ref,
-        position: @tab_counter,
-        **attrs
-      }
+      attrs[:name] ||= "tab-#{@tab_counter}"
+      attrs[:position] ||= @tab_counter
+      attrs[:theme] ||= @theme
       dropdown_tab(**attrs)
       Lookbook::Tabs::Tab::Component.new(**attrs)
     end
 
-    renders_many :dropdown_tabs, ->(ref:, **attrs) do
-      Lookbook::Tabs::DropdownTab::Component.new(ref: "dropdown-#{ref}", **attrs)
+    renders_many :dropdown_tabs, ->(name:, **attrs) do
+      Lookbook::Tabs::DropdownTab::Component.new(name: "dropdown-#{name}", **attrs)
     end
 
-    def initialize(**html_attrs)
+    def initialize(theme: :toolbar, **html_attrs)
+      @theme = theme
       @tab_counter = 0
       super(**html_attrs)
     end

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

@@ -1,6 +1,12 @@
 <%= render_component_tag :button,
-  x_ref: @ref,
-  class: "whitespace-nowrap px-4 py-2 border-l-2 cursor-pointer block w-full text-left",
+  x_ref: @name,
+  class: [
+    "whitespace-nowrap px-4 border-l-2 cursor-pointer block w-full text-left",
+    {
+      "py-2": @theme == :toolbar,
+      "py-2 text-base": @theme == :page,
+    }
+  ],
   ":class": "{
     'border-lookbook-tabs-highlight': isSelected($el),
     'border-transparent text-lookbook-tabs-text hover:text-lookbook-tabs-text-hover': !isSelected($el),

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

@@ -1,16 +1,17 @@
 module Lookbook
-  class Tabs::DropdownTab::Component < Lookbook::Component
-    def initialize(ref:, label: nil, hotkey: nil, disabled: nil, position: 0, **html_attrs)
-      @ref = ref
+  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
       @hotkey = hotkey
       @disabled = disabled
       @position = position
+      @theme = theme
       super(**html_attrs)
     end
 
     def label
-      @label.presence || content
+      @label.presence || content || @name.titleize
     end
   end
 end

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

@@ -1,7 +1,13 @@
 <%= render_component_tag :button,
   id: @id,
-  x_ref: @ref,
-  class: "whitespace-nowrap pt-2.5 pb-1.5 px-1 border-b-2 cursor-pointer",
+  x_ref: @name,
+  class: [
+    "whitespace-nowrap cursor-pointer pt-2.5 pb-1.5 border-b-2",
+    {
+      "px-1": @theme == :toolbar,
+      "px-2 text-lg relative -bottom-px": @theme == :page,
+    }
+  ],
   ":class": "{
     'border-lookbook-tabs-highlight': isSelected($el),
     'border-transparent text-lookbook-tabs-text hover:text-lookbook-tabs-text-hover': !isSelected($el),
@@ -14,5 +20,5 @@
     disabled: @disabled
   },
   cloak: true do %>
-  <%= label %>
+  <%== label %>
 <% end %>

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

@@ -1,16 +1,17 @@
 module Lookbook
-  class Tabs::Tab::Component < Lookbook::Component
-    def initialize(ref:, label: nil, hotkey: nil, disabled: nil, position: 0, **html_attrs)
-      @ref = ref
+  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
       @hotkey = hotkey
       @disabled = disabled
       @position = position
+      @theme = theme
       super(**html_attrs)
     end
 
     def label
-      @label.presence || content
+      @label.presence || content || @name.titleize
     end
   end
 end

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

@@ -10,7 +10,7 @@
     }
 
     & [data-component="tabs"] {
-      @apply relative -mb-px;
+      @apply relative -mb-px px-4;
     }
   }
 }

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

@@ -15,7 +15,7 @@ module Lookbook
     def index
       landing = Lookbook.pages.find(&:landing) || Lookbook.pages.first
       if landing.present?
-        redirect_to page_path(landing.lookup_path)
+        redirect_to lookbook_page_path(landing.lookup_path)
       else
         render "lookbook/index", layout: Lookbook.previews.any? ? "lookbook/application" : "lookbook/shell"
       end
@@ -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.new(Lookbook.config.ui_theme_overrides).to_css
     end
 
     def feature_enabled?(feature)

data/app/controllers/lookbook/pages_controller.rb

@@ -1,6 +1,7 @@
 module Lookbook
   class PagesController < ApplicationController
     layout "lookbook/page"
+    helper_method :page_controller
 
     def self.controller_path
       "lookbook/pages"
@@ -9,7 +10,7 @@ module Lookbook
     def index
       landing = Lookbook.pages.find(&:landing) || Lookbook.pages.first
       if landing.present?
-        redirect_to page_path landing.lookup_path
+        redirect_to lookbook_page_path landing.lookup_path
       else
         show_404
       end

data/app/controllers/lookbook/previews_controller.rb

@@ -8,12 +8,17 @@ module Lookbook
 
     before_action :lookup_entities, only: [:preview, :show]
     before_action :set_title
+    before_action :set_params
 
     def preview
       if @example
-        set_params
         begin
-          render html: render_examples(examples_data)
+          opts = {layout: @preview.layout}
+          if params[:lookbook_embed] == "true"
+            opts[:append_html] = "<script src=\"/lookbook-assets/js/embed.js?v=#{Lookbook.version}\"></script>".html_safe
+          end
+          preview_html = preview_controller.process(:render_in_layout_to_string, "lookbook/preview", inspector_data, **opts)
+          render html: preview_html
         rescue => exception
           render_in_layout "lookbook/error",
             layout: "lookbook/standalone",
@@ -27,10 +32,8 @@ module Lookbook
     def show
       if @example
         begin
-          set_params
-          @rendered_examples = examples_data
-          @drawer_panels = drawer_panels.filter { |name, panel| panel[:show] }
-          @preview_panels = preview_panels.filter { |name, panel| panel[:show] }
+          @main_panels = main_panels
+          @drawer_panels = drawer_panels
         rescue => exception
           render_in_layout "lookbook/error", layout: "lookbook/inspector", error: prettify_error(exception)
         end
@@ -41,7 +44,7 @@ module Lookbook
 
     def show_legacy
       Lookbook.logger.warn("Legacy URL path detected. These paths are deprecated and will be removed in a future version")
-      redirect_to inspect_path params[:path]
+      redirect_to lookbook_inspect_path params[:path]
     end
 
     private
@@ -51,13 +54,13 @@ module Lookbook
       if @example.present?
         @preview = @example.preview
         if params[:path] == @preview&.lookup_path
-          redirect_to inspect_path "#{params[:path]}/#{@preview.default_example.name}"
+          redirect_to lookbook_inspect_path "#{params[:path]}/#{@preview.default_example.name}"
         end
       else
         @preview = Lookbook.previews.find(params[:path])
         if @preview.present?
           first_example = @preview.examples.first
-          redirect_to inspect_path(first_example.lookup_path) if first_example
+          redirect_to lookbook_inspect_path(first_example.lookup_path) if first_example
         else
           @preview = Lookbook.previews.find(path_segments.slice(0, path_segments.size - 1).join("/"))
         end
@@ -79,107 +82,103 @@ module Lookbook
       render_in_layout "lookbook/404", layout: layout, **locals
     end
 
+    def target_examples
+      @example.type == :group ? @example.examples : [@example]
+    end
+
     def set_title
       @title = @example.present? ? [@example&.label, @preview&.label].compact.join(" :: ") : "Not found"
     end
 
-    def examples_data
-      @examples_data ||= (@example.type == :group ? @example.examples : [@example]).map do |example|
-        example_data(example)
+    def set_params
+      if @example
+        # cast known params to type
+        @example.params.each do |param|
+          if preview_controller.params.key?(param[:name])
+            preview_controller.params[param[:name]] = Lookbook::Params.cast(preview_controller.params[param[:name]], param[:type])
+          end
+        end
+        # set display params
+        preview_controller.params.merge!({
+          lookbook: {
+            display: @example.display_params
+          }
+        })
       end
     end
 
-    def example_data(example)
-      render_args = @preview.render_args(example.name, params: preview_controller.params.permit!)
-      has_template = render_args[:template] != "view_components/preview"
-      {
-        label: example.label,
-        notes: example.notes,
-        html: 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,
-        params: example.params,
-        display: example.display_params
-      }
-    end
-
-    def render_examples(examples)
-      opts = {layout: @preview.layout}
-      if params[:lookbook_embed] == "true"
-        opts[:append_html] = "<script src=\"/lookbook-assets/js/embed.js?v=#{Lookbook.version}\"></script>".html_safe
+    def preview_params
+      preview_controller.params.permit!
+      preview_controller.params.to_h.select do |key, value|
+        !!@example.params.find { |param| param[:name] == key }
       end
-      preview_controller.process(:render_in_layout_to_string, "lookbook/preview", {examples: examples}, **opts)
     end
 
-    def set_params
-      # cast known params to type
-      @example.params.each do |param|
-        if preview_controller.params.key?(param[:name])
-          preview_controller.params[param[:name]] = Lookbook::Params.cast(preview_controller.params[param[:name]], param[:type])
-        end
+    def inspector_data
+      return @inspector_data if @inspector_data.present?
+
+      context_data = {
+        preview_params: preview_params,
+        path: params[:path],
+      }
+
+      example = @example
+      preview = @preview
+      preview.define_singleton_method(:params, proc {
+        example.params
+      })
+
+      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"
+        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
 
-      # set display params
-      preview_controller.params.merge!({
-        lookbook: {
-          display: @example.display_params
-        }
+      @inspector_data ||= Lookbook::Store.new({
+        context: context_data,
+        preview: preview,
+        examples: examples,
+        components: preview.components,
+        app: Lookbook
       })
     end
 
-    def preview_panels
-      {
-        preview: {
-          id: "preview-panel-preview",
-          label: "Preview",
-          template: "lookbook/previews/panels/preview",
-          hotkey: "v",
-          show: true,
-          disabled: false,
-          copy: false
-        },
-        output: {
-          id: "preview-panel-html",
-          label: "HTML",
-          template: "lookbook/previews/panels/output",
-          hotkey: "h",
-          show: true,
-          disabled: false,
-          copy: false
+    def panels
+      return @panels if @panels.present?
+      @panels = []
+      Lookbook.config.inspector_panels.each do |name, config|
+        config_with_defaults = Lookbook.config.inspector_panel_defaults.merge(config)
+
+        callable_data = {
+          name: name.to_s,
+          index_position: (@panels.select { |p| p.pane == config.pane }.size + 1),
+          **inspector_data
         }
-      }
+
+        resolved_config = config_with_defaults.transform_values do |value|
+          value.class == 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
 
     def drawer_panels
-      {
-        source: {
-          id: "drawer-panel-source",
-          label: "Source",
-          template: "lookbook/previews/panels/source",
-          hotkey: "s",
-          show: true,
-          disabled: false,
-          copy: @rendered_examples.map { |e| e[:source] }.join("\n")
-        },
-        notes: {
-          id: "drawer-panel-notes",
-          label: "Notes",
-          template: "lookbook/previews/panels/notes",
-          hotkey: "n",
-          show: true,
-          copy: false,
-          disabled: @rendered_examples.filter { |e| e[:notes].present? }.none?
-        },
-        params: {
-          id: "drawer-panel-params",
-          label: "Params",
-          template: "lookbook/previews/panels/params",
-          hotkey: "p",
-          show: true,
-          disabled: @example.params.none?,
-          copy: false
-        }
-      }
+      panels.select { |panel| panel.pane == :drawer }
     end
 
     def preview_controller

data/app/helpers/lookbook/application_helper.rb

@@ -11,14 +11,20 @@ module Lookbook
     def landing_path
       landing = Lookbook.pages.find(&:landing) || Lookbook.pages.first
       if landing.present?
-        page_path(landing.lookup_path)
+        lookbook_page_path landing.lookup_path
       else
-        home_path
+        lookbook_home_path
       end
     end
 
     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

@@ -5,7 +5,7 @@ module Lookbook
     def page_path(id)
       page = id.is_a?(Page) ? id : Lookbook.pages.find(id)
       if page.present?
-        lookbook.page_path page.lookup_path
+        lookbook_page_path page.lookup_path
       else
         Lookbook.logger.warn "Could not find page with id ':#{id}'"
       end
@@ -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

@@ -40,7 +40,7 @@
         <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" %>
+              <%= icon  :alert_triangle, size: 4, class: "text-red-700" %>
               <span class="ml-2">Preview load errors</span>
             <% end %>
             <% toolbar.section align: :right do %>

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

@@ -16,7 +16,7 @@
             size: :lg,
             icon: :chevron_left,
             tooltip: "Previous page",
-            href: page_path(@previous_page.lookup_path),
+            href: lookbook_page_path(@previous_page.lookup_path),
             class: "pr-0.5 bg-transparent" %>
         <% else %>
           <%= render_component :button,
@@ -31,7 +31,7 @@
             size: :lg,
             icon: :chevron_right,
             tooltip: "Next page",
-            href: page_path(@next_page.lookup_path),
+            href: lookbook_page_path(@next_page.lookup_path),
             class: "pl-0.5 bg-transparent" %>
         <% else %>
           <%= render_component :button,

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

@@ -28,7 +28,7 @@
                       <span class="opacity-60 mr-1">Lookbook</span>
                       <span class="mr-6">v<%= Lookbook::VERSION %></span>
                       <a href="https://github.com/allmarkedup/lookbook" target="_blank" class="ml-auto opacity-70">
-                        <%= render_component :icon, name: :github, size: 3 %>
+                        <%= icon  :github, size: 3 %>
                       </a>
                     </div>
                     <div class="px-3 py-2">