lookbook 1.0.0.beta.6 → 1.0.0.beta.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c0be6f1f0dc2e74e64585f664af67c7a3b05b8de3cd875cfa4732d2cecb37465
-  data.tar.gz: a315fa37ed07664a06096709b8bc88b81011e0f8f54b438362b8e6803eee6e3d
+  metadata.gz: 52925967015a9d02a18dfcde3e185d7d1dcd1917ea03fdf63276743b3ce18e66
+  data.tar.gz: a8523484936828701e3775603996c8477bb14830ad2b18b5ca5ef1bc55d58117
 SHA512:
-  metadata.gz: 87214ff5e7f0292276b5ddbd3ff4b1b41f8ae685e9fa28de92043af5f6a5736c51b8729a5432e3fe2c0ff7fe75dd6f7ee145796d36c0d08528d20c37e6886d06
-  data.tar.gz: c615b04dd5ee26613fd3ea804473727114cd8acc97aa6b0aeb4f280255adf56cd645228e45dd40e0e864915a328eb8c2a1adde198256bdf4b7923dbb4009a714
+  metadata.gz: 104d5b01cc83a5bd4440e64e7da9a551e46b5f583e2a1209bc391bb75facf1c2633453a3b9d15f1a9e351269aa07b5d6e83783768301570346e111076c9511bf
+  data.tar.gz: 5b86248682b5105de0a56ba9e3832cfa243ed8307ac2215d1331ed7915386728db479ada8d8c9ab05a0fa0e00e98ed338416827ca7bfe613533e4c41795f2301

data/README.md

@@ -14,7 +14,7 @@ _For code and documentation for the current stable release see the [main branch]
 
 The new (work-in-progress) **documentation site** for Lookbook v1.0 is available here:
 
-👉 **https://lookbook-docs-v1-beta.netlify.app/** 👈
+👉 **https://beta.lookbook.build/** 👈
 
 > Documentation source files are located in the `/docs` directory within this repository. The docs are built using [Bridgetown](https://www.bridgetownrb.com/).
 

data/app/components/lookbook/params_editor/field/component.rb

@@ -31,7 +31,8 @@ module Lookbook
     protected
 
     def alpine_data
-      "{name: '#{@name}', value: #{value.to_json}}"
+      escaped_value = value.is_a?(String) ? helpers.j(value) : value
+      "{name: '#{@name}', value: '#{escaped_value}'}"
     end
 
     def alpine_component

data/app/controllers/lookbook/application_controller.rb

@@ -24,7 +24,7 @@ module Lookbook
     protected
 
     def generate_theme_overrides
-      @theme_overrides ||= Lookbook::Theme.new(Lookbook.config.ui_theme_overrides).to_css
+      @theme_overrides ||= Lookbook.theme.to_css
     end
 
     def feature_enabled?(feature)

data/app/helpers/lookbook/application_helper.rb

@@ -4,6 +4,15 @@ module Lookbook
       Lookbook::Engine.config.lookbook
     end
 
+    def theme
+      Lookbook.theme
+    end
+
+    def asset_path(file, version: true)
+      path = "/lookbook-assets/#{file}".gsub("//", "/")
+      version ? "#{path}?v=#{Lookbook::VERSION}" : path
+    end
+
     def feature_enabled?(name)
       Lookbook::Features.enabled?(name)
     end

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

@@ -5,16 +5,24 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
 
-  <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? %>
+  <link href="<%= asset_path("/css/lookbook.css") %>" rel="stylesheet">
+  <link href="<%= asset_path("/css/themes/#{config.ui_theme}.css") %>" rel="stylesheet">
+
+  <%- if @theme_overrides.present? %>
     <style media="all">
       <%== @theme_overrides %>
     </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>" %>">
+  <% if config.ui_favicon == true %>
+    <link
+      rel="icon"
+      href="data:image/svg+xml,%3Csvg width='96' height='84' viewBox='0 0 96 84' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath d='M96 0v84H0V0h96Z'/%3E%3C/clipPath%3E%3CclipPath id='b'%3E%3Cpath d='M71.897 0a1.5 1.5 0 0 1 1.31.769l22.605 40.5a1.5 1.5 0 0 1 0 1.462l-22.605 40.5a1.5 1.5 0 0 1-1.31.769H49.481a1 1 0 0 1-.873-1.487L70.812 42.73a1.5 1.5 0 0 0 0-1.462L48.608 1.487A1 1 0 0 1 49.481 0ZM24.655.564l22.72 40.705a1.5 1.5 0 0 1 0 1.462l-22.72 40.705a1 1 0 0 1-1.746 0L.19 42.73a1.5 1.5 0 0 1 0-1.462L22.91.564a1 1 0 0 1 1.746 0Z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23a)'%3E%3Cg clip-path='url(%23b)'%3E%3Cpath fill='<%= url_encode theme.favicon_dark_mode %>' d='M0 0h96v84H0V0z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"
+      media="(prefers-color-scheme: dark)">
+    <link
+      rel="icon"
+      href="data:image/svg+xml,%3Csvg width='96' height='84' viewBox='0 0 96 84' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath d='M96 0v84H0V0h96Z'/%3E%3C/clipPath%3E%3CclipPath id='b'%3E%3Cpath d='M71.897 0a1.5 1.5 0 0 1 1.31.769l22.605 40.5a1.5 1.5 0 0 1 0 1.462l-22.605 40.5a1.5 1.5 0 0 1-1.31.769H49.481a1 1 0 0 1-.873-1.487L70.812 42.73a1.5 1.5 0 0 0 0-1.462L48.608 1.487A1 1 0 0 1 49.481 0ZM24.655.564l22.72 40.705a1.5 1.5 0 0 1 0 1.462l-22.72 40.705a1 1 0 0 1-1.746 0L.19 42.73a1.5 1.5 0 0 1 0-1.462L22.91.564a1 1 0 0 1 1.746 0Z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23a)'%3E%3Cg clip-path='url(%23b)'%3E%3Cpath fill='<%= url_encode theme.favicon_light_mode %>' d='M0 0h96v84H0V0z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"
+      media="(prefers-color-scheme: light)">
   <% end %>
 
   <script>
@@ -25,15 +33,14 @@
     <% end %>
   </script>
   
-  <script src="/lookbook-assets/js/lookbook.js?v=<%= Lookbook::VERSION %>" defer></script>
+  <script src="<%= asset_path("/js/lookbook.js") %>" defer></script>
   <% if params[:lookbook_embed] %>
-    <script src="/lookbook-assets/js/embed.js?v=<%= Lookbook::VERSION %>" defer></script>
+    <script src="<%= asset_path("/js/embed.js") %>" defer></script>
   <% end %>
   
   <title><%= [@title, config.project_name || "Lookbook"].compact.join(" :: ") %></title>
 </head>
 <body>
-  
   <%= yield :body %>
   
   <% if Rails.env.development? %>

data/lib/lookbook/config.rb

@@ -23,6 +23,7 @@ module Lookbook
         preview_paths: [],
         preview_display_params: {},
         preview_srcdoc: nil,
+        preview_tags: {},
         sort_examples: false,
 
         listen: Rails.env.development?,
@@ -38,6 +39,7 @@ module Lookbook
 
         ui_theme: "indigo",
         ui_theme_overrides: {},
+        ui_favicon: true,
 
         hooks: {
           after_initialize: [],

data/lib/lookbook/data.rb

@@ -0,0 +1,11 @@
+module Lookbook
+  module Data
+    def data
+      @data ||= Store.new
+    end
+
+    def data=(props)
+      @data = Store.new(props)
+    end
+  end
+end

data/lib/lookbook/engine.rb

@@ -2,12 +2,22 @@ require "rails"
 require "view_component"
 require "action_cable/engine"
 require "listen"
+require "rake"
 
 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
@@ -48,46 +58,12 @@ module Lookbook
       Page.any?
     end
 
-    def data
-      @data ||= Store.new
-    end
-
-    def data=(props)
-      @data = Store.new(props)
-    end
-
-    def after_initialize(&block)
-      add_hook(:after_initialize, block)
-    end
-
-    def before_exit(&block)
-      add_hook(:before_exit, block)
-    end
-
-    def after_change(&block)
-      add_hook(:after_change, block)
-    end
-
-    def define_panel(name, opts = {})
-      config.define_inspector_panel(name, opts)
-    end
-
-    def amend_panel(name, opts = {})
-      config.amend_inspector_panel(name, opts)
-    end
-
-    def remove_panel(name)
-      config.remove_inspector_panel(name)
-    end
-
     def broadcast(event_name, data = {})
       Engine.websocket&.broadcast(event_name.to_s, data)
     end
 
-    protected
-
-    def add_hook(event_name, block)
-      config.hooks[event_name] << block
+    def theme
+      @theme ||= Lookbook::Theme.new(config.ui_theme, config.ui_theme_overrides)
     end
   end
 
@@ -112,7 +88,7 @@ module Lookbook
     end
 
     initializer "lookbook.parser.tags" do
-      Lookbook::Parser.define_tags
+      Lookbook::Parser.define_tags(Lookbook.config.preview_tags)
     end
 
     initializer "lookbook.assets.serve" do
@@ -126,39 +102,20 @@ module Lookbook
       @preview_controller = Lookbook.config.preview_controller.constantize
       @preview_controller.include(Lookbook::PreviewController)
 
-      if config.lookbook.listen
-        Listen.logger = Lookbook.logger
-        
-        preview_listener = Listen.to(
-          *config.lookbook.listen_paths,
-          only: /\.(#{config.lookbook.listen_extensions.join("|")})$/,
-          force_polling: config.lookbook.listen_use_polling
-        ) do |modified, added, removed|
-          changes = { modified: modified, added: added, removed: removed }
-          begin
-            parser.parse
-          rescue
-          end
-          Lookbook::Preview.clear_cache
-          Lookbook::Engine.reload_ui(changes)
-          Lookbook::Engine.run_hooks(:after_change, changes)
+      if Gem::Version.new(Rails.version) >= Gem::Version.new("6.1.3.1")
+        # Rails.application.server is only available for newer Rails versions
+        Rails.application.server do
+          init_listeners
         end
-        Lookbook::Engine.register_listener(preview_listener)
-
-        page_listener = Listen.to(
-          *config.lookbook.page_paths,
-          only: /\.(html.*|md.*)$/,
-          force_polling: config.lookbook.listen_use_polling
-        ) do |modified, added, removed|
-          changes = { modified: modified, added: added, removed: removed }
-          Lookbook::Engine.reload_ui(changes)
-          Lookbook::Engine.run_hooks(:after_change, changes)
+      else
+        # Fallback for older Rails versions - don't start listeners if running in a rake task.
+        unless File.basename($0) == "rake" || Rake.application.top_level_tasks.any?
+          init_listeners 
         end
-        Lookbook::Engine.register_listener(page_listener)
       end
 
       if config.lookbook.runtime_parsing
-        parser.parse
+        Lookbook::Engine.parser.parse
       else
         unless File.exist?(config.lookbook.parser_registry_path)
           Lookbook.logger.warn "
@@ -172,8 +129,41 @@ module Lookbook
       Lookbook::Engine.run_hooks(:after_initialize)
     end
 
+    def init_listeners
+      return unless config.lookbook.listen == true
+      Listen.logger = Lookbook.logger
+      Lookbook.logger.info "Initializing listeners"
+      
+      preview_listener = Listen.to(
+        *config.lookbook.listen_paths,
+        only: /\.(#{config.lookbook.listen_extensions.join("|")})$/,
+        force_polling: config.lookbook.listen_use_polling
+      ) do |modified, added, removed|
+        changes = { modified: modified, added: added, removed: removed }
+        begin
+          Lookbook::Engine.parser.parse
+        rescue
+        end
+        Lookbook::Preview.clear_cache
+        Lookbook::Engine.reload_ui(changes)
+        Lookbook::Engine.run_hooks(:after_change, changes)
+      end
+      Lookbook::Engine.register_listener(preview_listener)
+
+      page_listener = Listen.to(
+        *config.lookbook.page_paths,
+        only: /\.(html.*|md.*)$/,
+        force_polling: config.lookbook.listen_use_polling
+      ) do |modified, added, removed|
+        changes = { modified: modified, added: added, removed: removed }
+        Lookbook::Engine.reload_ui(changes)
+        Lookbook::Engine.run_hooks(:after_change, changes)
+      end
+      Lookbook::Engine.register_listener(page_listener)
+    end
+
     at_exit do
-      if config.lookbook.listen
+      if Lookbook::Engine.listeners.any?
         Lookbook.logger.debug "Stopping listeners"
         Lookbook::Engine.listeners.each { |listener| listener.stop } 
       end
@@ -194,9 +184,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
+            ws = ActionCable::Server::Base.new
+            ws.config = cable
+            ws
           end
         end
       end
@@ -231,7 +221,7 @@ module Lookbook
       end
 
       def run_hooks(event_name, *args)
-        Lookbook.config.hooks[event_name].each do |hook|
+        config.lookbook.hooks[event_name].each do |hook|
           hook.call(Lookbook, *args)
         end
       end

data/lib/lookbook/hooks.rb

@@ -0,0 +1,21 @@
+module Lookbook
+  module Hooks
+    def after_initialize(&block)
+      add_hook(:after_initialize, block)
+    end
+
+    def before_exit(&block)
+      add_hook(:before_exit, block)
+    end
+
+    def after_change(&block)
+      add_hook(:after_change, block)
+    end
+
+    protected
+
+    def add_hook(event_name, block)
+      Lookbook.config.hooks[event_name] << block
+    end
+  end
+end

data/lib/lookbook/panels.rb

@@ -0,0 +1,15 @@
+module Lookbook
+  module Panels
+    def define_panel(name, opts = {})
+      Lookbook.config.define_inspector_panel(name, opts)
+    end
+
+    def amend_panel(name, opts = {})
+      Lookbook.amend_inspector_panel(name, opts)
+    end
+
+    def remove_panel(name)
+      Lookbook.remove_inspector_panel(name)
+    end
+  end
+end

data/lib/lookbook/parser.rb

@@ -24,13 +24,16 @@ module Lookbook
     end
 
     class << self
-      def define_tags
+      def define_tags(custom = {})
         YARD::Tags::Library.define_tag("Hidden status", :hidden)
         YARD::Tags::Library.define_tag("Label", :label)
         YARD::Tags::Library.define_tag("Display", :display)
         YARD::Tags::Library.define_tag("Position", :position)
         YARD::Tags::Library.define_tag("ID", :id)
         YARD::Tags::Library.define_tag("Component", :component)
+        custom.each do |name, opts|
+          YARD::Tags::Library.define_tag(name.to_s.titleize, name)
+        end
       end
     end
   end

data/lib/lookbook/preview.rb

@@ -3,7 +3,7 @@ module Lookbook
     include Utils
 
     delegate :name, :render_args, to: :@preview
-    delegate :position, :group, :notes, :hidden?, to: :@preview_inspector
+    delegate :position, :group, :notes, :hidden?, :tags, :tag, to: :@preview_inspector
 
     def initialize(preview)
       @preview = preview

data/lib/lookbook/preview_example.rb

@@ -1,7 +1,7 @@
 module Lookbook
   class PreviewExample < Entity
     attr_reader :name, :preview
-    delegate :params, :position, :group, :notes, :hidden?, :source, to: :@example_inspector
+    delegate :params, :position, :group, :notes, :hidden?, :source, :tags, :tag, to: :@example_inspector
 
     def initialize(name, preview)
       @name = name

data/lib/lookbook/preview_group.rb

@@ -49,6 +49,14 @@ module Lookbook
       @preview.hierarchy_depth + 1
     end
 
+    def tags(name = nil)
+      examples.map { |example| example.tags(name) }.flatten
+    end
+
+    def tag(name = nil)
+      tags(name).first
+    end
+
     alias_method :lookup_path, :path
   end
 end

data/lib/lookbook/source_inspector.rb

@@ -79,5 +79,14 @@ module Lookbook
     def methods
       code_object&.meths
     end
+
+    def tags(name = nil)
+      tag_objects = code_object&.tags(name).presence || []
+      Lookbook::Tags.process_tags(tag_objects)
+    end
+
+    def tag(name = nil)
+      tags(name).first
+    end
   end
 end

data/lib/lookbook/tag.rb

@@ -0,0 +1,108 @@
+require "shellwords"
+
+module Lookbook
+  class Tag
+    attr_reader :data, :arg_names
+    attr_accessor :args, :opts
+
+    def initialize(tag_object, arg_names = nil, parser: nil, **options)
+      @tag_object = tag_object
+      @arg_names = arg_names
+      @args = {}
+      @opts = {}
+      @options = options
+      @parser = parser
+      @data = Store.new
+      run_parser
+    end
+
+    def tag_name
+      @name ||= @tag_object.tag_name.to_sym
+    end
+
+    def tag_body
+      @tag_object.text
+    end
+
+    def get_opt(key, fallback = nil)
+      opts[key] || fallback
+    end
+
+    def opts_str
+      @opts_str ||= text_tokens.size > args_count ? text_tokens.slice(args_count, text_tokens.size).join(" ") : ""
+    end
+
+    protected
+
+    def parse_args
+      unless arg_names.nil?
+        values = text_tokens.slice(0, args_count)
+        @args = build_args(values)
+      end
+    end
+
+    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 : {}
+    end
+
+    def run_parser
+      parse_args
+      parse_opts
+      @parser.call(self) if @parser.respond_to?(:call)
+    end
+
+    def arg_options
+      return [] if arg_names.nil?
+      @arg_options ||= arg_names.map do |arg|
+        unless arg.is_a? Hash
+          name = arg
+          arg = {
+            name: name.to_sym,
+          }
+        end
+        arg[:parse] = false unless arg.key? :parse
+        arg
+      end
+    end
+
+    def validate_arg_names
+      if arg_names.present?
+        arg_names.each do |name|
+          if methods.include? name.to_sym
+            raise ArgumentError, "'#{name}' is a reserved word and cannot be used as an argument name."
+          end
+        end
+      end
+    end
+
+    def args_count
+      arg_options.size
+    end
+
+    def parse_yaml(str, fallback = "~")
+      YAML.safe_load(str || fallback)
+    end
+
+    def text_tokens
+      @tokens ||= Shellwords.split(@tag_object.text)
+    end
+
+    def build_args(values)
+      arg_options.map.with_index do |arg, i|
+        value = values[i]
+        value = parse_arg(value) if arg[:parse] == true && value.present?
+        [arg[:name].to_sym, value]
+      end.to_h
+    end
+
+    def method_missing(name, *method_args)
+      if name.end_with? "="
+        data[name.to_s.chomp("=").to_sym] = method_args.first
+      else
+        data[name] || args[name]
+      end
+    end
+  end
+end

data/lib/lookbook/tags.rb

@@ -0,0 +1,22 @@
+module Lookbook
+  module Tags
+    def define_tag(name, args = nil, opts = {}, &block)
+      name = name.to_s.downcase.underscore.to_sym
+      if args.is_a? Hash
+        opts = args
+        args = nil
+      end
+      opts[:args] = args
+      opts[:parser] = block if block_given?
+      Lookbook.config.preview_tags[name] = opts
+    end
+
+    def self.process_tags(tag_objects)
+      return [] if tag_objects.none?
+      tag_objects.map do |tag_object|
+        opts = Lookbook.config.preview_tags[tag_object.tag_name] || {}
+        Lookbook::Tag.new(tag_object, opts[:args], opts.except(:args))
+      end.compact
+    end
+  end
+end

data/lib/lookbook/theme.rb

@@ -1,18 +1,47 @@
 module Lookbook
   class Theme
+    BASE_THEMES = {
+      indigo: {
+        favicon_light_mode: "#4F46E5",
+        favicon_dark_mode: "#818CF8"
+      },
+      zinc: {
+        favicon_light_mode: "#52525b",
+        favicon_dark_mode: "#E4E4E7"
+      },
+      blue: {
+        favicon_light_mode: "#2563EB",
+        favicon_dark_mode: "#60A5FA"
+      }
+    }
 
-    BASE_THEMES = [:indigo, :zinc, :blue]
-
-    def initialize(config = {})
-      @config = config
+    def initialize(base_theme, overrides = {})
+      @base_theme = base_theme
+      @overrides = overrides
       @css = nil
     end
 
+    def favicon_light_mode
+      (
+        @overrides[:favicon_light_mode].presence ||
+        @overrides[:favicon].presence ||
+        BASE_THEMES[@base_theme.to_sym][:favicon_light_mode]
+      )
+    end
+
+    def favicon_dark_mode
+      (
+        @overrides[:favicon_dark_mode].presence ||
+        @overrides[:favicon].presence ||
+        BASE_THEMES[@base_theme.to_sym][:favicon_dark_mode]
+      )
+    end
+
     def to_css
       return @css unless @css.nil?
-      @css ||= if @config.present?
+      @css ||= if @overrides.present?
         styles = [":root {"]
-        styles << @config.map do |key, value|
+        styles << @overrides.select { |key| !key.start_with?("favicon") }.map do |key, value|
           "  --lookbook-#{key.to_s.underscore.gsub("_","-")}: #{value};"
         end
         styles.push "}"
@@ -23,7 +52,7 @@ module Lookbook
     end
 
     def self.valid_theme?(name)
-      BASE_THEMES.include? name.to_sym
+      BASE_THEMES.key? name.to_sym
     end
   end
 end

data/lib/lookbook/version.rb

@@ -1,3 +1,3 @@
 module Lookbook
-  VERSION = "1.0.0.beta.6"
+  VERSION = "1.0.0.beta.7"
 end

data/lib/lookbook.rb

@@ -11,6 +11,7 @@ module Lookbook
   autoload :Lang, "lookbook/lang"
   autoload :Params, "lookbook/params"
   autoload :Page, "lookbook/page"
+  autoload :Tag, "lookbook/tag"
   autoload :PageSection, "lookbook/page_section"
   autoload :PageCollection, "lookbook/page_collection"
   autoload :Features, "lookbook/features"