lookbook 0.4.5 → 0.5.0.beta.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 676b8a78237532971ec7d22d7265b3da7d3b896aa8020d7ab1c514edc3859b45
-  data.tar.gz: dfb016bf927d7492afdeacd3b10a2425563e227b5cbd4ebd4d3f7a5bfa97609f
+  metadata.gz: 95624cc7d6d6e9389e87c3b13c6f4980f0be8ae2f13ac81757a9ed7acbaf554d
+  data.tar.gz: e8e8c6787b96e23fc3d71bc3b47c4a9253ef8a607f8f41c292c52e2ecc99549d
 SHA512:
-  metadata.gz: 2e5aeb26c2db3322e7aa127e176b691744d5af3cfbd207159f65d0e9dee1362382f418b07bda2fa7b75d7f85b35f522efe106707e665c6e12f9ab5e4ca1f4cd1
-  data.tar.gz: be2908ed45f9645dd9387adf6547c8c45ba262310325438197de22d6db9909705fa3e45de0912914004d516c4546618ccc73fd96fea3fbdc86f2affa5e7ebb3d
+  metadata.gz: 5ac7b680d183349e374b1a2368b2839fa9c9ec8790f53cbf76a97171c0da7375cf6599d2e4936e2fcb1a0dca685aae9d37cfd54672e68ef0e935086af43b60bc
+  data.tar.gz: 03bee3f6b73191fc5bcfd5afed389fee54b3ec41ce31827ddedf647dc17f68740db1314f6f4a0c78d7dfe4960851d9cce12e23e6598970b74d8ec428f258db88

data/README.md

@@ -34,7 +34,9 @@ Lookbook uses [RDoc/Yard-style comment tags](#annotating-preview-files) to exten
 
 If you want to have a quick play with Lookbook, the easiest way is to [give the demo app](https://github.com/allmarkedup/lookbook-demo) a spin. It's a basic Rails/ViewComponent app with a few test components included to tinker with.
 
-The [demo app repo](https://github.com/allmarkedup/lookbook-demo) contains instructions on how to get it up and running.
+**Online demo: https://lookbook-demo-app.herokuapp.com/lookbook**
+
+If you'd rather dig in a bit more and run the demo app locally, the [demo repo](https://github.com/allmarkedup/lookbook-demo) contains instructions on how to get it up and running.
 
 ## Installing
 
@@ -77,7 +79,7 @@ Lookbook parses [Yard-style comment tags](https://rubydoc.info/gems/yard/file/do
 
 ```ruby
 # @label Basic Button
-# @display bg_color #fff
+# @display bg_color "#fff"
 class ButtonComponentPreview < ViewComponent::Preview
 
   # Primary button
@@ -108,7 +110,7 @@ class ButtonComponentPreview < ViewComponent::Preview
   # ---------------
   # For light-on-dark screens
   #
-  # @display bg_color #000
+  # @display bg_color "#000"
   def secondary
     render ButtonComponent.new(style: :inverted) do
       "Click me"
@@ -186,7 +188,7 @@ end
 The `@display` tag lets you pass custom parameters to your preview layout so that the component preview can be customised on a per-example basis.
 
 ```ruby
-# @display bg_color #eee
+# @display bg_color "#eee"
 class FooComponentPreview < ViewComponent::Preview
 
   # @display max_width 500px
@@ -205,6 +207,8 @@ The `@display` tag can be applied at the preview (class) or at the example (meth
 - `<key>` must be a valid Ruby hash key name, without quotes or spaces
 - `<value>` will be parsed using the [Ruby YAML parser](https://yaml.org/YAML_for_ruby.html) to resolve the value
 
+> Note: Ruby YAML does not (generally) require quoting of string values. However in some cases it _is_ required due to the presence of [indicator characters](https://yaml.org/YAML_for_ruby.html#indicators_in_strings) (such as `#`, `:` etc) - hence why the hex color code in the example above is surrounded by quotes. It's perfectly ok to quote all string values if you prefer.
+
 These display parameters can then be accessed via the `params` hash in your preview layout using `params[:lookbook][:display][<key>]`:
 
 ```html

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

@@ -2,6 +2,7 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 @import "tippy.js/dist/tippy";
+@import "tippy.js/dist/border";
 @import "code_theme";
 @import "tooltip_theme";
 
@@ -56,16 +57,73 @@
   }
 }
 
-@layer utilities {
-  .h-fill {
-    height: fill-available;
+@layer components {
+  #nav > ul > li > div {
+    @apply py-1 border-b border-gray-300;
+  }
+
+  .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;
+    /* @apply whitespace-pre-wrap; */
+  }
+
+  .code .line {
+    @apply leading-relaxed;
+  }
+
+  .code.numbered {
+    @apply relative pt-3;
   }
 
-  .min-h-fill {
-    min-height: fill-available;
+  .code.numbered:before {
+    content: "";
+    left: 2.7em;
+    @apply absolute top-0 bottom-0 border-r border-gray-200;
   }
 
+  .code.numbered .line {
+    padding-left: calc(2.7em + 8px);
+    @apply relative;
+  }
+
+  .code .line-number {
+    display: inline-block;
+    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 absolute left-0;
+  }
+
+  .code .line-content {
+    @apply flex-none pr-4;
+  }
+
+  .resize-handle {
+    @apply flex items-center justify-center h-full w-full border-gray-300 bg-white hover:bg-indigo-100 hover:bg-opacity-20 text-gray-400 hover:text-gray-700 transition select-none touch-none;
+  }
+}
+
+@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;
   }
+
+  .checked-bg {
+    background-color: #ffffff;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='%23f3f3f3' fill-opacity='1'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E");
+  }
 }

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

@@ -4,13 +4,41 @@
   &[data-placement^="top"] > .tippy-arrow::before {
     border-top-color: theme("colors.indigo.500");
   }
+
   &[data-placement^="bottom"] > .tippy-arrow::before {
     border-bottom-color: theme("colors.indigo.500");
   }
+
   &[data-placement^="left"] > .tippy-arrow::before {
     border-left-color: theme("colors.indigo.500");
   }
+
   &[data-placement^="right"] > .tippy-arrow::before {
     border-right-color: theme("colors.indigo.500");
   }
 }
+
+.tippy-box[data-theme~="menu"] {
+  border: 1px solid theme("colors.gray.300");
+  @apply bg-white text-gray-600 shadow-md rounded;
+
+  & > .tippy-content {
+    padding: 0;
+  }
+
+  &[data-placement^="top"] > .tippy-arrow::before {
+    border-top-color: white;
+  }
+
+  &[data-placement^="bottom"] > .tippy-arrow::before {
+    border-bottom-color: white;
+  }
+
+  &[data-placement^="left"] > .tippy-arrow::before {
+    border-left-color: white;
+  }
+
+  &[data-placement^="right"] > .tippy-arrow::before {
+    border-right-color: white;
+  }
+}

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

@@ -1,66 +1,56 @@
 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 tabs from "./components/tabs";
+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("tabs", tabs);
+Alpine.data("navItem", navItem);
+Alpine.data("navGroup", navGroup);
 
 // Init
 
@@ -68,9 +58,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 && $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,58 @@
+import sizeObserver from "./sizes";
+
+export default function inspector() {
+  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);
+    },
+    get orientation() {
+      return this.$store.inspector.drawer.orientation;
+    },
+    get view() {
+      return this.$store.inspector.preview.view;
+    },
+    get horizontal() {
+      return this.canBeVertical ? this.orientation === "horizontal" : true;
+    },
+    get vertical() {
+      return !this.horizontal;
+    },
+    get canBeVertical() {
+      return this.width > 800;
+    },
+    get drawerHidden() {
+      return this.$store.inspector.drawer.hidden;
+    },
+    isActivePanel(panel) {
+      return this.$store.inspector.drawer.active == panel;
+    },
+    switchPanel(panel) {
+      this.$store.inspector.drawer.active = panel;
+    },
+    toggleView() {
+      this.$store.inspector.preview.view =
+        this.view === "html" ? "preview" : "html";
+    },
+    toggleOrientation() {
+      this.$store.inspector.drawer.orientation =
+        this.orientation === "horizontal" ? "vertical" : "horizontal";
+    },
+    toggleDrawer() {
+      this.$store.inspector.drawer.hidden =
+        !this.$store.inspector.drawer.hidden;
+    },
+    preview: {
+      width: null,
+      height: null,
+    },
+  };
+}

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

@@ -1,43 +1,44 @@
-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
-        ? Array.from(this.$refs.items.querySelectorAll(":scope > li"))
+        ? Array.from(this.$refs.items.querySelectorAll(":scope > li > div"))
         : [];
     },
     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,27 @@
+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) {
+      this.hidden = false;
+      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 > div"))
+        : [];
+    },
+    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,45 @@
+import createSocket from "../lib/socket";
+
+const morphOpts = {
+  key(el) {
+    return el.getAttribute("key") ? el.getAttribute("key") : el.id;
+  },
+  updating(el, toEl, childrenOnly, skip) {
+    if (
+      el.getAttribute &&
+      el.getAttribute("data-morph-strategy") === "replace"
+    ) {
+      el.innerHTML = toEl.innerHTML;
+      return skip();
+    }
+  },
+  lookahead: true,
+};
+
+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, morphOpts);
+      this.$dispatch("page:morphed");
+    },
+  };
+}

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

@@ -0,0 +1,32 @@
+import debounce from "debounce";
+
+export default function param(name, value) {
+  return {
+    name,
+    value,
+    init() {
+      this.$watch(
+        "value",
+        debounce(() => {
+          if (this.validate()) {
+            this.update();
+          }
+        }, 300)
+      );
+    },
+    setFocus() {
+      if (this.$refs.input) {
+        setTimeout(() => this.$refs.input.focus(), 0);
+      }
+    },
+    update() {
+      const searchParams = new URLSearchParams(window.location.search);
+      searchParams.set(this.name, this.value);
+      const path = location.href.replace(location.search, "");
+      this.setLocation(`${path}?${searchParams.toString()}`);
+    },
+    validate() {
+      return this.$el.reportValidity ? this.$el.reportValidity() : true;
+    },
+  };
+}