gitlab-lookbook 2.3.14

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

@@ -0,0 +1,28 @@
+module Lookbook
+  class Tabs::Component < Lookbook::BaseComponent
+    renders_many :tabs, ->(**attrs) do
+      @tab_counter += 1
+      attrs[:name] ||= "tab-#{@tab_counter}"
+      attrs[:position] ||= @tab_counter
+      attrs[:theme] ||= @theme
+      with_dropdown_tab(**attrs)
+      Lookbook::Tabs::Tab::Component.new(**attrs)
+    end
+
+    renders_many :dropdown_tabs, ->(name:, **attrs) do
+      Lookbook::Tabs::DropdownTab::Component.new(name: "dropdown-#{name}", **attrs)
+    end
+
+    def initialize(theme: :toolbar, **html_attrs)
+      @theme = theme
+      @tab_counter = 0
+      super(**html_attrs)
+    end
+
+    protected
+
+    def alpine_component
+      "tabsComponent"
+    end
+  end
+end

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

@@ -0,0 +1,21 @@
+<%= render_component_tag :button,
+  "x-ref": @name,
+  "data-tab": @name,
+  class: [
+    "whitespace-nowrap px-4 border-l-2 cursor-pointer block w-full text-left",
+    {
+      "py-2": @theme == :toolbar,
+      "py-2 text-base": @theme == :page,
+    }
+  ],
+  "x-bind:class": "{
+    'border-lookbook-tabs-border-active': isSelected($el),
+    'border-transparent text-lookbook-tabs-text hover:text-lookbook-tabs-text-hover': !isSelected($el),
+    'hidden': visibleTabsCount >= #{@position}
+  }",
+  "x-on:click.prevent": "selectTab($el)",
+  data: {
+    disabled: @disabled
+  } do %>
+  <%= label %>
+<% end %>

data/app/components/lookbook/tabs/dropdown_tab/component.rb

@@ -0,0 +1,17 @@
+module Lookbook
+  class Tabs::DropdownTab::Component < Lookbook::BaseComponent
+    def initialize(name:, label: nil, hotkey: nil, disabled: nil, position: 0, theme: :toolbar, **html_attrs)
+      @name = name
+      @label = label
+      @hotkey = hotkey
+      @disabled = disabled
+      @position = position
+      @theme = theme
+      super(**html_attrs)
+    end
+
+    def label
+      @label.presence || content || @name.titleize
+    end
+  end
+end

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

@@ -0,0 +1,25 @@
+<%= render_component_tag :button,
+  id: @id,
+  "x-ref": @name,
+  "data-tab": @name,
+  class: [
+    "whitespace-nowrap cursor-pointer pt-2.5 pb-1.5 border-b-2",
+    {
+      "px-1": @theme == :toolbar,
+      "px-2 text-lg relative -bottom-px": @theme == :page,
+    }
+  ],
+  "x-bind:class": "{
+    'border-lookbook-tabs-border-active': isSelected($el),
+    'border-transparent text-lookbook-tabs-text hover:text-lookbook-tabs-text-hover': !isSelected($el),
+    '!text-lookbook-tabs-text-disabled': isDisabled($el),
+    'invisible pointer-events-none relative z-[-1]': visibleTabsCount < #{@position}
+  }",
+  "x-on:click.prevent": "selectTab($el)",
+  "x-on:keydown.window.prevent.#{@hotkey}": @hotkey.present? ? "$el.click()" : nil,
+  data: {
+    disabled: @disabled
+  },
+  cloak: true do %>
+  <%== label %>
+<% end %>

data/app/components/lookbook/tabs/tab/component.rb

@@ -0,0 +1,17 @@
+module Lookbook
+  class Tabs::Tab::Component < Lookbook::BaseComponent
+    def initialize(name:, label: nil, hotkey: nil, disabled: nil, position: 0, theme: :toolbar, **html_attrs)
+      @name = name
+      @label = label
+      @hotkey = hotkey
+      @disabled = disabled
+      @position = position
+      @theme = theme
+      super(**html_attrs)
+    end
+
+    def label
+      @label.presence || content || @name.titleize
+    end
+  end
+end

data/app/components/lookbook/tag_component.rb

@@ -0,0 +1,33 @@
+module Lookbook
+  class TagComponent < ViewComponent::Base
+    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
+      html_attrs[:data] ||= {}
+      html_attrs[:data][:component] = name if name.present?
+      html_attrs[:"x-cloak"] = true if cloak == true
+      html_attrs[self.class.escape_attribute_key] = false
+      @html_attrs = html_attrs
+    end
+
+    def call
+      @html_attrs[:class] = class_names(@html_attrs[:class])
+      tag.public_send(@tag.to_sym, **@html_attrs) do
+        content
+      end
+    end
+
+    def self.escape_attribute_key
+      @escape_attribute_key ||= (
+        (
+          Gem::Version.new(Rails.version) < Gem::Version.new("5.2.7.1")
+        ) || (
+          Gem::Version.new(Rails.version) >= Gem::Version.new("6") &&
+          Gem::Version.new(Rails.version) < Gem::Version.new("6.1.5.1")
+        )
+      ) ? :escape_attributes : :escape
+    end
+  end
+end

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, "x-bind: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 %>

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

@@ -0,0 +1,42 @@
+module Lookbook
+  class TextButton::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 tag_name
+      href.present? ? :a : :button
+    end
+
+    protected
+
+    def alpine_component
+      "buttonComponent"
+    end
+  end
+end

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

@@ -0,0 +1,16 @@
+@layer components {
+  [data-component="toolbar"] {
+    & .toolbar-sections > * {
+      @apply h-10 flex items-center whitespace-nowrap border-lookbook-toolbar-divider;
+    }
+
+    & [data-component="button-group"] {
+      padding-left: 0.45rem;
+      padding-right: 0.45rem;
+    }
+
+    & [data-component="tabs"] {
+      @apply relative -mb-px px-4;
+    }
+  }
+}

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

@@ -0,0 +1,5 @@
+<%= render_component_tag class: "h-10 border-b border-lookbook-divider w-full flex items-center text-sm flex-none bg-lookbook-toolbar-bg" do %>
+  <div class="toolbar-sections flex items-stretch w-full h-10">
+    <%= safe_join(sections) %>
+  </div>
+<% end %>

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

@@ -0,0 +1,26 @@
+module Lookbook
+  class Toolbar::Component < Lookbook::BaseComponent
+    DIVIDE_CLASSES = {
+      left: "border-l",
+      right: "border-r"
+    }
+
+    ALIGN_CLASSES = {
+      right: "ml-auto",
+      left: "mr-auto",
+      middle: "mx-auto"
+    }
+
+    renders_many :sections, ->(align: :nil, divide: nil, padded: false, **attrs, &block) do
+      Lookbook::TagComponent.new class: [
+        "min-w-0",
+        {
+          "px-4": padded,
+          "#{DIVIDE_CLASSES[divide]}": divide.present?,
+          "#{ALIGN_CLASSES[align]}": align.present?
+        },
+        attrs[:class]
+      ], **attrs.except(:class), &block
+    end
+  end
+end

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

@@ -0,0 +1,11 @@
+@layer components {
+  [data-component="viewport"] {
+    background-color: #ffffff;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='%23f3f3f3' fill-opacity='1'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E");
+
+    .resize-handle {
+      @apply flex items-center justify-center h-full w-full border-lookbook-divider bg-lookbook-viewport-handle hover:bg-lookbook-viewport-handle-hover hover:bg-opacity-20;
+      @apply text-lookbook-viewport-handle-icon-stroke hover:text-lookbook-viewport-handle-icon-stroke-hover transition select-none touch-none;
+    }
+  }
+}

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

@@ -0,0 +1,69 @@
+<%= render_component_tag class: "h-full min-h-0 w-full overflow-hidden relative", "@viewport:reload.window": "reloadIframe" do %>
+  <div class="absolute border border-lookbook-divider w-full h-full"></div>
+  <div
+    x-ref="wrapper"
+    class="mx-auto h-full w-full border border-b-0 border-lookbook-divider relative"
+    :style="`<% if @resize_width %>max-width: ${maxWidth};<% end %>
+      <% if @resize_height && @max_height.present? %>
+        max-height: min(${maxHeight}, <%= @max_height %>px);
+      <% elsif @resize_height %>
+        max-height: ${maxHeight};
+      <% elsif @max_height.present? %>
+        max-height: <%= @max_height %>px;
+      <% end %>`">
+  
+    <div
+      class="absolute z-10 pointer-events-none pr-1 pl-2 pt-1.5 pb-1 bg-gray-100/80 rounded-tl-sm top-0 <%= @resize_width ? "right-[18px]" : "right-0" %>"
+      x-ref="dimensions"
+      x-show="store.resizing"
+      x-cloak
+      x-transition:enter.opacity.duration.300ms
+      x-transition:leave.opacity.duration.500ms.delay.600ms>
+      <%= lookbook_render :dimensions_display, target: "[data-component=viewport] iframe" %>
+    </div>
+
+    <div
+      class="grid bg-white relative -inset-px <%= "grid-cols-[1fr_17px]" if @resize_width %> <%= "grid-rows-[1fr_17px]" if @resize_height %>"
+      style="width: calc(100% + 2px); height: calc(100% + 1px); <%= "max-height: #{@max_height}px;" if @max_height.present? %>">
+      <iframe seamless<%= " id=#{@iframe_id}" if @iframe_id.present? %>
+        x-ref="iframe"
+        class="bg-lookbook-page-bg h-full w-full border border-lookbook-divider"
+        x-bind:class="{ 'pointer-events-none': reflowing }"
+        style="<%= "max-height: #{@max_height}px;" if @max_height.present? %>"
+        src="<%= @src %>"
+        frameborder="0"
+        x-on:load="$dispatch('viewport:loaded', {viewport: this})"
+        title="viewport"></iframe>
+        <% if @resize_width %>
+          <div
+            class="resize-handle border-r border-t border-lookbook-divider cursor-[col-resize] <%= "border-b" unless @resize_height %>"
+            x-on:pointerdown="onResizeWidthStart"
+            x-on:dblclick="toggleFullWidth">
+            <svg class="h-4 w-4 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
+              <path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
+            </svg>
+          </div>
+        <% end %>
+        <% if @resize_height %>
+          <div
+            class="resize-handle border-b border-l border-lookbook-divider cursor-[row-resize] <%= "border-r" unless @resize_width %>"
+            x-on:pointerdown="onResizeHeightStart"
+            x-on:dblclick="toggleFullHeight">
+            <svg class="h-4 w-4 pointer-events-none rotate-90" fill="currentColor" viewBox="0 0 24 24" >
+              <path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
+            </svg>
+          </div>
+        <% end %>
+        <% if @resize_height && @resize_width %>
+          <div
+            class="resize-handle border-r border-b border-lookbook-divider cursor-[nwse-resize]"
+            x-on:pointerdown="onResizeStart"
+            x-on:dblclick="toggleFullSize">
+            <svg class="h-3.5 w-3.5 pointer-events-none rotate-45 relative -top-px -left-px" fill="currentColor" viewBox="0 0 24 24" >
+              <path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
+            </svg>
+          </div>
+        <% end %>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,150 @@
+export default function viewportComponent(store) {
+  store = store || { width: "100%", height: "100%" };
+  store.resizing = false;
+
+  return {
+    store,
+
+    get maxWidth() {
+      return this.store.width === "100%" ? "100%" : `${store.width}px`;
+    },
+
+    get maxHeight() {
+      return this.store.height === "100%" ? "100%" : `${store.height}px`;
+    },
+
+    get parentWidth() {
+      return Math.round(this.$root.clientWidth);
+    },
+
+    get parentHeight() {
+      return Math.round(this.$root.clientHeight);
+    },
+
+    get reflowing() {
+      return this.$store.layout.reflowing;
+    },
+
+    reloadIframe() {
+      this.$refs.iframe.contentWindow.location.reload();
+    },
+
+    start() {
+      this.$dispatch("viewport:resize-start", this._resizeData);
+      this.$store.layout.reflowing = true;
+      this.store.resizing = true;
+    },
+
+    end() {
+      this.$store.layout.reflowing = false;
+      this.store.resizing = false;
+      this.$dispatch("viewport:resize-complete", this._resizeData);
+    },
+
+    onResizeStart(e) {
+      this.onResizeWidthStart(e);
+      this.onResizeHeightStart(e);
+    },
+
+    toggleFullSize() {
+      const { height, width } = store;
+      if (height === "100%" && width === "100%") {
+        this.toggleFullHeight();
+        this.toggleFullWidth();
+      } else {
+        if (height !== "100%") this.toggleFullHeight();
+        if (width !== "100%") this.toggleFullWidth();
+      }
+    },
+
+    onResizeWidth(e) {
+      const width =
+        this.resizeStartWidth - (this.resizeStartPositionX - e.pageX) * 2;
+      const boundedWidth = Math.min(
+        Math.max(Math.round(width), 200),
+        this.parentWidth
+      );
+      this.store.width =
+        boundedWidth === this.parentWidth ? "100%" : boundedWidth;
+      this.$dispatch("viewport:resize-progress", this._resizeData);
+    },
+
+    onResizeWidthStart(e) {
+      this.start();
+      this.onResizeWidth = this.onResizeWidth.bind(this);
+      this.onResizeWidthEnd = this.onResizeWidthEnd.bind(this);
+      this.resizeStartPositionX = e.pageX;
+      this.resizeStartWidth = this.$refs.wrapper.clientWidth;
+      window.addEventListener("pointermove", this.onResizeWidth);
+      window.addEventListener("pointerup", this.onResizeWidthEnd);
+    },
+
+    onResizeWidthEnd() {
+      window.removeEventListener("pointermove", this.onResizeWidth);
+      window.removeEventListener("pointerup", this.onResizeWidthEnd);
+      this.end();
+    },
+
+    toggleFullWidth() {
+      this.$dispatch("viewport:resize-start", this._resizeData);
+      const { width, lastWidth } = store;
+      if (width === "100%" && lastWidth) {
+        this.store.width = lastWidth;
+      } else {
+        this.store.lastWidth = width;
+        this.store.width = "100%";
+      }
+      this.$dispatch("viewport:resize-complete", this._resizeData);
+    },
+
+    onResizeHeight(e) {
+      const height =
+        this.resizeStartHeight - (this.resizeStartPositionY - e.pageY);
+      const boundedHeight = Math.min(
+        Math.max(Math.round(height), 200),
+        this.parentHeight
+      );
+      this.store.height =
+        boundedHeight === this.parentHeight ? "100%" : boundedHeight;
+      this.$dispatch("viewport:resize-progress", this._resizeData);
+    },
+
+    onResizeHeightStart(e) {
+      this.start();
+      this.onResizeHeight = this.onResizeHeight.bind(this);
+      this.onResizeHeightEnd = this.onResizeHeightEnd.bind(this);
+      this.resizeStartPositionY = e.pageY;
+      this.resizeStartHeight = this.$refs.wrapper.clientHeight;
+      window.addEventListener("pointermove", this.onResizeHeight);
+      window.addEventListener("pointerup", this.onResizeHeightEnd);
+    },
+
+    onResizeHeightEnd() {
+      window.removeEventListener("pointermove", this.onResizeHeight);
+      window.removeEventListener("pointerup", this.onResizeHeightEnd);
+      this.end();
+    },
+
+    toggleFullHeight() {
+      this.$dispatch("viewport:resize-start", this._resizeData);
+      const { height, lastHeight } = store;
+      if (height === "100%" && lastHeight) {
+        this.store.height = lastHeight;
+      } else {
+        this.store.lastHeight = height;
+        this.store.height = "100%";
+      }
+      this.$dispatch("viewport:resize-complete", this._resizeData);
+    },
+
+    // protected
+
+    get _resizeData() {
+      return {
+        width: this.store.width,
+        height: this.store.height,
+        viewport: this,
+      };
+    },
+  };
+}

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

@@ -0,0 +1,18 @@
+module Lookbook
+  class Viewport::Component < Lookbook::BaseComponent
+    def initialize(src:, resize_height: true, resize_width: true, max_height: nil, iframe_id: nil, **html_attrs)
+      @src = src
+      @resize_height = resize_height
+      @resize_width = resize_width
+      @max_height = max_height
+      @iframe_id = iframe_id
+      super(**html_attrs)
+    end
+
+    protected
+
+    def alpine_component
+      "viewportComponent"
+    end
+  end
+end

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

@@ -0,0 +1,123 @@
+module Lookbook
+  module TargetableConcern
+    extend ActiveSupport::Concern
+
+    included do
+      before_action :lookup_entities, only: [:show]
+      before_action :set_title
+      before_action :set_display_options
+      before_action :set_params
+    end
+
+    def set_title
+      @title = @target.present? ? [@target&.label, @preview&.label].compact.join(" :: ") : "Not found"
+    end
+
+    def lookup_entities
+      @target = Engine.previews.find_scenario_by_path(params[:path])
+      if @target.present?
+        @preview = @target.preview
+        if params[:path] == @preview&.lookup_path
+          redirect_to lookbook_inspect_path("#{params[:path]}/#{@preview.default_scenario.name}", params.permit!)
+        end
+      else
+        @preview = Engine.previews.find_by_path(params[:path])
+        if @preview.present?
+          default_scenario = @preview.default_scenario
+          redirect_to lookbook_inspect_path(default_scenario.lookup_path, params.permit!) if default_scenario
+        end
+      end
+    end
+
+    def set_display_options
+      @dynamic_display_options = []
+      @static_display_options = []
+
+      if @target.present?
+        opts = @target.display_options
+        @dynamic_display_options = opts.select { _2.is_a?(Array) || _2.is_a?(Hash) }
+        @static_display_options = opts.except(*@dynamic_display_options.keys)
+
+        if params[:_display]
+          display_params = SearchParamParser.call(params[:_display])
+          display_params.each do |name, value|
+            if @dynamic_display_options.key?(name)
+              cookies["lookbook-display-#{name}"] = value.is_a?(Array) ? value[1] : value
+            end
+          end
+        end
+
+        @dynamic_display_options.each do |name, opts|
+          choices = opts.is_a?(Hash) ? opts[:choices].to_a : opts
+          value = choices.first.is_a?(Array) ? choices.first[1] : choices.first
+          @static_display_options[name] ||= cookies.fetch("lookbook-display-#{name}", value)
+        end
+
+        unless params[:_display]
+          display_params = @dynamic_display_options.each_with_object({}) do |(name, opts), hash|
+            hash[name] = @static_display_options[name]
+          end
+          request.query_parameters[:_display] = SearchParamEncoder.call(display_params)
+        end
+      end
+    end
+
+    def set_params
+      @params = []
+
+      if @target
+        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]
+          )
+        end
+
+        # cast known param values to correct type
+        @params.each do |param|
+          if preview_controller.params.key?(param.name)
+            preview_controller.params[param.name] = param.cast_value
+          end
+        end
+
+        # set display and data params for use in preview layouts
+        preview_controller.params[:lookbook] = {
+          display: @static_display_options,
+          data: Lookbook.data
+        }
+      end
+
+      preview_controller.params.permit!
+    end
+
+    def inspector_data
+      return @inspector_data if @inspector_data.present?
+
+      scenarios = @target ? @target.scenarios : []
+      rendered_scenarios = scenarios.map do |scenario|
+        output = preview_controller.process(:render_scenario_to_string, @preview, scenario)
+        RenderedScenarioEntity.new(scenario, output, preview_controller.params)
+      end
+
+      target = rendered_scenarios.find { |scenario| scenario.id == @target.id } || @target
+
+      @inspector_data ||= Lookbook::Store.new({
+        context: Store.new({params: @params, path: params[:path]}),
+        preview: @preview,
+        scenarios: rendered_scenarios,
+        examples: -> do
+          Lookbook.logger.warn("The `examples` panel variable has been renamed to `scenarios`. The `examples` variable will be removed in the next major release.")
+          rendered_scenarios
+        end,
+        target: target,
+        data: Lookbook.data,
+        app: Lookbook
+      })
+    end
+
+    def path_segments
+      params[:path].split("/")
+    end
+  end
+end

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

@@ -0,0 +1,30 @@
+module Lookbook
+  module WithPanelsConcern
+    extend ActiveSupport::Concern
+
+    included do
+      private
+
+      def main_panel_names
+        Lookbook.config.preview_inspector.main_panels
+      end
+
+      def drawer_panel_names
+        Lookbook.config.preview_inspector.drawer_panels
+      end
+
+      def main_panels
+        Engine.panels.get_panels(*main_panel_names).map do |config|
+          PanelStore.resolve_config(config, inspector_data)
+        end
+      end
+
+      def drawer_panels
+        panels = Engine.panels.get_panels(*drawer_panel_names)
+        panels.select { |config| !config.name.to_s.in?(main_panel_names) }.map do |config|
+          PanelStore.resolve_config(config, inspector_data)
+        end
+      end
+    end
+  end
+end