Merge pull request #556 from ViewComponent/page-search

Sidebar customisation improvements
lookbook-hq · Nov 23, 2023 · 044508a · 044508a
2 parents cc8eb72 + 8430db4
commit 044508a
Show file tree

Hide file tree

Showing 8 changed files with 110 additions and 52 deletions.
diff --git a/app/controllers/lookbook/application_controller.rb b/app/controllers/lookbook/application_controller.rb
@@ -48,7 +48,8 @@ def assign_instance_vars
       @config = Lookbook.config
       @engine = Lookbook.engine
       @embed = !!params[:lookbook_embed]
-      @blank_slate = Engine.pages.none? && Engine.previews.none?
+      @sidebar_panels = sidebar_panels
+      @blank_slate = @sidebar_panels.none?
     end
 
     def raise_not_found(message = "Page not found")
@@ -71,6 +72,13 @@ def current_layout
 
     private
 
+    def sidebar_panels
+      panels_config = Lookbook.config.preview_inspector.sidebar_panels.map(&:to_sym)
+      panels_config.select do |panel|
+        (panel == :pages && Engine.pages.any?) || (panel == :previews && Engine.previews.any?)
+      end
+    end
+
     def get_status_code(err)
       if err.respond_to?(:status)
         err.status

diff --git a/app/views/layouts/lookbook/application.html.erb b/app/views/layouts/lookbook/application.html.erb
@@ -17,7 +17,7 @@
       project_name: @config.project_name,
       project_logo: @config.project_logo %>
 
-    <% if @previews.any? || @pages.any? %>
+    <% unless @blank_slate %>
       
       <%= lookbook_render :split_layout,
         alpine_data: "$store.layout.main",
@@ -32,48 +32,57 @@
           "x-on:click.outside": "closeMobileSidebar",
           cloak: true do %>
 
-          <%= lookbook_render :split_layout,
-            alpine_data: "$store.layout.#{@pages.any? && @previews.any? ? "sidebar" : "singleSectionSidebar"}",
-            style: "height: calc(100vh - 2.5rem);" do |layout| %>
+          <% if @sidebar_panels.any? %>  
+            <%= lookbook_render :split_layout,
+              alpine_data: "$store.layout.#{@sidebar_panels.many? ? "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"><%= @config.preview_collection_label %></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",
-                          "x-on:click": "closeAll" %>
+              <% @sidebar_panels.each do |panel| %>
+                <% if panel == :previews && @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"><%= @config.preview_collection_label %></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",
+                              "x-on:click": "closeAll" %>
+                          <% end %>
+                        <% end %>
+                      <% end %>
+                      <% if @config.preview_search %>
+                        <% nav.with_filter store: "$store.nav.previews.filter", placeholder: "Filter previews by name&hellip;" %>
                       <% end %>
                     <% end %>
                   <% 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"><%= @config.page_collection_label %></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",
-                          "x-on:click": "closeAll" %>
+                <% if panel == :pages && @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"><%= @config.page_collection_label %></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",
+                              "x-on:click": "closeAll" %>
+                          <% end %>
+                        <% end %>
+                      <% end %>
+                      <% if @config.page_search %>
+                        <% nav.with_filter store: "$store.nav.pages.filter", placeholder: "Filter pages by name&hellip;" %>  
                       <% end %>
                     <% end %>
                   <% end %>

diff --git a/app/views/lookbook/index.html.erb b/app/views/lookbook/index.html.erb
@@ -1,21 +1,31 @@
+<% 
+sidebar_panels_config = @config.preview_inspector.sidebar_panels.map(&:to_sym)
+%>
+
 <%= render "lookbook/partials/blank_slate" do %>
   <% if @blank_slate %>
     <%= lookbook_render :message,
       id: "welcome-message",
       title: "Welcome to your Lookbook!",
       icon: :logo do %>
       <p>
-        There isn't much to see yet, but
-        <%= link_to "component previews",
-          "#{@config.links.docs}/guide/previews",
-          target: "_blank"
-        %>
-        and
-        <%= link_to "content pages",
-          "#{@config.links.docs}/guide/pages",
-          target: "_blank"
-        %>
-        will show up here as soon as they are added.
+        There isn't much to see yet<% if sidebar_panels_config.any? %>, but<% end %>
+        <% if sidebar_panels_config.include?(:previews) %>
+          <%= link_to "component previews",
+            "#{@config.links.docs}/guide/previews",
+            target: "_blank"
+          %>  
+        <% end %>
+        <% if sidebar_panels_config.many? %>and<% end %>
+        <% if sidebar_panels_config.include?(:pages) %>
+          <%= link_to "content pages",
+            "#{@config.links.docs}/guide/pages",
+            target: "_blank"
+          %>
+        <% end %>
+        <% if sidebar_panels_config.any? %>
+          will show up here as soon as they are added.
+        <% end %>
       </p>
     <% end %>
   <% else %>

diff --git a/config/app.yml b/config/app.yml
@@ -3,13 +3,15 @@ shared:
   project_logo: ~
 
   preview_collection_label: "Previews"
+  preview_search: true
   preview_paths: [test/components/previews]
   preview_display_options: {}
   preview_controller: "Lookbook::PreviewController"
   preview_template: lookbook/previews/preview
   preview_inspector:
     main_panels: [preview, output]
     drawer_panels: [source, notes, params, "*"]
+    sidebar_panels: [previews, pages]
   preview_embeds:
     enabled: true
     policy: SAMEORIGIN
@@ -23,6 +25,7 @@ shared:
   preview_sort_scenarios: false
 
   page_collection_label: "Pages"
+  page_search: false
   page_controller: "Lookbook::PageController"
   page_route: pages
   page_paths: [test/components/docs]

diff --git a/docs/package-lock.json b/docs/package-lock.json
diff --git a/docs/src/_data/config_options.yml b/docs/src/_data/config_options.yml
@@ -22,6 +22,12 @@ previews:
     example: config.lookbook.preview_collection_label = "Component Previews"
     description: The label used to denote the previews section of the sidebar nav.
 
+  - name: preview_search
+    types: Boolean
+    default: true
+    example: config.lookbook.preview_search = false
+    description: Whether or not to show a search/filter box for previews
+
   - name: preview_paths
     types: Array
     default: "[]"
@@ -50,6 +56,12 @@ previews:
     example: config.lookbook.preview_inspector.drawer_panels = [:notes, :params]
     description: List of panels to display in the preview inspector
 
+  - name: preview_inspector.sidebar_panels
+    types: Array
+    default: "[:previews, :pages]"
+    example: config.lookbook.preview_inspector.sidebar_panels = [:pages, :previews]
+    description: Controls the order and availability of the sidebar navigation panels.
+
   - name: preview_embeds.enabled
     types: Boolean
     default: "true"
@@ -99,6 +111,12 @@ pages:
     example: config.lookbook.page_collection_label = "Docs"
     description: The label used to denote the pages section of the sidebar nav.
 
+  - name: page_search
+    types: Boolean
+    default: false
+    example: config.lookbook.page_search = false
+    description: Whether or not to show a search/filter box for pages
+
   - name: page_paths
     default: "[]"
     types: Array

diff --git a/docs/src/_guide/ui/other.md → docs/src/_guide/ui/navigation.md b/docs/src/_guide/ui/other.md → docs/src/_guide/ui/navigation.md
@@ -29,6 +29,16 @@ title: Navigation
   ```
 <% end %>
 
+<%= render section("Sections order", id: "sections-order") do |s| %>
+
+  To change the order of the navigation sections in the sidebar, use the `preview_inspector.sidebar_panels` config option: 
+
+  ```ruby
+  # Display pages before previews in the sidebar
+  config.lookbook.preview_inspector.sidebar_panels = [:pages, :previews]
+  ```
+<% end %>
+
 <%= render section("Scenario order", id: "scenario-order") do |s| %>
   By default scenarios are listed in the navigation in the order in which they are defined in the preview class.
 

diff --git a/lib/lookbook/entities/page_entity.rb b/lib/lookbook/entities/page_entity.rb
@@ -105,7 +105,7 @@ def docs_path
 
     # @api private
     def search_terms
-      label
+      lookup_path.split("/") << label
     end
 
     # @api private