gitlab-lookbook 2.3.14

data/app/components/lookbook/display_options/field/component.rb

@@ -0,0 +1,28 @@
+module Lookbook
+  module DisplayOptions
+    class Field::Component < Lookbook::BaseComponent
+      attr_reader :name, :value
+
+      def initialize(name:, opts:, value:, **html_attrs)
+        @name = name
+        @opts = opts
+        @value = value
+        super(**html_attrs)
+      end
+
+      def choices
+        @opts.is_a?(Hash) ? @opts[:choices].to_a : @opts
+      end
+
+      protected
+
+      def alpine_data
+        "{name: '#{name}', value: '#{value}'}"
+      end
+
+      def alpine_component
+        "displayOptionsFieldComponent"
+      end
+    end
+  end
+end

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

@@ -0,0 +1,6 @@
+<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

@@ -0,0 +1,31 @@
+module Lookbook
+  class Embed::Component < Lookbook::BaseComponent
+    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
+
+    def preview_class
+      preview.preview_class.name
+    end
+
+    def panels
+      options.fetch(:panels, []).map(&:to_s)
+    end
+
+    def actions
+      options.fetch(:actions, ACTIONS).map(&:to_s)
+    end
+
+    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,117 @@
+<%= 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.lookup_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.lookup_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.lookup_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
+      x-on:viewport:resize-progress="resizeIframe"
+      x-on:viewport:resize-complete="resizeIframe"
+      x-ref="viewportWrapper"> 
+      <%= lookbook_render :viewport,
+        iframe_id: "#{id}-viewport",
+        src: helpers.lookbook_preview_path(target.lookup_path, request.query_parameters.merge(lookbook_timestamp: Time.now, 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 %>
+
+         <% toolbar.with_section align: :right,  class: "flex-none relative z-10" do %>
+          <%= lookbook_render :button_group do |group| %>
+            <%= panels.select { |p| !p.disabled && p.copy }.each do |panel| %>
+              <% group.with_button id: "copy-panel-contents-button-#{panel.name}",
+                icon: :copy,
+                tooltip: "Copy panel contents",
+                copy: !!panel.copy,
+                "x-show": "store.activeTab === '#{panel.name}'",
+                cloak: true do %>
+                <%= panel.copy ? panel.copy : "" %>
+                <% end %>
+            <% 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,58 @@
+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;
+
+        // Notify parent window of height resize so the parent window can implement
+        // its own iframe resize strategy if not using the Lookbook JS script.
+        // Uses Embedly-compatible postMessage format: https://docs.embed.ly/reference/provider-height-resizing
+        window.parent.postMessage(
+          JSON.stringify({
+            src: window.location.toString(),
+            context: "iframe.resize",
+            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.lookup_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,19 @@
+@layer components {
+  [data-component="embed-code-dropdown"] {
+    & [data-component="code"] {
+      @apply px-2 py-2 bg-lookbook-base-50 border border-dashed border-lookbook-divider;
+    }
+
+    & pre.code.highlight {
+      @apply overflow-hidden whitespace-normal p-0;
+      font-size: 11px;
+    }
+
+    .line-clamp-2 {
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+    }
+  }
+}

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

@@ -0,0 +1,64 @@
+<%= render_component_tag class:"p-3 w-[360px] text-[11px] text-gray-600" do %>  
+
+  <!-- p class="mb-3">
+    Embed this preview in Lookbook pages or externally using the code or iframe URL below.
+  </!-->
+
+  <div class="mb-4 space-y-2">
+
+    <header class="flex items-center">
+      <h4 class=" uppercase tracking-wider font-bold">Embed Code</h4>
+      <span class="ml-auto" >
+        <a
+          href="https://lookbook.build/guide/sharing/embeds"
+          target="_blank"
+          title="Help"
+          class="text-lookbook-prose underline opacity-70 hover:opacity-100">
+          what's this?
+        </a>
+      </span>
+    </header>
+
+    <div class="relative group">
+      <%= code :html do %><%= embed_code %><% end %>
+
+      <span class="absolute top-px right-px bg-lookbook-base-50 rounded-md transition-opacity duration-300 opacity-0 group-hover:opacity-100">
+        <%= lookbook_render :copy_button, icon: :copy, tooltip: "Copy" do %>
+          <%= escape_once embed_code %>
+        <% end %>
+      </span>
+    </div>
+    
+  </div>
+
+  <div class="space-y-2">
+
+    <header class="flex items-center">
+      <h4 class="text-[11px] uppercase tracking-wider font-bold">Embed URL</h4>
+      <span class="ml-auto" >
+        <a
+          href="https://lookbook.build/guide/sharing/embeds#other-services"
+          target="_blank"
+          title="Help"
+          class="text-lookbook-prose underline opacity-70 hover:opacity-100">
+          what's this?
+        </a>
+      </span>
+    </header>
+
+    <div class="relative group">
+      <div class="font-mono bg-lookbook-base-50 px-2 py-2 break-all border border-dashed border-lookbook-divider">
+        <span class="line-clamp-2">
+          <%= embed_url %>
+        </span>
+      </div>
+      
+      <span class="absolute top-px right-px bg-lookbook-base-50 rounded-md transition-opacity duration-300 opacity-0 group-hover:opacity-100">
+        <%= lookbook_render :copy_button, icon: :copy, tooltip: "Copy" do %><%= embed_url %><% end %>
+      </span>
+    </div>
+
+  </div>
+      
+
+<% end %>

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

@@ -0,0 +1,3 @@
+export default function embedCodeDropdownComponent() {
+  return {};
+}

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

@@ -0,0 +1,51 @@
+module Lookbook
+  class EmbedCodeDropdown::Component < Lookbook::BaseComponent
+    attr_reader :preview, :pages, :params, :target, :policy
+
+    def initialize(preview:, target:, pages:, params:, policy:, **html_attrs)
+      @preview = preview
+      @target = target
+      @pages = pages
+      @policy = policy
+      @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
+
+    def embed_url
+      props = {
+        preview: preview_name,
+        scenario: target.name,
+        **external_embed_params.transform_keys { |k| k.tr("-", "_") }
+      }.to_json
+      "#{app_path}embed?props=#{CGI.escape(props)}"
+    end
+
+    private
+
+    def alpine_component
+      "embedCodeDropdownComponent"
+    end
+  end
+end

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/filter/component.html.erb

@@ -0,0 +1,17 @@
+<%= render_component_tag do %>
+  <div class="relative">
+    <input
+      type="text"
+      class="form-input text-sm"
+      placeholder="<%== @placeholder %>"
+      x-ref="input"
+      x-model="<%= @model %>"
+      x-effect="$dispatch('filter:change', { text, filter: this })"
+      x-on:keydown.esc.stop="clear"
+      x-on:keydown.f.window="if (!($event.shiftKey || $event.metaKey || $event.ctrlKey || $event.altKey)) { focus(); $event.preventDefault(); $event.stopPropagation(); }"
+      x-on:keydown.stop>
+      <button class="text-lookbook-icon-button-stroke hover:text-lookbook-icon-button-stroke-hover focus:ring-0 focus:outline-none absolute top-1/2 right-3 -translate-y-1/2" x-on:click="clear" x-bind:class="{hidden: !active}">
+        <%= icon  :x, size: 4 %>
+      </button>
+  </div>
+<% end %>

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

@@ -0,0 +1,21 @@
+export default function filterComponent(store) {
+  return {
+    focussed: false,
+    get active() {
+      return store.active;
+    },
+    get text() {
+      return store.text;
+    },
+    clear() {
+      if (store.raw === "") {
+        this.$refs.input.blur();
+      } else {
+        store.raw = "";
+      }
+    },
+    focus() {
+      this.$refs.input.focus();
+    },
+  };
+}

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

@@ -0,0 +1,15 @@
+module Lookbook
+  class Filter::Component < Lookbook::BaseComponent
+    def initialize(store: nil, placeholder: "Type to filter&hellip;", **html_attrs)
+      @model = store.nil? ? "{}" : "#{store}.raw"
+      @placeholder = placeholder
+      super(alpine_data: store, **html_attrs)
+    end
+
+    protected
+
+    def alpine_component
+      "filterComponent"
+    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

@@ -0,0 +1,58 @@
+<%= 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 %>
+      <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 %>
+      <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>
+          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+        </svg>
+      </div>
+
+      <%= lookbook_render :button_group do |group| %>
+        <% if @debug_menu %>
+          <% 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/lookbook-hq/lookbook" do %>
+              <%= debug_data %>
+            <% end %>
+            <% button.with_dropdown.with_content(menu) %>
+          <% end %>
+        <% end %>
+
+        <% group.with_button icon: :menu,
+          "x-on:click.stop": "toggleSidebar",
+          "x-show": "$store.layout.mobile && sidebarHidden",
+          class: "!text-lookbook-header-text" %>
+
+        <% group.with_button icon: :x,
+          "x-on:click.stop": "toggleSidebar",
+          "x-show": "$store.layout.mobile && !sidebarHidden",
+          "x-on:keydown.esc.window": "closeMobileSidebar",
+          class: "!text-lookbook-header-text" %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+<% end %>

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

@@ -0,0 +1,20 @@
+module Lookbook
+  class Header::Component < Lookbook::BaseComponent
+    attr_reader :project_logo, :project_name
+
+    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.lookbook_landing_path if defined? helpers.lookbook_landing_path
+    end
+
+    def debug_data
+      JSON.pretty_generate(Lookbook.debug_data)
+    end
+  end
+end