lookbook 2.0.0.beta.1 → 2.0.0.beta.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 03b89a2cdb1b56200c40166eb670887c79a01cf98152653ece5c512fff450492
-  data.tar.gz: ff7da5b63b5023bb3e9f0149af2a49eab5392450cc8851dd258eb7b2973d3267
+  metadata.gz: fcdd4b9e317b56fb9844a1f7017604b77de9992c2d837dc927c9114d5da085cd
+  data.tar.gz: 4cde43bf1aa5df6d781fdf5406faff47cee683bd778654b78d7c96b1439e61ab
 SHA512:
-  metadata.gz: bac766446880b1f66ac4e68746b638934d1c451e32231a1f24b48b931823ffd11a83147eadeb5106a39c9302759a7f234daba0a2ffbbf7ec46cc9d38090a6757
-  data.tar.gz: 25acb93d4fb260485627def8d01fa7975034662fdc9ca6db621445cf83708c66423e5318655130189bdd1b5edd8f6132e8126658bddc48ad3442bedc1430799f
+  metadata.gz: 99f938fc0e5827535823a9631dd8f7de7fe341da07ebdd1591a70fdb25b1124613c8a5d07d621985447a1e00eb6ee2314f933059652b21b9fd33997452010acd
+  data.tar.gz: 4f0378245e9e3239affe31022d69a61c276bfa1389450a410db183acd9faa137a32c1908859b88f6e5808bdbf2a6fced966751834627ae6a96025d85df7c6967

data/app/assets/lookbook/css/fonts.css

@@ -0,0 +1,33 @@
+@font-face {
+  font-family: "Inter var";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: normal;
+  font-named-instance: "Regular";
+  src: url("../fonts/Inter-roman.var.woff2?v=3.19") format("woff2");
+}
+
+@font-face {
+  font-family: "Inter var";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: italic;
+  font-named-instance: "Italic";
+  src: url("../fonts/Inter-italic.var.woff2?v=3.19") format("woff2");
+}
+
+@font-face {
+  font-family: "Source Code Variable";
+  font-weight: 200 900;
+  font-style: normal;
+  font-stretch: normal;
+  src: url("../fonts/SourceCodeVariable-Roman.ttf.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Source Code Variable";
+  font-weight: 200 900;
+  font-style: italic;
+  font-stretch: normal;
+  src: url("../fonts/SourceCodeVariable-Italic.ttf.woff2") format("woff2");
+}

data/app/assets/lookbook/css/lookbook.css

@@ -1,3 +1,4 @@
+@import "./fonts.css";
 @import "tailwindcss/base";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";

data/app/assets/lookbook/js/lib/lookbook.js

@@ -10,7 +10,7 @@ const whiteListedAttributes = [
   "param-*",
 ];
 
-function initEmbeds() {
+function initEmbeds(root = document) {
   if (typeof window.iFrameResize !== "function") {
     console.error(
       "Lookbook embeds require the 'iframe-resizer' library to be available. Skipping embed instantiation."
@@ -18,7 +18,17 @@ function initEmbeds() {
     return;
   }
 
-  const embeds = Array.from(document.querySelectorAll("lookbook-embed"));
+  if (typeof root === "string") {
+    root = document.querySelector(root);
+  }
+
+  if (!root) {
+    return console.error(
+      "Could not initialize Lookbook embeds. Root node not found."
+    );
+  }
+
+  const embeds = Array.from(root.querySelectorAll("lookbook-embed"));
 
   embeds.forEach((embed) => {
     const attrs = Array.from(embed.attributes);

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/nav/entity/component.html.erb

@@ -17,7 +17,7 @@
         class: "nav-toggle-icon",
         "x-effect": "iconName = open ? 'chevron-down' : 'chevron-right'" if children? %>
       <%= icon nav_icon, size: 3.5, class: "mr-1.5 text-lookbook-nav-icon-stroke" %>
-      <span class="truncate <% if node.type == :preview %>font-bold<% end %>"><%= label %></span>
+      <span class="truncate <% if node.type == :preview %>font-semibold<% end %>"><%= label %></span>
     </div>
   <% end %>
   

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

@@ -2,13 +2,13 @@
   <div class="flex w-full border-b border-lookbook-divider mb-6">
     <%= lookbook_render :tabs, theme: :page do |t| %>
       <% @tabs.each do |props| %>
-        <%= t.tab **props %>
+        <%= t.with_tab **props %>
       <% end %>
     <% end %>
   </div>
   <%= lookbook_render :tab_panels do |t| %>
     <% @tabs.each do |props| %>
-      <% t.panel name: props[:name] do %>
+      <% t.with_panel name: props[:name] do %>
         <%= lookbook_render :prose, markdown: props[:markdown], class: "max-w-none flex-none" do %>
           <%== props[:tab_content] %>
         <% 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

@@ -40,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)
@@ -56,6 +56,10 @@ module Lookbook
 
     private
 
+    def embedded?
+      params[:lookbook_embed] == "true"
+    end
+
     def scenario_json(scenario)
       {
         name: scenario.name,
@@ -65,6 +69,7 @@ module Lookbook
     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

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

@@ -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"}",

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/pages/show.html.erb

@@ -5,11 +5,11 @@
   @dom:update-complete.window="Lookbook.initEmbeds();">
   <div class="h-full bg-lookbook-page-bg 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-bg opacity-90 absolute inset-0 w-full h-full z-0"></div>
         <div class="relative z-10 flex items-center">
-        
+
         <% if @previous_page %>
           <%= lookbook_render :icon_button,
             size: :lg,
@@ -58,7 +58,7 @@
         <% if @page.sections.any? %>
           <%= lookbook_render :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_tabs.with_tab name: "page-section-#{section.name}", label: section.label do %>
                 <%= page_controller.render_page(section) %>
               <% end %>
             <% end %>

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

@@ -26,7 +26,7 @@ module Lookbook
     end
 
     config.after_initialize do
-      if opts.using_view_component || Rails.env.test?
+      if opts.using_view_component
         vc_config = Engine.host_config.view_component
 
         opts.preview_paths += vc_config.preview_paths
@@ -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
@@ -125,14 +129,18 @@ module Lookbook
       end
 
       def view_paths
-        ActionView::ViewPaths.all_view_paths.flat_map do |view_path|
-          view_path.paths.map { |path| Pathname(path.to_s) }
+        # handle view path registry changes in Rails 7.1
+        paths = if defined?(ActionView::ViewPaths::Registry)
+          ActionView::ViewPaths::Registry.all_file_system_resolvers.map(&:path)
+        else
+          ActionView::ViewPaths.all_view_paths.flat_map(&paths)
         end
+        paths.map { |path| Pathname(path.to_s) }
       end
 
       def component_paths
         @_component_paths ||= begin
-          paths = [*opts.component_paths, *Engine.view_paths, host_app_path]
+          paths = [*opts.component_paths, *view_paths, host_app_path]
           PathUtils.normalize_paths(paths)
         end
       end
@@ -150,7 +158,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 +181,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 +202,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_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

data/lib/lookbook/error.rb

@@ -80,7 +80,7 @@ module Lookbook
       else
         @file_path.presence || nil
       end
-      path.nil? ? nil : path.to_s.delete_prefix("#{Rails.root}/")
+      path&.to_s&.delete_prefix("#{Rails.root}/")
     end
 
     def line_number

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/services/markdown_renderer.rb

@@ -18,11 +18,9 @@ module Lookbook
     class LookbookMarkdownRenderer < Redcarpet::Render::HTML
       def block_code(code, language = "ruby")
         line_numbers = language.to_s.end_with? "-numbered"
-        ApplicationController.render(Lookbook::Code::Component.new(**{
-          source: code,
+        ApplicationController.render(Lookbook::Code::Component.new(source: code,
           language: language.to_s.chomp("-numbered"),
-          line_numbers: line_numbers
-        }), layout: nil)
+          line_numbers: line_numbers), layout: nil)
       end
 
       def postprocess(full_document)

data/lib/lookbook/version.rb

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