lookbook 1.5.2 → 2.3.7

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

@@ -1,17 +1,23 @@
 <%= 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" do %>
-
+    <% toolbar.with_section padded: false, align: :right, class: "flex items-center -mt-px" do %>
       <div x-show="loading" x-cloak>
         <svg class="animate-spin h-3.5 w-3.5 text-lookbook-header-text opacity-60" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
           <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
@@ -21,29 +27,32 @@
 
       <%= lookbook_render :button_group do |group| %>
         <% if @debug_menu %>
-          <% group.with_button icon: :help_circle, class: "opacity-50 hover:opacity-100 transition !text-lookbook-header-text", "x-show": "!loading" do |button| %>
+          <% group.with_button id: "debug-menu-button",
+            icon: :help_circle,
+            tooltip: "Debug info",
+            class: "!text-lookbook-header-text", "x-show": "!loading" do |button| %>
             <% menu = lookbook_render :debug_menu,
               version: Lookbook::VERSION,
               docs_url: "https://lookbook.build/guide",
-              repo_url: "https://github.com/ViewComponent/lookbook" do %>
-              <%= helpers.pretty_json(Lookbook.debug_data) %>
+              repo_url: "https://github.com/lookbook-hq/lookbook" do %>
+              <%= debug_data %>
             <% end %>
-            <% button.with_dropdown({}).with_content(menu) %>
+            <% button.with_dropdown.with_content(menu) %>
           <% end %>
         <% end %>
 
         <% group.with_button icon: :menu,
-          "@click.stop": "toggleSidebar",
+          "x-on:click.stop": "toggleSidebar",
           "x-show": "$store.layout.mobile && sidebarHidden",
           class: "!text-lookbook-header-text" %>
 
         <% group.with_button icon: :x,
-          "@click.stop": "toggleSidebar",
+          "x-on:click.stop": "toggleSidebar",
           "x-show": "$store.layout.mobile && !sidebarHidden",
-          "@keydown.esc.window": "closeMobileSidebar",
+          "x-on:keydown.esc.window": "closeMobileSidebar",
           class: "!text-lookbook-header-text" %>
-      <% end %>    
+      <% end %>
     <% end %>
   <% end %>
-  
-<% end %>
+
+<% end %>

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

@@ -1,14 +1,20 @@
 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
 
     def landing_path
-      helpers.landing_path if defined? helpers.landing_path
+      helpers.lookbook_landing_path if defined? helpers.lookbook_landing_path
+    end
+
+    def debug_data
+      JSON.pretty_generate(Lookbook.debug_data)
     end
   end
 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,5 @@
-<%= render_component_tag :i, style: "height: #{size_rems}; width: #{size_rems}; #{@html_attrs[:style]}" do %>
+<%= render_component_tag :i, style: "height: #{size_rems}; width: #{size_rems}; #{@html_attrs[:style]}", class: "icon-stroke-#{stroke}" do %>
   <svg>
-    <use :href="`/lookbook-assets/feather-sprite.svg#${iconName}`" x-cloak />
+    <use href="/lookbook-assets/img/lucide-sprite.svg#<%= @icon_name %>"></use>
   </svg>
-<% end %>
+<% end %>

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

@@ -1,19 +1,18 @@
 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
 
     def size_rems
       "#{@size * 0.25}rem"
     end
-
-    protected
-
-    def alpine_component
-      "iconComponent"
-    end
   end
 end

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

@@ -0,0 +1,20 @@
+<%= render_component_tag tag_name,
+  id: id,
+  href: href,
+  class: [
+    "block text-lookbook-icon-button-stroke focus:outline-none focus-visible:outline-none #{padding}",
+    {
+      "hover:text-lookbook-icon-button-stroke-hover": !disabled,
+      "cursor-[not-allowed] opacity-50": disabled
+    }
+  ],
+  disabled: disabled,
+  aria: { label: tooltip } do %>
+  <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 tooltip %>
+    <label class="hidden" x-ref="tooltip"><%= tooltip %></label>
+  <% end %>
+  <%= content %>
+<% end %>

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

@@ -0,0 +1,46 @@
+module Lookbook
+  class IconButton::Component < Lookbook::BaseComponent
+    renders_many :icons, Lookbook::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 padding
+      [:xs, :sm].include?(size) ? "p-1" : "p-2"
+    end
+
+    def tag_name
+      href.present? ? :a : :button
+    end
+
+    protected
+
+    def alpine_component
+      "buttonComponent"
+    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,34 @@
+@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 uppercase font-bold tracking-wide mb-2;
+      overflow-wrap: anywhere;
+    }
+
+    & .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/component.html.erb

@@ -1,5 +1,5 @@
 <%= render_component_tag class: "flex flex-col overflow-hidden h-full",
-  "@filter:change.stop": "filter($event.detail.text)" do %>
+  "x-on:filter:change.stop": "filter($event.detail.text)" do %>
   
   <% if toolbar %>
     <%= toolbar %>
@@ -25,5 +25,4 @@
       </div>
     <% end %>
   </div>
-
 <% 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

@@ -2,8 +2,11 @@
   id: id,
   key: "#{id}-entity-#{type}",
   class: "list-none",
+  "x-init": "$nextTick(() => checkActive())",
   "x-show": "!filteredOut",
-  data: { "entity-type": type },
+  "@navigation:complete.window": "checkActive",
+  # "x-effect": "active = ($refs.link && (window.location.pathname === $refs.link.getAttribute('href')))",
+  data: { "entity-type": type.to_s.tr("_","-") },
   cloak: true do %>
   <%= lookbook_tag href.present? ? :a : :button,
     href: href,
@@ -12,12 +15,12 @@
     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-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

@@ -3,8 +3,8 @@ module Lookbook
     ICONS = {
       page: :file,
       preview: :layers,
-      example: :eye,
-      group: :eye
+      scenario: :eye,
+      scenario_group: :eye
     }.freeze
 
     def nav_icon
@@ -24,7 +24,7 @@ module Lookbook
     end
 
     def type
-      collapsed? ? :example : node.type
+      collapsed? ? :scenario : node.type
     end
 
     def collapsed?

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

@@ -6,20 +6,12 @@ export default function navItemComponent({ id, matchers }) {
   return {
     filteredOut: false,
 
+    active: false,
+
     get open() {
       return this.isCollection && this.isOpen(id);
     },
 
-    get active() {
-      if (this.$refs.link) {
-        return (
-          this.location &&
-          this.location.pathname === this.$refs.link.getAttribute("href")
-        );
-      }
-      return false;
-    },
-
     get children() {
       return this.$refs.items ? Array.from(this.$refs.items.children) : [];
     },
@@ -28,6 +20,12 @@ export default function navItemComponent({ id, matchers }) {
       return !this.$refs.link;
     },
 
+    checkActive() {
+      this.active =
+        this.$refs.link &&
+        window.location.pathname === this.$refs.link.getAttribute("href");
+    },
+
     toggle() {
       this.toggleOpen(id);
     },
@@ -58,7 +56,7 @@ export default function navItemComponent({ id, matchers }) {
 
     bindings: {
       toggle: {
-        ["@click.stop"]: "toggle",
+        ["x-on:click.stop"]: "toggle",
         ["x-ref"]: "toggle",
       },
       link: {

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

@@ -1,6 +1,6 @@
 module Lookbook
   class Nav::Item::Component < Lookbook::BaseComponent
-    delegate :label, :depth, to: :node
+    delegate :label, :depth, :priority, to: :node
 
     attr_reader :node, :nav_id
 

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

@@ -1,15 +1,15 @@
  <%= render_component_tag "x-data": "{ activeTab: null }" do %>
-  <div class="flex w-full border-b border-lookbook-divider mb-6">
+  <div class="flex w-full border-b border-lookbook-divider mb-6 lg:mb-8">
     <%= 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 %>
-        <%= lookbook_render :prose, markdown: props[:markdown], class: "max-w-none flex-none" do %>
+      <% t.with_panel name: props[:name] do %>
+        <%= lookbook_render :prose, size: :md, markdown: props[:markdown], class: "max-w-none flex-none" do %>
           <%== props[:tab_content] %>
         <% end %>
       <% end %>

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

@@ -1,6 +1,6 @@
 <%= 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'">
+    <table class="border-collapse w-full" x-bind:class="narrow && 'linear'">
       <thead>
         <tr>
           <th class="param-label">Param</th>

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

@@ -9,7 +9,7 @@ module Lookbook
       def initialize(**html_attrs)
         @field_count = -1
         @@input_styles = {}
-        super(**html_attrs)
+        super
       end
 
       def before_render
@@ -23,6 +23,7 @@ module Lookbook
       end
 
       def self.add_styles(input, styles)
+        @@input_styles = {} unless defined?(@@input_styles)
         @@input_styles[input] ||= styles
       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/params/field/component.rb

@@ -14,10 +14,10 @@ module Lookbook
         styles, html = StylesExtractor.call(render_input)
         Editor::Component.add_styles(param.input, styles)
 
-        escaped_value = json_escape(param.value.to_s)
+        escaped_value = html_escape(json_escape(param.value.to_s).gsub("\n", '\n'))
         wrapper_attrs = {
           data: {"param-input": param.input},
-          "x-data": "paramsInputComponent({name: '#{param.name}', value: '#{escaped_value}'})"
+          "x-data": "paramsInputComponent({name: \"#{param.name}\", value: \"#{escaped_value}\"})"
         }
         @rendered_input = tag.div(**wrapper_attrs) { html.html_safe }
       end

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

@@ -1,12 +1,25 @@
 @layer components {
   [data-component="prose"] {
+    @apply font-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;
+    }
+  }
+
+  #page [data-component="prose"] h2 {
+    @apply border-b border-lookbook-divider pb-3;
   }
 }

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,15 +1,13 @@
 module Lookbook
   class Prose::Component < Lookbook::BaseComponent
-    include Lookbook::OutputHelper
-
-    def initialize(size: :md, markdown: true, **html_attrs)
+    def initialize(size: :sm, markdown: true, **html_attrs)
       @size = size
       @markdown = markdown
       super(**html_attrs)
     end
 
     def rendered_content
-      @markdown ? markdown(content.strip_heredoc) : helpers.raw(content)
+      @markdown ? MarkdownRenderer.call(content.strip_heredoc) : helpers.raw(content)
     end
 
     def size_class
@@ -19,7 +17,7 @@ module Lookbook
       when :lg
         "prose-lg"
       else
-        ""
+        "prose-sm lg:prose-base"
       end
     end
   end

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

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

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

@@ -8,7 +8,7 @@ module Lookbook
 
     def initialize(**html_attrs)
       @panel_counter = 0
-      super(**html_attrs)
+      super
     end
 
     protected

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

@@ -9,8 +9,8 @@
     <%= safe_join(tabs) %>
   </div>
   <div x-ref="dropdownTrigger" class="absolute" x-show="hasHiddenTabs" :style="{left: `${triggerLeft}px`}">
-    <%= lookbook_render :button, icon: :chevrons_right, "x-show": "visibleTabsCount > 0" %>
-    <%= lookbook_render :button, icon: :menu, class: "-ml-3", "x-show": "visibleTabsCount === 0" %>
+    <%= lookbook_render :icon_button, icon: :chevrons_right, "x-show": "visibleTabsCount > 0" %>
+    <%= lookbook_render :icon_button, icon: :menu, class: "-ml-3", "x-show": "visibleTabsCount === 0" %>
   </div>
   <div class="hidden">
     <div x-ref="tabsDropdown" x-cloak>