lookbook 1.5.2 → 2.0.0.beta.1

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

@@ -1,43 +1,90 @@
-<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-screen-lg mx-auto h-full flex flex-col">
-    <% if @page.header? %>
-      <header id="page-header" class="mb-8 prose max-w-none flex-none">
-        <h1><%= @page.title %></h1>
-      </header>
-    <% end %>
+<main
+  class="h-[calc(100vh_-_40px)]"
+  x-data="{}"
+  @navigation:complete.window="$refs.scroller.scrollTop = 0;"
+  @dom:update-complete.window="Lookbook.initEmbeds();">
+  <div class="h-full bg-lookbook-page-bg 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-bg opacity-90 absolute inset-0 w-full h-full z-0"></div>
+        <div class="relative z-10 flex items-center">
+        
+        <% if @previous_page %>
+          <%= lookbook_render :icon_button,
+            size: :lg,
+            icon: :chevron_left,
+            tooltip: "Previous page",
+            href: lookbook_page_path(@previous_page.lookup_path),
+            class: "pr-0.5 bg-transparent" %>
+        <% else %>
+          <%= lookbook_render :icon_button,
+            size: :lg,
+            icon: :chevron_left,
+            disabled: true,
+            class: "opacity-50 !cursor-default pr-0.5 bg-transparent" %>
+        <% end %>
 
-    <%= lookbook_render :prose, id: "page-content", markdown: false, class: "max-w-none flex-none" do %>
-      <%= @page_content %>
+        <% if @next_page %>
+          <%= lookbook_render :icon_button,
+            size: :lg,
+            icon: :chevron_right,
+            tooltip: "Next page",
+            href: lookbook_page_path(@next_page.lookup_path),
+            class: "pl-0.5 bg-transparent" %>
+        <% else %>
+          <%= lookbook_render :icon_button,
+            size: :lg,
+            icon: :chevron_right,
+            disabled: true,
+            class: "opacity-50 !cursor-default pl-0.5 bg-transparent" %>
+        <% end %>
+        </div>
+      </div>
     <% end %>
 
-    <% if @page.sections.any? %>
-      <%= lookbook_render :page_tabs, id: "page-tabbed-sections", markdown: false, class: "mt-6" do |page_tabs| %>
-        <% @page.sections.each do |section| %>
-          <% page_tabs.with_tab name: "page-section-#{section.name}", label: section.label do %>
-            <%= page_controller.render_page(section) %>
-          <% end %>
+    <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-screen-lg mx-auto h-full flex flex-col">
+        <% if @page.header? %>
+          <header id="page-header" class="mb-8 prose max-w-none flex-none">
+            <h1><%= @page.title %></h1>
+          </header>
         <% end %>
-      <% end %>
-    <% end %>
 
-    <% if @page.footer? && @pages.many? %>
-      <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="<%= lookbook_page_path @previous_page.lookup_path %>"
-            class="flex items-center flex-none">
-            <%= icon  :arrow_left, size: 4, class: "hover:text-indigo-800" %>
-            <span class="ml-2 underline"><%= @previous_page.title %></span>
-          </a>
+        <%= lookbook_render :prose, id: "page-content", markdown: false, class: "max-w-none flex-none" do %>
+          <%= @page_content %>
         <% end %>
 
-        <% if @next_page %>
-          <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>
-            <%= icon  :arrow_right, size: 4, class: "hover:text-indigo-800" %>
-          </a>
+        <% if @page.sections.any? %>
+          <%= lookbook_render :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) %>
+              <% end %>
+            <% end %>
+          <% end %>
         <% end %>
-      </footer>
-    <% end %>
+
+        <% if @page.footer? && @pages.many? %>
+          <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="<%= lookbook_page_path @previous_page.lookup_path %>"
+                class="flex items-center flex-none">
+                <%= 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="<%= lookbook_page_path @next_page.lookup_path %>"
+                class="flex items-center flex-none ml-auto">
+                <span class="mr-2 underline"><%= @next_page.title %></span>
+                <%= icon  :arrow_right, size: 4, class: "hover:text-indigo-800" %>
+              </a>
+            <% end %>
+          </footer>
+        <% end %>
+      </div>
+    </div>
   </div>
-</div>
+</main>

data/app/views/lookbook/partials/_iframe_content_scripts.html.erb

@@ -0,0 +1 @@
+<script src="<%= lookbook_asset_path("/js/iframe.js") %>" defer></script>

data/app/views/lookbook/partials/_user_styles.html.erb

@@ -0,0 +1,5 @@
+<% if content_for? :user_styles %>
+  <style media="all" id="user-styles">
+    <%= content_for :user_styles -%>
+  </style>
+<% end %>

data/app/views/lookbook/{preview.html.erb → previews/group.html.erb}

@@ -1,14 +1,14 @@
-<% if examples.many? %>
-  <%# Render a group of examples %>
-  <% examples.each do |example| %>
+<% if scenarios.many? %>
+  <%# Render a group of scenarios %>
+  <% scenarios.each do |scenario| %>
     <div style="margin-bottom: 30px !important; display: block !important;">
       <h6 style="all: unset; display: block; color: #555; font-family: sans-serif; font-size: 14px; margin-top: 0; margin-bottom: 10px;">
-        <%= example.label %>
+        <%= scenario.label %>
       </h6>
-      <%= example.output %>
+      <%= scenario.output %>
     </div>
   <% end %>
 <% else %>
-  <%# Render a single example %>
-  <%= examples.first.output %>
+  <%# Render a single scenario %>
+  <%= scenarios.first.output %>
 <% end %>

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

@@ -0,0 +1,5 @@
+<% if @render_args[:component] %>
+  <%= render(@render_args[:component], @render_args[:args], &@render_args[:block]) %>
+<% else %>
+  <%= render(@render_args[:template], **@render_args[:locals], &@render_args[:block]) %>
+<% end %>

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

@@ -0,0 +1 @@
+ <%= @preview_html %>

data/config/app.yml

@@ -1,14 +1,30 @@
 shared:
   project_name: Lookbook
-  log_level: 2
-  log_use_rails_logger: true
-  auto_refresh: false
-  components_path: app/components
-  page_controller: Lookbook::PageController
+
+  preview_paths: [test/components/previews]
+  preview_display_options: {}
+  preview_controller: "Lookbook::PreviewController"
+  preview_template: lookbook/previews/preview
+  preview_inspector:
+    main_panels: [preview, output]
+    drawer_panels: [source, notes, params, "*"]
+  preview_embeds:
+    policy: "SAMEORIGIN"
+    panels: false
+    actions: []
+    scenarios: []
+    display_option_controls: true
+  preview_layout: ~
+  preview_disable_action_view_annotations: true
+  preview_type_default: view_component
+  preview_sort_scenarios: false
+
+  page_controller: "Lookbook::PageController"
   page_route: pages
   page_paths: [test/components/docs]
   page_extensions: [html.*, md.*]
   page_options: {}
+
   markdown_options:
     tables: true
     fenced_code_blocks: true
@@ -17,30 +33,29 @@ shared:
     highlight: true
     with_toc_data: true
     lax_spacing: true
+
   highlighter_options:
     theme: github
     dark: false
-  sort_examples: false
-  preview_paths: []
-  preview_display_options: {}
-  preview_disable_action_view_annotations: true
-  preview_params_options_eval: false
-  listen: false
+
+  component_paths: [app/views]
+
+  reload_on_change: ~
   listen_paths: []
   listen_extensions: [rb, html.*]
-  listen_use_polling: false
+
   ui_theme: indigo
   ui_theme_overrides: {}
   ui_favicon: true
+
+  log_level: 2
+  log_use_rails_logger: true
+
   debug_menu: false
   experimental_features: false
 
 development:
-  listen: true
-  auto_refresh: true
   debug_menu: true
 
 test:
-  listen: false
-  auto_refresh: false
   debug_menu: true

data/config/panels.yml

@@ -1,30 +1,28 @@
 shared:
-  main:
-    - name: preview
-      partial: lookbook/inspector/panels/preview
-      label: Preview
-      hotkey: v
+  preview:
+    partial: lookbook/inspector/panels/preview
+    label: Preview
+    hotkey: v
 
-    - name: output
-      partial: lookbook/inspector/panels/output
-      label: HTML
-      hotkey: h
+  output:
+    partial: lookbook/inspector/panels/output
+    label: HTML
+    hotkey: h
 
-  drawer:
-    - name: source
-      partial: lookbook/inspector/panels/source
-      label: Source
-      hotkey: s
-      copy: "->(data) { data.examples.map { |e| e.source }.join(\n) }"
+  source:
+    partial: lookbook/inspector/panels/source
+    label: Source
+    hotkey: s
+    copy: "->(data) { data.scenarios.map { |e| e.source }.join(\n) }"
 
-    - name: notes
-      partial: lookbook/inspector/panels/notes
-      label: Notes
-      hotkey: n
-      disabled: ->(data) { data.examples.select { |e| e.notes.present? }.none? }
+  notes:
+    partial: lookbook/inspector/panels/notes
+    label: Notes
+    hotkey: n
+    disabled: "->(data) { data.scenarios.select { |e| e.notes.present? }.none? }"
 
-    - name: params
-      partial: lookbook/inspector/panels/params
-      label: Params
-      hotkey: p
-      disabled: ->(data) { data.context.params.none? }
+  params:
+    partial: lookbook/inspector/panels/params
+    label: Params
+    hotkey: p
+    disabled: "->(data) { data.context.params.none? }"

data/config/routes.rb

@@ -10,7 +10,9 @@ Lookbook::Engine.routes.draw do
 
   get "/previews", to: "previews#index", as: :lookbook_previews
   get "/preview/*path", to: "previews#show", as: :lookbook_preview
+
   get "/inspect/*path", to: "inspector#show", as: :lookbook_inspect
 
-  get "/*path", to: "inspector#show_legacy", as: :lookbook_inspect_legacy
+  get "/embed", to: "embeds#lookup", as: :lookbook_embed_lookup
+  get "/embed/*path", to: "embeds#show", as: :lookbook_embed
 end

data/config/tags.yml

@@ -11,8 +11,8 @@ shared:
     label: Display
     opts: {}
 
-  position:
-    label: Position
+  priority:
+    label: Priority
     opts: {}
 
   id:
@@ -23,6 +23,10 @@ shared:
     label: Component
     opts: {}
 
+  renders:
+    label: Renders
+    opts: {}
+
   param:
     label: Param
     opts: {}

data/lib/lookbook/cable/cable.rb

@@ -0,0 +1,53 @@
+require "action_cable/engine"
+require_relative "./connection"
+require_relative "./reload_channel"
+
+module Lookbook
+  class Cable
+    attr_reader :engine_mount_path, :server, :logger
+
+    def initialize(engine_mount_path, logger: Lookbook.logger)
+      @engine_mount_path = engine_mount_path
+      @logger = logger
+
+      logger.info "Initializing websocket"
+
+      if Gem::Version.new(Rails.version) >= Gem::Version.new(6.0)
+        @server = ActionCable::Server::Base.new config: cable_config
+      else
+        @server = ActionCable::Server::Base.new
+        @server.config = cable_config
+      end
+    end
+
+    def broadcast(message, payload = nil)
+      logger.debug message.to_s
+      server.broadcast(message.to_s, payload.to_h)
+    end
+
+    def mount_path
+      "/cable"
+    end
+
+    def full_mount_path
+      "#{engine_mount_path}/#{mount_path}".gsub("//", "/")
+    end
+
+    def mountable?
+      true
+    end
+
+    alias_method :mounted?, :mountable?
+
+    protected
+
+    def cable_config
+      cable = ActionCable::Server::Configuration.new
+      cable.cable = {adapter: "async"}.with_indifferent_access
+      cable.mount_path = nil
+      cable.connection_class = -> { Lookbook::Connection }
+      cable.logger = logger
+      cable
+    end
+  end
+end

data/lib/lookbook/engine.rb

@@ -1,6 +1,3 @@
-require "view_component"
-require "action_cable/engine"
-require "listen"
 require "yard"
 
 module Lookbook
@@ -9,103 +6,66 @@ module Lookbook
 
     config.autoload_paths << File.expand_path(root.join("app/components"))
 
-    config.before_configuration do
-      config.lookbook = Lookbook.config
-    end
-
-    initializer "lookbook.viewcomponent.config_sync" do
-      opts.preview_paths += config.view_component.preview_paths
-      opts.preview_controller ||= config.view_component.preview_controller
-
-      if config.view_component.view_component_path.present?
-        opts.components_path = config.view_component.view_component_path
-      end
-    end
-
     initializer "lookbook.assets.serve" do
       config.app_middleware.use(
         Rack::Static,
-        urls: ["/lookbook-assets"], root: root.join("public").to_s
+        urls: ["/lookbook-assets"],
+        root: root.join("public").to_s
       )
     end
 
-    initializer "lookbook.file_watcher.paths" do
-      opts.listen_paths += opts.preview_paths
-      opts.listen_paths << opts.components_path
-    end
+    config.before_configuration do
+      config.lookbook = Lookbook.config
 
-    initializer "lookbook.file_watcher.previews" do
-      file_watcher.watch(opts.listen_paths, opts.listen_extensions, wait_for_delay: 0.5) do |changes|
-        parser.parse { run_hooks(:after_change, changes) }
+      if defined?(ViewComponent)
+        config.lookbook.using_view_component = true
+      else
+        require "view_component"
+        config.lookbook.using_view_component = false
       end
     end
 
-    initializer "lookbook.file_watcher.pages" do
-      file_watcher.watch(opts.page_paths, opts.page_extensions) do |changes|
-        Engine.pages.load(Engine.page_paths)
-        Engine.websocket.broadcast(:reload)
-        run_hooks(:after_change, changes)
-      end
-    end
+    config.after_initialize do
+      if opts.using_view_component || Rails.env.test?
+        vc_config = Engine.host_config.view_component
 
-    initializer "lookbook.parser.previews_load_callback" do
-      parser.after_parse do |code_objects|
-        Engine.previews.load(code_objects.all(:class))
-        Engine.websocket.broadcast(:reload)
-      end
-    end
+        opts.preview_paths += vc_config.preview_paths
+        opts.preview_controller = vc_config.preview_controller
+        opts.preview_layout = vc_config.default_preview_layout
 
-    # The preview controller handles the rendering of individual previews.
-    #
-    # Lookbook injects some actions into whichever controller has been
-    # specified by the user in order to render previews within the context of
-    # the particular controller class instance so that any before_action/after_action
-    # callbacks will be correctly processed.
-    config.after_initialize do
-      @preview_controller = opts.preview_controller.constantize
-      @preview_controller.class_eval { include Lookbook::PreviewActions }
-    end
+        vc_config.show_previews = true
 
-    config.after_initialize do
-      if Rails.application.respond_to?(:server)
-        Rails.application.server { file_watcher.start if listen? }
-      elsif process.supports_listening?
-        file_watcher.start if listen?
+        if vc_config.view_component_path.present?
+          opts.component_paths << vc_config.view_component_path
+        end
       end
+
+      opts.reload_on_change = host_config.reload_classes_only_on_change if opts.reload_on_change.nil?
     end
 
     config.after_initialize do
-      Engine.pages.load(Engine.page_paths)
-      parser.parse { run_hooks(:after_initialize) }
+      reloaders.add(:previews, Engine.preview_watch_paths, opts.listen_extensions, &Engine.method(:load_previews))
+      reloaders.add(:pages, Engine.page_watch_paths, opts.page_extensions, &Engine.method(:load_pages))
+      reloaders.execute
+
+      Engine.run_hooks(:after_initialize)
     end
 
     def opts
       Lookbook.config
     end
 
-    def run_hooks(event_name, *args)
-      Engine.hooks.for_event(event_name).each do |hook|
-        hook.call(Lookbook, *args)
-      end
-    end
-
     def parser
       @_parser ||= PreviewParser.new(opts.preview_paths, Engine.tags)
     end
 
-    def file_watcher
-      @_file_watcher ||= FileWatcher.new(force_polling: opts.listen_use_polling)
-    end
-
-    def process
-      @_process ||= Process.new(env: Rails.env)
-    end
-
-    def listen?
-      opts.listen && process.supports_listening?
+    def reloaders
+      @_reloaders ||= Reloaders.new
     end
 
     class << self
+      delegate :app_name, to: :runtime_context
+
       def mount_path
         routes.find_script_name({})
       end
@@ -114,22 +74,24 @@ module Lookbook
         mount_path.present?
       end
 
-      def app_name
-        name = if Rails.application.class.respond_to?(:module_parent_name)
-          Rails.application.class.module_parent_name
-        else
-          Rails.application.class.parent_name
-        end
-        name.underscore
+      def reloading?
+        opts.reload_on_change
+      end
+
+      def auto_refresh?
+        reloading? && runtime_context.web? && FileWatcher.evented?
       end
 
       def websocket
-        if mounted?
-          use_websocket = opts.auto_refresh && opts.listen && process.supports_listening?
-          @websocket ||= use_websocket ? Websocket.new(mount_path, logger: Lookbook.logger) : Websocket.noop
-        else
-          Websocket.noop
-        end
+        @_websocket ||= auto_refresh? ? Websocket.new(mount_path, logger: Lookbook.logger) : NullWebsocket.new
+      end
+
+      def runtime_context
+        @_runtime_context ||= RuntimeContext.new(env: Rails.env)
+      end
+
+      def theme
+        @_theme ||= Lookbook::Theme.new(opts.ui_theme, opts.ui_theme_overrides)
       end
 
       def panels
@@ -148,18 +110,50 @@ module Lookbook
         @_hooks ||= HookStore.init_from_config
       end
 
+      def run_hooks(event_name, *args)
+        hooks.for_event(event_name).each do |hook|
+          hook.call(Lookbook, *args)
+        end
+      end
+
+      def host_app_path
+        Rails.application.root.join("app")
+      end
+
+      def host_config
+        Rails.application.config
+      end
+
+      def view_paths
+        ActionView::ViewPaths.all_view_paths.flat_map do |view_path|
+          view_path.paths.map { |path| Pathname(path.to_s) }
+        end
+      end
+
       def component_paths
-        @_component_paths ||= Array(PathUtils.to_absolute(opts.components_path))
+        @_component_paths ||= begin
+          paths = [*opts.component_paths, *Engine.view_paths, host_app_path]
+          PathUtils.normalize_paths(paths)
+        end
       end
 
       def page_paths
         @_page_paths ||= PathUtils.normalize_paths(opts.page_paths)
       end
 
+      alias_method :page_watch_paths, :page_paths
+
       def preview_paths
         @_preview_paths ||= PathUtils.normalize_paths(opts.preview_paths)
       end
 
+      def preview_watch_paths
+        return @_preview_watch_paths if @_preview_watch_paths
+
+        paths = [*opts.preview_paths, opts.components_path, *opts.listen_paths, *view_paths].uniq
+        @_preview_watch_paths ||= PathUtils.normalize_paths(paths)
+      end
+
       def pages
         @_pages ||= PageCollection.new
       end
@@ -168,12 +162,40 @@ module Lookbook
         @_previews ||= PreviewCollection.new
       end
 
-      attr_reader :preview_controller
+      def preview_controller
+        return @_preview_controller if @_preview_controller
+
+        @_preview_controller = opts.preview_controller.constantize
+        @_preview_controller.include PreviewControllerActions
+      end
+
+      def load_previews(changes = nil)
+        changed_files = [*changes[:added], *changes[:modified]] if changes
+        parser.parse(changed_files) do |code_objects|
+          previews.load(code_objects.all(:class), changes)
+        end
+      end
+
+      def load_pages(changes = nil)
+        pages.load(Engine.page_paths, changes)
+      end
+
+      def notify_clients(changes = nil)
+        return unless changes.present?
+
+        websocket.broadcast(:reload)
+        run_hooks(:after_change, changes.to_h)
+      end
+
+      def files_changed(modified, added, removed)
+        changes = {modified: modified, added: added, removed: removed}
+        reloaders.register_changes(changes)
+        notify_clients(changes)
+      end
     end
 
     at_exit do
-      file_watcher.stop
-      run_hooks(:before_exit)
+      Engine.run_hooks(:before_exit)
     end
   end
 end