lookbook 1.5.5 → 2.0.0.beta.0

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, 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.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,22 +42,21 @@ 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.is_a?(Array) ? value[1] : value
+              cookies["lookbook-display-#{name}"] = value
             end
           end
         end
 
         @dynamic_display_options.each do |name, opts|
           choices = opts.is_a?(Hash) ? opts[:choices].to_a : opts
-          value = choices.first.is_a?(Array) ? choices.first[1] : choices.first
-          @static_display_options[name] ||= cookies.fetch("lookbook-display-#{name}", value)
+          @static_display_options[name] ||= cookies.fetch("lookbook-display-#{name}", choices.first)
         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
@@ -95,16 +92,23 @@ 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.name)
+        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
       })
@@ -114,7 +118,7 @@ module Lookbook
       locals = if @preview
         {
           message: "Example not found",
-          description: "The '#{@preview.label}' preview does not have an example named '#{path_segments.last}'."
+          description: "The '#{@preview.label}' preview does not have an scenario named '#{path_segments.last}'."
         }
       else
         {
@@ -122,7 +126,7 @@ module Lookbook
           description: "Looked for '#{params[:path]}'.<br>The preview may have been renamed or deleted."
         }
       end
-      render_in_layout "lookbook/404", layout: layout, **locals
+      render_in_layout "lookbook/404", layout: layout, **locals, status: 404
     end
 
     def path_segments

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,12 @@ module Lookbook
     extend ActiveSupport::Concern
 
     def preview_controller
-      return @preview_controller if @preview_controller
-      controller = Lookbook::Engine.preview_controller.new
+      return @_preview_controller if @_preview_controller
+
+      controller = Engine.preview_controller.new
       controller.request = request
       controller.response = response
-      @preview_controller ||= controller
+      @_preview_controller ||= controller
     end
   end
 end

data/app/controllers/lookbook/application_controller.rb

@@ -4,9 +4,9 @@ module Lookbook
 
     protect_from_forgery with: :exception
 
+    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_instance_vars
@@ -16,10 +16,9 @@ module 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
@@ -28,18 +27,16 @@ module Lookbook
     protected
 
     def generate_theme_overrides
-      @theme_overrides ||= Lookbook.theme.to_css
+      @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
-    end
-
-    def feature_enabled?(feature)
-      Lookbook::Features.enabled?(feature)
+      @embed = !!params[:lookbook_embed]
     end
 
     def render_in_layout(path, layout: nil, **locals)

data/app/controllers/lookbook/embeds_controller.rb

@@ -0,0 +1,148 @@
+module Lookbook
+  class EmbedsController < 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.path : preview.path, embed_params)
+        end
+      end
+
+      show_404 layout: "lookbook/skeleton"
+    end
+
+    def show
+      @embed = true
+
+      unless @target
+        @target = @scenario_choices.first || @preview.default_scenario
+        if @target
+          redirect_to lookbook_embed_path(@target.path, req_params)
+        else
+          show_404(layout: "lookbook/skeleton") unless @target
+        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

data/app/controllers/lookbook/inspector_controller.rb

@@ -1,10 +1,10 @@
 module Lookbook
   class InspectorController < ApplicationController
     include TargetableConcern
+    include WithPanelsConcern
     include WithPreviewControllerConcern
 
-    layout "lookbook/inspector"
-    helper Lookbook::PreviewHelper
+    layout "lookbook/application"
 
     def self.controller_path
       "lookbook/inspector"
@@ -16,30 +16,11 @@ module Lookbook
           @main_panels = main_panels
           @drawer_panels = drawer_panels
         rescue => exception
-          render_in_layout "lookbook/error", layout: "lookbook/inspector", error: prettify_error(exception)
+          render_in_layout "lookbook/error", layout: "lookbook/application", error: prettify_error(exception)
         end
       else
         show_404
       end
     end
-
-    def show_legacy
-      Lookbook.logger.warn("Legacy URL path detected. These paths are deprecated and will be removed in a future version")
-      redirect_to lookbook_inspect_path params[:path]
-    end
-
-    private
-
-    def main_panels
-      Engine.panels.in_group(:main).map do |config|
-        PanelStore.resolve_config(config, inspector_data)
-      end
-    end
-
-    def drawer_panels
-      Engine.panels.in_group(:drawer).map do |config|
-        PanelStore.resolve_config(config, inspector_data)
-      end
-    end
   end
 end

data/app/controllers/lookbook/page_controller.rb

@@ -1,8 +1,9 @@
+require "rails/application_controller"
+
 module Lookbook
-  class PageController < ActionController::Base
-    helper Lookbook::ComponentHelper
-    helper Lookbook::PageHelper
-    helper Lookbook::OutputHelper
+  class PageController < Rails::ApplicationController
+    helper UiElementsHelper
+    helper PageHelper
 
     Lookbook.config.page_paths.each do |path|
       prepend_view_path Rails.root.join(path)
@@ -10,7 +11,7 @@ module Lookbook
 
     def render_page(page, locals = {})
       @page = page
-      @pages = Lookbook.pages
+      @pages = Engine.pages
       @next_page = @pages.next(@page)
       @previous_page = @pages.previous(@page)
 
@@ -23,7 +24,7 @@ module Lookbook
         }
       end
 
-      @page.markdown? ? MarkdownRenderer.call(content, Lookbook.config.markdown_options) : content
+      @page.markdown? ? MarkdownRenderer.call(content) : content
     end
   end
 end

data/app/controllers/lookbook/pages_controller.rb

@@ -1,15 +1,14 @@
 module Lookbook
   class PagesController < ApplicationController
-    layout "lookbook/page"
+    layout "lookbook/application"
     helper_method :page_controller
-    helper Lookbook::PageHelper
 
     def self.controller_path
       "lookbook/pages"
     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)
       else
@@ -27,7 +26,7 @@ module Lookbook
           @title = @page.title
         rescue => exception
           render_in_layout "lookbook/error",
-            layout: "lookbook/page",
+            layout: "lookbook/application",
             error: Lookbook::Error.new(exception, file_path: @page.file_path, source_code: @page.content)
         end
       else

data/app/controllers/lookbook/preview_controller.rb

@@ -0,0 +1,17 @@
+require "rails/application_controller"
+
+module Lookbook
+  class PreviewController < Rails::ApplicationController
+    content_security_policy(false) if respond_to?(:content_security_policy)
+
+    private
+
+    [:determine_layout, :prepend_application_view_paths, :prepend_preview_examples_view_path].each do |method_name|
+      define_method method_name, ViewComponentsController.instance_method(method_name)
+    end
+
+    def default_preview_layout
+      Lookbook.config.preview_layout
+    end
+  end
+end

data/app/controllers/lookbook/previews_controller.rb

@@ -3,10 +3,7 @@ module Lookbook
     include TargetableConcern
     include WithPreviewControllerConcern
 
-    before_action { response.headers.delete("X-Frame-Options") }
-
-    layout "lookbook/inspector"
-    helper Lookbook::PreviewHelper
+    layout false
 
     def self.controller_path
       "lookbook/previews"
@@ -19,16 +16,11 @@ module Lookbook
             json: Lookbook.previews.map do |preview|
               {
                 name: preview.name,
-                examples: preview.examples.map { |example|
-                  case example
-                  when Lookbook::PreviewExample
-                    example_json(example)
-                  when Lookbook::PreviewGroup
-                    {
-                      name: example.name,
-                      examples: example.examples.map { |ex| example_json(ex) }
-                    }
-                  end
+                scenarios: preview.scenarios.map { |scenario|
+                  {
+                    inspect_path: scenario.url_path,
+                    name: scenario.name
+                  }
                 }
               }
             end
@@ -42,29 +34,17 @@ module Lookbook
         begin
           opts = {layout: @preview.layout}
           if params[:lookbook_embed] == "true"
-            opts[:append_html] = "<script src=\"/lookbook-assets/js/embed.js?v=#{Lookbook.version}\"></script>".html_safe
+            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/preview", inspector_data, **opts)
-          render html: preview_html
+          @preview_html = preview_controller.process(:render_in_layout_to_string, "lookbook/previews/group", inspector_data, **opts)
         rescue => exception
           render_in_layout "lookbook/error",
-            layout: "lookbook/standalone",
+            layout: "lookbook/skeleton",
             error: prettify_error(exception)
         end
       else
-        show_404 layout: "lookbook/standalone"
+        show_404
       end
     end
-
-    private
-
-    def example_json(example)
-      {
-        inspect_path: example.url_path,
-        name: example.name,
-        preview_path: example.preview_path,
-        lookup_path: example.lookup_path
-      }
-    end
   end
 end

data/app/helpers/lookbook/application_helper.rb

@@ -1,33 +1,17 @@
 module Lookbook
   module ApplicationHelper
-    def config
-      Lookbook::Engine.config.lookbook
-    end
-
-    def theme
-      Lookbook.theme
-    end
-
-    def asset_path(file, version: true)
+    def lookbook_asset_path(file, version: true)
       path = "/lookbook-assets/#{file}".gsub("//", "/")
       version ? "#{path}?v=#{Lookbook::VERSION}" : path
     end
 
-    def feature_enabled?(name)
-      Lookbook::Features.enabled?(name)
-    end
-
-    def landing_path
-      landing = Lookbook.pages.find(&:landing?) || Lookbook.pages.first
+    def lookbook_landing_path
+      landing = Engine.pages.find(&:landing?) || Engine.pages.first
       if landing.present?
         lookbook_page_path landing.lookup_path
       else
         lookbook_home_path
       end
     end
-
-    def generate_id(*args)
-      args.map { |args| args.delete_prefix("/").tr("&?=/_-", "-") }.join("-")
-    end
   end
 end