lookbook 1.3.3 → 1.4.0

data/app/controllers/lookbook/application_controller.rb

@@ -9,16 +9,16 @@ module Lookbook
     helper Lookbook::ComponentHelper
 
     before_action :generate_theme_overrides
-    before_action :assign_collections
+    before_action :assign_instance_vars
 
     def self.controller_path
       "lookbook"
     end
 
     def index
-      landing = Lookbook.pages.find(&:landing) || Lookbook.pages.first
+      landing = Lookbook.pages.find(&:landing?) || Lookbook.pages.first
       if landing.present?
-        redirect_to lookbook_page_path(landing.lookup_path)
+        redirect_to lookbook_page_path(landing.path)
       else
         render "lookbook/index"
       end
@@ -30,9 +30,11 @@ module Lookbook
       @theme_overrides ||= Lookbook.theme.to_css
     end
 
-    def assign_collections
-      @previews = Preview.all
-      @pages = Page.all
+    def assign_instance_vars
+      @previews = Lookbook.previews
+      @pages = Lookbook.pages
+      @config = Lookbook.config
+      @engine = Lookbook.engine
     end
 
     def feature_enabled?(feature)
@@ -48,7 +50,7 @@ module Lookbook
       error_params = {}
       if exception.is_a?(ViewComponent::PreviewTemplateError)
         error_params = {
-          file_path: @preview&.full_path,
+          file_path: @preview&.file_path,
           line_number: 0,
           source_code: @target&.source
         }

data/app/controllers/lookbook/page_controller.rb

@@ -11,8 +11,8 @@ module Lookbook
     def render_page(page, locals = {})
       @page = page
       @pages = Lookbook.pages
-      @next_page = @pages.find_next(@page)
-      @previous_page = @pages.find_previous(@page)
+      @next_page = @pages.next(@page)
+      @previous_page = @pages.previous(@page)
 
       content = ActionViewAnnotationsHandler.call(disable_annotations: true) do
         render_to_string inline: @page.content, locals: {

data/app/controllers/lookbook/pages_controller.rb

@@ -9,9 +9,9 @@ module Lookbook
     end
 
     def index
-      landing = Lookbook.pages.find(&:landing) || Lookbook.pages.first
+      landing = Lookbook.pages.find(&:landing?) || Lookbook.pages.first
       if landing.present?
-        redirect_to lookbook_page_path landing.lookup_path
+        redirect_to lookbook_page_path(landing.path)
       else
         show_404
       end
@@ -20,21 +20,15 @@ module Lookbook
     def show
       @page = @pages.find_by_path(params[:path])
       if @page
-        @next_page = @pages.find_next(@page)
-        @previous_page = @pages.find_previous(@page)
-        if @page.errors.any?
+        @next_page = @pages.next(@page)
+        @previous_page = @pages.previous(@page)
+        begin
+          @page_content = page_controller.render_page(@page)
+          @title = @page.title
+        rescue => exception
           render_in_layout "lookbook/error",
             layout: "lookbook/page",
-            error: @page.errors.first
-        else
-          begin
-            @page_content = page_controller.render_page(@page)
-            @title = @page.title
-          rescue => exception
-            render_in_layout "lookbook/error",
-              layout: "lookbook/page",
-              error: Lookbook::Error.new(exception, file_path: @page.full_path, source_code: @page.content)
-          end
+            error: Lookbook::Error.new(exception, file_path: @page.file_path, source_code: @page.content)
         end
       else
         show_404

data/app/helpers/lookbook/application_helper.rb

@@ -18,7 +18,7 @@ module Lookbook
     end
 
     def landing_path
-      landing = Lookbook.pages.find(&:landing) || Lookbook.pages.first
+      landing = Lookbook.pages.find(&:landing?) || Lookbook.pages.first
       if landing.present?
         lookbook_page_path landing.lookup_path
       else
@@ -27,7 +27,7 @@ module Lookbook
     end
 
     def generate_id(*args)
-      args.map { |args| args.delete_prefix("/").tr("&?=/_\-", "-") }.join("-")
+      args.map { |args| args.delete_prefix("/").tr("&?=/_-", "-") }.join("-")
     end
   end
 end

data/app/helpers/lookbook/page_helper.rb

@@ -3,7 +3,7 @@ module Lookbook
     include Utils
 
     def page_path(id)
-      page = id.is_a?(Page) ? id : Lookbook.pages.find(id)
+      page = id.is_a?(Page) ? id : Lookbook.pages.find_by_id(id)
       if page.present?
         lookbook_page_path page.lookup_path
       else
@@ -16,10 +16,13 @@ module Lookbook
 
       @embed_counter ||= 0
 
-      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
+      preview = if args.first.is_a?(Symbol)
+        Lookbook.previews.find_by_path(args.first)
+      else
+        Lookbook.previews.find_by_preview_class(args.first)
+      end
 
+      example = args[1] ? preview&.example(args[1]) : preview&.default_example
       embed_id = "#{url_for}/embed/#{example.lookup_path}".delete_prefix("/").tr("/", "-")
 
       lookbook_render :embed,

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

@@ -21,9 +21,8 @@
             <% layout.pane class: "overflow-hidden" do %>
               <%= lookbook_render :nav,
                 id: "previews-nav",
-                collection: @previews,
-                alpine_data: "$store.nav.previews",
-                collapse_singles: true do |nav| %>
+                tree: @previews.to_tree,
+                alpine_data: "$store.nav.previews" do |nav| %>
                 <%= nav.toolbar do |toolbar| %>
                   <% toolbar.section padded: true do %>
                     <h4 class="pt-1">Previews</h4>
@@ -45,7 +44,7 @@
             <% layout.pane class: "overflow-hidden" do %>
               <%= lookbook_render :nav,
                 id: "pages-nav",
-                collection: @pages,
+                tree: @pages.to_tree,
                 alpine_data: "$store.nav.pages" do |nav| %>
                 <%= nav.toolbar do |toolbar| %>
                   <% toolbar.section padded: true do %>

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

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

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

@@ -13,8 +13,8 @@
       </style>
     <% end %>
 
-    <%= lookbook_render :header, id: "app-header", debug_menu: config.debug_menu do |header| %>
-      <% header.branding { config.project_name } %>
+    <%= lookbook_render :header, id: "app-header", debug_menu: @config.debug_menu do |header| %>
+      <% header.branding { @config.project_name } %>
     <% end %>
 
     <%= content_for?(:shell) ? yield(:shell) : yield %>

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

@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
 
   <link href="<%= asset_path("/css/lookbook.css") %>" rel="stylesheet">
-  <link href="<%= asset_path("/css/themes/#{config.ui_theme}.css") %>" rel="stylesheet">
+  <link href="<%= asset_path("/css/themes/#{@config.ui_theme}.css") %>" rel="stylesheet">
 
   <%- if @theme_overrides.present? %>
     <style media="all">
@@ -14,7 +14,7 @@
     </style>
   <% end %>
 
-  <% if config.ui_favicon == true %>
+  <% if @config.ui_favicon == true %>
     <link
       rel="icon"
       href="data:image/svg+xml,%3Csvg width='96' height='84' viewBox='0 0 96 84' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath d='M96 0v84H0V0h96Z'/%3E%3C/clipPath%3E%3CclipPath id='b'%3E%3Cpath d='M71.897 0a1.5 1.5 0 0 1 1.31.769l22.605 40.5a1.5 1.5 0 0 1 0 1.462l-22.605 40.5a1.5 1.5 0 0 1-1.31.769H49.481a1 1 0 0 1-.873-1.487L70.812 42.73a1.5 1.5 0 0 0 0-1.462L48.608 1.487A1 1 0 0 1 49.481 0ZM24.655.564l22.72 40.705a1.5 1.5 0 0 1 0 1.462l-22.72 40.705a1 1 0 0 1-1.746 0L.19 42.73a1.5 1.5 0 0 1 0-1.462L22.91.564a1 1 0 0 1 1.746 0Z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23a)'%3E%3Cg clip-path='url(%23b)'%3E%3Cpath fill='<%= url_encode theme.favicon_dark_mode %>' d='M0 0h96v84H0V0z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"
@@ -26,10 +26,10 @@
   <% end %>
 
   <script>
-    window.LOG_LEVEL = <%= config.log_level %>;
-    window.APP_NAME = "<%= Lookbook::Engine.app_name %>";
-    <% if Lookbook::Engine.websocket.mounted? %>
-    window.SOCKET_PATH = "<%= Lookbook::Engine.websocket.full_mount_path %>";
+    window.LOG_LEVEL = <%= @config.log_level %>;
+    window.APP_NAME = "<%= @engine.app_name %>";
+    <% if @engine.websocket.mounted? %>
+    window.SOCKET_PATH = "<%= @engine.websocket.full_mount_path %>";
     <% end %>
   </script>
   
@@ -38,7 +38,7 @@
     <script src="<%= asset_path("/js/embed.js") %>" defer></script>
   <% end %>
   
-  <title><%= [@title, config.project_name || "Lookbook"].compact.join(" :: ") %></title>
+  <title><%= [@title, @config.project_name || "Lookbook"].compact.join(" :: ") %></title>
 </head>
 <body>
   <%= yield :body %>

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

@@ -1,6 +1,6 @@
 <div id="landing" class="flex flex-col items-center justify-center h-full w-full">
   <div class="text-center" id="landing-<%= @previews.any? ? "with" : "no" %>-content">
-  <% if config.project_name.downcase == "lookbook" %>
+  <% if @config.project_name.downcase == "lookbook" %>
     <div class="flex justify-center pb-4">
       <svg class="flex-none mx-auto w-[140px]" viewBox="0 0 275 36">
         <g fill-rule="nonzero" fill="none">
@@ -9,9 +9,9 @@
         </g>
       </svg>
     </div>
-  <% elsif config.project_name != false %>
+  <% elsif @config.project_name != false %>
     <h5 class="text-base text-lookbook-blank-slate-title truncate uppercase font-black tracking-wide mb-2">
-      <%= config.project_name %>
+      <%= @config.project_name %>
     </h5>
   <% end %>
     <div class="opacity-60">

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

@@ -1,11 +1,11 @@
 <% if @params.none? %>
-  <div class="p-4 w-full h-full bg-lookbook-prose-bg">
+  <div class="p-4 w-full h-full bg-lookbook-prose-bg" id="params-editor-blank-slate">
     <%= lookbook_render :prose do %>
       <em class='opacity-50'>No params configured.</em>
     <% end %>
   </div>
 <% else %>
-  <div class="p-4 w-full h-full overflow-x-hidden">
+  <div class="p-4 w-full h-full overflow-x-hidden" id="params-editor-<%= @target.id %>">
     <%= lookbook_render "params/editor" do |editor| %>
       <% @params.each do |param| %>
         <% editor.field param: param %>

data/config/languages.yml

@@ -0,0 +1,41 @@
+shared:
+  definitions:
+    - name: ruby
+      ext: .rb
+      label: Ruby
+      comment: "# %s"
+
+    - name: html
+      ext: .html
+      label: HTML
+      comment: "<!-- %s -->"
+
+    - name: erb
+      ext: .erb
+      label: ERB
+      comment: "<%%# %s %%>"
+
+    - name: haml
+      ext: .haml
+      label: Haml
+      comment: "<!-- %s -->"
+
+    - name: slim
+      ext: .slim
+      label: Slim
+      comment: "<!-- %s -->"
+
+    - name: tsx
+      ext: .tsx
+      label: TypeScript
+      comment: "// %s"
+
+    - name: js
+      ext: .js
+      label: JavasScript
+      comment: "// %s"
+
+    - name: css
+      ext: .css
+      label: CSS
+      comment: "/* %s */"

data/config/panels.yml

@@ -27,4 +27,4 @@ shared:
       partial: lookbook/inspector/panels/params
       label: Params
       hotkey: p
-      disabled: ->(data) { data.preview.params.none? }
+      disabled: ->(data) { data.context.params.none? }

data/config/tags.yml

@@ -30,3 +30,7 @@ shared:
   logical_path:
     label: Logical Path
     opts: {}
+
+  source:
+    label: Source file
+    opts: {}

data/lib/lookbook/engine.rb

@@ -42,15 +42,16 @@ module Lookbook
 
     initializer "lookbook.file_watcher.pages" do
       file_watcher.watch(opts.page_paths, opts.page_extensions) do |changes|
-        self.class.websocket.broadcast(:reload)
+        Engine.pages.load(Engine.page_paths)
+        Engine.websocket.broadcast(:reload)
         run_hooks(:after_change, changes)
       end
     end
 
-    initializer "lookbook.parser.preview_load_callback" do
-      parser.after_parse do |registry|
-        Preview.load!(registry.all(:class))
-        self.class.websocket.broadcast(:reload)
+    initializer "lookbook.parser.previews_load_callback" do
+      parser.after_parse do |code_objects|
+        Engine.previews.load(code_objects.all(:class))
+        Engine.websocket.broadcast(:reload)
       end
     end
 
@@ -74,6 +75,7 @@ module Lookbook
     end
 
     config.after_initialize do
+      Engine.pages.load(Engine.page_paths)
       parser.parse { run_hooks(:after_initialize) }
     end
 
@@ -82,71 +84,91 @@ module Lookbook
     end
 
     def run_hooks(event_name, *args)
-      self.class.hooks.for_event(event_name).each do |hook|
+      Engine.hooks.for_event(event_name).each do |hook|
         hook.call(Lookbook, *args)
       end
     end
 
     def parser
-      @parser ||= PreviewParser.new(opts.preview_paths, Engine.tags)
+      @_parser ||= PreviewParser.new(opts.preview_paths, Engine.tags)
     end
 
     def file_watcher
-      @file_watcher ||= FileWatcher.new(force_polling: opts.listen_use_polling)
+      @_file_watcher ||= FileWatcher.new(force_polling: opts.listen_use_polling)
     end
 
     def process
-      @process ||= Process.new(env: Rails.env)
+      @_process ||= Process.new(env: Rails.env)
     end
 
     def listen?
       opts.listen && process.supports_listening?
     end
 
-    def self.mount_path
-      routes.find_script_name({})
-    end
+    class << self
+      def mount_path
+        routes.find_script_name({})
+      end
 
-    def self.mounted?
-      mount_path.present?
-    end
+      def mounted?
+        mount_path.present?
+      end
 
-    def self.app_name
-      name = if Rails.application.class.respond_to?(:module_parent_name)
-        Rails.application.class.module_parent_name
-      else
-        Rails.application.class.parent_name
+      def app_name
+        name = if Rails.application.class.respond_to?(:module_parent_name)
+          Rails.application.class.module_parent_name
+        else
+          Rails.application.class.parent_name
+        end
+        name.underscore
       end
-      name.underscore
-    end
 
-    def self.websocket
-      if mounted?
-        use_websocket = opts.auto_refresh && opts.listen && process.supports_listening?
-        @websocket ||= use_websocket ? Websocket.new(mount_path, logger: Lookbook.logger) : Websocket.noop
-      else
-        Websocket.noop
+      def websocket
+        if mounted?
+          use_websocket = opts.auto_refresh && opts.listen && process.supports_listening?
+          @websocket ||= use_websocket ? Websocket.new(mount_path, logger: Lookbook.logger) : Websocket.noop
+        else
+          Websocket.noop
+        end
       end
-    end
 
-    def self.panels
-      @panels ||= PanelStore.init_from_config
-    end
+      def panels
+        @_panels ||= PanelStore.init_from_config
+      end
 
-    def self.inputs
-      @inputs ||= InputStore.init_from_config
-    end
+      def inputs
+        @_inputs ||= InputStore.init_from_config
+      end
 
-    def self.tags
-      @tags ||= TagStore.init_from_config
-    end
+      def tags
+        @_tags ||= TagStore.init_from_config
+      end
 
-    def self.hooks
-      @hooks ||= HookStore.init_from_config
-    end
+      def hooks
+        @_hooks ||= HookStore.init_from_config
+      end
+
+      def component_paths
+        @_component_paths ||= Array(PathUtils.to_absolute(opts.components_path))
+      end
+
+      def page_paths
+        @_page_paths ||= PathUtils.normalize_paths(opts.page_paths)
+      end
+
+      def preview_paths
+        @_preview_paths ||= PathUtils.normalize_paths(opts.preview_paths)
+      end
+
+      def pages
+        @_pages ||= PageCollection.new
+      end
+
+      def previews
+        @_previews ||= PreviewCollection.new
+      end
 
-    def self.preview_controller
-      @preview_controller
+      attr_reader :preview_controller
     end
 
     at_exit do

data/lib/lookbook/entities/collections/component_collection.rb

@@ -0,0 +1,4 @@
+module Lookbook
+  class ComponentCollection < EntityCollection
+  end
+end

data/lib/lookbook/entities/collections/concerns/hierarchical_collection.rb

@@ -0,0 +1,27 @@
+module Lookbook
+  module HierarchicalCollection
+    extend ActiveSupport::Concern
+
+    included do
+      def entities
+        @_cache[:entities] ||= collect_ordered_entities(to_tree(include_hidden: true))
+      end
+
+      def to_tree(include_hidden: false)
+        @_cache[include_hidden ? :tree_with_hidden : :tree] ||= EntityTreeBuilder.call(@entities, include_hidden: include_hidden)
+      end
+
+      protected
+
+      def collect_ordered_entities(start_node)
+        start_node.inject([]) do |entities, node|
+          entities.append(node.content? ? node.content : collect_ordered_entities(node))
+        end.flatten
+      end
+
+      def sort_entities
+        @entities.sort_by! { |entity| [entity.depth, entity.position, entity.label] }
+      end
+    end
+  end
+end

data/lib/lookbook/entities/collections/entity_collection.rb

@@ -0,0 +1,66 @@
+module Lookbook
+  class EntityCollection
+    include Enumerable
+
+    delegate_missing_to :entities
+
+    attr_reader :entities
+
+    def initialize(entities = nil)
+      @_cache = {}
+      @entities = []
+      add(entities)
+    end
+
+    def add(entities = nil)
+      Array(entities).each do |entity|
+        unless find_by_path(entity.path)
+          clear_cache
+          @entities.push(entity)
+        end
+      end
+      sort_entities
+    end
+
+    def find_by_id(id)
+      id = Utils.id(id)
+      find { |entity| entity.id == id }
+    end
+
+    def find_by_path(path)
+      find { |entity| entity.path.to_s == path.to_s }
+    end
+
+    def next(entity)
+      index = find_index { |i| i.path == entity.path }
+      entities[index + 1] unless index.nil?
+    end
+
+    def previous(entity)
+      index = find_index { |i| i.path == entity.path }
+      entities[index - 1] if !index.nil? && index > 0
+    end
+
+    def each(&block)
+      if block
+        entities.each { |entity| yield entity }
+      else
+        to_enum(:each)
+      end
+    end
+
+    def flat_map(...)
+      map(...).map(&:to_a).flatten
+    end
+
+    protected
+
+    def sort_entities
+      @entities.sort_by! { |entity| [entity.label] }
+    end
+
+    def clear_cache
+      @_cache = {}
+    end
+  end
+end

data/lib/lookbook/entities/collections/page_collection.rb

@@ -0,0 +1,30 @@
+module Lookbook
+  class PageCollection < EntityCollection
+    include HierarchicalCollection
+
+    def load(page_paths)
+      @entities = []
+      clear_cache
+
+      file_paths = page_paths.flat_map do |dir|
+        PathUtils.normalize_paths(Dir["#{dir}/**/*.html.*", "#{dir}/**/*.md.*"].sort)
+      end
+
+      entities = file_paths.map { |path| PageCollection.entity(path) }
+      pages, sections = entities.partition { |page| page.type == :page }
+
+      page_dict = pages.index_by(&:lookup_path)
+      sections.each do |section|
+        parent = page_dict[section.lookup_path]
+        section.parent = parent
+        parent.add_section(section)
+      end
+
+      add(pages)
+    end
+
+    def self.entity(file_path)
+      File.basename(file_path).match?(%r{\[(.*?\w+)\]}) ? PageSection.new(file_path) : Page.new(file_path)
+    end
+  end
+end

data/lib/lookbook/entities/collections/preview_collection.rb

@@ -0,0 +1,35 @@
+module Lookbook
+  class PreviewCollection < EntityCollection
+    include HierarchicalCollection
+
+    def find_example_by_path(lookup_path)
+      examples.find_by_path(lookup_path)
+    end
+
+    def find_by_preview_class(klass)
+      find { |preview| preview.preview_class.name == klass.to_s }
+    end
+
+    def load(code_objects)
+      @entities = []
+      clear_cache
+
+      previews = Array(code_objects).map { |obj| PreviewCollection.preview_from_code_object(obj) }.compact
+      add(previews)
+    end
+
+    def self.preview_from_code_object(code_object)
+      klass = code_object.path.constantize
+      Preview.new(code_object) if klass.ancestors.include?(ViewComponent::Preview)
+    rescue => exception
+      Lookbook.logger.error LookbookError.new(exception)
+      nil
+    end
+
+    protected
+
+    def examples
+      @_cache[:examples] ||= PreviewExampleCollection.new(flat_map(&:examples))
+    end
+  end
+end

data/lib/lookbook/entities/collections/preview_example_collection.rb

@@ -0,0 +1,9 @@
+module Lookbook
+  class PreviewExampleCollection < EntityCollection
+    protected
+
+    def sort_entities
+      @entities.sort_by!(&:label) if Lookbook.config.sort_examples
+    end
+  end
+end