lookbook 1.5.2 → 2.3.7

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

@@ -1,5 +1,5 @@
 import { debounce } from "throttle-debounce";
-import tippy from "~/app/assets/lookbook/js/lib/tippy";
+import tippy from "~/assets/js/lib/tippy";
 import { observeSize } from "@helpers/layout";
 import { getElementSize } from "@helpers/dom";
 
@@ -49,7 +49,7 @@ export default function tabsComponent(store) {
         const initialTab = initial
           ? this.tabs.find((t) => this._getRef(t) === initial)
           : this.tabs[0];
-        this.selectTab(initialTab, true);
+        this.selectTab(initialTab || this.tabs[0], true);
 
         this.parentObserver = observeSize(
           this.$root.parentElement,

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

@@ -13,7 +13,7 @@
     'border-transparent text-lookbook-tabs-text hover:text-lookbook-tabs-text-hover': !isSelected($el),
     'hidden': visibleTabsCount >= #{@position}
   }",
-  "@click.prevent": "selectTab($el)",
+  "x-on:click.prevent": "selectTab($el)",
   data: {
     disabled: @disabled
   } do %>

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

@@ -15,8 +15,8 @@
     '!text-lookbook-tabs-text-disabled': isDisabled($el),
     'invisible pointer-events-none relative z-[-1]': visibleTabsCount < #{@position}
   }",
-  "@click.prevent": "selectTab($el)",
-  "@keydown.window.prevent.#{@hotkey}": @hotkey.present? ? "$el.click()" : nil,
+  "x-on:click.prevent": "selectTab($el)",
+  "x-on:keydown.window.prevent.#{@hotkey}": @hotkey.present? ? "$el.click()" : nil,
   data: {
     disabled: @disabled
   },

data/app/components/lookbook/tag_component.rb

@@ -1,6 +1,7 @@
 module Lookbook
   class TagComponent < ViewComponent::Base
-    include Lookbook::ComponentHelper
+    include Lookbook::UiElementsHelper
+    include Lookbook::ClassNamesHelper if Engine.runtime_context.rails_older_than?("6.1.0")
 
     def initialize(tag: :div, name: nil, cloak: false, **html_attrs)
       @tag = tag
@@ -19,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/components/lookbook/text_button/component.html.erb

@@ -0,0 +1,26 @@
+<%= render_component_tag tag_name,
+  id: id,
+  href: href,
+  class: [
+    "block px-2 py-1.5 text-xs rounded-md bg-lookbook-button-bg text-lookbook-button-text w-full transition focus:outline-none focus-visible:outline-none",
+    {
+      "hover:bg-lookbook-button-bg-hover": !disabled,
+      "cursor-[not-allowed] opacity-50": disabled
+    }
+  ],
+  disabled: disabled,
+  aria: { label: tooltip } do %>
+
+  <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) %>
+    </span>
+    <% if content %>
+      <span><%= content %></span>
+    <% end %>
+  </span>
+
+  <% if tooltip %>
+    <label class="hidden" x-ref="tooltip"><%= tooltip %></label>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,42 @@
+module Lookbook
+  class TextButton::Component < Lookbook::BaseComponent
+    renders_many :icons, Lookbook::Icon::Component
+
+    ICON_SIZES = {
+      xs: 3,
+      sm: 3.5,
+      md: 4,
+      lg: 6
+    }
+
+    attr_reader :icon, :tooltip, :disabled, :size, :href
+
+    def initialize(id: nil, icon: nil, tooltip: nil, disabled: false, size: :md, href: nil, **html_attrs)
+      @id = id
+      @icon = icon
+      @tooltip = tooltip
+      @disabled = disabled
+      @size = size
+      @href = href
+      super(**html_attrs)
+    end
+
+    def id
+      @id ||= Utils.temp_id(prefix: "button")
+    end
+
+    def icon_size
+      ICON_SIZES[size]
+    end
+
+    def tag_name
+      href.present? ? :a : :button
+    end
+
+    protected
+
+    def alpine_component
+      "buttonComponent"
+    end
+  end
+end

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

@@ -1,5 +1,5 @@
 <%= render_component_tag class: "h-10 border-b border-lookbook-divider w-full flex items-center text-sm flex-none bg-lookbook-toolbar-bg" do %>
-  <div class="toolbar-sections flex items-stretch w-full">
+  <div class="toolbar-sections flex items-stretch w-full h-10">
     <%= safe_join(sections) %>
   </div>
 <% end %>

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

@@ -28,17 +28,17 @@
       <iframe seamless<%= " id=#{@iframe_id}" if @iframe_id.present? %>
         x-ref="iframe"
         class="bg-lookbook-page-bg h-full w-full border border-lookbook-divider"
-        :class="{ 'pointer-events-none': reflowing }"
+        x-bind:class="{ 'pointer-events-none': reflowing }"
         style="<%= "max-height: #{@max_height}px;" if @max_height.present? %>"
         src="<%= @src %>"
         frameborder="0"
-        @load="$dispatch('viewport:loaded', {viewport: this})"
+        x-on:load="$dispatch('viewport:loaded', {viewport: this})"
         title="viewport"></iframe>
         <% if @resize_width %>
           <div
             class="resize-handle border-r border-t border-lookbook-divider cursor-[col-resize] <%= "border-b" unless @resize_height %>"
-            @pointerdown="onResizeWidthStart"
-            @dblclick="toggleFullWidth">
+            x-on:pointerdown="onResizeWidthStart"
+            x-on:dblclick="toggleFullWidth">
             <svg class="h-4 w-4 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
               <path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
             </svg>
@@ -47,8 +47,8 @@
         <% if @resize_height %>
           <div
             class="resize-handle border-b border-l border-lookbook-divider cursor-[row-resize] <%= "border-r" unless @resize_width %>"
-            @pointerdown="onResizeHeightStart"
-            @dblclick="toggleFullHeight">
+            x-on:pointerdown="onResizeHeightStart"
+            x-on:dblclick="toggleFullHeight">
             <svg class="h-4 w-4 pointer-events-none rotate-90" fill="currentColor" viewBox="0 0 24 24" >
               <path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
             </svg>
@@ -57,8 +57,8 @@
         <% if @resize_height && @resize_width %>
           <div
             class="resize-handle border-r border-b border-lookbook-divider cursor-[nwse-resize]"
-            @pointerdown="onResizeStart"
-            @dblclick="toggleFullSize">
+            x-on:pointerdown="onResizeStart"
+            x-on:dblclick="toggleFullSize">
             <svg class="h-3.5 w-3.5 pointer-events-none rotate-45 relative -top-px -left-px" fill="currentColor" viewBox="0 0 24 24" >
               <path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
             </svg>

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

@@ -9,10 +9,6 @@ module Lookbook
       super(**html_attrs)
     end
 
-    def generate_id(*args)
-      args.map { |args| args.delete_prefix("/").tr("&?=/_-", "-") }.join("-")
-    end
-
     protected
 
     def alpine_component

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

@@ -14,19 +14,17 @@ module Lookbook
     end
 
     def lookup_entities
-      @target = Lookbook.previews.find_example_by_path(params[:path])
+      @target = Engine.previews.find_scenario_by_path(params[:path])
       if @target.present?
         @preview = @target.preview
-        if params[:path] == @preview&.path
-          redirect_to lookbook_inspect_path("#{params[:path]}/#{@preview.default_example.name}", params.permit!)
+        if params[:path] == @preview&.lookup_path
+          redirect_to lookbook_inspect_path("#{params[:path]}/#{@preview.default_scenario.name}", params.permit!)
         end
       else
-        @preview = Lookbook.previews.find_by_path(params[:path])
+        @preview = Engine.previews.find_by_path(params[:path])
         if @preview.present?
-          default_example = @preview.default_example
-          redirect_to lookbook_inspect_path(default_example.path, params.permit!) if default_example
-        else
-          @preview = Lookbook.previews.find_by_path(path_segments.slice(0, path_segments.size - 1).join("/"))
+          default_scenario = @preview.default_scenario
+          redirect_to lookbook_inspect_path(default_scenario.lookup_path, params.permit!) if default_scenario
         end
       end
     end
@@ -44,21 +42,22 @@ 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]
-          display_params = @dynamic_display_options.map do |name, opts|
-            [name, @static_display_options[name]]
-          end.to_h
-          request.query_parameters[:_display] = SearchParamBuilder.call(display_params)
+          display_params = @dynamic_display_options.each_with_object({}) do |(name, opts), hash|
+            hash[name] = @static_display_options[name]
+          end
+          request.query_parameters[:_display] = SearchParamEncoder.call(display_params)
         end
       end
     end
@@ -67,7 +66,8 @@ module Lookbook
       @params = []
 
       if @target
-        @params = @target.tags("param").map do |param_tag|
+        param_tags = @target.tags("param").uniq(&:name)
+        @params = param_tags.map do |param_tag|
           Param.from_tag(
             param_tag,
             value: preview_controller.params[param_tag.name]
@@ -94,36 +94,28 @@ module Lookbook
     def inspector_data
       return @inspector_data if @inspector_data.present?
 
-      rendered_examples = @target.examples.map do |example|
-        output = preview_controller.process(:render_example_to_string, @preview, example.name)
-        RenderedExample.new(example, output, preview_controller.params)
+      scenarios = @target ? @target.scenarios : []
+      rendered_scenarios = scenarios.map do |scenario|
+        output = preview_controller.process(:render_scenario_to_string, @preview, scenario)
+        RenderedScenarioEntity.new(scenario, output, preview_controller.params)
       end
 
+      target = rendered_scenarios.find { |scenario| scenario.id == @target.id } || @target
+
       @inspector_data ||= Lookbook::Store.new({
         context: Store.new({params: @params, path: params[:path]}),
         preview: @preview,
-        examples: rendered_examples,
-        target: @target,
+        scenarios: rendered_scenarios,
+        examples: -> do
+          Lookbook.logger.warn("The `examples` panel variable has been renamed to `scenarios`. The `examples` variable will be removed in the next major release.")
+          rendered_scenarios
+        end,
+        target: target,
         data: Lookbook.data,
         app: Lookbook
       })
     end
 
-    def show_404(layout: nil)
-      locals = if @preview
-        {
-          message: "Example not found",
-          description: "The '#{@preview.label}' preview does not have an example named '#{path_segments.last}'."
-        }
-      else
-        {
-          message: "Not found",
-          description: "Looked for '#{params[:path]}'.<br>The preview may have been renamed or deleted."
-        }
-      end
-      render_in_layout "lookbook/404", layout: layout, **locals
-    end
-
     def path_segments
       params[:path].split("/")
     end

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

@@ -0,0 +1,30 @@
+module Lookbook
+  module WithPanelsConcern
+    extend ActiveSupport::Concern
+
+    included do
+      private
+
+      def main_panel_names
+        Lookbook.config.preview_inspector.main_panels
+      end
+
+      def drawer_panel_names
+        Lookbook.config.preview_inspector.drawer_panels
+      end
+
+      def main_panels
+        Engine.panels.get_panels(*main_panel_names).map do |config|
+          PanelStore.resolve_config(config, inspector_data)
+        end
+      end
+
+      def drawer_panels
+        panels = Engine.panels.get_panels(*drawer_panel_names)
+        panels.select { |config| !config.name.to_s.in?(main_panel_names) }.map do |config|
+          PanelStore.resolve_config(config, inspector_data)
+        end
+      end
+    end
+  end
+end

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

@@ -3,11 +3,30 @@ module Lookbook
     extend ActiveSupport::Concern
 
     def preview_controller
-      return @preview_controller if @preview_controller
-      controller = Lookbook::Engine.preview_controller.new
-      controller.request = request
-      controller.response = response
-      @preview_controller ||= controller
+      @_preview_controller ||= begin
+        # In order to get URL helpers working correctly in the preview,
+        # 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.
+        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?
+
+        controller = Engine.preview_controller.new
+        controller.request = preview_request
+        controller.response = response
+
+        controller
+      end
     end
   end
 end

data/app/controllers/lookbook/application_controller.rb

@@ -4,59 +4,90 @@ module Lookbook
 
     protect_from_forgery with: :exception
 
+    layout "lookbook/application"
+
+    helper Lookbook::ClassNamesHelper if Engine.runtime_context.rails_older_than?("6.1.0")
     helper Lookbook::ApplicationHelper
-    helper Lookbook::OutputHelper
-    helper Lookbook::ComponentHelper
+    helper Lookbook::UiElementsHelper
 
-    before_action :generate_theme_overrides
+    before_action :assign_theme_overrides
     before_action :assign_instance_vars
 
+    rescue_from ActionController::RoutingError do |err|
+      raise Lookbook::RoutingError, err.message, original: err
+    end
+    rescue_from StandardError, with: :handle_error
+
     def self.controller_path
       "lookbook"
     end
 
     def index
-      landing = Lookbook.pages.find(&:landing?) || Lookbook.pages.first
-
+      landing = Engine.pages.find(&:landing?) || Engine.pages.first
       if landing.present?
-        redirect_to lookbook_page_path(landing.path)
+        redirect_to lookbook_page_path(landing.lookup_path)
       else
         render "lookbook/index"
       end
     end
 
+    def not_found
+      raise_not_found
+    end
+
     protected
 
-    def generate_theme_overrides
-      @theme_overrides ||= Lookbook.theme.to_css
+    def assign_theme_overrides
+      @theme_overrides ||= Engine.theme.to_css
     end
 
     def assign_instance_vars
-      @previews = Lookbook.previews
-      @pages = Lookbook.pages
+      @previews = Engine.previews
+      @pages = Engine.pages
+      @theme = Engine.theme
       @config = Lookbook.config
       @engine = Lookbook.engine
+      @embed = !!params[:lookbook_embed]
+      @sidebar_panels = sidebar_panels
+      @blank_slate = @sidebar_panels.none?
+    end
+
+    def raise_not_found(message = "Page not found")
+      raise Lookbook::RoutingError, message
     end
 
-    def feature_enabled?(feature)
-      Lookbook::Features.enabled?(feature)
+    def handle_error(err)
+      raise err if Lookbook.config.preview_disable_error_handling
+
+      @error = err.is_a?(Lookbook::Error) ? err : Lookbook::Error.new(original: err)
+      @status_code = get_status_code(err)
+
+      view = (@status_code == :not_found) ? "not_found" : "default"
+      layout = current_layout || "lookbook/skeleton"
+
+      render "lookbook/errors/#{view}", layout: layout, status: @status_code
+    end
+
+    def current_layout
+      self.class.send(:_layout)
     end
 
-    def render_in_layout(path, layout: nil, **locals)
-      @error = locals[:error]
-      render path, layout: layout.presence || (params[:lookbook_embed] ? "lookbook/basic" : "lookbook/application"), locals: locals
+    private
+
+    def sidebar_panels
+      panels_config = Lookbook.config.preview_inspector.sidebar_panels.map(&:to_sym)
+      panels_config.select do |panel|
+        (panel == :pages && Engine.pages.any?) || (panel == :previews && Engine.previews.any?)
+      end
     end
 
-    def prettify_error(exception)
-      error_params = {}
-      if exception.is_a?(ViewComponent::PreviewTemplateError)
-        error_params = {
-          file_path: @preview&.file_path,
-          line_number: 0,
-          source_code: @target&.source
-        }
+    def get_status_code(err)
+      if err.respond_to?(:status)
+        err.status
+      else
+        status_map = ActionDispatch::ExceptionWrapper.rescue_responses
+        status_map.fetch(err.class.name, :internal_server_error)
       end
-      Lookbook::Error.new(exception, **error_params)
     end
   end
 end

data/app/controllers/lookbook/embeds_controller.rb

@@ -0,0 +1,147 @@
+module Lookbook
+  class EmbedsController < Lookbook::ApplicationController
+    include ActionView::Helpers::SanitizeHelper
+    include TargetableConcern
+    include WithPreviewControllerConcern
+
+    layout "lookbook/embed"
+
+    before_action :permit_embeds
+    before_action :set_options, only: [:show]
+    before_action :set_scenario_choices, only: [:show]
+    before_action :set_panels, only: [:show]
+    before_action :set_actions, only: [:show]
+
+    def self.controller_path
+      "lookbook/embeds"
+    end
+
+    def lookup
+      props = Store.new(params[:props] ? JsonParser.call(sanitize(params[:props])) : {})
+      if props.preview.present?
+        preview = Engine.previews.find_by_preview_class(props.preview)
+        if preview.present?
+          props.scenarios ||= props.scenario || ""
+          scenario = preview.scenario(Array(props.scenarios).first)
+
+          boolean_options = ["display_option_controls"]
+          array_options = ["panels", "actions", "scenarios"]
+          param_prefix = "param_"
+
+          options = {}
+          embed_params = {}
+
+          props.each do |key, value|
+            key = key.to_s.strip.tr("-", "_")
+            value.strip!
+
+            if array_options.include?(key)
+              options[key] = if value == "false"
+                []
+              elsif value == "true"
+                ["*"]
+              else
+                value.split(",").map(&:strip)
+              end
+            elsif boolean_options.include?(key)
+              options[key] = (value == "false") ? false : !!value
+            elsif key.start_with?(param_prefix)
+              embed_params[key.gsub(param_prefix, "")] = value
+            end
+          end
+
+          embed_params[:_options] = SearchParamEncoder.call(options)
+          embed_params.symbolize_keys!
+
+          return redirect_to lookbook_embed_url(scenario ? scenario.lookup_path : preview.lookup_path, embed_params)
+        end
+      end
+
+      raise_not_found("Preview not found")
+    end
+
+    def show
+      @embed = true
+      unless @target
+        @target = @scenario_choices.first || @preview&.default_scenario
+        if @target
+          redirect_to lookbook_embed_path(@target.lookup_path, req_params)
+        else
+          raise_not_found("Preview not found")
+        end
+      end
+    end
+
+    protected
+
+    def embed_options
+      Lookbook.config.preview_embeds
+    end
+
+    def permit_embeds
+      headers["X-Frame-Options"] = embed_options.policy
+    end
+
+    def lookup_entities
+      @target = Engine.previews.find_scenario_by_path(params[:path])
+      @preview = @target.present? ? @target.preview : Engine.previews.find_by_path(params[:path])
+    end
+
+    def set_params
+      @params = []
+      @passed_params = req_params.select { |key, value| !key.to_s.start_with?("_") }
+
+      if @target
+        @params = @target.tags("param").map do |param_tag|
+          Param.from_tag(
+            param_tag,
+            value: @passed_params[param_tag.name.to_sym]
+          )
+        end
+
+        # cast known param values to correct type
+        @params.each do |param|
+          if @passed_params.key?(param.name.to_sym)
+            @passed_params[param.name.to_sym] = param.cast_value
+          end
+        end
+      end
+    end
+
+    def set_options
+      return @options if @options
+
+      options = SearchParamParser.call(req_params[:_options])
+      default_options = embed_options.to_h.except(:policy)
+      @options ||= default_options.merge(options || {})
+    end
+
+    def set_scenario_choices
+      return @scenario_choices ||= [] unless @preview
+
+      named_choices = @options.fetch(:scenarios, [])
+      @scenario_choices = ListResolver.call(named_choices, @preview.scenarios.map(&:name)) do |name|
+        @preview.scenario(name)
+      end
+    end
+
+    def set_actions
+      @actions ||= ListResolver.call(@options.fetch(:actions, []), Embed::Component::ACTIONS)
+    end
+
+    def set_panels
+      return @panels if @panels
+
+      panels = @options.fetch(:panels, [])
+      all_panels = Engine.panels.names.map(&:to_s) - ["preview"]
+      @panels = ListResolver.call(panels, all_panels) do |name|
+        config = Engine.panels.get_panel(name.to_sym)
+        PanelStore.resolve_config(config, inspector_data) if config
+      end
+    end
+
+    def req_params
+      request.query_parameters
+    end
+  end
+end