lookbook 0.8.3 → 1.0.0.beta.1

data/app/assets/lookbook/css/lookbook.css

@@ -0,0 +1,55 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
+@import "./tooltip.css";
+
+@import-glob "../../../components/lookbook/**/*/component.css";
+
+@layer base {
+  html {
+    @apply scroll-smooth h-screen;
+  }
+
+  @media screen and (prefers-reduced-motion: reduce) {
+    html {
+      @apply scroll-auto;
+    }
+  }
+
+  body {
+    @apply text-lookbook-text font-sans text-sm antialiased overflow-hidden;
+  }
+
+  [x-cloak] {
+    @apply !hidden;
+  }
+
+  pre[class*="language-"] {
+    @apply !p-0 !m-0;
+  }
+
+  ::-webkit-scrollbar {
+    @apply w-1 h-1;
+  }
+
+  ::-webkit-scrollbar-track {
+    @apply bg-transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    @apply transition-colors rounded-full	bg-clip-content bg-lookbook-scrollbar;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    @apply bg-lookbook-scrollbar-hover;
+  }
+}
+
+@layer components {
+  .form-input {
+    @apply text-lookbook-input-text placeholder:text-lookbook-input-text-placeholder placeholder:italic;
+    @apply border-lookbook-input-border focus:ring-lookbook-input-border-focus focus:border-lookbook-input-border-focus;
+    @apply rounded-md text-sm w-full bg-lookbook-input;
+  }
+}

data/app/assets/lookbook/css/themes/blue.css

@@ -0,0 +1,42 @@
+:root {
+  --lookbook-text: theme("colors.zinc.800");
+  --lookbook-divider: theme("colors.zinc.300");
+  --lookbook-button-text: theme("colors.zinc.400");
+  --lookbook-button-text-hover: theme("colors.blue.600");
+  --lookbook-tooltip: theme("colors.blue.500");
+  --lookbook-tooltip-text: theme("colors.white");
+  --lookbook-scrollbar: theme("colors.zinc.200");
+  --lookbook-scrollbar-hover: theme("colors.zinc.300");
+  --lookbook-toolbar: theme("colors.white");
+  --lookbook-toolbar-divider: var(--lookbook-divider);
+  --lookbook-nav-text: var(--lookbook-text);
+  --lookbook-nav-toggle: theme("colors.zinc.500");
+  --lookbook-nav-icon: theme("colors.blue.500");
+  --lookbook-nav-item-hover: theme("colors.zinc.100");
+  --lookbook-nav-item-active: theme("colors.blue.50");
+  --lookbook-input: theme("colors.white");
+  --lookbook-input-border: theme("colors.zinc.300");
+  --lookbook-input-border-focus: theme("colors.blue.200");
+  --lookbook-input-text: theme("colors.zinc.600");
+  --lookbook-input-text-placeholder: theme("colors.zinc.400");
+  --lookbook-input-toggle: theme("colors.zinc.300");
+  --lookbook-input-toggle-active: theme("colors.blue.500");
+  --lookbook-prose: theme("colors.white");
+  --lookbook-prose-text: theme("colors.zinc.600");
+  --lookbook-prose-link: theme("colors.blue.900");
+  --lookbook-tabs-text: theme("colors.zinc.500");
+  --lookbook-tabs-text-hover: theme("colors.zinc.700");
+  --lookbook-tabs-text-disabled: theme("colors.zinc.300");
+  --lookbook-tabs-highlight: theme("colors.blue.400");
+  --lookbook-viewport-handle: theme("colors.white");
+  --lookbook-viewport-handle-icon: theme("colors.zinc.300");
+  --lookbook-viewport-handle-icon-hover: theme("colors.zinc.700");
+  --lookbook-sidebar: theme("colors.zinc.50");
+  --lookbook-page: theme("colors.white");
+  --lookbook-drawer: theme("colors.zinc.50");
+  --lookbook-header: theme("colors.blue.600");
+  --lookbook-header-text: theme("colors.white");
+  --lookbook-header-border: theme("colors.blue.700");
+  --lookbook-branding-text: var(--lookbook-header-text);
+  --lookbook-draggable-hint: rgb(224 231 255 / 0.2);
+}

data/app/assets/lookbook/css/themes/indigo.css

@@ -0,0 +1,42 @@
+:root {
+  --lookbook-text: theme("colors.zinc.800");
+  --lookbook-divider: theme("colors.zinc.300");
+  --lookbook-button-text: theme("colors.zinc.400");
+  --lookbook-button-text-hover: theme("colors.indigo.600");
+  --lookbook-tooltip: theme("colors.indigo.500");
+  --lookbook-tooltip-text: theme("colors.white");
+  --lookbook-scrollbar: theme("colors.zinc.200");
+  --lookbook-scrollbar-hover: theme("colors.zinc.300");
+  --lookbook-toolbar: theme("colors.white");
+  --lookbook-toolbar-divider: var(--lookbook-divider);
+  --lookbook-nav-text: var(--lookbook-text);
+  --lookbook-nav-toggle: theme("colors.zinc.500");
+  --lookbook-nav-icon: theme("colors.indigo.500");
+  --lookbook-nav-item-hover: theme("colors.zinc.100");
+  --lookbook-nav-item-active: theme("colors.indigo.50");
+  --lookbook-input: theme("colors.white");
+  --lookbook-input-border: theme("colors.zinc.300");
+  --lookbook-input-border-focus: theme("colors.indigo.200");
+  --lookbook-input-text: theme("colors.zinc.600");
+  --lookbook-input-text-placeholder: theme("colors.zinc.400");
+  --lookbook-input-toggle: theme("colors.zinc.300");
+  --lookbook-input-toggle-active: theme("colors.indigo.500");
+  --lookbook-prose: theme("colors.white");
+  --lookbook-prose-text: theme("colors.zinc.600");
+  --lookbook-prose-link: theme("colors.indigo.900");
+  --lookbook-tabs-text: theme("colors.zinc.500");
+  --lookbook-tabs-text-hover: theme("colors.zinc.700");
+  --lookbook-tabs-text-disabled: theme("colors.zinc.300");
+  --lookbook-tabs-highlight: theme("colors.indigo.400");
+  --lookbook-viewport-handle: theme("colors.white");
+  --lookbook-viewport-handle-icon: theme("colors.zinc.300");
+  --lookbook-viewport-handle-icon-hover: theme("colors.zinc.700");
+  --lookbook-sidebar: theme("colors.zinc.50");
+  --lookbook-page: theme("colors.white");
+  --lookbook-drawer: theme("colors.zinc.50");
+  --lookbook-header: theme("colors.indigo.600");
+  --lookbook-header-text: theme("colors.white");
+  --lookbook-header-border: theme("colors.indigo.700");
+  --lookbook-branding-text: var(--lookbook-header-text);
+  --lookbook-draggable-hint: rgb(224 231 255 / 0.2);
+}

data/app/assets/lookbook/css/themes/zinc.css

@@ -0,0 +1,42 @@
+:root {
+  --lookbook-text: theme("colors.zinc.800");
+  --lookbook-divider: theme("colors.zinc.300");
+  --lookbook-button-text: theme("colors.zinc.400");
+  --lookbook-button-text-hover: theme("colors.zinc.600");
+  --lookbook-tooltip: theme("colors.zinc.500");
+  --lookbook-tooltip-text: theme("colors.white");
+  --lookbook-scrollbar: theme("colors.zinc.200");
+  --lookbook-scrollbar-hover: theme("colors.zinc.300");
+  --lookbook-toolbar: theme("colors.white");
+  --lookbook-toolbar-divider: var(--lookbook-divider);
+  --lookbook-nav-text: var(--lookbook-text);
+  --lookbook-nav-toggle: theme("colors.zinc.500");
+  --lookbook-nav-icon: theme("colors.zinc.500");
+  --lookbook-nav-item-hover: theme("colors.zinc.100");
+  --lookbook-nav-item-active: theme("colors.zinc.50");
+  --lookbook-input: theme("colors.white");
+  --lookbook-input-border: theme("colors.zinc.300");
+  --lookbook-input-border-focus: theme("colors.zinc.200");
+  --lookbook-input-text: theme("colors.zinc.600");
+  --lookbook-input-text-placeholder: theme("colors.zinc.400");
+  --lookbook-input-toggle: theme("colors.zinc.300");
+  --lookbook-input-toggle-active: theme("colors.zinc.500");
+  --lookbook-prose: theme("colors.white");
+  --lookbook-prose-text: theme("colors.zinc.600");
+  --lookbook-prose-link: theme("colors.zinc.900");
+  --lookbook-tabs-text: theme("colors.zinc.500");
+  --lookbook-tabs-text-hover: theme("colors.zinc.700");
+  --lookbook-tabs-text-disabled: theme("colors.zinc.300");
+  --lookbook-tabs-highlight: theme("colors.zinc.400");
+  --lookbook-viewport-handle: theme("colors.white");
+  --lookbook-viewport-handle-icon: theme("colors.zinc.300");
+  --lookbook-viewport-handle-icon-hover: theme("colors.zinc.700");
+  --lookbook-sidebar: theme("colors.zinc.50");
+  --lookbook-page: theme("colors.white");
+  --lookbook-drawer: theme("colors.zinc.50");
+  --lookbook-header: theme("colors.zinc.600");
+  --lookbook-header-text: theme("colors.white");
+  --lookbook-header-border: theme("colors.zinc.700");
+  --lookbook-branding-text: var(--lookbook-header-text);
+  --lookbook-draggable-hint: rgb(224 231 255 / 0.2);
+}

data/app/assets/lookbook/css/{tooltip_theme.css → tooltip.css}

@@ -1,29 +1,35 @@
-.tippy-box[data-theme~="lookbook"] {
-  @apply bg-indigo-500 text-white text-xs opacity-90;
+@import "tippy.js/dist/tippy";
+@import "tippy.js/dist/border";
+
+.tippy-box[data-theme~="tooltip"] {
+  @apply text-xs opacity-90;
+
+  background-color: var(--lookbook-tooltip);
+  color: var(--lookbook-tooltip-text);
 
   &[data-placement^="top"] > .tippy-arrow::before {
-    border-top-color: theme("colors.indigo.500");
+    border-top-color: var(--lookbook-tooltip);
   }
 
   &[data-placement^="bottom"] > .tippy-arrow::before {
-    border-bottom-color: theme("colors.indigo.500");
+    border-bottom-color: var(--lookbook-tooltip);
   }
 
   &[data-placement^="left"] > .tippy-arrow::before {
-    border-left-color: theme("colors.indigo.500");
+    border-left-color: var(--lookbook-tooltip);
   }
 
   &[data-placement^="right"] > .tippy-arrow::before {
-    border-right-color: theme("colors.indigo.500");
+    border-right-color: var(--lookbook-tooltip);
   }
 }
 
 .tippy-box[data-theme~="menu"] {
   border: 1px solid theme("colors.gray.300");
-  @apply bg-white text-gray-600 shadow-md rounded;
+  @apply bg-white text-gray-600 shadow-lg;
 
   & > .tippy-content {
-    padding: 0;
+    @apply rounded p-0 overflow-hidden;
   }
 
   &[data-placement^="top"] > .tippy-arrow::before {

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

@@ -1,72 +1,75 @@
-import { install } from "@github/hotkey";
-import Alpine from "alpinejs";
-import Persist from "@alpinejs/persist";
-import Morph from "@alpinejs/morph";
-import Tooltip from "@ryangjchandler/alpine-tooltip";
+import createSocket from "./lib/socket";
+import { morph } from "./helpers/dom";
+import { fetchHTML } from "./helpers/request";
+import { isExternalLink } from "./helpers/dom";
 
-import app from "./components/app";
-import page from "./components/page";
-import inspector from "./components/inspector";
-import previewWindow from "./components/preview-window";
-import filter from "./components/filter";
-import param from "./components/param";
-import sidebar from "./components/sidebar";
-import nav from "./components/nav";
-import navItem from "./components/nav-item";
-import navGroup from "./components/nav-group";
-import splitter from "./components/splitter";
-import tabs from "./components/tabs";
-import copy from "./components/copy";
-import code from "./components/code";
-import sizes from "./components/sizes";
-import embed from "./components/embed";
+export default function app() {
+  return {
+    version: Alpine.$persist("").as("lookbook-version"),
 
-import initFilterStore from "./stores/filter";
-import initLayoutStore from "./stores/layout";
-import initNavStore from "./stores/nav";
-import initSidebarStore from "./stores/sidebar";
-import initInspectorStore from "./stores/inspector";
-import initPagesStore from "./stores/pages";
+    location: window.location,
 
-// Plugins
+    init() {
+      if (window.SOCKET_PATH) {
+        const socket = createSocket(window.SOCKET_PATH);
+        socket.addListener("Lookbook::ReloadChannel", () => this.updateDOM());
+      }
+    },
 
-Alpine.plugin(Persist);
-Alpine.plugin(Morph);
-Alpine.plugin(Tooltip);
+    navigateTo(path) {
+      this.debug(`Navigating to ${path}`);
+      history.pushState({}, null, path);
+      this.$dispatch("popstate");
+    },
 
-// Stores
+    async handleNavigation() {
+      this.debug("Navigating to ", window.location.pathname);
+      this.$dispatch("navigation:start");
+      this.location = window.location;
+      await this.updateDOM();
+      this.$dispatch("navigation:complete");
+    },
 
-Alpine.store("filter", initFilterStore(Alpine));
-Alpine.store("layout", initLayoutStore(Alpine));
-Alpine.store("nav", initNavStore(Alpine));
-Alpine.store("sidebar", initSidebarStore(Alpine));
-Alpine.store("inspector", initInspectorStore(Alpine));
-Alpine.store("pages", initPagesStore(Alpine));
+    hijax(evt) {
+      const link = evt.target.closest("a[href]");
+      if (link && !isExternalLink(link)) {
+        evt.preventDefault();
+        this.navigateTo(link.href);
+      }
+    },
 
-// Components
+    async updateDOM() {
+      this.debug("Starting DOM update");
+      this.$dispatch("dom:update-start");
+      try {
+        const { fragment, title } = await fetchHTML(
+          window.location,
+          `#${this.$root.id}`
+        );
+        morph(this.$root, fragment);
+        document.title = title;
+        this.$dispatch("dom:update-complete");
+        this.debug("DOM update complete");
+      } catch (err) {
+        this.error(err);
+        window.location.reload();
+      }
+    },
 
-Alpine.data("app", app);
-Alpine.data("page", page);
-Alpine.data("sidebar", sidebar);
-Alpine.data("splitter", splitter);
-Alpine.data("previewWindow", previewWindow);
-Alpine.data("copy", copy);
-Alpine.data("code", code);
-Alpine.data("inspector", inspector);
-Alpine.data("filter", filter);
-Alpine.data("param", param);
-Alpine.data("sizes", sizes);
-Alpine.data("nav", nav);
-Alpine.data("tabs", tabs);
-Alpine.data("navItem", navItem);
-Alpine.data("navGroup", navGroup);
-Alpine.data("embed", embed);
+    toggleSidebar() {
+      this.$store.layout.sidebar.hidden = !this.$store.layout.sidebar.hidden;
+    },
 
-// Init
+    closeMobileSidebar() {
+      if (this.$store.layout.mobile && !this.sidebarHidden) {
+        this.toggleSidebar();
+      }
+    },
 
-for (const el of document.querySelectorAll("[data-hotkey]")) {
-  install(el);
-}
+    get sidebarHidden() {
+      return this.$store.layout.sidebar.hidden;
+    },
 
-window.Alpine = Alpine;
-Alpine.start();
+    ...Alpine.$log,
+  };
+}

data/app/assets/lookbook/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.innerText.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/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/app/assets/lookbook/js/config.js

@@ -1,21 +1,24 @@
 export default {
   desktopWidth: 768,
+  wideDesktopWidth: 1200,
   sidebar: {
     defaultWidth: 280,
     minWidth: 200,
-    maxWidth: 350,
+    minSectionHeight: 200,
+  },
+  main: {
+    minWidth: 200,
   },
   inspector: {
     drawer: {
-      orientation: "horizontal",
-      defaultPanel: "source",
       defaultHeight: 300,
       defaultWidth: 500,
       minWidth: 350,
       minHeight: 200,
     },
     preview: {
-      defaultPanel: "preview",
+      minHeight: 200,
+      minWidth: 200,
     },
   },
 };

data/app/assets/lookbook/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/app/assets/lookbook/js/helpers/dom.js

@@ -0,0 +1,45 @@
+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 &&
+        el.getAttribute("data-morph-strategy") === "replace"
+      ) {
+        el.innerHTML = toEl.innerHTML;
+        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.getAttribute("target") === "_blank") {
+    return true;
+  }
+  if (link.href) {
+    return link.host !== window.location.host;
+  }
+  return false;
+}
+
+export { morph, getElementSize, isExternalLink };

data/app/assets/lookbook/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/app/assets/lookbook/js/helpers/request.js

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,11 @@
+function decodeEntities(content) {
+  var txt = document.createElement("textarea");
+  txt.innerHTML = content;
+  return txt.value;
+}
+
+function prefixString(string, prefix = null) {
+  return prefix ? `${prefix}-${string}` : string;
+}
+
+export { prefixString, decodeEntities };

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

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

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

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