lookbook 2.0.0.beta.3 → 2.0.0.beta.5

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.css

@@ -0,0 +1,12 @@
+@layer components {
+  [data-component="header"] {
+    .header-project-icon {
+      @apply h-5 inline-block flex-none;
+      width: min-content;
+
+      svg {
+        @apply h-full w-auto;
+      }
+    }
+  }
+}

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

@@ -1,13 +1,20 @@
 <%= 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 %>
+      <a <% if landing_path %>href="<%= landing_path %>"<% end %> class="flex items-center space-x-3">
+        <% if project_logo.present? %>
+          <i class="header-project-icon">
+            <%== project_logo %>
+          </i>
+        <% elsif project_logo != false %>
+          <%= lookbook_render :logo, size: 3.7 %>
+        <% end %>
+        <% if project_name.present? %>
+          <span class="text-sm truncate uppercase font-black tracking-wider text-lookbook-branding-text">
+            <%= project_name %>
+          </span>
+        <% end %>
+      </a>
     <% end %>
 
     <% toolbar.with_section padded: false, align: :right, class: "flex items-center -mt-px" do %>
@@ -22,7 +29,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/header/component.rb

@@ -1,9 +1,11 @@
 module Lookbook
   class Header::Component < Lookbook::BaseComponent
-    renders_one :branding
+    attr_reader :project_logo, :project_name
 
-    def initialize(debug_menu: false, **html_attrs)
+    def initialize(debug_menu: false, project_name: nil, project_logo: nil, **html_attrs)
       @debug_menu = debug_menu
+      @project_logo = project_logo
+      @project_name = project_name
       super(**html_attrs)
     end
 

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

@@ -3,9 +3,17 @@
     @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;
     }
+
+    &.icon-stroke-2 svg {
+      stroke-width: 2;
+    }
+
+    &.icon-stroke-1 svg {
+      stroke-width: 1;
+    }
   }
 }

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

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

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

@@ -1,8 +1,13 @@
 module Lookbook
   class Icon::Component < Lookbook::BaseComponent
-    def initialize(name:, size: 4, **html_attrs)
-      @alpine_data = name.is_a?(Symbol) ? alpine_encode(name.to_s.tr("_", "-")) : name
+    ICON_CACHE = {}
+
+    attr_reader :stroke
+
+    def initialize(name:, size: 4, stroke: 2, **html_attrs)
+      @icon_name = name.to_s.tr("_", "-")
       @size = size || 4
+      @stroke = stroke
       super(**html_attrs)
     end
 
@@ -10,10 +15,20 @@ module Lookbook
       "#{@size * 0.25}rem"
     end
 
-    protected
+    def svg
+      ICON_CACHE[@icon_name] ||= read_svg
+    end
+
+    def read_svg
+      File.read(svg_path).html_safe
+    rescue
+      if Rails.env.development? || Rails.env.test?
+        raise "`#{@icon_name}` is not a valid icon name"
+      end
+    end
 
-    def alpine_component
-      "iconComponent"
+    def svg_path
+      Lookbook::Engine.root.join("app/assets/lookbook/icons/#{@icon_name}.svg")
     end
   end
 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/directory/component.html.erb

@@ -11,10 +11,10 @@
     style: "padding-left: #{left_pad}px",
     "x-bind": "bindings.toggle" do %>
     <div class="nav-action-inner">
-      <%= icon nil,
-        size: 3,
-        class: "nav-toggle-icon",
-        "x-effect": "iconName = open ? 'chevron-down' : 'chevron-right'" if children? %>
+      <% if children? %>
+        <%= icon "chevron-down", size: 3, class: "nav-toggle-icon", "x-show": "open", "x-cloak": "true" %>
+        <%= icon "chevron-right", size: 3, class: "nav-toggle-icon", "x-show": "!open", "x-cloak": "true" %>
+      <% end %>
       <%= icon nav_icon, size: 3.5, class: "mr-1.5 text-lookbook-nav-icon-stroke" %>
       <span class="truncate"><%= label %></span>
     </div>

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,
@@ -12,10 +12,10 @@
     style: "padding-left: #{left_pad}px",
     "x-bind": "bindings.#{href.present? ? "link" : "toggle"}" do %>
     <div class="nav-action-inner">
-      <%= icon nil,
-        size: 3,
-        class: "nav-toggle-icon",
-        "x-effect": "iconName = open ? 'chevron-down' : 'chevron-right'" if children? %>
+      <% if children? %>
+        <%= icon "chevron-down", size: 3, class: "nav-toggle-icon", "x-show": "open", "x-cloak": "true" %>
+        <%= icon "chevron-right", size: 3, class: "nav-toggle-icon", "x-show": "!open", "x-cloak": "true" %>
+      <% end %>
       <%= icon nav_icon, size: 3.5, class: "mr-1.5 text-lookbook-nav-icon-stroke" %>
       <span class="truncate <% if node.type == :preview %>font-semibold<% end %>"><%= label %></span>
     </div>

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/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