gitlab-lookbook 2.3.14

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

@@ -0,0 +1,19 @@
+@layer components {
+  [data-component="icon"] {
+    @apply transition block flex-none leading-none;
+
+    svg {
+      @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

@@ -0,0 +1,5 @@
+<%= render_component_tag :i, style: "height: #{size_rems}; width: #{size_rems}; #{@html_attrs[:style]}", class: "icon-stroke-#{stroke}" do %>
+  <svg>
+    <use href="/lookbook-assets/img/lucide-sprite.svg#<%= @icon_name %>"></use>
+  </svg>
+<% end %>

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

@@ -0,0 +1,18 @@
+module Lookbook
+  class Icon::Component < Lookbook::BaseComponent
+    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
+  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, "x-bind: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/inspector_panel/component.css

@@ -0,0 +1,5 @@
+@layer components {
+  .lookbook-panel {
+    @apply p-4 min-h-full;
+  }
+}

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

@@ -0,0 +1,8 @@
+<%= render_component_tag :div, id: id, class: "h-full", "data-panel": @name do %>
+  <%= panel_html %>
+<% end %>
+
+<% if panel_styles %>
+  <% content_for :user_styles do %><%= panel_styles %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,20 @@
+module Lookbook
+  class InspectorPanel::Component < Lookbook::BaseComponent
+    attr_reader :panel_styles, :panel_html
+
+    def initialize(name:, **attrs)
+      @name = name
+      super(**attrs)
+    end
+
+    def id
+      Utils.id("panel", @name)
+    end
+
+    def before_render
+      styles, html = StylesExtractor.call(content)
+      @panel_styles = styles.map { |s| "##{id} #{s}" }.join("\n")
+      @panel_html = html.html_safe
+    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

@@ -0,0 +1,28 @@
+<%= render_component_tag class: "flex flex-col overflow-hidden h-full",
+  "x-on:filter:change.stop": "filter($event.detail.text)" do %>
+  
+  <% if toolbar %>
+    <%= toolbar %>
+  <% end %>
+
+  <% if filter && items.any? %>
+    <div class="p-2 pb-0">
+      <%= filter %>
+    </div>
+  <% end %>
+
+  <div class="overflow-auto h-full">
+    <% if items.any? %>
+      <ul class="py-2" x-ref="items" x-show="!empty" x-cloak>
+        <%= safe_join(items) %>
+      </ul>
+      <div class="p-4 text-center" x-show="empty" x-cloak>
+        <h4 class="opacity-50 italic">No matching results.</h4>
+      </div>
+    <% else %>
+      <div class="p-4 text-center">
+        <h4 class="opacity-50 italic">Nothing here yet.</h4>
+      </div>
+    <% end %>
+  </div>
+<% end %>

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

@@ -0,0 +1,56 @@
+export default function navComponent(store) {
+  return {
+    empty: false,
+
+    children: [],
+
+    init() {
+      this.children = this.$refs.items
+        ? Array.from(this.$refs.items.children)
+        : [];
+    },
+
+    isOpen(id) {
+      return store.open.includes(id);
+    },
+
+    setOpen(id) {
+      store.open.push(id);
+    },
+
+    setClosed(id) {
+      const index = store.open.indexOf(id);
+      if (index > -1) {
+        store.open.splice(index, 1);
+      }
+    },
+
+    closeAll() {
+      store.open.length = 0;
+    },
+
+    toggleOpen(id) {
+      this.isOpen(id) ? this.setClosed(id) : this.setOpen(id);
+    },
+
+    async filter(text) {
+      this.debug(`Filter text: ${text}`);
+
+      await this.$nextTick();
+      const filteredStates = await Promise.all(
+        this.children.map(async (child) => {
+          const data = Alpine.$data(child);
+          await data.filter(text);
+          return data.filteredOut;
+        })
+      );
+
+      const matchedChildCount = filteredStates.filter((s) => !s).length;
+      this.empty = matchedChildCount === 0;
+
+      this.debug(
+        `Children matching filter: ${matchedChildCount}/${this.children.length}`
+      );
+    },
+  };
+}

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

@@ -0,0 +1,27 @@
+module Lookbook
+  class Nav::Component < Lookbook::BaseComponent
+    renders_one :filter, Lookbook::Filter::Component
+    renders_one :toolbar, Lookbook::Toolbar::Component
+
+    attr_reader :id, :tree
+
+    def initialize(tree:, id: nil, **attrs)
+      @id = id
+      @tree = tree
+      super(**attrs, id: id)
+    end
+
+    def items
+      @items ||= tree.map do |node|
+        item_class = (node.type == :directory) ? Nav::Directory::Component : Nav::Entity::Component
+        lookbook_render item_class.new node, nav_id: id
+      end
+    end
+
+    protected
+
+    def alpine_component
+      "navComponent"
+    end
+  end
+end

data/app/components/lookbook/nav/directory/component.html.erb

@@ -0,0 +1,28 @@
+<%= render_component_tag :li,
+  id: id,
+  key: "#{id}-directory",
+  class: "list-none",
+  "x-show": "!filteredOut",
+  data: { "entity-type": :directory },
+  cloak: true do %>
+  <%= lookbook_tag :button,
+    key: "#{id}-action",
+    class: "nav-action",
+    style: "padding-left: #{left_pad}px",
+    "x-bind": "bindings.toggle" do %>
+    <div class="nav-action-inner">
+      <% 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>
+  <% end %>
+  
+  <% if children? %>
+    <ul x-ref="items" x-show="open" x-cloak>
+      <%= safe_join(children) %>
+    </ul>
+  <% end %>  
+<% end %>

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

@@ -0,0 +1,4 @@
+module Lookbook
+  class Nav::Directory::Component < Nav::Item::Component
+  end
+end

data/app/components/lookbook/nav/entity/component.html.erb

@@ -0,0 +1,32 @@
+<%= render_component_tag :li,
+  id: id,
+  key: "#{id}-entity-#{type}",
+  class: "list-none",
+  "x-init": "$nextTick(() => checkActive())",
+  "x-show": "!filteredOut",
+  "@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,
+    key: "#{id}-action",
+    class: "nav-action",
+    style: "padding-left: #{left_pad}px",
+    "x-bind": "bindings.#{href.present? ? "link" : "toggle"}" do %>
+    <div class="nav-action-inner">
+      <% 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-semibold<% end %>"><%= label %></span>
+    </div>
+  <% end %>
+  
+  <% if children? %>
+    <ul x-ref="items" x-show="open" x-cloak>
+      <%= safe_join(children) %>
+    </ul>
+  <% end %>  
+<% end %>

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

@@ -0,0 +1,49 @@
+module Lookbook
+  class Nav::Entity::Component < Nav::Item::Component
+    ICONS = {
+      page: :file,
+      preview: :layers,
+      scenario: :eye,
+      scenario_group: :eye
+    }.freeze
+
+    def nav_icon
+      ICONS[collapsed? ? :preview : node.type] || :file
+    end
+
+    def href
+      if collapsed?
+        node.first.url_path
+      elsif type != :preview
+        node.url_path
+      end
+    end
+
+    def children
+      collapsed? ? [] : super
+    end
+
+    def type
+      collapsed? ? :scenario : node.type
+    end
+
+    def collapsed?
+      node.type == :preview && node.children.one?
+    end
+
+    def search_terms
+      matchers = if collapsed?
+        node.first.search_terms
+      else
+        node.respond_to?(:search_terms) ? Array(node.search_terms) : []
+      end
+      matchers.flatten.map { |m| m.gsub(/\s/, "").downcase }
+    end
+
+    protected
+
+    def alpine_data
+      alpine_encode({id: node.id, matchers: search_terms})
+    end
+  end
+end

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

@@ -0,0 +1,15 @@
+@layer components {
+  [data-component="nav"] {
+    .nav-action {
+      @apply flex w-full items-center py-1 select-none cursor-pointer text-lookbook-nav-text hover:bg-lookbook-nav-item-hover transition;
+    }
+
+    .nav-action-inner {
+      @apply relative flex items-center w-full;
+    }
+
+    .nav-toggle-icon {
+      @apply mr-1 text-lookbook-nav-toggle absolute -left-4;
+    }
+  }
+}

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

@@ -0,0 +1,68 @@
+export default function navItemComponent({ id, matchers }) {
+  matchers = matchers.map((matcher) =>
+    matcher.replace(/\s/g, "").toLowerCase()
+  );
+
+  return {
+    filteredOut: false,
+
+    active: false,
+
+    get open() {
+      return this.isCollection && this.isOpen(id);
+    },
+
+    get children() {
+      return this.$refs.items ? Array.from(this.$refs.items.children) : [];
+    },
+
+    get isCollection() {
+      return !this.$refs.link;
+    },
+
+    checkActive() {
+      this.active =
+        this.$refs.link &&
+        window.location.pathname === this.$refs.link.getAttribute("href");
+    },
+
+    toggle() {
+      this.toggleOpen(id);
+    },
+
+    async filter(text) {
+      if (this.isCollection) {
+        this.filteredOut = true;
+        this.children.forEach(async (child) => {
+          const data = Alpine.$data(child);
+          await data.filter(text);
+          if (!data.filteredOut) {
+            this.filteredOut = false;
+          }
+        });
+      } else {
+        this.filteredOut = !this.match(text);
+      }
+      return this;
+    },
+
+    match(text) {
+      if (text.length) {
+        const matched = (matchers || []).map((m) => m.includes(text));
+        return matched.filter((m) => m).length;
+      }
+      return true;
+    },
+
+    bindings: {
+      toggle: {
+        ["x-on:click.stop"]: "toggle",
+        ["x-ref"]: "toggle",
+      },
+      link: {
+        [":class"]: "{'!bg-lookbook-nav-item-active':active}",
+        ["x-ref"]: "link",
+      },
+    },
+  };
+}

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

@@ -0,0 +1,48 @@
+module Lookbook
+  class Nav::Item::Component < Lookbook::BaseComponent
+    delegate :label, :depth, :priority, to: :node
+
+    attr_reader :node, :nav_id
+
+    def initialize(node, nav_id:, **html_attrs)
+      @node = node
+      @nav_id = nav_id
+      super(**html_attrs)
+    end
+
+    def id
+      "#{nav_id}-#{node.id}"
+    end
+
+    def left_pad
+      depth * 12
+    end
+
+    def children
+      @children ||= node.sort.map { |node| render_item(node) }
+    end
+
+    def nav_icon
+      :folder
+    end
+
+    def children?
+      children.any?
+    end
+
+    def render_item(node)
+      item_class = (node.type == :directory) ? Nav::Directory::Component : Nav::Entity::Component
+      lookbook_render item_class.new node, nav_id: nav_id
+    end
+
+    protected
+
+    def alpine_data
+      alpine_encode({id: node.id, matchers: []})
+    end
+
+    def alpine_component
+      "navItemComponent"
+    end
+  end
+end

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

@@ -0,0 +1,18 @@
+ <%= render_component_tag "x-data": "{ activeTab: null }" do %>
+  <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.with_tab **props %>
+      <% end %>
+    <% end %>
+  </div>
+  <%= lookbook_render :tab_panels do |t| %>
+    <% @tabs.each do |props| %>
+      <% 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 %>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,19 @@
+module Lookbook
+  class PageTabs::Component < Lookbook::BaseComponent
+    renders_many :tabs, ->(**attrs, &block) do
+      @tabs ||= []
+      attrs[:tab_content] = capture(&block)
+      attrs[:markdown] ||= @markdown
+      @tabs << attrs
+    end
+
+    def initialize(markdown: true, **html_attrs)
+      @markdown = markdown
+      super(**html_attrs)
+    end
+
+    def before_render
+      tabs.size
+    end
+  end
+end

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

@@ -0,0 +1,21 @@
+<%= 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" x-bind:class="narrow && 'linear'">
+      <thead>
+        <tr>
+          <th class="param-label">Param</th>
+          <th class="param-description">Description</th>
+          <th class="param-input">Input</th>
+        </tr>
+      </thead>
+      <tbody>
+        <%= safe_join(fields.compact) %>
+      </tbody>
+    </table>
+  </div>
+<% end %>
+
+<% if param_styles %>
+  <% content_for :user_styles do %><%= param_styles %>
+  <% end %>
+<% end %>