lookbook 0.9.3 → 1.0.0.beta.0

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

@@ -1,24 +1,130 @@
-<div
-  id="inspector"
-  class="bg-gray-50 h-screen grid"
-  x-data="inspector"
-  :style="`${horizontal ? `grid-template-rows: 1fr 1px ${drawerHidden ? '0' : $store.inspector.drawer.height}px` : `grid-template-columns: 1fr 1px ${drawerHidden ? '0' : $store.inspector.drawer.width}px` }`">
-  <%= component "preview", example: @example, examples: @examples, panels: @preview_panels %>
-  <div
-    x-data="splitter('horizontal', {minSize: $store.inspector.drawer.minHeight})"
-    class="w-full gutter border-t border-gray-300 relative"
-    x-effect="$store.inspector.drawer.height = maxDrawerHeight ? Math.min(splits[2] || $store.inspector.drawer.height, maxDrawerHeight) : splits[2] || $store.inspector.drawer.height"
-    x-show="horizontal && !drawerHidden"
-  >
-    <div class="h-[11px] w-full bg-transparent hover:bg-indigo-100 hover:bg-opacity-20 transition absolute left-0 right-0 -translate-y-1/2 cursor-[row-resize]"></div>
-  </div>
-  <div
-    x-data="splitter('vertical', {minSize: $store.inspector.drawer.minWidth})"
-    class="h-full gutter border-r border-gray-300 relative"
-    x-effect="$store.inspector.drawer.width = maxDrawerWidth ? Math.min(splits[2] || $store.inspector.drawer.width, maxDrawerWidth) : splits[2] || $store.inspector.drawer.width"
-    x-show="vertical && !drawerHidden"
-  >
-    <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>
-  <%= component "drawer", example: @example, examples: @examples, panels: @drawer_panels %>
-</div>
+<%= render_component :split_layout,
+  alpine_data: "$store.layout.inspector",
+  ":class": "$store.inspector.drawer.hidden && '!grid-rows-[1fr] !grid-cols-[1fr]'" do |layout| %>
+
+  <%= layout.pane class: "flex flex-col h-full overflow-hidden",
+    x_effect: "forceOrientation = (layoutWidth < $store.inspector.minVerticalSplitWidth) ? 'horizontal' : null" do %>
+  
+    <%= render_component :toolbar do |toolbar| %>
+      <% toolbar.section ":class": "layoutResizing && 'overflow-hidden'" do %>
+        <%= render_component :tabs, alpine_data: "$store.inspector.preview" do |tabs| %>
+          <%= @preview_panels.each do |key, panel| %>
+            <% tabs.tab ref: key, **panel.extract!(:label, :hotkey, :disabled) %>
+          <% end %>
+        <% end %>
+      <% end %>
+
+      <% toolbar.section align: :right, padded: true, class: "flex-none min-w-[140px]", ":class": "{invisible: $store.inspector.preview.activeTab !== 'preview'}" do %>
+        <%= render_component :dimensions_display,
+          target: "[data-component=viewport] iframe",
+          class: "ml-auto opacity-30 hover:opacity-100" %>
+      <% end %>
+
+      <% toolbar.section divide: :left, class: "flex-none relative z-10" do %>
+        <%= render_component :button_group do |group| %>
+          <% if Lookbook.pages.any? %>
+            <% group.button icon: :code,
+              tooltip: "Copy page embed code",
+              copy: true do %>
+                &lt;%= embed <%= @preview.preview_class %>, :<%= @example.name %>, params: <%= request.query_parameters.deep_symbolize_keys.to_s %> %&gt;
+            <% end %>
+          <% end %>
+          
+          <% group.button icon: :refresh_cw,
+            tooltip: "Refresh preview",
+            "@click.stop": "startSpin(); $dispatch('viewport:reload'); stopSpin(500);" %>
+
+          <% group.button icon: :external_link,
+            href: lookbook.preview_path(@example.lookup_path),
+            tooltip: "Open preview in new window",
+            target: "_blank" %>
+
+          <% group.button icon: "vertical ? 'sidebar' : 'credit-card'",
+            tooltip: "Show drawer",
+            "@click": "$store.inspector.drawer.hidden = false",
+            class: "rotate-180",
+            x_show: "$store.inspector.drawer.hidden",
+            cloak: true %>
+        <% end %>
+      <% end %>
+    <% end %> 
+
+    <div class="h-full relative overflow-auto">
+      <%= render_component :tabbed_content, alpine_data: "$store.inspector.preview" do |content| %>
+        <%= @preview_panels.each do |key, panel| %>
+          <% content.section ref: key, class: "overflow-hidden" do %>
+            <%= render panel[:template],
+              preview: @preview,
+              example: @example,
+              rendered_examples: @rendered_examples,
+              **panel %>
+          <% end %>
+        <% end %>
+      <% end %>
+    </div>
+  <% end %>
+
+  <%= layout.pane class: "flex flex-col h-full overflow-hidden bg-lookbook-drawer", x_show: "!$store.inspector.drawer.hidden" do %>
+
+    <%= render_component :toolbar do |toolbar| %>
+      <% toolbar.section ":class": "layoutResizing && 'overflow-hidden'" do %>
+        <%= render_component :tabs, alpine_data: "$store.inspector.drawer" do |tabs| %>
+          <%= @drawer_panels.each do |key, panel| %>
+            <% tabs.tab ref: key, **panel.extract!(:label, :hotkey, :disabled) %>
+          <% end %>
+        <% end %>
+      <% end %>
+
+      <% toolbar.section align: :right, divide: :left, class: "flex-none relative z-10" do %>
+        <%= render_component :button_group do |group| %>
+
+          <%= @drawer_panels.each do |key, panel| %>
+            <% group.button icon: :clipboard,
+              tooltip: "Copy to clipboard",
+              copy: !!panel[:copy],
+              disabled: panel[:disabled] || !panel[:copy],
+              x_show: "$store.inspector.drawer.activeTab === '#{key}'",
+              cloak: true do %>
+              <%== panel[:copy] ? panel[:copy] : "" %>
+              <% end %>
+          <% end %>            
+
+          <% group.button icon: :corner_up_right,
+            tooltip: "Move drawer to right",
+            "@click": "switchOrientation",
+            x_show: "horizontal && layoutWidth > $store.inspector.minVerticalSplitWidth",
+            cloak: true %>
+          <% group.button icon: :corner_up_right,
+            x_show: "horizontal && layoutWidth <= $store.inspector.minVerticalSplitWidth",
+            disabled: true,
+            cloak: true %>
+
+          <% group.button icon: :corner_left_down,
+            tooltip: "Move drawer to bottom",
+            "@click": "switchOrientation",
+            x_show: "vertical",
+            cloak: true %>
+
+          <% group.button icon: :x_circle,
+            tooltip: "Hide drawer",
+            "@click": "$store.inspector.drawer.hidden = true",
+            cloak: true %>
+        <% end %>
+      <% end %>
+    <% end %> 
+
+    <div class="h-full overflow-auto">
+      <%= render_component :tabbed_content, alpine_data: "$store.inspector.drawer" do |content| %>
+        <% @drawer_panels.each do |key, panel| %>
+          <% content.section ref: key do %>
+            <%= render panel[:template],
+              preview: @preview,
+              example: @example,
+              rendered_examples: @rendered_examples,
+              **panel %>
+          <% end %>
+        <% end %>
+      <% end %>
+    </div>
+  <% 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: :lookbook_home
+  root to: "application#index", as: :home
 
-  if Lookbook::Features.enabled?(:pages)
-    get "/#{Lookbook.config.page_route}", to: "pages#index", as: :lookbook_page_index
-    get "/#{Lookbook.config.page_route}/*path", to: "pages#show", as: :lookbook_page
-  end
+  get "/#{Lookbook.config.page_route}", to: "pages#index", as: :page_index
+  get "/#{Lookbook.config.page_route}/*path", to: "pages#show", as: :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 "/*path", to: "previews#show", as: :lookbook_inspect
+  get "/*path", to: "previews#show_legacy", as: :inspect_legacy
 end

data/lib/lookbook/code_formatter.rb

@@ -1,19 +1,21 @@
 require "rouge"
 require "htmlbeautifier"
+require 'htmlentities'
 
 module Lookbook
   module CodeFormatter
     class << self
-      def highlight(source, language, opts = {})
-        source&.strip! unless opts[:strip] == false
-        source&.gsub!("&gt;", ">")&.gsub!("&lt;", "<")
-        language ||= "ruby"
-        formatter = Formatter.new(opts)
+      def highlight(source, **opts)
+        coder = HTMLEntities.new
+        source = coder.decode source
+        language = opts[:language] || "ruby"
+        formatter = Formatter.new(**opts)
         lexer = Rouge::Lexer.find(language.to_s) || Rouge::Lexer.find("plaintext")
         formatter.format(lexer.lex(source)).html_safe
       end
 
-      def beautify(source, language = "html")
+      def beautify(source, **opts)
+        language = opts[:language] || "html"
         source = source.strip
         result = language.downcase == "html" ? HtmlBeautifier.beautify(source) : source
         result.strip.html_safe
@@ -22,23 +24,45 @@ module Lookbook
   end
 
   class Formatter < Rouge::Formatters::HTML
-    def initialize(opts = {})
+    def initialize(**opts)
       @opts = opts
       @highlight_lines = opts[:highlight_lines].to_a || []
-      @start_line = opts[:start_line] || 0
+      @start_line = opts[:start_line] || 1
+      @language = opts[:language]
     end
 
     def stream(tokens, &block)
-      token_lines(tokens).each_with_index do |line_tokens, i|
-        yield "<div class='line #{"highlighted-line" if @highlight_lines.include?(i + 1)}'>"
-        yield "<span class='line-number'>#{@start_line + i}</span>" if @opts[:line_numbers]
-        yield "<span class='line-content'>"
+      lines = token_lines(tokens)
+
+      yield "<div class='wrapper'>"
+
+      if @opts[:line_numbers]
+        yield "<div class='line-numbers'>"
+        lines.each.with_index do |line, i|
+          yield "<div class='line #{"highlighted" if highlighted?(i)}'><span class='line-number'>#{line_number(i)}</span></div>"
+        end
+        yield "</div>"
+      end
+
+      yield "<pre class='code highlight' data-lang='#{@language}'><code>"
+      lines.each.with_index do |line_tokens, i|
+        yield "<div class='line#{" highlighted" if highlighted?(i)}'>"
         line_tokens.each do |token, value|
           yield span(token, value)
         end
-        yield "</span>"
         yield "</div>"
       end
+      yield "</code></pre>"
+
+      yield "</div>"
+    end
+
+    def highlighted?(i)
+      @highlight_lines.include?(i + 1)
+    end
+
+    def line_number(i)
+      @start_line + i
     end
   end
 end

data/lib/lookbook/collection.rb

@@ -1,23 +1,24 @@
 module Lookbook
-  class Collection
-    include Utils
+  class Collection < Entity
     include Enumerable
 
-    attr_reader :path
     delegate :size, :each, to: :items
 
     def initialize(path = "", items = [])
+      @items = []
       if path.is_a?(Array)
-        @items = path
+        items = path
         path = ""
-      else
-        @items = items
       end
+      
       @path = path.delete_prefix("/").delete_suffix("/")
+      super(@path)
+
+      items.each { |item| add(item) }
     end
 
     def id
-      generate_id(lookup_path || "root")
+      lookup_path.present? ? super : "root"
     end
 
     def name
@@ -28,26 +29,24 @@ module Lookbook
       name&.titleize
     end
 
-    def lookup_path
-      @lookup_path ||= to_lookup_path(@path)
-    end
-
     def position
       @position ||= parse_position_prefix(basename).first
     end
 
-    def hierarchy_depth
-      @path ? @path.split("/").size : 0
-    end
-
     def items
-      @items.sort_by { |item| [item.hierarchy_depth, item.position, item.label] }
+      @items.sort_by { |item| [item.hierarchy_depth, item&.position, item.label] }
     end
 
     def visible_items
       reject { |i| i.hidden? }
     end
 
+    def non_empty_items
+      items.filter do |item|
+        !item.is_a?(Lookbook::Collection) || item.items.any?
+      end
+    end
+
     def add(item)
       @ordered_entities = nil
       @tree = nil
@@ -134,6 +133,10 @@ module Lookbook
       @tree
     end
 
+    def collapsible?
+      false
+    end
+
     def type
       :collection
     end

data/lib/lookbook/config.rb

@@ -0,0 +1,125 @@
+require "lookbook/markdown"
+
+module Lookbook
+  class ConfigOptions < ActiveSupport::OrderedOptions
+    def initialize(**data)
+      super()
+      data.keys.each { |key| self[key.to_sym] = data[key] }
+    end
+
+    def [](key)
+      super(key.to_sym)
+    end
+
+    def []=(key, value)
+      super(key.to_sym, value)
+    end
+  end
+
+  class Config
+    def initialize
+      @store = ConfigOptions.new(**{
+        project_name: "Lookbook",
+        log_level: 2,
+        auto_refresh: true,
+        
+        page_controller: "Lookbook::PageController",
+        page_route: "pages",
+        page_paths: ["test/components/docs"],
+        page_options: ConfigOptions.new,
+        markdown_options: ConfigOptions.new(**Markdown::DEFAULT_OPTIONS),
+
+        preview_paths: [],
+        preview_display_params: ConfigOptions.new,
+        preview_options: ConfigOptions.new,
+        preview_srcdoc: false,
+        sort_examples: true,
+
+        listen: Rails.env.development?,
+        listen_paths: [],
+        listen_use_polling: false,
+
+        cable_mount_path: "/lookbook-cable",
+        cable_logger: Lookbook.logger,
+
+        runtime_parsing: !Rails.env.production?,
+        parser_registry_path: "tmp/storage/.yardoc",
+
+        ui_theme: "indigo",
+        ui_theme_overrides: ConfigOptions.new,
+        experimental_features: false,
+      })
+    end
+
+    def ui_theme=(name)
+      name = name.to_s
+      if ["indigo", "zinc", "blue"].include?(name)
+        @store[:ui_theme] = name
+      else
+        Lookbook.logger.warn "'#{name}' is not a valid Lookbook theme. Falling back to default."
+      end
+    end
+
+    def ui_theme_overrides=(theme)
+       @store[:ui_theme_overrides] = ConfigOptions.new(theme)
+    end
+
+    def ui_theme_overrides(&block)
+      if block_given?
+        yield get(:ui_theme_overrides)
+      else
+        get(:ui_theme_overrides)
+      end
+    end
+
+    def [](key)
+      get(key.to_sym)
+    end
+
+    def []=(key, value)
+      @store[key.to_sym] = value
+    end
+
+    def to_h
+      @store.to_h
+    end
+
+    def to_json(*a)
+      to_h.to_json(*a)
+    end
+    
+    protected
+
+    def get_project_name(name)
+      name == false ? nil : name
+    end
+
+    def normalize_paths(paths)
+      paths.map! { |path| absolute_path(path) }
+      paths.filter! { |path| Dir.exist?(path) }
+      paths
+    end
+
+    def absolute_path(path)
+      File.absolute_path(path.to_s, Rails.root)
+    end
+
+    alias_method :get_page_paths, :normalize_paths
+    alias_method :get_preview_paths, :normalize_paths
+    alias_method :get_listen_paths, :normalize_paths
+    alias_method :get_parser_registry_path, :absolute_path
+
+    def get(name)
+      getter_name = "get_#{name}".to_sym
+      respond_to?(getter_name, true) ? send(getter_name, @store[name]) : @store[name]
+    end
+
+    def set(name, *args)
+      @store.send(name, *args)
+    end
+
+    def method_missing(name, *args)
+      args.any? ? set(name, *args) : get(name)
+    end
+  end
+end

data/lib/lookbook/engine.rb

@@ -4,68 +4,51 @@ require "action_cable/engine"
 require "listen"
 
 module Lookbook
+
+  autoload :Config, "lookbook/config"
+  
   class << self
     def config
-      @config ||= Engine.config.lookbook
+      @config ||= Config.new
     end
 
     def logger
-      @logger ||= Rails.logger
+      @logger ||= Rails.env.development? ? Logger.new($stdout) : Rails.logger
     end
 
     def version
       Lookbook::VERSION
     end
+
+    def debug_data
+      {
+        version: version,
+        env: Rails.env.to_s,
+        config: config
+      }
+    end
+
+    def configure
+      yield(config)
+    end
   end
 
   class Engine < Rails::Engine
     isolate_namespace Lookbook
 
-    config.lookbook = ActiveSupport::OrderedOptions.new
-    config.lookbook.listen_paths ||= []
-    config.lookbook.listen_extensions ||= []
-    config.lookbook.preview_paths ||= []
-    config.lookbook.page_paths ||= ["test/components/docs"]
-
-    initializer "view_component.set_configs" do
-      options = config.lookbook
-      vc_options = config.view_component
-
-      options.project_name ||= options.project_name == false ? nil : options.project_name || "Lookbook"
-      options.auto_refresh = true if options.auto_refresh.nil?
-      options.sort_examples = false if options.sort_examples.nil?
-      options.debug = false unless options.debug == true
-
-      options.preview_paths = options.preview_paths.map(&:to_s)
-      options.preview_paths += vc_options.preview_paths
-
-      options.page_paths = options.page_paths.map(&:to_s)
-      options.page_controller = "Lookbook::PageController" if options.page_controller.nil?
-      options.page_route ||= "pages"
-      options.page_options ||= {}.with_indifferent_access
-
-      options.markdown_options = Markdown::DEFAULT_OPTIONS.merge(options.markdown_options || {})
-
-      options.preview_controller = vc_options.preview_controller if options.preview_controller.nil?
-      options.preview_srcdoc = false if options.preview_srcdoc.nil?
-      options.preview_display_params ||= {}.with_indifferent_access
-
-      options.listen = Rails.env.development? if options.listen.nil?
-      options.listen_paths = options.listen_paths.map(&:to_s)
-      options.listen_paths += options.preview_paths
-      options.listen_paths << (vc_options.view_component_path || Rails.root.join("app/components"))
-      options.listen_paths.select! { |path| Dir.exist? path }
-
-      options.listen_extensions += ["rb", "html.*"]
-      options.listen_extensions.uniq!
+    config.lookbook = Lookbook.config
+    config.autoload_paths << File.expand_path(Lookbook::Engine.root.join("app/components"))
 
-      options.cable_mount_path ||= "/lookbook-cable"
-      options.cable_logger ||= Rails.logger
+    initializer "lookbook.viewcomponent.config" do      
+      config.lookbook.preview_paths += config.view_component.preview_paths
+      config.lookbook.preview_controller ||= config.view_component.preview_controller
 
-      options.runtime_parsing = !Rails.env.production? if options.runtime_parsing.nil?
-      options.parser_registry_path ||= Rails.root.join("tmp/storage/.yardoc")
+      config.lookbook.listen_paths += config.lookbook.preview_paths
+      config.lookbook.listen_paths << (config.view_component.view_component_path.presence || "app/components")
+    end
 
-      options.experimental_features = false unless options.experimental_features.present?
+    initializer "lookbook.logging.development" do
+      Lookbook.logger.level = Lookbook.config.log_level if Rails.env.development?
     end
 
     initializer "lookbook.parser.tags" do
@@ -84,30 +67,29 @@ module Lookbook
       @preview_controller.include(Lookbook::PreviewController)
 
       if config.lookbook.listen
-        @preview_listener = Listen.to(*config.lookbook.listen_paths, only: /\.(#{config.lookbook.listen_extensions.join("|")})$/) do |modified, added, removed|
+        Listen.logger = Lookbook.logger
+        preview_listener = Listen.to(
+          *config.lookbook.listen_paths,
+          only: /\.(rb|html.*)$/,
+          force_polling: Lookbook.config.listen_use_polling
+        ) do |modified, added, removed|
           begin
             parser.parse
           rescue
           end
           Lookbook::Preview.clear_cache
-          Lookbook::Engine.websocket&.broadcast("reload", {
-            modified: modified,
-            removed: removed,
-            added: added
-          })
+          Lookbook::Engine.websocket&.broadcast("reload", {})
         end
-        @preview_listener.start
-
-        if Lookbook::Features.enabled?(:pages)
-          @page_listener = Listen.to(*config.lookbook.page_paths.select { |dir| Dir.exist? dir }, only: /\.(html.*|md.*)$/) do |modified, added, removed|
-            Lookbook::Engine.websocket&.broadcast("reload", {
-              modified: modified,
-              removed: removed,
-              added: added
-            })
-          end
-          @page_listener.start
+        Lookbook::Engine.register_listener(preview_listener)
+
+        page_listener = Listen.to(
+          *config.lookbook.page_paths,
+          only: /\.(html.*|md.*)$/,
+          force_polling: Lookbook.config.listen_use_polling
+        ) do |modified, added, removed|
+          Lookbook::Engine.websocket&.broadcast("reload", {})
         end
+        Lookbook::Engine.register_listener(page_listener)
       end
 
       if config.lookbook.runtime_parsing
@@ -124,13 +106,16 @@ module Lookbook
     end
 
     at_exit do
-      @preview_listener&.stop
-      @page_listener&.stop
+      if config.lookbook.listen
+        Lookbook.logger.debug "Stopping listeners"
+        Lookbook::Engine.listeners.each do |listener|
+          listener.stop
+        end
+      end
     end
 
     class << self
       def websocket
-        return @websocket unless @websocket.nil?
         if config.lookbook.auto_refresh
           cable = ActionCable::Server::Configuration.new
           cable.cable = {adapter: "async"}.with_indifferent_access
@@ -141,9 +126,9 @@ module Lookbook
           @websocket ||= if Rails.version.to_f >= 6.0
             ActionCable::Server::Base.new(config: cable)
           else
-            @websocket ||= ActionCable::Server::Base.new
-            @websocket.config = cable
-            @websocket
+            websocket ||= ActionCable::Server::Base.new
+            websocket.config = cable
+            websocket
           end
         end
       end
@@ -160,6 +145,23 @@ module Lookbook
         @parser ||= Lookbook::Parser.new(config.lookbook.preview_paths, config.lookbook.parser_registry_path)
       end
 
+      def log_level
+        Lookbook.logger.level
+      end
+
+      def app_name
+        Rails.application.class.module_parent_name.underscore
+      end
+
+      def register_listener(listener)
+        listener.start
+        listeners << listener
+      end
+
+      def listeners
+        @listeners ||= []
+      end
+
       attr_reader :preview_controller
     end
   end