lookbook 2.0.0.beta.4 → 2.0.0.beta.6

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

@@ -1,112 +0,0 @@
-import createSocket from "./lib/socket";
-import { morph } from "./helpers/dom";
-import { fetchHTML } from "./helpers/request";
-import { isExternalLink } from "./helpers/dom";
-
-export default function app() {
-  return {
-    _requestsInProgress: 0,
-
-    version: Alpine.$persist("").as("lookbook-version"),
-
-    location: window.location,
-
-    get sidebarHidden() {
-      return this.$store.layout.sidebar.hidden;
-    },
-
-    get loading() {
-      return this._requestsInProgress > 0;
-    },
-
-    init() {
-      if (window.SOCKET_PATH) {
-        this.debug(`Lookbook socket created`);
-        const socket = createSocket(window.SOCKET_PATH);
-        socket.addListener("Lookbook::ReloadChannel", () => this.updateDOM());
-      }
-    },
-
-    navigateTo(path) {
-      this.debug(`Navigating to ${path}`);
-      history.pushState({}, null, path);
-      this.$dispatch("popstate");
-    },
-
-    async handleNavigation() {
-      this.debug("Navigating to ", window.location.pathname);
-      this.$dispatch("navigation:start");
-      this.location = window.location;
-      await this.updateDOM();
-      this.$dispatch("navigation:complete");
-    },
-
-    hijax(evt) {
-      const link = evt.target.closest("a[href]");
-      if (link) {
-        const external = isExternalLink(link);
-        const embedded = this.isEmbedded();
-
-        if (embedded && (!link.hasAttribute("target") || external)) {
-          evt.preventDefault();
-          window.top.location = link.href;
-          return;
-        } else if (!embedded && !external && !link.hasAttribute("target")) {
-          evt.preventDefault();
-          this.navigateTo(link.href);
-          return;
-        }
-      }
-    },
-
-    async updateDOM() {
-      this.debug("Starting DOM update");
-      this.$dispatch("dom:update-start");
-      this.requestStart();
-      try {
-        const { fragment, title } = await fetchHTML(
-          window.location,
-          `#${this.$root.id}`
-        );
-        morph(this.$root, fragment);
-        document.title = title;
-        this.requestEnd();
-        this.$dispatch("dom:update-complete");
-        this.debug("DOM update complete");
-      } catch (err) {
-        this.error(err);
-        window.location.reload();
-      }
-    },
-
-    toggleSidebar() {
-      this.$store.layout.sidebar.hidden = !this.$store.layout.sidebar.hidden;
-    },
-
-    closeMobileSidebar() {
-      if (this.$store.layout.mobile && !this.sidebarHidden) {
-        this.toggleSidebar();
-      }
-    },
-
-    requestStart() {
-      this._requestsInProgress += 1;
-    },
-
-    requestEnd() {
-      if (this._requestsInProgress > 0) {
-        this._requestsInProgress -= 1;
-      }
-    },
-
-    isEmbedded() {
-      try {
-        return window.self !== window.top;
-      } catch (e) {
-        return true;
-      }
-    },
-
-    ...Alpine.$log,
-  };
-}

data/app/assets/lookbook/js/components/clipboard.js

@@ -1,47 +0,0 @@
-import { decodeEntities } from "../helpers/string";
-
-function initClipboard(context = {}) {
-  let copyTimeout = null;
-
-  return Object.assign(context, {
-    copied: false,
-
-    async copyToClipboard(target = null) {
-      let targetEl;
-      if (this.$refs.copyTarget) {
-        targetEl = this.$refs.copyTarget;
-      } else if (typeof target === "string") {
-        targetEl = document.querySelector(target);
-      }
-
-      if (!targetEl) {
-        this.warn("Could not find copy target");
-        return false;
-      }
-
-      const content = decodeEntities(targetEl.innerHTML.trim());
-
-      await window.navigator.clipboard.writeText(content);
-      this.copied = true;
-
-      if (copyTimeout) {
-        clearTimeout(copyTimeout);
-      }
-
-      copyTimeout = setTimeout(() => {
-        this.copied = false;
-        this.onCopyComplete();
-      }, 1000);
-
-      return content;
-    },
-
-    onCopyComplete() {},
-  });
-}
-
-export default function clipboardComponent() {
-  return initClipboard({});
-}
-
-export { initClipboard };

data/app/assets/lookbook/js/components/params_input.js

@@ -1,23 +0,0 @@
-export default function paramsInputComponent({ name, value }) {
-  return {
-    name,
-    value,
-
-    init() {
-      this.$watch("value", () => this.update());
-    },
-
-    update() {
-      if (this.validate()) {
-        const searchParams = new URLSearchParams(window.location.search);
-        searchParams.set(this.name, this.value);
-        const path = location.href.replace(location.search, "");
-        this.navigateTo(`${path}?${searchParams.toString()}`);
-      }
-    },
-
-    validate() {
-      return this.$root.reportValidity ? this.$root.reportValidity() : true;
-    },
-  };
-}

data/app/assets/lookbook/js/components/tooltip.js

@@ -1,30 +0,0 @@
-import tippy from "../lib/tippy";
-
-function tooltipCreator({ target }) {
-  const content =
-    this.$el.dataset.tooltipText ||
-    (this.$refs.tooltip ? this.$refs.tooltip.innerHTML : null);
-  if (content) {
-    return tippy(target || this.$refs.tooltipTarget || this.$el, {
-      delay: [200, 0],
-      content,
-      theme: "tooltip",
-      triggerTarget: this.$el,
-      onShow: () => this.$store.settings.showTooltips,
-    });
-  }
-}
-
-function initTooltip(context, opts) {
-  return tooltipCreator.bind(context)(opts || {});
-}
-
-export default function tooltipComponent() {
-  return {
-    init() {
-      initTooltip(this);
-    },
-  };
-}
-
-export { initTooltip };

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

@@ -1,24 +0,0 @@
-export default {
-  desktopWidth: 768,
-  wideDesktopWidth: 1200,
-  sidebar: {
-    defaultWidth: 280,
-    minWidth: 200,
-    minSectionHeight: 200,
-  },
-  main: {
-    minWidth: 200,
-  },
-  inspector: {
-    drawer: {
-      defaultHeight: 300,
-      defaultWidth: 500,
-      minWidth: 350,
-      minHeight: 200,
-    },
-    preview: {
-      minHeight: 200,
-      minWidth: 200,
-    },
-  },
-};

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

@@ -1,22 +0,0 @@
-function getComponents(importObject, path = []) {
-  let components = {};
-  Object.keys(importObject).forEach((key) => {
-    if (key === "default") {
-      components[toCamel(path.join("_"))] = importObject[key];
-    } else {
-      components = {
-        ...components,
-        ...getComponents(importObject[key], [...path, key]),
-      };
-    }
-  });
-  return components;
-}
-
-function toCamel(s) {
-  return s.replace(/([-_][a-z])/gi, ($1) => {
-    return $1.toUpperCase().replace("-", "").replace("_", "");
-  });
-}
-
-export { getComponents };

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,16 +0,0 @@
-async function fetchHTML(url, selector) {
-  const response = await fetch(url || window.document.location);
-  if (response.ok) {
-    const html = await response.text();
-    const doc = new DOMParser().parseFromString(html, "text/html");
-    return {
-      fragment: selector ? doc.querySelector(selector).outerHTML : null,
-      title: doc.title,
-      doc,
-    };
-  } else {
-    throw new Error(`Error fetching HTML from ${url}`);
-  }
-}
-
-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)
-      ),
-    },
-  };
-}