lookbook 2.0.0.beta.2 → 2.0.0.beta.4

data/app/assets/lookbook/js/lib/lookbook.js

@@ -10,7 +10,7 @@ const whiteListedAttributes = [
   "param-*",
 ];
 
-function initEmbeds() {
+function initEmbeds(root = document) {
   if (typeof window.iFrameResize !== "function") {
     console.error(
       "Lookbook embeds require the 'iframe-resizer' library to be available. Skipping embed instantiation."
@@ -18,7 +18,17 @@ function initEmbeds() {
     return;
   }
 
-  const embeds = Array.from(document.querySelectorAll("lookbook-embed"));
+  if (typeof root === "string") {
+    root = document.querySelector(root);
+  }
+
+  if (!root) {
+    return console.error(
+      "Could not initialize Lookbook embeds. Root node not found."
+    );
+  }
+
+  const embeds = Array.from(root.querySelectorAll("lookbook-embed"));
 
   embeds.forEach((embed) => {
     const attrs = Array.from(embed.attributes);

data/app/components/lookbook/code/highlight_github.css

@@ -162,14 +162,13 @@
     } /* Comment */
     .err {
       color: var(--hl-error-fg);
-      background-color: var(--hl-error-bg);
     } /* Error */
     .g {
       color: var(--hl-subtle-fg);
     } /* Generic */
     .k {
       color: var(--hl-keyword);
-      font-weight: bold;
+      font-weight: 600;
     } /* Keyword; catches prefixes and css3 */
     .l {
       color: var(--hl-subtle-fg);
@@ -180,7 +179,7 @@
     } /* Name */
     .o {
       color: var(--hl-operator);
-      font-weight: bold;
+      font-weight: 600;
     } /* Operator */
     .x {
       color: var(--hl-subtle-fg);
@@ -194,7 +193,7 @@
     } /* Comment.Multiline */
     .cp {
       color: var(--hl-comment-preproc);
-      font-weight: bold;
+      font-weight: 600;
     } /* Comment.Preproc */
     .c1 {
       color: var(--hl-comment);
@@ -203,7 +202,7 @@
     .cs {
       color: var(--hl-comment-special-fg);
       background-color: var(--hl-comment-special-bg);
-      font-weight: bold;
+      font-weight: 600;
       font-style: italic;
     } /* Comment.Special */
     .gd {
@@ -232,38 +231,38 @@
     } /* Generic.Prompt */
     .gs {
       color: var(--hl-subtle-fg);
-      font-weight: bold;
+      font-weight: 600;
     } /* Generic.Strong */
     .gu {
       color: var(--hl-subheading);
-      font-weight: bold;
+      font-weight: 600;
     } /* Generic.Subheading */
     .gt {
       color: var(--hl-danger);
     } /* Generic.Traceback */
     .kc {
       color: var(--hl-keyword-crude);
-      font-weight: bold;
+      font-weight: 600;
     } /* Keyword.Constant */
     .kd {
       color: var(--hl-keyword-crude);
-      font-weight: bold;
+      font-weight: 600;
     } /* Keyword.Declaration */
     .kn {
       color: var(--hl-keyword-crude);
-      font-weight: bold;
+      font-weight: 600;
     } /* Keyword.Namespace */
     .kp {
       color: var(--hl-keyword-crude);
-      font-weight: bold;
+      font-weight: 600;
     } /* Keyword.Pseudo */
     .kr {
       color: var(--hl-keyword-crude);
-      font-weight: bold;
+      font-weight: 600;
     } /* Keyword.Reserved */
     .kt {
       color: var(--hl-keyword-subtle);
-      font-weight: bold;
+      font-weight: 600;
     } /* Keyword.Type */
     .ld {
       color: var(--hl-subtle-fg);
@@ -282,7 +281,7 @@
     } /* Name.Builtin */
     .nc {
       color: var(--hl-class);
-      font-weight: bold;
+      font-weight: 600;
     } /* Name.Class */
     .no {
       color: var(--hl-variable);
@@ -295,11 +294,11 @@
     } /* Name.Entity */
     .ne {
       color: var(--hl-exception);
-      font-weight: bold;
+      font-weight: 600;
     } /* Name.Exception */
     .nf {
       color: var(--hl-function);
-      font-weight: bold;
+      font-weight: 600;
     } /* Name.Function */
     .nl {
       color: var(--hl-subtle-fg);
@@ -321,7 +320,7 @@
     } /* Name.Variable */
     .ow {
       color: var(--hl-word);
-      font-weight: bold;
+      font-weight: 600;
     } /* Operator.Word */
     .w {
       color: var(--hl-whitespace);

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

@@ -18,13 +18,10 @@ export default function dimensionsDisplayComponent(targetSelector) {
 
     createObserver() {
       if (this.target) {
-        this.observer = observeSize(
-          document.querySelector(targetSelector),
-          ({ width, height }) => {
-            this.width = width;
-            this.height = height;
-          }
-        );
+        this.observer = observeSize(this.target, ({ width, height }) => {
+          this.width = width;
+          this.height = height;
+        });
       }
     },
 

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

@@ -0,0 +1,9 @@
+<%= render_component_tag do %>
+  <%= lookbook_render :code,
+    language: source_lang,
+    highlight_lines: highlight_lines,
+    start_line: start_line_number,
+    line_numbers: true do %>
+    <%= trimmed_source %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,73 @@
+module Lookbook
+  class FileSource::Component < Lookbook::BaseComponent
+    attr_reader :file_path, :lines_around_highlight
+
+    def initialize(file_path:, source: nil, highlight_lines: [], lines_around_highlight: nil,
+      start_line: 1, end_line: nil, start_line_number: nil, **html_attrs)
+      @file_path = file_path
+      @source = source
+      @highlight_lines = highlight_lines.map(&:to_i)
+      @start_line = start_line
+      @end_line = end_line
+      @start_line_number = start_line_number
+      @lines_around_highlight = lines_around_highlight
+      super(**html_attrs)
+    end
+
+    def render?
+      source.present?
+    end
+
+    def trimmed_source
+      return unless source.present?
+
+      from = start_line - 1
+      to = end_line - 1
+      source_lines[from..to].join("\n")
+    end
+
+    def source
+      return @source if @source.present?
+
+      @_source ||= File.read(file_path)
+    rescue
+      nil
+    end
+
+    def source_lang
+      lang = Lang.guess(file_path)
+      lang.present? ? lang[:name] : "plaintext"
+    end
+
+    def highlight_lines
+      @highlight_lines.map { |num| num - start_line + 1 }
+    end
+
+    def source_lines
+      @_source_lines ||= source&.split("\n")
+    end
+
+    def start_line
+      if lines_around_highlight && @highlight_lines.any?
+        start = @highlight_lines.first - lines_around_highlight
+        (start > 0) ? start : 1
+      else
+        @start_line
+      end
+    end
+
+    def start_line_number
+      @start_line_number || start_line
+    end
+
+    def end_line
+      line_count = source_lines.size
+      if lines_around_highlight && @highlight_lines.any?
+        last = @highlight_lines.last + lines_around_highlight
+        (last <= line_count) ? last : line_count
+      else
+        (@end_line && (@end_line <= line_count)) ? @end_line : line_count
+      end
+    end
+  end
+end

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

@@ -1,13 +1,16 @@
 <%= render_component_tag :header do %>
   <%= lookbook_render :toolbar, class: "!bg-lookbook-header-bg !text-lookbook-header-text !border-lookbook-header-border" do |toolbar| %>
     <% toolbar.with_section padded: true do %>
-      <% if branding.present? %>
-        <a
-          <% if landing_path %>href="<%= landing_path %>"<% end %>    
-          class="text-sm truncate uppercase font-black tracking-wider text-lookbook-branding-text">
-          <%= branding %>
-        </a>
-      <% end %>
+      <div class="flex items-center space-x-3">
+        <%= lookbook_render :logo, size: 4 %>
+        <% if branding.present? %>
+          <a
+            <% if landing_path %>href="<%= landing_path %>"<% end %>    
+            class="text-sm truncate uppercase font-black tracking-wider text-lookbook-branding-text">
+            <%= branding %>
+          </a>
+        <% end %>
+      </div>
     <% end %>
 
     <% toolbar.with_section padded: false, align: :right, class: "flex items-center -mt-px" do %>
@@ -22,7 +25,7 @@
         <% if @debug_menu %>
           <% group.with_button id: "debug-menu-button",
             icon: :help_circle,
-            class: "opacity-50 hover:opacity-100 transition !text-lookbook-header-text", "x-show": "!loading" do |button| %>
+            class: "!text-lookbook-header-text", "x-show": "!loading" do |button| %>
             <% menu = lookbook_render :debug_menu,
               version: Lookbook::VERSION,
               docs_url: "https://lookbook.build/guide",

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

@@ -3,7 +3,7 @@
     @apply transition block flex-none leading-none;
 
     svg {
-      @apply w-full h-full stroke-current stroke-2 fill-transparent;
+      @apply w-full h-full stroke-current fill-transparent;
       stroke-linecap: round;
       stroke-linejoin: round;
     }

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

@@ -1,5 +1,5 @@
 <%= render_component_tag :i, style: "height: #{size_rems}; width: #{size_rems}; #{@html_attrs[:style]}" do %>
-  <svg>
+  <svg stroke-width="<%= stroke %>">
     <use :href="`/lookbook-assets/img/lucide-sprite.svg#${iconName}`" x-cloak />
   </svg>
 <% end %>

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

@@ -1,8 +1,11 @@
 module Lookbook
   class Icon::Component < Lookbook::BaseComponent
-    def initialize(name:, size: 4, **html_attrs)
+    attr_reader :stroke
+
+    def initialize(name:, size: 4, stroke: 2, **html_attrs)
       @alpine_data = name.is_a?(Symbol) ? alpine_encode(name.to_s.tr("_", "-")) : name
       @size = size || 4
+      @stroke = stroke
       super(**html_attrs)
     end
 

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

@@ -0,0 +1,6 @@
+<svg width="<%= size_rems %>" viewBox="0 0 18 22" xmlns="http://www.w3.org/2000/svg">
+  <g stroke="currentColor" stroke-width="<%= stroke %>" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M3.5 1H17v20H3.5A2.5 2.5 0 0 1 1 18.5v-15A2.5 2.5 0 0 1 3.5 1Z"/>
+    <path d="M1.153 19.36c0-.737.261-1.188.596-1.57.417-.475.985-.79 1.751-.79H17M6.801 5.1v7.554L6.8 12.7h5.57"/>
+  </g>
+</svg>

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

@@ -0,0 +1,15 @@
+module Lookbook
+  class Logo::Component < Lookbook::BaseComponent
+    attr_reader :stroke
+
+    def initialize(size: 4, stroke: 2, **html_attrs)
+      @size = size || 4
+      @stroke = stroke
+      super(**html_attrs)
+    end
+
+    def size_rems
+      "#{@size * 0.25}rem"
+    end
+  end
+end

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

@@ -0,0 +1,33 @@
+@layer components {
+  [data-component="message"] {
+    @apply bg-lookbook-message-bg p-4 xs:p-6 shadow border border-lookbook-divider rounded flex gap-6 w-full;
+
+    &.icon-right {
+      @apply flex-row-reverse items-center;
+    }
+
+    &.icon-left {
+      @apply items-start;
+    }
+
+    & .message-title {
+      @apply text-base text-lookbook-message-title truncate uppercase font-bold tracking-wide mb-2;
+    }
+
+    & .message-icon {
+      @apply flex-none opacity-30 hidden xs:block;
+    }
+
+    &.theme-error {
+      @apply border-red-200;
+
+      & .message-title {
+        @apply text-red-700;
+      }
+
+      & .message-icon {
+        @apply text-red-600 opacity-50;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,26 @@
+<%= render_component_tag class: {
+    "icon-left": (icon_position == :left),
+    "icon-right": (icon_position == :right),
+    "theme-info": (theme == :info),
+    "theme-error": (theme == :error),
+  } do %>
+  <% if icon_name %>
+    <div class="message-icon">
+      <% if icon_name == :logo %>
+        <%= lookbook_render :logo, stroke: 1, size: 10 %>
+      <% else %>
+        <%= icon icon_name, stroke: 1, size: 10 %>
+      <% end %>
+    </div>
+  <% end %>
+  <div class="flex-grow">
+    <% if title %>
+      <h4 class="message-title">
+        <%= title %>
+      </h4>
+    <% end %>
+    <div class="opacity-70">
+      <%= lookbook_render :prose, size: :sm, content: content %>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,13 @@
+module Lookbook
+  class Message::Component < Lookbook::BaseComponent
+    attr_reader :title, :icon_name, :icon_position, :theme
+
+    def initialize(title: nil, icon: nil, icon_position: :left, theme: :info, **html_attrs)
+      @title = title
+      @icon_name = icon
+      @icon_position = icon_position
+      @theme = theme
+      super(**html_attrs)
+    end
+  end
+end

data/app/components/lookbook/nav/entity/component.html.erb

@@ -3,7 +3,7 @@
   key: "#{id}-entity-#{type}",
   class: "list-none",
   "x-show": "!filteredOut",
-  data: { "entity-type": type },
+  data: { "entity-type": type.to_s.tr("_","-") },
   cloak: true do %>
   <%= lookbook_tag href.present? ? :a : :button,
     href: href,
@@ -17,7 +17,7 @@
         class: "nav-toggle-icon",
         "x-effect": "iconName = open ? 'chevron-down' : 'chevron-right'" if children? %>
       <%= icon nav_icon, size: 3.5, class: "mr-1.5 text-lookbook-nav-icon-stroke" %>
-      <span class="truncate <% if node.type == :preview %>font-bold<% end %>"><%= label %></span>
+      <span class="truncate <% if node.type == :preview %>font-semibold<% end %>"><%= label %></span>
     </div>
   <% end %>
   

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

@@ -4,7 +4,7 @@ module Lookbook
       page: :file,
       preview: :layers,
       scenario: :eye,
-      group: :eye
+      scenario_group: :eye
     }.freeze
 
     def nav_icon

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

@@ -2,13 +2,13 @@
   <div class="flex w-full border-b border-lookbook-divider mb-6">
     <%= lookbook_render :tabs, theme: :page do |t| %>
       <% @tabs.each do |props| %>
-        <%= t.tab **props %>
+        <%= t.with_tab **props %>
       <% end %>
     <% end %>
   </div>
   <%= lookbook_render :tab_panels do |t| %>
     <% @tabs.each do |props| %>
-      <% t.panel name: props[:name] do %>
+      <% t.with_panel name: props[:name] do %>
         <%= lookbook_render :prose, markdown: props[:markdown], class: "max-w-none flex-none" do %>
           <%== props[:tab_content] %>
         <% end %>

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

@@ -7,7 +7,7 @@
         }
 
         th {
-          @apply font-bold py-4 px-4 align-middle text-left;
+          @apply font-semibold py-4 px-4 align-middle text-left;
         }
 
         th.param-label {
@@ -29,7 +29,7 @@
         }
 
         td.param-label {
-          @apply font-bold;
+          @apply font-semibold;
         }
 
         .param-input-wrapper {
@@ -65,7 +65,7 @@
       }
 
       td.param-label {
-        @apply font-bold;
+        @apply font-semibold;
       }
 
       td.param-description-empty {

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

@@ -1,12 +1,19 @@
 @layer components {
   [data-component="prose"] {
+    letter-spacing: -0.015em !important;
+
     [data-component="code"] {
       @apply border border-lookbook-divider rounded-md;
     }
 
     [data-component="embed"],
-    [data-component="code"] {
+    [data-component="code"],
+    [data-lookbook-embed] {
       @apply my-8;
     }
+
+    [data-lookbook-embed] {
+      @apply rounded-md;
+    }
   }
 }

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

@@ -1,3 +1,8 @@
-<%= render_component_tag class: "prose #{size_class} text-lookbook-prose-text bg-lookbook-prose-bg prose-a:text-lookbook-prose-link" do %>
+<%= render_component_tag class: "
+    prose #{size_class}
+    text-lookbook-prose-text bg-lookbook-prose-bg prose-a:text-lookbook-prose-link
+    prose-headings:font-semibold
+    prose-h1:font-bold
+  " do %>
   <%== rendered_content %>
 <% end %>

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

@@ -1,6 +1,6 @@
 module Lookbook
   class Prose::Component < Lookbook::BaseComponent
-    def initialize(size: :md, markdown: true, **html_attrs)
+    def initialize(size: :sm, markdown: true, **html_attrs)
       @size = size
       @markdown = markdown
       super(**html_attrs)
@@ -17,7 +17,7 @@ module Lookbook
       when :lg
         "prose-lg"
       else
-        ""
+        "prose-sm lg:prose-base"
       end
     end
   end

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

@@ -66,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]
@@ -115,21 +116,6 @@ module Lookbook
       })
     end
 
-    def show_404(layout: nil)
-      locals = if @preview
-        {
-          message: "Example not found",
-          description: "The '#{@preview.label}' preview does not have an scenario 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, status: 404
-    end
-
     def path_segments
       params[:path].split("/")
     end

data/app/controllers/lookbook/application_controller.rb

@@ -4,13 +4,20 @@ 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::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
@@ -24,9 +31,13 @@ module Lookbook
       end
     end
 
+    def not_found
+      raise_not_found
+    end
+
     protected
 
-    def generate_theme_overrides
+    def assign_theme_overrides
       @theme_overrides ||= Engine.theme.to_css
     end
 
@@ -37,23 +48,36 @@ module Lookbook
       @config = Lookbook.config
       @engine = Lookbook.engine
       @embed = !!params[:lookbook_embed]
+      @blank_slate = Engine.pages.none? && Engine.previews.none?
     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
+    def raise_not_found(message = "Page not found")
+      raise Lookbook::RoutingError, message
     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 handle_error(err)
+      @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 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