Reorganize components

app/components/lookbook/ui/app/layout/layout.css → app/components/lookbook/ui/app/app.css

@@ -1,4 +1,4 @@
-[data-component="layout"] {
+[data-component="app"] {
   height: 100vh;
   display: grid;
   grid-template-rows: min-content 1fr;

app/components/lookbook/ui/app/app.html.erb

@@ -0,0 +1,24 @@
+<%= render component_tag(x: {data: "app", bind: "bindings.root"}, data: {status_bar: status_bar?.to_json}) do %>
+  <div id="app-header">
+    <%= header %>
+  </div>
+
+  <% if pages.any? || previews.any? %>    
+    <%=
+      lb_pane_group("app-body", tag: :div, opts: body_split) do |body|
+        body.with_pane do
+          sidebar
+        end
+        body.with_pane { main }
+      end
+    %>
+  <% else %>
+    <%= main %>
+  <% end %>
+
+  <% if status_bar? %>
+    <footer id="app-status-bar">
+      <%= status_bar %>
+    </footer>  
+  <% end %>
+<% end %>

app/components/lookbook/ui/app/layout/layout.js → app/components/lookbook/ui/app/app.js

@@ -1,11 +1,11 @@
 import AlpineComponent from "@js/alpine/component";
 import Cookies from "js-cookie";
 
-export default AlpineComponent("layout", () => {
+export default AlpineComponent("app", () => {
   return {
-    appReflowing: false,
+    reflowing: false,
 
-    resetLayout() {
+    resetUI() {
       Cookies.remove("lookbook-display-options");
       Cookies.remove("lookbook-color-scheme");
       Alpine.store("app").clear();
@@ -15,14 +15,14 @@ export default AlpineComponent("layout", () => {
 
     bindings: {
       root: {
-        ["@layout:resizing-start"]() {
-          this.appReflowing = true;
+        ["@ui:resizing-start"]() {
+          this.reflowing = true;
         },
-        ["@layout:resizing-end"]() {
-          this.appReflowing = false;
+        ["@ui:resizing-end"]() {
+          this.reflowing = false;
         },
-        ["@layout:reset"]() {
-          this.resetLayout();
+        ["@ui:reset"]() {
+          this.resetUI();
         },
       },
     },

app/components/lookbook/ui/app/app.rb

@@ -0,0 +1,26 @@
+module Lookbook
+  module UI
+    class App < BaseComponent
+      with_slot :header, Lookbook::UI::Header
+      with_slot :sidebar, Lookbook::UI::Sidebar
+      with_slot :main
+      with_slot :status_bar, Lookbook::UI::StatusBar
+
+      def body_split
+        {
+          orientation: :vertical,
+          sizes: ["280px", "auto"],
+          min_sizes: [200, 200]
+        }
+      end
+
+      def pages
+        Lookbook::Pages
+      end
+
+      def previews
+        Lookbook::Previews
+      end
+    end
+  end
+end

app/components/lookbook/ui/app/sidebar/sidebar.css

@@ -0,0 +1,3 @@
+[data-component="sidebar"] {
+  display: contents;
+}

app/components/lookbook/ui/app/sidebar/sidebar.html.erb

@@ -0,0 +1,41 @@
+<%=
+  render component_tag do
+    lb_pane_group("app-sidebar", opts: sidebar_split) do |sidebar|
+      nav_panels.each do |name|
+        if name.to_sym == :previews
+          sidebar.with_pane("previews-nav") do |pane|
+            pane.with_toolbar do |toolbar|
+              toolbar.with_label { config.previews_nav_label }
+              if previews.any?
+                toolbar.with_button_group do |group|
+                  group.with_button(
+                    icon: :copy_minus,
+                    tooltip: "Collapse all",
+                    click: "$dispatch('nav:collapse-all', {id: 'previews-nav-tree'})")
+                end
+              end
+            end
+            previews_nav
+          end
+        end
+
+        if name.to_sym == :pages && pages_nav?
+          sidebar.with_pane("pages-nav") do |pane|
+            pane.with_toolbar do |toolbar|
+              toolbar.with_label { config.pages_nav_label }
+              if pages.any?
+                toolbar.with_button_group do |group|
+                  group.with_button(
+                    icon: :copy_minus,
+                    tooltip: "Collapse all",
+                    click: "$dispatch('nav:collapse-all', {id: 'pages-nav-tree'})")
+                end
+              end
+            end
+            pages_nav
+          end
+        end
+      end
+    end   
+  end
+%>

app/components/lookbook/ui/app/layout/layout.rb → app/components/lookbook/ui/app/sidebar/sidebar.rb

@@ -1,10 +1,6 @@
 module Lookbook
   module UI
-    class Layout < BaseComponent
-      with_slot :header, Lookbook::UI::Header
-      with_slot :main
-      with_slot :status_bar, Lookbook::UI::StatusBar
-
+    class Sidebar < BaseComponent
       with_slot :previews_nav do |tree, **kwargs|
         Lookbook::UI::Nav.new(
           id: "previews-nav-tree",
@@ -25,22 +21,6 @@ class Layout < BaseComponent
         )
       end
 
-      def pages
-        Lookbook::Pages
-      end
-
-      def previews
-        Lookbook::Previews
-      end
-
-      def body_split
-        {
-          orientation: :vertical,
-          sizes: ["280px", "auto"],
-          min_sizes: [200, 200]
-        }
-      end
-
       def sidebar_split
         {
           orientation: :horizontal,
@@ -61,6 +41,14 @@ def nav_panels
           end
         end
       end
+
+      def pages
+        Lookbook::Pages
+      end
+
+      def previews
+        Lookbook::Previews
+      end
     end
   end
 end

app/components/lookbook/ui/app/status_bar/status_bar.html.erb

@@ -10,7 +10,7 @@
   </div>
   <div class="status-bar-section">
     <div class="status-bar-items">
-      <%= status_bar_item(tooltip: "Reset UI", theme: :action,  icon: :rotate_ccw, x: {"@click": "$dispatch('layout:reset')"}) %>
+      <%= status_bar_item(tooltip: "Reset UI", theme: :action,  icon: :rotate_ccw, x: {"@click": "$dispatch('ui:reset')"}) %>
     </div>
   </div>
   <div class="status-bar-section status-bar-notifications">

app/components/lookbook/ui/elements/metadata_table/metadata_table.html.erb

@@ -0,0 +1,19 @@
+<%= render component_tag do %>
+  <%= lb_table do |table| %>
+    <% table.with_header do |header| %>
+      <% header.with_cell("Name", collapse: true) %>
+      <% header.with_cell("Value") %>
+    <% end %>
+
+    <% entries.each do |entry| %>
+      <% table.with_row do |row| %>
+        <% row.with_cell(collapse: true) do %>
+          <strong><%= entry.name %></strong>
+        <% end %>
+        <% row.with_cell do %>
+          <code><%= entry.value %></code>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

app/components/lookbook/ui/elements/metadata_table/metadata_table.rb

@@ -0,0 +1,15 @@
+module Lookbook
+  module UI
+    class MetadataTable < BaseComponent
+      attr_reader :entries
+
+      def initialize(**kwargs)
+        @entries = []
+      end
+
+      def with_entry(name, value)
+        @entries << DataObject.new({name: name, value: value})
+      end
+    end
+  end
+end

app/components/lookbook/ui/elements/viewport/viewport.js

@@ -155,7 +155,7 @@ export default AlpineComponent(
       },
 
       get inert() {
-        return this.resizing || this.appReflowing;
+        return this.resizing || this.reflowing;
       },
 
       get iframe() {

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

@@ -2,18 +2,20 @@
   <% if request_frame == "root" %>
     <%=
       render Lookbook::UI::Router.new(events_endpoint: @events_endpoint.to_json) do
-        render Lookbook::UI::Layout.new(id: "app", x: {cloak: true}) do |layout|
-          layout.with_header
+        render Lookbook::UI::App.new(id: "app", x: {cloak: true}) do |app|
+          app.with_header
 
-          layout.with_previews_nav(@previews.tree)
-          layout.with_pages_nav(@pages.tree) if @pages.directory_exists?
+          app.with_sidebar do |sidebar|
+            sidebar.with_previews_nav(@previews.tree)
+            sidebar.with_pages_nav(@pages.tree) if @pages.directory_exists?
+          end
 
-          layout.with_main do
+          app.with_main do
             tag.main { yield }
           end
 
           if @config.ui_status_bar
-            layout.with_status_bar(notifications: @notifications)
+            app.with_status_bar(notifications: @notifications)
           end
         end
       end