lookbook 0.4.8 → 0.5.0.beta.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7a4c7c01727ccbd4cc232198f9bcc33236f0fa90618d10944b78b1858d750fe2
-  data.tar.gz: a7615d2ca70fad9bb2b05670f0bc120245b14137b18e9673b5d5fb73bd6c9bce
+  metadata.gz: 95624cc7d6d6e9389e87c3b13c6f4980f0be8ae2f13ac81757a9ed7acbaf554d
+  data.tar.gz: e8e8c6787b96e23fc3d71bc3b47c4a9253ef8a607f8f41c292c52e2ecc99549d
 SHA512:
-  metadata.gz: 89ae1a5899bfd6bd848ea8bebc895d85b0d88a9b4d66914f52ddf04de24a7d566b0deeb0239e51d857afac2f4e1d2706aab77098191419d2b6e0c52df946b4b1
-  data.tar.gz: 48729571a609a5505095f11d69b4ddb53735eeb4a6f26b83ec326a8f86ad346b17c7b66087efbd87a0002737ec000efbeefbba1acf56560d87be1a667b3d24d3
+  metadata.gz: 5ac7b680d183349e374b1a2368b2839fa9c9ec8790f53cbf76a97171c0da7375cf6599d2e4936e2fcb1a0dca685aae9d37cfd54672e68ef0e935086af43b60bc
+  data.tar.gz: 03bee3f6b73191fc5bcfd5afed389fee54b3ec41ce31827ddedf647dc17f68740db1314f6f4a0c78d7dfe4960851d9cce12e23e6598970b74d8ec428f258db88

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";
 
@@ -57,8 +58,8 @@
 }
 
 @layer components {
-  #nav > ul > li {
-    @apply py-1;
+  #nav > ul > li > div {
+    @apply py-1 border-b border-gray-300;
   }
 
   .nav-toggle {
@@ -75,10 +76,11 @@
 
   .code pre {
     @apply block;
+    /* @apply whitespace-pre-wrap; */
   }
 
   .code .line {
-    @apply flex items-center leading-relaxed;
+    @apply leading-relaxed;
   }
 
   .code.numbered {
@@ -87,35 +89,41 @@
 
   .code.numbered:before {
     content: "";
-    left: calc(2.7em + 8px);
+    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;
+    @apply font-mono text-right text-gray-400 flex-none text-xs absolute left-0;
   }
 
   .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;
-  } */
+  .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

@@ -13,6 +13,7 @@ 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";
 
@@ -47,6 +48,7 @@ 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);
 

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

@@ -12,7 +12,7 @@ export default function filter() {
       this.$store.filter.raw = "";
     },
     focus($event) {
-      if ($event.target.tagName === "INPUT") {
+      if ($event && $event.target.tagName === "INPUT") {
         return;
       }
       setTimeout(() => this.$refs.input.focus(), 0);

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

@@ -1,17 +1,54 @@
+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.panels.active == panel;
+      return this.$store.inspector.drawer.active == panel;
     },
     switchPanel(panel) {
-      this.$store.inspector.panels.active = panel;
+      this.$store.inspector.drawer.active = panel;
+    },
+    toggleView() {
+      this.$store.inspector.preview.view =
+        this.view === "html" ? "preview" : "html";
     },
-    get showSource() {
-      return this.$store.inspector.preview.source;
+    toggleOrientation() {
+      this.$store.inspector.drawer.orientation =
+        this.orientation === "horizontal" ? "vertical" : "horizontal";
     },
-    toggleSource() {
-      this.$store.inspector.preview.source =
-        !this.$store.inspector.preview.source;
+    toggleDrawer() {
+      this.$store.inspector.drawer.hidden =
+        !this.$store.inspector.drawer.hidden;
     },
     preview: {
       width: null,

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

@@ -15,7 +15,7 @@ export default function navGroup() {
     },
     getChildren() {
       return this.$refs.items
-        ? Array.from(this.$refs.items.querySelectorAll(":scope > li"))
+        ? Array.from(this.$refs.items.querySelectorAll(":scope > li > div"))
         : [];
     },
     navigateToFirstChild() {

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

@@ -15,6 +15,7 @@ export default function navItem(matchers) {
       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;

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

@@ -22,7 +22,7 @@ export default function nav() {
     },
     getChildren() {
       return this.$refs.items
-        ? Array.from(this.$refs.items.querySelectorAll(":scope > li"))
+        ? Array.from(this.$refs.items.querySelectorAll(":scope > li > div"))
         : [];
     },
     setActive() {

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

@@ -1,5 +1,21 @@
 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() {
@@ -22,11 +38,7 @@ export default function page() {
     },
     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;
-        },
-      });
+      Alpine.morph(this.$root, pageHtml, morphOpts);
       this.$dispatch("page:morphed");
     },
   };

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

@@ -1,13 +1,27 @@
-export default function param() {
+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(name, value) {
+    update() {
       const searchParams = new URLSearchParams(window.location.search);
-      searchParams.set(name, value);
+      searchParams.set(this.name, this.value);
       const path = location.href.replace(location.search, "");
       this.setLocation(`${path}?${searchParams.toString()}`);
     },

data/app/assets/lookbook/js/components/preview-window.js

@@ -1,37 +1,106 @@
 export default function preview() {
   return {
-    onResize(e) {
-      const size =
-        this.resizeStartSize - (this.resizeStartPosition - e.pageX) * 2;
-      const parentSize = this.$root.parentElement.clientWidth;
-      const percentSize = (Math.round(size) / parentSize) * 100;
-      const minWidth = (300 / parentSize) * 100;
-      this.$store.inspector.preview.width = `${Math.min(
-        Math.max(percentSize, minWidth),
-        100
-      )}%`;
+    get store() {
+      return this.$store.inspector.preview;
     },
-    onResizeStart(e) {
+    get maxWidth() {
+      return this.store.width === "100%" ? "100%" : `${this.store.width}px`;
+    },
+    get maxHeight() {
+      return this.store.height === "100%" ? "100%" : `${this.store.height}px`;
+    },
+    get parentWidth() {
+      return Math.round(this.$root.parentElement.clientWidth);
+    },
+    get parentHeight() {
+      return Math.round(this.$root.parentElement.clientHeight);
+    },
+    start() {
       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;
-      window.addEventListener("pointermove", this.onResize);
-      window.addEventListener("pointerup", this.onResizeEnd);
-    },
-    onResizeEnd() {
-      window.removeEventListener("pointermove", this.onResize);
-      window.removeEventListener("pointerup", this.onResizeEnd);
+      this.store.resizing = true;
+    },
+    end() {
       this.$store.layout.reflowing = false;
+      this.store.resizing = false;
+    },
+    onResizeStart(e) {
+      this.onResizeWidthStart(e);
+      this.onResizeHeightStart(e);
+    },
+    toggleFullSize() {
+      const { height, width } = this.store;
+      if (height === "100%" && width === "100%") {
+        this.toggleFullHeight();
+        this.toggleFullWidth();
+      } else {
+        if (height !== "100%") this.toggleFullHeight();
+        if (width !== "100%") this.toggleFullWidth();
+      }
+    },
+    onResizeWidth(e) {
+      const width =
+        this.resizeStartWidth - (this.resizeStartPositionX - e.pageX) * 2;
+      const boundedWidth = Math.min(
+        Math.max(Math.round(width), 200),
+        this.parentWidth
+      );
+      this.store.width =
+        boundedWidth === this.parentWidth ? "100%" : boundedWidth;
+    },
+    onResizeWidthStart(e) {
+      this.start();
+      this.onResizeWidth = this.onResizeWidth.bind(this);
+      this.onResizeWidthEnd = this.onResizeWidthEnd.bind(this);
+      this.resizeStartPositionX = e.pageX;
+      this.resizeStartWidth = this.$root.clientWidth;
+      window.addEventListener("pointermove", this.onResizeWidth);
+      window.addEventListener("pointerup", this.onResizeWidthEnd);
+    },
+    onResizeWidthEnd() {
+      window.removeEventListener("pointermove", this.onResizeWidth);
+      window.removeEventListener("pointerup", this.onResizeWidthEnd);
+      this.end();
     },
     toggleFullWidth() {
-      const preview = this.$store.inspector.preview;
-      if (preview.width === "100%" && preview.lastWidth) {
-        preview.width = preview.lastWidth;
+      const { width, lastWidth } = this.store;
+      if (width === "100%" && lastWidth) {
+        this.store.width = lastWidth;
+      } else {
+        this.store.lastWidth = width;
+        this.store.width = "100%";
+      }
+    },
+    onResizeHeight(e) {
+      const height =
+        this.resizeStartHeight - (this.resizeStartPositionY - e.pageY);
+      const boundedHeight = Math.min(
+        Math.max(Math.round(height), 200),
+        this.parentHeight
+      );
+      this.$store.inspector.preview.height =
+        boundedHeight === this.parentHeight ? "100%" : boundedHeight;
+    },
+    onResizeHeightStart(e) {
+      this.start();
+      this.onResizeHeight = this.onResizeHeight.bind(this);
+      this.onResizeHeightEnd = this.onResizeHeightEnd.bind(this);
+      this.resizeStartPositionY = e.pageY;
+      this.resizeStartHeight = this.$root.clientHeight;
+      window.addEventListener("pointermove", this.onResizeHeight);
+      window.addEventListener("pointerup", this.onResizeHeightEnd);
+    },
+    onResizeHeightEnd() {
+      window.removeEventListener("pointermove", this.onResizeHeight);
+      window.removeEventListener("pointerup", this.onResizeHeightEnd);
+      this.end();
+    },
+    toggleFullHeight() {
+      const { height, lastHeight } = this.store;
+      if (height === "100%" && lastHeight) {
+        this.store.height = lastHeight;
       } else {
-        preview.lastWidth = preview.width;
-        preview.width = "100%";
+        this.store.lastHeight = height;
+        this.store.height = "100%";
       }
     },
   };

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

@@ -0,0 +1,50 @@
+import tippy from "tippy.js";
+
+export default function tabs() {
+  return {
+    width: 0,
+    tabsWidth: 0,
+    init() {
+      const ro = new ResizeObserver((entries) => {
+        this.width = Math.round(entries[0].contentRect.width);
+      });
+      ro.observe(this.$refs.tabs);
+      this.dropdown = tippy(this.$refs.toggle, {
+        allowHTML: true,
+        interactive: true,
+        trigger: "click",
+        placement: "bottom-end",
+        theme: "menu",
+        content: this.$refs.dropdown,
+      });
+    },
+    get tabs() {
+      return Array.from(this.$refs.tabs.querySelectorAll(":scope > a"));
+    },
+    get visibleTabCount() {
+      let cumulativeWidth = 0;
+      for (let i = 0; i < this.tabs.length; i++) {
+        const el = this.tabs[i];
+        const margin = parseInt(
+          window
+            .getComputedStyle(el)
+            .getPropertyValue("margin-left")
+            .replace("px", ""),
+          10
+        );
+        cumulativeWidth += el.clientWidth + margin;
+        if (cumulativeWidth > this.width) {
+          this.tabsWidth = cumulativeWidth - el.clientWidth;
+          return i;
+        }
+      }
+      return this.tabs.length;
+    },
+    get hiddenTabs() {
+      return this.tabs.slice(this.visibleTabCount, -1);
+    },
+    hideDropdown() {
+      this.dropdown.hide();
+    },
+  };
+}

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

@@ -3,12 +3,18 @@ export default {
   sidebar: {
     defaultWidth: 280,
     minWidth: 200,
-    maxWidth: 500,
+    maxWidth: 350,
   },
   inspector: {
-    tabs: {
-      default: "source",
+    drawer: {
+      orientation: "horizontal",
+      defaultPanel: "source",
       defaultHeight: 200,
+      defaultWidth: 500,
+      minWidth: 350,
+    },
+    preview: {
+      view: "preview",
     },
   },
 };

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

@@ -1,17 +1,24 @@
 import config from "../config";
 
 export default function createInspectorStore(Alpine) {
-  const { tabs } = config.inspector;
+  const { drawer, preview } = config.inspector;
   return {
-    panels: {
-      active: Alpine.$persist(tabs.default).as("inspector-panel-active"),
-      height: Alpine.$persist(tabs.defaultHeight).as("inspector-height"),
+    drawer: {
+      hidden: Alpine.$persist(false).as("drawer-hidden"),
+      orientation: Alpine.$persist(drawer.orientation).as("drawer-orientation"),
+      active: Alpine.$persist(drawer.defaultPanel).as("drawer-active"),
+      height: Alpine.$persist(drawer.defaultHeight).as("drawer-height"),
+      width: Alpine.$persist(drawer.defaultWidth).as("drawer-width"),
+      minWidth: drawer.minWidth,
+      visibleTabCount: Infinity,
     },
     preview: {
       width: Alpine.$persist("100%").as("preview-width"),
       height: Alpine.$persist("100%").as("preview-height"),
-      source: Alpine.$persist(false).as("preview-source"),
+      view: Alpine.$persist(preview.view).as("preview-view"),
       lastWidth: null,
+      lastHeight: null,
+      resizing: false,
     },
   };
 }

data/app/controllers/lookbook/app_controller.rb

@@ -27,7 +27,9 @@ module Lookbook
         begin
           set_params
           @examples = examples_data
-          @preview_srcdoc = render_examples(examples_data).gsub("\"", """)
+          @preview_srcdoc = if Lookbook.config.preview_srcdoc
+            render_examples(examples_data).gsub("\"", """)
+          end
           @panels = panels.filter { |name, panel| panel[:show] }
         rescue *EXCEPTIONS
           render "error"

data/app/views/layouts/lookbook/app.html.erb

@@ -44,9 +44,13 @@
       x-effect="$store.sidebar.width = Math.min(splits[0] || $store.sidebar.width, $store.sidebar.maxWidth)"
       x-cloak
     >
-      <div class="w-[9px] h-full bg-transparent hover:bg-indigo-100 hover:bg-opacity-20 transition absolute top-0 bottom-0 transform -translate-x-1/2 cursor-[col-resize] z-10"></div>
+      <div class="w-[9px] h-full bg-transparent hover:bg-indigo-100 hover:bg-opacity-20 transition absolute top-0 bottom-0 -translate-x-1/2 cursor-[col-resize] z-10"></div>
     </div>
-    <main id="main" class="h-full overflow-hidden w-full" x-show="$store.layout.desktop || !$store.sidebar.open" x-cloak>
+    <main
+      id="main"
+      class="h-full overflow-hidden w-full"
+      x-show="$store.layout.desktop || !$store.sidebar.open" x-cloak
+    >
       <%= yield %>
     </main>
   </div>

data/app/views/lookbook/components/_copy.html.erb

@@ -1,10 +1,14 @@
 <button
-  class="p-1.5 border-b border-l border-gray-200 hover:border-gray-300 rounded-bl-md bg-white absolute top-0 right-0 text-gray-400 transition"
+  class="text-gray-400 transition"
   x-data="copy('<%= target %>')"
   x-tooltip.theme.lookbook="done ? 'copied!' : 'copy to clipboard'"
   @click="save"
   :class="{'!text-green-600 hover:text-green-600': done, 'hover:text-indigo-500': !done}"
-  data-tippy-placement="left">
+  data-tippy-placement="left"
+  <% if defined?(show) %>
+    x-show="<%= show %>"
+    x-cloak
+  <% end %>
+  >
   <%= icon "${done ? 'check' : 'clipboard'}", size: 4 %>
-  <div class="hidden" x-init="content = $el.innerText"><%== yield %></div>
 </button>