gitlab-lookbook 2.3.14

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

@@ -0,0 +1,12 @@
+import { observeSize } from "@helpers/layout";
+
+export default function paramsEditorComponent() {
+  return {
+    narrow: false,
+    init() {
+      observeSize(this.$el, ({ width }) => {
+        this.narrow = width < 500;
+      });
+    },
+  };
+}

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

@@ -0,0 +1,37 @@
+module Lookbook
+  module Params
+    class Editor::Component < Lookbook::BaseComponent
+      renders_many :fields, ->(**attrs) do
+        @field_count += 1
+        Lookbook::Params::Field::Component.new(**attrs, index: @field_count)
+      end
+
+      def initialize(**html_attrs)
+        @field_count = -1
+        @@input_styles = {}
+        super
+      end
+
+      def before_render
+        fields
+      end
+
+      def param_styles
+        @css_styles ||= @@input_styles.map do |input_name, styles|
+          styles.map { |s| "[data-param-input=#{input_name}] #{s}" }.join("\n")
+        end.join("\n")
+      end
+
+      def self.add_styles(input, styles)
+        @@input_styles = {} unless defined?(@@input_styles)
+        @@input_styles[input] ||= styles
+      end
+
+      protected
+
+      def alpine_component
+        "paramsEditorComponent"
+      end
+    end
+  end
+end

data/app/components/lookbook/params/field/component.css

@@ -0,0 +1,76 @@
+@layer components {
+  [data-component="params-editor"] {
+    table:not(.linear) {
+      thead {
+        tr {
+          @apply border-b border-lookbook-divider;
+        }
+
+        th {
+          @apply font-semibold py-4 px-4 align-middle text-left;
+        }
+
+        th.param-label {
+          width: 18%;
+        }
+
+        th.param-input {
+          width: 45%;
+        }
+      }
+
+      tbody {
+        tr + tr td {
+          @apply border-t border-lookbook-divider;
+        }
+
+        td {
+          @apply py-4 px-4 align-middle;
+        }
+
+        td.param-label {
+          @apply font-semibold;
+        }
+
+        .param-input-wrapper {
+          min-height: 38px;
+        }
+      }
+    }
+  }
+
+  [data-component="params-editor"] {
+    table.linear {
+      table,
+      tr,
+      td {
+        display: block;
+      }
+
+      thead,
+      th {
+        display: none;
+      }
+
+      tr:not(:last-child) {
+        @apply border-b border-lookbook-divider;
+      }
+
+      tr {
+        @apply space-y-3 py-4;
+      }
+
+      td {
+        @apply px-4 align-middle;
+      }
+
+      td.param-label {
+        @apply font-semibold;
+      }
+
+      td.param-description-empty {
+        @apply hidden;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,27 @@
+<%= render_component_tag :tr, "@keydown.stop": true do %>  
+  <td class="param-label">
+    <label for="param-<%= param.name %>">
+      <span class="mr-0.5"><%== param.label %></span>
+      <% if param.hint.present? %>
+        <span x-data="tooltipComponent" class="inline-block cursor-help relative top-[2px]">
+          <%= icon :help_circle, size: 3.5, class: "opacity-40 hover:opacity-100 transition" %>
+          <div class="hidden" x-ref="tooltip">
+            <%= param.hint %>
+          </div>
+        </span>
+      <% end %>
+    </label>
+  </td>
+  <td class="param-description <%= "param-description-empty" unless param.description %>">
+    <% if param.description %>
+      <p class="opacity-70"><%= param.description %></p>
+    <% else %>
+      <p class="italic opacity-40">&mdash;</p>
+    <% end %>
+  </td>
+  <td class="param-input">
+    <div class="param-input-wrapper">
+      <%= rendered_input %>
+    </div>
+  </td>
+<% end %>

data/app/components/lookbook/params/field/component.js

@@ -0,0 +1,7 @@
+export default function paramsFieldComponent() {
+  return {
+    get isNarrowLayout() {
+      return this.narrow || false;
+    },
+  };
+}

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

@@ -0,0 +1,46 @@
+module Lookbook
+  module Params
+    class Field::Component < Lookbook::BaseComponent
+      attr_reader :param, :rendered_input
+
+      def initialize(param:, index:, **html_attrs)
+        @param = param
+        @index = index
+        @rendered_input = nil
+        super(**html_attrs)
+      end
+
+      def before_render
+        styles, html = StylesExtractor.call(render_input)
+        Editor::Component.add_styles(param.input, styles)
+
+        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}\"})"
+        }
+        @rendered_input = tag.div(**wrapper_attrs) { html.html_safe }
+      end
+
+      protected
+
+      def render_input
+        input_options = param.input_options.to_h
+        input_options[:id] = "param-#{param.name}"
+
+        render(param.input_partial,
+          name: param.name,
+          input: param.input,
+          value: param.value.to_s,
+          value_type: param.value_type,
+          value_default: param.value_default,
+          input_options: input_options.except(:choices, :opts),
+          choices: input_options[:choices])
+      end
+
+      def alpine_component
+        "paramsFieldComponent"
+      end
+    end
+  end
+end

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

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

@@ -0,0 +1,8 @@
+<%= 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

@@ -0,0 +1,24 @@
+module Lookbook
+  class Prose::Component < Lookbook::BaseComponent
+    def initialize(size: :sm, markdown: true, **html_attrs)
+      @size = size
+      @markdown = markdown
+      super(**html_attrs)
+    end
+
+    def rendered_content
+      @markdown ? MarkdownRenderer.call(content.strip_heredoc) : helpers.raw(content)
+    end
+
+    def size_class
+      case @size
+      when :sm
+        "prose-sm"
+      when :lg
+        "prose-lg"
+      else
+        "prose-sm lg:prose-base"
+      end
+    end
+  end
+end

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

@@ -0,0 +1,13 @@
+<%= render_component_tag class: "grid h-full w-full", "x-bind": "bindings.root", "x-effect": "initSplit" do %>
+  <% panes.each.with_index(1) do |pane, i| %>
+    <%= pane %>
+    <% if i < panes.size %>
+      <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 %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,151 @@
+import Split from "split-grid";
+import { observeSize } from "@helpers/layout";
+
+export default function splitLayoutComponent({ split, opts = {} }) {
+  let splitter = null;
+  const shouldSplit = split.sizes !== null;
+
+  return {
+    layoutResizing: false,
+
+    layoutWidth: null,
+
+    layoutHeight: null,
+
+    forceOrientation: null,
+
+    get vertical() {
+      if (this.forceOrientation) {
+        return this.forceOrientation === "vertical";
+      }
+      return split.direction === "vertical";
+    },
+
+    get horizontal() {
+      if (this.forceOrientation) {
+        return this.forceOrientation === "horizontal";
+      }
+      return split.direction === "horizontal";
+    },
+
+    get splits() {
+      if (this.horizontal && split.horizontalSizes) {
+        return split.horizontalSizes;
+      } else if (this.vertical && split.verticalSizes) {
+        return split.verticalSizes;
+      } else {
+        return split.sizes || [];
+      }
+    },
+
+    get minSizes() {
+      if (this.horizontal && opts.minHorizontalSizes) {
+        return opts.minHorizontalSizes;
+      } else if (this.vertical && opts.minVerticalSizes) {
+        return opts.minVerticalSizes;
+      } else {
+        return opts.minSizes || [];
+      }
+    },
+
+    init() {
+      observeSize(this.$el, ({ width, height }) => {
+        this.layoutWidth = width;
+        this.layoutHeight = height;
+      });
+    },
+
+    switchOrientation() {
+      split.direction = this.vertical ? "horizontal" : "vertical";
+    },
+
+    registerGutter() {
+      this._gutters.push(this.$el);
+    },
+
+    initSplit() {
+      if (shouldSplit && this._gutters.length) {
+        this._destroySplit();
+        const dir = this.horizontal ? "row" : "column";
+        splitter = Split({
+          [`${dir}Gutters`]: gutterSplits(this._gutters),
+          [`${dir}MinSizes`]: sizeSplits(this.minSizes),
+          snapOffset: 0,
+          dragInterval: 1,
+          writeStyle() {},
+          onDrag: (dir, gutterTrack, style) => {
+            const splits = style
+              .split(" ")
+              .map((value, i) => (i % 2 == 0 ? value : null))
+              .filter((v) => v);
+            this._setSplits(splits);
+          },
+          onDragStart: () => {
+            this.layoutResizing = true;
+            this.$dispatch("layout:resize-start", { layout: this });
+          },
+          onDragEnd: () => {
+            this.layoutResizing = false;
+            this.$dispatch("layout:resize-end", { layout: this });
+          },
+        });
+      }
+    },
+
+    bindings: {
+      root: {
+        [":style"]() {
+          return {
+            "grid-template-columns":
+              shouldSplit && this.vertical && sizeStr(this.splits),
+            "grid-template-rows":
+              shouldSplit && this.horizontal && sizeStr(this.splits),
+          };
+        },
+      },
+    },
+
+    // protected
+
+    _gutters: [],
+
+    _destroySplit() {
+      if (splitter) splitter.destroy();
+    },
+
+    _setSplits(splits) {
+      if (this.horizontal && split.horizontalSizes) {
+        split.horizontalSizes = splits;
+      } else if (this.vertical && split.verticalSizes) {
+        split.verticalSizes = splits;
+      } else {
+        split.sizes = splits;
+      }
+    },
+  };
+}
+
+// utils
+
+function sizeStr(sizes) {
+  const values = [];
+  sizes.forEach((size) => values.push(size, "1px"));
+  return values.slice(0, -1).join(" ");
+}
+
+function gutterSplits(gutters) {
+  return gutters.map((element, i) => {
+    return {
+      track: i * 2 + 1,
+      element,
+    };
+  });
+}
+
+function sizeSplits(sizes) {
+  const splits = {};
+  sizes.forEach((value, i) => {
+    if (value !== null) splits[i * 2] = value;
+  });
+  return splits;
+}

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

@@ -0,0 +1,11 @@
+module Lookbook
+  class SplitLayout::Component < Lookbook::BaseComponent
+    renders_many :panes, Lookbook::TagComponent
+
+    protected
+
+    def alpine_component
+      "splitLayoutComponent"
+    end
+  end
+end

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

@@ -0,0 +1,5 @@
+<%= render_component_tag class: "h-full" do %>
+  <div x-ref="panels" class="h-full">
+    <%= safe_join(panels) %>
+  </div>
+<% end %>

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

@@ -0,0 +1,25 @@
+export default function tabPanelsComponent(store) {
+  return {
+    get store() {
+      return store || this;
+    },
+
+    get id() {
+      return this.$root.id;
+    },
+
+    get panels() {
+      return Array.from(this.$refs.panels.children);
+    },
+
+    isActive(el) {
+      return this.store.activeTab === this._getRef(el);
+    },
+
+    // protected
+
+    _getRef(el) {
+      return el.getAttribute("x-ref");
+    },
+  };
+}

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

@@ -0,0 +1,20 @@
+module Lookbook
+  class TabPanels::Component < Lookbook::BaseComponent
+    renders_many :panels, ->(**attrs) do
+      @panel_counter += 1
+      attrs[:name] ||= "tab-#{@panel_counter}"
+      Lookbook::TabPanels::Panel::Component.new(**attrs)
+    end
+
+    def initialize(**html_attrs)
+      @panel_counter = 0
+      super
+    end
+
+    protected
+
+    def alpine_component
+      "tabPanelsComponent"
+    end
+  end
+end

data/app/components/lookbook/tab_panels/panel/component.html.erb

@@ -0,0 +1,8 @@
+<%= render_component_tag :section,
+  "x-ref": @name,
+  "data-tab-panel": @name,
+  cloak: true,
+  class: "h-full",
+  "x-bind:class": "{ hidden: !isActive($el) }" do %>
+    <%== content %>
+<% end %>

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

@@ -0,0 +1,8 @@
+module Lookbook
+  class TabPanels::Panel::Component < Lookbook::BaseComponent
+    def initialize(name:, **html_attrs)
+      @name = name
+      super(**html_attrs)
+    end
+  end
+end

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

@@ -0,0 +1,8 @@
+@layer components {
+  [data-component="tabs-dropdown-tab"]:not(.hidden) {
+    @apply border-b border-b-lookbook-divider;
+  }
+  [data-component="tabs-dropdown-tab"]:not(.hidden):last-child {
+    @apply border-b-0;
+  }
+}

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

@@ -0,0 +1,20 @@
+<%= render_component_tag class: "flex items-center relative" do %>
+  <div x-ref="tabs" class="<%= class_names [
+    "flex items-stretch select-none min-w-0",
+    {
+      "h-10 space-x-6": @theme == :toolbar,
+      "space-x-3": @theme == :page,
+    }
+  ] %>">
+    <%= safe_join(tabs) %>
+  </div>
+  <div x-ref="dropdownTrigger" class="absolute" x-show="hasHiddenTabs" :style="{left: `${triggerLeft}px`}">
+    <%= 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>
+      <%= safe_join(dropdown_tabs) %>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,119 @@
+import { debounce } from "throttle-debounce";
+import tippy from "~/assets/js/lib/tippy";
+import { observeSize } from "@helpers/layout";
+import { getElementSize } from "@helpers/dom";
+
+export default function tabsComponent(store) {
+  const initial = store ? store.activeTab : null;
+  let dropdown = null;
+  return {
+    visibleTabsCount: 0,
+
+    triggerLeft: 0,
+
+    get store() {
+      return store || this;
+    },
+
+    get tabs() {
+      return this.$refs.tabs ? Array.from(this.$refs.tabs.children) : [];
+    },
+
+    get dropdownTabs() {
+      return Array.from(
+        this.$refs.tabsDropdown ? this.$refs.tabsDropdown.children : []
+      );
+    },
+
+    get tabWidths() {
+      return this.tabs.map(
+        (tab) => getElementSize(tab, { includeMargins: true }).width
+      );
+    },
+
+    init() {
+      this.$nextTick(() => {
+        if (this.$root.parentElement.offsetWidth === this.$root.offsetWidth) {
+          this.visibleTabsCount = this.tabs.length;
+        }
+
+        dropdown = tippy(this.$refs.dropdownTrigger, {
+          content: this.$refs.tabsDropdown,
+          theme: "menu",
+          interactive: true,
+          trigger: "click",
+          placement: "bottom",
+          appendTo: this.$root,
+        });
+
+        const initialTab = initial
+          ? this.tabs.find((t) => this._getRef(t) === initial)
+          : this.tabs[0];
+        this.selectTab(initialTab || this.tabs[0], true);
+
+        this.parentObserver = observeSize(
+          this.$root.parentElement,
+          debounce(10, this.handleResize.bind(this))
+        );
+
+        this.$watch("visibleTabsCount", (value) => {
+          this.debug(`'#${this.$root.id}' visible tabs count:`, value);
+        });
+      });
+    },
+
+    handleResize({ width }) {
+      if (width === this._lastMeasuredWidth) {
+        return;
+      }
+
+      if (width === this.$root.offsetWidth) {
+        this.visibleTabsCount = this.tabs.length;
+        return;
+      }
+
+      let sumTabWidths = 60;
+      let triggerLeft = 20;
+      let visibleTabsCount = 0;
+      this.tabWidths.forEach((tabWidth) => {
+        sumTabWidths += tabWidth;
+        if (sumTabWidths < width) {
+          triggerLeft += tabWidth;
+          visibleTabsCount++;
+        }
+      });
+
+      this.visibleTabsCount = visibleTabsCount;
+      this.triggerLeft = triggerLeft;
+      this._lastMeasuredWidth = width;
+    },
+
+    selectTab(el, initial = false) {
+      this.store.activeTab = this._getRef(el);
+      dropdown.hide();
+      if (!initial) {
+        this.$dispatch("tabs:change", { tabs: this });
+      }
+    },
+
+    isSelected(el) {
+      return this.store.activeTab === this._getRef(el);
+    },
+
+    isDisabled(el) {
+      return el.getAttribute("data-disabled") == "true";
+    },
+
+    hasHiddenTabs() {
+      return this.visibleTabsCount < this.tabs.length;
+    },
+
+    // protected
+
+    _lastMeasuredWidth: 0,
+
+    _getRef(el) {
+      return el ? el.getAttribute("x-ref").replace("dropdown-", "") : null;
+    },
+  };
+}