lookbook 2.3.1 → 3.0.0.alpha.2

data/app/components/lookbook/ui/previews/preview_embed/preview_embed.html.erb

@@ -0,0 +1,51 @@
+<%= render component_tag(x: {data: "previewEmbed"}) do %>
+  <%=
+    lb_pane(dom_id(target, "embed-preview"),
+      class: "embed-preview",
+      x: {
+        "@viewport:resize-progress": "resizeIframe",
+        "@viewport:resize-end": "resizeIframe"
+      }
+    ) do |pane|
+      pane.with_toolbar do |toolbar|
+        toolbar.with_label { target.label }
+        if display_options.any? && !target.mailer_preview?
+          toolbar.with_button_group do |group|
+            group.with_button(icon: :settings_2, tooltip: "Display options") do |button|
+              button.with_dropdown do
+                render Lookbook::UI::DisplayOptionsDropdown.new(
+                  options: display_options,
+                  values: display_options_values
+                )
+              end
+            end
+          end
+        end
+      end
+
+      lb_viewport(
+        target.preview_path(preview_params),
+        id: "embed-viewport-#{target.name}",
+        resize_y: false
+      )
+    end
+  %>
+
+  <%=
+    lb_pane(dom_id(target, "embed-drawer"), class: "embed-drawer") do |pane|
+      pane.with_toolbar do |toolbar|
+        toolbar.with_tab_group do |group|
+          panels.each do |panel|
+            group.with_tab(panel.name, label: panel.label, disabled: panel.disabled)
+          end
+        end
+      end
+
+      panels.each do |panel|
+        pane.with_tab_panel(panel.name, key: "embed-panel-#{target.name}-#{panel.name}", label: panel.label) do
+          render panel.partial, preview: preview, target: target, panel: panel, preview_html: preview_html, **panel.locals
+        end
+      end
+    end
+  %>
+<% end %>

data/app/components/lookbook/ui/previews/preview_embed/preview_embed.js

@@ -0,0 +1,43 @@
+import "iframe-resizer/js/iframeResizer";
+import AlpineComponent from "@js/alpine/component";
+import { getData } from "@js/alpine/utils";
+import { observeSize } from "@js/helpers";
+
+export default AlpineComponent("previewEmbed", () => {
+  return {
+    init() {
+      const onIframeResized = this.onIframeResized.bind(this);
+
+      window.iFrameResize(
+        { onIframeResized, checkOrigin: false },
+        this.viewport.iframe
+      );
+
+      observeSize(this.$el, this.onResize);
+    },
+
+    onResize({ height }) {
+      window.parent.postMessage(
+        JSON.stringify({
+          action: "embed:resize",
+          height,
+        }),
+        "*"
+      );
+    },
+
+    onIframeResized({ height }) {
+      if (height) {
+        this.viewport.height = height;
+      }
+    },
+
+    resizeIframe() {
+      this.viewport.iframe.iFrameResizer.resize();
+    },
+
+    get viewport() {
+      return getData(this.$root.querySelector("[data-component='viewport']"));
+    },
+  };
+});

data/app/components/lookbook/ui/previews/preview_embed/preview_embed.rb

@@ -0,0 +1,25 @@
+module Lookbook
+  module UI
+    class PreviewEmbed < BaseComponent
+      attr_reader :preview, :target, :targets, :panels, :preview_html, :display_options, :display_options_values
+
+      def initialize(preview:, target:, targets: [], panels: [], preview_params: {}, preview_html: nil, display_options: {}, display_options_values: {}, **kwargs)
+        @preview = preview
+        @target = target
+        @targets = targets
+        @panels = panels
+        @preview_params = preview_params
+        @preview_html = preview_html
+        @display_options = display_options
+        @display_options_values = display_options_values
+      end
+
+      def preview_params
+        @preview_params.merge({
+          _lookbook_embed: true,
+          checksum: helpers.checksum(preview_html)
+        })
+      end
+    end
+  end
+end

data/app/components/lookbook/ui/previews/preview_inspector/preview_inspector.css

@@ -0,0 +1,20 @@
+[data-component="preview-inspector"] {
+  height: 100%;
+  width: 100%;
+
+  .inspector-layout {
+    height: 100%;
+    width: 100%;
+  }
+
+  &.drawer-closed {
+    #inspector-panes {
+      grid-template-rows: 1fr !important;
+
+      > .pane-group-gutter,
+      > .pane-group-pane:not(:first-child) {
+        display: none;
+      }
+    }
+  }
+}

data/app/components/lookbook/ui/previews/preview_inspector/preview_inspector.html.erb

@@ -0,0 +1,69 @@
+<%=
+  render component_tag(x: {data: "previewInspector", ":class": "{'drawer-closed': drawerClosed}"}) do
+    lb_pane_group("inspector-panes",
+    opts: {
+      orientation: :horizontal,
+      sizes: ["auto", "350px"]
+    }) do |layout|
+      layout.with_pane("preview-pane") do |pane|
+        pane.with_toolbar do |toolbar|
+          toolbar.with_breadcrumb(config.previews_nav_label, target.ancestors, target)
+          if display_options.any? && !target.mailer_preview?
+            toolbar.with_button_group do |group|
+              group.with_button(icon: :settings_2, tooltip: "Display options") do |button|
+                button.with_dropdown do
+                  render Lookbook::UI::DisplayOptionsDropdown.new(
+                    options: display_options,
+                    values: display_options_values
+                  )
+                end
+              end
+            end
+          end
+          toolbar.with_button_group do |group|
+            group.with_button(icon: :panel_bottom_open, tooltip: "Open drawer", click: "openDrawer", show: "drawerClosed", x: {":aria-hidden": "!drawerClosed"})
+            group.with_button(icon: :panel_bottom_close, tooltip: "Close drawer", click: "closeDrawer", show: "!drawerClosed", x: {":aria-hidden": "drawerClosed"})
+          end
+        end
+
+        lb_pane do |pane|
+          pane.with_toolbar do |toolbar|  
+            toolbar.with_tab_group do |group|
+              preview_panels.each do |panel|
+                group.with_tab(panel.name, label: panel.label, disabled: panel.disabled)
+              end
+            end
+            toolbar.with_button_group do |group|
+              group.with_button(icon: :external_link, tooltip: "Open preview in new window", href: preview_url, target: "_blank")
+            end
+          end
+
+          preview_panels.each do |panel|
+            pane.with_tab_panel(panel.name, key: "inspector-panel-#{@target.name}-#{panel.name}", label: panel.label) do
+              render panel.partial, preview: preview, target: target, panel: panel, preview_html: preview_html, **panel.locals
+            end
+          end
+        end
+      end
+
+      layout.with_pane("drawer-pane") do |pane|
+        pane.with_toolbar do |toolbar|
+          toolbar.with_tab_group do |group|
+            drawer_panels.each do |panel|
+              group.with_tab(panel.name, label: panel.label, disabled: panel.disabled)
+            end
+          end
+          toolbar.with_button_group do |group|
+            group.with_button(icon: :x, tooltip: "Close drawer", click: "closeDrawer")
+          end
+        end
+      
+        drawer_panels.each do |panel|
+          pane.with_tab_panel(panel.name, key: "inspector-panel-#{@target.name}-#{panel.name}", label: panel.label) do
+            render panel.partial, preview: preview, target: target, panel: panel, preview_html: preview_html, **panel.locals
+          end
+        end
+      end
+    end
+  end
+%>

data/app/components/lookbook/ui/previews/preview_inspector/preview_inspector.js

@@ -0,0 +1,15 @@
+import AlpineComponent from "@js/alpine/component";
+
+export default AlpineComponent("previewInspector", () => {
+  return {
+    drawerClosed: false,
+
+    openDrawer() {
+      this.drawerClosed = false;
+    },
+
+    closeDrawer() {
+      this.drawerClosed = true;
+    },
+  };
+});

data/app/components/lookbook/ui/previews/preview_inspector/preview_inspector.rb

@@ -0,0 +1,18 @@
+module Lookbook
+  module UI
+    class PreviewInspector < BaseComponent
+      attr_reader :preview, :target, :preview_url, :preview_panels, :preview_html, :drawer_panels, :display_options, :display_options_values
+
+      def initialize(preview:, target:, preview_url:, preview_panels: [], preview_html: nil, drawer_panels: [], display_options: {}, display_options_values: {}, **kwargs)
+        @preview = preview
+        @target = target
+        @preview_url = preview_url
+        @preview_panels = preview_panels
+        @preview_html = preview_html
+        @drawer_panels = drawer_panels
+        @display_options = display_options
+        @display_options_values = display_options_values
+      end
+    end
+  end
+end

data/app/components/lookbook/ui/tag.rb

@@ -0,0 +1,63 @@
+module Lookbook
+  module UI
+    class Tag < Lookbook::Component::Base
+      include ActionView::Helpers::TagHelper
+
+      SELF_CLOSING_TAGS = %i[area base br col embed hr img input link meta param source track wbr].freeze
+
+      attr_reader :tag_name, :root, :strip
+
+      def initialize(tag_name = :div, strip: false, root: false, **tag_attrs)
+        @tag_name = tag_name
+        @tag_attrs = tag_attrs
+        @strip = strip
+        @root = root
+      end
+
+      def content
+        strip ? super.strip_heredoc.strip : super
+      end
+
+      def call
+        if SELF_CLOSING_TAGS.include?(@tag_name)
+          tag(tag_name, tag_attrs)
+        else
+          content_tag(tag_name, content, tag_attrs)
+        end
+      end
+
+      def tag_attrs
+        attrs = @tag_attrs.except(:x)
+
+        alpine_attrs = @tag_attrs.fetch(:x, {})
+        if alpine_attrs.any?
+          attrs.merge!(x_attrs(alpine_attrs, root: root))
+        end
+
+        attrs
+      end
+
+      private
+
+      def x_attrs(attrs, root: false)
+        attrs.symbolize_keys!
+
+        if root && !attrs.key?(:data)
+          attrs[:data] = "" # Add empty x-data attribute if none has been specified
+        end
+
+        if attrs[:options] == true
+          attrs[:options] = "options"
+        end
+
+        attrs.transform_values! { (_1 == true) ? "" : _1 } # convert boolean x-attributes
+
+        # prefix attributes where needed
+        attrs.transform_keys do |key|
+          key = key.to_s
+          key.first.in?(["@", ":"]) ? key : "x-#{key}"
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,56 @@
+module Lookbook
+  module PreviewActions
+    extend ActiveSupport::Concern
+
+    private
+
+    def assign_preview
+      @preview = Previews.all.find { _1.url_param == params[:preview] }
+      raise ActionController::RoutingError, "Could not find preview '#{params[:preview]}'" unless @preview
+    end
+
+    def assign_target
+      @target = @preview.inspector_targets.find { _1.url_param == params[:target] }
+      raise ActionController::RoutingError, "Could not find target '#{params[:target]}' for preview '#{params[:preview]}'" unless @target
+    end
+
+    def assign_scenario
+      @scenario = @preview.scenarios.find { _1.url_param == params[:scenario] }
+      raise ActionController::RoutingError, "Could not find scenario '#{params[:scenario]}' for preview '#{params[:preview]}'" unless @scenario
+    end
+
+    def assign_display_options
+      @display_options = DataObject.new(
+        dynamic_display_options_defaults
+          .merge(cookie_display_options)
+          .merge(@target.display_options)
+          .merge(url_display_options)
+      )
+    end
+
+    def persist_display_options
+      options = @display_options.select do |key|
+        dynamic_display_option?(key) && !@target.display_options.key?(key)
+      end
+      cookies["lookbook-display-options"] = SearchParamEncoder.call(cookie_display_options.merge(options))
+    end
+
+    def cookie_display_options
+      options_str = cookies.fetch("lookbook-display-options", "{}")
+      SearchParamParser.call(options_str).select { dynamic_display_option?(_1) }
+    end
+
+    def url_display_options
+      SearchParamParser.call(params[:_display].presence || "{}")
+        .select { dynamic_display_option?(_1) }
+    end
+
+    def dynamic_display_options_defaults
+      Inspector.dynamic_display_options.transform_values(&:default_value)
+    end
+
+    def dynamic_display_option?(name)
+      Inspector.dynamic_display_options.key?(name)
+    end
+  end
+end

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

@@ -0,0 +1,92 @@
+module Lookbook
+  module PreviewControllerActions
+    extend ActiveSupport::Concern
+    include Lookbook::PreviewActions
+
+    included do
+      prepend_view_path Engine.root.join("app/views")
+
+      before_action :assign_preview, only: :lookbook_render_scenario
+      before_action :assign_scenario, only: :lookbook_render_scenario
+      around_action :set_locale, only: :lookbook_render_scenario
+
+      content_security_policy(false) if respond_to?(:content_security_policy)
+
+      helper :all if include_all_helpers
+      helper Lookbook::AssetHelper
+      helper Lookbook::PreviewHelper
+    end
+
+    def lookbook_render_scenario(scenario = @scenario)
+      prepend_application_view_paths
+      prepend_preview_scenarios_view_path
+
+      @render_args = scenario.render_args(request_params: request.query_parameters)
+
+      template = @render_args[:template]
+      locals = @render_args[:locals]
+
+      opts = {}
+      opts[:assigns] = @render_args[:assigns] || {}
+      opts[:locals] = locals if locals.present?
+      opts[:layout] = nil
+
+      with_action_view_settings do
+        html = render_to_string(template, **opts)
+        render html: html
+      end
+    end
+
+    def lookbook_render_template(template, assigns, opts = {})
+      prepend_application_view_paths
+      prepend_preview_scenarios_view_path
+
+      with_action_view_settings do
+        html = render_to_string(template, assigns: assigns, **determine_layout(opts[:layout]))
+        html += opts[:append_html]
+        render html: html
+      end
+    end
+
+    private
+
+    def set_locale(&block)
+      I18n.with_locale(params[:locale] || I18n.default_locale, &block)
+    end
+
+    def determine_layout(layout_override = nil)
+      return {} unless defined?(Rails.root)
+
+      layout_declaration = {}
+
+      if !layout_override.nil?
+        layout_declaration[:layout] = layout_override
+      elsif default_preview_layout.present?
+        layout_declaration[:layout] = default_preview_layout
+      end
+
+      prepend_application_view_paths if layout_declaration[:layout].present?
+
+      layout_declaration
+    end
+
+    def default_preview_layout
+      Lookbook.config.preview_layout
+    end
+
+    def prepend_application_view_paths
+      prepend_view_path Rails.root.join("app/views") if defined?(Rails.root)
+    end
+
+    def prepend_preview_scenarios_view_path
+      prepend_view_path(Previews.preview_paths)
+    end
+
+    def with_action_view_settings(&block)
+      ActionViewConfigHandler.call(
+        disable_annotations: Lookbook.config.preview_disable_action_view_annotations,
+        &block
+      )
+    end
+  end
+end

data/app/controllers/lookbook/application_controller.rb

@@ -1,93 +1,29 @@
 module Lookbook
   class ApplicationController < ActionController::Base
-    content_security_policy(false) if respond_to?(:content_security_policy)
+    helper AppHelper
+    helper AssetHelper
 
-    protect_from_forgery with: :exception
+    before_action :assign_template_vars
 
-    layout "lookbook/application"
+    rescue_from ActionController::RoutingError, with: :not_found
 
-    helper Lookbook::ClassNamesHelper if Engine.runtime_context.rails_older_than?("6.1.0")
-    helper Lookbook::ApplicationHelper
-    helper Lookbook::UiElementsHelper
-
-    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 = Engine.pages.find(&:landing?) || Engine.pages.first
-      if landing.present?
-        redirect_to lookbook_page_path(landing.lookup_path)
-      else
-        render "lookbook/index"
-      end
-    end
-
-    def not_found
-      raise_not_found
+    def not_found(error = nil)
+      @error = error
+      render :not_found, status: :not_found
     end
 
     protected
 
-    def assign_theme_overrides
-      @theme_overrides ||= Engine.theme.to_css
-    end
-
-    def assign_instance_vars
-      @previews = Engine.previews
-      @pages = Engine.pages
-      @theme = Engine.theme
+    def assign_template_vars
       @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
+      @project = Project
+      @inspector = Inspector
+      @pages = Pages
+      @previews = Previews
+      @notifications = Engine.notifications
+      @events_endpoint = events_path if Engine.watch_files?
     end
 
-    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
-
-    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 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
-    end
+    def json_request? = request.format.json?
   end
 end