lookbook 1.0.0.beta.3 → 1.0.0.beta.6

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

@@ -1,76 +1,94 @@
 <% content_for :shell do %>
-  <%= render_component :split_layout,
-    alpine_data: "$store.layout.main",
-    ":class": "$store.layout.mobile && '!block'" do |layout| %>
+  <% if Lookbook.previews? || Lookbook.pages? %>
+    <%= render_component :split_layout,
+      alpine_data: "$store.layout.main",
+      ":class": "$store.layout.mobile && '!block'" do |layout| %>
 
-    <% layout.pane class: "flex flex-col bg-lookbook-sidebar relative translate-x-0",
-      ":class": "{
-        'transition': $store.layout.mobile,
-        'translate-x-full': $store.layout.mobile && sidebarHidden,
-        '!absolute right-0 bottom-0 top-[40px] h-[calc(100%_-_40px)] w-full max-w-[420px] z-50 border-l border-lookbook-divider': $store.layout.mobile
-      }",
-      "@click.outside": "closeMobileSidebar",
-      x_cloak: true do %>
+      <% layout.pane id: "app-sidebar", class: "flex flex-col bg-lookbook-sidebar-bg relative translate-x-0",
+        ":class": "{
+          'transition': $store.layout.mobile,
+          'translate-x-full': $store.layout.mobile && sidebarHidden,
+          '!absolute right-0 bottom-0 top-[40px] h-[calc(100%_-_40px)] w-full max-w-[420px] z-50 border-l border-lookbook-divider': $store.layout.mobile
+        }",
+        "@click.outside": "closeMobileSidebar",
+        cloak: true do %>
 
-      <%= render_component :split_layout,
-        alpine_data: "$store.layout.#{Lookbook.pages.any? ? "sidebar" : "singleSectionSidebar"}",
-        style: "height: calc(100vh - 2.5rem);" do |layout| %>
-        <% layout.pane class: "overflow-hidden" do %>
-          <%= render_component :nav,
-            collection: Lookbook.previews,
-            alpine_data: "$store.nav.previews",
-            label: "Previews",
-            collapse_singles: true do |nav| %>
-            <% nav.filter store: "$store.nav.previews.filter", placeholder: "Filter by preview name&hellip;" %>
+        <%= render_component :split_layout,
+          alpine_data: "$store.layout.#{Lookbook.pages? && Lookbook.previews? ? "sidebar" : "singleSectionSidebar"}",
+          style: "height: calc(100vh - 2.5rem);" do |layout| %>
+
+          <% if Lookbook.previews? %>
+            <% layout.pane class: "overflow-hidden" do %>
+              <%= render_component :nav,
+                id: "previews-nav",
+                collection: Lookbook.previews,
+                alpine_data: "$store.nav.previews",
+                collapse_singles: true do |nav| %>
+                <%= nav.toolbar do |toolbar| %>
+                  <% toolbar.section padded: true do %>
+                    <h4 class="pt-1">Previews</h4>
+                  <% end %>
+                <% end %>
+                <% nav.filter store: "$store.nav.previews.filter", placeholder: "Filter previews by name&hellip;" %>
+              <% end %>
+            <% end %>
           <% end %>
-        <% end %>
 
-        <% if Lookbook.pages.any? %>
-          <% layout.pane class: "overflow-hidden" do %>
-            <%= render_component :nav,
-              collection: Lookbook.pages,
-              alpine_data: "$store.nav.pages",
-              label: "Pages" %>
+          <% if Lookbook.pages? %>
+            <% layout.pane class: "overflow-hidden" do %>
+              <%= render_component :nav,
+                id: "pages-nav",
+                collection: Lookbook.pages,
+                alpine_data: "$store.nav.pages" do |nav| %>
+                <%= nav.toolbar do |toolbar| %>
+                  <% toolbar.section padded: true do %>
+                    <h4 class="pt-1">Pages</h4>
+                  <% end %>
+                <% end %>
+              <% end %>
+            <% end %>
           <% end %>
         <% end %>
 
-      <% end %>
-
-      <% if Lookbook::Preview.errors.any? %>
-        <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 %>
-              <%= icon  :alert_triangle, size: 4, class: "text-red-700" %>
-              <span class="ml-2">Preview load errors</span>
-            <% end %>
-            <% toolbar.section align: :right do %>
-              <% render_component :button, icon: :x, "@click": "hidden = !hidden" %>
+        <% if Lookbook::Preview.errors.any? %>
+          <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 %>
+                <%= icon  :alert_triangle, size: 4, class: "text-red-700" %>
+                <span class="ml-2">Preview load errors</span>
+              <% end %>
+              <% toolbar.section align: :right do %>
+                <% render_component :button, icon: :x, "@click": "hidden = !hidden" %>
+              <% end %>
             <% end %>
-          <% end %>
 
-          <div class="h-full max-h-[300px] overflow-hidden">
-            <div class="bg-red-50 w-full overflow-auto h-full">
-              <ul class="text-sm divide-y divide-red-200">
-                <% Lookbook::Preview.errors.each do |error| %>
-                  <% error = error.is_a?(Lookbook::Error) ? error : Lookbook::Error.new(error) %>
-                  <li class="px-4 py-3">
-                    <h4 class="break-all leading-tight text-xs ">
-                      <%= error.file_name %><%= ":#{error.line_number}" if error.line_number %>
-                    </h4>
-                    <pre class="text-red-800 text-xs mt-2 whitespace-pre-wrap opacity-80 font-mono"><%= error.message %></pre>
-                  </li>
-                <% end %>
-              </ul>
+            <div class="h-full max-h-[300px] overflow-hidden">
+              <div class="bg-red-50 w-full overflow-auto h-full">
+                <ul class="text-sm divide-y divide-red-200">
+                  <% Lookbook::Preview.errors.each do |error| %>
+                    <% error = error.is_a?(Lookbook::Error) ? error : Lookbook::Error.new(error) %>
+                    <li class="px-4 py-3">
+                      <h4 class="break-all leading-tight text-xs ">
+                        <%= error.file_name %><%= ":#{error.line_number}" if error.line_number %>
+                      </h4>
+                      <pre class="text-red-800 text-xs mt-2 whitespace-pre-wrap opacity-80 font-mono"><%= error.message %></pre>
+                    </li>
+                  <% end %>
+                </ul>
+              </div>
             </div>
           </div>
-        </div>
+        <% end %>
       <% end %>
-    <% end %>
 
-    <% layout.pane class: "overflow-hidden", ":class": "$store.layout.mobile && 'w-screen'" do %>
-      <%= content_for?(:main) ? yield(:main) : yield %>
+      <% layout.pane id: "app-main", class: "overflow-hidden h-full", ":class": "$store.layout.mobile && 'w-screen'" do %>
+        <%= content_for?(:main) ? yield(:main) : yield %>
+      <% end %>
     <% end %>
-
+  <% else %>
+    <div id="app-main" class="w-screen h-full overflow-hidden">
+      <%= content_for?(:main) ? yield(:main) : yield %>
+    </div>
   <% end %>
   <div class="absolute opacity-0 bg-black inset-0 top-[39px] z-[-1] transition-opacity" :class="($store.layout.mobile && !sidebarHidden) && '!opacity-30 !z-40'" data-cloak></div>
 <% end %>

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

@@ -4,45 +4,45 @@
     x-data="{}"
     @navigation:complete.window="$refs.scroller.scrollTop = 0">
   
-    <div class="h-full bg-lookbook-page relative">
-    <% unless @error %>
-      
-      <div class="absolute top-0 right-0 pt-1 pr-0 pl-1 pb-1 rounded-bl-md">
-        <div class="bg-lookbook-page opacity-90 absolute inset-0 w-full h-full z-0"></div>
-        <div class="relative z-10 flex items-center">
+    <div class="h-full bg-lookbook-page-bg relative">
+      <% unless @error %>
         
-        <% if @previous_page %>
-          <%= render_component :button,
-            size: :lg,
-            icon: :chevron_left,
-            tooltip: "Previous page",
-            href: lookbook_page_path(@previous_page.lookup_path),
-            class: "pr-0.5 bg-transparent" %>
-        <% else %>
-          <%= render_component :button,
-            size: :lg,
-            icon: :chevron_left,
-            disabled: true,
-            class: "opacity-50 !cursor-default pr-0.5 bg-transparent" %>
-        <% end %>
+        <div class="absolute top-0 right-0 pt-1 pr-0 pl-1 pb-1 rounded-bl-md">
+          <div class="bg-lookbook-page-bg opacity-90 absolute inset-0 w-full h-full z-0"></div>
+          <div class="relative z-10 flex items-center">
+          
+          <% if @previous_page %>
+            <%= render_component :button,
+              size: :lg,
+              icon: :chevron_left,
+              tooltip: "Previous page",
+              href: lookbook_page_path(@previous_page.lookup_path),
+              class: "pr-0.5 bg-transparent" %>
+          <% else %>
+            <%= render_component :button,
+              size: :lg,
+              icon: :chevron_left,
+              disabled: true,
+              class: "opacity-50 !cursor-default pr-0.5 bg-transparent" %>
+          <% end %>
 
-        <% if @next_page %>
-          <%= render_component :button,
-            size: :lg,
-            icon: :chevron_right,
-            tooltip: "Next page",
-            href: lookbook_page_path(@next_page.lookup_path),
-            class: "pl-0.5 bg-transparent" %>
-        <% else %>
-          <%= render_component :button,
-            size: :lg,
-            icon: :chevron_right,
-            disabled: true,
-            class: "opacity-50 !cursor-default pl-0.5 bg-transparent" %>
-        <% end %>
+          <% if @next_page %>
+            <%= render_component :button,
+              size: :lg,
+              icon: :chevron_right,
+              tooltip: "Next page",
+              href: lookbook_page_path(@next_page.lookup_path),
+              class: "pl-0.5 bg-transparent" %>
+          <% else %>
+            <%= render_component :button,
+              size: :lg,
+              icon: :chevron_right,
+              disabled: true,
+              class: "opacity-50 !cursor-default pl-0.5 bg-transparent" %>
+          <% end %>
+          </div>
         </div>
-      </div>
-    <% end %>
+      <% end %>
 
       <%= yield %>
     </div>

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

@@ -7,58 +7,18 @@
     @navigation:start="closeMobileSidebar"
     class="w-screen h-screen grid grid-rows-[40px_1fr] relative">
 
-    <%= render_component :header do |header| %>
-      <% header.branding { config.project_name } %>
+    <% if content_for? :panel_css %>
+      <style media="all" id="panel-styles">
+        <%= content_for :panel_css -%>
+      </style>
     <% end %>
 
-    <% if false %>
-      <%= render_component :toolbar, class: "group !bg-lookbook-header !text-lookbook-header-text" do |toolbar| %>
-        <% toolbar.section padded: true do %>
-          <%= render_component :branding,
-            text: config.project_name,
-            href: landing_path if config.project_name %>
-        <% end %>
-        <% toolbar.section padded: false, align: :right, class: "flex items-center" do %>
-          <%= render_component :button_group, class: "relative -top-px" do |group| %>
-            <% if Rails.env == "development" %>
-              <% group.button icon: :help_circle, class: "opacity-50 hover:opacity-100 transition !text-lookbook-header-text" do |button| %>
-                <% button.dropdown do %>
-                  <%= tag.div class: "divide-y divide-lookbook-divider" do %>
-                    <div class="flex items-center text-xs px-3 py-2">
-                      <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">
-                        <%= icon  :github, size: 3 %>
-                      </a>
-                    </div>
-                    <div class="px-3 py-2">
-                      <a href="#"
-                        class="text-xs underline"
-                        @click.stop="localStorage.clear(); window.location.reload();">
-                        Clear local storage
-                      </a>
-                    </div>
-                  <% end %>
-                <% end %>
-              <% end %>
-            <% end %>
-            <% group.button icon: :menu,
-              "@click.stop": "toggleSidebar",
-              x_show: "$store.layout.mobile && sidebarHidden",
-              class: "!text-lookbook-header-text" %>
-            <% group.button icon: :x,
-              "@click.stop": "toggleSidebar",
-              x_show: "$store.layout.mobile && !sidebarHidden",
-              "@keydown.esc.window": "closeMobileSidebar",
-              class: "!text-lookbook-header-text" %>
-          <% end %>    
-        <% end %>
-      <% end %>
+    <%= render_component :header, id: "app-header", debug_menu: config.debug_menu do |header| %>
+      <% header.branding { config.project_name } %>
     <% end %>
-    
+
     <%= content_for?(:shell) ? yield(:shell) : yield %>
   </div>
 <% end %>
 
-<%= render template: "layouts/lookbook/skeleton" %>
-0
+<%= render template: "layouts/lookbook/skeleton" %>

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

@@ -13,12 +13,6 @@
     </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/index.html.erb

@@ -1,14 +1,27 @@
-<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">
-      <%= 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>
-        <% else %>
-          <p>Create a <a href="https://viewcomponent.org/guide/previews.html" target="_blank">preview file</a> to get started.</p>
-      <% end %>
+<div id="landing" class="flex flex-col items-center justify-center h-full w-full">
+  <div class="p-4 text-center mx-auto">
+    <% if Lookbook.previews? %>
+      <div id="landing-with-content">
+        <h5 class="text-lg opacity-50"><%= config.project_name %></h5>
+        <div class="mt-2 italic opacity-30 max-w-[400px]">
+          <p>
+            Select a preview from the nav to get started.
+          </p>
+        </div>
       </div>
-    </div>
+    <% else %>
+      <div id="landing-no-content">
+        <h5 class="text-lg font-bold opacity-80"><%= config.project_name %></h5>
+        <div class="mt-3 italic opacity-40 max-w-[400px]">
+          <p>
+            Nothing here yet! 
+            <a class="underline" href="https://viewcomponent.org/guide/previews.html" target="_blank">
+              Create a preview
+            </a>
+            to get started.
+          </p>
+        </div>
+      </div>
+    <% end %>
   </div>
 </div>

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

@@ -1,17 +1,17 @@
 <div class="px-4 md:px-10 pt-8 md:pt-10 overflow-auto scroll-smooth w-full max-h-full pb-12" x-ref="scroller">
-  <div class="w-full max-w-3xl mx-auto h-full flex flex-col">
+  <div class="w-full max-w-screen-lg mx-auto h-full flex flex-col">
     <% if @page.header? %>
-      <header class="mb-8 prose max-w-none flex-none">
+      <header id="page-header" class="mb-8 prose max-w-none flex-none">
         <h1><%= @page.title %></h1>
       </header>
     <% end %>
 
-    <%= render_component :prose, markdown: false, class: "max-w-none flex-none" do %>
+    <%= render_component :prose, id: "page-content", 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| %>
+      <%= render_component :page_tabs, id: "page-tabbed-sections", 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) %>
@@ -21,7 +21,7 @@
     <% end %>
 
     <% if @page.footer? && @pages.many? %>
-      <footer class="flex items-center justify-between border-t border-gray-300 mt-12 pt-8 pb-10 ">
+      <footer id="page-footer" class="flex items-center justify-between border-t border-gray-300 mt-12 pt-8 pb-10 ">
         <% if @previous_page %>
           <a href="<%= lookbook_page_path @previous_page.lookup_path %>"
             class="flex items-center flex-none">

data/app/views/lookbook/previews/panels/_content.html.erb

@@ -1,4 +1,4 @@
-<div class="p-4 bg-lookbook-prose h-full">
+<div class="p-4 bg-lookbook-prose-bg h-full">
   <% if panel.content.present? %>
     <%= render_component :prose, markdown: true do %>
       <%== panel.content %>

data/app/views/lookbook/previews/panels/_notes.html.erb

@@ -1,6 +1,6 @@
 <% 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">
+  <div class="divide-y divide-dashed divide-lookbook-divider bg-lookbook-prose-bg h-full w-full">
     <% items.each do |item| %>
       <div class="px-4 py-6 relative">
         <h6 class="italic font-mono mb-4 opacity-40">
@@ -11,7 +11,7 @@
     <% end %>
   </div>
 <% else %>
-  <div class="p-4 bg-lookbook-prose w-full h-full">
+  <div class="p-4 bg-lookbook-prose-bg w-full h-full">
     <%= render_component :prose do %>
       <%== items.any? ? items.first.notes : "<em class='opacity-50'>No notes provided.</em>" %>
     <% end %>

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

@@ -1,5 +1,5 @@
 <% if preview.params.none? %>
-  <div class="p-4 w-full h-full bg-lookbook-prose">
+  <div class="p-4 w-full h-full bg-lookbook-prose-bg">
     <%= render_component :prose do %>
       <em class='opacity-50'>No params configured.</em>
     <% end %>

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

@@ -3,7 +3,7 @@
   ":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 %>
+    "x-effect": "forceOrientation = (layoutWidth < $store.inspector.minVerticalSplitWidth) ? 'horizontal' : null" do %>
   
     <%= render_component :toolbar do |toolbar| %>
       <% toolbar.section ":class": "layoutResizing && 'overflow-hidden'" do %>
@@ -38,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, request.query_parameters),
             tooltip: "Open preview in new window",
             target: "_blank" %>
 
@@ -46,7 +46,7 @@
             tooltip: "Show drawer",
             "@click": "$store.inspector.drawer.hidden = false",
             class: "rotate-180",
-            x_show: "$store.inspector.drawer.hidden",
+            "x-show": "$store.inspector.drawer.hidden",
             cloak: true %>
         <% end %>
       <% end %>
@@ -63,8 +63,8 @@
     </div>
   <% end %>
 
-  <%= layout.pane class: "flex flex-col h-full overflow-hidden bg-lookbook-drawer",
-    x_show: "!$store.inspector.drawer.hidden && #{@drawer_panels.any?}" do %>
+  <%= layout.pane class: "flex flex-col h-full overflow-hidden bg-lookbook-drawer-bg",
+    "x-show": "!$store.inspector.drawer.hidden && #{@drawer_panels.any?}" do %>
 
     <%= render_component :toolbar do |toolbar| %>
       <% toolbar.section ":class": "layoutResizing && 'overflow-hidden'" do %>
@@ -84,7 +84,7 @@
             <% group.button icon: :copy,
               tooltip: "Copy panel contents",
               copy: !!panel.copy,
-              x_show: "$store.inspector.drawer.activeTab === '#{panel.name}'",
+              "x-show": "$store.inspector.drawer.activeTab === '#{panel.name}'",
               cloak: true do %>
               <%== panel.copy ? panel.copy : "" %>
               <% end %>
@@ -98,18 +98,18 @@
           <% group.button icon: :corner_up_right,
             tooltip: "Move drawer to right",
             "@click": "switchOrientation",
-            x_show: "horizontal && layoutWidth > $store.inspector.minVerticalSplitWidth",
+            "x-show": "horizontal && layoutWidth > $store.inspector.minVerticalSplitWidth",
             cloak: true %>
 
           <% group.button icon: :corner_up_right,
-            x_show: "horizontal && layoutWidth <= $store.inspector.minVerticalSplitWidth",
+            "x-show": "horizontal && layoutWidth <= $store.inspector.minVerticalSplitWidth",
             disabled: true,
             cloak: true %>
 
           <% group.button icon: :corner_left_down,
             tooltip: "Move drawer to bottom",
             "@click": "switchOrientation",
-            x_show: "vertical",
+            "x-show": "vertical",
             cloak: true %>
 
           <% group.button icon: :x_circle,
@@ -124,7 +124,9 @@
       <%= 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 %>
+            <%= render_component :inspector_panel, **panel.slice(:id, :name, :system) do %>
+              <%= render panel.partial, **@inspector_data, panel: panel, **panel.locals %>
+            <% end %>
           <% end %>
         <% end %>
       <% end %>