lookbook 1.0.0.beta.2 → 1.0.0.beta.3

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

@@ -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/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">

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

@@ -25,7 +25,7 @@
         <% if @previous_page %>
           <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 %>
@@ -34,7 +34,7 @@
           <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/previews/panels/_notes.html.erb

@@ -1,4 +1,4 @@
-<% items = 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| %>

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

@@ -55,7 +55,7 @@
     <div class="h-full relative overflow-auto">
       <%= render_component :tab_panels, alpine_data: "$store.inspector.main" do |tabs| %>
         <% @main_panels.each do |panel| %>
-          <% tabs.panel name: panel.name, class: panel.panel_classes do %>
+          <% 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 %>
@@ -80,7 +80,7 @@
 
       <% toolbar.section align: :right,  class: "flex-none relative z-10" do %>
         <%= render_component :button_group do |group| %>
-          <%= @drawer_panels.filter { |p| !p.disabled && p.copy }.each do |panel| %>
+          <%= @drawer_panels.select { |p| !p.disabled && p.copy }.each do |panel| %>
             <% group.button icon: :copy,
               tooltip: "Copy panel contents",
               copy: !!panel.copy,
@@ -123,7 +123,7 @@
     <div class="h-full overflow-auto">
       <%= render_component :tab_panels, alpine_data: "$store.inspector.drawer" do |tabs| %>
         <% @drawer_panels.each do |panel| %>
-          <% tabs.panel name: panel.name do %>
+          <% 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 %>

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

@@ -11,6 +11,8 @@ module Lookbook
         project_name: "Lookbook",
         log_level: 2,
         auto_refresh: true,
+
+        components_path: "app/components",
         
         page_controller: "Lookbook::PageController",
         page_route: "pages",
@@ -37,13 +39,22 @@ module Lookbook
         ui_theme: "indigo",
         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"
+            panel_classes: "overflow-hidden",
+            padded: false
           },
           output: {
             pane: :main,
@@ -51,6 +62,7 @@ module Lookbook
             partial: "lookbook/previews/panels/output",
             label: "HTML",
             hotkey: "h",
+            padded: false
           },
           source: {
             pane: :drawer,
@@ -58,7 +70,8 @@ module Lookbook
             partial: "lookbook/previews/panels/source",
             label: "Source",
             hotkey: "s",
-            copy: ->(data) { data.examples.map { |e| e[:source] }.join("\n") }
+            copy: ->(data) { data.examples.map { |e| e.source }.join("\n") },
+            padded: false
           },
           notes: {
             pane: :drawer,
@@ -66,7 +79,8 @@ module Lookbook
             partial: "lookbook/previews/panels/notes",
             label: "Notes",
             hotkey: "n",
-            disabled: ->(data) { data.examples.filter { |e| e.notes.present? }.none? }
+            disabled: ->(data) { data.examples.select { |e| e.notes.present? }.none? },
+            padded: false
           },
           params: {
             pane: :drawer,
@@ -74,7 +88,8 @@ module Lookbook
             partial: "lookbook/previews/panels/params",
             label: "Params",
             hotkey: "p",
-            disabled: ->(data) { data.preview.params.none? }
+            disabled: ->(data) { data.preview.params.none? },
+            padded: false
           }
         },
 
@@ -90,10 +105,9 @@ module Lookbook
           show: true,
           copy: nil,
           panel_classes: nil,
-          locals: {}
+          locals: {},
+          padded: true
         },
-
-        experimental_features: false,
       })
     end
 
@@ -105,6 +119,33 @@ module Lookbook
       end
     end
 
+    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)
@@ -141,7 +182,7 @@ module Lookbook
     protected
 
     def get_inspector_panels(panels)
-      panels.filter! { |key, panel| panel }
+      panels.select! { |key, panel| panel }
       panels
     end
 
@@ -149,9 +190,13 @@ module Lookbook
       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
 

data/lib/lookbook/engine.rb

@@ -8,16 +8,20 @@ module Lookbook
   autoload :Config, "lookbook/config"
   
   class << self
+    def version
+      Lookbook::VERSION
+    end
+
     def config
       @config ||= Config.new
     end
 
-    def logger
-      @logger ||= Rails.env.development? ? Logger.new($stdout) : Rails.logger
+    def configure
+      yield(config)
     end
 
-    def version
-      Lookbook::VERSION
+    def logger
+      @logger ||= Rails.env.development? ? Logger.new($stdout) : Rails.logger
     end
 
     def debug_data
@@ -28,8 +32,46 @@ module Lookbook
       }
     end
 
-    def configure
-      yield(config)
+    def previews
+      Preview.all
+    end
+
+    def pages
+      Page.all
+    end
+
+    def after_initialize(&block)
+      add_hook(:after_initialize, block)
+    end
+
+    def before_exit(&block)
+      add_hook(:before_exit, block)
+    end
+
+    def after_change(&block)
+      add_hook(:after_change, block)
+    end
+
+    def define_panel(name, opts = {})
+      config.define_inspector_panel(name, opts)
+    end
+
+    def amend_panel(name, opts = {})
+      config.amend_inspector_panel(name, opts)
+    end
+
+    def remove_panel(name)
+      config.remove_inspector_panel(name)
+    end
+
+    def broadcast(event_name, data = {})
+      Engine.websocket&.broadcast(event_name.to_s, data)
+    end
+
+    protected
+
+    def add_hook(event_name, block)
+      config.hooks[event_name] << block
     end
   end
 
@@ -43,8 +85,10 @@ module Lookbook
       config.lookbook.preview_paths += config.view_component.preview_paths
       config.lookbook.preview_controller ||= config.view_component.preview_controller
 
+      config.lookbook.components_path = config.view_component.view_component_path if config.view_component.view_component_path.present?
+
       config.lookbook.listen_paths += config.lookbook.preview_paths
-      config.lookbook.listen_paths << (config.view_component.view_component_path.presence || "app/components")
+      config.lookbook.listen_paths << config.lookbook.components_path 
     end
 
     initializer "lookbook.logging.development" do
@@ -73,12 +117,14 @@ module Lookbook
           only: /\.(rb|html.*)$/,
           force_polling: Lookbook.config.listen_use_polling
         ) do |modified, added, removed|
+          changes = { modified: modified, added: added, removed: removed }
           begin
             parser.parse
           rescue
           end
           Lookbook::Preview.clear_cache
-          Lookbook::Engine.websocket&.broadcast("reload", {})
+          Lookbook::Engine.reload_ui(changes)
+          Lookbook::Engine.run_hooks(:after_change, changes)
         end
         Lookbook::Engine.register_listener(preview_listener)
 
@@ -87,7 +133,9 @@ module Lookbook
           only: /\.(html.*|md.*)$/,
           force_polling: Lookbook.config.listen_use_polling
         ) do |modified, added, removed|
-          Lookbook::Engine.websocket&.broadcast("reload", {})
+          changes = { modified: modified, added: added, removed: removed }
+          Lookbook::Engine.reload_ui(changes)
+          Lookbook::Engine.run_hooks(:after_change, changes)
         end
         Lookbook::Engine.register_listener(page_listener)
       end
@@ -103,18 +151,20 @@ module Lookbook
           "
         end
       end
+
+      Lookbook::Engine.run_hooks(:after_initialize)
     end
 
     at_exit do
       if config.lookbook.listen
         Lookbook.logger.debug "Stopping listeners"
-        Lookbook::Engine.listeners.each do |listener|
-          listener.stop
-        end
+        Lookbook::Engine.listeners.each { |listener| listener.stop } 
       end
+      Lookbook::Engine.run_hooks(:before_exit)
     end
 
     class << self
+
       def websocket
         if config.lookbook.auto_refresh
           cable = ActionCable::Server::Configuration.new
@@ -162,6 +212,16 @@ module Lookbook
         @listeners ||= []
       end
 
+      def run_hooks(event_name, *args)
+        Lookbook.config.hooks[event_name].each do |hook|
+          hook.call(Lookbook, *args)
+        end
+      end
+
+      def reload_ui(changed = {})
+        websocket&.broadcast("reload", changed)
+      end
+
       attr_reader :preview_controller
     end
   end

data/lib/lookbook/page.rb

@@ -19,7 +19,7 @@ module Lookbook
 
     def initialize(path, base_path)
       @pathname = Pathname.new path
-      @base_path = base_path
+      @base_path = Pathname.new base_path
       @options = nil
       @errors = []
       @sections = []
@@ -177,7 +177,7 @@ module Lookbook
       end
 
       def page_paths
-        Lookbook.config.page_paths.filter { |dir| Dir.exist? dir }
+        Lookbook.config.page_paths.select { |dir| Dir.exist? dir }
       end
 
       def section_path?(path)

data/lib/lookbook/parser.rb

@@ -23,10 +23,6 @@ module Lookbook
       registry.get(path)
     end
 
-    # def yardoc_file_path
-    #   Rails&.root ? Rails.root.join(YARDOC_FILE_PATH) : YARDOC_FILE_PATH
-    # end
-
     class << self
       def define_tags
         YARD::Tags::Library.define_tag("Hidden status", :hidden)
@@ -34,6 +30,7 @@ module Lookbook
         YARD::Tags::Library.define_tag("Display", :display)
         YARD::Tags::Library.define_tag("Position", :position)
         YARD::Tags::Library.define_tag("ID", :id)
+        YARD::Tags::Library.define_tag("Component", :component)
       end
     end
   end

data/lib/lookbook/preview.rb

@@ -8,7 +8,7 @@ module Lookbook
     def initialize(preview)
       @preview = preview
       @preview_inspector = SourceInspector.new(@preview.name)
-      super(preview_class_name(preview_class_basename(@preview.name)))
+      super(preview_class_path(@preview.name))
     end
 
     def id
@@ -34,7 +34,7 @@ module Lookbook
     def examples
       return @examples if @examples.present?
       public_methods = @preview.public_instance_methods(false)
-      public_method_objects = @preview_inspector&.methods&.filter { |m| public_methods.include?(m.name) }
+      public_method_objects = @preview_inspector&.methods&.select { |m| public_methods.include?(m.name) }
       examples = (public_method_objects || []).map { |m| PreviewExample.new(m.name.to_s, self) }
       sorted = Lookbook.config.sort_examples ? examples.sort_by(&:label) : examples
       @examples = []
@@ -62,7 +62,7 @@ module Lookbook
     end
 
     def full_path
-      base_path = Array(preview_paths).detect do |preview_path|
+      base_path = Array(Lookbook.config.preview_paths).detect do |preview_path|
         Dir["#{preview_path}/#{name.underscore}.rb"].first
       end
       Pathname.new(Dir["#{base_path}/#{name.underscore}.rb"].first)
@@ -72,10 +72,6 @@ module Lookbook
       lookbook_inspect_path lookup_path
     end
 
-    def preview_paths
-      ViewComponent::Base.preview_paths
-    end
-
     def parent_collections_names
       File.dirname(path).split("/")
     end
@@ -96,6 +92,27 @@ module Lookbook
       true
     end
 
+    def component
+      components.first
+    end
+
+    def components
+      component_classes = @preview_inspector&.components.any? ? @preview_inspector&.components : [guess_component]
+      component_classes.map do |class_name|
+        Component.new(class_name.to_s)
+      end
+    end
+
+    protected
+
+    def guess_component
+      begin
+        name.chomp("Preview").constantize
+      rescue
+        nil
+      end
+    end
+
     class << self
       def find(path)
         all.find { |p| p.lookup_path == path }