lookbook 2.0.0.beta.6 → 2.0.0.beta.7

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";

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/lib/lookbook/version.rb

@@ -1,3 +1,3 @@
 module Lookbook
-  VERSION = "2.0.0.beta.6"
+  VERSION = "2.0.0.beta.7"
 end

data/public/lookbook-assets/js/index.js

@@ -7815,7 +7815,17 @@ function $12b7aa006b8a97e1$var$toCamel(s) {
 }
 
 
-var $52abf2efa3492135$exports = {};
+var $28969a71dc98c66d$exports = {};
+var $99486586f6691564$exports = {};
+
+$parcel$defineInteropFlag($99486586f6691564$exports);
+
+$parcel$export($99486586f6691564$exports, "default", () => $99486586f6691564$export$2e2bcd8739ae039);
+function $99486586f6691564$export$2e2bcd8739ae039() {
+    return {};
+}
+
+
 var $cbd28b10fa9798c7$exports = {};
 
 $parcel$defineInteropFlag($cbd28b10fa9798c7$exports);
@@ -11346,16 +11356,6 @@ function $cbd28b10fa9798c7$export$2e2bcd8739ae039() {
 }
 
 
-var $99486586f6691564$exports = {};
-
-$parcel$defineInteropFlag($99486586f6691564$exports);
-
-$parcel$export($99486586f6691564$exports, "default", () => $99486586f6691564$export$2e2bcd8739ae039);
-function $99486586f6691564$export$2e2bcd8739ae039() {
-    return {};
-}
-
-
 var $47a1c62621be0c54$exports = {};
 
 $parcel$defineInteropFlag($47a1c62621be0c54$exports);
@@ -12336,9 +12336,9 @@ function $6d64716f0b34fdf4$export$2e2bcd8739ae039(store) {
 }
 
 
-$52abf2efa3492135$exports = {
-    "button": $cbd28b10fa9798c7$exports,
+$28969a71dc98c66d$exports = {
     "code": $99486586f6691564$exports,
+    "button": $cbd28b10fa9798c7$exports,
     "copy_button": $47a1c62621be0c54$exports,
     "dimensions_display": $e398acaded942bbe$exports,
     "embed_code_dropdown": $216ef7001f59f21d$exports,
@@ -13521,7 +13521,7 @@ const $22969b543678f572$var$prefix = window.APP_NAME;
 // Components
 (0, $caa9439642c6336c$export$2e2bcd8739ae039).data("app", (0, $5792afa4170ed552$export$2e2bcd8739ae039));
 [
-    $52abf2efa3492135$exports,
+    $28969a71dc98c66d$exports,
     $f3e1e32f4a1bd6da$exports,
     $338da9a25bc5c332$exports
 ].forEach((scripts)=>{