lookbook 0.4.5 → 0.5.0.beta.0

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

@@ -0,0 +1,107 @@
+export default function preview() {
+  return {
+    get store() {
+      return this.$store.inspector.preview;
+    },
+    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.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 { 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 {
+        this.store.lastHeight = height;
+        this.store.height = "100%";
+      }
+    },
+  };
+}

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/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

@@ -0,0 +1,20 @@
+export default {
+  desktopWidth: 768,
+  sidebar: {
+    defaultWidth: 280,
+    minWidth: 200,
+    maxWidth: 350,
+  },
+  inspector: {
+    drawer: {
+      orientation: "horizontal",
+      defaultPanel: "source",
+      defaultHeight: 200,
+      defaultWidth: 500,
+      minWidth: 350,
+    },
+    preview: {
+      view: "preview",
+    },
+  },
+};

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,24 @@
+import config from "../config";
+
+export default function createInspectorStore(Alpine) {
+  const { drawer, preview } = config.inspector;
+  return {
+    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"),
+      view: Alpine.$persist(preview.view).as("preview-view"),
+      lastWidth: null,
+      lastHeight: null,
+      resizing: false,
+    },
+  };
+}

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,46 @@
-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::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)
+          set_params
+          @examples = examples_data
+          @preview_srcdoc = if Lookbook.config.preview_srcdoc
+            render_examples(examples_data).gsub("\"", "&quot;")
           end
-          assign_inspector
+          @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,101 +59,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)
-      if example.present? && enabled?(:params)
+    def set_params
+      if enabled?(:params)
         # cast known params to type
-        example.params.each do |param|
+        @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
-      example_params = example.nil? ? @preview.display_params : example.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?
-          }
-        }
-      }
-      if enabled?(:params)
-        @inspector[:panes][:params] = {
-          label: "Params",
-          template: "params",
-          hotkey: "p",
-          items: @source.many? ? [] : @example.params,
-          disabled: @source.many? || @example.params.none?
-        }
-      end
-    end
-
-    def assign_nav
+    def build_nav
       @nav = Collection.new
       previews.reject { |p| p.hidden? }.each do |preview|
         current = @nav
@@ -179,6 +119,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

data/app/helpers/lookbook/application_helper.rb

@@ -1,5 +1,6 @@
 require "redcarpet"
 require "rouge"
+require "htmlbeautifier"
 
 module Lookbook
   module ApplicationHelper
@@ -16,14 +17,57 @@ module Lookbook
       markdown.render(text).html_safe
     end
 
-    def highlight(source, language)
-      formatter = Rouge::Formatters::HTML.new(css_class: "highlight")
+    def highlight(source, language, opts = {})
+      formatter = Lookbook::CodeFormatter.new(opts)
       lexer = Rouge::Lexer.find(language)
       formatter.format(lexer.lex(source)).html_safe
     end
 
-    def nav_padding_style(depth)
-      "padding-left: calc((#{depth - 1} * 12px) + 0.5rem);"
+    def beautify(source, language = "html")
+      source = source.strip
+      result = language.downcase == "html" ? HtmlBeautifier.beautify(source) : source
+      result.strip.html_safe
+    end
+
+    def icon(name = nil, size: 4, **attrs)
+      render "lookbook/components/icon",
+        name: name,
+        size: size,
+        classes: class_names(attrs[:class]),
+        **attrs.except(:class)
+    end
+
+    def component(name, **attrs, &block)
+      render "lookbook/components/#{name}",
+        classes: class_names(attrs[:class]),
+        **attrs.except(:class),
+        &block
+    end
+
+    if Rails.version.to_f < 6.1
+      def class_names(*args)
+        tokens = build_tag_values(*args).flat_map { |value| value.to_s.split(/\s+/) }.uniq
+        safe_join(tokens, " ")
+      end
+    end
+
+    private
+
+    def build_tag_values(*args)
+      tag_values = []
+      args.each do |tag_value|
+        case tag_value
+        when Hash
+          tag_value.each do |key, val|
+            tag_values << key.to_s if val && key.present?
+          end
+        when Array
+          tag_values.concat build_tag_values(*tag_value)
+        else
+          tag_values << tag_value.to_s if tag_value.present?
+        end
+      end
+      tag_values
     end
   end
 end