lookbook 1.5.1 → 2.0.0.beta.0

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

@@ -1,51 +1,6 @@
-<% if @target.present? %>
-<%= render_component_tag class: "not-prose border-b border-lookbook-divider rounded-sm overflow-hidden", "@navigation:start.window": "cleanup" do %>
-
-  <%= lookbook_render :toolbar, class: "border border-b-0 border-lookbook-divider" do |toolbar| %>
-    <% toolbar.with_section padded: true do %>
-      <h3>
-        <%= @target.preview.label %> (<%= @target.label %>)
-      </h3>
-    <% end %>
-    <% toolbar.with_section align: :right, divide: :left do %>
-      <%= lookbook_render :button_group do |group| %>
-        <% group.with_button icon: :eye,
-          href: lookbook_inspect_path(@target.path, @params),
-          tooltip: "View in Inspector" %>
-        <% group.with_button icon: :external_link,
-          href: lookbook_preview_path(@target.path, @params),
-          tooltip: "Open in new window",
-          target: "_blank" %>
-      <% end %>
-    <% end %>
-  <% end %>
-
-  <div
-    x-show="tab === 'preview'"
-    @viewport:loaded="loadResizer"
-    @dom:update-complete="loadResizer"
-    @viewport:resize-progress="resizeIframe"
-    @viewport:resize-complete="resizeIframe"
-    @tabs:change.window="resizeIframe"> 
-    <%= lookbook_render :viewport,
-      src: lookbook_preview_path(@target.path, @params.merge(lookbook_embed: true)),
-      alpine_data: "store",
-      resize_height: false,
-      max_height: @max_height,
-      class: "mb-[-2px]" %>
-  </div>
-
-<% end %>
-<% else %>
-<%= render_component_tag class: "bg-white flex flex-col items-center justify-center border-2 border-dashed border-gray-200 p-6 rounded-md not-prose" do %>
-  <div class="px-4 text-center">
-    <%= icon  :alert_triangle, size: 6, class: "text-red-300 mx-auto" %>
-    <div class="mt-2 max-w-xs">
-      <h5 class="text-base">Preview not found</h5>
-      <p class="mt-1 opacity-50 text-sm">
-        The preview may have been renamed or deleted
-      </p>
-    </div>
-  </div>
-<% end %>
-<% end %>
+<lookbook-embed
+  app="<%= lookbook_home_url %>"
+  preview="<%= preview_class %>"
+  scenario="<%= scenario.name %>"
+  <%= params_attrs_str %> panels="<%= panels.join(",") %>"
+  actions="<%= actions.join(",") %>"></lookbook-embed>

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

@@ -1,30 +1,31 @@
 module Lookbook
   class Embed::Component < Lookbook::BaseComponent
-    def initialize(id:, example:, params: {}, opts: {}, max_height: nil, **html_attrs)
-      @id = id
-      @target = example
-      @params = params
-      @opts = opts
-      @max_height = max_height
+    ACTIONS = [:inspect, :open]
+
+    attr_reader :preview, :scenario, :params, :options
+
+    def initialize(scenario:, params: {}, options: {}, **html_attrs)
+      @scenario = scenario
+      @preview = scenario.preview
+      @params = params.to_h
+      @options = options.to_h
       super(**html_attrs)
     end
 
-    protected
-
-    def lookbook_inspect_path(*args)
-      Lookbook::Engine.routes.url_helpers.lookbook_inspect_path(*args)
+    def preview_class
+      preview.preview_class.name
     end
 
-    def lookbook_preview_path(*args)
-      Lookbook::Engine.routes.url_helpers.lookbook_preview_path(*args)
+    def panels
+      options.fetch(:panels, []).map(&:to_s)
     end
 
-    def alpine_data
-      [alpine_encode(@id), "$store.pages.embeds"].join(",")
+    def actions
+      options.fetch(:actions, ACTIONS).map(&:to_s)
     end
 
-    def alpine_component
-      "embedComponent"
+    def params_attrs_str
+      params.map { |key, value| "param-#{key}=\"#{value}\"" }.join(" ").strip.html_safe
     end
   end
 end

data/app/components/lookbook/embed/inspector/component.html.erb

@@ -0,0 +1,102 @@
+<%= render_component_tag id: id,
+  class: "border-b border-lookbook-divider rounded-md overflow-hidden",
+  cloak: true do %>
+
+  <%= lookbook_render :toolbar,
+    class: "border border-b-0 border-lookbook-divider",
+    style: "border-top-left-radius: 6px; border-top-right-radius: 6px;" do |toolbar| %>
+    <% toolbar.with_section padded: true do %>
+      <h3 class="flex items-center space-x-1">
+        <strong class="text-lookbook-embed-title"><%= target.preview.label %></strong>
+        <% if scenarios.many? %>
+          <%= select_tag("target", options_for_select(scenario_select_options, helpers.lookbook_embed_path(target.path)), "x-model": "targetPath", class: "!ml-2 compact") %>
+        <% else %>
+          <span>(<%= target.label %>) </span>
+        <% end %>
+      </h3>
+    <% end %>
+
+    <% toolbar.with_section align: :right, class: "flex-none" do %>
+      <% if display_option_controls? && dynamic_display_options.any? %>
+        <%= lookbook_render "display_options/editor" do |editor| %>
+          <% dynamic_display_options.each do |key, opts| %>
+            <% editor.with_field name: key, opts: opts, value: static_display_options[key] %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <% if actions.any? %>
+      <% toolbar.with_section divide: :left do %>
+        <%= lookbook_render :button_group do |group| %>
+          <% if display_action?(:inspect) %>
+            <% group.with_button icon: :eye,
+              href: helpers.lookbook_inspect_url(target.path, params),
+              tooltip: "View in Inspector",
+              target: "_top" %>
+          <% end %>
+          <% if display_action?(:open) %>
+            <% group.with_button icon: :external_link,
+              href: helpers.lookbook_preview_url(target.path, params),
+              tooltip: "Open in new window",
+              target: "_blank" %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <section
+    x-ref="viewport"
+    <% unless drawer? %>
+      style="border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; overflow: hidden;"
+    <% end %>>
+    <div
+      @viewport:resize-progress="resizeIframe"
+      @viewport:resize-complete="resizeIframe"
+      x-ref="viewportWrapper"> 
+      <%= lookbook_render :viewport,
+        iframe_id: "#{id}-viewport",
+        src: helpers.lookbook_preview_path(target.path, params.merge(lookbook_embed: true)),
+        alpine_data: "store",
+        resize_height: false,
+        class: "mb-[-2px] transition-[height] duration-150",
+        ":style": "`height: ${viewportCssHeight}`"
+          %>
+    </div>
+  </section>
+
+  <% if drawer? %>
+    <section
+      class="relative top-[-1px] border border-b-0 border-lookbook-divider overflow-hidden"
+      style="border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;"
+      x-cloak>
+      <%= lookbook_render :toolbar, id: "#{id}-drawer-toolbar" do |toolbar| %>
+        <% toolbar.with_section do %>
+          <%= lookbook_render :tabs, alpine_data: "store", id: "#{id}-drawer-tabs" do |tabs| %>
+            <%= panels.each do |panel| %>
+              <% tabs.with_tab name: panel.name,
+                label: panel.label,
+                hotkey: panel.hotkey,
+                disabled: panel.disabled %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+
+      <div class="bg-lookbook-drawer-bg">      
+        <%= lookbook_render :tab_panels, alpine_data: "store", id: "{id}-drawer-panels" do |tabs| %>
+          <% panels.each do |panel| %>
+            <% tabs.with_panel name: panel.name do %>
+              <%= lookbook_render :inspector_panel, name: panel.name do %>
+                <%= render panel.partial, **data, panel: panel, **panel.locals %>
+              <% end %>
+            <% end %>
+          <% end %>
+        <% end %>
+      </div>
+    </section>
+  <% end %>
+<% end %>
+
+

data/app/components/lookbook/embed/inspector/component.js

@@ -0,0 +1,46 @@
+import "iframe-resizer/js/iframeResizer";
+
+export default function embedInspectorComponent(id, embedStore) {
+  if (!embedStore[id]) {
+    embedStore[id] = { width: "100%", height: "100%" };
+  }
+
+  return {
+    iframe: null,
+
+    viewportHeight: 0,
+
+    targetPath: window.location.pathname,
+
+    get viewportCssHeight() {
+      return this.viewportHeight ? `${this.viewportHeight}px` : "100%";
+    },
+
+    get store() {
+      return embedStore[id];
+    },
+
+    init() {
+      const onResized = this.onResized.bind(this);
+
+      this.iframe = this.$el.querySelector("iframe");
+      window.iFrameResize({ onResized, checkOrigin: false }, this.iframe);
+
+      this.$watch("targetPath", (value) => this.switchTarget(value));
+    },
+
+    switchTarget(newTargetPath) {
+      this.navigateTo(`${newTargetPath}${window.location.search}`);
+    },
+
+    onResized({ height }) {
+      if (height) {
+        this.viewportHeight = height;
+      }
+    },
+
+    resizeIframe() {
+      this.iframe.iFrameResizer.resize();
+    },
+  };
+}

data/app/components/lookbook/embed/inspector/component.rb

@@ -0,0 +1,64 @@
+module Lookbook
+  class Embed::Inspector::Component < Lookbook::BaseComponent
+    attr_reader :target, :context, :scenarios, :panels, :options, :actions
+
+    def initialize(target:, context: nil, options: nil, scenarios: nil, panels: nil, actions: nil, **html_attrs)
+      @target = target
+      @context = context.to_h
+      @options = options.to_h
+      @panels = Array(panels)
+      @actions = Array(actions).map(&:to_sym)
+      @scenarios = Array(scenarios)
+      super(**html_attrs)
+    end
+
+    def id
+      Utils.id(
+        "embed-inspector",
+        "#{scenarios.map(&:name).join}#{options.to_json}#{actions.to_json}#{panels.to_json}".hash
+      )
+    end
+
+    def data
+      context.fetch(:data, Store.new)
+    end
+
+    def params
+      context.fetch(:params, {}).to_h
+    end
+
+    def dynamic_display_options
+      context.fetch(:dynamic_display_options, {}).to_h
+    end
+
+    def static_display_options
+      context.fetch(:static_display_options, {}).to_h
+    end
+
+    def display_action?(name)
+      actions.include?(name)
+    end
+
+    def scenario_select_options
+      scenarios.map { |scenario| [scenario.label, helpers.lookbook_embed_path(scenario.path)] }
+    end
+
+    def display_option_controls?
+      options.fetch(:display_option_controls, true)
+    end
+
+    def drawer?
+      panels.any?
+    end
+
+    protected
+
+    def alpine_data
+      [alpine_encode(id), "$store.pages.embeds"].join(",")
+    end
+
+    def alpine_component
+      "embedInspectorComponent"
+    end
+  end
+end

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

@@ -0,0 +1,12 @@
+@layer components {
+  [data-component="embed-code-dropdown"] {
+    & [data-component="code"] {
+      @apply p-0;
+    }
+
+    & pre.code.highlight {
+      @apply overflow-hidden whitespace-normal p-0;
+      font-size: 11px;
+    }
+  }
+}

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

@@ -0,0 +1,19 @@
+<%= render_component_tag class:"p-3 w-[320px]" do %>  
+  <h4 class="text-[11px] uppercase tracking-wider mb-2 font-bold">Preview embed code</h4>
+
+  <p class="text-xs text-gray-600 mb-3">This code can be used to embed this preview in Lookbook pages or on external sites.</p>
+
+  <div class="border-t border-lookbook-dropdown-divider pt-3 pb-3">
+    <%= code :html do %><%= embed_code %><% end %>
+  </div>
+
+  <%= lookbook_render :text_button, "@click.stop.prevent": "copyEmbedCode", ":disabled": "copied" do |button| %>
+    <% button.with_icon name: :copy, size: 3, "x-show": "!copied", "x-cloak": true %>
+    <% button.with_icon name: :check, size: 3, "x-show": "copied", "x-cloak": true %>
+    <span x-text="copied ? 'Copied!' : 'Copy embed code'"></span>    
+  <% end %>
+
+  <div class="hidden" x-ref="copyTarget">
+    <%= escape_once embed_code %>
+  </div>
+<% end %>

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

@@ -0,0 +1,26 @@
+import { decodeEntities } from "@helpers/string";
+
+export default function embedCodeDropdownComponent() {
+  let copyTimeout = null;
+
+  return {
+    copied: false,
+
+    copyEmbedCode() {
+      this.$nextTick(async () => {
+        const content = decodeEntities(this.$refs.copyTarget.innerHTML.trim());
+
+        await window.navigator.clipboard.writeText(content);
+        this.copied = true;
+
+        if (copyTimeout) {
+          clearTimeout(copyTimeout);
+        }
+
+        copyTimeout = setTimeout(() => {
+          this.copied = false;
+        }, 2000);
+      });
+    },
+  };
+}

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

@@ -0,0 +1,41 @@
+module Lookbook
+  class EmbedCodeDropdown::Component < Lookbook::BaseComponent
+    attr_reader :preview, :pages, :params, :target
+
+    def initialize(preview:, target:, pages:, params:, **html_attrs)
+      @preview = preview
+      @target = target
+      @pages = pages
+      @params = params.deep_symbolize_keys
+      super(**html_attrs)
+    end
+
+    def app_path
+      helpers.lookbook_home_url
+    end
+
+    def preview_name
+      preview.preview_class_name
+    end
+
+    def external_embed_params
+      permitted = params.select { |key, val| key.to_s != "_display" }
+      permitted.transform_keys! { |key| "param-#{key}" }
+    end
+
+    def embed_code
+      embed_tag = content_tag("lookbook-embed",
+        app: app_path,
+        preview: preview_name,
+        scenario: target.name,
+        **external_embed_params) { "" }
+      escape_once embed_tag
+    end
+
+    private
+
+    def alpine_component
+      "embedCodeDropdownComponent"
+    end
+  end
+end

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

@@ -1,6 +1,6 @@
 <%= 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 %>
+    <% toolbar.with_section class: "mt-[-2px]", padded: true do %>
       <% if branding.present? %>
         <a
           <% if landing_path %>href="<%= landing_path %>"<% end %>    
@@ -10,8 +10,7 @@
       <% end %>
     <% 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,14 +20,16 @@
 
       <%= 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,
+            class: "opacity-50 hover:opacity-100 transition !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) %>
+              <%= debug_data %>
             <% end %>
-            <% button.with_dropdown({}).with_content(menu) %>
+            <% button.with_dropdown.with_content(menu) %>
           <% end %>
         <% end %>
 

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

@@ -8,7 +8,11 @@ module Lookbook
     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.html.erb

@@ -1,5 +1,5 @@
 <%= render_component_tag :i, style: "height: #{size_rems}; width: #{size_rems}; #{@html_attrs[:style]}" do %>
   <svg>
-    <use :href="`/lookbook-assets/feather-sprite.svg#${iconName}`" x-cloak />
+    <use :href="`/lookbook-assets/img/lucide-sprite.svg#${iconName}`" x-cloak />
   </svg>
 <% 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, 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/nav/component.html.erb

@@ -25,5 +25,4 @@
       </div>
     <% end %>
   </div>
-
 <% end %>

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

@@ -3,7 +3,7 @@ module Lookbook
     ICONS = {
       page: :file,
       preview: :layers,
-      example: :eye,
+      scenario: :eye,
       group: :eye
     }.freeze
 
@@ -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.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/params/editor/component.rb

@@ -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/prose/component.rb

@@ -1,7 +1,5 @@
 module Lookbook
   class Prose::Component < Lookbook::BaseComponent
-    include Lookbook::OutputHelper
-
     def initialize(size: :md, markdown: true, **html_attrs)
       @size = size
       @markdown = markdown
@@ -9,7 +7,7 @@ module Lookbook
     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

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>

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

@@ -49,7 +49,7 @@ export default function tabsComponent(store) {
         const initialTab = initial
           ? this.tabs.find((t) => this._getRef(t) === initial)
           : this.tabs[0];
-        this.selectTab(initialTab, true);
+        this.selectTab(initialTab || this.tabs[0], true);
 
         this.parentObserver = observeSize(
           this.$root.parentElement,

data/app/components/lookbook/tag_component.rb

@@ -1,6 +1,7 @@
 module Lookbook
   class TagComponent < ViewComponent::Base
-    include Lookbook::ComponentHelper
+    include Lookbook::UiElementsHelper
+    include Lookbook::ClassNamesHelper if Engine.runtime_context.rails_older_than?("6.1.0")
 
     def initialize(tag: :div, name: nil, cloak: false, **html_attrs)
       @tag = tag

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

@@ -0,0 +1,26 @@
+<%= render_component_tag tag_name,
+  id: id,
+  href: href,
+  class: [
+    "block px-2 py-1.5 text-xs rounded-md bg-lookbook-button-bg text-lookbook-button-text w-full transition focus:outline-none focus-visible:outline-none",
+    {
+      "hover:bg-lookbook-button-bg-hover": !disabled,
+      "cursor-[not-allowed] opacity-50": disabled
+    }
+  ],
+  disabled: disabled,
+  aria: { label: tooltip } do %>
+
+  <span class="flex items-center space-x-2 justify-center">
+    <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 content %>
+      <span><%= content %></span>
+    <% end %>
+  </span>
+
+  <% if tooltip %>
+    <label class="hidden" x-ref="tooltip"><%= tooltip %></label>
+  <% end %>
+<% end %>