lookbook 2.0.0.beta.4 → 2.0.0.beta.5

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

@@ -11,9 +11,11 @@
 
     <%= render "lookbook/partials/user_styles" %>
 
-    <%= lookbook_render :header, id: "app-header", debug_menu: @config.debug_menu do |header| %>
-      <% header.with_branding { @config.project_name } %>
-    <% end %>
+    <%= lookbook_render :header,
+      id: "app-header",
+      debug_menu: @config.debug_menu,
+      project_name: @config.project_name,
+      project_logo: @config.project_logo %>
 
     <% if @previews.any? || @pages.any? %>
       
@@ -30,58 +32,54 @@
           "@click.outside": "closeMobileSidebar",
           cloak: true do %>
 
-          <% cache @engine.last_changed do %>
-
-            <%= lookbook_render :split_layout,
-              alpine_data: "$store.layout.#{@pages.any? && @previews.any? ? "sidebar" : "singleSectionSidebar"}",
-              style: "height: calc(100vh - 2.5rem);" do |layout| %>
+          <%= lookbook_render :split_layout,
+            alpine_data: "$store.layout.#{@pages.any? && @previews.any? ? "sidebar" : "singleSectionSidebar"}",
+            style: "height: calc(100vh - 2.5rem);" do |layout| %>
 
-              <% if @previews.any? %>
-                <% layout.with_pane class: "overflow-hidden" do %>
-                  <%= lookbook_render :nav,
-                    id: "previews-nav",
-                    tree: @previews.to_tree,
-                    alpine_data: "$store.nav.previews" do |nav| %>
-                    <%= nav.with_toolbar do |toolbar| %>
-                      <% toolbar.with_section padded: true do %>
-                        <h4 class="pt-1">Previews</h4>
-                      <% end %>
-                      <% toolbar.with_section align: :right, padded: false do %>
-                        <%= lookbook_render :button_group, size: :xs do |group| %>
-                          <% group.with_button icon: :minus_square,
-                            tooltip: "Collapse all",
-                            "@click": "closeAll" %>
-                        <% end %>
+            <% if @previews.any? %>
+              <% layout.with_pane class: "overflow-hidden" do %>
+                <%= lookbook_render :nav,
+                  id: "previews-nav",
+                  tree: @previews.to_tree,
+                  alpine_data: "$store.nav.previews" do |nav| %>
+                  <%= nav.with_toolbar do |toolbar| %>
+                    <% toolbar.with_section padded: true do %>
+                      <h4 class="pt-1">Previews</h4>
+                    <% end %>
+                    <% toolbar.with_section align: :right, padded: false do %>
+                      <%= lookbook_render :button_group, size: :xs do |group| %>
+                        <% group.with_button icon: :minus_square,
+                          tooltip: "Collapse all",
+                          "@click": "closeAll" %>
                       <% end %>
                     <% end %>
-                    <% nav.with_filter store: "$store.nav.previews.filter", placeholder: "Filter previews by name&hellip;" %>
                   <% end %>
+                  <% nav.with_filter store: "$store.nav.previews.filter", placeholder: "Filter previews by name&hellip;" %>
                 <% end %>
               <% end %>
+            <% end %>
 
-              <% if @pages.any? %>
-                <% layout.with_pane class: "overflow-hidden" do %>
-                  <%= lookbook_render :nav,
-                    id: "pages-nav",
-                    tree: @pages.to_tree,
-                    alpine_data: "$store.nav.pages" do |nav| %>
-                    <%= nav.with_toolbar do |toolbar| %>
-                      <% toolbar.with_section padded: true do %>
-                        <h4 class="pt-1">Pages</h4>
-                      <% end %>
-                      <% toolbar.with_section align: :right, padded: false do %>
-                        <%= lookbook_render :button_group, size: :xs do |group| %>
-                          <% group.with_button icon: :minus_square,
-                            tooltip: "Collapse all",
-                            "@click": "closeAll" %>
-                        <% end %>
+            <% if @pages.any? %>
+              <% layout.with_pane class: "overflow-hidden" do %>
+                <%= lookbook_render :nav,
+                  id: "pages-nav",
+                  tree: @pages.to_tree,
+                  alpine_data: "$store.nav.pages" do |nav| %>
+                  <%= nav.with_toolbar do |toolbar| %>
+                    <% toolbar.with_section padded: true do %>
+                      <h4 class="pt-1">Pages</h4>
+                    <% end %>
+                    <% toolbar.with_section align: :right, padded: false do %>
+                      <%= lookbook_render :button_group, size: :xs do |group| %>
+                        <% group.with_button icon: :minus_square,
+                          tooltip: "Collapse all",
+                          "@click": "closeAll" %>
                       <% end %>
                     <% end %>
                   <% end %>
                 <% end %>
               <% end %>
             <% end %>
-
           <% end %>
         <% end %>
 

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

@@ -14,15 +14,9 @@
     </style>
   <% end %>
 
-  <% if @config.ui_favicon == true %>
-    <link
-      rel="icon"
-      href="data:image/svg+xml,%3Csvg viewBox='0 0 167 204' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23FFF' fill-rule='nonzero'%3E%3Cpath d='M157 0c5.523 0 10 4.477 10 10v184c0 5.523-4.477 10-10 10H32.969C17 204 3.687 192.638.65 177.554A9.97 9.97 0 0 1 0 174c0-.512.011-1.017.033-1.516A33.115 33.115 0 0 1 0 171V33C0 14.778 14.758 0 32.969 0H157Zm-10 166H32.969c-8.292 0-12.22 2.22-12.871 6.606.79 6.424 6.253 11.394 12.87 11.394H147v-18Zm0-146H32.969c-7.056 0-12.8 5.65-12.965 12.689L20 33v114.762c3.932-1.167 8.3-1.762 12.969-1.762H147V20Z'/%3E%3Cpath d='M64.022 126c-4.107 0-7.304-1.143-9.591-3.428-2.287-2.285-3.431-5.48-3.431-9.583l.14-63.978c0-4.197 1.12-7.415 3.36-9.653C56.74 37.119 59.916 36 64.023 36c4.2 0 7.398 1.12 9.592 3.358 2.193 2.238 3.29 5.456 3.29 9.653l-.14 55.584h34.166c3.547 0 6.277.91 8.19 2.728 1.915 1.819 2.871 4.454 2.871 7.905 0 3.45-.956 6.109-2.87 7.974-1.914 1.865-4.644 2.798-8.191 2.798H64.022Z'/%3E%3C/g%3E%3C/svg%3E"
-      media="(prefers-color-scheme: dark)">
-    <link
-      rel="icon"
-      href="data:image/svg+xml,%3Csvg viewBox='0 0 167 204' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%233730A3' fill-rule='nonzero'%3E%3Cpath d='M157 0c5.523 0 10 4.477 10 10v184c0 5.523-4.477 10-10 10H32.969C17 204 3.687 192.638.65 177.554A9.97 9.97 0 0 1 0 174c0-.512.011-1.017.033-1.516A33.115 33.115 0 0 1 0 171V33C0 14.778 14.758 0 32.969 0H157Zm-10 166H32.969c-8.292 0-12.22 2.22-12.871 6.606.79 6.424 6.253 11.394 12.87 11.394H147v-18Zm0-146H32.969c-7.056 0-12.8 5.65-12.965 12.689L20 33v114.762c3.932-1.167 8.3-1.762 12.969-1.762H147V20Z'/%3E%3Cpath d='M64.022 126c-4.107 0-7.304-1.143-9.591-3.428-2.287-2.285-3.431-5.48-3.431-9.583l.14-63.978c0-4.197 1.12-7.415 3.36-9.653C56.74 37.119 59.916 36 64.023 36c4.2 0 7.398 1.12 9.592 3.358 2.193 2.238 3.29 5.456 3.29 9.653l-.14 55.584h34.166c3.547 0 6.277.91 8.19 2.728 1.915 1.819 2.871 4.454 2.871 7.905 0 3.45-.956 6.109-2.87 7.974-1.914 1.865-4.644 2.798-8.191 2.798H64.022Z'/%3E%3C/g%3E%3C/svg%3E"
-      media="(prefers-color-scheme: light)">
+  <% unless @config.ui_favicon == false %>
+    <link rel="icon" href="<%= @config.ui_favicon_dark %>" media="(prefers-color-scheme: dark)">
+    <link rel="icon" href="<%= @config.ui_favicon_light %>" media="(prefers-color-scheme: light)">
   <% end %>
 
   <script>

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

@@ -1,5 +1,6 @@
 <div class="overflow-hidden h-full w-full">
   <%= lookbook_render :viewport,
+    key: (lookbook_preview_path(request.query_parameters).parameterize unless Rails.env.test?),
     iframe_id: "preview-iframe",
     src: lookbook_preview_path(request.query_parameters.merge(lookbook_timestamp: Time.now)),
     alpine_data: "$store.inspector.main",

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

@@ -63,11 +63,19 @@
               target: "_blank" %>
 
             <% group.with_button id: "show-drawer-button",
-              icon: "vertical ? 'sidebar' : 'credit-card'",
+              icon: "sidebar",
               tooltip: "Show drawer",
               "@click": "$store.inspector.drawer.hidden = false",
               class: "rotate-180",
-              "x-show": "$store.inspector.drawer.hidden",
+              "x-show": "$store.inspector.drawer.hidden && vertical",
+              cloak: true %>
+
+            <% group.with_button id: "show-drawer-button",
+              icon: "credit-card",
+              tooltip: "Show drawer",
+              "@click": "$store.inspector.drawer.hidden = false",
+              class: "rotate-180",
+              "x-show": "$store.inspector.drawer.hidden && !vertical",
               cloak: true %>
           <% end %>
         <% end %>

data/config/app.yml

@@ -1,5 +1,6 @@
 shared:
-  project_name: Lookbook
+  project_name: ~
+  project_logo: ~
 
   preview_paths: [test/components/previews]
   preview_display_options: {}

data/lib/lookbook/engine.rb

@@ -14,14 +14,21 @@ module Lookbook
       )
     end
 
+    initializer "lookbook.set_autoload_paths" do
+      unless opts.preview_paths.empty?
+        paths_to_add = opts.preview_paths - ActiveSupport::Dependencies.autoload_paths
+        ActiveSupport::Dependencies.autoload_paths.concat(paths_to_add) if paths_to_add.any?
+      end
+    end
+
     config.before_configuration do
       config.lookbook = Lookbook.config
 
       if defined?(ViewComponent)
-        config.lookbook.using_view_component = true
+        config.lookbook.using_view_component ||= true
       else
         require "view_component"
-        config.lookbook.using_view_component = false
+        config.lookbook.using_view_component ||= false
       end
     end
 
@@ -114,7 +121,7 @@ module Lookbook
       end
 
       def hooks
-        @_hooks ||= HookStore.init_from_config
+        @_hooks ||= HookStore.new
       end
 
       def run_hooks(event_name, *args)
@@ -159,10 +166,10 @@ module Lookbook
       end
 
       def preview_watch_paths
-        return @_preview_watch_paths if @_preview_watch_paths
-
-        paths = [*opts.preview_paths, *opts.component_paths, *opts.listen_paths, *view_paths].uniq
-        @_preview_watch_paths ||= PathUtils.normalize_paths(paths)
+        @_preview_watch_paths ||= begin
+          paths = [*opts.preview_paths, *opts.component_paths, *opts.listen_paths, *view_paths].uniq
+          PathUtils.normalize_paths(paths)
+        end
       end
 
       def pages
@@ -184,13 +191,17 @@ module Lookbook
         changed_files = [*changes[:added], *changes[:modified]] if changes
         parser.parse(changed_files) do |code_objects|
           previews.load(code_objects.all(:class), changes)
-          mark_changed
         end
+      rescue => e
+        Lookbook.logger.error(e)
+        raise e
       end
 
       def load_pages(changes = nil)
         pages.load(Engine.page_paths, changes)
-        mark_changed
+      rescue => e
+        Lookbook.logger.error(e)
+        raise e
       end
 
       def notify_clients(changes = nil)
@@ -205,15 +216,6 @@ module Lookbook
         reloaders.register_changes(changes)
         notify_clients(changes)
       end
-
-      def mark_changed
-        @_last_changed = (Time.now.to_f * 1000).to_i
-      end
-
-      def last_changed
-        mark_changed unless @_last_changed
-        @_last_changed
-      end
     end
 
     at_exit do

data/lib/lookbook/entities/concerns/navigable_entity.rb

@@ -31,7 +31,12 @@ module Lookbook
           fetch_config(:priority, default_priority)
         end
 
-        @_priority ||= pos.to_i
+        @_priority ||= @_fallback_priority || pos.to_i
+      end
+
+      # @api private
+      def default_priority=(i)
+        @default_priority = i.to_i
       end
 
       # @api private

data/lib/lookbook/entities/preview_entity.rb

@@ -173,11 +173,31 @@ module Lookbook
     protected
 
     def load_scenarios
-      return scenario_entities unless code_object.groups.any?
-
-      scenario_entities.group_by(&:group).flat_map do |group_name, grouped_scenarios|
-        group_name.nil? ? grouped_scenarios : ScenarioGroupEntity.new(group_name.presence || label.pluralize, grouped_scenarios, self)
+      code_object.groups.any? ? grouped_scenario_entities : scenario_entities
+    end
+
+    def grouped_scenario_entities
+      scenarios = []
+      scenario_entities.each.with_index(1) do |entity, i|
+        if entity.group.nil?
+          entity.default_priority = i
+          scenarios << entity
+        else
+          group_name = entity.group.presence || entity.parent.name.pluralize
+          group = scenarios.find do |s|
+            s.is_a?(ScenarioGroupEntity) && s.name == Utils.name(group_name)
+          end
+
+          if group
+            group.add_scenario(entity)
+          else
+            group = ScenarioGroupEntity.new(group_name, [entity], self)
+            group.default_priority = i
+            scenarios << group
+          end
+        end
       end
+      scenarios
     end
 
     def scenario_entities

data/lib/lookbook/entities/scenario_group_entity.rb

@@ -126,5 +126,10 @@ module Lookbook
     def search_terms
       [parent.label, label]
     end
+
+    # @api private
+    def add_scenario(scenario)
+      @scenarios.add(scenario)
+    end
   end
 end

data/lib/lookbook/preview.rb

@@ -35,6 +35,10 @@ module Lookbook
     alias_method :render_component, :render
 
     class << self
+      def preview_name
+        name.chomp("Preview").underscore
+      end
+
       # Returns the arguments for rendering of the component in its layout
       def render_args(scenario, params: {})
         scenario_params_names = instance_method(scenario).parameters.map(&:last)

data/lib/lookbook/services/urls/data_uri_encoder.rb

@@ -0,0 +1,14 @@
+module Lookbook
+  class DataUriEncoder < Service
+    attr_reader :str, :mime_type
+
+    def initialize(str, mime_type)
+      @str = str
+      @mime_type = mime_type
+    end
+
+    def call
+      "data:#{mime_type},#{ERB::Util.url_encode(str)}"
+    end
+  end
+end

data/lib/lookbook/services/urls/file_data_uri_encoder.rb

@@ -0,0 +1,24 @@
+require "marcel"
+
+module Lookbook
+  class FileDataUriEncoder < Service
+    attr_reader :path
+
+    def initialize(path, mime_type = nil)
+      @path = path
+      @mime_type = mime_type
+    end
+
+    def content
+      File.read(path)
+    end
+
+    def mime_type
+      @mime_type || Marcel::MimeType.for(Pathname.new(path))
+    end
+
+    def call
+      DataUriEncoder.call(content, mime_type)
+    end
+  end
+end

data/lib/lookbook/stores/config_store.rb

@@ -15,6 +15,10 @@ module Lookbook
   # @api public
   class ConfigStore
     CONFIG_FILE = "config/app.yml"
+    DEFAULT_FAVICONS = {
+      light: "app/assets/lookbook/img/favicon_light.svg",
+      dark: "app/assets/lookbook/img/favicon_dark.svg"
+    }
 
     delegate_missing_to :store
     attr_reader :store
@@ -23,8 +27,20 @@ module Lookbook
       @store = Store.new(config, recursive: true)
     end
 
+    def project_name
+      if store[:project_name].nil?
+        if store[:project_logo].nil?
+          Rails.application.class.module_parent.name.titleize
+        else
+          false
+        end
+      else
+        store[:project_name]
+      end
+    end
+
     def project_name=(name)
-      store[:project_name] = (name == false) ? nil : name
+      store[:project_name] = name
     end
 
     def page_extensions=(extensions = nil)
@@ -52,6 +68,14 @@ module Lookbook
       end
     end
 
+    def ui_favicon_light
+      @_ui_favicon_light ||= get_favicon(:light)
+    end
+
+    def ui_favicon_dark
+      @_ui_favicon_dark ||= get_favicon(:dark)
+    end
+
     def ui_theme_overrides(&block)
       if block
         yield store[:ui_theme_overrides]
@@ -67,5 +91,26 @@ module Lookbook
     def self.default_config(env: Rails.env)
       ConfigLoader.call(CONFIG_FILE, env: env)
     end
+
+    private
+
+    def get_favicon(theme)
+      default_favicon_path = Engine.root.join(DEFAULT_FAVICONS[theme])
+      default_favicon = FileDataUriEncoder.call(default_favicon_path)
+
+      if ui_favicon.present?
+        if ui_favicon.is_a?(Hash)
+          if ui_favicon[theme].is_a?(String)
+            DataUriEncoder.call(ui_favicon[theme], "image/svg+xml")
+          else
+            default_favicon
+          end
+        elsif ui_favicon.is_a?(String)
+          DataUriEncoder.call(ui_favicon, "image/svg+xml")
+        else
+          default_favicon
+        end
+      end
+    end
   end
 end

data/lib/lookbook/stores/hook_store.rb

@@ -1,7 +1,5 @@
 module Lookbook
   class HookStore
-    CONFIG_FILE = "config/hooks.yml"
-
     attr_reader :store
     delegate :to_h, to: :store
 
@@ -16,13 +14,5 @@ module Lookbook
     def for_event(event_name)
       store[event_name.to_sym] ||= []
     end
-
-    def self.init_from_config
-      new(default_config)
-    end
-
-    def self.default_config
-      ConfigLoader.call(CONFIG_FILE)
-    end
   end
 end

data/lib/lookbook/stores/input_store.rb

@@ -11,6 +11,7 @@ module Lookbook
       @store = {}
 
       config.to_h.each do |name, opts|
+        opts[:system] = true
         add_input(name, opts[:partial], opts.except(:partial))
       end
     end
@@ -47,11 +48,16 @@ module Lookbook
         partial = args.first
       end
       if partial.present?
-        Store.new({
+        input = Store.new({
           name: name.to_sym,
           partial: partial,
           options: DEFAULTS.merge(opts.to_h)
         })
+        if input.options.key?(:system)
+          input.system = input.options[:system]
+          input.options.delete(:system)
+        end
+        input
       else
         raise ConfigError.new("inputs must define a partial path", scope: "inputs.config")
       end

data/lib/lookbook/stores/panel_store.rb

@@ -41,7 +41,10 @@ module Lookbook
     end
 
     def load_config(config)
-      config.to_h.each { |name, opts| add_panel(name, opts) }
+      config.to_h.each do |name, opts|
+        opts[:system] = true
+        add_panel(name, opts)
+      end
     end
 
     def get_panel(name)

data/lib/lookbook/stores/tag_store.rb

@@ -7,15 +7,15 @@ module Lookbook
 
     def initialize(config = nil)
       @store = {}
-      config.to_h.each { |k, v| add_tag(k, v) }
+      config.to_h.each { |k, opts| add_tag(k, opts, true) }
     end
 
-    def add_tag(name, opts = nil)
+    def add_tag(name, opts = nil, is_system = false)
       name = name.to_sym
       if store.key?(name)
         raise ConfigError.new("tag with name '#{name}' already exists", scope: "tags.config")
       else
-        store[name] = build_config(name, opts)
+        store[name] = build_config(name, opts, is_system)
       end
     end
 
@@ -33,11 +33,12 @@ module Lookbook
 
     protected
 
-    def build_config(name, opts = nil)
+    def build_config(name, opts = nil, is_system = false)
       Store.new({
         name: name.to_sym,
         label: name.to_s.titleize,
-        options: opts.to_h
+        options: opts.to_h,
+        system: is_system
       })
     end
   end

data/lib/lookbook/version.rb

@@ -1,3 +1,3 @@
 module Lookbook
-  VERSION = "2.0.0.beta.4"
+  VERSION = "2.0.0.beta.5"
 end

data/lib/lookbook.rb

@@ -218,9 +218,9 @@ module Lookbook
               view_component: config.using_view_component
             }
           },
-          {panels: Engine.panels.to_h},
-          {inputs: Engine.inputs.to_h},
-          {tags: Engine.tags.to_h}
+          {panels: Engine.panels.to_h.reject { |k, v| v[:system] }},
+          {inputs: Engine.inputs.to_h.reject { |k, v| v[:system] }},
+          {tags: Engine.tags.to_h.reject { |k, v| v[:system] }}
         ].inject(:merge)
       }
     end