lookbook 1.0.8 → 1.1.1

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

@@ -1,11 +1,11 @@
 <div class="p-4 bg-lookbook-prose-bg h-full">
   <% if panel.content.present? %>
-    <%= render_component :prose, markdown: true do %>
+    <%= lookbook_render :prose, markdown: true do %>
       <%== panel.content %>
     <% end %>
   <% else %>
     <% if Rails.env.development? %>
-      <%= render_component :prose do %>
+      <%= lookbook_render :prose do %>
         <em class='opacity-50'>No content has been defined for this panel.</em>
       <% end %>
     <% end %>

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

@@ -1,107 +1,118 @@
-require "lookbook/markdown"
-require "lookbook/theme"
-require "lookbook/store"
-
 module Lookbook
   class Config
-    def initialize
-      @options = Store.new({}, true)
-
-      @options.set({
-        project_name: "Lookbook",
-        log_level: 2,
-        auto_refresh: true,
-
-        components_path: "app/components",
-
-        page_controller: "Lookbook::PageController",
-        page_route: "pages",
-        page_paths: ["test/components/docs"],
-        page_options: {},
-        markdown_options: Markdown::DEFAULT_OPTIONS,
-
-        preview_paths: [],
-        preview_display_params: {},
-        preview_srcdoc: nil,
-        preview_tags: {},
-        preview_disable_action_view_annotations: true,
-        sort_examples: false,
-
-        listen: Rails.env.development?,
-        listen_paths: [],
-        listen_extensions: ["rb", "html.*"],
-        listen_use_polling: false,
-
-        cable_mount_path: "/cable",
-        cable_logger: Lookbook.logger,
-
-        parser_registry_path: "tmp/storage/.yardoc",
-
-        ui_theme: "indigo",
-        ui_theme_overrides: {},
-        ui_favicon: true,
-
-        hooks: {
-          after_initialize: [],
-          before_exit: [],
-          after_change: []
+    DEFAULTS = {
+      project_name: "Lookbook",
+      log_level: 2,
+      log_use_rails_logger: true,
+      auto_refresh: true,
+
+      components_path: "app/components",
+
+      page_controller: "Lookbook::PageController",
+      page_route: "pages",
+      page_paths: ["test/components/docs"],
+      page_options: {},
+      markdown_options: Markdown::DEFAULT_OPTIONS,
+
+      preview_paths: [],
+      preview_display_params: {},
+      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?,
+      listen_paths: [],
+      listen_extensions: ["rb", "html.*"],
+      listen_use_polling: false,
+
+      cable_mount_path: "/cable",
+
+      parser_registry_path: "tmp/storage/.yardoc",
+
+      ui_theme: "indigo",
+      ui_theme_overrides: {},
+      ui_favicon: true,
+
+      hooks: {
+        after_initialize: [],
+        before_exit: [],
+        after_change: []
+      },
+
+      debug_menu: Rails.env.development?,
+
+      experimental_features: false,
+
+      inspector_panels: {
+        preview: {
+          pane: :main,
+          position: 1,
+          partial: "lookbook/previews/panels/preview",
+          hotkey: "v",
+          panel_classes: "overflow-hidden",
+          padded: false,
+          system: true
         },
-
-        debug_menu: Rails.env.development?,
-
-        experimental_features: false,
-
-        inspector_panels: {
-          preview: {
-            pane: :main,
-            position: 1,
-            partial: "lookbook/previews/panels/preview",
-            hotkey: "v",
-            panel_classes: "overflow-hidden",
-            padded: false,
-            system: true
-          },
-          output: {
-            pane: :main,
-            position: 2,
-            partial: "lookbook/previews/panels/output",
-            label: "HTML",
-            hotkey: "h",
-            padded: false,
-            system: true
-          },
-          source: {
-            pane: :drawer,
-            position: 1,
-            partial: "lookbook/previews/panels/source",
-            label: "Source",
-            hotkey: "s",
-            copy: ->(data) { data.examples.map { |e| e.source }.join("\n") },
-            padded: false,
-            system: true
-          },
-          notes: {
-            pane: :drawer,
-            position: 2,
-            partial: "lookbook/previews/panels/notes",
-            label: "Notes",
-            hotkey: "n",
-            disabled: ->(data) { data.examples.select { |e| e.notes.present? }.none? },
-            padded: false,
-            system: true
-          },
-          params: {
-            pane: :drawer,
-            position: 3,
-            partial: "lookbook/previews/panels/params",
-            label: "Params",
-            hotkey: "p",
-            disabled: ->(data) { data.preview.params.none? },
-            padded: false,
-            system: true
-          }
+        output: {
+          pane: :main,
+          position: 2,
+          partial: "lookbook/previews/panels/output",
+          label: "HTML",
+          hotkey: "h",
+          padded: false,
+          system: true
+        },
+        source: {
+          pane: :drawer,
+          position: 1,
+          partial: "lookbook/previews/panels/source",
+          label: "Source",
+          hotkey: "s",
+          copy: ->(data) { data.examples.map { |e| e.source }.join("\n") },
+          padded: false,
+          system: true
+        },
+        notes: {
+          pane: :drawer,
+          position: 2,
+          partial: "lookbook/previews/panels/notes",
+          label: "Notes",
+          hotkey: "n",
+          disabled: ->(data) { data.examples.select { |e| e.notes.present? }.none? },
+          padded: false,
+          system: true
+        },
+        params: {
+          pane: :drawer,
+          position: 3,
+          partial: "lookbook/previews/panels/params",
+          label: "Params",
+          hotkey: "p",
+          disabled: ->(data) { data.preview.params.none? },
+          padded: false,
+          system: true
         }
-      })
+      }
+    }
+
+    def initialize
+      @options = Store.new(Config::DEFAULTS, recursive: true)
     end
 
     def runtime_parsing=(value)

data/lib/lookbook/engine.rb

@@ -3,64 +3,11 @@ require "action_cable/engine"
 require "listen"
 
 module Lookbook
-  autoload :Config, "lookbook/config"
-  autoload :Data, "lookbook/data"
-  autoload :Hooks, "lookbook/hooks"
-  autoload :Panels, "lookbook/panels"
-  autoload :Tags, "lookbook/tags"
-
-  class << self
-    include Lookbook::Data
-    include Lookbook::Hooks
-    include Lookbook::Panels
-    include Lookbook::Tags
-
-    def version
-      Lookbook::VERSION
-    end
-
-    def config
-      @config ||= Config.new
-    end
-
-    def configure
-      yield(config)
-    end
-
-    def logger
-      @logger ||= Rails.env.development? ? Logger.new($stdout) : Rails.logger
-    end
-
-    def debug_data
-      {
-        version: version,
-        env: Rails.env.to_s,
-        config: config.to_h
-      }
-    end
-
-    def previews
-      Preview.all
-    end
-
-    def pages
-      Page.all
-    end
-
-    def broadcast(event_name, data = {})
-      Engine.websocket&.broadcast(event_name.to_s, data)
-    end
-
-    def theme
-      @theme ||= Lookbook::Theme.new(config.ui_theme, config.ui_theme_overrides)
-    end
-  end
-
   class Engine < Rails::Engine
     isolate_namespace Lookbook
 
-    config.lookbook = Lookbook.config
     config.autoload_paths << File.expand_path(Lookbook::Engine.root.join("app/components"))
+    config.lookbook = Lookbook.config
 
     initializer "lookbook.viewcomponent.config" do
       config.lookbook.preview_paths += config.view_component.preview_paths
@@ -72,10 +19,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
@@ -125,12 +68,12 @@ module Lookbook
       def init_listeners
         config = Lookbook.config
         return unless config.listen == true
-        Listen.logger = Lookbook.logger
 
         listen_paths = config.listen_paths.uniq
         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 +105,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