lookbook 1.0.0.beta.0 → 1.0.0.beta.1

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
@@ -79,107 +82,108 @@ 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 preview_params
+      preview_controller.params.permit!
+      preview_controller.params.to_h.select do |key, value|
+        !!@example.params.find { |param| param[:name] == key }
       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
+    def inspector_data
+      return @inspector_data if @inspector_data.present?
+
+      request_data = {
+        preview_params: preview_params,
+        path: params[:path],
+        query_parameters: request.query_parameters,
+        original: request
       }
-    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
+      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
-      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])
+      examples_data = 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
       end
 
-      # set display params
-      preview_controller.params.merge!({
-        lookbook: {
-          display: @example.display_params
-        }
+      @inspector_data ||= Lookbook::Store.new({
+        request: request_data,
+        preview: preview_data,
+        examples: examples_data
       })
     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.filter { |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.filter(&:show).sort_by { |p| [p.position, p.label] }
+    end
+   
+    def main_panels
+      panels.filter { |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.filter { |panel| panel.pane == :drawer }
     end
 
     def preview_controller

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

@@ -9,7 +9,17 @@
     <%= render_component :prose, markdown: false, class: "max-w-none flex-none" do %>
       <%= @page_content %>
     <% end %>
-    
+
+    <% if @page.sections.any? %>
+      <%= render_component :page_tabs, markdown: false do |page_tabs| %>
+        <% @page.sections.each do |section| %>
+          <% page_tabs.tab name: "page-section-#{section.name}", label: section.label do %>
+            <%= page_controller.render_page(section) %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+
     <% if @page.footer? && @pages.many? %>
       <footer class="flex items-center justify-between border-t border-gray-300 mt-12 pt-8 pb-10 ">
         <% if @previous_page %>

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

@@ -3,12 +3,12 @@
   <% examples.each do |example| %>
     <div style="all: unset; margin-bottom: 30px; display: block;">
       <h6 style="all: unset; display: block; color: #999; font-family: sans-serif; font-size: 14px; margin-top: 0; margin-bottom: 10px;">
-        <%= example[:label] %>
+        <%= example.label %>
       </h6>
-      <%= example[:html] %>
+      <%= example.output %>
     </div>
   <% end %>
 <% else %>
   <%# Render a single example %>
-  <%= examples.first[:html] %>
+  <%= examples.first.output %>
 <% end %>

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

@@ -0,0 +1,13 @@
+<div class="p-4 bg-lookbook-prose h-full">
+  <% if panel.content.present? %>
+    <%= render_component :prose, markdown: true do %>
+      <%== panel.content %>
+    <% end %>
+  <% else %>
+    <% if Rails.env.development? %>
+      <%= render_component :prose do %>
+        <em class='opacity-50'>No content has been defined for this panel.</em>
+      <% end %>
+    <% end %>
+  <% end %>
+</div>

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

@@ -1,19 +1,19 @@
-<% items = rendered_examples.filter { |example| example[:notes].present? } %>
+<% items = examples.filter { |example| example.notes.present? } %>
 <% if items.many? %>
   <div class="divide-y divide-dashed divide-lookbook-divider bg-lookbook-prose h-full w-full">
     <% items.each do |item| %>
       <div class="px-4 py-6 relative">
         <h6 class="italic font-mono mb-4 opacity-40">
-          # <%= item[:label] %>
+          # <%= item.label %>
         </h6>
-        <%= render_component :prose, content: item[:notes] %>
+        <%= render_component :prose, content: item.notes %>
       </div>
     <% end %>
   </div>
 <% else %>
-  <div class="p-4 py-4 bg-lookbook-prose w-full h-full">
+  <div class="p-4 bg-lookbook-prose w-full h-full">
     <%= render_component :prose do %>
-      <%== items.any? ? items.first[:notes] : "<em class='opacity-50'>No notes provided.</em>" %>
+      <%== items.any? ? items.first.notes : "<em class='opacity-50'>No notes provided.</em>" %>
     <% end %>
   </div>
 <% end %>

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

@@ -1,7 +1,7 @@
 <%= render_component :code, line_numbers: true, full_height: true do -%>
-  <% if rendered_examples.many? -%>
-    <% rendered_examples.each do |example| -%><%== "<!-- #{example[:label]} -->\n#{beautify(example[:html])}\n\n" -%><% end %>
+  <% if examples.many? -%>
+    <% examples.each do |example| -%><%== "<!-- #{example.label} -->\n#{beautify(example.output)}\n\n" -%><% end %>
   <%- else -%>
-    <%== beautify(rendered_examples.first[:html]) -%>
+    <%== beautify(examples.first.output) -%>
   <%- end %>
 <% end %>

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

@@ -1,4 +1,4 @@
-<% if @example.params.none? %>
+<% if preview.params.none? %>
   <div class="p-4 w-full h-full bg-lookbook-prose">
     <%= render_component :prose do %>
       <em class='opacity-50'>No params configured.</em>
@@ -7,7 +7,7 @@
 <% else %>
   <div class="py-3 h-full">
     <%= render_component :params_editor do |editor| %>
-      <% @example.params.each do |param| %>
+      <% preview.params.each do |param| %>
         <% editor.field **param, value: params[param[:name]] %>
       <% end %>
     <% end %>

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

@@ -1,6 +1,6 @@
 <%= render_component :viewport,
   src: lookbook.preview_path(request.query_parameters.merge(lookbook_timestamp: Time.now)),
-  alpine_data: "$store.inspector.preview",
+  alpine_data: "$store.inspector.main",
   class: "-inset-px relative",
   style: "width: calc(100% + 2px); height: calc(100% + 2px)"
   %>

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

@@ -1,11 +1,11 @@
 <div class="h-full">
-  <% if rendered_examples.many? %>
-    <%= render_component :code, language: rendered_examples.first[:source_lang][:name], line_numbers: true, full_height: true do -%>
-<%- rendered_examples.each.with_index(1) do |example, i| -%>
-<%== "#{sprintf example[:source_lang][:comment], example[:label]}\n#{example[:source]}\n#{"\n" if i < rendered_examples.size}" %><% end %>
+  <% if examples.many? %>
+    <%= render_component :code, language: examples.first.source_lang[:name], line_numbers: true, full_height: true do -%>
+<%- examples.each.with_index(1) do |example, i| -%>
+<%== "#{sprintf example.source_lang[:comment], example.label}\n#{example.source}\n#{"\n" if i < examples.size}" %><% end %>
     <% end %>
   <% else %>
-    <% example = rendered_examples.first %>
-    <%= render_component :code, language: example[:source_lang][:name], line_numbers: true, full_height: true do %><%== example[:source] %><% end %>
+    <% example = examples.first %>
+    <%= render_component :code, language: example.source_lang[:name], line_numbers: true, full_height: true do %><%== example.source %><% end %>
   <% end %>
 </div>

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

@@ -1,20 +1,23 @@
 <%= render_component :split_layout,
   alpine_data: "$store.layout.inspector",
-  ":class": "$store.inspector.drawer.hidden && '!grid-rows-[1fr] !grid-cols-[1fr]'" do |layout| %>
+  ":class": "($store.inspector.drawer.hidden || #{@drawer_panels.none?}) && '!grid-rows-[1fr] !grid-cols-[1fr]'" do |layout| %>
 
   <%= layout.pane class: "flex flex-col h-full overflow-hidden",
     x_effect: "forceOrientation = (layoutWidth < $store.inspector.minVerticalSplitWidth) ? 'horizontal' : null" do %>
   
     <%= render_component :toolbar do |toolbar| %>
       <% toolbar.section ":class": "layoutResizing && 'overflow-hidden'" do %>
-        <%= render_component :tabs, alpine_data: "$store.inspector.preview" do |tabs| %>
-          <%= @preview_panels.each do |key, panel| %>
-            <% tabs.tab ref: key, **panel.extract!(:label, :hotkey, :disabled) %>
+        <%= render_component :tabs, alpine_data: "$store.inspector.main" do |tabs| %>
+          <%= @main_panels.each do |panel| %>
+            <% tabs.tab name: panel.name,
+              label: panel.label,
+              hotkey: panel.hotkey,
+              disabled: panel.disabled %>
           <% end %>
         <% end %>
       <% end %>
 
-      <% toolbar.section align: :right, padded: true, class: "flex-none min-w-[140px]", ":class": "{invisible: $store.inspector.preview.activeTab !== 'preview'}" do %>
+      <% toolbar.section align: :right, padded: true, class: "flex-none min-w-[140px]", ":class": "{invisible: $store.inspector.main.activeTab !== 'preview'}" do %>
         <%= render_component :dimensions_display,
           target: "[data-component=viewport] iframe",
           class: "ml-auto opacity-30 hover:opacity-100" %>
@@ -47,53 +50,57 @@
             cloak: true %>
         <% end %>
       <% end %>
-    <% end %> 
+    <% end %>
 
     <div class="h-full relative overflow-auto">
-      <%= render_component :tabbed_content, alpine_data: "$store.inspector.preview" do |content| %>
-        <%= @preview_panels.each do |key, panel| %>
-          <% content.section ref: key, class: "overflow-hidden" do %>
-            <%= render panel[:template],
-              preview: @preview,
-              example: @example,
-              rendered_examples: @rendered_examples,
-              **panel %>
+      <%= render_component :tab_panels, alpine_data: "$store.inspector.main" do |tabs| %>
+        <% @main_panels.each do |panel| %>
+          <% tabs.panel name: panel.name, class: panel.panel_classes do %>
+            <%= render panel.partial, **@inspector_data, panel: panel, **panel.locals %>
           <% end %>
         <% end %>
       <% end %>
     </div>
   <% end %>
 
-  <%= layout.pane class: "flex flex-col h-full overflow-hidden bg-lookbook-drawer", x_show: "!$store.inspector.drawer.hidden" do %>
+  <%= layout.pane class: "flex flex-col h-full overflow-hidden bg-lookbook-drawer",
+    x_show: "!$store.inspector.drawer.hidden && #{@drawer_panels.any?}" do %>
 
     <%= render_component :toolbar do |toolbar| %>
       <% toolbar.section ":class": "layoutResizing && 'overflow-hidden'" do %>
         <%= render_component :tabs, alpine_data: "$store.inspector.drawer" do |tabs| %>
-          <%= @drawer_panels.each do |key, panel| %>
-            <% tabs.tab ref: key, **panel.extract!(:label, :hotkey, :disabled) %>
+          <%= @drawer_panels.each do |panel| %>
+            <% tabs.tab name: panel.name,
+              label: panel.label,
+              hotkey: panel.hotkey,
+              disabled: panel.disabled %>
           <% end %>
         <% end %>
       <% end %>
 
-      <% toolbar.section align: :right, divide: :left, class: "flex-none relative z-10" do %>
+      <% toolbar.section align: :right,  class: "flex-none relative z-10" do %>
         <%= render_component :button_group do |group| %>
-
-          <%= @drawer_panels.each do |key, panel| %>
-            <% group.button icon: :clipboard,
-              tooltip: "Copy to clipboard",
-              copy: !!panel[:copy],
-              disabled: panel[:disabled] || !panel[:copy],
-              x_show: "$store.inspector.drawer.activeTab === '#{key}'",
+          <%= @drawer_panels.filter { |p| !p.disabled && p.copy }.each do |panel| %>
+            <% group.button icon: :copy,
+              tooltip: "Copy panel contents",
+              copy: !!panel.copy,
+              x_show: "$store.inspector.drawer.activeTab === '#{panel.name}'",
               cloak: true do %>
-              <%== panel[:copy] ? panel[:copy] : "" %>
+              <%== panel.copy ? panel.copy : "" %>
               <% end %>
-          <% end %>            
+          <% end %>  
+        <% end %>
+      <% end %>
+
+      <% toolbar.section divide: :left, class: "flex-none relative z-10" do %>
+        <%= render_component :button_group do |group| %>
 
           <% group.button icon: :corner_up_right,
             tooltip: "Move drawer to right",
             "@click": "switchOrientation",
             x_show: "horizontal && layoutWidth > $store.inspector.minVerticalSplitWidth",
             cloak: true %>
+
           <% group.button icon: :corner_up_right,
             x_show: "horizontal && layoutWidth <= $store.inspector.minVerticalSplitWidth",
             disabled: true,
@@ -114,14 +121,10 @@
     <% end %> 
 
     <div class="h-full overflow-auto">
-      <%= render_component :tabbed_content, alpine_data: "$store.inspector.drawer" do |content| %>
-        <% @drawer_panels.each do |key, panel| %>
-          <% content.section ref: key do %>
-            <%= render panel[:template],
-              preview: @preview,
-              example: @example,
-              rendered_examples: @rendered_examples,
-              **panel %>
+      <%= render_component :tab_panels, alpine_data: "$store.inspector.drawer" do |tabs| %>
+        <% @drawer_panels.each do |panel| %>
+          <% tabs.panel name: panel.name do %>
+            <%= render panel.partial, **@inspector_data, panel: panel, **panel.locals %>
           <% end %>
         <% end %>
       <% end %>

data/lib/lookbook/config.rb

@@ -1,24 +1,13 @@
 require "lookbook/markdown"
+require "lookbook/theme"
+require "lookbook/store"
 
 module Lookbook
-  class ConfigOptions < ActiveSupport::OrderedOptions
-    def initialize(**data)
-      super()
-      data.keys.each { |key| self[key.to_sym] = data[key] }
-    end
-
-    def [](key)
-      super(key.to_sym)
-    end
-
-    def []=(key, value)
-      super(key.to_sym, value)
-    end
-  end
-
   class Config
     def initialize
-      @store = ConfigOptions.new(**{
+      @options = Store.new
+      foobar = "bax"
+      @options.set({
         project_name: "Lookbook",
         log_level: 2,
         auto_refresh: true,
@@ -26,12 +15,12 @@ module Lookbook
         page_controller: "Lookbook::PageController",
         page_route: "pages",
         page_paths: ["test/components/docs"],
-        page_options: ConfigOptions.new,
-        markdown_options: ConfigOptions.new(**Markdown::DEFAULT_OPTIONS),
+        page_options: {},
+        markdown_options: Markdown::DEFAULT_OPTIONS,
 
         preview_paths: [],
-        preview_display_params: ConfigOptions.new,
-        preview_options: ConfigOptions.new,
+        preview_display_params: {},
+        preview_options: {},
         preview_srcdoc: false,
         sort_examples: true,
 
@@ -46,22 +35,83 @@ module Lookbook
         parser_registry_path: "tmp/storage/.yardoc",
 
         ui_theme: "indigo",
-        ui_theme_overrides: ConfigOptions.new,
+        ui_theme_overrides: {},
+
+        inspector_panels: {
+          preview: {
+            pane: :main,
+            position: 1,
+            partial: "lookbook/previews/panels/preview",
+            hotkey: "v",
+            panel_classes: "overflow-hidden"
+          },
+          output: {
+            pane: :main,
+            position: 2,
+            partial: "lookbook/previews/panels/output",
+            label: "HTML",
+            hotkey: "h",
+          },
+          source: {
+            pane: :drawer,
+            position: 1,
+            partial: "lookbook/previews/panels/source",
+            label: "Source",
+            hotkey: "s",
+            copy: ->(data) { data.examples.map { |e| e[:source] }.join("\n") }
+          },
+          notes: {
+            pane: :drawer,
+            position: 2,
+            partial: "lookbook/previews/panels/notes",
+            label: "Notes",
+            hotkey: "n",
+            disabled: ->(data) { data.examples.filter { |e| e.notes.present? }.none? }
+          },
+          params: {
+            pane: :drawer,
+            position: 3,
+            partial: "lookbook/previews/panels/params",
+            label: "Params",
+            hotkey: "p",
+            disabled: ->(data) { data.preview.params.none? }
+          }
+        },
+
+        inspector_panel_defaults: {
+          id: ->(data) { "inspector-panel-#{data.name}" },
+          partial: "lookbook/previews/panels/content",
+          content: nil,
+          label: ->(data) { data.name.titleize },
+          pane: :drawer,
+          position: ->(data) { data.index_position },
+          hotkey: nil,
+          disabled: false,
+          show: true,
+          copy: nil,
+          panel_classes: nil,
+          locals: {}
+        },
+
         experimental_features: false,
       })
     end
 
-    def ui_theme=(name)
-      name = name.to_s
-      if ["indigo", "zinc", "blue"].include?(name)
-        @store[:ui_theme] = name
+    def inspector_panels(&block)
+      if block_given?
+        yield get(:inspector_panels)
       else
-        Lookbook.logger.warn "'#{name}' is not a valid Lookbook theme. Falling back to default."
+        get(:inspector_panels)
       end
     end
 
-    def ui_theme_overrides=(theme)
-       @store[:ui_theme_overrides] = ConfigOptions.new(theme)
+    def ui_theme=(name)
+      name = name.to_s
+      if Theme.valid_theme?(name)
+        @options[:ui_theme] = name
+      else
+        Lookbook.logger.warn "'#{name}' is not a valid Lookbook theme. Theme setting not changed."
+      end
     end
 
     def ui_theme_overrides(&block)
@@ -77,11 +127,11 @@ module Lookbook
     end
 
     def []=(key, value)
-      @store[key.to_sym] = value
+      @options[key.to_sym] = value
     end
 
     def to_h
-      @store.to_h
+      @options.to_h
     end
 
     def to_json(*a)
@@ -90,6 +140,11 @@ module Lookbook
     
     protected
 
+    def get_inspector_panels(panels)
+      panels.filter! { |key, panel| panel }
+      panels
+    end
+
     def get_project_name(name)
       name == false ? nil : name
     end
@@ -111,11 +166,11 @@ module Lookbook
 
     def get(name)
       getter_name = "get_#{name}".to_sym
-      respond_to?(getter_name, true) ? send(getter_name, @store[name]) : @store[name]
+      respond_to?(getter_name, true) ? send(getter_name, @options[name]) : @options[name]
     end
 
     def set(name, *args)
-      @store.send(name, *args)
+      @options.send(name, *args)
     end
 
     def method_missing(name, *args)