lookbook 2.0.0.beta.6 → 2.0.0.beta.8

data/assets/icons/x-octagon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>

data/assets/icons/x-square.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><line x1="9" y1="9" x2="15" y2="15"/><line x1="15" y1="9" x2="9" y2="15"/></svg>

data/assets/icons/x.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>

data/assets/icons/youtube.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 19c-2.3 0-6.4-.2-8.1-.6-.7-.2-1.2-.7-1.4-1.4-.3-1.1-.5-3.4-.5-5s.2-3.9.5-5c.2-.7.7-1.2 1.4-1.4C5.6 5.2 9.7 5 12 5s6.4.2 8.1.6c.7.2 1.2.7 1.4 1.4.3 1.1.5 3.4.5 5s-.2 3.9-.5 5c-.2.7-.7 1.2-1.4 1.4-1.7.4-5.8.6-8.1.6 0 0 0 0 0 0z"/><polygon points="10 15 15 12 10 9"/></svg>

data/assets/icons/zap-off.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><polyline points="12.41 6.75 13 2 10.57 4.92"/><polyline points="18.57 12.91 21 10 15.66 10"/><polyline points="8 8 3 14 12 14 11 22 16 16"/><line x1="2" y1="2" x2="22" y2="22"/></svg>

data/assets/icons/zap.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>

data/assets/icons/zoom-in.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="11" y1="8" x2="11" y2="14"/><line x1="8" y1="11" x2="14" y2="11"/></svg>

data/assets/icons/zoom-out.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="8" y1="11" x2="14" y2="11"/></svg>

data/assets/img/favicon_dark.svg

@@ -0,0 +1 @@
+<svg viewBox='0 0 167 204' xmlns='http://www.w3.org/2000/svg'><g fill='#FFF' fill-rule='nonzero'><path d='M157 0c5.523 0 10 4.477 10 10v184c0 5.523-4.477 10-10 10H32.969C17 204 3.687 192.638.65 177.554A9.97 9.97 0 0 1 0 174c0-.512.011-1.017.033-1.516A33.115 33.115 0 0 1 0 171V33C0 14.778 14.758 0 32.969 0H157Zm-10 166H32.969c-8.292 0-12.22 2.22-12.871 6.606.79 6.424 6.253 11.394 12.87 11.394H147v-18Zm0-146H32.969c-7.056 0-12.8 5.65-12.965 12.689L20 33v114.762c3.932-1.167 8.3-1.762 12.969-1.762H147V20Z'/><path d='M64.022 126c-4.107 0-7.304-1.143-9.591-3.428-2.287-2.285-3.431-5.48-3.431-9.583l.14-63.978c0-4.197 1.12-7.415 3.36-9.653C56.74 37.119 59.916 36 64.023 36c4.2 0 7.398 1.12 9.592 3.358 2.193 2.238 3.29 5.456 3.29 9.653l-.14 55.584h34.166c3.547 0 6.277.91 8.19 2.728 1.915 1.819 2.871 4.454 2.871 7.905 0 3.45-.956 6.109-2.87 7.974-1.914 1.865-4.644 2.798-8.191 2.798H64.022Z'/></g></svg>

data/assets/img/favicon_light.svg

@@ -0,0 +1 @@
+<svg viewBox='0 0 167 204' xmlns='http://www.w3.org/2000/svg'><g fill='#222222' fill-rule='nonzero'><path d='M157 0c5.523 0 10 4.477 10 10v184c0 5.523-4.477 10-10 10H32.969C17 204 3.687 192.638.65 177.554A9.97 9.97 0 0 1 0 174c0-.512.011-1.017.033-1.516A33.115 33.115 0 0 1 0 171V33C0 14.778 14.758 0 32.969 0H157Zm-10 166H32.969c-8.292 0-12.22 2.22-12.871 6.606.79 6.424 6.253 11.394 12.87 11.394H147v-18Zm0-146H32.969c-7.056 0-12.8 5.65-12.965 12.689L20 33v114.762c3.932-1.167 8.3-1.762 12.969-1.762H147V20Z'/><path d='M64.022 126c-4.107 0-7.304-1.143-9.591-3.428-2.287-2.285-3.431-5.48-3.431-9.583l.14-63.978c0-4.197 1.12-7.415 3.36-9.653C56.74 37.119 59.916 36 64.023 36c4.2 0 7.398 1.12 9.592 3.358 2.193 2.238 3.29 5.456 3.29 9.653l-.14 55.584h34.166c3.547 0 6.277.91 8.19 2.728 1.915 1.819 2.871 4.454 2.871 7.905 0 3.45-.956 6.109-2.87 7.974-1.914 1.865-4.644 2.798-8.191 2.798H64.022Z'/></g></svg>

data/assets/js/app.js

@@ -0,0 +1,112 @@
+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/assets/js/components/clipboard.js

@@ -0,0 +1,47 @@
+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/assets/js/components/params_input.js

@@ -0,0 +1,23 @@
+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/assets/js/components/tooltip.js

@@ -0,0 +1,30 @@
+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/assets/js/config.js

@@ -0,0 +1,24 @@
+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/assets/js/helpers/build.js

@@ -0,0 +1,22 @@
+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/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) {
+  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/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,123 @@
+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/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";