lookbook 1.0.8 → 1.1.0

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

@@ -6,13 +6,13 @@
         <h6 class="italic font-mono mb-4 opacity-40">
           # <%= item.label %>
         </h6>
-        <%= render_component :prose, content: item.notes %>
+        <%= lookbook_render :prose, content: item.notes %>
       </div>
     <% end %>
   </div>
 <% else %>
   <div class="px-4 py-6 bg-lookbook-prose-bg w-full h-full">
-    <%= render_component :prose do %>
+    <%= lookbook_render :prose do %>
       <%== items.any? ? items.first.notes : "<em class='opacity-50'>No notes provided.</em>" %>
     <% end %>
   </div>

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

@@ -1,4 +1,4 @@
-<%= render_component :code, line_numbers: true, full_height: true do -%>
+<%= lookbook_render :code, line_numbers: true, full_height: true do -%>
   <% if examples.many? -%>
     <% examples.each do |example| -%><%== "<!-- #{example.label} -->\n#{beautify(example.output)}\n\n" -%><% end %>
   <%- else -%>

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

@@ -1,12 +1,12 @@
 <% if preview.params.none? %>
   <div class="p-4 w-full h-full bg-lookbook-prose-bg">
-    <%= render_component :prose do %>
+    <%= lookbook_render :prose do %>
       <em class='opacity-50'>No params configured.</em>
     <% end %>
   </div>
 <% else %>
-  <div class="py-3 h-full">
-    <%= render_component :params_editor do |editor| %>
+  <div class="h-full overflow-x-hidden">
+    <%= lookbook_render "params/editor", inputs: Lookbook::Params.inputs do |editor| %>
       <% preview.params.each do |param| %>
         <% editor.field **param, value: params[param[:name]] %>
       <% end %>

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

@@ -1,4 +1,4 @@
-<%= render_component :viewport,
+<%= lookbook_render :viewport,
   src: lookbook_preview_path(request.query_parameters.merge(lookbook_timestamp: Time.now)),
   alpine_data: "$store.inspector.main",
   class: "-inset-px relative",

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

@@ -1,11 +1,11 @@
 <div class="h-full">
   <% if examples.many? %>
-    <%= render_component :code, language: examples.first.source_lang[:name], line_numbers: true, full_height: true do -%>
+    <%= lookbook_render :code, language: examples.first.source_lang[:name], line_numbers: true, full_height: true do -%>
 <%- examples.each.with_index(1) do |example, i| -%>
 <%== "#{sprintf example.source_lang[:comment], example.label}\n#{example.source}\n#{"\n" if i < examples.size}" %><% end %>
     <% end %>
   <% else %>
     <% example = examples.first %>
-    <%= render_component :code, language: example.source_lang[:name], line_numbers: true, full_height: true do %><%== example.source %><% end %>
+    <%= lookbook_render :code, language: example.source_lang[:name], line_numbers: true, full_height: true do %><%== example.source %><% end %>
   <% end %>
 </div>

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

@@ -1,13 +1,13 @@
-<%= render_component :split_layout,
+<%= lookbook_render :split_layout,
   alpine_data: "$store.layout.inspector",
   ":class": "($store.inspector.drawer.hidden || #{@drawer_panels.none?}) && '!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| %>
+    <%= lookbook_render :toolbar do |toolbar| %>
       <% toolbar.section ":class": "layoutResizing && 'overflow-hidden'" do %>
-        <%= render_component :tabs, alpine_data: "$store.inspector.main" do |tabs| %>
+        <%= lookbook_render :tabs, alpine_data: "$store.inspector.main" do |tabs| %>
           <%= @main_panels.each do |panel| %>
             <% tabs.tab name: panel.name,
               label: panel.label,
@@ -17,19 +17,13 @@
         <% end %>
       <% end %>
 
-      <% toolbar.section align: :right, padded: true, class: "flex-none min-w-[140px]", ":class": "{invisible: $store.inspector.main.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| %>
+      <% toolbar.section divide: :left, align: :right, class: "flex-none relative z-10" do %>
+        <%= lookbook_render :button_group do |group| %>
           <% if @pages.any? %>
             <% group.button icon: :code,
               tooltip: "Copy page embed code",
               copy: true do %>
-                &lt;%= embed <%= @preview.preview_class %>, :<%= @target.name %>, params: <%= request.query_parameters.deep_symbolize_keys.to_s %> %&gt;
+                &lt;%= embed <%= @preview.preview_class_name %>, :<%= @target.name %>, params: <%= request.query_parameters.deep_symbolize_keys.to_s %> %&gt;
             <% end %>
           <% end %>
           
@@ -53,7 +47,7 @@
     <% end %>
 
     <div class="h-full relative overflow-auto">
-      <%= render_component :tab_panels, alpine_data: "$store.inspector.main" do |tabs| %>
+      <%= lookbook_render :tab_panels, alpine_data: "$store.inspector.main" do |tabs| %>
         <% @main_panels.each do |panel| %>
           <% tabs.panel id: panel.id, name: panel.name, class: panel.panel_classes do %>
             <%= render panel.partial, **@inspector_data, panel: panel, **panel.locals %>
@@ -66,9 +60,9 @@
   <%= layout.pane class: "flex flex-col h-full overflow-hidden bg-lookbook-drawer-bg",
     "x-show": "!$store.inspector.drawer.hidden && #{@drawer_panels.any?}" do %>
 
-    <%= render_component :toolbar do |toolbar| %>
+    <%= lookbook_render :toolbar do |toolbar| %>
       <% toolbar.section ":class": "layoutResizing && 'overflow-hidden'" do %>
-        <%= render_component :tabs, alpine_data: "$store.inspector.drawer" do |tabs| %>
+        <%= lookbook_render :tabs, alpine_data: "$store.inspector.drawer" do |tabs| %>
           <%= @drawer_panels.each do |panel| %>
             <% tabs.tab name: panel.name,
               label: panel.label,
@@ -79,7 +73,7 @@
       <% end %>
 
       <% toolbar.section align: :right,  class: "flex-none relative z-10" do %>
-        <%= render_component :button_group do |group| %>
+        <%= lookbook_render :button_group do |group| %>
           <%= @drawer_panels.select { |p| !p.disabled && p.copy }.each do |panel| %>
             <% group.button icon: :copy,
               tooltip: "Copy panel contents",
@@ -93,7 +87,7 @@
       <% end %>
 
       <% toolbar.section divide: :left, class: "flex-none relative z-10" do %>
-        <%= render_component :button_group do |group| %>
+        <%= lookbook_render :button_group do |group| %>
 
           <% group.button icon: :corner_up_right,
             tooltip: "Move drawer to right",
@@ -121,10 +115,10 @@
     <% end %> 
 
     <div class="h-full overflow-auto">
-      <%= render_component :tab_panels, alpine_data: "$store.inspector.drawer" do |tabs| %>
+      <%= lookbook_render :tab_panels, alpine_data: "$store.inspector.drawer" do |tabs| %>
         <% @drawer_panels.each do |panel| %>
           <% tabs.panel id: panel.id, name: panel.name, class: panel.panel_classes  do %>
-            <%= render_component :inspector_panel, **panel.slice(:id, :name, :system) do %>
+            <%= lookbook_render :inspector_panel, **panel.slice(:id, :name, :system) do %>
               <%= render panel.partial, **@inspector_data, panel: panel, **panel.locals %>
             <% end %>
           <% end %>

data/lib/lookbook/config.rb

@@ -10,6 +10,7 @@ module Lookbook
       @options.set({
         project_name: "Lookbook",
         log_level: 2,
+        log_use_rails_logger: true,
         auto_refresh: true,
 
         components_path: "app/components",
@@ -25,6 +26,21 @@ module Lookbook
         preview_srcdoc: nil,
         preview_tags: {},
         preview_disable_action_view_annotations: true,
+        preview_param_inputs: {
+          select: "lookbook/previews/inputs/select",
+          textarea: "lookbook/previews/inputs/textarea",
+          toggle: "lookbook/previews/inputs/toggle",
+          color: "lookbook/previews/inputs/color",
+          range: "lookbook/previews/inputs/range",
+          text: "lookbook/previews/inputs/text",
+          email: "lookbook/previews/inputs/text",
+          number: "lookbook/previews/inputs/text",
+          tel: "lookbook/previews/inputs/text",
+          url: "lookbook/previews/inputs/text",
+          date: "lookbook/previews/inputs/text",
+          datetime_local: "lookbook/previews/inputs/text"
+        },
+        preview_params_options_eval: false,
         sort_examples: false,
 
         listen: Rails.env.development?,
@@ -33,7 +49,6 @@ module Lookbook
         listen_use_polling: false,
 
         cable_mount_path: "/cable",
-        cable_logger: Lookbook.logger,
 
         parser_registry_path: "tmp/storage/.yardoc",
 

data/lib/lookbook/engine.rb

@@ -28,7 +28,13 @@ module Lookbook
     end
 
     def logger
-      @logger ||= Rails.env.development? ? Logger.new($stdout) : Rails.logger
+      @logger ||= if Rails.logger.present? && config.log_use_rails_logger
+        Rails.logger
+      else
+        logger = Logger.new($stdout)
+        logger.level = config.log_level
+        logger
+      end
     end
 
     def debug_data
@@ -54,6 +60,13 @@ module Lookbook
     def theme
       @theme ||= Lookbook::Theme.new(config.ui_theme, config.ui_theme_overrides)
     end
+
+    def define_param_input(input, partial, input_options = nil)
+      config.preview_param_inputs[input.to_sym] = {
+        partial: partial,
+        input_options: input_options || {}
+      }
+    end
   end
 
   class Engine < Rails::Engine
@@ -72,10 +85,6 @@ module Lookbook
       config.lookbook.listen_paths << config.lookbook.components_path
     end
 
-    initializer "lookbook.logging.development" do
-      Lookbook.logger.level = Lookbook.config.log_level if Rails.env.development?
-    end
-
     initializer "lookbook.parser.tags" do
       Lookbook::Parser.define_tags(Lookbook.config.preview_tags)
     end
@@ -131,6 +140,7 @@ module Lookbook
         if listen_paths.any?
           preview_listener = Listen.to(*listen_paths,
             only: /\.(#{config.listen_extensions.join("|")})$/,
+            wait_for_delay: 0.5,
             force_polling: config.listen_use_polling) do |modified, added, removed|
             parser.parse do
               run_hooks(:after_change, {modified: modified, added: added, removed: removed})
@@ -162,7 +172,7 @@ module Lookbook
         cable.cable = {adapter: "async"}.with_indifferent_access
         cable.mount_path = nil
         cable.connection_class = -> { Lookbook::Connection }
-        cable.logger = config.cable_logger
+        cable.logger = Lookbook.logger
 
         @websocket ||= if Gem::Version.new(Rails.version) >= Gem::Version.new(6.0)
           ActionCable::Server::Base.new(config: cable)

data/lib/lookbook/markdown.rb

@@ -13,7 +13,7 @@ module Lookbook
     }
 
     def self.render(text)
-      text&.gsub!(/<!-- (BEGIN|END) (.*) -->/, "")
+      Utils.strip_action_view_annotations!(text)
       markdown = Redcarpet::Markdown.new(Renderer, Lookbook.config.markdown_options)
       markdown.render(text).html_safe
     end

data/lib/lookbook/panels.rb

@@ -1,15 +1,25 @@
 module Lookbook
   module Panels
-    def define_panel(name, opts = {})
-      Lookbook.config.define_inspector_panel(name, opts)
+    def define_panel(name, *args)
+      Lookbook.config.define_inspector_panel(name, extract_opts(args))
     end
 
-    def amend_panel(name, opts = {})
-      Lookbook.amend_inspector_panel(name, opts)
+    def amend_panel(name, *args)
+      Lookbook.amend_inspector_panel(name, extract_opts(args))
     end
 
     def remove_panel(name)
       Lookbook.remove_inspector_panel(name)
     end
+
+    def extract_opts(args)
+      if args.many?
+        opts = args[1]
+        opts[:partial] = args[0]
+        opts
+      elsif args.any?
+        args[0].is_a?(String) ? {partial: args[0]} : args[0]
+      end
+    end
   end
 end

data/lib/lookbook/params.rb

@@ -2,32 +2,68 @@ require "active_model"
 
 module Lookbook
   module Params
+    VALUE_TYPE_MATCH_REGEXP = /^(\[\s?([A-Z]{1}\w+)\s?\])/
+    DESCRIPTION_MATCH_REGEXP = /"(.*[^\\])"$/
+
+    PARAM_OPTION_KEYS = %i[name input label hint description value_type value_default].freeze
+
     class << self
-      def build_param(param, default: nil, **opts)
-        input, options_str = param.text.present? ? param.text.split(" ", 2) : [nil, ""]
-        type = param.types&.first
-        options = if options_str.present? && options_str.end_with?(".json")
-          json_path = if options_str.start_with?(".")
-            File.expand_path(options_str, File.dirname(param.object.files.first[0]))
-          else
-            Rails.root.join(options_str)
-          end
-          JSON.parse(File.read(json_path))
-        else
-          YAML.safe_load(options_str || "~")
+      def build_param(param, default: nil, eval_scope: nil)
+        input, value_type, options_str, description = parse_param_tag_text(param.text)
+
+        tag_options = Lookbook::TagOptions.new(options_str,
+          base_dir: (File.dirname(param.object.files.first[0]) if param.object.files.any?),
+          eval_scope: eval_scope).options
+
+        if tag_options.is_a? Array
+          # handle special case legacy situation for selects where
+          # options are an array of choices rather than a Hash
+          tag_options = {choices: tag_options}
         end
-        input ||= guess_input(type, default)
-        type ||= guess_type(input, default)
+
+        param_options = tag_options.select { |key| PARAM_OPTION_KEYS.include? key }
+        input_options = tag_options.except(*PARAM_OPTION_KEYS)
+
+        value_type ||= param_options[:value_type]
+        input ||= param_options[:input] || guess_input(value_type, default)
+        name = param.name.to_s
+
         {
-          name: param.name,
-          input: input_text?(input) ? "text" : input,
-          input_type: (input if input_text?(input)),
-          options: options,
-          type: type,
-          default: default
+          name: name,
+          label: param_options[:label] || name.titleize,
+          hint: param_options[:hint],
+          description: description || param_options[:description],
+          input: input.to_s.tr("_", "-"),
+          input_options: input_options,
+          value: nil,
+          value_type: value_type || guess_value_type(input, default),
+          value_default: default
         }
       end
 
+      # Parses param tag strings with the format: `[<value_type>] <input> <description?> <opts?>`
+      def parse_param_tag_text(text)
+        text = (text.presence || "").strip
+
+        value_type = nil
+        text.match(VALUE_TYPE_MATCH_REGEXP) do |m|
+          value_type = m[2]
+          text.gsub!(VALUE_TYPE_MATCH_REGEXP, "").strip!
+        end
+
+        text, options_str = Lookbook::TagOptions.extract_options(text)
+
+        description = nil
+        text.match(DESCRIPTION_MATCH_REGEXP) do |m|
+          description = m[1]
+          text.gsub!(DESCRIPTION_MATCH_REGEXP, "").strip!
+        end
+
+        input, rest = text.split(" ", 2)
+
+        [input, value_type, options_str, description, rest]
+      end
+
       def parse_method_param_str(param_str)
         return nil if param_str[0].nil? || param_str[1].nil?
         name = param_str[0].chomp(":")
@@ -81,17 +117,24 @@ module Lookbook
         end
       end
 
+      def inputs
+        @inputs ||= Lookbook.config.preview_param_inputs.map do |name, config|
+          config = {partial: config} if config.is_a?(String)
+          [name, {input_options: {}}.merge(config)]
+        end.to_h
+      end
+
       private
 
-      def guess_input(type, default)
-        if type&.downcase == "boolean" || (type.blank? && boolean?(default))
+      def guess_input(value_type, default)
+        if value_type&.downcase == "boolean" || (value_type.blank? && boolean?(default))
           "toggle"
         else
           "text"
         end
       end
 
-      def guess_type(input, default)
+      def guess_value_type(input, default)
         if input&.downcase == "toggle"
           "Boolean"
         elsif input&.downcase == "number"
@@ -107,18 +150,6 @@ module Lookbook
         end
       end
 
-      def input_text?(input)
-        [
-          "date",
-          "datetime-local",
-          "email",
-          "number",
-          "tel",
-          "text",
-          "url"
-        ].include? input.to_s
-      end
-
       def safe_parse_yaml(value, fallback)
         value.present? ? YAML.safe_load(value) : fallback
       rescue Psych::SyntaxError

data/lib/lookbook/parser.rb

@@ -39,6 +39,7 @@ module Lookbook
         YARD::Tags::Library.define_tag("Position", :position)
         YARD::Tags::Library.define_tag("ID", :id)
         YARD::Tags::Library.define_tag("Component", :component)
+        YARD::Tags::Library.define_tag("Param", :param, :with_name)
         custom.each do |name, opts|
           YARD::Tags::Library.define_tag(name.to_s.titleize, name)
         end

data/lib/lookbook/preview.rb

@@ -7,7 +7,7 @@ module Lookbook
 
     def initialize(preview, code_object)
       @preview = preview
-      @preview_inspector = SourceInspector.new(code_object)
+      @preview_inspector = SourceInspector.new(code_object, eval_scope: preview_class.new)
       super(preview_class_path(@preview.name))
     end
 
@@ -15,10 +15,14 @@ module Lookbook
       @preview_inspector&.id || generate_id(lookup_path)
     end
 
-    def preview_class
+    def preview_class_name
       @preview.name
     end
 
+    def preview_class
+      @preview
+    end
+
     def label
       @preview_inspector&.label&.presence || lookup_path.split("/").last.titleize
     end
@@ -143,10 +147,12 @@ module Lookbook
 
           sorted_previews = previews.compact.sort_by { |preview| [preview.position, preview.label] }
           @previews = PreviewCollection.new(sorted_previews)
-        else
+          @previews
+        elsif !@preview_objects.present?
           PreviewCollection.new([])
+        else
+          @previews
         end
-        @previews
       end
 
       def errors

data/lib/lookbook/preview_controller.rb

@@ -12,32 +12,20 @@ module Lookbook
       opts[:layout] = nil
       opts[:locals] = locals if locals.present?
 
-      with_optional_annotations do
+      Utils.with_optional_action_view_annotations do
         render html: render_to_string(template, **opts)
       end
     end
 
     def render_in_layout_to_string(template, locals, opts = {})
       append_view_path Lookbook::Engine.root.join("app/views")
-      html = render_to_string(template, locals: locals, **determine_layout(opts[:layout]))
-      if opts[:append_html].present?
-        html += opts[:append_html]
-      end
-      render html: html
-    end
-
-    def with_optional_annotations
-      if ActionView::Base.respond_to?(:annotate_rendered_view_with_filenames) && Lookbook.config.preview_disable_action_view_annotations
-        original_value = ActionView::Base.annotate_rendered_view_with_filenames
-        ActionView::Base.annotate_rendered_view_with_filenames = false
-
-        res = yield
-
-        ActionView::Base.annotate_rendered_view_with_filenames = original_value
 
-        res
-      else
-        yield
+      Utils.with_optional_action_view_annotations do
+        html = render_to_string(template, locals: locals, **determine_layout(opts[:layout]))
+        if opts[:append_html].present?
+          html += opts[:append_html]
+        end
+        render html: html
       end
     end
   end

data/lib/lookbook/preview_example.rb

@@ -6,7 +6,7 @@ module Lookbook
     def initialize(name, preview, code_object)
       @name = name
       @preview = preview
-      @example_inspector = SourceInspector.new(code_object)
+      @example_inspector = SourceInspector.new(code_object, eval_scope: @preview.preview_class.new)
       super("#{@preview.path}/#{name}")
     end
 

data/lib/lookbook/source_inspector.rb

@@ -5,8 +5,9 @@ module Lookbook
     attr_reader :code_object
     delegate :groups, :source, to: :@code_object, allow_nil: true
 
-    def initialize(code_object)
+    def initialize(code_object, eval_scope: nil)
       @code_object = code_object
+      @eval_scope = eval_scope
     end
 
     def hidden?
@@ -74,8 +75,11 @@ module Lookbook
     end
 
     def params
-      code_object&.tags("param")&.map do |param|
-        Lookbook::Params.build_param(param, default: parameter_defaults[param.name])
+      @params ||= {}
+      @params[:param] ||= code_object&.tags("param")&.map do |param|
+        Lookbook::Params.build_param(param,
+          default: parameter_defaults[param.name],
+          eval_scope: @eval_scope)
       end
     end
 
@@ -85,7 +89,9 @@ module Lookbook
 
     def tags(name = nil)
       tag_objects = code_object&.tags(name).presence || []
-      Lookbook::Tags.process_tags(tag_objects)
+      Lookbook::Tags.process_tags(tag_objects,
+        eval_scope: @eval_scope,
+        file: (code_object.files.first[0] if code_object.files.any?))
     end
 
     def tag(name = nil)

data/lib/lookbook/tag.rb

@@ -5,13 +5,15 @@ module Lookbook
     attr_reader :data, :arg_names
     attr_accessor :args, :opts
 
-    def initialize(tag_object, arg_names = nil, parser: nil, **options)
+    def initialize(tag_object, arg_names = nil, parser: nil, eval_scope: nil, file: nil, **options)
       @tag_object = tag_object
       @arg_names = arg_names
       @args = {}
       @opts = {}
       @options = options
       @parser = parser
+      @eval_scope = eval_scope
+      @file = file
       @data = Store.new
       run_parser
     end
@@ -43,8 +45,16 @@ module Lookbook
 
     def parse_opts
       return @opts if @options[:parse_options] == false
-      parsed_opts = parse_yaml(opts_str)
-      @opts = parsed_opts.is_a?(Hash) ? parsed_opts.with_indifferent_access : {}
+      tag_opts = Lookbook::TagOptions.new(opts_str,
+        eval_scope: @eval_scope,
+        base_dir: File.dirname(@file))
+      options = tag_opts.resolve || {}
+      @opts = if options.is_a?(Hash)
+        options.with_indifferent_access
+      else
+        Lookbook.logger.warn "'@#{tag_name}' tag options should resolve to a Hash"
+        options
+      end
     end
 
     def run_parser