lookbook 2.0.0.beta.0 → 2.0.0.beta.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 01c53cc76e29d3d9862a67b29bbabd927c623003bc55355415775c778ec0c99a
-  data.tar.gz: e8bf4e7538bf3224e70a00458cddea148c594cf4a61287dce978c15793873dfe
+  metadata.gz: a6a6aedff44436d4f892bc5b0fc28f596d0cd14f4578af150ea004997f1aa01c
+  data.tar.gz: 548938fd0815d99535f3c70831ad9b5a554c23dd8dd6f6d9896538150b1a79ad
 SHA512:
-  metadata.gz: 7d2049f0d6b79e2994596a3cbe76e14e247ae75f15f137b0ccd8ed6863dc71637145765beb7c2b826d84f2b350af2e88d72e746667b809f82626e7a70aa4d03f
-  data.tar.gz: afc5b06b19975253e8f9125723fc1e11d3857ae53af9f5831b9b4c59f1c79fa5d620ffdeed3177a30175c9ad98e92b19b5ba4a37508c0940520ac63ac13fa7bf
+  metadata.gz: a3ff63b130c8a92fc6a0f84296d3d56529941a21957eb1ec056d31121ef3eddef308a5397c032d77bf630b9d465085a3dd5f9dd81381abc2fdf88905bfb24ab2
+  data.tar.gz: 8fd98d1823d8a9f5b00d690c73416f98993d8dacf6d8af92935e85891a1c9c06452f82cef88e57c48148bc4329104d2f7583a683ae4e7a5dfb58735d337c1fab

data/README.md

@@ -27,7 +27,7 @@ For the current stable release see the [main branch](https://github.com/ViewComp
 
 ## Development
 
-Lookbook is implemented as an isolated [Rails Engine](https://guides.rubyonrails.org/engines.html) and uses [ViewComponent](https://viewcomponent.org), [Tailwind](https://tailwindcss.com/) and [Alpine](https://alpinejs.dev/) for it's UI.
+Lookbook is implemented as an isolated [Rails Engine](https://guides.rubyonrails.org/engines.html) and uses [ViewComponent](https://viewcomponent.org), [Tailwind](https://tailwindcss.com/) and [Alpine](https://alpinejs.dev/) for its UI.
 
 This repository contains:
 

data/app/components/lookbook/embed/inspector/component.html.erb

@@ -57,7 +57,7 @@
       x-ref="viewportWrapper"> 
       <%= lookbook_render :viewport,
         iframe_id: "#{id}-viewport",
-        src: helpers.lookbook_preview_path(target.path, params.merge(lookbook_embed: true)),
+        src: helpers.lookbook_preview_path(target.path, request.query_parameters.merge(lookbook_timestamp: Time.now, lookbook_embed: true)),
         alpine_data: "store",
         resize_height: false,
         class: "mb-[-2px] transition-[height] duration-150",

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

@@ -1,7 +1,10 @@
 <%= render_component_tag class:"p-3 w-[320px]" do %>  
   <h4 class="text-[11px] uppercase tracking-wider mb-2 font-bold">Preview embed code</h4>
 
-  <p class="text-xs text-gray-600 mb-3">This code can be used to embed this preview in Lookbook pages or on external sites.</p>
+  <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>
 
   <div class="border-t border-lookbook-dropdown-divider pt-3 pb-3">
     <%= code :html do %><%= embed_code %><% end %>

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

@@ -1,11 +1,12 @@
 module Lookbook
   class EmbedCodeDropdown::Component < Lookbook::BaseComponent
-    attr_reader :preview, :pages, :params, :target
+    attr_reader :preview, :pages, :params, :target, :policy
 
-    def initialize(preview:, target:, pages:, params:, **html_attrs)
+    def initialize(preview:, target:, pages:, params:, policy:, **html_attrs)
       @preview = preview
       @target = target
       @pages = pages
+      @policy = policy
       @params = params.deep_symbolize_keys
       super(**html_attrs)
     end

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

@@ -1,6 +1,6 @@
 <%= render_component_tag :header do %>
   <%= lookbook_render :toolbar, class: "!bg-lookbook-header-bg !text-lookbook-header-text !border-lookbook-header-border" do |toolbar| %>
-    <% toolbar.with_section class: "mt-[-2px]", padded: true do %>
+    <% toolbar.with_section padded: true do %>
       <% if branding.present? %>
         <a
           <% if landing_path %>href="<%= landing_path %>"<% end %>    

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

@@ -42,14 +42,15 @@ module Lookbook
           display_params = SearchParamParser.call(params[:_display])
           display_params.each do |name, value|
             if @dynamic_display_options.key?(name)
-              cookies["lookbook-display-#{name}"] = value
+              cookies["lookbook-display-#{name}"] = value.is_a?(Array) ? value[1] : value
             end
           end
         end
 
         @dynamic_display_options.each do |name, opts|
           choices = opts.is_a?(Hash) ? opts[:choices].to_a : opts
-          @static_display_options[name] ||= cookies.fetch("lookbook-display-#{name}", choices.first)
+          value = choices.first.is_a?(Array) ? choices.first[1] : choices.first
+          @static_display_options[name] ||= cookies.fetch("lookbook-display-#{name}", value)
         end
 
         unless params[:_display]

data/app/controllers/lookbook/previews_controller.rb

@@ -5,6 +5,8 @@ module Lookbook
 
     layout false
 
+    before_action :permit_framing, only: [:show]
+
     def self.controller_path
       "lookbook/previews"
     end
@@ -17,10 +19,15 @@ module Lookbook
               {
                 name: preview.name,
                 scenarios: preview.scenarios.map { |scenario|
-                  {
-                    inspect_path: scenario.url_path,
-                    name: scenario.name
-                  }
+                  case scenario
+                  when Lookbook::ScenarioEntity
+                    scenario_json(scenario)
+                  when Lookbook::ScenarioGroupEntity
+                    {
+                      name: scenario.name,
+                      examples: scenario.scenarios.map { |s| scenario_json(s) }
+                    }
+                  end
                 }
               }
             end
@@ -33,7 +40,7 @@ module Lookbook
       if @target
         begin
           opts = {layout: @preview.layout}
-          if params[:lookbook_embed] == "true"
+          if embedded?
             opts[:append_html] = render_to_string("lookbook/partials/_iframe_content_scripts", layout: nil)
           end
           @preview_html = preview_controller.process(:render_in_layout_to_string, "lookbook/previews/group", inspector_data, **opts)
@@ -46,5 +53,24 @@ module Lookbook
         show_404
       end
     end
+
+    private
+
+    def embedded?
+      params[:lookbook_embed] == "true"
+    end
+
+    def scenario_json(scenario)
+      {
+        name: scenario.name,
+        inspect_path: scenario.url_path,
+        preview_path: scenario.preview_path
+      }
+    end
+
+    def permit_framing
+      headers["X-Frame-Options"] = Lookbook.config.preview_embeds.policy if embedded?
+      headers["X-Frame-Options"] = "SAMEORIGIN" if headers["X-Frame-Options"] == "DENY"
+    end
   end
 end

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

@@ -11,7 +11,7 @@
     <%= render "lookbook/partials/user_styles" %>
 
     <%= lookbook_render :header, id: "app-header", debug_menu: @config.debug_menu do |header| %>
-      <% header.branding { @config.project_name } %>
+      <% header.with_branding { @config.project_name } %>
     <% end %>
 
     <% if @previews.any? || @pages.any? %>
@@ -29,7 +29,7 @@
           "@click.outside": "closeMobileSidebar",
           cloak: true do %>
 
-          <% cache do %>
+          <% cache @engine.last_changed do %>
 
             <%= lookbook_render :split_layout,
               alpine_data: "$store.layout.#{@pages.any? && @previews.any? ? "sidebar" : "singleSectionSidebar"}",
@@ -53,7 +53,7 @@
                         <% end %>
                       <% end %>
                     <% end %>
-                    <% nav.filter store: "$store.nav.previews.filter", placeholder: "Filter previews by name&hellip;" %>
+                    <% nav.with_filter store: "$store.nav.previews.filter", placeholder: "Filter previews by name&hellip;" %>
                   <% end %>
                 <% end %>
               <% end %>

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

@@ -33,13 +33,16 @@
 
         <% toolbar.with_section divide: :left, class: "flex-none relative z-10" do %>
           <%= lookbook_render :button_group do |group| %>
-            <%= group.with_button id: "embed-generator-dropdown-button", icon: :code_2, tooltip: "Get embed code" do |button| %>
-              <% button.with_dropdown.with_content(lookbook_render :embed_code_dropdown,
-                pages: @pages,
-                preview: @preview,
-                target: @target,
-                params: request.query_parameters
-              ) %>
+            <% if @engine.preview_embeds_allowed? %>
+              <%= group.with_button id: "embed-generator-dropdown-button", icon: :code_2, tooltip: "Get embed code" do |button| %>
+                <% button.with_dropdown.with_content(lookbook_render :embed_code_dropdown,
+                  pages: @pages,
+                  preview: @preview,
+                  target: @target,
+                  params: request.query_parameters,
+                  policy: @config.preview_embeds.policy
+                ) %>
+              <% end %>
             <% end %>
             <% group.with_button id: "copy-preview-url-button",
               icon: :link,

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

@@ -2,7 +2,7 @@
   <%# Render a group of scenarios %>
   <% scenarios.each do |scenario| %>
     <div style="margin-bottom: 30px !important; display: block !important;">
-      <h6 style="all: unset; display: block; color: #999; font-family: sans-serif; font-size: 14px; margin-top: 0; margin-bottom: 10px;">
+      <h6 style="all: unset; display: block; color: #555; font-family: sans-serif; font-size: 14px; margin-top: 0; margin-bottom: 10px;">
         <%= scenario.label %>
       </h6>
       <%= scenario.output %>

data/config/app.yml

@@ -9,7 +9,8 @@ shared:
     main_panels: [preview, output]
     drawer_panels: [source, notes, params, "*"]
   preview_embeds:
-    policy: "SAMEORIGIN"
+    enabled: true
+    policy: SAMEORIGIN
     panels: false
     actions: []
     scenarios: []

data/config/routes.rb

@@ -13,6 +13,8 @@ Lookbook::Engine.routes.draw do
 
   get "/inspect/*path", to: "inspector#show", as: :lookbook_inspect
 
-  get "/embed", to: "embeds#lookup", as: :lookbook_embed_lookup
-  get "/embed/*path", to: "embeds#show", as: :lookbook_embed
+  if Lookbook::Engine.preview_embeds_allowed?
+    get "/embed", to: "embeds#lookup", as: :lookbook_embed_lookup
+    get "/embed/*path", to: "embeds#show", as: :lookbook_embed
+  end
 end

data/lib/lookbook/engine.rb

@@ -82,6 +82,10 @@ module Lookbook
         reloading? && runtime_context.web? && FileWatcher.evented?
       end
 
+      def preview_embeds_allowed?
+        opts.preview_embeds.enabled == true && opts.preview_embeds.policy != "DENY"
+      end
+
       def websocket
         @_websocket ||= auto_refresh? ? Websocket.new(mount_path, logger: Lookbook.logger) : NullWebsocket.new
       end
@@ -150,7 +154,7 @@ module Lookbook
       def preview_watch_paths
         return @_preview_watch_paths if @_preview_watch_paths
 
-        paths = [*opts.preview_paths, opts.components_path, *opts.listen_paths, *view_paths].uniq
+        paths = [*opts.preview_paths, *opts.component_paths, *opts.listen_paths, *view_paths].uniq
         @_preview_watch_paths ||= PathUtils.normalize_paths(paths)
       end
 
@@ -173,11 +177,13 @@ module Lookbook
         changed_files = [*changes[:added], *changes[:modified]] if changes
         parser.parse(changed_files) do |code_objects|
           previews.load(code_objects.all(:class), changes)
+          mark_changed
         end
       end
 
       def load_pages(changes = nil)
         pages.load(Engine.page_paths, changes)
+        mark_changed
       end
 
       def notify_clients(changes = nil)
@@ -192,6 +198,15 @@ module Lookbook
         reloaders.register_changes(changes)
         notify_clients(changes)
       end
+
+      def mark_changed
+        @_last_changed = (Time.now.to_f * 1000).to_i
+      end
+
+      def last_changed
+        mark_changed unless @_last_changed
+        @_last_changed
+      end
     end
 
     at_exit do

data/lib/lookbook/entities/scenario_entity.rb

@@ -61,6 +61,10 @@ module Lookbook
       lookbook_inspect_path(lookup_path)
     end
 
+    def preview_path
+      lookbook_preview_path(lookup_path)
+    end
+
     def type
       :scenario
     end

data/lib/lookbook/entities/scenario_group_entity.rb

@@ -24,7 +24,7 @@ module Lookbook
     end
 
     def render_targets
-      @_render_targets ||= RenderTargetCollection.new(scenarios.flat_map(&:render_targets).uniq(&:path))
+      @_render_targets ||= RenderTargetCollection.new(scenarios.flat_map(&:render_targets).uniq(&:lookup_path))
     end
 
     def search_terms
@@ -43,6 +43,10 @@ module Lookbook
       lookbook_inspect_path(lookup_path)
     end
 
+    def preview_path
+      lookbook_preview_path(lookup_path)
+    end
+
     def type
       :group
     end

data/lib/lookbook/helpers/preview_helper.rb

@@ -10,5 +10,9 @@ module Lookbook
     def lookbook_data(key, fallback = nil)
       Lookbook.data.fetch(key.to_sym, fallback)
     end
+
+    def url_for(*args)
+      main_app.url_for(*args)
+    end
   end
 end

data/lib/lookbook/preview_controller_actions.rb

@@ -5,7 +5,6 @@ module Lookbook
     included do
       helper PreviewHelper
       prepend_view_path Engine.root.join("app/views")
-      before_action :permit_embeds
 
       def render_scenario_to_string(preview, scenario_name)
         prepend_application_view_paths
@@ -41,10 +40,6 @@ module Lookbook
         disable = Lookbook.config.preview_disable_action_view_annotations
         ActionViewAnnotationsHandler.call(disable_annotations: disable, &block)
       end
-
-      def permit_embeds
-        headers["X-Frame-Options"] = Lookbook.config.preview_embeds.policy
-      end
     end
   end
 end

data/lib/lookbook/version.rb

@@ -1,3 +1,3 @@
 module Lookbook
-  VERSION = "2.0.0.beta.0"
+  VERSION = "2.0.0.beta.2"
 end