lookbook 0.9.0 → 1.0.0.beta.2

data/app/{assets/lookbook/js/components/preview-window.js → components/lookbook/viewport/component.js}

@@ -1,34 +1,53 @@
-export default function preview() {
+export default function viewportComponent(store) {
+  store = store || { width: "100%", height: "100%" };
+  store.resizing = false;
+
   return {
-    get store() {
-      return this.$store.inspector.preview;
-    },
+    store,
+
     get maxWidth() {
-      return this.store.width === "100%" ? "100%" : `${this.store.width}px`;
+      return this.store.width === "100%" ? "100%" : `${store.width}px`;
     },
+
     get maxHeight() {
-      return this.store.height === "100%" ? "100%" : `${this.store.height}px`;
+      return this.store.height === "100%" ? "100%" : `${store.height}px`;
     },
+
     get parentWidth() {
-      return Math.round(this.$root.parentElement.clientWidth);
+      return Math.round(this.$root.clientWidth);
     },
+
     get parentHeight() {
-      return Math.round(this.$root.parentElement.clientHeight);
+      return Math.round(this.$root.clientHeight);
+    },
+
+    get reflowing() {
+      return this.$store.layout.reflowing;
+    },
+
+    reloadIframe() {
+      this.$refs.iframe.contentWindow.location.reload();
     },
+
     start() {
+      this.$dispatch("viewport:resize-start", this._resizeData);
       this.$store.layout.reflowing = true;
       this.store.resizing = true;
     },
+
     end() {
       this.$store.layout.reflowing = false;
       this.store.resizing = false;
+      this.$dispatch("viewport:resize-complete", this._resizeData);
     },
+
     onResizeStart(e) {
       this.onResizeWidthStart(e);
       this.onResizeHeightStart(e);
     },
+
     toggleFullSize() {
-      const { height, width } = this.store;
+      const { height, width } = store;
       if (height === "100%" && width === "100%") {
         this.toggleFullHeight();
         this.toggleFullWidth();
@@ -37,6 +56,7 @@ export default function preview() {
         if (width !== "100%") this.toggleFullWidth();
       }
     },
+
     onResizeWidth(e) {
       const width =
         this.resizeStartWidth - (this.resizeStartPositionX - e.pageX) * 2;
@@ -46,30 +66,37 @@ export default function preview() {
       );
       this.store.width =
         boundedWidth === this.parentWidth ? "100%" : boundedWidth;
+      this.$dispatch("viewport:resize-progress", this._resizeData);
     },
+
     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;
+      this.resizeStartWidth = this.$refs.wrapper.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;
+      this.$dispatch("viewport:resize-start", this._resizeData);
+      const { width, lastWidth } = store;
       if (width === "100%" && lastWidth) {
         this.store.width = lastWidth;
       } else {
         this.store.lastWidth = width;
         this.store.width = "100%";
       }
+      this.$dispatch("viewport:resize-complete", this._resizeData);
     },
+
     onResizeHeight(e) {
       const height =
         this.resizeStartHeight - (this.resizeStartPositionY - e.pageY);
@@ -77,31 +104,47 @@ export default function preview() {
         Math.max(Math.round(height), 200),
         this.parentHeight
       );
-      this.$store.inspector.preview.height =
+      this.store.height =
         boundedHeight === this.parentHeight ? "100%" : boundedHeight;
+      this.$dispatch("viewport:resize-progress", this._resizeData);
     },
+
     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;
+      this.resizeStartHeight = this.$refs.wrapper.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;
+      this.$dispatch("viewport:resize-start", this._resizeData);
+      const { height, lastHeight } = store;
       if (height === "100%" && lastHeight) {
         this.store.height = lastHeight;
       } else {
         this.store.lastHeight = height;
         this.store.height = "100%";
       }
+      this.$dispatch("viewport:resize-complete", this._resizeData);
+    },
+
+    // protected
+
+    get _resizeData() {
+      return {
+        width: this.store.width,
+        height: this.store.height,
+        viewport: this,
+      };
     },
   };
 }

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

@@ -0,0 +1,21 @@
+module Lookbook
+  class Viewport::Component < Lookbook::Component
+    def initialize(src:, resize_height: true, resize_width: true, max_height: nil, **html_attrs)
+      @src = src
+      @resize_height = resize_height
+      @resize_width = resize_width
+      @max_height = max_height
+      super(**html_attrs)
+    end
+
+    def generate_id(*args)
+      args.map { |args| args.delete_prefix("/").tr("&?=/_\-", "-") }.join("-")
+    end
+
+    protected
+
+    def alpine_component
+      "viewportComponent"
+    end
+  end
+end

data/app/controllers/lookbook/application_controller.rb

@@ -6,23 +6,34 @@ module Lookbook
     helper Lookbook::OutputHelper
     helper Lookbook::ComponentHelper
 
+    before_action :generate_theme_overrides
+
     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 lookbook_page_path(landing.lookup_path)
-        end
+      landing = Lookbook.pages.find(&:landing) || Lookbook.pages.first
+      if landing.present?
+        redirect_to lookbook_page_path(landing.lookup_path)
+      else
+        render "lookbook/index", layout: Lookbook.previews.any? ? "lookbook/application" : "lookbook/shell"
       end
     end
 
     protected
 
+    def generate_theme_overrides
+      @theme_overrides ||= Lookbook::Theme.new(Lookbook.config.ui_theme_overrides).to_css
+    end
+
     def feature_enabled?(feature)
       Lookbook::Features.enabled?(feature)
     end
+
+    def render_in_layout(path, layout: nil, **locals)
+      @error = locals[:error]
+      render path, layout: layout.presence || (params[:lookbook_embed] ? "lookbook/basic" : "lookbook/application"), locals: locals
+    end
   end
 end

data/app/controllers/lookbook/pages_controller.rb

@@ -1,5 +1,6 @@
 module Lookbook
   class PagesController < ApplicationController
+    layout "lookbook/page"
     helper_method :page_controller
 
     def self.controller_path
@@ -11,8 +12,7 @@ module Lookbook
       if landing.present?
         redirect_to lookbook_page_path landing.lookup_path
       else
-        @title = "Not found"
-        render "not_found"
+        show_404
       end
     end
 
@@ -20,27 +20,36 @@ module Lookbook
       @pages = Lookbook.pages
       @page = @pages.find_by_path(params[:path])
       if @page
+        @next_page = @pages.find_next(@page)
+        @previous_page = @pages.find_previous(@page)
         if @page.errors.any?
-          render "lookbook/error", locals: {error: @page.errors.first}
+          render_in_layout "lookbook/error",
+            layout: "lookbook/page",
+            error: @page.errors.first
         else
           begin
             @page_content = page_controller.render_page(@page)
-            @next_page = @pages.find_next(@page)
-            @previous_page = @pages.find_previous(@page)
             @title = @page.title
           rescue => exception
-            render "lookbook/error", locals: {
+            render_in_layout "lookbook/error",
+              layout: "lookbook/page",
               error: Lookbook::Error.new(exception, file_path: @page.full_path, source_code: @page.content)
-            }
           end
         end
       else
-        render "not_found"
+        show_404
       end
     end
 
     protected
 
+    def show_404
+      render "lookbook/404", locals: {
+        message: "Page not found",
+        description: "The page may have been removed or renamed."
+      }
+    end
+
     def page_controller
       controller_class = Lookbook.config.page_controller.constantize
       controller = controller_class.new

data/app/controllers/lookbook/previews_controller.rb

@@ -1,148 +1,189 @@
 module Lookbook
   class PreviewsController < ApplicationController
+    layout "lookbook/inspector"
+
     def self.controller_path
       "lookbook/previews"
     end
 
     before_action :lookup_entities, only: [:preview, :show]
     before_action :set_title
+    before_action :set_params
 
     def preview
       if @example
-        set_params
         begin
-          render html: render_examples(examples_data)
+          opts = {layout: @preview.layout}
+          if params[:lookbook_embed] == "true"
+            opts[:append_html] = "<script src=\"/lookbook-assets/js/embed.js?v=#{Lookbook.version}\"></script>".html_safe
+          end
+          preview_html = preview_controller.process(:render_in_layout_to_string, "lookbook/preview", inspector_data, **opts)
+          render html: preview_html
         rescue => exception
           render_in_layout "lookbook/error",
-            layout: "lookbook/basic",
-            error: prettify_error(exception),
-            disable_header: true
+            layout: "lookbook/standalone",
+            error: prettify_error(exception)
         end
       else
-        render_in_layout "not_found"
+        show_404 layout: "lookbook/standalone"
       end
     end
 
     def show
       if @example
         begin
-          set_params
-          @examples = examples_data
-          @drawer_panels = drawer_panels.select { |name, panel| panel[:show] }
-          @preview_panels = preview_panels.select { |name, panel| panel[:show] }
+          @main_panels = main_panels
+          @drawer_panels = drawer_panels
         rescue => exception
-          render_in_layout "lookbook/error", error: prettify_error(exception)
+          render_in_layout "lookbook/error", layout: "lookbook/inspector", error: prettify_error(exception)
         end
       else
-        render_in_layout "not_found"
+        show_404
       end
     end
 
+    def show_legacy
+      Lookbook.logger.warn("Legacy URL path detected. These paths are deprecated and will be removed in a future version")
+      redirect_to lookbook_inspect_path params[:path]
+    end
+
     private
 
     def lookup_entities
       @example = Lookbook.previews.find_example(params[:path])
-      if @example
+      if @example.present?
         @preview = @example.preview
         if params[:path] == @preview&.lookup_path
           redirect_to lookbook_inspect_path "#{params[:path]}/#{@preview.default_example.name}"
         end
       else
-        first_example = Lookbook.previews.find(params[:path])&.examples&.first
-        redirect_to lookbook_inspect_path(first_example.lookup_path) if first_example
+        @preview = Lookbook.previews.find(params[:path])
+        if @preview.present?
+          first_example = @preview.examples.first
+          redirect_to lookbook_inspect_path(first_example.lookup_path) if first_example
+        else
+          @preview = Lookbook.previews.find(path_segments.slice(0, path_segments.size - 1).join("/"))
+        end
       end
     end
 
+    def show_404(layout: nil)
+      locals = if @preview
+        {
+          message: "Example not found",
+          description: "The '#{@preview.label}' preview does not have an example named '#{path_segments.last}'."
+        }
+      else
+        {
+          message: "Not found",
+          description: "Looked for '#{params[:path]}'.<br>The preview may have been renamed or deleted."
+        }
+      end
+      render_in_layout "lookbook/404", layout: layout, **locals
+    end
+
+    def target_examples
+      @example.type == :group ? @example.examples : [@example]
+    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)
+    def set_params
+      if @example
+        # 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: {
+            display: @example.display_params
+          }
+        })
       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"
-      {
-        label: example.label,
-        notes: example.notes,
-        html: preview_controller.process(: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: example.params
-      }
+    def preview_params
+      preview_controller.params.permit!
+      preview_controller.params.to_h.select do |key, value|
+        !!@example.params.find { |param| param[:name] == key }
+      end
     end
 
-    def render_examples(examples)
-      preview_controller.process(:render_in_layout_to_string, "layouts/lookbook/preview", {examples: examples}, @preview.layout)
-    end
+    def inspector_data
+      return @inspector_data if @inspector_data.present?
 
-    def set_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])
+      request_data = {
+        preview_params: preview_params,
+        path: params[:path],
+        query_parameters: request.query_parameters,
+        original: request
+      }
+
+      preview_data = {
+        relative_path: @preview.full_path.relative_path_from(Rails.root.to_s),
+        full_path: @preview.full_path,
+        example_label: @example.label,
+        params: @example.params,
+      }
+      [:id, :label, :notes, :lookup_path, :full_path].each do |prop|
+        preview_data[prop] = @preview.public_send(prop)
+      end
+
+      examples_data = target_examples.map do |example|
+        render_args = @preview.render_args(example.name, params: preview_controller.params)
+        has_template = render_args[:template] != "view_components/preview"
+        example_data = Lookbook::Store.new({
+          output: preview_controller.process(: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,
+        })
+        [:id, :label, :notes, :lookup_path, :params, :display_params].each do |prop|
+          example_data[prop] = example.public_send(prop)
         end
+        example_data
       end
 
-      # set display params
-      preview_controller.params.merge!({
-        lookbook: {
-          display: @example.display_params
-        }
+      @inspector_data ||= Lookbook::Store.new({
+        request: request_data,
+        preview: preview_data,
+        examples: examples_data
       })
     end
 
-    def preview_panels
-      {
-        preview: {
-          label: "Preview",
-          template: "lookbook/previews/panels/preview",
-          srcdoc: Lookbook.config.preview_srcdoc ? render_examples(examples_data).gsub("\"", "&quot;") : nil,
-          hotkey: "v",
-          show: true,
-          disabled: false,
-          copy: false
-        },
-        output: {
-          label: "HTML",
-          template: "lookbook/previews/panels/output",
-          hotkey: "o",
-          show: true,
-          disabled: false,
-          copy: true
+    def panels
+      return @panels if @panels.present?
+      @panels = []
+      Lookbook.config.inspector_panels.each do |name, config|
+        config_with_defaults = Lookbook.config.inspector_panel_defaults.merge(config)
+
+        callable_data = {
+          name: name.to_s,
+          index_position: (@panels.filter { |p| p.pane == config.pane }.size + 1),
+          **inspector_data
         }
-      }
+
+        resolved_config = config_with_defaults.transform_values do |value|
+          value.class == Proc ? value.call(Lookbook::Store.new(callable_data)) : value
+        end
+        resolved_config[:name] = name.to_s
+        
+        @panels << Lookbook::Store.new(resolved_config, deep: false)
+      end
+
+      @panels.filter(&:show).sort_by { |p| [p.position, p.label] }
+    end
+   
+    def main_panels
+      panels.filter { |panel| panel.pane == :main }
     end
 
     def drawer_panels
-      {
-        source: {
-          label: "Source",
-          template: "lookbook/previews/panels/source",
-          hotkey: "s",
-          show: true,
-          disabled: false,
-          copy: true
-        },
-        notes: {
-          label: "Notes",
-          template: "lookbook/previews/panels/notes",
-          hotkey: "n",
-          show: true,
-          disabled: @examples.select { |e| e[:notes].present? }.none?
-        },
-        params: {
-          label: "Params",
-          template: "lookbook/previews/panels/params",
-          hotkey: "p",
-          show: true,
-          disabled: @example.type == :group || @example.params.none?
-        }
-      }
+      panels.filter { |panel| panel.pane == :drawer }
     end
 
     def preview_controller
@@ -153,10 +194,6 @@ module Lookbook
       @preview_controller ||= controller
     end
 
-    def render_in_layout(path, layout: nil, **locals)
-      render path, layout: layout.presence || (params[:lookbook_embed] ? "lookbook/basic" : "lookbook/application"), locals: locals
-    end
-
     def prettify_error(exception)
       error_params = if exception.is_a?(ViewComponent::PreviewTemplateError)
         {
@@ -178,5 +215,9 @@ module Lookbook
       end
       Lookbook::Error.new(exception, **(error_params || {}))
     end
+
+    def path_segments
+      params[:path].split("/")
+    end
   end
 end

data/app/helpers/lookbook/application_helper.rb

@@ -9,12 +9,16 @@ module Lookbook
     end
 
     def landing_path
-      landing = feature_enabled?(:pages) ? Lookbook.pages.find(&:landing) || Lookbook.pages.first : nil
+      landing = Lookbook.pages.find(&:landing) || Lookbook.pages.first
       if landing.present?
-        page_path(landing.lookup_path)
+        lookbook_page_path landing.lookup_path
       else
         lookbook_home_path
       end
     end
+
+    def generate_id(*args)
+      args.map { |args| args.delete_prefix("/").tr("&?=/_\-", "-") }.join("-")
+    end
   end
 end

data/app/helpers/lookbook/component_helper.rb

@@ -1,16 +1,15 @@
 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
+    COMPONENT_CLASSES = {} # cache for constantized references
 
-    def icon(name, size: 4, **attrs)
-      render_component "icon", name: name, size: size, **attrs
+    def render_component(ref, **attrs, &block)
+      klass = component_class(ref)
+      comp = attrs.key?(:content) ? klass.new(**attrs.except(:content)).with_content(attrs[:content]) : klass.new(**attrs)
+      render comp, &block
     end
 
-    def code(language = "ruby", **opts, &block)
-      render_component "code", language: language, **opts, &block
+    def render_tag(tag = :div, **attrs, &block)
+      render Lookbook::TagComponent.new(tag: tag, **attrs), &block
     end
 
     if Rails.version.to_f < 6.1
@@ -20,10 +19,23 @@ module Lookbook
       end
     end
 
-    alias_method :component, :render_component
-
     private
 
+    def component_class(ref)
+      klass = COMPONENT_CLASSES[ref]
+      if klass.nil?
+        ref = ref.to_s.tr("-", "_")
+        class_namespace = ref.camelize
+        begin
+          klass = "Lookbook::#{class_namespace}::Component".constantize
+        rescue
+          klass = "Lookbook::#{class_namespace}Component".constantize
+        end
+        COMPONENT_CLASSES[ref] = klass
+      end
+      klass
+    end
+
     def build_tag_values(*args)
       tag_values = []
       args.each do |tag_value|

data/app/helpers/lookbook/output_helper.rb

@@ -4,12 +4,16 @@ module Lookbook
       Lookbook::Markdown.render(block ? capture(&block) : text)
     end
 
-    def highlight(source, language, opts = {})
-      Lookbook::CodeFormatter.highlight(source, language, opts)
+    def highlight(source, **opts)
+      Lookbook::CodeFormatter.highlight(source, **opts)
     end
 
-    def beautify(source, language = "html")
-      Lookbook::CodeFormatter.beautify(source, language)
+    def beautify(source, **opts)
+      Lookbook::CodeFormatter.beautify(source, **opts)
+    end
+
+    def pretty_json(obj)
+      JSON.pretty_generate(obj)
     end
   end
 end