lookbook 2.0.0 → 2.0.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a0dbc6b86d4b4514268cbcfc281ced7379199b45e2b53a3a6614ce3dbc171bff
-  data.tar.gz: aad673566f48af3340f9df7e82e8189819dce778658245127137d4936d6312ac
+  metadata.gz: 367001bca8dd83ecf86085760aaa3befe93665913ada3602c893b5b768700b82
+  data.tar.gz: 733c573b3380072d0acecb9ce63e50f5a652d75ff649bda983c25935c938464b
 SHA512:
-  metadata.gz: e87da3e694b8d2317e0bc040f685ceb1a623a7b3bc72740b60606a6750ccf55b6a8c6f2db56b9b574de584dac3d42b25d72e1781301afc126446c3a584510745
-  data.tar.gz: ecc122d412ab626a1a2e5abfe33a96a2e261aeac40e6d26b302f9a0a44b7ee7854068f801f45080ca184c087638e27c1da91de250c0977c0f01b719eedeabfbb
+  metadata.gz: afe34ddf105269ad47a25d1f0b208eb7dec1acf7858cde29c1aec9f3a59fcafb99ee17f4f48e7ba3b1aef59ac20aa50e2e0382560862cef334c25605f43130b6
+  data.tar.gz: ced6d61a75a6e614dba752215f9ff7226c1c10e2c569048a605af35ed5c165129581dd9e8f34362a0d52863fae04143e23ec2615d33afdc027437b4f8ab96393

data/README.md

@@ -4,7 +4,7 @@
 
 <p>A UI development environment for Ruby on Rails applications.</p>
 
-<p><strong><a href="https://lookbook.build">Documentation</a> &nbsp;|&nbsp; <a href="http://demo.lookbook.build/">Demo site</a></strong></p>
+<p><strong><a href="https://lookbook.build">Documentation</a> &nbsp;|&nbsp; <a href="http://demo.lookbook.build/lookbook">Demo site</a></strong></p>
 
 <p><a href="https://rubygems.org/gems/lookbook"><img src="https://img.shields.io/gem/v/lookbook" alt="Gem version"></a>
 <a href="https://github.com/ViewComponent/lookbook/actions/workflows/ci.yml"><img src="https://github.com/ViewComponent/lookbook/actions/workflows/ci.yml/badge.svg" alt="CI status"></a></p>
@@ -13,6 +13,13 @@
 
 ---
 
+<div align="center">
+Lookbook combines a powerful <strong>component browser</strong> and <strong>preview system</strong> with an <strong>integrated documentation engine</strong> to help teams build robust, modular, maintainable user interfaces. <a href="https://lookbook.build"><strong>Learn more &rarr;</strong></a>
+
+</div>
+
+---
+
 [![Lookbook UI](.github/assets/lookbook_ui.png)](http://lookbook.build/)
 
 ## Development

data/app/components/lookbook/embed/inspector/component.js

@@ -36,6 +36,18 @@ export default function embedInspectorComponent(id, embedStore) {
     onResized({ height }) {
       if (height) {
         this.viewportHeight = height;
+
+        // Notify parent window of height resize so the parent window can implement
+        // its own iframe resize strategy if not using the Lookbook JS script.
+        // Uses Embedly-compatible postMessage format: https://docs.embed.ly/reference/provider-height-resizing
+        window.parent.postMessage(
+          JSON.stringify({
+            src: window.location.toString(),
+            context: "iframe.resize",
+            height,
+          }),
+          "*"
+        );
       }
     },
 

data/app/components/lookbook/embed_code_dropdown/component.css

@@ -1,12 +1,19 @@
 @layer components {
   [data-component="embed-code-dropdown"] {
     & [data-component="code"] {
-      @apply p-0;
+      @apply px-2 py-2 bg-lookbook-base-50 border border-dashed border-lookbook-divider;
     }
 
     & pre.code.highlight {
       @apply overflow-hidden whitespace-normal p-0;
       font-size: 11px;
     }
+
+    .line-clamp-2 {
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+    }
   }
 }

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

@@ -1,22 +1,64 @@
-<%= render_component_tag class:"p-3 w-[320px]" do %>  
-  <h4 class="text-[11px] uppercase tracking-wider mb-2 font-bold">Preview embed code</h4>
+<%= render_component_tag class:"p-3 w-[360px] text-[11px] text-gray-600" do %>  
 
-  <p class="text-xs text-gray-600 mb-3">
-    This code can be used to embed this preview in
-    Lookbook pages<% unless policy == "SAMEORIGIN" %> or on external sites<% end %>.
-  </p>
+  <!-- p class="mb-3">
+    Embed this preview in Lookbook pages or externally using the code or iframe URL below.
+  </!-->
 
-  <div class="border-t border-lookbook-dropdown-divider pt-3 pb-3">
-    <%= code :html do %><%= embed_code %><% end %>
+  <div class="mb-4 space-y-2">
+
+    <header class="flex items-center">
+      <h4 class=" uppercase tracking-wider font-bold">Embed Code</h4>
+      <span class="ml-auto" >
+        <a
+          href="https://lookbook.build/guide/sharing/embeds"
+          target="_blank"
+          title="Help"
+          class="text-lookbook-prose underline opacity-70 hover:opacity-100">
+          what's this?
+        </a>
+      </span>
+    </header>
+
+    <div class="relative group">
+      <%= code :html do %><%= embed_code %><% end %>
+
+      <span class="absolute top-px right-px bg-lookbook-base-50 rounded-md transition-opacity duration-300 opacity-0 group-hover:opacity-100">
+        <%= lookbook_render :copy_button, icon: :copy, tooltip: "Copy" do %>
+          <%= escape_once embed_code %>
+        <% end %>
+      </span>
+    </div>
+    
   </div>
 
-  <%= lookbook_render :text_button, "@click.stop.prevent": "copyEmbedCode", ":disabled": "copied" do |button| %>
-    <% button.with_icon name: :copy, size: 3, "x-show": "!copied", "x-cloak": true %>
-    <% button.with_icon name: :check, size: 3, "x-show": "copied", "x-cloak": true %>
-    <span x-text="copied ? 'Copied!' : 'Copy embed code'"></span>    
-  <% end %>
+  <div class="space-y-2">
+
+    <header class="flex items-center">
+      <h4 class="text-[11px] uppercase tracking-wider font-bold">Embed URL</h4>
+      <span class="ml-auto" >
+        <a
+          href="https://lookbook.build/guide/sharing/embeds#other-services"
+          target="_blank"
+          title="Help"
+          class="text-lookbook-prose underline opacity-70 hover:opacity-100">
+          what's this?
+        </a>
+      </span>
+    </header>
+
+    <div class="relative group">
+      <div class="font-mono bg-lookbook-base-50 px-2 py-2 break-all border border-dashed border-lookbook-divider">
+        <span class="line-clamp-2">
+          <%= embed_url %>
+        </span>
+      </div>
+      
+      <span class="absolute top-px right-px bg-lookbook-base-50 rounded-md transition-opacity duration-300 opacity-0 group-hover:opacity-100">
+        <%= lookbook_render :copy_button, icon: :copy, tooltip: "Copy" do %><%= embed_url %><% end %>
+      </span>
+    </div>
 
-  <div class="hidden" x-ref="copyTarget">
-    <%= escape_once embed_code %>
   </div>
-<% end %>
+      
+
+<% end %>

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

@@ -1,26 +1,3 @@
-import { decodeEntities } from "@helpers/string";
-
 export default function embedCodeDropdownComponent() {
-  let copyTimeout = null;
-
-  return {
-    copied: false,
-
-    copyEmbedCode() {
-      this.$nextTick(async () => {
-        const content = decodeEntities(this.$refs.copyTarget.innerHTML.trim());
-
-        await window.navigator.clipboard.writeText(content);
-        this.copied = true;
-
-        if (copyTimeout) {
-          clearTimeout(copyTimeout);
-        }
-
-        copyTimeout = setTimeout(() => {
-          this.copied = false;
-        }, 2000);
-      });
-    },
-  };
+  return {};
 }

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

@@ -33,6 +33,15 @@ module Lookbook
       escape_once embed_tag
     end
 
+    def embed_url
+      props = {
+        preview: preview_name,
+        scenario: target.name,
+        **external_embed_params.transform_keys { |k| k.tr("-", "_") }
+      }.to_json
+      "#{app_path}embed?props=#{CGI.escape(props)}"
+    end
+
     private
 
     def alpine_component

data/app/controllers/concerns/lookbook/with_preview_controller_concern.rb

@@ -8,8 +8,15 @@ module Lookbook
         # the request needs to look like it's coming from the host app,
         # not the Lookbook engine. So we try to get the controller and action
         # for the root path and use that as the 'fake' request context instead.
-        request_path = main_app.respond_to?(:root_path) ? main_app.root_path : "/"
-        path_parameters = Rails.application.routes.recognize_path(request_path)
+        path_parameters = begin
+          request_path = main_app.respond_to?(:root_path) ? main_app.root_path : "/"
+          Rails.application.routes.recognize_path(request_path)
+        rescue
+          # Fix for authenticated devise paths
+          if main_app.respond_to?(:new_user_session_path)
+            Rails.application.routes.recognize_path(main_app.new_user_session_path)
+          end
+        end
 
         preview_request = request.clone
         preview_request.path_parameters = path_parameters if path_parameters.present?

data/assets/js/lib/lookbook.js

@@ -114,7 +114,9 @@ function guessBasePath() {
   const scriptSrc = script.src;
 
   if (scriptSrc && scriptSrc.includes("lookbook-assets")) {
-    return scriptSrc.replace("lookbook-assets/js/lookbook.js", "lookbook");
+    return scriptSrc
+      .split("?")[0]
+      .replace("lookbook-assets/js/lookbook.js", "lookbook");
   }
 
   return `//${location.host}/lookbook`;

data/lib/lookbook/entities/collections/concerns/hierarchical_collection.rb

@@ -2,13 +2,16 @@ module Lookbook
   module HierarchicalCollection
     extend ActiveSupport::Concern
 
+    TREE_BUILDER = nil
+
     included do
       def entities
         @_cache[:entities] ||= collect_ordered_entities(to_tree(include_hidden: true))
       end
 
       def to_tree(include_hidden: false)
-        @_cache[include_hidden ? :tree_with_hidden : :tree] ||= EntityTreeBuilder.call(@entities, include_hidden: include_hidden)
+        cache_key = include_hidden ? :tree_with_hidden : :tree
+        @_cache[cache_key] ||= self.class::TREE_BUILDER.call(@entities, include_hidden: include_hidden)
       end
 
       protected

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

@@ -2,6 +2,8 @@ module Lookbook
   class PageCollection < EntityCollection
     include HierarchicalCollection
 
+    TREE_BUILDER = PageTreeBuilder
+
     def load(page_paths, changes = nil)
       file_paths = PageCollection.file_paths(page_paths)
       reload_all(file_paths) # TODO: Fix incremental reloading
@@ -44,7 +46,7 @@ module Lookbook
 
     def self.file_paths(directories)
       directories.flat_map do |dir|
-        PathUtils.normalize_paths(Dir["#{dir}/**/*.html.*", "#{dir}/**/*.md.*"].sort)
+        PathUtils.normalize_paths(Dir["#{dir}/**/*.html.*", "#{dir}/**/*.md.*", "#{dir}/**/*.md"].sort)
       end
     end
 

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

@@ -2,6 +2,8 @@ module Lookbook
   class PreviewCollection < EntityCollection
     include HierarchicalCollection
 
+    TREE_BUILDER = PreviewTreeBuilder
+
     def find_scenario_by_path(lookup_path)
       scenarios.find_by_path(lookup_path)
     end

data/lib/lookbook/services/entities/{entity_tree_builder.rb → page_tree_builder.rb}

@@ -1,36 +1,31 @@
 module Lookbook
-  class EntityTreeBuilder < Service
+  class PageTreeBuilder < Service
     attr_reader :include_hidden
 
-    def initialize(entities, include_hidden: false)
-      @entities = entities.to_a
+    def initialize(pages, include_hidden: false)
+      @pages = pages.to_a
       @include_hidden = include_hidden
     end
 
     def call
       root_node = TreeNode.new
-      entities.each do |entity|
+      pages.each do |page|
         current_node = root_node
-        path_segments = parse_segments(entity.logical_path)
+
+        path_segments = parse_segments(page.relative_file_path)
         path_segments.each.with_index(1) do |segment, i|
           name, priority_prefix = segment
-          content = entity if entity.depth == i # entities are always on the leaf nodes
+          content = page if page.depth == i # pages are always on the leaf nodes
 
           current_node.add_child(name, content, priority: priority_prefix) unless current_node.has_child?(name)
           current_node = current_node.get_child(name)
-
-          if content && content.type == :preview
-            content.visible_scenarios.each do |scenario|
-              current_node.add_child(scenario.name, scenario)
-            end
-          end
         end
       end
       root_node
     end
 
     def parse_segments(path)
-      path.split("/").map do |segment|
+      path.to_s.split("/").map do |segment|
         unless segment.start_with?(".")
           priority, name = PriorityPrefixParser.call(segment)
           [name, priority || 10000]
@@ -38,8 +33,8 @@ module Lookbook
       end.compact
     end
 
-    def entities
-      include_hidden ? @entities : @entities.select(&:visible?)
+    def pages
+      include_hidden ? @pages : @pages.select(&:visible?)
     end
   end
 end

data/lib/lookbook/services/entities/preview_tree_builder.rb

@@ -0,0 +1,34 @@
+module Lookbook
+  class PreviewTreeBuilder < Service
+    attr_reader :include_hidden
+
+    def initialize(previews, include_hidden: false)
+      @previews = previews.to_a
+      @include_hidden = include_hidden
+    end
+
+    def call
+      root_node = TreeNode.new
+      previews.each do |preview|
+        current_node = root_node
+
+        path_segments = preview.logical_path.split("/")
+        path_segments.each.with_index(1) do |name, i|
+          content = preview if preview.depth == i # entities are always on the leaf nodes
+
+          current_node.add_child(name, content) unless current_node.has_child?(name)
+          current_node = current_node.get_child(name)
+
+          content&.visible_scenarios&.each do |scenario|
+            current_node.add_child(scenario.name, scenario)
+          end
+        end
+      end
+      root_node
+    end
+
+    def previews
+      include_hidden ? @previews : @previews.select(&:visible?)
+    end
+  end
+end

data/lib/lookbook/support/utils/path_utils.rb

@@ -14,11 +14,11 @@ module Lookbook
         file_name = File.basename(path).split(".").first
 
         segments = [*directory_path&.split("/"), file_name].compact
-        stripped_segments = segments.map! do |segment|
+        segments.map! do |segment|
           PriorityPrefixParser.call(segment).last.tr("-", "_")
         end
 
-        to_path(stripped_segments)
+        to_path(segments)
       end
 
       def to_path(*args)

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 = /(?<=\s|^)"(.*[^\\])"(?:\s|$)/
+    DESCRIPTION_MATCHER = /(?<=\s|^)"(.*?[^\\])"(?:\s|$)/
 
     supports_options
 
@@ -45,19 +45,26 @@ module Lookbook
       value_type = nil
       description = nil
 
+      # Parse out YARD-style value type definition - i.e. [Boolean]
       text.match(VALUE_TYPE_MATCHER) do |match_data|
         value_type = match_data[2]
         text.gsub!(VALUE_TYPE_MATCHER, "").strip!
       end
 
+      # Parse and remove any options from string
+      text_with_options = text
+      _, text = parse_options(text)
+      options_str = text_with_options.sub(text, "")
+
+      # Parse description, if provided
       text.match(DESCRIPTION_MATCHER) do |match_data|
         description = match_data[1]
-        text.gsub!(DESCRIPTION_MATCHER, "").strip!
+        text.sub!(DESCRIPTION_MATCHER, "").strip!
       end
 
       input, rest = text.split(" ", 2)
 
-      {input: input, value_type: value_type, description: description, rest: rest}
+      {input: input, value_type: value_type, description: description, rest: [rest, options_str].compact.join(" ")}
     end
   end
 end

data/lib/lookbook/tags/yard_tag.rb

@@ -40,15 +40,7 @@ module Lookbook
 
     def tag_parts
       if @tag_parts.nil?
-        options, text = if self.class.supports_options?
-          TagOptionsParser.call(@text, {
-            file: host_file,
-            base_dir: host_file&.dirname,
-            eval_context: host_class_instance
-          })
-        else
-          [{}, @text]
-        end
+        options, text = parse_options(@text)
       end
       @tag_parts ||= {options: options, text: text}
     end
@@ -85,5 +77,17 @@ module Lookbook
       end
       host_code_object&.path&.constantize
     end
+
+    def parse_options(input)
+      if self.class.supports_options?
+        TagOptionsParser.call(input, {
+          file: host_file,
+          base_dir: host_file&.dirname,
+          eval_context: host_class_instance
+        })
+      else
+        [{}, @text]
+      end
+    end
   end
 end

data/lib/lookbook/version.rb

@@ -1,3 +1,3 @@
 module Lookbook
-  VERSION = "2.0.0"
+  VERSION = "2.0.2"
 end