lookbook 2.3.4 → 2.3.13

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 699b3598051a4b9f584d5c0bb703142b16988603b8cc2c99dcd0d2dee5191aa9
-  data.tar.gz: f6893f9ffb913df5b41fe54db42f8491d2169c8ba2b4de66ba8c13eac5cce8a6
+  metadata.gz: 6690e132c2afade65dabcdd620bf4d8e67f6bfcbacd8d94ad5f156d443417eb9
+  data.tar.gz: fa40a220f164cef926db2e1ce4a6be8681ccac8069149b49d791e58157e1a2a8
 SHA512:
-  metadata.gz: bcca11383c011dd7044d2291f8d39f806624e73281c5df0f60ea5face46e2171222cd9d7d6222fe4a9da5275452ac5f8a8ff95ea3edc0af064232e64e96eb378
-  data.tar.gz: 732624f41ad1a0cbd895a27348cc0cf10373fb823c5f0f36618c9cb1c464ce03baa962754c9c63078c56c681a0aca9be084ffcd5fb7f7bca6897788d50c2b22b
+  metadata.gz: 6590230a593eccba2833f205758255543ae6fdb4afea7ccc656909d7426a0032dc67163dfcb412c000c0d7b1fb78bc55070d4e738d05068d9bb6a21b6154166d
+  data.tar.gz: cb3f413449f297e41ec1a6706b11dcfb3589631a70252f4220466dcda5ade1e9ae8b909627ad923de8c9aa5471397085fcb50cbc6cacf81348cbfaf550ceaa02

data/README.md

@@ -49,9 +49,9 @@ To preview changes locally you can run a development version of the docs site:
 
 ### Testing
 
-Lookbook uses [RSpec](https://relishapp.com/rspec) for testing.
+Lookbook uses [RSpec](https://relishapp.com/rspec). [Appraisal](https://github.com/thoughtbot/appraisal) is used to run tests against different Ruby and Rails versions.
 
-Tests can be run using the `rake spec` or `bundle exec rspec` commands.
+Tests can be run using the `bundle exec appraisal rspec` command.
 
 The dummy app that the tests are being run against can be viewed by running the `bin/dummy` command and then browsing to http://localhost:9292/lookbook
 

data/app/components/lookbook/base_component.rb

@@ -3,6 +3,7 @@ module Lookbook
     send(:include, Lookbook::Engine.routes.url_helpers) # YARD parsing workaround: https://github.com/lsegal/yard/issues/546
     include Lookbook::UiElementsHelper
     include Lookbook::ClassNamesHelper if Engine.runtime_context.rails_older_than?("6.1.0")
+    include ERB::Util # for json_escape
 
     def initialize(alpine_data: [], **html_attrs)
       @alpine_data ||= alpine_data

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

@@ -1,18 +1,17 @@
-<%= lookbook_render button_component.new(
-  id: id,
-  icon: icon,
-  **button_attrs,
-  "x-on:keydown.esc.stop": "hideDropdown",
-  "x-on:navigation:complete.window": "updateDropdown") do %>
-  <%= content %>
-<% end %>
+<div class="contents" key="<%= key %>">
+  <%= lookbook_render button_component.new(
+    id: id,
+    icon: icon,
+    **button_attrs,
+    "x-on:keydown.esc.stop.document": "hideDropdown") do %>
+    <%= content %>
+  <% end %>
 
-<% if dropdown? %>
-  <% content_for :dropdowns do %>
-    <div data-dropdown-id="<%= id %>">
+  <% if dropdown? %>
+    <div data-dropdown-id="<%= id %>" hidden>
       <div class="divide-y divide-lookbook-divider text-left">
         <%= dropdown %>
       </div>
     </div>
   <% end %>
-<% end %>
+</div>

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

@@ -14,24 +14,28 @@ export default function buttonComponent() {
       }
 
       if (this.dropdownContent) {
-        dropdown = tippy(this.$el, {
-          content: this.dropdownContent,
-          trigger: "click",
-          theme: "menu",
-          triggerTarget: this.$el,
-          interactive: true,
-          zIndex: 99999,
-          onShow: () => {
-            if (!this.$store.settings.showTooltips) {
-              return false;
-            }
-            this.$dispatch("dropdown:show", { dropdown: this });
-          },
-          onHide: () => this.$dispatch("dropdown:hide", { dropdown: this }),
-        });
+        this.initDropdown();
       }
     },
 
+    initDropdown() {
+      dropdown = tippy(this.$el, {
+        content: this.dropdownContent,
+        trigger: "click",
+        theme: "menu",
+        triggerTarget: this.$el,
+        interactive: true,
+        zIndex: 99999,
+        onShow: () => {
+          if (!this.$store.settings.showTooltips) {
+            return false;
+          }
+          this.$dispatch("dropdown:show", { dropdown: this });
+        },
+        onHide: () => this.$dispatch("dropdown:hide", { dropdown: this }),
+      });
+    },
+
     get dropdownContent() {
       if (this.$root && this.$root.id) {
         const dropdown = document.querySelector(
@@ -48,15 +52,6 @@ export default function buttonComponent() {
       }
     },
 
-    updateDropdown() {
-      if (dropdown) {
-        dropdown.hide();
-        this.$nextTick(() => {
-          dropdown.setContent(this.dropdownContent);
-        });
-      }
-    },
-
     startSpin() {
       this._spinning = true;
     },

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

@@ -10,6 +10,10 @@ module Lookbook
       @button_attrs = html_attrs
     end
 
+    def key
+      Digest::SHA256.hexdigest(icon.to_s + dropdown.to_s + @button_attrs.to_json)
+    end
+
     def dropdown?
       dropdown.present?
     end

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

@@ -1,3 +1,3 @@
 <%= render_component_tag :div, class: "flex items-center" do %>
   <%= safe_join(buttons) %>
-<% end %>
+<% end %>

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

@@ -8,4 +8,4 @@
     } 
   ] do %>
   <%= Lookbook::CodeHighlighter.call(source, **@highlight_opts) %>
-<% end %>
+<% end %>

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

@@ -8,4 +8,4 @@
   <% if content %>
     <div x-ref="copyTarget" class="hidden"><%== content %></div>
   <% end %>
-<% end %>
+<% end %>

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

@@ -49,4 +49,4 @@
       <%== debug_data %>
     </div>
   <% end %>
-<% end %>
+<% end %>

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

@@ -1,5 +1,5 @@
 <%= render_component_tag class: "flex items-center text-xs font-mono space-x-1 transition",
-  ":class":"{'!opacity-100': resizing}",
+  "x-bind:class":"{'!opacity-100': resizing}",
   "x-on:viewport:resize-start.window": "resizing = true",
   "x-on:viewport:resize-complete.window": "resizing = false",
   "x-on:dom:update-start.window": "tearDown",
@@ -8,4 +8,4 @@
     <span x-text="`${width}px`"></span>
     <span class="opacity-70">x</span>
     <span x-text="`${height}px`"></span>
-<% end %>
+<% end %>

data/app/components/lookbook/display_options/editor/component.html.erb

@@ -10,4 +10,4 @@
   <% else %>
     <%= safe_join(fields) %>
   <% end %>
-<% end %>
+<% end %>

data/app/components/lookbook/display_options/field/component.html.erb

@@ -5,4 +5,4 @@
     </label>
     <%= select_tag(name, options_for_select(choices, value), "x-model": "value", class: "compact") %>
   </div>
-<% end %>
+<% end %>

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

@@ -3,4 +3,4 @@
   preview="<%= preview_class %>"
   scenario="<%= scenario.name %>"
   <%= params_attrs_str %> panels="<%= panels.join(",") %>"
-  actions="<%= actions.join(",") %>"></lookbook-embed>
+  actions="<%= actions.join(",") %>"></lookbook-embed>

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

@@ -6,4 +6,4 @@
     line_numbers: true do %>
     <%= trimmed_source %>
   <% end %>
-<% end %>
+<% end %>

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

@@ -11,7 +11,7 @@
       x-on:keydown.f.window="if (!($event.shiftKey || $event.metaKey || $event.ctrlKey || $event.altKey)) { focus(); $event.preventDefault(); $event.stopPropagation(); }"
       x-on:keydown.stop>
       <button class="text-lookbook-icon-button-stroke hover:text-lookbook-icon-button-stroke-hover focus:ring-0 focus:outline-none absolute top-1/2 right-3 -translate-y-1/2" x-on:click="clear" x-bind:class="{hidden: !active}">
-        <%= icon  :x, size: 3 %>
+        <%= icon  :x, size: 4 %>
       </button>
   </div>
-<% end %>
+<% end %>

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

@@ -11,10 +11,10 @@
   disabled: disabled,
   aria: { label: tooltip } do %>
   <span x-ref="icon">
-    <%= icons.present? ? safe_join(icons) : (lookbook_render(:icon, name: icon, size: icon_size, ":class": "{'animate-spin': _spinning}") if icon) %>
+    <%= icons.present? ? safe_join(icons) : (lookbook_render(:icon, name: icon, size: icon_size, "x-bind:class": "{'animate-spin': _spinning}") if icon) %>
   </span>
   <% if tooltip %>
     <label class="hidden" x-ref="tooltip"><%= tooltip %></label>
   <% end %>
   <%= content %>
-<% end %>
+<% end %>

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

@@ -5,4 +5,4 @@
 <% if panel_styles %>
   <% content_for :user_styles do %><%= panel_styles %>
   <% end %>
-<% end %>
+<% end %>

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

@@ -3,4 +3,4 @@
     <path d="M3.5 1H17v20H3.5A2.5 2.5 0 0 1 1 18.5v-15A2.5 2.5 0 0 1 3.5 1Z"/>
     <path d="M1.153 19.36c0-.737.261-1.188.596-1.57.417-.475.985-.79 1.751-.79H17M6.801 5.1v7.554L6.8 12.7h5.57"/>
   </g>
-</svg>
+</svg>

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

@@ -23,4 +23,4 @@
       <%= lookbook_render :prose, size: :sm, content: content %>
     </div>
   </div>
-<% end %>
+<% end %>

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

@@ -25,4 +25,4 @@
       </div>
     <% end %>
   </div>
-<% end %>
+<% end %>

data/app/components/lookbook/nav/directory/component.html.erb

@@ -25,4 +25,4 @@
       <%= safe_join(children) %>
     </ul>
   <% end %>  
-<% end %>
+<% end %>

data/app/components/lookbook/nav/entity/component.html.erb

@@ -29,4 +29,4 @@
       <%= safe_join(children) %>
     </ul>
   <% end %>  
-<% end %>
+<% end %>

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

@@ -15,4 +15,4 @@
       <% end %>
     <% end %>
   <% end %>
-<% end %>
+<% end %>

data/app/components/lookbook/params/editor/component.html.erb

@@ -18,4 +18,4 @@
 <% if param_styles %>
   <% content_for :user_styles do %><%= param_styles %>
   <% end %>
-<% end %>
+<% end %>

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

@@ -9,7 +9,7 @@ module Lookbook
       def initialize(**html_attrs)
         @field_count = -1
         @@input_styles = {}
-        super(**html_attrs)
+        super
       end
 
       def before_render

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

@@ -14,7 +14,7 @@ module Lookbook
         styles, html = StylesExtractor.call(render_input)
         Editor::Component.add_styles(param.input, styles)
 
-        escaped_value = json_escape(param.value.to_s).gsub("\n", '\n')
+        escaped_value = html_escape(json_escape(param.value.to_s).gsub("\n", '\n'))
         wrapper_attrs = {
           data: {"param-input": param.input},
           "x-data": "paramsInputComponent({name: \"#{param.name}\", value: \"#{escaped_value}\"})"

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

@@ -5,4 +5,4 @@
     prose-h1:font-bold
   " do %>
   <%== rendered_content %>
-<% end %>
+<% end %>

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

@@ -10,4 +10,4 @@
       </div>
     <% end %>
   <% end %>
-<% end %>
+<% end %>

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

@@ -2,4 +2,4 @@
   <div x-ref="panels" class="h-full">
     <%= safe_join(panels) %>
   </div>
-<% end %>
+<% end %>

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

@@ -8,7 +8,7 @@ module Lookbook
 
     def initialize(**html_attrs)
       @panel_counter = 0
-      super(**html_attrs)
+      super
     end
 
     protected

data/app/components/lookbook/tab_panels/panel/component.html.erb

@@ -3,6 +3,6 @@
   "data-tab-panel": @name,
   cloak: true,
   class: "h-full",
-  ":class": "{ hidden: !isActive($el) }" do %>
+  "x-bind:class": "{ hidden: !isActive($el) }" do %>
     <%== content %>
 <% end %>

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

@@ -17,4 +17,4 @@
       <%= safe_join(dropdown_tabs) %>
     </div>
   </div>
-<% end %>
+<% end %>

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

@@ -8,7 +8,7 @@
       "py-2 text-base": @theme == :page,
     }
   ],
-  ":class": "{
+  "x-bind:class": "{
     'border-lookbook-tabs-border-active': isSelected($el),
     'border-transparent text-lookbook-tabs-text hover:text-lookbook-tabs-text-hover': !isSelected($el),
     'hidden': visibleTabsCount >= #{@position}

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

@@ -9,7 +9,7 @@
       "px-2 text-lg relative -bottom-px": @theme == :page,
     }
   ],
-  ":class": "{
+  "x-bind:class": "{
     'border-lookbook-tabs-border-active': isSelected($el),
     'border-transparent text-lookbook-tabs-text hover:text-lookbook-tabs-text-hover': !isSelected($el),
     '!text-lookbook-tabs-text-disabled': isDisabled($el),

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

@@ -13,7 +13,7 @@
 
   <span class="flex items-center space-x-2 justify-center">
     <span x-ref="icon">
-      <%= icons.present? ? safe_join(icons) : (lookbook_render(:icon, name: icon, size: icon_size, ":class": "{'animate-spin': _spinning}") if icon) %>
+      <%= icons.present? ? safe_join(icons) : (lookbook_render(:icon, name: icon, size: icon_size, "x-bind:class": "{'animate-spin': _spinning}") if icon) %>
     </span>
     <% if content %>
       <span><%= content %></span>
@@ -23,4 +23,4 @@
   <% if tooltip %>
     <label class="hidden" x-ref="tooltip"><%= tooltip %></label>
   <% end %>
-<% end %>
+<% end %>

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

@@ -2,4 +2,4 @@
   <div class="toolbar-sections flex items-stretch w-full h-10">
     <%= safe_join(sections) %>
   </div>
-<% end %>
+<% end %>

data/app/controllers/lookbook/application_controller.rb

@@ -10,6 +10,9 @@ module Lookbook
     helper Lookbook::ApplicationHelper
     helper Lookbook::UiElementsHelper
 
+    before_action :disable_annotations
+    after_action :restore_annotations
+
     before_action :assign_theme_overrides
     before_action :assign_instance_vars
 
@@ -37,6 +40,20 @@ module Lookbook
 
     protected
 
+    def disable_annotations
+      return unless ActionView::Base.respond_to?(:annotate_rendered_view_with_filenames)
+
+      @original_annotations_value = ActionView::Base.annotate_rendered_view_with_filenames
+      ActionView::Base.annotate_rendered_view_with_filenames = false
+    end
+
+    def restore_annotations
+      return if @original_annotations_value.nil?
+
+      ActionView::Base.annotate_rendered_view_with_filenames = @original_annotations_value
+      @original_annotations_value = nil
+    end
+
     def assign_theme_overrides
       @theme_overrides ||= Engine.theme.to_css
     end

data/app/controllers/lookbook/previews_controller.rb

@@ -39,13 +39,17 @@ module Lookbook
     def show
       raise_not_found("Preview not found") unless @target
 
-      @preview_html = preview_controller.process(
-        :render_in_layout_to_string,
-        "lookbook/previews/group",
-        inspector_data,
-        layout: @preview.layout,
-        append_html: (iframe_content_scripts if embedded?)
-      )
+      @preview_html = if Lookbook.config.preview_single_pass_rendering && !inspector_data.scenarios.many?
+        inspector_data.scenarios.first.output + (iframe_content_scripts if embedded?)
+      else
+        preview_controller.process(
+          :render_in_layout_to_string,
+          "lookbook/previews/group",
+          inspector_data,
+          layout: @preview.layout,
+          append_html: (iframe_content_scripts if embedded?)
+        )
+      end
     end
 
     private

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

@@ -22,10 +22,10 @@
         
         <%= lookbook_render :split_layout,
           alpine_data: "$store.layout.main",
-          ":class": "$store.layout.mobile && '!block'" do |layout| %>
+          "x-bind:class": "$store.layout.mobile && '!block'" do |layout| %>
 
           <% layout.with_pane id: "app-sidebar", class: "flex flex-col bg-lookbook-sidebar-bg relative translate-x-0",
-            ":class": "{
+            "x-bind: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-[1001] border-l border-lookbook-divider': $store.layout.mobile
@@ -93,7 +93,7 @@
             <% end %>
           <% end %>
 
-          <% layout.with_pane id: "app-main", class: "overflow-hidden h-full", ":class": "$store.layout.mobile && 'w-screen'" do %>
+          <% layout.with_pane id: "app-main", class: "overflow-hidden h-full", "x-bind:class": "$store.layout.mobile && 'w-screen'" do %>
             <%= content_for?(:main) ? yield(:main) : yield %>
           <% end %>
         <% end %>

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

@@ -31,4 +31,4 @@
   <%= yield :body %>
 <% else %>
   <%= render template: "layouts/lookbook/skeleton" %>
-<% end %>
+<% end %>

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

@@ -5,6 +5,8 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
 
+  <%= csrf_meta_tags %>
+
   <link href="<%= lookbook_asset_path("/css/lookbook.css") %>" rel="stylesheet">
   <link href="<%= lookbook_asset_path("/css/themes/#{@config.ui_theme}.css") %>" rel="stylesheet">
 

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

@@ -9,4 +9,4 @@
     params: @passed_params,
     dynamic_display_options: @dynamic_display_options,
     static_display_options: @static_display_options
-  } %>
+  } %>

data/app/views/lookbook/errors/default.html.erb

@@ -37,4 +37,4 @@
       </div>
     </div>
   </div>
-</div>
+</div>

data/app/views/lookbook/errors/not_found.html.erb

@@ -7,4 +7,4 @@
       theme: :error do %>
       <%= @error.detail || "It may have been moved or deleted." %>
     <% end %>
-<% end %>
+<% end %>

data/app/views/lookbook/index.html.erb

@@ -37,4 +37,4 @@ sidebar_panels_config = @config.preview_inspector.sidebar_panels.map(&:to_sym)
       <p>Select a preview from the nav to get started.</p>
     <% end %>
   <% end %>
-<% end %>
+<% end %>

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

@@ -3,4 +3,4 @@
   type: "color",
   "x-on:change.stop": "",
   "x-on:blur": "value = $el.value",
-) %>
+) %>

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

@@ -12,4 +12,4 @@
   <div class="flex-none px-2 opacity-60">
     <%= input_options[:max] %>
   </div>
-</div>
+</div>

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

@@ -2,4 +2,4 @@
   options_for_select(choices || [], value),
   **input_options,
   "x-model": "value"
-) %>
+) %>

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

@@ -2,4 +2,4 @@
   **input_options,
   type: input,
   "x-model.debounce.200ms": "value"
-) %>
+) %>

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

@@ -16,4 +16,4 @@
       "x-show": "changed",
       "x-on:click": "applyChange" %>
   </div>
-</div>
+</div>

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

@@ -2,4 +2,4 @@
   rows: 4,
   **input_options,
   "x-model.debounce.200ms": "value"
-) %>
+) %>

data/app/views/lookbook/inspector/panels/_notes.html.erb

@@ -11,9 +11,9 @@
     <% end %>
   </div>
 <% else %>
-  <div class="p-4 w-full h-full bg-lookbook-prose-bg">
+  <div class="p-4 w-full min-h-full h-max bg-lookbook-prose-bg">
     <%= lookbook_render :prose do %>
       <%== items.any? ? items.first.notes : "<em class='opacity-50'>No notes provided.</em>" %>
     <% end %>
   </div>
-<% end %>
+<% end %>

data/app/views/lookbook/inspector/panels/_output.html.erb

@@ -4,4 +4,4 @@
   <%- else -%>
     <%== scenarios.first.beautified_output -%>
   <%- end %>
-<% end %>
+<% end %>

data/app/views/lookbook/inspector/panels/_preview.html.erb

@@ -7,4 +7,4 @@
     class: "-inset-px relative",
     style: "width: calc(100% + 2px); height: calc(100% + 2px)"
     %>
-</div>
+</div>

data/app/views/lookbook/inspector/panels/_source.html.erb

@@ -8,4 +8,4 @@
     <% scenario = scenarios.first %>
     <%= lookbook_render :code, language: scenario.source_lang[:name], line_numbers: true, full_height: true do %><%== scenario.source %><% end %>
   <% end %>
-</div>
+</div>