lookbook 1.5.5 → 2.0.0.beta.0

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

@@ -21,7 +21,7 @@ export default function app() {
 
     init() {
       if (window.SOCKET_PATH) {
-        console.log("SOCKET CREATED");
+        this.debug(`Lookbook socket created`);
         const socket = createSocket(window.SOCKET_PATH);
         socket.addListener("Lookbook::ReloadChannel", () => this.updateDOM());
       }
@@ -43,9 +43,19 @@ export default function app() {
 
     hijax(evt) {
       const link = evt.target.closest("a[href]");
-      if (link && !isExternalLink(link)) {
-        evt.preventDefault();
-        this.navigateTo(link.href);
+      if (link) {
+        const external = isExternalLink(link);
+        const embedded = this.isEmbedded();
+
+        if (embedded && (!link.hasAttribute("target") || external)) {
+          evt.preventDefault();
+          window.top.location = link.href;
+          return;
+        } else if (!embedded && !external && !link.hasAttribute("target")) {
+          evt.preventDefault();
+          this.navigateTo(link.href);
+          return;
+        }
       }
     },
 
@@ -89,6 +99,14 @@ export default function app() {
       }
     },
 
+    isEmbedded() {
+      try {
+        return window.self !== window.top;
+      } catch (e) {
+        return true;
+      }
+    },
+
     ...Alpine.$log,
   };
 }

data/app/assets/lookbook/js/helpers/dom.js

@@ -5,12 +5,12 @@ function morph(from, to) {
     },
     lookahead: true,
     updating(el, toEl, childrenOnly, skip) {
-      if (
-        el.getAttribute &&
-        el.getAttribute("data-morph-strategy") === "replace"
-      ) {
+      if (!el.getAttribute) return;
+      if (el.getAttribute("data-morph-strategy") === "replace") {
         el.innerHTML = toEl.innerHTML;
         return skip();
+      } else if (el.getAttribute("data-morph-strategy") === "skip") {
+        return skip();
       }
     },
   });
@@ -33,9 +33,6 @@ function getElementSize(el, opts = {}) {
 }
 
 function isExternalLink(link) {
-  if (link.getAttribute("target") === "_blank") {
-    return true;
-  }
   if (link.href) {
     return link.host !== window.location.host;
   }

data/app/assets/lookbook/js/helpers/string.js

@@ -9,20 +9,13 @@ function prefixString(string, prefix = null) {
 }
 
 function parseSearchParamValue(value) {
-  const params = {};
-  value.split("|").forEach((pair_str) => {
-    const [key, value] = pair_str.split(":").map((part) => part.trim());
-    params[key] = value;
-  });
-  return params;
+  const json = decodeURIComponent(value);
+  return JSON.parse(json);
 }
 
 function buildSearchParamValue(data) {
-  const pairs = [];
-  for (const [key, value] of Object.entries(data)) {
-    pairs.push(`${key}:${value}`);
-  }
-  return pairs.join("|");
+  const str = JSON.stringify(data);
+  return encodeURIComponent(str);
 }
 
 export {

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

@@ -0,0 +1,61 @@
+import Alpine from "alpinejs";
+
+import Morph from "@alpinejs/morph";
+import Persist from "@alpinejs/persist";
+import Collapse from "@alpinejs/morph";
+import Tooltip from "@ryangjchandler/alpine-tooltip";
+
+import Logger, { log } from "./plugins/logger";
+
+import initLayoutStore from "./stores/layout";
+import initNavStore from "./stores/nav";
+import initInspectorStore from "./stores/inspector";
+import initPagesStore from "./stores/pages";
+import initSettingsStore from "./stores/settings";
+import initWorkbenchStore from "./stores/workbench";
+
+import app from "./app";
+
+// Note: A ParcelJS issue prevents loading all depths of component JS files in one glob,
+// so need to split it up. Path aliases also do not work with the glob imports.
+import { getComponents } from "./helpers/build";
+import * as components from "../../../components/lookbook/*/*component.js";
+import * as subComponents from "../../../components/lookbook/*/*/component.js";
+import * as jsComponents from "./components/*.js";
+
+// Plugins
+
+Alpine.plugin(Morph);
+Alpine.plugin(Persist);
+Alpine.plugin(Collapse);
+Alpine.plugin(Tooltip);
+Alpine.plugin(Logger);
+
+// Stores
+const prefix = window.APP_NAME;
+Alpine.store("layout", initLayoutStore(Alpine, { prefix }));
+Alpine.store("nav", initNavStore(Alpine, { prefix }));
+Alpine.store("inspector", initInspectorStore(Alpine, { prefix }));
+Alpine.store("pages", initPagesStore(Alpine, { prefix }));
+Alpine.store("settings", initSettingsStore(Alpine, { prefix }));
+
+if (process.env.NODE_ENV !== "production") {
+  Alpine.store("workbench", initWorkbenchStore(Alpine, { prefix }));
+}
+
+// Components
+
+Alpine.data("app", app);
+
+[components, subComponents, jsComponents].forEach((scripts) => {
+  const components = getComponents(scripts);
+  Object.keys(components).forEach((name) => {
+    Alpine.data(`${name}Component`, components[name]);
+  });
+});
+
+// Init
+
+window.log = log;
+window.Alpine = Alpine;
+Alpine.start();

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

@@ -0,0 +1,113 @@
+window.Lookbook = window.Lookbook || {};
+window.Lookbook.initEmbeds = initEmbeds;
+
+const embedUrlPrefix = "embed";
+const whiteListedAttributes = [
+  "preview",
+  "scenario",
+  "panels",
+  "actions",
+  "param-*",
+];
+
+function initEmbeds() {
+  if (typeof window.iFrameResize !== "function") {
+    console.error(
+      "Lookbook embeds require the 'iframe-resizer' library to be available. Skipping embed instantiation."
+    );
+    return;
+  }
+
+  const embeds = Array.from(document.querySelectorAll("lookbook-embed"));
+
+  embeds.forEach((embed) => {
+    const attrs = Array.from(embed.attributes);
+    const wrapper = createWrapper();
+    const iframe = createIframe(attrs);
+
+    wrapper.appendChild(iframe);
+    embed.replaceWith(wrapper);
+  });
+
+  window.iFrameResize({ checkOrigin: false }, "[data-lookbook-embed-iframe]");
+}
+
+function createWrapper() {
+  const wrapper = document.createElement("div");
+
+  wrapper.setAttribute("data-lookbook-embed", "");
+  wrapper.classList.add("lookbook-embed");
+
+  return wrapper;
+}
+
+function createIframe(attrs) {
+  const src = buildSrc(attrs);
+  const id = attrValue(attrs, "id");
+  const styles = attrValue(attrs, "style");
+  const classes = attrValue(attrs, "class", "")
+    .split(" ")
+    .map((c) => c.trim())
+    .filter((c) => c.length);
+
+  const iframe = document.createElement("iframe");
+  iframe.src = src;
+  if (id) iframe.id = id;
+
+  iframe.setAttribute("frameborder", 0);
+  iframe.setAttribute("data-lookbook-embed-iframe", "");
+
+  if (classes.length) iframe.classList.add(...classes);
+  if (styles) iframe.style.cssText = styles;
+
+  iframe.style.width = "100%";
+  iframe.style.transition = "height 0.3s";
+
+  return iframe;
+}
+
+function buildSrc(attrs) {
+  const appPath = attrValue(attrs, "app") || guessBasePath();
+  const props = {};
+
+  permittedAttrs(attrs).forEach(({ name, value }) => {
+    name = name.replace("-", "_").toLowerCase();
+    props[name] = value;
+  });
+
+  return encodeURI(
+    [appPath, embedUrlPrefix].join("/") + `?props=${JSON.stringify(props)}`
+  );
+}
+
+function attrValue(attrs, name, fallback = null) {
+  const attr = attrs.find((attr) => attr.name === name);
+  return attr ? attr.value : fallback;
+}
+
+function permittedAttrs(attrs) {
+  return attrs.filter((attr) => {
+    return whiteListedAttributes.find((key) => {
+      const name = attr.name;
+      return (
+        key === name ||
+        (key.includes("*") && name.startsWith(key.replace("*", "")))
+      );
+    });
+  });
+}
+
+function guessBasePath() {
+  const script =
+    document.currentScript ||
+    document.querySelector('script[src*="lookbook.js"]');
+  const scriptSrc = script.src;
+
+  if (scriptSrc && scriptSrc.includes("lookbook-assets")) {
+    return scriptSrc.replace("lookbook-assets/js/lookbook.js", "lookbook");
+  }
+
+  return `//${location.host}/lookbook`;
+}
+
+document.addEventListener("DOMContentLoaded", () => initEmbeds());

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

@@ -3,6 +3,7 @@ import tippy from "tippy.js";
 tippy.setDefaultProps({
   allowHTML: true,
   theme: "tooltip",
+  appendTo: document.getElementById("app"),
 });
 
 export default tippy;

data/app/assets/lookbook/js/lookbook-core.js

@@ -0,0 +1 @@
+import "./lib/lookbook";

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

@@ -1,61 +1,2 @@
-import Alpine from "alpinejs";
-
-import Morph from "@alpinejs/morph";
-import Persist from "@alpinejs/persist";
-import Collapse from "@alpinejs/morph";
-import Tooltip from "@ryangjchandler/alpine-tooltip";
-
-import Logger, { log } from "./plugins/logger";
-
-import initLayoutStore from "./stores/layout";
-import initNavStore from "./stores/nav";
-import initInspectorStore from "./stores/inspector";
-import initPagesStore from "./stores/pages";
-import initSettingsStore from "./stores/settings";
-import initWorkbenchStore from "./stores/workbench";
-
-import app from "./app";
-
-// Note: A ParcelJS issue prevents loading all depths of component JS files in one glob,
-// so need to split it up. Path aliases also do not work with the glob imports.
-import { getComponents } from "./helpers/build";
-import * as components from "../../../components/lookbook/*/*component.js";
-import * as subComponents from "../../../components/lookbook/*/*/component.js";
-import * as jsComponents from "./components/*.js";
-
-// Plugins
-
-Alpine.plugin(Morph);
-Alpine.plugin(Persist);
-Alpine.plugin(Collapse);
-Alpine.plugin(Tooltip);
-Alpine.plugin(Logger);
-
-// Stores
-const prefix = window.APP_NAME;
-Alpine.store("layout", initLayoutStore(Alpine, { prefix }));
-Alpine.store("nav", initNavStore(Alpine, { prefix }));
-Alpine.store("inspector", initInspectorStore(Alpine, { prefix }));
-Alpine.store("pages", initPagesStore(Alpine, { prefix }));
-Alpine.store("settings", initSettingsStore(Alpine, { prefix }));
-
-if (process.env.NODE_ENV !== "production") {
-  Alpine.store("workbench", initWorkbenchStore(Alpine, { prefix }));
-}
-
-// Components
-
-Alpine.data("app", app);
-
-[components, subComponents, jsComponents].forEach((scripts) => {
-  const components = getComponents(scripts);
-  Object.keys(components).forEach((name) => {
-    Alpine.data(`${name}Component`, components[name]);
-  });
-});
-
-// Init
-
-window.log = log;
-window.Alpine = Alpine;
-Alpine.start();
+import "iframe-resizer/js/iframeResizer";
+import "./lib/lookbook";

data/app/components/lookbook/base_component.rb

@@ -1,6 +1,8 @@
 module Lookbook
   class BaseComponent < ViewComponent::Base
-    include Lookbook::ComponentHelper
+    include Lookbook::Engine.routes.url_helpers
+    include Lookbook::UiElementsHelper
+    include Lookbook::ClassNamesHelper if Engine.runtime_context.rails_older_than?("6.1.0")
 
     def initialize(alpine_data: [], **html_attrs)
       @alpine_data ||= alpine_data

data/app/components/lookbook/button/component.html.erb

@@ -1,28 +1,17 @@
-<%= render_component_tag tag_name,
-  href: @href,
-  class: [
-    "block text-lookbook-icon-button-stroke focus:outline-none focus-visible:outline-none #{padding}",
-    {
-      "hover:text-lookbook-icon-button-stroke-hover": !@disabled,
-      "cursor-[not-allowed] opacity-50": @disabled
-    }
-  ],
-  disabled: @disabled,
+<%= lookbook_render button_component.new(
+  id: id,
+  icon: icon,
+  **button_attrs,
   "@keydown.esc.stop": "hideDropdown",
-  "@navigation:complete.window": "updateDropdown" do %>
-  <span x-ref="icon">
-    <%= icon || lookbook_render(:icon, name: @icon, size: icon_size, ":class": "{'animate-spin': _spinning}") %>
-  </span>
-  <% if @tooltip %>
-    <label class="hidden" x-ref="tooltip"><%= @tooltip %></label>
-  <% end %>
-  <% if content %>
-    <div x-ref="content"><%== content %></div>
-  <% end %>
-  <% if dropdown? %>
-    <div class="hidden" x-ref="dropdown">
-      <div class="bg-white divide-y divide-lookbook-divider text-left">
-        <%== dropdown %>
+  "@navigation:complete.window": "updateDropdown") do %>
+  <%= content %>
+<% end %>
+
+<% if dropdown? %>
+  <% content_for :dropdowns do %>
+    <div data-dropdown-id="<%= id %>">
+      <div class="divide-y divide-lookbook-divider text-left">
+        <%= dropdown %>
       </div>
     </div>
   <% end %>

data/app/components/lookbook/button/component.js

@@ -13,9 +13,9 @@ export default function buttonComponent() {
         });
       }
 
-      if (this.$refs.dropdown) {
+      if (this.dropdownContent) {
         dropdown = tippy(this.$el, {
-          content: this.$refs.dropdown.innerHTML,
+          content: this.dropdownContent,
           trigger: "click",
           theme: "menu",
           triggerTarget: this.$el,
@@ -32,6 +32,16 @@ export default function buttonComponent() {
       }
     },
 
+    get dropdownContent() {
+      if (this.$root && this.$root.id) {
+        const dropdown = document.querySelector(
+          `[data-dropdown-id="${this.$root.id}"]`
+        );
+        return dropdown ? dropdown.innerHTML : null;
+      }
+      return null;
+    },
+
     hideDropdown() {
       if (dropdown) {
         dropdown.hide();
@@ -42,7 +52,7 @@ export default function buttonComponent() {
       if (dropdown) {
         dropdown.hide();
         this.$nextTick(() => {
-          dropdown.setContent(this.$refs.dropdown.innerHTML);
+          dropdown.setContent(this.dropdownContent);
         });
       }
     },

data/app/components/lookbook/button/component.rb

@@ -1,44 +1,35 @@
 module Lookbook
   class Button::Component < Lookbook::BaseComponent
-    renders_one :icon, Lookbook::Icon::Component
     renders_one :dropdown
 
-    ICON_SIZES = {
-      xs: 3,
-      sm: 3.5,
-      md: 4,
-      lg: 6
-    }
+    attr_reader :id, :icon, :button_attrs
 
-    def initialize(icon: nil, tooltip: nil, disabled: false, size: :md, href: nil, **html_attrs)
+    def initialize(id: nil, icon: nil, **html_attrs)
+      @id = id
       @icon = icon
-      @tooltip = tooltip
-      @disabled = disabled
-      @size = size
-      @href = href
-      super(**html_attrs)
+      @button_attrs = html_attrs
     end
 
-    def icon_size
-      ICON_SIZES[@size]
+    def dropdown?
+      dropdown.present?
     end
 
-    def padding
-      [:xs, :sm].include?(@size) ? "p-1" : "p-2"
+    def text_button?
+      content.present?
     end
 
-    def tag_name
-      @href.present? ? :a : :button
+    def icon_button?
+      !text_button? && icon
     end
 
-    def dropdown?
-      dropdown.present?
+    def before_render
+      if dropdown? && id.nil?
+        raise "Dropdown buttons must be given an ID"
+      end
     end
 
-    protected
-
-    def alpine_component
-      "buttonComponent"
+    def button_component
+      icon_button? ? IconButton::Component : TextButton::Component
     end
   end
 end

data/app/components/lookbook/code/component.rb

@@ -1,7 +1,5 @@
 module Lookbook
   class Code::Component < Lookbook::BaseComponent
-    include Lookbook::OutputHelper
-
     def initialize(
       source: nil,
       language: :html,

data/app/components/lookbook/copy_button/component.html.erb

@@ -1,11 +1,11 @@
-<%= lookbook_render :button,
+<%= lookbook_render :icon_button,
   name: "copy-button",
-  **@button_attrs,
+  **button_attrs,
   "x-data": prepare_alpine_data,
   "@click.prevent": "copyToClipboard" do |button| %>
-  <% button.with_icon name: @icon, size: icon_size, "x-show": "!copied", cloak: true %>
-  <%= icon :check, size: icon_size, class: "text-green-500", "x-show": "copied", cloak: true %>
+  <% button.with_icon name: icon, size: icon_size, "x-show": "!copied", cloak: true %>
+  <% button.with_icon name: :check, size: icon_size, class: "text-green-500", "x-show": "copied", cloak: true %>
   <% if content %>
     <div x-ref="copyTarget" class="hidden"><%== content %></div>
   <% end %>
-<% end %>
+<% end %>

data/app/components/lookbook/copy_button/component.rb

@@ -1,19 +1,22 @@
 module Lookbook
   class CopyButton::Component < Lookbook::BaseComponent
-    def initialize(target: nil, icon: :code, **attrs)
+    attr_reader :icon, :size, :target, :button_attrs
+
+    def initialize(target: nil, icon: :code, size: :md, **attrs)
       @icon = icon
+      @size = size
       @target = target
       @button_attrs = attrs
     end
 
     def icon_size
-      Lookbook::Button::Component::ICON_SIZES[@size]
+      IconButton::Component::ICON_SIZES[size]
     end
 
     protected
 
     def alpine_data
-      content ? nil : alpine_encode(@target)
+      content ? nil : alpine_encode(target)
     end
 
     def alpine_component

data/app/components/lookbook/debug_menu/component.html.erb

@@ -27,6 +27,7 @@
       </li>
     </ul>
   </div>
+
   <div class="flex items-center text-xs px-3 py-2 bg-zinc-50">
     <span class="opacity-70 mr-1">Lookbook</span>
     <span class="mr-6">v<%= @version %></span>

data/app/components/lookbook/debug_menu/component.rb

@@ -1,12 +1,23 @@
 module Lookbook
   class DebugMenu::Component < Lookbook::BaseComponent
-    def initialize(version: nil, docs_url: nil, repo_url: nil, **html_attrs)
+    attr_reader :features
+
+    def initialize(version: nil, docs_url: nil, repo_url: nil, features: {}, **html_attrs)
       @version = version
       @docs_url = docs_url
       @repo_url = repo_url
+      @features = features
       super(**html_attrs)
     end
 
+    def auto_refresh_enabled?
+      feature(:auto_refresh, false)
+    end
+
+    def feature(name, fallback = nil)
+      features.fetch(name.to_sym, fallback)
+    end
+
     def debug_data
       content
     end

data/app/components/lookbook/display_options/editor/component.html.erb

@@ -1,6 +1,6 @@
 <%= render_component_tag class: "px-2" do %>
   <% if fields.many? %>
-    <%= lookbook_render :button, icon: :settings, tooltip: "Display options" do |button| %>
+    <%= lookbook_render :button, id: "display-options-dropdown-button", icon: :settings, tooltip: "Display options" do |button| %>
       <% button.with_dropdown do %>
         <div class="p-3 space-y-3">
           <%= safe_join(fields) %>

data/app/components/lookbook/display_options/field/component.css

@@ -1,33 +1,7 @@
 @layer components {
   [data-component="display-options-field"] {
-    [type="text"],
-    [type="email"],
-    [type="url"],
-    [type="password"],
-    [type="number"],
-    [type="date"],
-    [type="datetime-local"],
-    [type="month"],
-    [type="search"],
-    [type="tel"],
-    [type="time"],
-    [type="week"],
-    textarea,
-    select {
-      padding: 0.26rem 0.6rem;
-      font-size: 0.8rem;
-      line-height: 1.1rem;
-    }
-
     label {
       @apply text-[0.82rem] text-lookbook-input-text cursor-pointer;
     }
-
-    select {
-      border-radius: 0.375rem;
-      padding-right: 1.5rem;
-      background-size: 1.2em 1.2em;
-      background-position: right 0.4rem center;
-    }
   }
 }

data/app/components/lookbook/display_options/field/component.html.erb

@@ -3,6 +3,6 @@
     <label for="<%= name %>">
       <%= name.to_s.titleize %>:
     </label>
-    <%= select_tag(name, options_for_select(choices, value), "x-model": "value") %>
+    <%= select_tag(name, options_for_select(choices, value), "x-model": "value", class: "compact") %>
   </div>
 <% end %>