lookbook 0.6.1 → 0.7.0

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

@@ -1,47 +1,25 @@
-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();
-      const newDoc = new DOMParser().parseFromString(html, "text/html");
-      this.morph(newDoc);
-      document.title = newDoc.title;
-    },
-    setLocation(loc) {
-      const path = loc instanceof Event ? loc.currentTarget.href : loc;
-      history.pushState({}, null, path);
-      this.$dispatch("popstate");
+    init() {},
+    scrollToTop() {
+      this.$refs.scroller.scrollTop = 0;
     },
-    refresh() {
-      this.$dispatch("popstate");
-    },
-    morph(dom) {
-      const pageHtml = dom.getElementById(this.$root.id).outerHTML;
-      Alpine.morph(this.$root, pageHtml, morphOpts);
-      this.$dispatch("page:morphed");
+    checkForNavigation(event) {
+      const link = event.target.closest("a[href]");
+      if (
+        link &&
+        !isExternalLink(link.href) &&
+        link.getAttribute("target") !== "_blank"
+      ) {
+        event.preventDefault();
+        this.setLocation(link.href);
+      }
     },
   };
 }
+
+function isExternalLink(url) {
+  const tmp = document.createElement("a");
+  tmp.href = url;
+  return tmp.host !== window.location.host;
+}

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

@@ -1,3 +1,18 @@
 export default function sidebar() {
-  return {};
+  return {
+    init() {
+      this.$nextTick(() => this.setActiveNavItem());
+    },
+    setActiveNavItem() {
+      const target = this.$el.querySelector(
+        `[data-path="${window.location.pathname}"]`
+      );
+      this.$store.nav.active = target ? target.id : "";
+    },
+    setSplits(splits) {
+      if (splits.length) {
+        this.$store.sidebar.panelSplits = [splits[0] || 1.0, splits[2] || 1.0];
+      }
+    },
+  };
 }

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

@@ -11,7 +11,7 @@ export default function splitter(direction, props = {}) {
         minSize: props.minSize || 0,
         writeStyle() {},
         onDrag: (dir, track, style) => {
-          this.splits = style.split(" ").map((num) => parseInt(num));
+          this.splits = style.split(" ").map((num) => parseFloat(num, 10));
         },
         onDragStart: () => {
           this.$store.layout.reflowing = true;

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

@@ -19,7 +19,9 @@ export default function tabs() {
       });
     },
     get tabs() {
-      return Array.from(this.$refs.tabs.querySelectorAll(":scope > a"));
+      return Array.from(
+        this.$refs.tabs ? this.$refs.tabs.querySelectorAll(":scope > a") : []
+      );
     },
     get visibleTabCount() {
       let cumulativeWidth = 0;

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

@@ -0,0 +1 @@
+import "iframe-resizer/js/iframeResizer.contentWindow";

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

@@ -11,11 +11,5 @@ export default function (element, props) {
       const splits = style.split(" ").map((num) => parseInt(num));
       props.onDrag(splits);
     },
-    // onDragStart() {
-    //   this.reflowing = true;
-    // },
-    // onDragEnd() {
-    //   this.reflowing = false;
-    // },
   });
 }

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

@@ -8,5 +8,8 @@ export default function createLayoutStore() {
     reflowing: false,
     desktop: true,
     desktopWidth: config.desktopWidth,
+    get mobile() {
+      return !this.desktop;
+    },
   };
 }

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

@@ -0,0 +1,5 @@
+export default function createNavStore(Alpine) {
+  return {
+    embeds: {},
+  };
+}

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

@@ -3,8 +3,9 @@ import config from "../config";
 export default function createSidebarStore(Alpine) {
   const { defaultWidth, minWidth, maxWidth } = config.sidebar;
   return {
-    open: Alpine.$persist(false).as("sidebar-open"),
+    open: Alpine.$persist(true).as("sidebar-open"),
     width: Alpine.$persist(defaultWidth).as("sidebar-width"),
+    panelSplits: Alpine.$persist([1.0, 1.0]).as(`sidebar-panel-splits`),
     minWidth,
     maxWidth,
     toggle() {

data/app/controllers/lookbook/application_controller.rb

@@ -0,0 +1,28 @@
+module Lookbook
+  class ApplicationController < ActionController::Base
+    protect_from_forgery with: :exception
+
+    helper Lookbook::ApplicationHelper
+    helper Lookbook::OutputHelper
+    helper Lookbook::ComponentHelper
+
+    def self.controller_path
+      "lookbook"
+    end
+
+    def index
+      if feature_enabled? :pages
+        landing = Lookbook.pages.find(&:landing) || Lookbook.pages.first
+        if landing.present?
+          redirect_to page_path(landing.lookup_path)
+        end
+      end
+    end
+
+    protected
+
+    def feature_enabled?(feature)
+      Lookbook::Features.enabled?(feature)
+    end
+  end
+end

data/app/controllers/lookbook/page_controller.rb

@@ -0,0 +1,20 @@
+module Lookbook
+  class PageController < ActionController::Base
+    helper Lookbook::ComponentHelper
+    helper Lookbook::PageHelper
+    helper Lookbook::OutputHelper
+
+    Lookbook.config.page_paths.each do |path|
+      prepend_view_path Rails.root.join(path)
+    end
+
+    def render_page(page, locals = {})
+      @page = page
+      @pages = Lookbook.pages
+      @next_page = @pages.find_next(@page)
+      @previous_page = @pages.find_previous(@page)
+      content = render_to_string inline: @page.content
+      @page.markdown? ? Lookbook::Markdown.render(content) : content
+    end
+  end
+end

data/app/controllers/lookbook/pages_controller.rb

@@ -0,0 +1,40 @@
+module Lookbook
+  class PagesController < ApplicationController
+    def self.controller_path
+      "lookbook/pages"
+    end
+
+    def index
+      landing = Lookbook.pages.find(&:landing) || Lookbook.pages.first
+      if landing.present?
+        redirect_to page_path landing.lookup_path
+      else
+        @title = "Not found"
+        render "not_found"
+      end
+    end
+
+    def show
+      @pages = Lookbook.pages
+      @page = @pages.find_by_path(params[:path])
+      if @page
+        @page_content = page_controller.render_page(@page)
+        @next_page = @pages.find_next(@page)
+        @previous_page = @pages.find_previous(@page)
+        @title = @page.title
+      else
+        @title = "Not found"
+        render "not_found"
+      end
+    end
+
+    protected
+
+    def page_controller
+      controller_class = Lookbook.config.page_controller.constantize
+      controller = controller_class.new
+      controller.request = request
+      controller
+    end
+  end
+end

data/app/controllers/lookbook/{app_controller.rb → previews_controller.rb}

@@ -1,24 +1,25 @@
 module Lookbook
-  class AppController < ActionController::Base
-    EXCEPTIONS = [ViewComponent::PreviewTemplateError, ViewComponent::ComponentError, ViewComponent::TemplateError, ActionView::Template::Error]
-
-    protect_from_forgery with: :exception
-    helper Lookbook::ApplicationHelper
-
-    before_action :find_preview, only: [:preview, :show]
-    before_action :find_example, only: [:preview, :show]
-    before_action :build_nav
+  class PreviewsController < ApplicationController
+    EXCEPTIONS = [
+      ViewComponent::PreviewTemplateError,
+      ViewComponent::ComponentError,
+      ViewComponent::TemplateError,
+      ActionView::Template::Error
+    ]
 
     def self.controller_path
-      "lookbook"
+      "lookbook/previews"
     end
 
+    before_action :lookup_entities, only: [:preview, :show]
+    before_action :set_title
+
     def preview
       if @example
         set_params
         render html: render_examples(examples_data)
       else
-        render "not_found"
+        render_in_layout "not_found"
       end
     end
 
@@ -30,33 +31,29 @@ module Lookbook
           @drawer_panels = drawer_panels.filter { |name, panel| panel[:show] }
           @preview_panels = preview_panels.filter { |name, panel| panel[:show] }
         rescue *EXCEPTIONS
-          render "error"
+          render_in_layout "error"
         end
       else
-        render "not_found"
+        render_in_layout "not_found"
       end
     end
 
     private
 
-    def find_preview
-      candidates = []
-      params[:path].to_s.scan(%r{/|$}) { candidates << $` }
-      match = candidates.reverse.detect { |candidate| Lookbook::Preview.exists?(candidate) }
-      @preview = match ? Lookbook::Preview.find(match) : nil
-    end
-
-    def find_example
-      @example = if @preview
-        if params[:path] == @preview.lookbook_path
-          redirect_to show_path "#{params[:path]}/#{@preview.lookbook_examples.first.name}"
-        else
-          @example_name = File.basename(params[:path])
-          @preview.lookbook_example(@example_name)
+    def lookup_entities
+      @example = Lookbook.previews.find_example(params[:path])
+      if @example
+        @preview = @example.preview
+        if params[:path] == @preview&.lookup_path
+          redirect_to show_path "#{params[:path]}/#{@preview.default_example.name}"
         end
       end
     end
 
+    def set_title
+      @title = @example.present? ? [@example&.label, @preview&.label].compact.join(" :: ") : "Not found"
+    end
+
     def examples_data
       @examples_data ||= (@example.type == :group ? @example.examples : [@example]).map do |example|
         example_data(example)
@@ -72,23 +69,22 @@ module Lookbook
         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 : []
+        params: example.params
       }
     end
 
     def render_examples(examples)
-      preview_controller.render_in_layout_to_string("layouts/lookbook/preview", {examples: examples}, @preview.lookbook_layout)
+      preview_controller.render_in_layout_to_string("layouts/lookbook/preview", {examples: examples}, @preview.layout)
     end
 
     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
+      # 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
+
       # set display params
       preview_controller.params.merge!({
         lookbook: {
@@ -97,31 +93,11 @@ module Lookbook
       })
     end
 
-    def build_nav
-      @nav = Collection.new
-      previews.reject { |p| p.hidden? }.each do |preview|
-        current = @nav
-        if preview.hierarchy_depth == 1
-          current.add(preview)
-        else
-          preview.lookbook_parent_collections.each.with_index(1) do |name, i|
-            target = current.get_or_create(name)
-            if preview.hierarchy_depth == i + 1
-              target.add(preview)
-            else
-              current = target
-            end
-          end
-        end
-      end
-      @nav
-    end
-
     def preview_panels
       {
         preview: {
           label: "Preview",
-          template: "lookbook/panels/preview",
+          template: "lookbook/previews/panels/preview",
           srcdoc: Lookbook.config.preview_srcdoc ? render_examples(examples_data).gsub("\"", "&quot;") : nil,
           hotkey: "v",
           show: true,
@@ -130,7 +106,7 @@ module Lookbook
         },
         output: {
           label: "HTML",
-          template: "lookbook/panels/output",
+          template: "lookbook/previews/panels/output",
           hotkey: "o",
           show: true,
           disabled: false,
@@ -143,7 +119,7 @@ module Lookbook
       {
         source: {
           label: "Source",
-          template: "lookbook/panels/source",
+          template: "lookbook/previews/panels/source",
           hotkey: "s",
           show: true,
           disabled: false,
@@ -151,25 +127,21 @@ module Lookbook
         },
         notes: {
           label: "Notes",
-          template: "lookbook/panels/notes",
+          template: "lookbook/previews/panels/notes",
           hotkey: "n",
           show: true,
           disabled: @examples.filter { |e| e[:notes].present? }.none?
         },
         params: {
           label: "Params",
-          template: "lookbook/panels/params",
+          template: "lookbook/previews/panels/params",
           hotkey: "p",
-          show: enabled?(:params),
+          show: true,
           disabled: @example.type == :group || @example.params.none?
         }
       }
     end
 
-    def previews
-      Lookbook::Preview.all.sort_by(&:label)
-    end
-
     def preview_controller
       return @preview_controller if @preview_controller.present?
       controller_class = Lookbook.config.preview_controller.constantize
@@ -180,8 +152,8 @@ module Lookbook
       @preview_controller ||= controller
     end
 
-    def enabled?(feature)
-      Lookbook::Features.enabled?(feature)
+    def render_in_layout(path)
+      render "not_found", layout: params[:lookbook_embed] ? "lookbook/basic" : "lookbook/application"
     end
   end
 end

data/app/helpers/lookbook/application_helper.rb

@@ -1,73 +1,20 @@
-require "redcarpet"
-require "rouge"
-require "htmlbeautifier"
-
 module Lookbook
   module ApplicationHelper
     def config
       Lookbook::Engine.config.lookbook
     end
 
-    def markdown(text)
-      markdown = Redcarpet::Markdown.new(Redcarpet::Render::HTML, {
-        tables: true,
-        fenced_code_blocks: true,
-        disable_indented_code_blocks: true
-      })
-      markdown.render(text).html_safe
-    end
-
-    def highlight(source, language, opts = {})
-      formatter = Lookbook::CodeFormatter.new(opts)
-      lexer = Rouge::Lexer.find(language)
-      formatter.format(lexer.lex(source)).html_safe
-    end
-
-    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)
+    def feature_enabled?(name)
+      Lookbook::Features.enabled?(name)
     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
+    def landing_path
+      landing = feature_enabled?(:pages) ? Lookbook.pages.find(&:landing) || Lookbook.pages.first : nil
+      if landing.present?
+        page_path(landing.lookup_path)
+      else
+        home_path
       end
-      tag_values
     end
   end
 end

data/app/helpers/lookbook/component_helper.rb

@@ -0,0 +1,40 @@
+module Lookbook
+  module ComponentHelper
+    def render_component(name, **attrs, &block)
+      attrs[:classes] = class_names(attrs[:class])
+      render "lookbook/components/#{name.underscore}", **attrs.except(:class), &block
+    end
+
+    def icon(name, size: 4, **attrs)
+      render_component "icon", name: name, size: size, **attrs
+    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
+
+    alias_method :component, :render_component
+
+    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

data/app/helpers/lookbook/output_helper.rb

@@ -0,0 +1,15 @@
+module Lookbook
+  module OutputHelper
+    def markdown(text = nil, &block)
+      Lookbook::Markdown.render(block ? capture(&block) : text)
+    end
+
+    def highlight(source, language, opts = {})
+      Lookbook::CodeFormatter.highlight(source, language, opts)
+    end
+
+    def beautify(source, language = "html")
+      Lookbook::CodeFormatter.beautify(source, language)
+    end
+  end
+end

data/app/helpers/lookbook/page_helper.rb

@@ -0,0 +1,46 @@
+module Lookbook
+  module PageHelper
+    include Utils
+
+    def page_path(id)
+      page = id.is_a?(Page) ? id : Lookbook.pages.find(id)
+      lookbook.page_path page.lookup_path
+    end
+
+    def code(language = "ruby", line_numbers: false, &block)
+      render_component "code", language: language, line_numbers: line_numbers, &block
+    end
+
+    def embed(*args, params: {}, type: :preview, **opts)
+      return unless args.any?
+
+      @embed_counter ||= 0
+
+      preview_lookup = args.first.is_a?(Symbol) ? args.first : preview_class_name(args.first)
+      preview = Lookbook.previews.find(preview_lookup)
+
+      example = args[1] ? preview&.example(args[1]) : preview&.default_example
+
+      if example
+        @embed_counter += 1
+        render_component "embed", {
+          id: generate_id("embed", url_for, example.lookup_path, @embed_counter - 1),
+          example: example,
+          params: params,
+          opts: opts
+        }
+      else
+        embed_not_found
+      end
+    end
+
+    protected
+
+    def embed_not_found
+      render_component "not_found", {
+        title: "Preview not found",
+        text: "The preview may have been renamed or deleted."
+      }
+    end
+  end
+end

data/app/helpers/lookbook/preview_helper.rb

@@ -1,7 +1,7 @@
 module Lookbook
   module PreviewHelper
     def lookbook_display(key, fallback = nil)
-      params[:lookbook][:display][key.to_sym] || fallback
+      params.dig(:lookbook, :display, key.to_sym) || fallback
     end
   end
 end

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

@@ -0,0 +1,30 @@
+<%= content_for :body do %>
+  <div
+    id="app"
+    x-data="app"
+    :style="`grid-template-columns: ${$store.sidebar.width}px 1px 1fr;`"
+    :class="{'grid': $store.sidebar.open && $store.layout.desktop}"
+    @popstate.window="await update(); $dispatch('page:changed')"
+    @refresh.window="update"
+    @resize.window="$store.layout.desktop = window.innerWidth >= $store.layout.desktopWidth"
+    class="w-screen h-screen">
+    <%= component "sidebar" %>
+    <div
+      x-data="splitter('vertical', {minSize: $store.sidebar.minWidth})"
+      class="h-full gutter border-r border-gray-300 relative"
+      x-show="$store.sidebar.open && $store.layout.desktop"
+      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 -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.layout.mobile && !$store.sidebar.open)"
+      x-cloak>
+      <%= yield %>
+    </main>
+  </div>
+<% end %>
+
+<%= render template: "layouts/lookbook/skeleton" %>