lookbook 1.4.1 → 1.4.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 18630747bc279477cc077cccfd3f2df3611d6d277c1140f1d63616cb9fc4cc4e
-  data.tar.gz: 40ca16f9e0f8ad6a44b93c7678700f728fdeaf149e1bc14cd36efd17a2c58b8b
+  metadata.gz: e489fa4bdff458098a029cf9d2bc25d6e16a70e11a92a1be7a77114ad43e0f63
+  data.tar.gz: c5efc75e6a4d0b16493cd1eb21d3ace790af22b64ba22e3c00edfb1bb6a58e5d
 SHA512:
-  metadata.gz: 8c13c64ca2591b32c832efbd7624106562990e2eda63bb1260af07ac1ed26727d1f716751b43a82470b638158374e16fa5128871d6f6a656c9fca59c2f00669f
-  data.tar.gz: 6ccd1a92b40b72734a27568a6461158cffd59ca0a6d87eb4f997453ce3a60fa30face2b0cbe1ed83facc181b9d1c6b6373559e32fd6c0d026406c024b09be309
+  metadata.gz: 9cf5f58aedde5c3bac838a15f9fc1dadabc46ce667987b689ce4fc9a83c95cd11fe908f1b2fb69f59b20ffdaa85a306e8e8af89988b65de085d73c5a7b73f9d8
+  data.tar.gz: 59d122a52a50a77a9e30cfd484789fa1de533ca244b20c7cecefd02521c30fd5c962d59c2d40ff85f1fff786a1d4a864c3f3887625dc08214b2dac96c4a22f10

data/app/components/lookbook/nav/component.rb

@@ -12,7 +12,7 @@ module Lookbook
     end
 
     def items
-      tree.map do |node|
+      @items ||= tree.map do |node|
         item_class = (node.type == :directory) ? Nav::Directory::Component : Nav::Entity::Component
         lookbook_render item_class.new node, nav_id: id
       end

data/app/components/lookbook/nav/item/component.rb

@@ -15,7 +15,7 @@ module Lookbook
     end
 
     def left_pad
-      ((depth - 1) * 12) + 24
+      depth * 12
     end
 
     def children

data/app/components/lookbook/params/field/component.rb

@@ -34,7 +34,7 @@ module Lookbook
           value: param.value,
           value_type: param.value_type,
           value_default: param.value_default,
-          input_options: input_options.except(:choices),
+          input_options: input_options.except(:choices, :opts),
           choices: input_options[:choices])
       end
 

data/app/components/lookbook/tabs/component.html.erb

@@ -13,7 +13,7 @@
     <%= lookbook_render :button, icon: :menu, class: "-ml-3", "x-show": "visibleTabsCount === 0" %>
   </div>
   <div class="hidden">
-    <div x-ref="tabsDropdown" data-cloak>
+    <div x-ref="tabsDropdown" x-cloak>
       <%= safe_join(dropdown_tabs) %>
     </div>
   </div>

data/app/components/lookbook/tabs/component.js

@@ -33,6 +33,10 @@ export default function tabsComponent(store) {
 
     init() {
       this.$nextTick(() => {
+        if (this.$root.parentElement.offsetWidth === this.$root.offsetWidth) {
+          this.visibleTabsCount = this.tabs.length;
+        }
+
         dropdown = tippy(this.$refs.dropdownTrigger, {
           content: this.$refs.tabsDropdown,
           theme: "menu",

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

@@ -1,60 +1,62 @@
 <% content_for :shell do %>
   <% if @previews.any? || @pages.any? %>
-    <%= lookbook_render :split_layout,
-      alpine_data: "$store.layout.main",
-      ":class": "$store.layout.mobile && '!block'" do |layout| %>
+    <% cache do %>
+      <%= lookbook_render :split_layout,
+        alpine_data: "$store.layout.main",
+        ":class": "$store.layout.mobile && '!block'" do |layout| %>
 
-      <% 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 %>
+        <% 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 %>
 
-        <%= 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.pane class: "overflow-hidden" do %>
-              <%= lookbook_render :nav,
-                id: "previews-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>
-                  <% end %>
-                  <% toolbar.section align: :right, padded: false do %>
-                    <%= lookbook_render :button_group, size: :xs do |group| %>
-                      <% group.button icon: :minus_square,
-                        tooltip: "Collapse all",
-                        "@click": "closeAll" %>
+            <% if @previews.any? %>
+              <% layout.pane class: "overflow-hidden" do %>
+                <%= lookbook_render :nav,
+                  id: "previews-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>
+                    <% end %>
+                    <% toolbar.section align: :right, padded: false do %>
+                      <%= lookbook_render :button_group, size: :xs do |group| %>
+                        <% group.button icon: :minus_square,
+                          tooltip: "Collapse all",
+                          "@click": "closeAll" %>
+                      <% end %>
                     <% end %>
                   <% end %>
+                  <% nav.filter store: "$store.nav.previews.filter", placeholder: "Filter previews by name&hellip;" %>
                 <% end %>
-                <% nav.filter store: "$store.nav.previews.filter", placeholder: "Filter previews by name&hellip;" %>
               <% end %>
             <% end %>
-          <% end %>
 
-          <% if @pages.any? %>
-            <% layout.pane class: "overflow-hidden" do %>
-              <%= lookbook_render :nav,
-                id: "pages-nav",
-                tree: @pages.to_tree,
-                alpine_data: "$store.nav.pages" do |nav| %>
-                <%= nav.toolbar do |toolbar| %>
-                  <% toolbar.section padded: true do %>
-                    <h4 class="pt-1">Pages</h4>
-                  <% end %>
-                  <% toolbar.section align: :right, padded: false do %>
-                    <%= lookbook_render :button_group, size: :xs do |group| %>
-                      <% group.button icon: :minus_square,
-                        tooltip: "Collapse all",
-                        "@click": "closeAll" %>
+            <% if @pages.any? %>
+              <% layout.pane class: "overflow-hidden" do %>
+                <%= lookbook_render :nav,
+                  id: "pages-nav",
+                  tree: @pages.to_tree,
+                  alpine_data: "$store.nav.pages" do |nav| %>
+                  <%= nav.toolbar do |toolbar| %>
+                    <% toolbar.section padded: true do %>
+                      <h4 class="pt-1">Pages</h4>
+                    <% end %>
+                    <% toolbar.section align: :right, padded: false do %>
+                      <%= lookbook_render :button_group, size: :xs do |group| %>
+                        <% group.button icon: :minus_square,
+                          tooltip: "Collapse all",
+                          "@click": "closeAll" %>
+                      <% end %>
                     <% end %>
                   <% end %>
                 <% end %>
@@ -62,10 +64,10 @@
             <% end %>
           <% end %>
         <% end %>
-      <% end %>
 
-      <% layout.pane id: "app-main", class: "overflow-hidden h-full", ":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 %>
     <% end %>
   <% else %>
@@ -76,4 +78,4 @@
   <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 %>
 
-<%= render template: "layouts/lookbook/shell" %>
+<%= render template: "layouts/lookbook/shell" %>

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

@@ -2,6 +2,7 @@
   <div
     id="app"
     x-data="app"
+    x-cloak
     @popstate.window="handleNavigation"
     @click.document="hijax"
     @navigation:start="closeMobileSidebar"

data/app/views/lookbook/inspector/inputs/_toggle.html.erb

@@ -11,10 +11,10 @@ span_classes = [
 ]
 %>
 
-<%= button_tag **input_options,
+<%= tag.button **input_options,
   class: class_names(button_classes),
   role: "switch",
   type: "button",
-  "@click.stop": "value = value == 'true' ? 'false' : 'true'" do %>
+  "@click.stop": "value = value == 'true' ? 'false' : 'true'", escape: false do %>
   <%= tag.span "aria-hidden": true, class: class_names(span_classes) %>
-<% end %>
+<% end %>

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

@@ -20,12 +20,18 @@ module Lookbook
 
     def self.preview_from_code_object(code_object)
       klass = code_object.path.constantize
-      Preview.new(code_object) if klass.ancestors.include?(ViewComponent::Preview)
+      Preview.new(code_object) if preview_class?(klass)
     rescue => exception
-      Lookbook.logger.error LookbookError.new(exception)
+      Lookbook.logger.error exception.to_s
       nil
     end
 
+    def self.preview_class?(klass)
+      if klass.ancestors.include?(ViewComponent::Preview)
+        !klass.respond_to?(:abstract_class) || klass.abstract_class != true
+      end
+    end
+
     protected
 
     def examples

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

@@ -65,8 +65,8 @@ module Lookbook
       def base_directory
         return @_base_directory if @_base_directory
 
-        directories = [Rails.root, *Array(base_directories)].map(&:to_s).sort_by(&:length).reverse
-        @_base_directory ||= directories.first { |dir| file_path.start_with?(dir) }
+        directories = Array(base_directories).map(&:to_s).sort_by { |path| path.split("/").size }.reverse
+        @_base_directory ||= directories.find { |dir| file_path.to_s.start_with?(dir) }
       end
     end
   end

data/lib/lookbook/tags/param_tag.rb

@@ -1,7 +1,7 @@
 module Lookbook
   class ParamTag < YardTag
     VALUE_TYPE_MATCHER = /^(\[\s?([A-Z]{1}\w+)\s?\])/
-    DESCRIPTION_MATCHER = /"(.*[^\\])"$/
+    DESCRIPTION_MATCHER = /(?<=\s|^)"(.*[^\\])"(?:\s|$)/
 
     supports_options
 

data/lib/lookbook/version.rb

@@ -1,3 +1,3 @@
 module Lookbook
-  VERSION = "1.4.1"
+  VERSION = "1.4.2"
 end

data/public/lookbook-assets/js/lookbook.js

@@ -7705,7 +7705,7 @@ function $5439cede634b2921$var$toCamel(s) {
 }
 
 
-var $068816311f4006ce$exports = {};
+var $368fec5c8619cf6d$exports = {};
 var $cbd28b10fa9798c7$exports = {};
 
 $parcel$defineInteropFlag($cbd28b10fa9798c7$exports);
@@ -11228,16 +11228,6 @@ function $cbd28b10fa9798c7$export$2e2bcd8739ae039() {
 }
 
 
-var $99486586f6691564$exports = {};
-
-$parcel$defineInteropFlag($99486586f6691564$exports);
-
-$parcel$export($99486586f6691564$exports, "default", () => $99486586f6691564$export$2e2bcd8739ae039);
-function $99486586f6691564$export$2e2bcd8739ae039() {
-    return {};
-}
-
-
 var $47a1c62621be0c54$exports = {};
 
 $parcel$defineInteropFlag($47a1c62621be0c54$exports);
@@ -11327,28 +11317,13 @@ function $e398acaded942bbe$export$2e2bcd8739ae039(targetSelector) {
 }
 
 
-var $e9904a14dabf652d$exports = {};
+var $99486586f6691564$exports = {};
 
-$parcel$defineInteropFlag($e9904a14dabf652d$exports);
+$parcel$defineInteropFlag($99486586f6691564$exports);
 
-$parcel$export($e9904a14dabf652d$exports, "default", () => $e9904a14dabf652d$export$2e2bcd8739ae039);
-function $e9904a14dabf652d$export$2e2bcd8739ae039(store) {
-    return {
-        focussed: false,
-        get active () {
-            return store.active;
-        },
-        get text () {
-            return store.text;
-        },
-        clear () {
-            if (store.raw === "") this.$refs.input.blur();
-            else store.raw = "";
-        },
-        focus () {
-            this.$refs.input.focus();
-        }
-    };
+$parcel$export($99486586f6691564$exports, "default", () => $99486586f6691564$export$2e2bcd8739ae039);
+function $99486586f6691564$export$2e2bcd8739ae039() {
+    return {};
 }
 
 
@@ -12226,6 +12201,43 @@ function $e1f51f020443edd4$export$2e2bcd8739ae039(id, embedStore) {
 }
 
 
+var $e9904a14dabf652d$exports = {};
+
+$parcel$defineInteropFlag($e9904a14dabf652d$exports);
+
+$parcel$export($e9904a14dabf652d$exports, "default", () => $e9904a14dabf652d$export$2e2bcd8739ae039);
+function $e9904a14dabf652d$export$2e2bcd8739ae039(store) {
+    return {
+        focussed: false,
+        get active () {
+            return store.active;
+        },
+        get text () {
+            return store.text;
+        },
+        clear () {
+            if (store.raw === "") this.$refs.input.blur();
+            else store.raw = "";
+        },
+        focus () {
+            this.$refs.input.focus();
+        }
+    };
+}
+
+
+var $36506012e0c6e9e3$exports = {};
+
+$parcel$defineInteropFlag($36506012e0c6e9e3$exports);
+
+$parcel$export($36506012e0c6e9e3$exports, "default", () => $36506012e0c6e9e3$export$2e2bcd8739ae039);
+function $36506012e0c6e9e3$export$2e2bcd8739ae039(iconName) {
+    return {
+        iconName: iconName
+    };
+}
+
+
 var $d92d9d5253f84566$exports = {};
 
 $parcel$defineInteropFlag($d92d9d5253f84566$exports);
@@ -12270,18 +12282,6 @@ function $d92d9d5253f84566$export$2e2bcd8739ae039(store) {
 }
 
 
-var $36506012e0c6e9e3$exports = {};
-
-$parcel$defineInteropFlag($36506012e0c6e9e3$exports);
-
-$parcel$export($36506012e0c6e9e3$exports, "default", () => $36506012e0c6e9e3$export$2e2bcd8739ae039);
-function $36506012e0c6e9e3$export$2e2bcd8739ae039(iconName) {
-    return {
-        iconName: iconName
-    };
-}
-
-
 var $506dabb2bf255b38$exports = {};
 
 $parcel$defineInteropFlag($506dabb2bf255b38$exports);
@@ -12832,6 +12832,33 @@ function $506dabb2bf255b38$var$sizeSplits(sizes) {
 }
 
 
+var $a87dacf5139b5e2f$exports = {};
+
+$parcel$defineInteropFlag($a87dacf5139b5e2f$exports);
+
+$parcel$export($a87dacf5139b5e2f$exports, "default", () => $a87dacf5139b5e2f$export$2e2bcd8739ae039);
+function $a87dacf5139b5e2f$export$2e2bcd8739ae039(store) {
+    return {
+        get store () {
+            return store || this;
+        },
+        get id () {
+            return this.$root.id;
+        },
+        get panels () {
+            return Array.from(this.$refs.panels.children);
+        },
+        isActive (el) {
+            return this.store.activeTab === this._getRef(el);
+        },
+        // protected
+        _getRef (el) {
+            return el.getAttribute("x-ref");
+        }
+    };
+}
+
+
 var $0db07828cadc68e0$exports = {};
 
 $parcel$defineInteropFlag($0db07828cadc68e0$exports);
@@ -12863,6 +12890,7 @@ function $0db07828cadc68e0$export$2e2bcd8739ae039(store) {
         },
         init () {
             this.$nextTick(()=>{
+                if (this.$root.parentElement.offsetWidth === this.$root.offsetWidth) this.visibleTabsCount = this.tabs.length;
                 dropdown = (0, $d6f449055c23f07a$export$2e2bcd8739ae039)(this.$refs.dropdownTrigger, {
                     content: this.$refs.tabsDropdown,
                     theme: "menu",
@@ -12924,33 +12952,6 @@ function $0db07828cadc68e0$export$2e2bcd8739ae039(store) {
 }
 
 
-var $a87dacf5139b5e2f$exports = {};
-
-$parcel$defineInteropFlag($a87dacf5139b5e2f$exports);
-
-$parcel$export($a87dacf5139b5e2f$exports, "default", () => $a87dacf5139b5e2f$export$2e2bcd8739ae039);
-function $a87dacf5139b5e2f$export$2e2bcd8739ae039(store) {
-    return {
-        get store () {
-            return store || this;
-        },
-        get id () {
-            return this.$root.id;
-        },
-        get panels () {
-            return Array.from(this.$refs.panels.children);
-        },
-        isActive (el) {
-            return this.store.activeTab === this._getRef(el);
-        },
-        // protected
-        _getRef (el) {
-            return el.getAttribute("x-ref");
-        }
-    };
-}
-
-
 var $6d64716f0b34fdf4$exports = {};
 
 $parcel$defineInteropFlag($6d64716f0b34fdf4$exports);
@@ -13078,18 +13079,18 @@ function $6d64716f0b34fdf4$export$2e2bcd8739ae039(store) {
 }
 
 
-$068816311f4006ce$exports = {
+$368fec5c8619cf6d$exports = {
     "button": $cbd28b10fa9798c7$exports,
-    "code": $99486586f6691564$exports,
     "copy_button": $47a1c62621be0c54$exports,
     "dimensions_display": $e398acaded942bbe$exports,
-    "filter": $e9904a14dabf652d$exports,
+    "code": $99486586f6691564$exports,
     "embed": $e1f51f020443edd4$exports,
-    "nav": $d92d9d5253f84566$exports,
+    "filter": $e9904a14dabf652d$exports,
     "icon": $36506012e0c6e9e3$exports,
+    "nav": $d92d9d5253f84566$exports,
     "split_layout": $506dabb2bf255b38$exports,
-    "tabs": $0db07828cadc68e0$exports,
     "tab_panels": $a87dacf5139b5e2f$exports,
+    "tabs": $0db07828cadc68e0$exports,
     "viewport": $6d64716f0b34fdf4$exports
 };
 
@@ -13379,7 +13380,7 @@ const $d73574cc5e9b9e72$var$prefix = window.APP_NAME;
 // Components
 (0, $caa9439642c6336c$export$2e2bcd8739ae039).data("app", (0, $d709d0f4027033b2$export$2e2bcd8739ae039));
 [
-    $068816311f4006ce$exports,
+    $368fec5c8619cf6d$exports,
     $fe98e3f2bf49b28f$exports,
     $6c10158820e535ef$exports
 ].forEach((scripts)=>{