lookbook 2.0.0.beta.5 → 2.0.0.beta.6

data/app/assets/lookbook/js/helpers/dom.js

@@ -1,42 +0,0 @@
-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/app/assets/lookbook/js/helpers/layout.js

@@ -1,21 +0,0 @@
-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/app/assets/lookbook/js/helpers/request.js

@@ -1,14 +0,0 @@
-async function fetchHTML(url, selector) {
-  const response = await fetch(url || window.document.location);
-  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/app/assets/lookbook/js/helpers/string.js

@@ -1,26 +0,0 @@
-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/app/assets/lookbook/js/iframe.js

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

data/app/assets/lookbook/js/index.js

@@ -1,61 +0,0 @@
-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 "../../../components/lookbook/*/*component.js";
-import * as subComponents from "../../../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/app/assets/lookbook/js/lib/lookbook.js

@@ -1,123 +0,0 @@
-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.replace("lookbook-assets/js/lookbook.js", "lookbook");
-  }
-
-  return `//${location.host}/lookbook`;
-}
-
-document.addEventListener("DOMContentLoaded", () => initEmbeds());

data/app/assets/lookbook/js/lib/socket.js

@@ -1,28 +0,0 @@
-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/app/assets/lookbook/js/lib/tippy.js

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

data/app/assets/lookbook/js/lookbook-core.js

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

data/app/assets/lookbook/js/lookbook.js

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

data/app/assets/lookbook/js/plugins/logger.js

@@ -1,39 +0,0 @@
-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/app/assets/lookbook/js/stores/filter.js

@@ -1,11 +0,0 @@
-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/app/assets/lookbook/js/stores/inspector.js

@@ -1,31 +0,0 @@
-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/app/assets/lookbook/js/stores/layout.js

@@ -1,111 +0,0 @@
-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/app/assets/lookbook/js/stores/nav.js

@@ -1,22 +0,0 @@
-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/app/assets/lookbook/js/stores/pages.js

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

data/app/assets/lookbook/js/stores/settings.js

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

data/app/assets/lookbook/js/stores/workbench.js

@@ -1,29 +0,0 @@
-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",
-    },
-  };
-}