lookbook 0.4.6 → 0.5.0.beta.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 93eda55ac8a014e5027a7a1176653a8ecbf9f1b5a95b26820c68ef93f2402269
-  data.tar.gz: c5a4dde94d4ce0c84298dfe5d8592d3ccaf887fe56fa21a9cb0bbc78b797604f
+  metadata.gz: b457fc15c2dc515cf08976d167a9a4948fdc83ae6e3fd490f957a8b17a333aa2
+  data.tar.gz: 26cb0811267fbbf7dabb8e47f7acd13990a0e1e649f2c96826fd028b5dc3ad0e
 SHA512:
-  metadata.gz: 704265eb0b3c0b15417b47446ac900f14ca3bf746f9bbbabbbeb563eefe672f907d01ebbe5ab70d77633235d228ca509738826d674035528b12a0eb96dfcfa17
-  data.tar.gz: 562c86882d1a2da3eb06b660006dc3d37223c80273d9aaaacafb9a85ee8a009081eecd1acfd8d451e850d34b4055400b9d9e8e5d452f7dcc66c2428a3928db7d
+  metadata.gz: 7c6669ef57191e50528f14ff0ad2fa5765b40a12996c305c88cdf298a08dcf17c9479ffc39c3b577c71d8273ae0a665f7d3dd2ca6b89d45bceb19bc146357821
+  data.tar.gz: d384bba43f79172295196effdd77a6b733b2f52180405ac3c7309ee0086881cc44c28a789a1cf9dfbb4ee8adaf5c1087ddbf5b6888c6cad3dd4ae8497f9f19cb

data/README.md

@@ -79,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
@@ -110,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"
@@ -188,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
@@ -207,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,76 @@
   }
 }
 
-@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;
   }
 
-  .min-h-fill {
-    min-height: fill-available;
+  .code pre {
+    @apply block;
   }
 
+  .code.wrapped pre {
+    @apply whitespace-pre-wrap;
+  }
+
+  .code .line {
+    @apply leading-relaxed;
+  }
+
+  .code.numbered {
+    @apply relative pt-3;
+  }
+
+  .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,58 @@
 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";
+import Persist from "@alpinejs/persist";
+import Morph from "@alpinejs/morph";
+import Tooltip from "@ryangjchandler/alpine-tooltip";
 
-window.Alpine = Alpine;
+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 code from "./components/code";
+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("code", code);
 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 +60,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/code.js

@@ -0,0 +1,5 @@
+export default function code() {
+  return {
+    wrap: false,
+  };
+}

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,34 @@
+import debounce from "debounce";
+
+export default function param(name, value, opts = {}) {
+  return {
+    name,
+    value,
+    updating: false,
+    init() {
+      if (opts.debounce) {
+        this.$watch(
+          "value",
+          debounce(() => this.updateIfValid(), opts.debounce)
+        );
+      } else {
+        this.$watch("value", () => this.updateIfValid());
+      }
+    },
+    setFocus() {
+      setTimeout(() => this.$root.focus(), 0);
+    },
+    updateIfValid() {
+      if (this.validate()) this.update();
+    },
+    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.$root.reportValidity ? this.$root.reportValidity() : true;
+    },
+  };
+}