lookbook 1.2.1 → 1.4.5

data/app/components/lookbook/nav/item/component.rb

@@ -1,87 +1,44 @@
 module Lookbook
   class Nav::Item::Component < Lookbook::BaseComponent
-    ICONS = {
-      page: :file,
-      page_collection: :folder,
-      preview_collection: :folder,
-      preview: :layers,
-      example: :eye,
-      group: :eye,
-      collection: :folder
-    }.freeze
+    delegate :label, :depth, to: :node
 
-    delegate :label, to: :@item
+    attr_reader :node, :nav_id
 
-    def initialize(
-      item,
-      nav_id:,
-      depth: 1,
-      collapse_singles: false,
-      **html_attrs
-    )
+    def initialize(node, nav_id:, **html_attrs)
+      @node = node
       @nav_id = nav_id
-      @item = item
-      @depth = depth
-      @collapse_singles = collapse_singles
       super(**html_attrs)
     end
 
     def id
-      "#{@nav_id}-#{@item.id}"
+      "#{nav_id}-#{node.id}"
     end
 
     def left_pad
-      ((@depth - 1) * 12) + 24
-    end
-
-    def href
-      if collapsed?
-        item.url_path
-      elsif !collection?
-        item.url_path
-      end
+      depth * 12
     end
 
     def children
-      @children ||= if collection? && !collapsed?
-        item.non_empty_items.map do |item|
-          lookbook_render Lookbook::Nav::Item::Component.new item,
-            nav_id: @nav_id,
-            depth: (@depth + 1),
-            collapse_singles: @collapse_singles
-        end
-      else
-        []
-      end
-    end
-
-    def item
-      collapsed? ? @item.first : @item
+      @children ||= node.sort.map { |node| render_item(node) }
     end
 
     def nav_icon
-      ICONS[@item.type] || :file
-    end
-
-    def collection?
-      @item.is_a? Lookbook::Collection
+      :folder
     end
 
     def children?
-      children.any? if collection? && !collapsed?
+      children.any?
     end
 
-    def collapsed?
-      @collapse_singles == true && collection? && @item.collapsible? && @item.one?
+    def render_item(node)
+      item_class = (node.type == :directory) ? Nav::Directory::Component : Nav::Entity::Component
+      lookbook_render item_class.new node, nav_id: nav_id
     end
 
     protected
 
     def alpine_data
-      alpine_encode({
-        id: @item.id,
-        matchers: item.is_a?(Lookbook::Collection) ? nil : item.matchers
-      })
+      alpine_encode({id: node.id, matchers: []})
     end
 
     def alpine_component

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

@@ -1,5 +1,5 @@
-<%= render_component_tag class: "p-4 overflow-hidden" do %>
-  <div class="bg-white border border-lookbook-divider rounded-md overflow-x-auto">
+<%= render_component_tag class: "overflow-hidden" do %>
+  <div class="bg-lookbook-params-editor-bg border border-lookbook-divider rounded-md overflow-x-auto">
     <table class="border-collapse w-full" :class="narrow && 'linear'">
       <thead>
         <tr>

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

@@ -1,20 +1,13 @@
 module Lookbook
   module Params
     class Editor::Component < Lookbook::BaseComponent
-      renders_many :fields, ->(input:, description: nil, **attrs) do
+      renders_many :fields, ->(**attrs) do
         @field_count += 1
-        @descriptions = true if description.present?
-        input_config = @inputs[input.tr("-", "_").to_sym]
-        Lookbook::Params::Field::Component.new(input: input,
-          description: description,
-          index: @field_count,
-          config: input_config, **attrs)
+        Lookbook::Params::Field::Component.new(**attrs, index: @field_count)
       end
 
-      def initialize(inputs: nil, **html_attrs)
-        @inputs = inputs.to_h
+      def initialize(**html_attrs)
         @field_count = -1
-        @descriptions = false
         @@input_styles = {}
         super(**html_attrs)
       end

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

@@ -3,7 +3,7 @@
     table:not(.linear) {
       thead {
         tr {
-          @apply border-b border-gray-300;
+          @apply border-b border-lookbook-divider;
         }
 
         th {
@@ -21,7 +21,7 @@
 
       tbody {
         tr + tr td {
-          @apply border-t border-gray-200;
+          @apply border-t border-lookbook-divider;
         }
 
         td {
@@ -53,7 +53,7 @@
       }
 
       tr:not(:last-child) {
-        @apply border-b border-gray-200;
+        @apply border-b border-lookbook-divider;
       }
 
       tr {

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

@@ -1,27 +1,27 @@
 <%= render_component_tag :tr, "@keydown.stop": true do %>  
   <td class="param-label">
-    <label for="param-<%= @name %>">
-      <span class="mr-0.5"><%== @label %></span>
-      <% if hint? %>
+    <label for="param-<%= param.name %>">
+      <span class="mr-0.5"><%== param.label %></span>
+      <% if param.hint.present? %>
         <span x-data="tooltipComponent" class="inline-block cursor-help relative top-[2px]">
           <%= icon :help_circle, size: 3.5, class: "opacity-40 hover:opacity-100 transition" %>
           <div class="hidden" x-ref="tooltip">
-            <%= @hint %>
+            <%= param.hint %>
           </div>
         </span>
       <% end %>
     </label>
   </td>
-  <td class="param-description <%= "param-description-empty" unless description? %>">
-    <% if description? %>
-      <p class="opacity-70"><%= @description %></p>
+  <td class="param-description <%= "param-description-empty" unless param.description %>">
+    <% if param.description %>
+      <p class="opacity-70"><%= param.description %></p>
     <% else %>
       <p class="italic opacity-40">&mdash;</p>
     <% end %>
   </td>
   <td class="param-input">
     <div class="param-input-wrapper">
-      <%= input %>
+      <%= rendered_input %>
     </div>
   </td>
 <% end %>

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

@@ -1,92 +1,41 @@
 module Lookbook
   module Params
     class Field::Component < Lookbook::BaseComponent
-      def initialize(name:, input:, index:, label: nil, hint: nil, description: nil, value: nil, value_default: nil, value_type: nil, input_options: {}, config: nil, **html_attrs)
-        @input_name = input
-        @name = name
-        @label = label || name.titleize
-        @hint = hint
-        @description = description
-        @value = value
+      attr_reader :param, :rendered_input
+
+      def initialize(param:, index:, **html_attrs)
+        @param = param
         @index = index
-        @input_options = input_options
-        @value_default = value_default
-        @value_type = value_type
-        @config = config || {}
         @rendered_input = nil
         super(**html_attrs)
       end
 
-      def hint?
-        @hint.present?
-      end
-
-      def description?
-        @description.present?
-      end
-
-      def input
-        @rendered_input
-      end
-
       def before_render
-        tpl = TemplateParser.new(render_input)
-        Editor::Component.add_styles(@input_name, tpl.styles)
+        styles, html = StylesExtractor.call(render_input)
+        Editor::Component.add_styles(param.input, styles)
 
+        escaped_value = json_escape(param.value.to_s)
         wrapper_attrs = {
-          data: {"param-input": @input_name},
-          "x-data": "paramsInputComponent({name: '#{@name}', value: #{escaped_value}})"
+          data: {"param-input": param.input},
+          "x-data": "paramsInputComponent({name: '#{param.name}', value: '#{escaped_value}'})"
         }
-
-        @rendered_input = tag.div(**wrapper_attrs) do
-          tpl.content
-        end
+        @rendered_input = tag.div(**wrapper_attrs) { html.html_safe }
       end
 
       protected
 
-      def input_error(error)
-        tag.div error, class: "p-2 text-red-500 italic"
-      end
-
-      def value
-        val = @value.presence || @value_default
-        @value_type.downcase == "boolean" ? val == "true" || val == true : val
-      end
-
-      def escaped_value
-        json_escape(value.to_json)
-      end
-
-      def input_options
-        config_options = @config.fetch(:opts, {})
-        opts = config_options.merge(@input_options).symbolize_keys
-        opts[:id] = "param-#{@name}"
-        opts
-      end
-
-      def render_props
-        {
-          name: @name,
-          input: @input_name,
-          value: value,
-          value_type: @value_type,
-          value_default: @value_default,
-          input_options: input_options.except(:choices),
-          choices: input_options[:choices]
-        }
-      end
-
       def render_input
-        target = @config[:partial]
-        if target
-          render(target, **render_props)
-        else
-          input_error "No param input defined for input type '#{@input_name}'."
-        end
-      rescue ::ActionView::MissingTemplate => exception
-        Lookbook.logger.error exception
-        input_error "Param input partial '#{@config[:partial]}' could not be found."
+        input_options = param.input_options.to_h
+        input_options[:id] = "param-#{param.name}"
+
+        render(param.input_partial,
+          name: param.name,
+          input: param.input,
+          value: param.value.to_s,
+          value_type: param.value_type,
+          value_default: param.value_default,
+          input_options: input_options.except(:choices, :opts),
+          choices: input_options[:choices])
       end
 
       def alpine_component

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

@@ -2,7 +2,7 @@
   <% panes.each.with_index(1) do |pane, i| %>
     <%= pane %>
     <% if i < panes.size %>
-      <div class="bg-lookbook-divider relative" x-init="registerGutter">
+      <div class="bg-lookbook-divider relative z-50" x-init="registerGutter">
         <div class="absolute z-10 bg-transparent hover:bg-lookbook-draggable-hint transition-all" :class="{
           'w-[9px] h-full -translate-x-1/2 cursor-[col-resize]': vertical,
           'h-[9px] w-full -translate-y-1/2 cursor-[row-resize]': horizontal

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

@@ -13,7 +13,7 @@
     <%= lookbook_render :button, icon: :menu, class: "-ml-3", "x-show": "visibleTabsCount === 0" %>
   </div>
   <div class="hidden">
-    <div x-ref="tabsDropdown" data-cloak>
+    <div x-ref="tabsDropdown" x-cloak>
       <%= safe_join(dropdown_tabs) %>
     </div>
   </div>

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

@@ -33,6 +33,10 @@ export default function tabsComponent(store) {
 
     init() {
       this.$nextTick(() => {
+        if (this.$root.parentElement.offsetWidth === this.$root.offsetWidth) {
+          this.visibleTabsCount = this.tabs.length;
+        }
+
         dropdown = tippy(this.$refs.dropdownTrigger, {
           content: this.$refs.tabsDropdown,
           theme: "menu",

data/app/components/lookbook/tag_component.rb

@@ -19,7 +19,7 @@ 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("6.1.5.1")) ? :escape_attributes : :escape
     end
   end
 end

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

@@ -4,7 +4,7 @@
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='%23f3f3f3' fill-opacity='1'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E");
 
     .resize-handle {
-      @apply flex items-center justify-center h-full w-full border-lookbook-divider bg-lookbook-viewport-handle hover:bg-lookbook-draggable-hint hover:bg-opacity-20;
+      @apply flex items-center justify-center h-full w-full border-lookbook-divider bg-lookbook-viewport-handle hover:bg-lookbook-viewport-handle-hover hover:bg-opacity-20;
       @apply text-lookbook-viewport-handle-icon-stroke hover:text-lookbook-viewport-handle-icon-stroke-hover transition select-none touch-none;
     }
   }

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

@@ -27,7 +27,7 @@
       style="width: calc(100% + 2px); height: calc(100% + 1px); <%= "max-height: #{@max_height}px;" if @max_height.present? %>">
       <iframe seamless<%= " id=#{@iframe_id}" if @iframe_id.present? %>
         x-ref="iframe"
-        class="h-full w-full border border-lookbook-divider"
+        class="bg-lookbook-page-bg h-full w-full border border-lookbook-divider"
         :class="{ 'pointer-events-none': reflowing }"
         style="<%= "max-height: #{@max_height}px;" if @max_height.present? %>"
         src="<%= @src %>"

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

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

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

@@ -0,0 +1,131 @@
+module Lookbook
+  module TargetableConcern
+    extend ActiveSupport::Concern
+
+    included do
+      before_action :lookup_entities, only: [:show]
+      before_action :set_title
+      before_action :set_display_options
+      before_action :set_params
+    end
+
+    def set_title
+      @title = @target.present? ? [@target&.label, @preview&.label].compact.join(" :: ") : "Not found"
+    end
+
+    def lookup_entities
+      @target = Lookbook.previews.find_example_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!)
+        end
+      else
+        @preview = Lookbook.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("/"))
+        end
+      end
+    end
+
+    def set_display_options
+      @dynamic_display_options = []
+      @static_display_options = []
+
+      if @target.present?
+        opts = @target.display_options
+        @dynamic_display_options = opts.select { _2.is_a?(Array) || _2.is_a?(Hash) }
+        @static_display_options = opts.except(*@dynamic_display_options.keys)
+
+        if params[:_display]
+          display_params = SearchParamParser.call(params[:_display])
+          display_params.each do |name, value|
+            if @dynamic_display_options.key?(name)
+              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
+          @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)
+        end
+      end
+    end
+
+    def set_params
+      @params = []
+
+      if @target
+        @params = @target.tags("param").map do |param_tag|
+          Param.from_tag(
+            param_tag,
+            value: preview_controller.params[param_tag.name]
+          )
+        end
+
+        # cast known param values to correct type
+        @params.each do |param|
+          if preview_controller.params.key?(param.name)
+            preview_controller.params[param.name] = param.cast_value
+          end
+        end
+
+        # set display and data params for use in preview layouts
+        preview_controller.params[:lookbook] = {
+          display: @static_display_options,
+          data: Lookbook.data
+        }
+      end
+
+      preview_controller.params.permit!
+    end
+
+    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)
+      end
+
+      @inspector_data ||= Lookbook::Store.new({
+        context: Store.new({params: @params, path: params[:path]}),
+        preview: @preview,
+        examples: rendered_examples,
+        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
+  end
+end

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

@@ -0,0 +1,13 @@
+module Lookbook
+  module WithPreviewControllerConcern
+    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
+    end
+  end
+end

data/app/controllers/lookbook/application_controller.rb

@@ -1,8 +1,6 @@
 module Lookbook
   class ApplicationController < ActionController::Base
-    if respond_to?(:content_security_policy)
-      content_security_policy false, if: -> { Rails.env.development? }
-    end
+    content_security_policy(false) if respond_to?(:content_security_policy)
 
     protect_from_forgery with: :exception
 
@@ -11,16 +9,16 @@ module Lookbook
     helper Lookbook::ComponentHelper
 
     before_action :generate_theme_overrides
-    before_action :assign_collections
+    before_action :assign_instance_vars
 
     def self.controller_path
       "lookbook"
     end
 
     def index
-      landing = Lookbook.pages.find(&:landing) || Lookbook.pages.first
+      landing = Lookbook.pages.find(&:landing?) || Lookbook.pages.first
       if landing.present?
-        redirect_to lookbook_page_path(landing.lookup_path)
+        redirect_to lookbook_page_path(landing.path)
       else
         render "lookbook/index"
       end
@@ -32,9 +30,11 @@ module Lookbook
       @theme_overrides ||= Lookbook.theme.to_css
     end
 
-    def assign_collections
-      @previews = Preview.all
-      @pages = Page.all
+    def assign_instance_vars
+      @previews = Lookbook.previews
+      @pages = Lookbook.pages
+      @config = Lookbook.config
+      @engine = Lookbook.engine
     end
 
     def feature_enabled?(feature)
@@ -45,5 +45,17 @@ module Lookbook
       @error = locals[:error]
       render path, layout: layout.presence || (params[:lookbook_embed] ? "lookbook/basic" : "lookbook/application"), locals: locals
     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
+        }
+      end
+      Lookbook::Error.new(exception, **error_params)
+    end
   end
 end

data/app/controllers/lookbook/inspector_controller.rb

@@ -0,0 +1,45 @@
+module Lookbook
+  class InspectorController < ApplicationController
+    include TargetableConcern
+    include WithPreviewControllerConcern
+
+    layout "lookbook/inspector"
+    helper Lookbook::PreviewHelper
+
+    def self.controller_path
+      "lookbook/inspector"
+    end
+
+    def show
+      if @target
+        begin
+          @main_panels = main_panels
+          @drawer_panels = drawer_panels
+        rescue => exception
+          render_in_layout "lookbook/error", layout: "lookbook/inspector", 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

@@ -11,15 +11,19 @@ module Lookbook
     def render_page(page, locals = {})
       @page = page
       @pages = Lookbook.pages
-      @next_page = @pages.find_next(@page)
-      @previous_page = @pages.find_previous(@page)
-      content = render_to_string inline: @page.content, locals: {
-        page: @page,
-        next_page: @next_page,
-        previous_page: @previous_page,
-        pages: @pages
-      }
-      @page.markdown? ? Lookbook::Markdown.render(content) : content
+      @next_page = @pages.next(@page)
+      @previous_page = @pages.previous(@page)
+
+      content = ActionViewAnnotationsHandler.call(disable_annotations: true) do
+        render_to_string inline: @page.content, locals: {
+          page: @page,
+          next_page: @next_page,
+          previous_page: @previous_page,
+          pages: @pages
+        }
+      end
+
+      @page.markdown? ? MarkdownRenderer.call(content, Lookbook.config.markdown_options) : content
     end
   end
 end