lookbook 1.0.0.beta.1 → 1.0.0.beta.4

data/app/components/lookbook/tabs/tab/component.rb

@@ -1,5 +1,5 @@
 module Lookbook
-  class Tabs::Tab::Component < Lookbook::Component
+  class Tabs::Tab::Component < Lookbook::BaseComponent
     def initialize(name:, label: nil, hotkey: nil, disabled: nil, position: 0, theme: :toolbar, **html_attrs)
       @name = name
       @label = label

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

@@ -1,5 +1,5 @@
 module Lookbook
-  class Toolbar::Component < Lookbook::Component
+  class Toolbar::Component < Lookbook::BaseComponent
     DIVIDE_CLASSES = {
       left: "border-l",
       right: "border-r"

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

@@ -1,5 +1,5 @@
 module Lookbook
-  class Viewport::Component < Lookbook::Component
+  class Viewport::Component < Lookbook::BaseComponent
     def initialize(src:, resize_height: true, resize_width: true, max_height: nil, **html_attrs)
       @src = src
       @resize_height = resize_height

data/app/controllers/lookbook/application_controller.rb

@@ -15,7 +15,7 @@ module Lookbook
     def index
       landing = Lookbook.pages.find(&:landing) || Lookbook.pages.first
       if landing.present?
-        redirect_to page_path(landing.lookup_path)
+        redirect_to lookbook_page_path(landing.lookup_path)
       else
         render "lookbook/index", layout: Lookbook.previews.any? ? "lookbook/application" : "lookbook/shell"
       end

data/app/controllers/lookbook/pages_controller.rb

@@ -10,7 +10,7 @@ module Lookbook
     def index
       landing = Lookbook.pages.find(&:landing) || Lookbook.pages.first
       if landing.present?
-        redirect_to page_path landing.lookup_path
+        redirect_to lookbook_page_path landing.lookup_path
       else
         show_404
       end

data/app/controllers/lookbook/previews_controller.rb

@@ -44,7 +44,7 @@ module Lookbook
 
     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]
+      redirect_to lookbook_inspect_path params[:path]
     end
 
     private
@@ -54,13 +54,13 @@ module Lookbook
       if @example.present?
         @preview = @example.preview
         if params[:path] == @preview&.lookup_path
-          redirect_to inspect_path "#{params[:path]}/#{@preview.default_example.name}"
+          redirect_to lookbook_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
+          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
@@ -117,41 +117,36 @@ module Lookbook
     def inspector_data
       return @inspector_data if @inspector_data.present?
 
-      request_data = {
+      context_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
+      example = @example
+      preview = @preview
+      preview.define_singleton_method(:params, proc {
+        example.params
+      })
 
-      examples_data = target_examples.map do |example|
+      examples = 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
+        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.lang
+        
+        example.define_singleton_method(:output, proc { output })
+        example.define_singleton_method(:source, proc { source })
+        example.define_singleton_method(:source_lang, proc { source_lang })
+        example
       end
 
       @inspector_data ||= Lookbook::Store.new({
-        request: request_data,
-        preview: preview_data,
-        examples: examples_data
+        context: context_data,
+        preview: preview,
+        examples: examples,
+        components: preview.components,
+        app: Lookbook
       })
     end
 
@@ -163,7 +158,7 @@ module Lookbook
 
         callable_data = {
           name: name.to_s,
-          index_position: (@panels.filter { |p| p.pane == config.pane }.size + 1),
+          index_position: (@panels.select { |p| p.pane == config.pane }.size + 1),
           **inspector_data
         }
 
@@ -175,15 +170,15 @@ module Lookbook
         @panels << Lookbook::Store.new(resolved_config, deep: false)
       end
 
-      @panels.filter(&:show).sort_by { |p| [p.position, p.label] }
+      @panels = @panels.select(&:show).sort_by { |p| [p.position, p.label] }
     end
    
     def main_panels
-      panels.filter { |panel| panel.pane == :main }
+      panels.select { |panel| panel.pane == :main }
     end
 
     def drawer_panels
-      panels.filter { |panel| panel.pane == :drawer }
+      panels.select { |panel| panel.pane == :drawer }
     end
 
     def preview_controller

data/app/helpers/lookbook/application_helper.rb

@@ -11,14 +11,20 @@ module Lookbook
     def landing_path
       landing = Lookbook.pages.find(&:landing) || Lookbook.pages.first
       if landing.present?
-        page_path(landing.lookup_path)
+        lookbook_page_path landing.lookup_path
       else
-        home_path
+        lookbook_home_path
       end
     end
 
     def generate_id(*args)
       args.map { |args| args.delete_prefix("/").tr("&?=/_\-", "-") }.join("-")
     end
+
+    def append_styles(&block)
+      content_for :styles do
+        capture(&block)
+      end
+    end
   end
 end

data/app/helpers/lookbook/component_helper.rb

@@ -2,6 +2,10 @@ module Lookbook
   module ComponentHelper
     COMPONENT_CLASSES = {} # cache for constantized references
 
+    def icon(name, **attrs)
+      render Lookbook::Icon::Component.new(name: name, **attrs)
+    end
+
     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)

data/app/helpers/lookbook/page_helper.rb

@@ -5,7 +5,7 @@ module Lookbook
     def page_path(id)
       page = id.is_a?(Page) ? id : Lookbook.pages.find(id)
       if page.present?
-        lookbook.page_path page.lookup_path
+        lookbook_page_path page.lookup_path
       else
         Lookbook.logger.warn "Could not find page with id ':#{id}'"
       end
@@ -16,7 +16,7 @@ module Lookbook
 
       @embed_counter ||= 0
 
-      preview_lookup = args.first.is_a?(Symbol) ? args.first : preview_class_name(args.first)
+      preview_lookup = args.first.is_a?(Symbol) ? args.first : preview_class_path(args.first)
       preview = Lookbook.previews.find(preview_lookup)
       example = args[1] ? preview&.example(args[1]) : preview&.default_example
 

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

@@ -3,7 +3,7 @@
     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",
+    <% layout.pane id: "app-sidebar", class: "flex flex-col bg-lookbook-sidebar relative translate-x-0",
       ":class": "{
         'transition': $store.layout.mobile,
         'translate-x-full': $store.layout.mobile && sidebarHidden,
@@ -17,6 +17,7 @@
         style: "height: calc(100vh - 2.5rem);" do |layout| %>
         <% layout.pane class: "overflow-hidden" do %>
           <%= render_component :nav,
+            id: "previews-nav",
             collection: Lookbook.previews,
             alpine_data: "$store.nav.previews",
             label: "Previews",
@@ -28,6 +29,7 @@
         <% if Lookbook.pages.any? %>
           <% layout.pane class: "overflow-hidden" do %>
             <%= render_component :nav,
+              id: "pages-nav",
               collection: Lookbook.pages,
               alpine_data: "$store.nav.pages",
               label: "Pages" %>
@@ -40,7 +42,7 @@
         <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" %>
+              <%= icon  :alert_triangle, size: 4, class: "text-red-700" %>
               <span class="ml-2">Preview load errors</span>
             <% end %>
             <% toolbar.section align: :right do %>
@@ -67,7 +69,7 @@
       <% end %>
     <% end %>
 
-    <% layout.pane class: "overflow-hidden", ":class": "$store.layout.mobile && 'w-screen'" do %>
+    <% layout.pane id: "app-main", class: "overflow-hidden", ":class": "$store.layout.mobile && 'w-screen'" do %>
       <%= content_for?(:main) ? yield(:main) : yield %>
     <% end %>
 

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

@@ -16,7 +16,7 @@
             size: :lg,
             icon: :chevron_left,
             tooltip: "Previous page",
-            href: page_path(@previous_page.lookup_path),
+            href: lookbook_page_path(@previous_page.lookup_path),
             class: "pr-0.5 bg-transparent" %>
         <% else %>
           <%= render_component :button,
@@ -31,7 +31,7 @@
             size: :lg,
             icon: :chevron_right,
             tooltip: "Next page",
-            href: page_path(@next_page.lookup_path),
+            href: lookbook_page_path(@next_page.lookup_path),
             class: "pl-0.5 bg-transparent" %>
         <% else %>
           <%= render_component :button,

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

@@ -7,58 +7,12 @@
     @navigation:start="closeMobileSidebar"
     class="w-screen h-screen grid grid-rows-[40px_1fr] relative">
 
-    <%= render_component :header do |header| %>
+    <%= render_component :header, id: "app-header", debug_menu: config.debug_menu 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
+<%= render template: "layouts/lookbook/skeleton" %>

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

@@ -8,11 +8,17 @@
   <link href="/lookbook-assets/css/lookbook.css?v=<%= Lookbook::VERSION %>" rel="stylesheet">
   <link href="/lookbook-assets/css/themes/<%= config.ui_theme %>.css?v=<%= Lookbook::VERSION %>" rel="stylesheet">
   <% if @theme_overrides.present? %>
-    <style>
+    <style media="all">
       <%== @theme_overrides %>
     </style>
   <% end %>
 
+  <% if content_for? :styles %>
+    <style media="all">
+      <%= content_for :styles %>
+    </style>
+  <% end %>
+
   <% if config.ui_favicon != false %>
     <link rel="icon" href="<%= config.ui_favicon || "data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>👀</text></svg>" %>">
   <% end %>

data/app/views/lookbook/404.html.erb

@@ -1,6 +1,6 @@
 <div class="bg-white flex flex-col items-center justify-center h-screen w-full">
   <div class="px-4 text-center max-w-sm">
-    <%= render_component :icon, name: :alert_triangle, size: 10, class: "text-red-300 mx-auto" %>
+    <%= icon  :alert_triangle, size: 10, class: "text-red-300 mx-auto" %>
     <div class="mt-3">
       <h5 class="text-base">
         <%== message %>

data/app/views/lookbook/index.html.erb

@@ -1,7 +1,7 @@
 <div id="welcome-message" class="flex flex-col h-full w-full">
   <div class="flex flex-col items-center justify-center h-full">
     <div class="p-4 text-center mx-auto">
-      <%= render_component :icon, name: :layers, size: 10, class: "opacity-30 mx-auto" %>
+      <%= icon  :layers, size: 10, class: "opacity-30 mx-auto" %>
       <div class="mt-6 text-base opacity-40">
         <% if Lookbook.previews.any? %>
           <h5>Select a preview to get started</h5>

data/app/views/lookbook/pages/show.html.erb

@@ -1,17 +1,17 @@
 <div class="px-4 md:px-10 pt-8 md:pt-10 overflow-auto scroll-smooth w-full max-h-full pb-12" x-ref="scroller">
   <div class="w-full max-w-3xl mx-auto h-full flex flex-col">
     <% if @page.header? %>
-      <header class="mb-8 prose max-w-none flex-none">
+      <header id="page-header" class="mb-8 prose max-w-none flex-none">
         <h1><%= @page.title %></h1>
       </header>
     <% end %>
 
-    <%= render_component :prose, markdown: false, class: "max-w-none flex-none" do %>
+    <%= render_component :prose, id: "page-content", markdown: false, class: "max-w-none flex-none" do %>
       <%= @page_content %>
     <% end %>
 
     <% if @page.sections.any? %>
-      <%= render_component :page_tabs, markdown: false do |page_tabs| %>
+      <%= render_component :page_tabs, id: "page-tabbed-sections", markdown: false, class: "mt-6" do |page_tabs| %>
         <% @page.sections.each do |section| %>
           <% page_tabs.tab name: "page-section-#{section.name}", label: section.label do %>
             <%= page_controller.render_page(section) %>
@@ -21,20 +21,20 @@
     <% end %>
 
     <% if @page.footer? && @pages.many? %>
-      <footer class="flex items-center justify-between border-t border-gray-300 mt-12 pt-8 pb-10 ">
+      <footer id="page-footer" class="flex items-center justify-between border-t border-gray-300 mt-12 pt-8 pb-10 ">
         <% if @previous_page %>
-          <a href="<%= page_path @previous_page.lookup_path %>"
+          <a href="<%= lookbook_page_path @previous_page.lookup_path %>"
             class="flex items-center flex-none">
-            <%= render_component :icon, name: :arrow_left, size: 4, class: "hover:text-indigo-800" %>
+            <%= icon  :arrow_left, size: 4, class: "hover:text-indigo-800" %>
             <span class="ml-2 underline"><%= @previous_page.title %></span>
           </a>
         <% end %>
 
         <% if @next_page %>
-          <a href="<%= page_path @next_page.lookup_path %>"
+          <a href="<%= lookbook_page_path @next_page.lookup_path %>"
             class="flex items-center flex-none ml-auto">
             <span class="mr-2 underline"><%= @next_page.title %></span>
-            <%= render_component :icon, name: :arrow_right, size: 4, class: "hover:text-indigo-800" %>
+            <%= icon  :arrow_right, size: 4, class: "hover:text-indigo-800" %>
           </a>
         <% end %>
       </footer>

data/app/views/lookbook/previews/panels/_notes.html.erb

@@ -1,4 +1,4 @@
-<% items = examples.filter { |example| example.notes.present? } %>
+<% items = examples.select { |example| example.notes.present? } %>
 <% if items.many? %>
   <div class="divide-y divide-dashed divide-lookbook-divider bg-lookbook-prose h-full w-full">
     <% items.each do |item| %>

data/app/views/lookbook/previews/panels/_preview.html.erb

@@ -1,5 +1,5 @@
 <%= render_component :viewport,
-  src: lookbook.preview_path(request.query_parameters.merge(lookbook_timestamp: Time.now)),
+  src: lookbook_preview_path(request.query_parameters.merge(lookbook_timestamp: Time.now)),
   alpine_data: "$store.inspector.main",
   class: "-inset-px relative",
   style: "width: calc(100% + 2px); height: calc(100% + 2px)"

data/app/views/lookbook/previews/show.html.erb

@@ -38,7 +38,7 @@
             "@click.stop": "startSpin(); $dispatch('viewport:reload'); stopSpin(500);" %>
 
           <% group.button icon: :external_link,
-            href: lookbook.preview_path(@example.lookup_path),
+            href: lookbook_preview_path(@example.lookup_path),
             tooltip: "Open preview in new window",
             target: "_blank" %>
 
@@ -55,7 +55,7 @@
     <div class="h-full relative overflow-auto">
       <%= render_component :tab_panels, alpine_data: "$store.inspector.main" do |tabs| %>
         <% @main_panels.each do |panel| %>
-          <% tabs.panel name: panel.name, class: panel.panel_classes do %>
+          <% tabs.panel id: panel.id, name: panel.name, class: [panel.panel_classes, { "p-4": panel.padded, "prose": panel.prose }] do %>
             <%= render panel.partial, **@inspector_data, panel: panel, **panel.locals %>
           <% end %>
         <% end %>
@@ -80,7 +80,7 @@
 
       <% toolbar.section align: :right,  class: "flex-none relative z-10" do %>
         <%= render_component :button_group do |group| %>
-          <%= @drawer_panels.filter { |p| !p.disabled && p.copy }.each do |panel| %>
+          <%= @drawer_panels.select { |p| !p.disabled && p.copy }.each do |panel| %>
             <% group.button icon: :copy,
               tooltip: "Copy panel contents",
               copy: !!panel.copy,
@@ -123,7 +123,7 @@
     <div class="h-full overflow-auto">
       <%= render_component :tab_panels, alpine_data: "$store.inspector.drawer" do |tabs| %>
         <% @drawer_panels.each do |panel| %>
-          <% tabs.panel name: panel.name do %>
+          <% tabs.panel id: panel.id, name: panel.name, class: [panel.panel_classes, { "p-4": panel.padded, "prose": panel.prose }]  do %>
             <%= render panel.partial, **@inspector_data, panel: panel, **panel.locals %>
           <% end %>
         <% end %>

data/config/routes.rb

@@ -3,13 +3,13 @@ Lookbook::Engine.routes.draw do
     mount Lookbook::Engine.websocket => Lookbook.config.cable_mount_path
   end
 
-  root to: "application#index", as: :home
+  root to: "application#index", as: :lookbook_home
 
-  get "/#{Lookbook.config.page_route}", to: "pages#index", as: :page_index
-  get "/#{Lookbook.config.page_route}/*path", to: "pages#show", as: :page
+  get "/#{Lookbook.config.page_route}", to: "pages#index", as: :lookbook_page_index
+  get "/#{Lookbook.config.page_route}/*path", to: "pages#show", as: :lookbook_page
 
-  get "/preview/*path", to: "previews#preview", as: :preview
-  get "/inspect/*path", to: "previews#show", as: :inspect
+  get "/preview/*path", to: "previews#preview", as: :lookbook_preview
+  get "/inspect/*path", to: "previews#show", as: :lookbook_inspect
 
-  get "/*path", to: "previews#show_legacy", as: :inspect_legacy
+  get "/*path", to: "previews#show_legacy", as: :lookbook_inspect_legacy
 end

data/lib/lookbook/collection.rb

@@ -42,7 +42,7 @@ module Lookbook
     end
 
     def non_empty_items
-      items.filter do |item|
+      items.select do |item|
         !item.is_a?(Lookbook::Collection) || item.items.any?
       end
     end

data/lib/lookbook/component.rb

@@ -0,0 +1,31 @@
+module Lookbook
+  class Component < Entity
+
+    attr_accessor :name
+
+    def initialize(name)
+      @name = name
+      super(path)
+    end
+    
+    def path
+      name.underscore
+    end
+
+    def full_path
+      Pathname.new("#{Lookbook.config.components_path}/#{path}.rb")
+    end
+
+    def dir_path
+      full_path.dirname
+    end
+
+    def template_path
+      Dir.glob("#{Lookbook.config.components_path}/#{path}.*.erb").first
+    end
+
+    def inline?
+      template_path.present?
+    end
+  end
+end