lookbook 0.4.6 → 0.4.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 93eda55ac8a014e5027a7a1176653a8ecbf9f1b5a95b26820c68ef93f2402269
-  data.tar.gz: c5a4dde94d4ce0c84298dfe5d8592d3ccaf887fe56fa21a9cb0bbc78b797604f
+  metadata.gz: ce922c11cf8df5a1161c555189786265e51e29881c5a5e0948153fa65e855a50
+  data.tar.gz: 38fe97d9e04c6505ebc8e1b8bc877fe761db215b525117b42a044cadf7b2eb50
 SHA512:
-  metadata.gz: 704265eb0b3c0b15417b47446ac900f14ca3bf746f9bbbabbbeb563eefe672f907d01ebbe5ab70d77633235d228ca509738826d674035528b12a0eb96dfcfa17
-  data.tar.gz: 562c86882d1a2da3eb06b660006dc3d37223c80273d9aaaacafb9a85ee8a009081eecd1acfd8d451e850d34b4055400b9d9e8e5d452f7dcc66c2428a3928db7d
+  metadata.gz: d319e159fc2b87e710532dbd6c426360f2a6173e174d3e0eac05c677bdfd945cf0c5a391c426a8f987cb7539797aa10241e45cdddd55048f25af84689d0af9b2
+  data.tar.gz: 80a217bf6303a778676872bd9d6c1412a3811323903031d491e945c0788ebba20cc2ccbb059d011e823b80d74b5342994c9b42f7590fd4fbfd305166b187d345

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

@@ -56,15 +56,65 @@
   }
 }
 
-@layer utilities {
-  .h-fill {
-    height: fill-available;
+@layer components {
+  #nav > ul > li {
+    @apply py-1;
+  }
+
+  .nav-toggle {
+    @apply flex items-center cursor-pointer pr-3 hover:bg-gray-200 hover:bg-opacity-50;
+  }
+
+  .nav-label {
+    @apply truncate w-full whitespace-nowrap text-left select-none;
+  }
+
+  .code {
+    @apply font-mono;
+  }
+
+  .code pre {
+    @apply block;
+  }
+
+  .code .line {
+    @apply flex items-center leading-relaxed;
+  }
+
+  .code.numbered {
+    @apply relative pt-3;
+  }
+
+  .code.numbered:before {
+    content: "";
+    left: calc(2.7em + 8px);
+    @apply absolute top-0 bottom-0 border-r border-gray-200;
   }
 
-  .min-h-fill {
-    min-height: fill-available;
+  .code .line-number {
+    width: calc(2.7em + 8px);
+    padding-top: 3px;
+    padding-bottom: 3px;
+    padding-right: 8px;
+    margin-right: 16px;
+    @apply font-mono text-right text-gray-400 flex-none text-xs;
   }
 
+  .code .line-content {
+    @apply flex-none pr-4;
+  }
+
+  /* .code .line:before {
+    content: counter(line);
+    width: calc(3em + 8px);
+    padding-top: 2px;
+    padding-bottom: 2px;
+    padding-right: 8px;
+    @apply font-mono inline-block text-right mr-4 text-gray-400 border-r border-gray-200;
+  } */
+}
+
+@layer utilities {
   .form-input {
     @apply border-gray-300 text-gray-700 focus:ring-indigo-300 focus:border-indigo-300 rounded-sm text-sm w-full;
   }

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

@@ -1,66 +1,54 @@
 import { install } from "@github/hotkey";
 import Alpine from "alpinejs";
-import Fern from "@ryangjchandler/fern";
-import AlpineTooltip from "@ryangjchandler/alpine-tooltip";
-import AlpineClipboard from "@ryangjchandler/alpine-clipboard";
-import Screen from "./utils/screen";
-import split from "./utils/split";
-import page from "./page";
-import workbench from "./workbench";
-import preview from "./workbench/preview";
-import inspector from "./workbench/inspector";
-import param from "./workbench/param";
-import nav from "./nav";
-import navNode from "./nav/node";
-import navLeaf from "./nav/leaf";
-import sizeObserver from "./utils/size_observer";
-import reloader from "./utils/reloader";
-import clipboard from "./utils/clipboard";
-
-window.Alpine = Alpine;
+import Persist from "@alpinejs/persist";
+import Morph from "@alpinejs/morph";
+import Tooltip from "@ryangjchandler/alpine-tooltip";
+
+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 nav from "./components/nav";
+import navItem from "./components/nav-item";
+import navGroup from "./components/nav-group";
+import splitter from "./components/splitter";
+import copy from "./components/copy";
+import sizes from "./components/sizes";
+
+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";
 
 // Plugins
 
-Alpine.plugin(Fern);
-Alpine.plugin(AlpineTooltip);
-Alpine.plugin(AlpineClipboard);
-Alpine.plugin(Screen);
+Alpine.plugin(Persist);
+Alpine.plugin(Morph);
+Alpine.plugin(Tooltip);
 
 // Stores
 
-Alpine.store("page", {
-  reflowing: false,
-  doc: window.document,
-});
-
-Alpine.persistedStore("nav", {
-  width: 280,
-  filter: "",
-  open: {},
-});
-
-Alpine.persistedStore("inspector", {
-  height: 200,
-  active: "source",
-});
-
-Alpine.persistedStore("preview", {
-  width: "100%",
-});
+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));
 
-// Components & utils
+// Components
 
 Alpine.data("page", page);
-Alpine.data("nav", nav);
-Alpine.data("navNode", navNode);
-Alpine.data("navLeaf", navLeaf);
-Alpine.data("workbench", workbench);
-Alpine.data("preview", preview);
+Alpine.data("splitter", splitter);
+Alpine.data("previewWindow", previewWindow);
+Alpine.data("copy", copy);
 Alpine.data("inspector", inspector);
+Alpine.data("filter", filter);
 Alpine.data("param", param);
-Alpine.data("clipboard", clipboard);
-Alpine.data("sizeObserver", sizeObserver);
-Alpine.data("split", split);
+Alpine.data("sizes", sizes);
+Alpine.data("nav", nav);
+Alpine.data("navItem", navItem);
+Alpine.data("navGroup", navGroup);
 
 // Init
 
@@ -68,9 +56,5 @@ for (const el of document.querySelectorAll("[data-hotkey]")) {
   install(el);
 }
 
-if (window.SOCKET_PATH) {
-  reloader(window.SOCKET_PATH).start();
-}
-
 window.Alpine = Alpine;
 Alpine.start();

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

@@ -0,0 +1,16 @@
+export default function copy(id) {
+  return {
+    get content() {
+      const target = document.getElementById(id);
+      return (target ? target.innerHTML : "").trim();
+    },
+    done: false,
+    async save() {
+      await window.navigator.clipboard.writeText(this.content);
+      this.done = true;
+      setTimeout(() => {
+        this.done = false;
+      }, 1000);
+    },
+  };
+}

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

@@ -0,0 +1,24 @@
+export default function filter() {
+  return {
+    get active() {
+      return this.$store.filter.active;
+    },
+    checkEsc($event) {
+      if ($event.key === "Escape") {
+        this.active ? this.clear() : this.blur();
+      }
+    },
+    clear() {
+      this.$store.filter.raw = "";
+    },
+    focus($event) {
+      if ($event.target.tagName === "INPUT") {
+        return;
+      }
+      setTimeout(() => this.$refs.input.focus(), 0);
+    },
+    blur() {
+      setTimeout(() => this.$refs.input.blur(), 0);
+    },
+  };
+}

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

@@ -0,0 +1,21 @@
+export default function inspector() {
+  return {
+    isActivePanel(panel) {
+      return this.$store.inspector.panels.active == panel;
+    },
+    switchPanel(panel) {
+      this.$store.inspector.panels.active = panel;
+    },
+    get showSource() {
+      return this.$store.inspector.preview.source;
+    },
+    toggleSource() {
+      this.$store.inspector.preview.source =
+        !this.$store.inspector.preview.source;
+    },
+    preview: {
+      width: null,
+      height: null,
+    },
+  };
+}

data/app/assets/lookbook/js/{nav/node.js → components/nav-group.js}

@@ -1,13 +1,17 @@
-export default function navNode() {
+import { getAlpineData } from "../lib/utils";
+
+export default function navGroup() {
   return {
-    id: null,
-    hidden: true,
+    hidden: false,
     children: [],
-    init() {
-      this.id = this.$el.id;
+    get id() {
+      return this.$root.id;
     },
-    open() {
-      return this.$store.nav.open[this.id];
+    get open() {
+      return this.$store.nav.isOpen(this.id);
+    },
+    toggle() {
+      this.$store.nav.toggle(this.id);
     },
     getChildren() {
       return this.$refs.items
@@ -15,29 +19,26 @@ export default function navNode() {
         : [];
     },
     navigateToFirstChild() {
-      if (this.open()) {
+      if (this.open) {
         const child = this.firstVisibleChild();
         if (child) {
           const link = child.querySelector(":scope > a.nav-link");
           if (link) {
-            this.navigate(link.getAttribute("href"));
+            this.setLocation(link.getAttribute("href"));
           }
         }
       }
     },
-    filter() {
+    filter(text) {
       this.hidden = true;
       this.getChildren().forEach((child) => {
-        const data = child._x_dataStack[0];
-        data.filter();
+        const data = getAlpineData(child);
+        data.filter(text);
         if (!data.hidden) {
           this.hidden = false;
         }
       });
     },
-    toggle() {
-      this.$store.nav.open[this.id] = !this.$store.nav.open[this.id];
-    },
     firstVisibleChild() {
       return this.getChildren().find((child) => {
         return child._x_dataStack

data/app/assets/lookbook/js/components/nav-item.js

@@ -0,0 +1,26 @@
+export default function navItem(matchers) {
+  return {
+    hidden: false,
+    get id() {
+      return this.$root.id;
+    },
+    get path() {
+      return this.$root.getAttribute("data-path");
+    },
+    get active() {
+      return this.$store.nav.active === this.id;
+    },
+    navigate() {
+      this.setLocation(this.path);
+      this.$store.sidebar.open = false;
+    },
+    filter(text) {
+      if (text.length) {
+        const matched = matchers.map((m) => m.includes(text));
+        this.hidden = !matched.filter((m) => m).length;
+      } else {
+        this.hidden = false;
+      }
+    },
+  };
+}

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

@@ -0,0 +1,35 @@
+import { getAlpineData } from "../lib/utils";
+
+export default function nav() {
+  return {
+    empty: false,
+    init() {
+      this.$watch("$store.filter.text", () => this.filter());
+      this.$nextTick(() => {
+        this.setActive();
+        this.filter();
+      });
+    },
+    filter() {
+      this.empty = true;
+      this.getChildren().forEach((child) => {
+        const data = getAlpineData(child);
+        data.filter(this.$store.filter.text);
+        if (!data.hidden) {
+          this.empty = false;
+        }
+      });
+    },
+    getChildren() {
+      return this.$refs.items
+        ? Array.from(this.$refs.items.querySelectorAll(":scope > li"))
+        : [];
+    },
+    setActive() {
+      const target = this.$el.querySelector(
+        `[data-path="${window.location.pathname}"]`
+      );
+      this.$store.nav.active = target ? target.id : "";
+    },
+  };
+}

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

@@ -0,0 +1,33 @@
+import createSocket from "../lib/socket";
+
+export default function page() {
+  return {
+    init() {
+      const socket = createSocket(window.SOCKET_PATH);
+      socket.addListener("Lookbook::ReloadChannel", () => this.refresh());
+    },
+    async update() {
+      const response = await fetch(window.document.location);
+      if (!response.ok) return window.location.reload();
+      const html = await response.text();
+      this.morph(new DOMParser().parseFromString(html, "text/html"));
+    },
+    setLocation(loc) {
+      const path = loc instanceof Event ? loc.currentTarget.href : loc;
+      history.pushState({}, null, path);
+      this.$dispatch("popstate");
+    },
+    refresh() {
+      this.$dispatch("popstate");
+    },
+    morph(dom) {
+      const pageHtml = dom.getElementById(this.$root.id).outerHTML;
+      Alpine.morph(this.$root, pageHtml, {
+        key(el) {
+          return el.getAttribute("key") ? el.getAttribute("key") : el.id;
+        },
+      });
+      this.$dispatch("page:morphed");
+    },
+  };
+}

data/app/assets/lookbook/js/{workbench → components}/param.js

@@ -1,16 +1,15 @@
 export default function param() {
   return {
-    focused: false,
     setFocus() {
-      if (this.focused && this.$el.focus) {
-        this.$el.focus();
+      if (this.$refs.input) {
+        setTimeout(() => this.$refs.input.focus(), 0);
       }
     },
     update(name, value) {
       const searchParams = new URLSearchParams(window.location.search);
       searchParams.set(name, value);
       const path = location.href.replace(location.search, "");
-      this.navigateTo(`${path}?${searchParams.toString()}`);
+      this.setLocation(`${path}?${searchParams.toString()}`);
     },
     validate() {
       return this.$el.reportValidity ? this.$el.reportValidity() : true;

data/app/assets/lookbook/js/{workbench/preview.js → components/preview-window.js}

@@ -1,33 +1,32 @@
 export default function preview() {
-  const app = Alpine.store("page");
-  const preview = Alpine.store("preview");
   return {
-    init() {
-      this.root = this.$el;
-    },
     onResize(e) {
       const size =
         this.resizeStartSize - (this.resizeStartPosition - e.pageX) * 2;
-      const parentSize = this.root.parentElement.clientWidth;
+      const parentSize = this.$root.parentElement.clientWidth;
       const percentSize = (Math.round(size) / parentSize) * 100;
       const minWidth = (300 / parentSize) * 100;
-      preview.width = `${Math.min(Math.max(percentSize, minWidth), 100)}%`;
+      this.$store.inspector.preview.width = `${Math.min(
+        Math.max(percentSize, minWidth),
+        100
+      )}%`;
     },
     onResizeStart(e) {
-      app.reflowing = true;
+      this.$store.layout.reflowing = true;
       this.onResize = this.onResize.bind(this);
       this.onResizeEnd = this.onResizeEnd.bind(this);
       this.resizeStartPosition = e.pageX;
-      this.resizeStartSize = this.root.clientWidth;
+      this.resizeStartSize = this.$root.clientWidth;
       window.addEventListener("pointermove", this.onResize);
       window.addEventListener("pointerup", this.onResizeEnd);
     },
     onResizeEnd() {
       window.removeEventListener("pointermove", this.onResize);
       window.removeEventListener("pointerup", this.onResizeEnd);
-      app.reflowing = false;
+      this.$store.layout.reflowing = false;
     },
     toggleFullWidth() {
+      const preview = this.$store.inspector.preview;
       if (preview.width === "100%" && preview.lastWidth) {
         preview.width = preview.lastWidth;
       } else {

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

@@ -0,0 +1,3 @@
+export default function sidebar() {
+  return {};
+}

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

@@ -0,0 +1,16 @@
+export default function sizeObserver() {
+  return {
+    width: 0,
+    height: 0,
+    init() {
+      const ro = new ResizeObserver((entries) => {
+        const rect = entries[0].contentRect;
+        this.width = Math.round(rect.width);
+        this.height = Math.round(rect.height);
+      });
+      ro.observe(this.$el);
+      this.width = Math.round(this.$el.clientWidth);
+      this.height = Math.round(this.$el.clientHeight);
+    },
+  };
+}

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

@@ -0,0 +1,25 @@
+import Split from "split-grid";
+
+export default function splitter(direction, props = {}) {
+  return {
+    splits: [],
+    init() {
+      const type = `${direction === "vertical" ? "column" : "row"}Gutters`;
+      const element = this.$el;
+      Split({
+        [type]: [{ track: 1, element }],
+        minSize: props.minSize || 0,
+        writeStyle() {},
+        onDrag: (dir, track, style) => {
+          this.splits = style.split(" ").map((num) => parseInt(num));
+        },
+        onDragStart: () => {
+          this.$store.layout.reflowing = true;
+        },
+        onDragEnd: () => {
+          this.$store.layout.reflowing = false;
+        },
+      });
+    },
+  };
+}

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

@@ -0,0 +1,14 @@
+export default {
+  desktopWidth: 768,
+  sidebar: {
+    defaultWidth: 280,
+    minWidth: 200,
+    maxWidth: 500,
+  },
+  inspector: {
+    tabs: {
+      default: "source",
+      defaultHeight: 200,
+    },
+  },
+};

data/app/assets/lookbook/js/{utils/reloader.js → lib/socket.js}

@@ -1,21 +1,16 @@
 import { createConsumer } from "@rails/actioncable";
 import debounce from "debounce";
 
-export default function (endpoint) {
+export default function socket(endpoint) {
   const uid = (Date.now() + ((Math.random() * 100) | 0)).toString();
   const consumer = createConsumer(`${endpoint}?uid=${uid}`);
-
   return {
-    uid,
-    consumer,
-    start() {
-      const received = debounce(() => {
-        console.log("Lookbook files changed");
-        document.dispatchEvent(new CustomEvent("refresh"));
-      }, 300);
-
-      consumer.subscriptions.create("Lookbook::ReloadChannel", {
-        received,
+    addListener(channel, callback) {
+      consumer.subscriptions.create(channel, {
+        received: debounce((data) => {
+          console.log("Lookbook files changed");
+          callback(data);
+        }, 300),
         connected() {
           console.log("Lookbook websocket connected");
         },

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

@@ -0,0 +1,21 @@
+import Split from "split-grid";
+
+export default function (element, props) {
+  Split({
+    [`${props.direction === "vertical" ? "row" : "column"}Gutters`]: [
+      { track: 1, element },
+    ],
+    minSize: props.minSize,
+    writeStyle() {},
+    onDrag(dir, track, style) {
+      const splits = style.split(" ").map((num) => parseInt(num));
+      props.onDrag(splits);
+    },
+    // onDragStart() {
+    //   this.reflowing = true;
+    // },
+    // onDragEnd() {
+    //   this.reflowing = false;
+    // },
+  });
+}

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

@@ -0,0 +1,3 @@
+export function getAlpineData(el) {
+  return el._x_dataStack[0];
+}

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

@@ -0,0 +1,11 @@
+export default function createFilterStore(Alpine) {
+  return {
+    raw: Alpine.$persist("").as("filter-text"),
+    get text() {
+      return this.raw.replace(/\s/g, "").toLowerCase();
+    },
+    get active() {
+      return this.text.length > 0;
+    },
+  };
+}

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

@@ -0,0 +1,17 @@
+import config from "../config";
+
+export default function createInspectorStore(Alpine) {
+  const { tabs } = config.inspector;
+  return {
+    panels: {
+      active: Alpine.$persist(tabs.default).as("inspector-panel-active"),
+      height: Alpine.$persist(tabs.defaultHeight).as("inspector-height"),
+    },
+    preview: {
+      width: Alpine.$persist("100%").as("preview-width"),
+      height: Alpine.$persist("100%").as("preview-height"),
+      source: Alpine.$persist(false).as("preview-source"),
+      lastWidth: null,
+    },
+  };
+}

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

@@ -0,0 +1,12 @@
+import config from "../config";
+
+export default function createLayoutStore() {
+  return {
+    init() {
+      this.desktop = window.innerWidth >= config.desktopWidth;
+    },
+    reflowing: false,
+    desktop: true,
+    desktopWidth: config.desktopWidth,
+  };
+}

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

@@ -0,0 +1,21 @@
+export default function createNavStore(Alpine) {
+  return {
+    open: Alpine.$persist([]).as("nav-open"),
+    active: Alpine.$persist(null).as("nav-active"),
+    isOpen(id) {
+      return this.open.includes(id);
+    },
+    setOpen(id) {
+      this.open.push(id);
+    },
+    setClosed(id) {
+      const index = this.open.indexOf(id);
+      if (index > -1) {
+        this.open.splice(index, 1);
+      }
+    },
+    toggle(id) {
+      this.isOpen(id) ? this.setClosed(id) : this.setOpen(id);
+    },
+  };
+}