gitlab-lookbook 2.3.14

data/app/components/lookbook/code/highlight_github.css

@@ -0,0 +1,405 @@
+.theme-github {
+  --dark-bg: #111111;
+  --dark-gray-1: #404040;
+  --dark-gray-2: #d0d0d0;
+  --dark-gray-3: #cccccc;
+  --dark-gray-4: #777777;
+  --dark-gray-5: #aaaaaa;
+  --dark-gray-6: #bbbbbb;
+  --dark-gray-7: #666666;
+  --dark-blue-1: #3677a9;
+  --dark-blue-2: #24909d;
+  --dark-blue-3: #447fcf;
+  --dark-blue-4: #009988;
+  --dark-red-1: #a61717;
+  --dark-red-2: #331111;
+  --dark-red-3: #e50808;
+  --dark-red-4: #520000;
+  --dark-red-5: #d22323;
+  --dark-red-6: #cd2828;
+  --dark-yellow-1: #e9b96e;
+  --dark-yellow-2: #ffa500;
+  --dark-orange: #d2691e;
+  --dark-white: #ffffff;
+  --dark-green-1: #589819;
+  --dark-green-2: #6ab825;
+  --dark-green-3: #44ccaa;
+
+  --light-bg: #ffffff;
+  --light-gray-1: #f8f8f8;
+  --light-gray-2: #27272a;
+  --light-gray-3: #cccccc;
+  --light-gray-4: #888888;
+  --light-gray-5: #999999;
+  --light-gray-6: #555555;
+  --light-gray-7: #bbbbbb;
+  --light-yellow-1: #999988;
+  --light-red-1: #a61717;
+  --light-red-2: #e3d2d2;
+  --light-red-3: #dd1144;
+  --light-red-4: #ffdddd;
+  --light-red-5: #aa0000;
+  --light-red-6: #990000;
+  --light-purple-1: #800080;
+  --light-purple-2: #990073;
+  --light-black: #000000;
+  --light-green-1: #ddffdd;
+  --light-green-2: #009926;
+  --light-blue-1: #445588;
+  --light-blue-2: #009999;
+  --light-blue-3: #008080;
+  --light-blue-4: #0086b3;
+  --light-blue-5: #3c5d5d;
+  --light-blue-6: #000080;
+
+  --hl-bg: var(--light-bg);
+  --hl-hll-bg: var(--light-gray-1);
+  --hl-border: var(--light-gray-3);
+  --hl-line-number: var(--light-gray-2);
+  --hl-comment: var(--light-yellow-1);
+  --hl-comment-preproc: var(--light-gray-5);
+  --hl-comment-special-fg: var(--light-gray-5);
+  --hl-comment-special-bg: transparent;
+  --hl-error-fg: var(--light-red-1);
+  --hl-error-bg: var(--light-red-2);
+  --hl-subtle-fg: var(--light-gray-2);
+  --hl-entity: var(--light-purple-1);
+  --hl-keyword: var(--light-black);
+  --hl-output: var(--light-gray-4);
+  --hl-operator: var(--light-black);
+  --hl-punctuation: var(--light-gray-6);
+  --hl-string: var(--light-red-3);
+  --hl-string-other: var(--light-red-3);
+  --hl-string-regex: var(--light-green-2);
+  --hl-string-symbol: var(--light-purple-2);
+  --hl-deleted-fg: var(--light-black);
+  --hl-deleted-bg: var(--light-red-4);
+  --hl-danger: var(--light-red-5);
+  --hl-heading: var(--light-gray-5);
+  --hl-inserted-fg: var(--light-black);
+  --hl-inserted-bg: var(--light-green-1);
+  --hl-prompt: var(--light-gray-6);
+  --hl-subheading: var(--light-purple-1);
+  --hl-keyword-crude: var(--light-black);
+  --hl-keyword-subtle: var(--light-blue-1);
+  --hl-number: var(--light-blue-2);
+  --hl-attribute: var(--light-blue-3);
+  --hl-builtin: var(--light-blue-4);
+  --hl-builtin-pseudo: var(--light-gray-5);
+  --hl-class: var(--light-blue-1);
+  --hl-variable: var(--light-blue-3);
+  --hl-decorator: var(--light-blue-5);
+  --hl-exception: var(--light-red-6);
+  --hl-function: var(--light-red-6);
+  --hl-namespace: var(--light-gray-6);
+  --hl-tag: var(--light-blue-6);
+  --hl-word: var(--light-black);
+  --hl-whitespace: var(--light-gray-7);
+
+  &.dark {
+    --hl-bg: var(--dark-bg);
+    --hl-hll-bg: var(--dark-gray-1);
+    --hl-border: var(--dark-gray-4);
+    --hl-line-number: var(--dark-gray-2);
+    --hl-comment: var(--dark-blue-1);
+    --hl-comment-preproc: var(--dark-orange);
+    --hl-comment-special-fg: var(--dark-red-3);
+    --hl-comment-special-bg: var(--dark-red-4);
+    --hl-error-fg: var(--dark-red-1);
+    --hl-error-bg: var(--dark-red-2);
+    --hl-subtle-fg: var(--dark-gray-2);
+    --hl-entity: var(--dark-gray-2);
+    --hl-keyword: var(--dark-gray-3);
+    --hl-output: var(--dark-gray-3);
+    --hl-operator: var(--dark-gray-4);
+    --hl-punctuation: var(--dark-yellow-1);
+    --hl-string: var(--dark-orange);
+    --hl-string-other: var(--dark-yellow-2);
+    --hl-string-regex: var(--dark-red-6);
+    --hl-string-symbol: var(--dark-orange);
+    --hl-deleted-fg: var(--dark-red-5);
+    --hl-deleted-bg: transparent;
+    --hl-danger: var(--dark-red-5);
+    --hl-heading: var(--dark-white);
+    --hl-inserted-fg: var(--dark-green-1);
+    --hl-inserted-bg: transparent;
+    --hl-prompt: var(--dark-gray-5);
+    --hl-subheading: var(--dark-white);
+    --hl-keyword-crude: var(--dark-green-2);
+    --hl-keyword-subtle: var(--dark-green-2);
+    --hl-number: var(--dark-red-6);
+    --hl-attribute: var(--dark-gray-6);
+    --hl-builtin: var(--dark-blue-2);
+    --hl-builtin-pseudo: var(--dark-blue-2);
+    --hl-class: var(--dark-blue-3);
+    --hl-variable: var(--dark-green-3);
+    --hl-decorator: var(--dark-yellow-2);
+    --hl-exception: var(--dark-gray-6);
+    --hl-function: var(--dark-blue-4);
+    --hl-namespace: var(--dark-blue-3);
+    --hl-tag: var(--dark-green-2);
+    --hl-word: var(--dark-green-2);
+    --hl-whitespace: var(--dark-gray-7);
+  }
+}
+
+.theme-github {
+  background-color: var(--hl-bg);
+
+  .line-numbers {
+    background-color: var(--hl-bg);
+    border-color: var(--hl-border);
+    color: var(--hl-line-number);
+  }
+
+  .highlight {
+    .hll {
+      background-color: var(--hl-hll-bg);
+    }
+    .c {
+      color: var(--hl-comment);
+      font-style: italic;
+    } /* Comment */
+    .err {
+      color: var(--hl-error-fg);
+    } /* Error */
+    .g {
+      color: var(--hl-subtle-fg);
+    } /* Generic */
+    .k {
+      color: var(--hl-keyword);
+      font-weight: 600;
+    } /* Keyword; catches prefixes and css3 */
+    .l {
+      color: var(--hl-subtle-fg);
+    } /* Literal */
+    .n,
+    .h {
+      color: var(--hl-keyword);
+    } /* Name */
+    .o {
+      color: var(--hl-operator);
+      font-weight: 600;
+    } /* Operator */
+    .x {
+      color: var(--hl-subtle-fg);
+    } /* Other */
+    .p {
+      color: var(--hl-punctuation);
+    } /* Punctuation */
+    .cm {
+      color: var(--hl-comment);
+      font-style: italic;
+    } /* Comment.Multiline */
+    .cp {
+      color: var(--hl-comment-preproc);
+      font-weight: 600;
+    } /* Comment.Preproc */
+    .c1 {
+      color: var(--hl-comment);
+      font-style: italic;
+    } /* Comment.Single */
+    .cs {
+      color: var(--hl-comment-special-fg);
+      background-color: var(--hl-comment-special-bg);
+      font-weight: 600;
+      font-style: italic;
+    } /* Comment.Special */
+    .gd {
+      color: var(--hl-deleted-fg);
+      background-color: var(--hl-deleted-bg);
+    } /* Generic.Deleted */
+    .ge {
+      color: var(--hl-subtle-fg);
+      font-style: italic;
+    } /* Generic.Emph */
+    .gr {
+      color: var(--hl-danger);
+    } /* Generic.Error */
+    .gh {
+      color: var(--hl-heading);
+    } /* Generic.Heading */
+    .gi {
+      color: var(--hl-inserted-fg);
+      background-color: var(--hl-inserted-bg);
+    } /* Generic.Inserted */
+    .go {
+      color: var(--hl-output);
+    } /* Generic.Output */
+    .gp {
+      color: var(--hl-prompt);
+    } /* Generic.Prompt */
+    .gs {
+      color: var(--hl-subtle-fg);
+      font-weight: 600;
+    } /* Generic.Strong */
+    .gu {
+      color: var(--hl-subheading);
+      font-weight: 600;
+    } /* Generic.Subheading */
+    .gt {
+      color: var(--hl-danger);
+    } /* Generic.Traceback */
+    .kc {
+      color: var(--hl-keyword-crude);
+      font-weight: 600;
+    } /* Keyword.Constant */
+    .kd {
+      color: var(--hl-keyword-crude);
+      font-weight: 600;
+    } /* Keyword.Declaration */
+    .kn {
+      color: var(--hl-keyword-crude);
+      font-weight: 600;
+    } /* Keyword.Namespace */
+    .kp {
+      color: var(--hl-keyword-crude);
+      font-weight: 600;
+    } /* Keyword.Pseudo */
+    .kr {
+      color: var(--hl-keyword-crude);
+      font-weight: 600;
+    } /* Keyword.Reserved */
+    .kt {
+      color: var(--hl-keyword-subtle);
+      font-weight: 600;
+    } /* Keyword.Type */
+    .ld {
+      color: var(--hl-subtle-fg);
+    } /* Literal.Date */
+    .m {
+      color: var(--hl-number);
+    } /* Literal.Number */
+    .s {
+      color: var(--hl-string);
+    } /* Literal.String */
+    .na {
+      color: var(--hl-attribute);
+    } /* Name.Attribute */
+    .nb {
+      color: var(--hl-builtin);
+    } /* Name.Builtin */
+    .nc {
+      color: var(--hl-class);
+      font-weight: 600;
+    } /* Name.Class */
+    .no {
+      color: var(--hl-variable);
+    } /* Name.Constant */
+    .nd {
+      color: var(--hl-decorator);
+    } /* Name.Decorator */
+    .ni {
+      color: var(--hl-entity);
+    } /* Name.Entity */
+    .ne {
+      color: var(--hl-exception);
+      font-weight: 600;
+    } /* Name.Exception */
+    .nf {
+      color: var(--hl-function);
+      font-weight: 600;
+    } /* Name.Function */
+    .nl {
+      color: var(--hl-subtle-fg);
+    } /* Name.Label */
+    .nn {
+      color: var(--hl-namespace);
+    } /* Name.Namespace */
+    .nx {
+      color: var(--hl-subtle-fg);
+    } /* Name.Other */
+    .py {
+      color: var(--hl-subtle-fg);
+    } /* Name.Property */
+    .nt {
+      color: var(--hl-tag);
+    } /* Name.Tag */
+    .nv {
+      color: var(--hl-variable);
+    } /* Name.Variable */
+    .ow {
+      color: var(--hl-word);
+      font-weight: 600;
+    } /* Operator.Word */
+    .w {
+      color: var(--hl-whitespace);
+    } /* Text.Whitespace */
+    .mf {
+      color: var(--hl-number);
+    } /* Literal.Number.Float */
+    .mh {
+      color: var(--hl-number);
+    } /* Literal.Number.Hex */
+    .mi {
+      color: var(--hl-number);
+    } /* Literal.Number.Integer */
+    .mo {
+      color: var(--hl-number);
+    } /* Literal.Number.Oct */
+    .sb {
+      color: var(--hl-string);
+    } /* Literal.String.Backtick */
+    .sc {
+      color: var(--hl-string);
+    } /* Literal.String.Char */
+    .sd {
+      color: var(--hl-string);
+    } /* Literal.String.Doc */
+    .s2 {
+      color: var(--hl-string);
+    } /* Literal.String.Double */
+    .se {
+      color: var(--hl-string);
+    } /* Literal.String.Escape */
+    .sh {
+      color: var(--hl-string);
+    } /* Literal.String.Heredoc */
+    .si {
+      color: var(--hl-string);
+    } /* Literal.String.Interpol */
+    .sx {
+      color: var(--hl-string-other);
+    } /* Literal.String.Other */
+    .sr {
+      color: var(--hl-string-regex);
+    } /* Literal.String.Regex */
+    .s1 {
+      color: var(--hl-string);
+    } /* Literal.String.Single */
+    .ss {
+      color: var(--hl-string-symbol);
+    } /* Literal.String.Symbol */
+    .bp {
+      color: var(--hl-builtin-pseudo);
+    } /* Name.Builtin.Pseudo */
+    .vc {
+      color: var(--hl-variable);
+    } /* Name.Variable.Class */
+    .vg {
+      color: var(--hl-variable);
+    } /* Name.Variable.Global */
+    .vi {
+      color: var(--hl-variable);
+    } /* Name.Variable.Instance */
+    .il {
+      color: var(--hl-number);
+    } /* Literal.Number.Integer.Long */
+
+    /* Make line numbers unselectable: excludes line numbers from copy-paste user ops */
+    .line-number {
+      -webkit-user-select: none;
+      -moz-user-select: none;
+    }
+
+    /* Mozilla specific */
+    .line-number::-moz-selection {
+      background-color: transparent;
+    }
+
+    /* Other major browsers */
+    .line-number::selection {
+      background-color: transparent;
+    }
+  }
+}

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

@@ -0,0 +1,11 @@
+<%= lookbook_render :icon_button,
+  name: "copy-button",
+  **button_attrs,
+  "x-data": prepare_alpine_data,
+  "x-on:click.prevent": "copyToClipboard" do |button| %>
+  <% button.with_icon name: icon, size: icon_size, "x-show": "!copied", cloak: true %>
+  <% button.with_icon name: :check, size: icon_size, class: "text-green-500", "x-show": "copied", cloak: true %>
+  <% if content %>
+    <div x-ref="copyTarget" class="hidden"><%== content %></div>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,16 @@
+import { initClipboard } from "~/assets/js/components/clipboard";
+import buttonComponent from "@components/button/component";
+
+export default function copyButtonComponent() {
+  const button = buttonComponent();
+  return {
+    ...button,
+
+    copied: false,
+
+    init() {
+      button.init.bind(this)();
+      initClipboard(this);
+    },
+  };
+}

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

@@ -0,0 +1,26 @@
+module Lookbook
+  class CopyButton::Component < Lookbook::BaseComponent
+    attr_reader :icon, :size, :target, :button_attrs
+
+    def initialize(target: nil, icon: :code, size: :md, **attrs)
+      @icon = icon
+      @size = size
+      @target = target
+      @button_attrs = attrs
+    end
+
+    def icon_size
+      IconButton::Component::ICON_SIZES[size]
+    end
+
+    protected
+
+    def alpine_data
+      content ? nil : alpine_encode(target)
+    end
+
+    def alpine_component
+      "copyButtonComponent"
+    end
+  end
+end

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

@@ -0,0 +1,52 @@
+<%= render_component_tag class: "divide-y divide-lookbook-divider min-w-[180px]" do %>
+  <div class="px-3 py-3">
+    <ul class="space-y-2 opacity-80">
+      <% if debug_data? %>
+        <li>
+          <a href="#"
+            class="text-xs flex items-center hover:underline"
+            x-data="clipboardComponent"
+            x-on:click.prevent.stop="copyToClipboard('#debug-data')">
+            <span x-show="copied" x-cloak>
+              <%= icon :check, size: 2.5, class: "text-green-600" %>
+            </span>
+            <span x-show="!copied">
+              <%= icon :clipboard, size: 2.5 %>
+            </span>
+            <span class="ml-2">Copy debug data</span>
+          </a>
+        </li>
+      <% end %>
+      <li>
+        <a href="#"
+          class="text-xs flex items-center hover:underline"
+          x-on:click.stop="localStorage.clear(); window.location.reload();">
+          <%= icon :refresh_cw, size: 2.5 %>
+          <span class="ml-2">Reset local storage</span>
+        </a>
+      </li>
+    </ul>
+  </div>
+
+  <div class="flex items-center text-xs px-3 py-2 bg-zinc-50">
+    <span class="opacity-70 mr-1">Lookbook</span>
+    <span class="mr-6">v<%= @version %></span>
+    <div class="flex items-center space-x-2">
+      <% if @docs_url.present? %>
+        <a href="<%= @docs_url %>" target="_blank" class="ml-auto opacity-70" title="Documentation">
+          <%= icon :book, size: 3 %>
+        </a>
+      <% end %>
+      <% if @repo_url.present? %>
+        <a href="<%= @repo_url %>" target="_blank" class="ml-auto opacity-70" title="Github">
+          <%= icon :github, size: 3 %>
+        </a>
+      <% end %>
+    </div>
+  </div>
+  <% if debug_data? %>
+    <div id="debug-data" class="hidden" x-cloak>
+      <%== debug_data %>
+    </div>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,29 @@
+module Lookbook
+  class DebugMenu::Component < Lookbook::BaseComponent
+    attr_reader :features
+
+    def initialize(version: nil, docs_url: nil, repo_url: nil, features: {}, **html_attrs)
+      @version = version
+      @docs_url = docs_url
+      @repo_url = repo_url
+      @features = features
+      super(**html_attrs)
+    end
+
+    def auto_refresh_enabled?
+      feature(:auto_refresh, false)
+    end
+
+    def feature(name, fallback = nil)
+      features.fetch(name.to_sym, fallback)
+    end
+
+    def debug_data
+      content
+    end
+
+    def debug_data?
+      debug_data.present?
+    end
+  end
+end

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

@@ -0,0 +1,11 @@
+<%= render_component_tag class: "flex items-center text-xs font-mono space-x-1 transition",
+  "x-bind:class":"{'!opacity-100': resizing}",
+  "x-on:viewport:resize-start.window": "resizing = true",
+  "x-on:viewport:resize-complete.window": "resizing = false",
+  "x-on:dom:update-start.window": "tearDown",
+  "x-on:dom:update-complete.window": "createObserver",
+  "x-show": "target" do %>
+    <span x-text="`${width}px`"></span>
+    <span class="opacity-70">x</span>
+    <span x-text="`${height}px`"></span>
+<% end %>

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

@@ -0,0 +1,34 @@
+import { observeSize } from "@helpers/layout";
+
+export default function dimensionsDisplayComponent(targetSelector) {
+  return {
+    width: 0,
+    height: 0,
+    resizing: false,
+    target: null,
+
+    init() {
+      this.target = document.querySelector(targetSelector);
+      if (this.target) {
+        this.width = Math.round(this.target.clientWidth);
+        this.height = Math.round(this.target.clientHeight);
+        this.createObserver();
+      }
+    },
+
+    createObserver() {
+      if (this.target) {
+        this.observer = observeSize(this.target, ({ width, height }) => {
+          this.width = width;
+          this.height = height;
+        });
+      }
+    },
+
+    tearDown() {
+      if (this.observer) {
+        this.observer.disconnect();
+      }
+    },
+  };
+}

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

@@ -0,0 +1,15 @@
+module Lookbook
+  class DimensionsDisplay::Component < Lookbook::BaseComponent
+    def initialize(target:, **html_attrs)
+      @target = target
+      @alpine_data = alpine_encode(@target)
+      super(**html_attrs)
+    end
+
+    protected
+
+    def alpine_component
+      "dimensionsDisplayComponent"
+    end
+  end
+end

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

@@ -0,0 +1,13 @@
+<%= render_component_tag class: "px-2" do %>
+  <% if fields.many? %>
+    <%= lookbook_render :button, id: "display-options-dropdown-button", icon: :settings, tooltip: "Display options" do |button| %>
+      <% button.with_dropdown do %>
+        <div class="p-3 space-y-3">
+          <%= safe_join(fields) %>
+        </div>
+      <% end %>
+    <% end %>
+  <% else %>
+    <%= safe_join(fields) %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,7 @@
+module Lookbook
+  module DisplayOptions
+    class Editor::Component < Lookbook::BaseComponent
+      renders_many :fields, Lookbook::DisplayOptions::Field::Component
+    end
+  end
+end

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

@@ -0,0 +1,7 @@
+@layer components {
+  [data-component="display-options-field"] {
+    label {
+      @apply text-[0.82rem] text-lookbook-input-text cursor-pointer;
+    }
+  }
+}

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

@@ -0,0 +1,8 @@
+<%= render_component_tag do %>
+  <div class="flex items-center space-x-1.5">
+    <label for="<%= name %>">
+      <%= name.to_s.titleize %>:
+    </label>
+    <%= select_tag(name, options_for_select(choices, value), "x-model": "value", class: "compact") %>
+  </div>
+<% end %>

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

@@ -0,0 +1,30 @@
+import Cookies from "js-cookie";
+import {
+  parseSearchParamValue,
+  buildSearchParamValue,
+} from "~/assets/js/helpers/string";
+
+export default function displayOptionsFieldComponent({ name, value }) {
+  return {
+    name,
+    value,
+
+    init() {
+      this.$watch("value", () => this.update());
+    },
+
+    update() {
+      Cookies.set(`lookbook-display-${name}`, this.value);
+
+      const searchParams = new URLSearchParams(window.location.search);
+      const display = searchParams.get("_display");
+
+      const displayParams = display ? parseSearchParamValue(display) : {};
+      displayParams[this.name] = this.value;
+      searchParams.set("_display", buildSearchParamValue(displayParams));
+
+      const path = location.href.replace(location.search, "");
+      this.navigateTo(`${path}?${searchParams.toString()}`);
+    },
+  };
+}