lookbook 0.7.2.beta.0 → 0.7.2.beta.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 98a56fb4554ef243a33b570a86191d836574e2557bc9800fc0ce948b5477aeb6
-  data.tar.gz: b8d46feaf068e9cdfe79cb7677d3c6f8cc90739e699b8909fce82fea658115e0
+  metadata.gz: 7c26bf5a4901bcb0fd09b8742ae3e9c2df8f8c337c3f312152cb31dc6a74aa23
+  data.tar.gz: e1e8a016b29cf87357c3b291c99eaaf8d1e21d1a4acb552bab7777699579f265
 SHA512:
-  metadata.gz: 3f7ce11e780bdd6c3d77a67a393e35e1fb9d2a3fd0eaf10f3748dcd4a9dbd83f4130f5a6877887518c02f95f1885c468ccbe06db3c6b02052a02df401a6aadd1
-  data.tar.gz: f8f0bfbf93acad2e103d7b6a84dff701597579ed0fab778f1ee74276f5e23d4f260472dc6e64122a9127ee3be3c9fb44ee8abf56dd94fa7b6707e1a3de4089b7
+  metadata.gz: dd771d407e79c1958ad0c4873fa242d7c3ad345091291275c5efd261be1d4617d8e60a6a0e82da97f2e01da8aa3a4781f169c13b1559dd481a1939598585b8d1
+  data.tar.gz: d4a40a44f2864c7c9b7bdb3b849092973619044fae370e056dda42b7382bc324fcc6932b26b4a15962d283fa8030782bd3a37e0f1e33c50f4aaf5046ba5c0ccd

data/app/assets/lookbook/css/app.css

@@ -93,7 +93,7 @@
   .code.numbered:before {
     content: "";
     left: 2.7em;
-    @apply absolute top-0 bottom-0 border-r border-gray-200;
+    @apply absolute top-0 bottom-0 border-r border-gray-200 z-10;
   }
 
   .code.numbered .line {
@@ -115,8 +115,25 @@
     @apply flex-none pr-4;
   }
 
+  .code.focussed .line:not(.highlighted-line) *,
+  .code.focussed .line:not(.highlighted-line) .line-content * {
+    @apply !text-gray-700 !text-opacity-40;
+  }
+
+  .code.focussed .line:not(.highlighted-line) .line-number {
+    @apply !opacity-70;
+  }
+
+  .code.focussed .line.highlighted-line {
+    @apply bg-yellow-50;
+  }
+
+  .code.focussed .line.highlighted-line .line-number {
+    @apply text-gray-900;
+  }
+
   .prose .code {
-    @apply !bg-white border border-gray-300 text-gray-600 my-8 text-sm rounded-md py-4 overflow-auto max-w-3xl w-full mx-auto;
+    @apply !bg-white border border-gray-300 text-gray-600 my-8 rounded-md py-4 text-sm overflow-auto max-w-3xl w-full mx-auto;
   }
 
   .prose .code:not(.numbered) .line {

data/app/controllers/lookbook/pages_controller.rb

@@ -27,7 +27,12 @@ module Lookbook
             @previous_page = @pages.find_previous(@page)
             @title = @page.title
           rescue => exception
-            render "lookbook/error", locals: {error: exception}
+            render "lookbook/error", locals: {
+              error: Lookbook::Error.new(exception, {
+                file_path: @page.full_path,
+                source_code: @page.content
+              })
+            }
           end
         end
       else

data/app/controllers/lookbook/previews_controller.rb

@@ -13,7 +13,10 @@ module Lookbook
         begin
           render html: render_examples(examples_data)
         rescue => exception
-          render_in_layout "lookbook/error", layout: "lookbook/basic", error: exception, disable_header: true
+          render_in_layout "lookbook/error",
+            layout: "lookbook/basic",
+            error: prettify_error(exception),
+            disable_header: true
         end
       else
         render_in_layout "not_found"
@@ -28,7 +31,7 @@ module Lookbook
           @drawer_panels = drawer_panels.filter { |name, panel| panel[:show] }
           @preview_panels = preview_panels.filter { |name, panel| panel[:show] }
         rescue => exception
-          render_in_layout "lookbook/error", error: exception
+          render_in_layout "lookbook/error", error: prettify_error(exception)
         end
       else
         render_in_layout "not_found"
@@ -152,5 +155,28 @@ module Lookbook
     def render_in_layout(path, layout: nil, **locals)
       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)
+        {
+          file_path: @preview&.full_path,
+          line_number: 0,
+          source_code: @example&.source
+        }
+      elsif exception.is_a?(ActionView::Template::Error) & exception.message.include?("implements a reserved method")
+        message_parts = exception.message.split("\n").first.split
+        component_class = message_parts.first.constantize
+        naughty_method = message_parts.last.delete("#").delete("`").delete(".")
+        p naughty_method
+        method = component_class.instance_method(naughty_method.to_sym)
+        if method
+          {
+            file_path: method.source_location.first,
+            line_number: method.source_location[1]
+          }
+        end
+      end
+      Lookbook::Error.new(exception, error_params || {})
+    end
   end
 end

data/app/helpers/lookbook/component_helper.rb

@@ -9,6 +9,10 @@ module Lookbook
       render_component "icon", name: name, size: size, **attrs
     end
 
+    def code(language = "ruby", **opts, &block)
+      render_component "code", {language: language, **opts}, &block
+    end
+
     if Rails.version.to_f < 6.1
       def class_names(*args)
         tokens = build_tag_values(*args).flat_map { |value| value.to_s.split(/\s+/) }.uniq

data/app/helpers/lookbook/page_helper.rb

@@ -7,10 +7,6 @@ module Lookbook
       lookbook.page_path page.lookup_path
     end
 
-    def code(language = "ruby", line_numbers: false, &block)
-      render_component "code", language: language, line_numbers: line_numbers, &block
-    end
-
     def embed(*args, params: {}, type: :preview, **opts)
       return unless args.any?
 

data/app/views/lookbook/components/_code.html.erb

@@ -1,13 +1,17 @@
 <%
-line_numbers ||= false
 language ||= "html"
 wrap ||= nil;
 %>
 <% code ||= capture do %><%= yield %><% end %>
-<div class="code not-prose <%= "numbered" if line_numbers %> <%= classes ||= "" %>"
+<% output = highlight(code, language, {
+  strip: defined?(strip) ? strip : true,
+  line_numbers: line_numbers ||= false,
+  highlight_lines: highlight_lines ||= [],
+  start_line: start_line ||= 0
+}) %>
+<div class="code not-prose <%= "numbered" if line_numbers %> <%= classes ||= "" %> <%= "focussed" if highlight_lines.any? %>"
   x-data="code"
   :class="{'wrapped': wrap}"
-  <% if wrap.present? %>x-effect="wrap = <%= wrap %>"<% end %>
->
-  <pre><code class="highlight"><%= highlight(code.strip, language, line_numbers: line_numbers) %></code></pre>
+  <% if wrap.present? %>x-effect="wrap = <%= wrap %>"<% end %>>
+  <pre><code class="highlight"><%= output %></code></pre>
 </div>

data/app/views/lookbook/error.html.erb

@@ -4,25 +4,40 @@ error = error.is_a?(Lookbook::Error) ? error : Lookbook::Error.new(error)
 disable_header ||= false
 %>
 <%= component "header" unless disable_header %>
-<div class="h-full w-full bg-red-50 flex flex-col border-red-300">
-  <header class="flex-none px-8 py-8">
+<div class="h-full w-full bg-red-50 flex flex-col border-red-300" id="error-<%= Time.now %>">
+
+  <header class="mx-8  pt-8 mb-8 flex-none">
     <h2 class="text-xl font-bold text-red-700"><%= error.title %></h2>
   </header>
+  
+  <div class="flex-none px-8 py-6 mb-8 border-t border-b border-red-200 bg-red-100 text-base font-mono leading-relaxed">
+    <pre class="whitespace-pre-wrap font-sans leading-tight text-red-900"><%= error.message %></pre>
+  </div>
 
-  <div class="flex-none px-8 py-6 border-t border-b border-red-200 bg-red-100 text-base font-mono leading-relaxed">
-    <% if error.file_name %>
-    <div class="mb-2 text-gray-500">
-      <%= error.file_name %><%= ":#{error.line_number}" if error.line_number %>
+  <% if error.file_name %>
+    <div class="text-gray-800 text-sm mx-8 mb-2 font-mono flex-none <%= "pl-2" if error.source_code %>">
+      <span><%= error.file_name %></span>
+      <% if error.line_number %>
+        <span>[line <strong><%= error.line_number %></strong>]</span>
+      <% end %>
     </div>
-    <% end %>
-    <pre class="whitespace-pre-wrap"><%= error.message %></pre>
+  <% end %>
+
+  <% if error.source_code %>
+  <div class="prose max-w-full mx-8">
+      <%= code error.file_lang, highlight_lines: [error.source_code[:highlighted_line]],
+        line_numbers: true,
+        start_line: error.source_code[:start_line],
+        strip: false,
+        class: "py-4 !max-w-full !border-red-200 !mt-1" do %><%= h(error.source_code[:code]) %><% end %>
   </div>
+  <% end %>
 
-  <h3 class="font-bold mt-6 mb-4 px-8 flex-none">Full stack trace</h3>
+  <h3 class="font-bold mb-4 px-8 mt-8 flex-none">Full stack trace</h3>
   <div class="text-xs font-mono flex-grow h-full overflow-hidden">
-    <div class="h-full  overflow-auto px-8 pb-10 text-gray-400">
+    <div class="h-full overflow-auto px-8 pb-10 text-gray-400 leading-relaxed">
       <% error.backtrace.each do |line| %>
-        <div class="py-1 hover:text-gray-900 transition-colors duration-100">
+        <div class="hover:text-gray-900 transition-colors duration-100">
           <%= line %>
         </div>
       <% end %>

data/lib/lookbook/code_formatter.rb

@@ -5,7 +5,8 @@ module Lookbook
   module CodeFormatter
     class << self
       def highlight(source, language, opts = {})
-        source&.gsub!("&gt;", "<")&.gsub!("&lt;", ">")
+        source&.strip! unless opts[:strip] == false
+        source&.gsub!("&gt;", ">")&.gsub!("&lt;", "<")
         language ||= "ruby"
         formatter = Formatter.new(opts)
         lexer = Rouge::Lexer.find(language.to_s) || Rouge::Lexer.find("plaintext")
@@ -23,12 +24,14 @@ module Lookbook
   class Formatter < Rouge::Formatters::HTML
     def initialize(opts = {})
       @opts = opts
+      @highlight_lines = opts[:highlight_lines].to_a || []
+      @start_line = opts[:start_line] || 0
     end
 
     def stream(tokens, &block)
       token_lines(tokens).each_with_index do |line_tokens, i|
-        yield "<div class='line'>"
-        yield "<span class='line-number'>#{i}</span>" if @opts[:line_numbers]
+        yield "<div class='line #{"highlighted-line" if @highlight_lines.include?(i + 1)}'>"
+        yield "<span class='line-number'>#{@start_line + i}</span>" if @opts[:line_numbers]
         yield "<span class='line-content'>"
         line_tokens.each do |token, value|
           yield span(token, value)

data/lib/lookbook/error.rb

@@ -2,15 +2,63 @@ module Lookbook
   class Error < StandardError
     delegate :full_message, :backtrace, :to_s, to: :target
 
-    def initialize(original = nil, title: nil, message: nil, file_name: false, line_number: false)
+    LINES_AROUND = 3
+
+    def initialize(original = nil, title: nil, message: nil, file_path: nil, file_name: nil, line_number: nil, source_code: nil)
       @original = original
       @title = title
       @message = message
+      @file_path = file_path
       @file_name = file_name
       @line_number = line_number
+      @source_code = source_code
       super()
     end
 
+    def source_code
+      lines = source_code_lines
+
+      if lines.present? && line_number.is_a?(Integer)
+        start_line = source_code_start_line(lines)
+        end_line = source_code_end_line(lines)
+        highlighted_line = source_code_highlighted_line(lines)
+
+        line_count = end_line - start_line
+        relevant_lines = lines.slice(start_line - 1, line_count + 1)
+        if relevant_lines.present?
+          empty_start_lines = 0
+          relevant_lines.each do |line|
+            break unless line.strip.empty?
+            empty_start_lines += 1
+          end
+
+          {
+            code: relevant_lines.join("\n").lstrip,
+            start_line: start_line - empty_start_lines,
+            end_line: end_line - empty_start_lines,
+            highlighted_line: highlighted_line - empty_start_lines
+          }
+        end
+
+      end
+    end
+
+    def source_code_lines
+      if file_path || @source_code
+        if @source_code
+          @source_code.split("\n")
+        else
+          full_path = Rails.root.join(file_path)
+          File.read(full_path).split("\n") if File.exist? full_path
+        end
+      end
+    end
+
+    def file_lang
+      lang = Lookbook::Lang.guess(file_path)
+      lang.present? ? lang[:name] : "plaintext"
+    end
+
     def title
       @title || target.class.to_s
     end
@@ -20,20 +68,29 @@ module Lookbook
     end
 
     def file_name
-      path = if @file_name == false
+      if @file_name == false
+        nil
+      else
+        @file_name || file_path
+      end
+    end
+
+    def file_path
+      path = if @file_path.nil?
         parsed_backtrace[0][0] if parsed_backtrace.any?
       else
-        @file_name
+        @file_path.presence || nil
       end
-      path.delete_prefix("#{Rails.root}/")
+      path.nil? ? nil : path.to_s.delete_prefix("#{Rails.root}/")
     end
 
     def line_number
-      if @line_number == false
+      number = if @line_number.nil?
         parsed_backtrace[0][1] if parsed_backtrace.any?
       else
-        @line_number
+        @line_number.presence || nil
       end
+      number.present? ? number.to_i : number
     end
 
     def parsed_backtrace
@@ -48,5 +105,17 @@ module Lookbook
     def target
       @original.presence || self
     end
+
+    def source_code_start_line(lines)
+      [(line_number - LINES_AROUND), 1].max unless line_number.nil?
+    end
+
+    def source_code_end_line(lines)
+      [line_number + LINES_AROUND, lines&.size || Infinity].min
+    end
+
+    def source_code_highlighted_line(lines)
+      [line_number - source_code_start_line(lines) + 1, 1].max unless line_number.nil?
+    end
   end
 end

data/lib/lookbook/page.rb

@@ -20,6 +20,7 @@ module Lookbook
     def initialize(path, base_path)
       @pathname = Pathname.new path
       @base_path = base_path
+      @options = nil
       @errors = []
     end
 
@@ -61,7 +62,7 @@ module Lookbook
     end
 
     def content
-      @content ||= strip_frontmatter(file_contents)
+      @content ||= strip_frontmatter(file_contents).strip
     end
 
     def matchers
@@ -104,23 +105,24 @@ module Lookbook
         frontmatter = (get_frontmatter(file_contents) || {}).deep_symbolize_keys
       rescue => exception
         frontmatter = {}
+        line_number_match = exception.message.match(/.*line\s(\d+)/)
         @errors.push(Lookbook::Error.new(exception, {
           title: "YAML frontmatter parsing error",
-          file_name: @pathname.to_s,
-          line_number: nil
+          file_path: @pathname.to_s,
+          line_number: line_number_match ? line_number_match[1] : false
         }))
       end
-      options = Lookbook.config.page_options.deep_merge(frontmatter).with_indifferent_access
-      options[:id] = options[:id] ? generate_id(options[:id]) : generate_id(lookup_path)
-      options[:label] ||= name.titleize
-      options[:title] ||= options[:label]
-      options[:hidden] ||= false
-      options[:landing] ||= false
-      options[:position] = options[:position] ? options[:position].to_i : get_position_prefix(path_name)
-      options[:markdown] ||= markdown_file?
-      options[:header] = true unless options.key? :header
-      options[:footer] = true unless options.key? :footer
-      @options ||= options
+      @options = Lookbook.config.page_options.deep_merge(frontmatter).with_indifferent_access
+      @options[:id] = @options[:id] ? generate_id(@options[:id]) : generate_id(lookup_path)
+      @options[:label] ||= name.titleize
+      @options[:title] ||= @options[:label]
+      @options[:hidden] ||= false
+      @options[:landing] ||= false
+      @options[:position] = @options[:position] ? @options[:position].to_i : get_position_prefix(path_name)
+      @options[:markdown] ||= markdown_file?
+      @options[:header] = true unless @options.key? :header
+      @options[:footer] = true unless @options.key? :footer
+      @options
     end
 
     def path_name

data/lib/lookbook/preview.rb

@@ -68,7 +68,7 @@ module Lookbook
     end
 
     def preview_paths
-      ViewComponent::Preview.preview_paths
+      ViewComponent::Base.preview_paths
     end
 
     def parent_collections_names
@@ -143,7 +143,8 @@ module Lookbook
           Rails.logger.error "[lookbook] preview error\n#{exception.full_message}\n"
           @errors.push(Lookbook::Error.new(exception, {
             title: "Preview #{exception.class}",
-            file_name: file[:rel_path]
+            file_name: file[:rel_path],
+            file_path: file[:path]
           }))
         end
       end

data/lib/lookbook/preview_example.rb

@@ -3,7 +3,7 @@ module Lookbook
     include Utils
 
     attr_reader :name, :preview
-    delegate :params, :position, :group, :notes, :hidden?, to: :@example_inspector
+    delegate :params, :position, :group, :notes, :hidden?, :source, to: :@example_inspector
 
     def initialize(name, preview)
       @name = name

data/lib/lookbook/version.rb

@@ -1,3 +1,3 @@
 module Lookbook
-  VERSION = "0.7.2.beta.0"
+  VERSION = "0.7.2.beta.1"
 end