lookbook 2.0.4 → 2.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 23c9ebbf01e8228763851357baeb33218efefdeebbe03f1ffe9be340ad9e22d8
-  data.tar.gz: 0af47c23f936c11f782d611f52e113f006ba323afd61d3f6c7598cea9ac7ee0c
+  metadata.gz: 19ab9c7f446b482d3fca35d243e8c998b2bc6eed27315b88a27e76ff0efd5da2
+  data.tar.gz: 254235a524acd72521176f195ffb6e2ec4fa972e4590bc495aca6026366a17a3
 SHA512:
-  metadata.gz: 2c0c8d14d894301fb289defc7f61f1886ec2e2da17d958bafe8e880cbdd6232a44a1d91d2db9ecb37cf970908a4b600d80fba1fdf0199d8dfd2bd0fdf133ad8e
-  data.tar.gz: 830455b5818b67bcc5245898ce2e2c0eda5b99117b8fbe2f20898dc839e28a7d8c12901575d31d7653c0daab23aee3fe314c6348746f8e12754b4ed9f7d8599f
+  metadata.gz: 5c25ff635a176b8973155be10c3b5bc89dbb5a8bfd75f9427198b9ab6b1ac57fab5a85af4f6a0028c87e5600105d7cebe299997f81d3fb16a03b175424770bbd
+  data.tar.gz: 3022e8109efafbc70e6e04fffef56694caa6b44be75edf6568c7127b51145ab110bf8baea411e869e790a11405567e3d6da436de12bcf811b076fbf543e6321b

data/app/components/lookbook/base_component.rb

@@ -1,6 +1,6 @@
 module Lookbook
   class BaseComponent < ViewComponent::Base
-    include Lookbook::Engine.routes.url_helpers
+    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")
 

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

@@ -9,7 +9,7 @@
       <h3 class="flex items-center space-x-1">
         <strong class="text-lookbook-embed-title"><%= target.preview.label %></strong>
         <% if scenarios.many? %>
-          <%= select_tag("target", options_for_select(scenario_select_options, helpers.lookbook_embed_path(target.path)), "x-model": "targetPath", class: "!ml-2 compact") %>
+          <%= select_tag("target", options_for_select(scenario_select_options, helpers.lookbook_embed_path(target.lookup_path)), "x-model": "targetPath", class: "!ml-2 compact") %>
         <% else %>
           <span>(<%= target.label %>) </span>
         <% end %>
@@ -31,13 +31,13 @@
         <%= lookbook_render :button_group do |group| %>
           <% if display_action?(:inspect) %>
             <% group.with_button icon: :eye,
-              href: helpers.lookbook_inspect_url(target.path, params),
+              href: helpers.lookbook_inspect_url(target.lookup_path, params),
               tooltip: "View in Inspector",
               target: "_top" %>
           <% end %>
           <% if display_action?(:open) %>
             <% group.with_button icon: :external_link,
-              href: helpers.lookbook_preview_url(target.path, params),
+              href: helpers.lookbook_preview_url(target.lookup_path, params),
               tooltip: "Open in new window",
               target: "_blank" %>
           <% end %>
@@ -57,7 +57,7 @@
       x-ref="viewportWrapper"> 
       <%= lookbook_render :viewport,
         iframe_id: "#{id}-viewport",
-        src: helpers.lookbook_preview_path(target.path, request.query_parameters.merge(lookbook_timestamp: Time.now, lookbook_embed: true)),
+        src: helpers.lookbook_preview_path(target.lookup_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",
@@ -82,6 +82,21 @@
             <% end %>
           <% end %>
         <% end %>
+
+         <% toolbar.with_section align: :right,  class: "flex-none relative z-10" do %>
+          <%= lookbook_render :button_group do |group| %>
+            <%= panels.select { |p| !p.disabled && p.copy }.each do |panel| %>
+              <% group.with_button id: "copy-panel-contents-button-#{panel.name}",
+                icon: :copy,
+                tooltip: "Copy panel contents",
+                copy: !!panel.copy,
+                "x-show": "store.activeTab === '#{panel.name}'",
+                cloak: true do %>
+                <%= panel.copy ? panel.copy : "" %>
+                <% end %>
+            <% end %>  
+          <% end %>
+        <% end %>
       <% end %>
 
       <div class="bg-lookbook-drawer-bg">      

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

@@ -40,7 +40,7 @@ module Lookbook
     end
 
     def scenario_select_options
-      scenarios.map { |scenario| [scenario.label, helpers.lookbook_embed_path(scenario.path)] }
+      scenarios.map { |scenario| [scenario.label, helpers.lookbook_embed_path(scenario.lookup_path)] }
     end
 
     def display_option_controls?

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

@@ -29,6 +29,7 @@
         <% if @debug_menu %>
           <% group.with_button id: "debug-menu-button",
             icon: :help_circle,
+            tooltip: "Debug info",
             class: "!text-lookbook-header-text", "x-show": "!loading" do |button| %>
             <% menu = lookbook_render :debug_menu,
               version: Lookbook::VERSION,
@@ -50,8 +51,8 @@
           "x-show": "$store.layout.mobile && !sidebarHidden",
           "x-on:keydown.esc.window": "closeMobileSidebar",
           class: "!text-lookbook-header-text" %>
-      <% end %>    
+      <% end %>
     <% end %>
   <% end %>
-  
-<% end %>
+
+<% end %>

data/app/components/lookbook/tag_component.rb

@@ -20,7 +20,14 @@ module Lookbook
     end
 
     def self.escape_attribute_key
-      @escape_attribute_key ||= (Gem::Version.new(Rails.version) < Gem::Version.new("6.1.5.1")) ? :escape_attributes : :escape
+      @escape_attribute_key ||= (
+        (
+          Gem::Version.new(Rails.version) < Gem::Version.new("5.2.7.1")
+        ) || (
+          Gem::Version.new(Rails.version) >= Gem::Version.new("6") &&
+          Gem::Version.new(Rails.version) < Gem::Version.new("6.1.5.1")
+        )
+      ) ? :escape_attributes : :escape
     end
   end
 end

data/app/controllers/lookbook/embeds_controller.rb

@@ -1,5 +1,5 @@
 module Lookbook
-  class EmbedsController < ApplicationController
+  class EmbedsController < Lookbook::ApplicationController
     include ActionView::Helpers::SanitizeHelper
     include TargetableConcern
     include WithPreviewControllerConcern
@@ -53,7 +53,7 @@ module Lookbook
           embed_params[:_options] = SearchParamEncoder.call(options)
           embed_params.symbolize_keys!
 
-          return redirect_to lookbook_embed_url(scenario ? scenario.path : preview.path, embed_params)
+          return redirect_to lookbook_embed_url(scenario ? scenario.lookup_path : preview.lookup_path, embed_params)
         end
       end
 
@@ -65,7 +65,7 @@ module Lookbook
       unless @target
         @target = @scenario_choices.first || @preview&.default_scenario
         if @target
-          redirect_to lookbook_embed_path(@target.path, req_params)
+          redirect_to lookbook_embed_path(@target.lookup_path, req_params)
         else
           raise_not_found("Preview not found")
         end

data/app/controllers/lookbook/inspector_controller.rb

@@ -1,5 +1,5 @@
 module Lookbook
-  class InspectorController < ApplicationController
+  class InspectorController < Lookbook::ApplicationController
     include TargetableConcern
     include WithPanelsConcern
     include WithPreviewControllerConcern

data/app/controllers/lookbook/pages_controller.rb

@@ -1,5 +1,5 @@
 module Lookbook
-  class PagesController < ApplicationController
+  class PagesController < Lookbook::ApplicationController
     helper_method :page_controller
 
     def self.controller_path

data/app/controllers/lookbook/previews_controller.rb

@@ -1,5 +1,5 @@
 module Lookbook
-  class PreviewsController < ApplicationController
+  class PreviewsController < Lookbook::ApplicationController
     include TargetableConcern
     include WithPreviewControllerConcern
 

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

@@ -11,6 +11,12 @@
 
     <%= content_for?(:main) ? yield(:main) : yield %>
   </div>
+
+  <% if content_for? :dropdowns %>
+    <div class="hidden">
+      <%= content_for :dropdowns -%>
+    </div>
+  <% end %>
 <% end %>
 
 <%= render template: "layouts/lookbook/skeleton" %>

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

@@ -63,7 +63,7 @@
               tooltip: "Open preview in new window",
               target: "_blank" %>
 
-            <% group.with_button id: "show-drawer-button",
+            <% group.with_button id: "show-vertical-drawer-button",
               icon: "sidebar",
               tooltip: "Show drawer",
               "x-on:click": "$store.inspector.drawer.hidden = false",
@@ -71,7 +71,7 @@
               "x-show": "$store.inspector.drawer.hidden && vertical",
               cloak: true %>
 
-            <% group.with_button id: "show-drawer-button",
+            <% group.with_button id: "show-bottom-drawer-button",
               icon: "credit-card",
               tooltip: "Show drawer",
               "x-on:click": "$store.inspector.drawer.hidden = false",
@@ -166,4 +166,4 @@
       </div>
     <% end %>
   <% end %>
-</main>
+</main>

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

@@ -1,4 +1,5 @@
 <% if scenarios.many? %>
+  <% scenarios = scenarios.filter(&:visible?) %>
   <%# Render a group of scenarios %>
   <% scenarios.each do |scenario| %>
     <div style="margin-bottom: 30px !important; display: block !important;">

data/assets/css/lookbook.css

@@ -9,7 +9,7 @@
 
 @layer base {
   html {
-    @apply scroll-smooth h-screen;
+    @apply scroll-smooth h-screen w-screen;
   }
 
   @media screen and (prefers-reduced-motion: reduce) {
@@ -19,7 +19,7 @@
   }
 
   body {
-    @apply text-lookbook-text font-ui text-sm overflow-hidden;
+    @apply text-lookbook-text font-ui text-sm overflow-hidden w-screen;
   }
 
   [x-cloak] {

data/assets/js/app.js

@@ -25,6 +25,12 @@ export default function app() {
         const socket = createSocket(window.SOCKET_PATH);
         socket.addListener("Lookbook::ReloadChannel", () => this.updateDOM());
       }
+
+      this.$watch("$store.layout.mobile", (mobile) => {
+        if (!mobile) {
+          this.$store.layout.sidebar.hidden = true;
+        }
+      });
     },
 
     navigateTo(path) {

data/lib/lookbook/cable/cable.rb

@@ -1,6 +1,6 @@
 require "action_cable/engine"
-require_relative "./connection"
-require_relative "./reload_channel"
+require_relative "connection"
+require_relative "reload_channel"
 
 module Lookbook
   class Cable

data/lib/lookbook/engine.rb

@@ -62,7 +62,9 @@ module Lookbook
         ViewComponent::Preview.extend(Lookbook::PreviewAfterRender)
       end
 
-      opts.reload_on_change = host_config.reload_classes_only_on_change if opts.reload_on_change.nil?
+      if opts.reload_on_change.nil?
+        opts.reload_on_change = !host_config.cache_classes && host_config.reload_classes_only_on_change
+      end
     end
 
     config.after_initialize do
@@ -144,9 +146,9 @@ module Lookbook
         @_hooks ||= HookStore.new
       end
 
-      def run_hooks(event_name, *args)
+      def run_hooks(event_name, *)
         hooks.for_event(event_name).each do |hook|
-          hook.call(Lookbook, *args)
+          hook.call(Lookbook, *)
         end
       end
 

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

@@ -17,9 +17,11 @@ module Lookbook
       protected
 
       def collect_ordered_entities(start_node)
-        start_node.inject([]) do |entities, node|
-          entities.append(node.content? ? node.content : collect_ordered_entities(node))
-        end.flatten
+        start_node.flat_map do |node|
+          node_entity = node.content? ? [node.content] : []
+          child_entities = collect_ordered_entities(node)
+          [*node_entity, *child_entities]
+        end
       end
     end
   end

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

@@ -43,6 +43,10 @@ module Lookbook
       clear_cache
     end
 
+    def entities
+      @_cache[:entities] ||= collect_ordered_entities(to_tree(include_hidden: true)).grep(Lookbook::PreviewEntity)
+    end
+
     class << self
       def preview_from_code_object(code_object)
         klass = code_object.path.constantize

data/lib/lookbook/entities/entity.rb

@@ -65,6 +65,10 @@ module Lookbook
     alias_method :path, :lookup_path
     deprecate path: :lookup_path, deprecator: Deprecation
 
+    def search_terms
+      @_search_terms ||= lookup_path.split("/").map(&:titleize)
+    end
+
     # @!endgroup
 
     def <=>(other)

data/lib/lookbook/entities/scenario_entity.rb

@@ -134,7 +134,7 @@ module Lookbook
 
     # @api private
     def search_terms
-      [parent.label, label]
+      [parent.search_terms, parent.label, label]
     end
 
     alias_method :lang, :source_lang

data/lib/lookbook/entities/scenario_group_entity.rb

@@ -124,7 +124,7 @@ module Lookbook
 
     # @api private
     def search_terms
-      [parent.label, label]
+      [parent.search_terms, parent.label, label]
     end
 
     # @api private

data/lib/lookbook/file_watcher.rb

@@ -13,7 +13,7 @@ module Lookbook
 
       def file_watcher
         @_file_watcher ||= begin
-          require_relative "./support/evented_file_update_checker"
+          require_relative "support/evented_file_update_checker"
 
           EventedFileUpdateChecker
         rescue LoadError

data/lib/lookbook/helpers/class_names_helper.rb

@@ -19,8 +19,8 @@ module Lookbook
       tag_values
     end
 
-    def class_names(*args)
-      tokens = build_tag_values(*args).flat_map { |value| value.to_s.split(/\s+/) }.uniq
+    def class_names(*)
+      tokens = build_tag_values(*).flat_map { |value| value.to_s.split(/\s+/) }.uniq
 
       safe_join(tokens, " ")
     end

data/lib/lookbook/helpers/ui_elements_helper.rb

@@ -17,8 +17,8 @@ module Lookbook
     #
     # @param name [Symbol, String] Name of the icon
     # @param opts [Hash] Options hash
-    def icon(name, **opts)
-      lookbook_render :icon, name: name, **opts
+    def icon(name, **)
+      lookbook_render(:icon, name: name, **)
     end
 
     # Display a syntax-highlighted block of code.
@@ -35,13 +35,13 @@ module Lookbook
     end
 
     # @api private
-    def prose(**opts, &block)
-      lookbook_render :prose, **opts, &block
+    def prose(**, &block)
+      lookbook_render(:prose, **, &block)
     end
 
     # @api private
-    def lookbook_tag(tag = :div, **attrs, &block)
-      lookbook_render :tag, tag: tag, **attrs, &block
+    def lookbook_tag(tag = :div, **, &block)
+      lookbook_render(:tag, tag: tag, **, &block)
     end
 
     # @api private

data/lib/lookbook/param.rb

@@ -28,7 +28,7 @@ module Lookbook
       val = @value || value_default
       if value_type == "datetime"
         formatter = (input == "datetime-local") ? "%Y-%m-%dT%T" : "%Y-%m-%d"
-        StringValueCaster.call(val, "datetime").strftime(formatter)
+        StringValueCaster.call(val, "datetime")&.strftime(formatter)
       else
         val
       end

data/lib/lookbook/preview_controller_actions.rb

@@ -4,7 +4,7 @@ module Lookbook
 
     included do
       helper PreviewHelper
-      helper Rails.application.routes.url_helpers
+      send(:helper, Rails.application.routes.url_helpers) # YARD parsing workaround: https://github.com/lsegal/yard/issues/546
       prepend_view_path Engine.root.join("app/views")
 
       def render_scenario_to_string(preview, scenario)

data/lib/lookbook/stores/input_store.rb

@@ -16,8 +16,8 @@ module Lookbook
       end
     end
 
-    def add_input(input, *args)
-      store[normalize_name(input)] = build_config(input, *args)
+    def add_input(input, *)
+      store[normalize_name(input)] = build_config(input, *)
     end
 
     def get_input(input)

data/lib/lookbook/stores/panel_store.rb

@@ -19,11 +19,11 @@ module Lookbook
       load_config(config)
     end
 
-    def add_panel(name, *args)
+    def add_panel(name, *)
       if get_panel(name)
         raise ConfigError.new("panel with name '#{name}' already exists", scope: "panels.config")
       else
-        store[Utils.symbolize_name(name)] = build_config(name, *args)
+        store[Utils.symbolize_name(name)] = build_config(name, *)
       end
     end
 

data/lib/lookbook/support/service.rb

@@ -1,7 +1,7 @@
 module Lookbook
   class Service
-    def self.call(*args, **kwargs, &block)
-      new(*args, **kwargs).call(&block)
+    def self.call(*, **, &block)
+      new(*, **).call(&block)
     end
   end
 end

data/lib/lookbook/version.rb

@@ -1,3 +1,3 @@
 module Lookbook
-  VERSION = "2.0.4"
+  VERSION = "2.1.0"
 end

data/lib/lookbook/websocket.rb

@@ -1,10 +1,10 @@
 module Lookbook
   class Websocket
     class << self
-      def new(mount_path, **kwargs)
-        require_relative "./cable/cable"
+      def new(mount_path, **)
+        require_relative "cable/cable"
 
-        Cable.new(mount_path, **kwargs)
+        Cable.new(mount_path, **)
       rescue LoadError
         NullWebsocket.new
       end

data/public/lookbook-assets/css/lookbook.css

@@ -112,6 +112,8 @@ table {
 }
 
 button, input, optgroup, select, textarea {
+  font-feature-settings: inherit;
+  font-variation-settings: inherit;
   font-family: inherit;
   font-size: 100%;
   font-weight: inherit;
@@ -184,6 +186,10 @@ ol, ul, menu {
   list-style: none;
 }
 
+dialog {
+  padding: 0;
+}
+
 textarea {
   resize: vertical;
 }
@@ -215,7 +221,7 @@ img, video {
   display: none;
 }
 
-[type="text"], [type="email"], [type="url"], [type="password"], [type="number"], [type="date"], [type="datetime-local"], [type="month"], [type="search"], [type="tel"], [type="time"], [type="week"], [multiple], textarea, select {
+[type="text"], input:where(:not([type])), [type="email"], [type="url"], [type="password"], [type="number"], [type="date"], [type="datetime-local"], [type="month"], [type="search"], [type="tel"], [type="time"], [type="week"], [multiple], textarea, select {
   appearance: none;
   --tw-shadow: 0 0 #0000;
   background-color: #fff;
@@ -227,7 +233,7 @@ img, video {
   line-height: 1.5rem;
 }
 
-[type="text"]:focus, [type="email"]:focus, [type="url"]:focus, [type="password"]:focus, [type="number"]:focus, [type="date"]:focus, [type="datetime-local"]:focus, [type="month"]:focus, [type="search"]:focus, [type="tel"]:focus, [type="time"]:focus, [type="week"]:focus, [multiple]:focus, textarea:focus, select:focus {
+[type="text"]:focus, input:where(:not([type])):focus, [type="email"]:focus, [type="url"]:focus, [type="password"]:focus, [type="number"]:focus, [type="date"]:focus, [type="datetime-local"]:focus, [type="month"]:focus, [type="search"]:focus, [type="tel"]:focus, [type="time"]:focus, [type="week"]:focus, [multiple]:focus, textarea:focus, select:focus {
   outline-offset: 2px;
   --tw-ring-inset: var(--tw-empty, );
   --tw-ring-offset-width: 0px;
@@ -251,6 +257,11 @@ input::placeholder, textarea::placeholder {
 
 ::-webkit-date-and-time-value {
   min-height: 1.5em;
+  text-align: inherit;
+}
+
+::-webkit-datetime-edit {
+  display: inline-flex;
 }
 
 ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
@@ -267,7 +278,7 @@ select {
   padding-right: 2.5rem;
 }
 
-[multiple] {
+[multiple], [size]:where(select:not([size="1"])) {
   background-image: initial;
   background-position: initial;
   background-repeat: unset;
@@ -367,6 +378,7 @@ select {
 
 html {
   height: 100vh;
+  width: 100vw;
   scroll-behavior: smooth;
 }
 
@@ -377,6 +389,7 @@ html {
 }
 
 body {
+  width: 100vw;
   color: var(--lookbook-text);
   font-family: Inter var, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
   font-size: .875rem;
@@ -501,6 +514,11 @@ pre[class*="language-"] {
 
 .form-input::-webkit-date-and-time-value {
   min-height: 1.5em;
+  text-align: inherit;
+}
+
+.form-input::-webkit-datetime-edit {
+  display: inline-flex;
 }
 
 .form-input::-webkit-datetime-edit, .form-input::-webkit-datetime-edit-year-field, .form-input::-webkit-datetime-edit-month-field, .form-input::-webkit-datetime-edit-day-field, .form-input::-webkit-datetime-edit-hour-field, .form-input::-webkit-datetime-edit-minute-field, .form-input::-webkit-datetime-edit-second-field, .form-input::-webkit-datetime-edit-millisecond-field, .form-input::-webkit-datetime-edit-meridiem-field {
@@ -1524,7 +1542,7 @@ pre[class*="language-"] {
   display: flex;
 }
 
-@media (min-width: 480px) {
+@media (width >= 480px) {
   [data-component="message"] {
     padding: 1.5rem;
   }
@@ -1556,7 +1574,7 @@ pre[class*="language-"] {
   display: none;
 }
 
-@media (min-width: 480px) {
+@media (width >= 480px) {
   [data-component="message"] .message-icon {
     display: block;
   }
@@ -3840,7 +3858,7 @@ select.compact {
   background-color: #0000;
 }
 
-@media (min-width: 1024px) {
+@media (width >= 1024px) {
   .lg\:prose-base {
     font-size: 1rem;
     line-height: 1.75;
@@ -4130,7 +4148,7 @@ select.compact {
   color: var(--lookbook-prose-link);
 }
 
-@media (min-width: 480px) {
+@media (width >= 480px) {
   .xs\:mx-auto {
     margin-left: auto;
     margin-right: auto;
@@ -4154,13 +4172,13 @@ select.compact {
   }
 }
 
-@media (min-width: 640px) {
+@media (width >= 640px) {
   .sm\:p-8 {
     padding: 2rem;
   }
 }
 
-@media (min-width: 768px) {
+@media (width >= 768px) {
   .md\:-mr-\[2px\] {
     margin-right: -2px;
   }
@@ -4189,7 +4207,7 @@ select.compact {
   }
 }
 
-@media (min-width: 1024px) {
+@media (width >= 1024px) {
   .lg\:mb-8 {
     margin-bottom: 2rem;
   }