gitlab-lookbook 2.3.14

data/assets/js/helpers/dom.js

@@ -0,0 +1,42 @@
+function morph(from, to) {
+  Alpine.morph(from, to, {
+    key(el) {
+      return el.getAttribute("key") ? el.getAttribute("key") : el.id;
+    },
+    lookahead: true,
+    updating(el, toEl, childrenOnly, skip) {
+      if (!el.getAttribute) return;
+      if (el.getAttribute("data-morph-strategy") === "replace") {
+        el.innerHTML = toEl.innerHTML;
+        return skip();
+      } else if (el.getAttribute("data-morph-strategy") === "skip") {
+        return skip();
+      }
+    },
+  });
+}
+
+function getElementSize(el, opts = {}) {
+  const style = window.getComputedStyle(el, null);
+  return {
+    width: opts.includeMargins
+      ? el.offsetWidth +
+        parseInt(style.getPropertyValue("margin-left")) +
+        parseInt(style.getPropertyValue("margin-right"))
+      : el.offsetWidth,
+    height: opts.includeMargins
+      ? el.offsetHeight +
+        parseInt(style.getPropertyValue("margin-top")) +
+        parseInt(style.getPropertyValue("margin-bottom"))
+      : el.offsetHeight,
+  };
+}
+
+function isExternalLink(link) {
+  if (link.href) {
+    return link.host !== window.location.host;
+  }
+  return false;
+}
+
+export { morph, getElementSize, isExternalLink };

data/assets/js/helpers/layout.js

@@ -0,0 +1,21 @@
+function addMediaQueryListener(condition, callback) {
+  const mediaQueryList = window.matchMedia(condition);
+  const handleChange = (mql) => callback(mql.matches);
+  handleChange(mediaQueryList);
+  mediaQueryList.addEventListener("change", (mql) => handleChange(mql));
+  return mediaQueryList;
+}
+
+function observeSize(element, callback = () => {}) {
+  const observer = new ResizeObserver((entries) => {
+    const rect = entries[0].target.getBoundingClientRect();
+    callback({
+      width: Math.round(rect.width),
+      height: Math.round(rect.height),
+    });
+  });
+  observer.observe(element);
+  return observer;
+}
+
+export { addMediaQueryListener, observeSize };

data/assets/js/helpers/request.js

@@ -0,0 +1,14 @@
+async function fetchHTML(url, selector, options = {}) {
+  const response = await fetch(url || window.document.location, options);
+  const html = await response.text();
+  const doc = new DOMParser().parseFromString(html, "text/html");
+  return {
+    ok: response.ok,
+    fragment: selector ? doc.querySelector(selector).outerHTML : null,
+    title: doc.title,
+    response,
+    doc,
+  };
+}
+
+export { fetchHTML };

data/assets/js/helpers/string.js

@@ -0,0 +1,26 @@
+function decodeEntities(content) {
+  var txt = document.createElement("textarea");
+  txt.innerHTML = content;
+  return txt.value;
+}
+
+function prefixString(string, prefix = null) {
+  return prefix ? `${prefix}-${string}` : string;
+}
+
+function parseSearchParamValue(value) {
+  const json = decodeURIComponent(value);
+  return JSON.parse(json);
+}
+
+function buildSearchParamValue(data) {
+  const str = JSON.stringify(data);
+  return encodeURIComponent(str);
+}
+
+export {
+  prefixString,
+  decodeEntities,
+  parseSearchParamValue,
+  buildSearchParamValue,
+};

data/assets/js/iframe.js

@@ -0,0 +1 @@
+import "iframe-resizer/js/iframeResizer.contentWindow";

data/assets/js/index.js

@@ -0,0 +1,61 @@
+import Alpine from "alpinejs";
+
+import Morph from "@alpinejs/morph";
+import Persist from "@alpinejs/persist";
+import Collapse from "@alpinejs/morph";
+import Tooltip from "@ryangjchandler/alpine-tooltip";
+
+import Logger, { log } from "./plugins/logger";
+
+import initLayoutStore from "./stores/layout";
+import initNavStore from "./stores/nav";
+import initInspectorStore from "./stores/inspector";
+import initPagesStore from "./stores/pages";
+import initSettingsStore from "./stores/settings";
+import initWorkbenchStore from "./stores/workbench";
+
+import app from "./app";
+
+// Note: A ParcelJS issue prevents loading all depths of component JS files in one glob,
+// so need to split it up. Path aliases also do not work with the glob imports.
+import { getComponents } from "./helpers/build";
+import * as components from "../../app/components/lookbook/*/*component.js";
+import * as subComponents from "../../app/components/lookbook/*/*/component.js";
+import * as jsComponents from "./components/*.js";
+
+// Plugins
+
+Alpine.plugin(Morph);
+Alpine.plugin(Persist);
+Alpine.plugin(Collapse);
+Alpine.plugin(Tooltip);
+Alpine.plugin(Logger);
+
+// Stores
+const prefix = window.APP_NAME;
+Alpine.store("layout", initLayoutStore(Alpine, { prefix }));
+Alpine.store("nav", initNavStore(Alpine, { prefix }));
+Alpine.store("inspector", initInspectorStore(Alpine, { prefix }));
+Alpine.store("pages", initPagesStore(Alpine, { prefix }));
+Alpine.store("settings", initSettingsStore(Alpine, { prefix }));
+
+if (process.env.NODE_ENV !== "production") {
+  Alpine.store("workbench", initWorkbenchStore(Alpine, { prefix }));
+}
+
+// Components
+
+Alpine.data("app", app);
+
+[components, subComponents, jsComponents].forEach((scripts) => {
+  const components = getComponents(scripts);
+  Object.keys(components).forEach((name) => {
+    Alpine.data(`${name}Component`, components[name]);
+  });
+});
+
+// Init
+
+window.log = log;
+window.Alpine = Alpine;
+Alpine.start();

data/assets/js/lib/lookbook.js

@@ -0,0 +1,125 @@
+window.Lookbook = window.Lookbook || {};
+window.Lookbook.initEmbeds = initEmbeds;
+
+const embedUrlPrefix = "embed";
+const whiteListedAttributes = [
+  "preview",
+  "scenario",
+  "panels",
+  "actions",
+  "param-*",
+];
+
+function initEmbeds(root = document) {
+  if (typeof window.iFrameResize !== "function") {
+    console.error(
+      "Lookbook embeds require the 'iframe-resizer' library to be available. Skipping embed instantiation."
+    );
+    return;
+  }
+
+  if (typeof root === "string") {
+    root = document.querySelector(root);
+  }
+
+  if (!root) {
+    return console.error(
+      "Could not initialize Lookbook embeds. Root node not found."
+    );
+  }
+
+  const embeds = Array.from(root.querySelectorAll("lookbook-embed"));
+
+  embeds.forEach((embed) => {
+    const attrs = Array.from(embed.attributes);
+    const wrapper = createWrapper();
+    const iframe = createIframe(attrs);
+
+    wrapper.appendChild(iframe);
+    embed.replaceWith(wrapper);
+  });
+
+  window.iFrameResize({ checkOrigin: false }, "[data-lookbook-embed-iframe]");
+}
+
+function createWrapper() {
+  const wrapper = document.createElement("div");
+
+  wrapper.setAttribute("data-lookbook-embed", "");
+  wrapper.classList.add("lookbook-embed");
+
+  return wrapper;
+}
+
+function createIframe(attrs) {
+  const src = buildSrc(attrs);
+  const id = attrValue(attrs, "id");
+  const styles = attrValue(attrs, "style");
+  const classes = attrValue(attrs, "class", "")
+    .split(" ")
+    .map((c) => c.trim())
+    .filter((c) => c.length);
+
+  const iframe = document.createElement("iframe");
+  iframe.src = src;
+  if (id) iframe.id = id;
+
+  iframe.setAttribute("frameborder", 0);
+  iframe.setAttribute("data-lookbook-embed-iframe", "");
+
+  if (classes.length) iframe.classList.add(...classes);
+  if (styles) iframe.style.cssText = styles;
+
+  iframe.style.width = "100%";
+  iframe.style.transition = "height 0.3s";
+
+  return iframe;
+}
+
+function buildSrc(attrs) {
+  const appPath = attrValue(attrs, "app") || guessBasePath();
+  const props = {};
+
+  permittedAttrs(attrs).forEach(({ name, value }) => {
+    name = name.replace("-", "_").toLowerCase();
+    props[name] = value;
+  });
+
+  return encodeURI(
+    [appPath, embedUrlPrefix].join("/") + `?props=${JSON.stringify(props)}`
+  );
+}
+
+function attrValue(attrs, name, fallback = null) {
+  const attr = attrs.find((attr) => attr.name === name);
+  return attr ? attr.value : fallback;
+}
+
+function permittedAttrs(attrs) {
+  return attrs.filter((attr) => {
+    return whiteListedAttributes.find((key) => {
+      const name = attr.name;
+      return (
+        key === name ||
+        (key.includes("*") && name.startsWith(key.replace("*", "")))
+      );
+    });
+  });
+}
+
+function guessBasePath() {
+  const script =
+    document.currentScript ||
+    document.querySelector('script[src*="lookbook.js"]');
+  const scriptSrc = script.src;
+
+  if (scriptSrc && scriptSrc.includes("lookbook-assets")) {
+    return scriptSrc
+      .split("?")[0]
+      .replace("lookbook-assets/js/lookbook.js", "lookbook");
+  }
+
+  return `//${location.host}/lookbook`;
+}
+
+document.addEventListener("DOMContentLoaded", () => initEmbeds());

data/assets/js/lib/socket.js

@@ -0,0 +1,28 @@
+import { createConsumer } from "@rails/actioncable";
+import { debounce } from "throttle-debounce";
+import { log } from "../plugins/logger";
+
+export default function socket(endpoint) {
+  const uid = (Date.now() + ((Math.random() * 100) | 0)).toString();
+  const consumer = createConsumer(`${endpoint}?uid=${uid}`);
+  return {
+    addListener(channel, callback) {
+      consumer.subscriptions.create(channel, {
+        received: debounce(
+          200,
+          (data) => {
+            log.debug("Lookbook files changed");
+            callback(data);
+          },
+          { atBegin: true }
+        ),
+        connected() {
+          log.info("Lookbook websocket connected");
+        },
+        disconnected() {
+          log.info("Lookbook websocket disconnected");
+        },
+      });
+    },
+  };
+}

data/assets/js/lib/tippy.js

@@ -0,0 +1,9 @@
+import tippy from "tippy.js";
+
+tippy.setDefaultProps({
+  allowHTML: true,
+  theme: "tooltip",
+  appendTo: document.getElementById("app"),
+});
+
+export default tippy;

data/assets/js/lookbook-core.js

@@ -0,0 +1 @@
+import "./lib/lookbook";

data/assets/js/lookbook.js

@@ -0,0 +1,2 @@
+import "iframe-resizer/js/iframeResizer";
+import "./lib/lookbook";

data/assets/js/plugins/logger.js

@@ -0,0 +1,39 @@
+import log from "loglevel";
+import logPrefix from "loglevel-plugin-prefix";
+
+logPrefix.reg(log);
+logPrefix.apply(log, {
+  format: (level) => `${`[${level}]`.padStart(7)} Lookbook:`,
+});
+
+let logLevel = process.env.NODE_ENV === "development" ? 2 : 3;
+if (window.LOG_LEVEL !== undefined) {
+  logLevel = window.LOG_LEVEL;
+}
+log.setLevel(logLevel);
+
+export default function loggerPlugin(Alpine) {
+  Alpine.directive(
+    "log",
+    (el, { modifiers, expression }, { evaluateLater, effect }) => {
+      let logFn =
+        typeof expression === "string"
+          ? (callback) => callback(expression)
+          : evaluateLater(expression);
+      effect(() =>
+        logFn((message) => {
+          const level = modifiers[0] || "debug";
+          log[level](message);
+        })
+      );
+    }
+  );
+
+  Alpine.magic("log", () => {
+    return log;
+  });
+
+  Alpine.$log = log;
+}
+
+export { log };

data/assets/js/stores/filter.js

@@ -0,0 +1,11 @@
+export default function initFilterStore(Alpine, name) {
+  return {
+    raw: Alpine.$persist("").as(name),
+    get text() {
+      return this.raw.replace(/\s/g, "").toLowerCase();
+    },
+    get active() {
+      return this.text.length > 0;
+    },
+  };
+}

data/assets/js/stores/inspector.js

@@ -0,0 +1,31 @@
+import { prefixString } from "../helpers/string";
+
+export default function initInspectorStore(Alpine, { prefix }) {
+  return {
+    minVerticalSplitWidth: 800,
+
+    main: {
+      activeTab: Alpine.$persist("").as(
+        prefixString("inspector-main-active-tab", prefix)
+      ),
+      width: Alpine.$persist("100%").as(
+        prefixString("inspector-main-width", prefix)
+      ),
+      height: Alpine.$persist("100%").as(
+        prefixString("inspector-main-height", prefix)
+      ),
+      lastWidth: null,
+      lastHeight: null,
+      resizing: false,
+    },
+
+    drawer: {
+      hidden: Alpine.$persist(false).as(
+        prefixString("inspector-drawer-hidden", prefix)
+      ),
+      activeTab: Alpine.$persist("").as(
+        prefixString("inspector-drawer-active-tab", prefix)
+      ),
+    },
+  };
+}

data/assets/js/stores/layout.js

@@ -0,0 +1,111 @@
+import config from "../config";
+import { addMediaQueryListener } from "../helpers/layout";
+import { log } from "../plugins/logger";
+import { prefixString } from "../helpers/string";
+
+const { sidebar, main, inspector } = config;
+
+export default function initLayoutStore(Alpine, { prefix }) {
+  return {
+    init() {
+      addMediaQueryListener(
+        `(min-width: ${config.desktopWidth}px)`,
+        (matches) => {
+          this._isDesktop = matches;
+          log.debug(
+            `Media query 'desktop': ${matches ? "✅ match" : "❌ no match"}`
+          );
+        }
+      );
+    },
+
+    get desktop() {
+      return this._isDesktop;
+    },
+
+    get mobile() {
+      return !this.desktop;
+    },
+
+    reflowing: false,
+
+    // Main app sidebar/content layout
+    main: {
+      split: Alpine.$persist({
+        direction: "vertical",
+        sizes: [`${sidebar.defaultWidth}px`, "1fr"],
+      }).as(prefixString("main-split", prefix)),
+
+      opts: {
+        minSizes: [sidebar.minWidth, main.minWidth],
+      },
+    },
+
+    // Sidebar visibility and sections
+    sidebar: {
+      _hiddenDesktop: Alpine.$persist(false).as(
+        prefixString("sidebar-hidden-desktop", prefix)
+      ),
+
+      _hiddenMobile: Alpine.$persist(true).as(
+        prefixString("sidebar-hidden-mobile", prefix)
+      ),
+
+      set hidden(value) {
+        if (Alpine.store("layout").desktop) {
+          this._hiddenDesktop = value;
+        } else {
+          this._hiddenMobile = value;
+        }
+      },
+
+      get hidden() {
+        const isDesktop = Alpine.store("layout").desktop;
+        return (
+          (isDesktop && this._hiddenDesktop) ||
+          (!isDesktop && this._hiddenMobile)
+        );
+      },
+
+      split: Alpine.$persist({
+        direction: "horizontal",
+        sizes: ["50%", "50%"],
+      }).as(prefixString("sidebar-split", prefix)),
+
+      opts: {
+        minSizes: [sidebar.minSectionHeight, sidebar.minSectionHeight],
+      },
+    },
+
+    singleSectionSidebar: {
+      split: {
+        direction: "horizontal",
+        sizes: null,
+      },
+    },
+
+    // Inspector drawer/preview layout
+    inspector: {
+      split: Alpine.$persist({
+        direction: "horizontal",
+        horizontalSizes: ["1fr", `${inspector.drawer.defaultHeight}px`],
+        verticalSizes: ["1fr", `${inspector.drawer.defaultWidth}px`],
+      }).as(prefixString("inspector-split", prefix)),
+
+      opts: {
+        minVerticalSizes: [
+          inspector.drawer.minWidth,
+          inspector.drawer.minWidth,
+        ],
+        minHorizontalSizes: [
+          inspector.drawer.minHeight,
+          inspector.drawer.minHeight,
+        ],
+      },
+    },
+
+    // protected
+
+    _isDesktop: true,
+  };
+}

data/assets/js/stores/nav.js

@@ -0,0 +1,22 @@
+import initFilterStore from "./filter";
+import { prefixString } from "../helpers/string";
+
+export default function initNavStore(Alpine, { prefix }) {
+  return {
+    previews: {
+      filter: initFilterStore(
+        Alpine,
+        prefixString("previews-filter-text", prefix)
+      ),
+      open: Alpine.$persist([]).as(prefixString("previews-nav-open", prefix)),
+    },
+
+    pages: {
+      filter: initFilterStore(
+        Alpine,
+        prefixString("pages-filter-text", prefix)
+      ),
+      open: Alpine.$persist([]).as(prefixString("pages-nav-open", prefix)),
+    },
+  };
+}

data/assets/js/stores/pages.js

@@ -0,0 +1,7 @@
+import { prefixString } from "../helpers/string";
+
+export default function initPagesStore(Alpine, { prefix }) {
+  return {
+    embeds: Alpine.$persist({}).as(prefixString("pages-embeds", prefix)),
+  };
+}

data/assets/js/stores/settings.js

@@ -0,0 +1,7 @@
+import { prefixString } from "../helpers/string";
+
+export default function initSettingsStore(Alpine, { prefix }) {
+  return {
+    showTooltips: true,
+  };
+}

data/assets/js/stores/workbench.js

@@ -0,0 +1,29 @@
+import initFilterStore from "./filter";
+import { prefixString } from "../helpers/string";
+
+export default function initWorkbenchStore(Alpine, { prefix }) {
+  return {
+    filter: initFilterStore(Alpine, prefixString("workbench-filter", prefix)),
+    nav: {
+      open: Alpine.$persist([]).as(prefixString("workbench-nav-open", prefix)),
+      location: {
+        pathname: null,
+      },
+    },
+    horizontalSplitLayout: {
+      split: Alpine.$persist({
+        direction: "horizontal",
+        sizes: ["50%", "50%"],
+      }).as(prefixString("workbench-horizontal-split", prefix)),
+    },
+    verticalSplitLayout: {
+      split: Alpine.$persist({
+        direction: "vertical",
+        sizes: ["40%", "30%", "30%"],
+      }).as(prefixString("workbench-vertical-split", prefix)),
+    },
+    tabbedPanels: {
+      activeTab: "tab-1",
+    },
+  };
+}

data/config/app.yml

@@ -0,0 +1,79 @@
+shared:
+  project_name: ~
+  project_logo: ~
+
+  preview_collection_label: "Previews"
+  preview_nav_filter: true
+  preview_paths: [test/components/previews]
+  preview_display_options: {}
+  preview_controller: "Lookbook::PreviewController"
+  preview_template: lookbook/previews/preview
+  preview_inspector:
+    main_panels: [preview, output]
+    drawer_panels: [source, notes, params, "*"]
+    sidebar_panels: [previews, pages]
+  preview_embeds:
+    enabled: true
+    policy: SAMEORIGIN
+    panels: false
+    actions: []
+    scenarios: []
+    display_option_controls: true
+  preview_layout: ~
+  preview_disable_action_view_annotations: true
+  preview_disable_action_view_partial_prefixes: true
+  preview_type_default: view_component
+  preview_sort_scenarios: false
+  preview_disable_error_handling: false
+  preview_single_pass_rendering: false
+
+  page_collection_label: "Pages"
+  page_nav_filter: false
+  page_controller: "Lookbook::PageController"
+  page_route: pages
+  page_paths: [test/components/docs]
+  page_extensions: [html.*, md.*]
+  page_options: {}
+
+  markdown_options:
+    tables: true
+    fenced_code_blocks: true
+    disable_indented_code_blocks: true
+    strikethrough: true
+    highlight: true
+    lax_spacing: true
+
+  highlighter_options:
+    theme: github
+    dark: false
+
+  component_paths: [app/views, app/components]
+
+  reload_on_change: ~
+  lazy_load_previews_and_pages: false
+  live_updates: false
+  listen_paths: []
+  listen_extensions: [rb, html.*]
+  autoload_previews: true
+
+  ui_theme: indigo
+  ui_theme_overrides: {}
+  ui_favicon: true
+
+  log_level: 2
+  log_use_rails_logger: true
+
+  debug_menu: false
+
+  links:
+    docs: https://v2.lookbook.build
+    demo: https://v2-demo.lookbook.build
+    repo: https://github.com/lookbook-hq/lookbook/tree/v2
+
+development:
+  debug_menu: true
+  live_updates: true
+
+test:
+  debug_menu: true
+  live_updates: false