lookbook 0.4.4 → 0.4.8

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/components/param.js

@@ -0,0 +1,18 @@
+export default function param() {
+  return {
+    setFocus() {
+      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.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);
+    },
+  };
+}

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

@@ -0,0 +1,14 @@
+import config from "../config";
+
+export default function createSidebarStore(Alpine) {
+  const { defaultWidth, minWidth, maxWidth } = config.sidebar;
+  return {
+    open: Alpine.$persist(false).as("sidebar-open"),
+    width: Alpine.$persist(defaultWidth).as("sidebar-width"),
+    minWidth,
+    maxWidth,
+    toggle() {
+      Alpine.store("sidebar").open = !Alpine.store("sidebar").open;
+    },
+  };
+}

data/app/controllers/lookbook/app_controller.rb

@@ -1,52 +1,44 @@
-require "htmlbeautifier"
-
 module Lookbook
   class AppController < ActionController::Base
     EXCEPTIONS = [ViewComponent::PreviewTemplateError, ViewComponent::ComponentError, ViewComponent::TemplateError, ActionView::Template::Error]
 
     protect_from_forgery with: :exception
-    prepend_view_path File.expand_path("../../views/lookbook", __dir__)
-
-    layout "layouts/app"
-    helper Lookbook::Engine.helpers
+    helper Lookbook::ApplicationHelper
 
     before_action :find_preview, only: [:preview, :show]
     before_action :find_example, only: [:preview, :show]
-    before_action :assign_nav, only: [:index, :show]
-    before_action :initialize_inspector, only: [:show]
+    before_action :build_nav
+
+    def self.controller_path
+      "lookbook"
+    end
 
     def preview
       if @example
-        render html: rendered_example
+        set_params
+        render html: render_examples(examples_data)
       else
-        render "app/not_found"
+        render "not_found"
       end
     end
 
     def show
       if @example
         begin
-          @rendered_example = rendered_example.gsub("\"", "&quot;")
-          (@example.type == :group ? @example.examples : [@example]).each do |example|
-            include_example_data(example)
-          end
-          assign_inspector
+          set_params
+          @examples = examples_data
+          @preview_srcdoc = render_examples(examples_data).gsub("\"", "&quot;")
+          @panels = panels.filter { |name, panel| panel[:show] }
         rescue *EXCEPTIONS
-          render "app/error"
+          render "error"
         end
       else
-        render "app/not_found"
+        render "not_found"
       end
     end
 
     private
 
-    def initialize_inspector
-      @source = []
-      @output = []
-      @notes = []
-    end
-
     def find_preview
       candidates = []
       params[:path].to_s.scan(%r{/|$}) { candidates << $` }
@@ -65,83 +57,47 @@ module Lookbook
       end
     end
 
-    def include_example_data(example)
-      content = HtmlBeautifier.beautify(preview_controller.render_example_to_string(@preview, example.name))
-      @output << {
-        label: "<!-- #{example.label} -->",
-        content: content,
-        lang: Lookbook::Lang.find(:html)
-      }
+    def examples_data
+      @examples_data ||= (@example.type == :group ? @example.examples : [@example]).map do |example|
+        example_data(example)
+      end
+    end
+
+    def example_data(example)
       render_args = @preview.render_args(example.name, params: preview_controller.params.permit!)
       has_template = render_args[:template] != "view_components/preview"
-      @source << {
-        label: has_template ? "<!-- #{example.label} -->" : "\# #{example.label}",
-        content: has_template ? example.template_source(render_args[:template]) : example.method_source,
-        lang: has_template ? example.template_lang(render_args[:template]) : example.source_lang
+      {
+        label: example.label,
+        notes: example.notes,
+        html: preview_controller.render_example_to_string(@preview, example.name),
+        source: has_template ? example.template_source(render_args[:template]) : example.method_source,
+        source_lang: has_template ? example.template_lang(render_args[:template]) : example.source_lang,
+        params: enabled?(:params) ? example.params : []
       }
-      if example.notes.present?
-        @notes << {
-          label: example.label,
-          content: example.notes
-        }
-      end
     end
 
-    def rendered_example
-      if @example.type == :group
-        examples = @example.examples.map do |example|
-          {
-            label: example.label,
-            html: preview_controller.render_example_to_string(@preview, example.name)
-          }
-        end
-        set_params
-        preview_controller.render_in_layout_to_string("lookbook/preview/group", {examples: examples}, @preview.lookbook_layout)
-      else
-        set_params(@example)
-        preview_controller.params[:path] = "#{@preview.preview_name}/#{@example.name}".chomp("/")
-        preview_controller.process(:previews)
-      end
+    def render_examples(examples)
+      preview_controller.render_in_layout_to_string("layouts/lookbook/preview", {examples: examples}, @preview.lookbook_layout)
     end
 
-    def set_params(example = nil)
-      example_params = example.nil? ? @preview.display_params : example.display_params
+    def set_params
+      if enabled?(:params)
+        # cast known params to type
+        @example.params.each do |param|
+          if preview_controller.params.key?(param[:name])
+            preview_controller.params[param[:name]] = Lookbook::Params.cast(preview_controller.params[param[:name]], param[:type])
+          end
+        end
+      end
+      # set display params
       preview_controller.params.merge!({
         lookbook: {
-          display: example_params
+          display: @example.display_params
         }
       })
     end
 
-    def assign_inspector
-      @inspector = {
-        panes: {
-          source: {
-            label: "Source",
-            template: "code",
-            hotkey: "s",
-            items: @source,
-            clipboard: @source.map { |s| @source.many? ? "#{s[:label]}\n#{s[:content]}" : s[:content] }.join("\n\n")
-          },
-          output: {
-            label: "Output",
-            template: "code",
-            hotkey: "o",
-            items: @output,
-            clipboard: @output.map { |o| @output.many? ? "#{o[:label]}\n#{o[:content]}" : o[:content] }.join("\n\n")
-          },
-          notes: {
-            label: "Notes",
-            template: "notes",
-            hotkey: "n",
-            items: @notes,
-            disabled: @notes.none?
-          }
-        }
-      }
-    end
-
-    def assign_nav
+    def build_nav
       @nav = Collection.new
       previews.reject { |p| p.hidden? }.each do |preview|
         current = @nav
@@ -161,6 +117,41 @@ module Lookbook
       @nav
     end
 
+    def panels
+      {
+        source: {
+          label: "Source",
+          template: "lookbook/panels/source",
+          hotkey: "s",
+          show: true,
+          disabled: false,
+          copy: true
+        },
+        output: {
+          label: "Output",
+          template: "lookbook/panels/output",
+          hotkey: "o",
+          show: true,
+          disabled: false,
+          copy: true
+        },
+        notes: {
+          label: "Notes",
+          template: "lookbook/panels/notes",
+          hotkey: "n",
+          show: true,
+          disabled: @examples.filter { |e| e[:notes].present? }.none?
+        },
+        params: {
+          label: "Params",
+          template: "lookbook/panels/params",
+          hotkey: "p",
+          show: enabled?(:params),
+          disabled: @example.type == :group || @example.params.none?
+        }
+      }
+    end
+
     def previews
       Lookbook::Preview.all.sort_by(&:label)
     end
@@ -174,5 +165,9 @@ module Lookbook
       controller.response = response
       @preview_controller ||= controller
     end
+
+    def enabled?(feature)
+      Lookbook::Features.enabled?(feature)
+    end
   end
 end