lookbook 0.9.3 → 1.0.0.beta.0

data/app/controllers/lookbook/pages_controller.rb

@@ -1,6 +1,6 @@
 module Lookbook
   class PagesController < ApplicationController
-    helper_method :page_controller
+    layout "lookbook/page"
 
     def self.controller_path
       "lookbook/pages"
@@ -9,10 +9,9 @@ module Lookbook
     def index
       landing = Lookbook.pages.find(&:landing) || Lookbook.pages.first
       if landing.present?
-        redirect_to lookbook_page_path landing.lookup_path
+        redirect_to page_path landing.lookup_path
       else
-        @title = "Not found"
-        render "not_found"
+        show_404
       end
     end
 
@@ -20,27 +19,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,5 +1,7 @@
 module Lookbook
   class PreviewsController < ApplicationController
+    layout "lookbook/inspector"
+
     def self.controller_path
       "lookbook/previews"
     end
@@ -14,12 +16,11 @@ module Lookbook
           render html: render_examples(examples_data)
         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
 
@@ -27,30 +28,55 @@ module Lookbook
       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] }
+          @rendered_examples = examples_data
+          @drawer_panels = drawer_panels.filter { |name, panel| panel[:show] }
+          @preview_panels = preview_panels.filter { |name, panel| panel[:show] }
         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 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}"
+          redirect_to inspect_path "#{params[:path]}/#{@preview.default_example.name}"
+        end
+      else
+        @preview = Lookbook.previews.find(params[:path])
+        if @preview.present?
+          first_example = @preview.examples.first
+          redirect_to 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
-        first_example = Lookbook.previews.find(params[:path])&.examples&.first
-        redirect_to lookbook_inspect_path(first_example.lookup_path) if first_example
+        {
+          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 set_title
@@ -72,12 +98,17 @@ module Lookbook
         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
+        params: example.params,
+        display: example.display_params
       }
     end
 
     def render_examples(examples)
-      preview_controller.process(:render_in_layout_to_string, "layouts/lookbook/preview", {examples: examples}, @preview.layout)
+      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_controller.process(:render_in_layout_to_string, "lookbook/preview", {examples: examples}, **opts)
     end
 
     def set_params
@@ -99,21 +130,22 @@ module Lookbook
     def preview_panels
       {
         preview: {
+          id: "preview-panel-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: {
+          id: "preview-panel-html",
           label: "HTML",
           template: "lookbook/previews/panels/output",
-          hotkey: "o",
+          hotkey: "h",
           show: true,
           disabled: false,
-          copy: true
+          copy: false
         }
       }
     end
@@ -121,26 +153,31 @@ module Lookbook
     def drawer_panels
       {
         source: {
+          id: "drawer-panel-source",
           label: "Source",
           template: "lookbook/previews/panels/source",
           hotkey: "s",
           show: true,
           disabled: false,
-          copy: true
+          copy: @rendered_examples.map { |e| e[:source] }.join("\n")
         },
         notes: {
+          id: "drawer-panel-notes",
           label: "Notes",
           template: "lookbook/previews/panels/notes",
           hotkey: "n",
           show: true,
-          disabled: @examples.select { |e| e[:notes].present? }.none?
+          copy: false,
+          disabled: @rendered_examples.filter { |e| e[:notes].present? }.none?
         },
         params: {
+          id: "drawer-panel-params",
           label: "Params",
           template: "lookbook/previews/panels/params",
           hotkey: "p",
           show: true,
-          disabled: @example.type == :group || @example.params.none?
+          disabled: @example.params.none?,
+          copy: false
         }
       }
     end
@@ -153,10 +190,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 +211,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?
-        lookbook_page_path landing.lookup_path
+        page_path(landing.lookup_path)
       else
-        lookbook_home_path
+        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

data/app/helpers/lookbook/page_helper.rb

@@ -4,38 +4,30 @@ module Lookbook
 
     def page_path(id)
       page = id.is_a?(Page) ? id : Lookbook.pages.find(id)
-      lookbook_page_path page.lookup_path
+      if page.present?
+        lookbook.page_path page.lookup_path
+      else
+        Lookbook.logger.warn "Could not find page with id ':#{id}'"
+      end
     end
 
-    def embed(*args, params: {}, type: :preview, **opts)
+    def embed(*args, params: {}, type: :preview, max_height: nil, **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
+      embed_id = "#{url_for}/embed/#{example.lookup_path}".delete_prefix("/").tr("/", "-")
 
-    def embed_not_found
-      render_component "not_found", {
-        title: "Preview not found",
-        text: "The preview may have been renamed or deleted."
-      }
+      render_component :embed,
+        id: embed_id,
+        example: example,
+        params: params,
+        max_height: max_height,
+        opts: opts
     end
   end
 end

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

@@ -1,30 +1,78 @@
-<%= 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>
+<% content_for :shell do %>
+  <%= render_component :split_layout,
+    alpine_data: "$store.layout.main",
+    ":class": "$store.layout.mobile && '!block'" do |layout| %>
+
+    <% layout.pane class: "flex flex-col bg-lookbook-sidebar relative translate-x-0",
+      ":class": "{
+        'transition': $store.layout.mobile,
+        'translate-x-full': $store.layout.mobile && sidebarHidden,
+        '!absolute right-0 bottom-0 top-[40px] h-[calc(100%_-_40px)] w-full max-w-[420px] z-50 border-l border-lookbook-divider': $store.layout.mobile
+      }",
+      "@click.outside": "closeMobileSidebar",
+      x_cloak: true do %>
+
+      <%= render_component :split_layout,
+        alpine_data: "$store.layout.#{Lookbook.pages.any? ? "sidebar" : "singleSectionSidebar"}",
+        style: "height: calc(100vh - 2.5rem);" do |layout| %>
+        <% layout.pane class: "overflow-hidden" do %>
+          <%= render_component :nav,
+            collection: Lookbook.previews,
+            alpine_data: "$store.nav.previews",
+            label: "Previews",
+            collapse_singles: true do |nav| %>
+            <% nav.filter store: "$store.nav.previews.filter", placeholder: "Filter by preview name&hellip;" %>
+          <% end %>
+        <% end %>
+
+        <% if Lookbook.pages.any? %>
+          <% layout.pane class: "overflow-hidden" do %>
+            <%= render_component :nav,
+              collection: Lookbook.pages,
+              alpine_data: "$store.nav.pages",
+              label: "Pages" %>
+          <% end %>
+        <% end %>
+
+      <% end %>
+
+      <% if Lookbook::Preview.errors.any? %>
+        <div x-data="{hidden: false}" class="flex-none border-t border-lookbook-divider absolute bottom-0 left-0 right-0" x-show="!hidden">
+          <%= render_component :toolbar do |toolbar| %>
+            <% toolbar.section padded: true, class: "flex items-center" do %>
+              <%= render_component :icon, name: :alert_triangle, size: 4, class: "text-red-700" %>
+              <span class="ml-2">Preview load errors</span>
+            <% end %>
+            <% toolbar.section align: :right do %>
+              <% render_component :button, icon: :x, "@click": "hidden = !hidden" %>
+            <% end %>
+          <% end %>
+
+          <div class="h-full max-h-[300px] overflow-hidden">
+            <div class="bg-red-50 w-full overflow-auto h-full">
+              <ul class="text-sm divide-y divide-red-200">
+                <% Lookbook::Preview.errors.each do |error| %>
+                  <% error = error.is_a?(Lookbook::Error) ? error : Lookbook::Error.new(error) %>
+                  <li class="px-4 py-3">
+                    <h4 class="break-all leading-tight text-xs ">
+                      <%= error.file_name %><%= ":#{error.line_number}" if error.line_number %>
+                    </h4>
+                    <pre class="text-red-800 text-xs mt-2 whitespace-pre-wrap opacity-80 font-mono"><%= error.message %></pre>
+                  </li>
+                <% end %>
+              </ul>
+            </div>
+          </div>
+        </div>
+      <% end %>
+    <% end %>
+
+    <% layout.pane class: "overflow-hidden", ":class": "$store.layout.mobile && 'w-screen'" do %>
+      <%= content_for?(:main) ? yield(:main) : yield %>
+    <% end %>
+
+  <% end %>
+  <div class="absolute opacity-0 bg-black inset-0 top-[39px] z-[-1] transition-opacity" :class="($store.layout.mobile && !sidebarHidden) && '!opacity-30 !z-40'" data-cloak></div>
 <% end %>
 
-<%= render template: "layouts/lookbook/skeleton" %>
+<%= render template: "layouts/lookbook/shell" %>

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

@@ -0,0 +1,7 @@
+<%= content_for :main do %>
+  <main class="h-[calc(100vh_-_2.5rem)]">
+    <%= yield %>
+  </main>
+<% end %>
+
+<%= render template: "layouts/lookbook/application" %>

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

@@ -0,0 +1,53 @@
+<%= content_for :main do %>
+  <div
+    class="h-[calc(100vh_-_40px)]"
+    x-data="{}"
+    @navigation:complete.window="$refs.scroller.scrollTop = 0">
+  
+    <div class="h-full bg-lookbook-page relative">
+    <% unless @error %>
+      
+      <div class="absolute top-0 right-0 pt-1 pr-0 pl-1 pb-1 rounded-bl-md">
+        <div class="bg-lookbook-page opacity-90 absolute inset-0 w-full h-full z-0"></div>
+        <div class="relative z-10 flex items-center">
+        
+        <% if @previous_page %>
+          <%= render_component :button,
+            size: :lg,
+            icon: :chevron_left,
+            tooltip: "Previous page",
+            href: page_path(@previous_page.lookup_path),
+            class: "pr-0.5 bg-transparent" %>
+        <% else %>
+          <%= render_component :button,
+            size: :lg,
+            icon: :chevron_left,
+            disabled: true,
+            class: "opacity-50 !cursor-default pr-0.5 bg-transparent" %>
+        <% end %>
+
+        <% if @next_page %>
+          <%= render_component :button,
+            size: :lg,
+            icon: :chevron_right,
+            tooltip: "Next page",
+            href: page_path(@next_page.lookup_path),
+            class: "pl-0.5 bg-transparent" %>
+        <% else %>
+          <%= render_component :button,
+            size: :lg,
+            icon: :chevron_right,
+            disabled: true,
+            class: "opacity-50 !cursor-default pl-0.5 bg-transparent" %>
+        <% end %>
+        </div>
+      </div>
+    <% end %>
+
+      <%= yield %>
+    </div>
+    
+  </div>
+<% end %>
+
+<%= render template: "layouts/lookbook/application" %>

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

@@ -0,0 +1,64 @@
+<%= content_for :body do %>
+  <div
+    id="app"
+    x-data="app"
+    @popstate.window="handleNavigation"
+    @click.document="hijax"
+    @navigation:start="closeMobileSidebar"
+    class="w-screen h-screen grid grid-rows-[40px_1fr] relative">
+
+    <%= render_component :header do |header| %>
+      <% header.branding { config.project_name } %>
+    <% end %>
+
+    <% if false %>
+      <%= render_component :toolbar, class: "group !bg-lookbook-header !text-lookbook-header-text" do |toolbar| %>
+        <% toolbar.section padded: true do %>
+          <%= render_component :branding,
+            text: config.project_name,
+            href: landing_path if config.project_name %>
+        <% end %>
+        <% toolbar.section padded: false, align: :right, class: "flex items-center" do %>
+          <%= render_component :button_group, class: "relative -top-px" do |group| %>
+            <% if Rails.env == "development" %>
+              <% group.button icon: :help_circle, class: "opacity-50 hover:opacity-100 transition !text-lookbook-header-text" do |button| %>
+                <% button.dropdown do %>
+                  <%= tag.div class: "divide-y divide-lookbook-divider" do %>
+                    <div class="flex items-center text-xs px-3 py-2">
+                      <span class="opacity-60 mr-1">Lookbook</span>
+                      <span class="mr-6">v<%= Lookbook::VERSION %></span>
+                      <a href="https://github.com/allmarkedup/lookbook" target="_blank" class="ml-auto opacity-70">
+                        <%= render_component :icon, name: :github, size: 3 %>
+                      </a>
+                    </div>
+                    <div class="px-3 py-2">
+                      <a href="#"
+                        class="text-xs underline"
+                        @click.stop="localStorage.clear(); window.location.reload();">
+                        Clear local storage
+                      </a>
+                    </div>
+                  <% end %>
+                <% end %>
+              <% end %>
+            <% end %>
+            <% group.button icon: :menu,
+              "@click.stop": "toggleSidebar",
+              x_show: "$store.layout.mobile && sidebarHidden",
+              class: "!text-lookbook-header-text" %>
+            <% group.button icon: :x,
+              "@click.stop": "toggleSidebar",
+              x_show: "$store.layout.mobile && !sidebarHidden",
+              "@keydown.esc.window": "closeMobileSidebar",
+              class: "!text-lookbook-header-text" %>
+          <% end %>    
+        <% end %>
+      <% end %>
+    <% end %>
+    
+    <%= content_for?(:shell) ? yield(:shell) : yield %>
+  </div>
+<% end %>
+
+<%= render template: "layouts/lookbook/skeleton" %>
+0