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

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

@@ -8,11 +8,17 @@
   <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? %>
-    <style>
+    <style media="all">
       <%== @theme_overrides %>
     </style>
   <% end %>
 
+  <% if content_for? :styles %>
+    <style media="all">
+      <%= content_for :styles %>
+    </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>" %>">
   <% end %>

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

@@ -1,6 +1,6 @@
 <div class="bg-white flex flex-col items-center justify-center h-screen w-full">
   <div class="px-4 text-center max-w-sm">
-    <%= render_component :icon, name: :alert_triangle, size: 10, class: "text-red-300 mx-auto" %>
+    <%= icon  :alert_triangle, size: 10, class: "text-red-300 mx-auto" %>
     <div class="mt-3">
       <h5 class="text-base">
         <%== message %>

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

@@ -1,7 +1,7 @@
 <div id="welcome-message" class="flex flex-col h-full w-full">
   <div class="flex flex-col items-center justify-center h-full">
     <div class="p-4 text-center mx-auto">
-      <%= render_component :icon, name: :layers, size: 10, class: "opacity-30 mx-auto" %>
+      <%= icon  :layers, size: 10, class: "opacity-30 mx-auto" %>
       <div class="mt-6 text-base opacity-40">
         <% if Lookbook.previews.any? %>
           <h5>Select a preview to get started</h5>

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

@@ -9,22 +9,32 @@
     <%= 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, class: "mt-6" 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 %>
-          <a href="<%= page_path @previous_page.lookup_path %>"
+          <a href="<%= lookbook_page_path @previous_page.lookup_path %>"
             class="flex items-center flex-none">
-            <%= render_component :icon, name: :arrow_left, size: 4, class: "hover:text-indigo-800" %>
+            <%= icon  :arrow_left, size: 4, class: "hover:text-indigo-800" %>
             <span class="ml-2 underline"><%= @previous_page.title %></span>
           </a>
         <% end %>
 
         <% if @next_page %>
-          <a href="<%= page_path @next_page.lookup_path %>"
+          <a href="<%= lookbook_page_path @next_page.lookup_path %>"
             class="flex items-center flex-none ml-auto">
             <span class="mr-2 underline"><%= @next_page.title %></span>
-            <%= render_component :icon, name: :arrow_right, size: 4, class: "hover:text-indigo-800" %>
+            <%= icon  :arrow_right, size: 4, class: "hover:text-indigo-800" %>
           </a>
         <% end %>
       </footer>

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.select { |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",
+  src: lookbook_preview_path(request.query_parameters.merge(lookbook_timestamp: Time.now)),
+  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" %>
@@ -35,7 +38,7 @@
             "@click.stop": "startSpin(); $dispatch('viewport:reload'); stopSpin(500);" %>
 
           <% group.button icon: :external_link,
-            href: lookbook.preview_path(@example.lookup_path),
+            href: lookbook_preview_path(@example.lookup_path),
             tooltip: "Open preview in new window",
             target: "_blank" %>
 
@@ -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 id: panel.id, name: panel.name, class: [panel.panel_classes, { "p-4": panel.padded, "prose": panel.prose }] 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.select { |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 id: panel.id, name: panel.name, class: [panel.panel_classes, { "p-4": panel.padded, "prose": panel.prose }]  do %>
+            <%= render panel.partial, **@inspector_data, panel: panel, **panel.locals %>
           <% end %>
         <% end %>
       <% end %>

data/config/routes.rb

@@ -3,13 +3,13 @@ Lookbook::Engine.routes.draw do
     mount Lookbook::Engine.websocket => Lookbook.config.cable_mount_path
   end
 
-  root to: "application#index", as: :home
+  root to: "application#index", as: :lookbook_home
 
-  get "/#{Lookbook.config.page_route}", to: "pages#index", as: :page_index
-  get "/#{Lookbook.config.page_route}/*path", to: "pages#show", as: :page
+  get "/#{Lookbook.config.page_route}", to: "pages#index", as: :lookbook_page_index
+  get "/#{Lookbook.config.page_route}/*path", to: "pages#show", as: :lookbook_page
 
-  get "/preview/*path", to: "previews#preview", as: :preview
-  get "/inspect/*path", to: "previews#show", as: :inspect
+  get "/preview/*path", to: "previews#preview", as: :lookbook_preview
+  get "/inspect/*path", to: "previews#show", as: :lookbook_inspect
 
-  get "/*path", to: "previews#show_legacy", as: :inspect_legacy
+  get "/*path", to: "previews#show_legacy", as: :lookbook_inspect_legacy
 end

data/lib/lookbook/collection.rb

@@ -42,7 +42,7 @@ module Lookbook
     end
 
     def non_empty_items
-      items.filter do |item|
+      items.select do |item|
         !item.is_a?(Lookbook::Collection) || item.items.any?
       end
     end

data/lib/lookbook/component.rb

@@ -0,0 +1,31 @@
+module Lookbook
+  class Component < Entity
+
+    attr_accessor :name
+
+    def initialize(name)
+      @name = name
+      super(path)
+    end
+    
+    def path
+      name.underscore
+    end
+
+    def full_path
+      Pathname.new("#{Lookbook.config.components_path}/#{path}.rb")
+    end
+
+    def dir_path
+      full_path.dirname
+    end
+
+    def template_path
+      Dir.glob("#{Lookbook.config.components_path}/#{path}.*.erb").first
+    end
+
+    def inline?
+      template_path.present?
+    end
+  end
+end

data/lib/lookbook/config.rb

@@ -1,37 +1,28 @@
 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,
+
+        components_path: "app/components",
         
         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 +37,122 @@ module Lookbook
         parser_registry_path: "tmp/storage/.yardoc",
 
         ui_theme: "indigo",
-        ui_theme_overrides: ConfigOptions.new,
+        ui_theme_overrides: {},
+
+        hooks: {
+          after_initialize: [],
+          before_exit: [],
+          after_change: [],
+        },
+
         experimental_features: false,
+
+        inspector_panels: {
+          preview: {
+            pane: :main,
+            position: 1,
+            partial: "lookbook/previews/panels/preview",
+            hotkey: "v",
+            panel_classes: "overflow-hidden",
+            padded: false
+          },
+          output: {
+            pane: :main,
+            position: 2,
+            partial: "lookbook/previews/panels/output",
+            label: "HTML",
+            hotkey: "h",
+            padded: false
+          },
+          source: {
+            pane: :drawer,
+            position: 1,
+            partial: "lookbook/previews/panels/source",
+            label: "Source",
+            hotkey: "s",
+            copy: ->(data) { data.examples.map { |e| e.source }.join("\n") },
+            padded: false
+          },
+          notes: {
+            pane: :drawer,
+            position: 2,
+            partial: "lookbook/previews/panels/notes",
+            label: "Notes",
+            hotkey: "n",
+            disabled: ->(data) { data.examples.select { |e| e.notes.present? }.none? },
+            padded: false
+          },
+          params: {
+            pane: :drawer,
+            position: 3,
+            partial: "lookbook/previews/panels/params",
+            label: "Params",
+            hotkey: "p",
+            disabled: ->(data) { data.preview.params.none? },
+            padded: false
+          }
+        },
+
+        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: {},
+          padded: true
+        },
       })
     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 define_inspector_panel(name, opts = {})
+      inspector_panels[name] = opts
+      if opts[:position].present?
+        pane = inspector_panels[name].pane.presence || :drawer
+        siblings = inspector_panels.select do |key, panel|
+          panel.pane == pane && key != name.to_sym
+        end
+        siblings.each do |key, panel|
+          if panel.position >= opts[:position]
+            panel.position += 1
+          end
+        end
+      end
+    end
+
+    def amend_inspector_panel(name, opts = {})
+      if opts == false
+        inspector_panels[name] = false
+      else
+        inspector_panels[name].merge!(opts)
+      end
+    end
+
+    def remove_inspector_panel(name)
+      amend_inspector_panel(name, false)
+    end
+
+    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 +168,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,13 +181,22 @@ module Lookbook
     
     protected
 
+    def get_inspector_panels(panels)
+      panels.select! { |key, panel| panel }
+      panels
+    end
+
     def get_project_name(name)
       name == false ? nil : name
     end
 
+    def get_components_path(path)
+      absolute_path(path)
+    end
+
     def normalize_paths(paths)
       paths.map! { |path| absolute_path(path) }
-      paths.filter! { |path| Dir.exist?(path) }
+      paths.select! { |path| Dir.exist?(path) }
       paths
     end
 
@@ -111,11 +211,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)