lookbook 1.0.0 → 1.0.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5617d397419ae8b9e95fa6c53ceb94dd3a7dffe83ea1fae0f643f17f6c15b995
-  data.tar.gz: 1fb037740def1192fa5aa9d0c076419dc06ed629996e7cc82ed741e7aefa000f
+  metadata.gz: 741dcc6296e79ba365a64945fb70b7ba7e8b8df2eee9e83e72ef4e32c619b2fc
+  data.tar.gz: aa5d6647abc755e54b37837847f5929803eba7545272e6c33b887f2f7c5ef54e
 SHA512:
-  metadata.gz: a5710f8a40f7594bc4d9ac3347ca8c04102f708b50c21d96d1695b26ab4d6ccc23436e1288cea7d43516264260c31f091530cb15d3ea144707d2ae280442c333
-  data.tar.gz: 1bfdcf6ce5bb68e2af399b5920ec821a73057e77aaf4732216da498b1745c5c8eb15b220ce56115dd8c14d757febe75315c2620c6c6c929b3e973d001a5b7797
+  metadata.gz: d19a7567121be4be2c010f61d9c7d62ecff33d53d034a138124516883cbb190102aa0f8c9e9457a0aaf1d33c6d9d5250d3a60ad507af9973348f3c08c03c26bb
+  data.tar.gz: 8cc77046623125e88550cfd7ff4dd626a2deda064fee6cf3171d5a5cd59bed8ec2277e8091d48d995763db7b3fe66c730e99bde1380a4e5703986e7cc0808ff4

data/README.md

@@ -1,12 +1,12 @@
 # Lookbook
 
 <div>
-<a href="https://rubygems.org/gems/lookbook"><img src="https://img.shields.io/gem/v/lookbook?include_prereleases" alt="Gem version"></a>
+<a href="https://rubygems.org/gems/lookbook"><img src="https://img.shields.io/gem/v/lookbook" alt="Gem version"></a>
 <a href="https://github.com/allmarkedup/lookbook/actions/workflows/ci.yml"><img src="https://github.com/allmarkedup/lookbook/actions/workflows/ci.yml/badge.svg?branch=main" alt="CI status"></a>
 </div>
 <br>
 
-A tool to help develop, test and document [ViewComponents](https://viewcomponent.org/) in isolation.
+A tool to help browse, develop, test & document [ViewComponents](https://viewcomponent.org/) in Ruby on Rails apps.
 
 ## Documentation
 
@@ -17,9 +17,9 @@ A tool to help develop, test and document [ViewComponents](https://viewcomponent
 
 ## Demo
 
-**Online Demo:** [https://lookbook-demo-app-v1-0-beta.herokuapp.com/lookbook](https://lookbook-demo-app-v1-0-beta.herokuapp.com/lookbook) 
+**Online Demo:** [https://lookbook-demo-app.herokuapp.com/lookbook](https://lookbook-demo-app.herokuapp.com/lookbook) 
 
-[![Lookbook UI](.github/assets/lookbook_screenshot_v1.0_beta.png)](https://lookbook-demo-app-v1-0-beta.herokuapp.com/lookbook/)
+[![Lookbook UI](.github/assets/lookbook_screenshot_v1.0_beta.png)](https://lookbook-demo-app.herokuapp.com/lookbook/)
 
 
 ## Development

data/app/components/lookbook/embed/component.html.erb

@@ -1,19 +1,19 @@
-<% if @example.present? %>
+<% if @target.present? %>
 <%= render_component_tag class: "not-prose border-b border-lookbook-divider rounded-sm overflow-hidden", "@navigation:start.window": "cleanup" do %>
 
   <%= render_component :toolbar, class: "border border-b-0 border-lookbook-divider" do |toolbar| %>
     <% toolbar.section padded: true do %>
       <h3>
-        <%= @example.preview.label %> (<%= @example.label %>)
+        <%= @target.preview.label %> (<%= @target.label %>)
       </h3>
     <% end %>
     <% toolbar.section align: :right, divide: :left do %>
       <%= render_component :button_group do |group| %>
         <% group.button icon: :eye,
-          href: lookbook_inspect_path(@example.path, @params),
+          href: lookbook_inspect_path(@target.path, @params),
           tooltip: "View in Inspector" %>
         <% group.button icon: :external_link,
-          href: lookbook_preview_path(@example.path, @params),
+          href: lookbook_preview_path(@target.path, @params),
           tooltip: "Open in new window",
           target: "_blank" %>
       <% end %>
@@ -28,7 +28,7 @@
     @viewport:resize-complete="resizeIframe"
     @tabs:change.window="resizeIframe"> 
     <%= render_component :viewport,
-      src: lookbook_preview_path(@example.path, @params.merge(lookbook_embed: true)),
+      src: lookbook_preview_path(@target.path, @params.merge(lookbook_embed: true)),
       alpine_data: "store",
       resize_height: false,
       max_height: @max_height,

data/app/components/lookbook/embed/component.rb

@@ -2,7 +2,7 @@ module Lookbook
   class Embed::Component < Lookbook::BaseComponent
     def initialize(id:, example:, params: {}, opts: {}, max_height: nil, **html_attrs)
       @id = id
-      @example = example
+      @target = example
       @params = params
       @opts = opts
       @max_height = max_height

data/app/components/lookbook/header/component.html.erb

@@ -46,11 +46,11 @@
                   <span class="opacity-70 mr-1">Lookbook</span>
                   <span class="mr-6">v<%= Lookbook::VERSION %></span>
                   <div class="flex items-center space-x-2">
-                    <!-- a href="https://github.com/allmarkedup/lookbook" target="_blank" class="ml-auto opacity-70" title="Documentation">
-                      <%= icon  :book, size: 3 %>
-                    </a -->
+                    <a href="https://lookbook.build/guide" target="_blank" class="ml-auto opacity-70" title="Documentation">
+                      <%= icon :book, size: 3 %>
+                    </a>
                     <a href="https://github.com/allmarkedup/lookbook" target="_blank" class="ml-auto opacity-70" title="Github">
-                      <%= icon  :github, size: 3 %>
+                      <%= icon :github, size: 3 %>
                     </a>
                   </div>
                 </div>

data/app/components/lookbook/icon/component.html.erb

@@ -1,4 +1,4 @@
-<%= render_component_tag :i, style: "height: #{size_rems}; width: #{size_rems}" do %>
+<%= render_component_tag :i, style: "height: #{size_rems}; width: #{size_rems}; #{@html_attrs[:style]}" do %>
   <svg>
     <use :href="`/lookbook-assets/feather-sprite.svg#${iconName}`" x-cloak />
   </svg>

data/app/components/lookbook/inspector_panel/component.rb

@@ -25,9 +25,8 @@ module Lookbook
             css_parser.each_selector do |selector, declarations, specificity|
               @panel_styles += "##{id} #{selector} { #{declarations} }\n"
             end
-            style_tag.unlink
           end
-          @panel_html = panel_dom.to_html.html_safe
+          @panel_html = content.gsub(/<style(?:\s[^>]*)?>.*<\/style>/, "").html_safe
         end
       end
       @panel_html ||= content

data/app/controllers/lookbook/previews_controller.rb

@@ -13,7 +13,7 @@ module Lookbook
     before_action :set_params
 
     def preview
-      if @example
+      if @target
         begin
           opts = {layout: @preview.layout}
           if params[:lookbook_embed] == "true"
@@ -32,7 +32,7 @@ module Lookbook
     end
 
     def show
-      if @example
+      if @target
         begin
           @main_panels = main_panels
           @drawer_panels = drawer_panels
@@ -52,9 +52,9 @@ module Lookbook
     private
 
     def lookup_entities
-      @example = Lookbook.previews.find_example(params[:path])
-      if @example.present?
-        @preview = @example.preview
+      @target = Lookbook.previews.find_example(params[:path])
+      if @target.present?
+        @preview = @target.preview
         if params[:path] == @preview&.lookup_path
           redirect_to lookbook_inspect_path "#{params[:path]}/#{@preview.default_example.name}"
         end
@@ -85,17 +85,17 @@ module Lookbook
     end
 
     def target_examples
-      @example.type == :group ? @example.examples : [@example]
+      @target.type == :group ? @target.examples : [@target]
     end
 
     def set_title
-      @title = @example.present? ? [@example&.label, @preview&.label].compact.join(" :: ") : "Not found"
+      @title = @target.present? ? [@target&.label, @preview&.label].compact.join(" :: ") : "Not found"
     end
 
     def set_params
-      if @example
+      if @target
         # cast known params to type
-        @example.params.each do |param|
+        @target.params.each do |param|
           if preview_controller.params.key?(param[:name])
             preview_controller.params[param[:name]] = Lookbook::Params.cast(preview_controller.params[param[:name]], param[:type])
           end
@@ -103,7 +103,7 @@ module Lookbook
         # set display and data params
         preview_controller.params.merge!({
           lookbook: {
-            display: @example.display_params,
+            display: @target.display_params,
             data: Lookbook.data
           }
         })
@@ -113,7 +113,7 @@ module Lookbook
     def preview_params
       preview_controller.params.permit!
       preview_controller.params.to_h.select do |key, value|
-        !!@example.params.find { |param| param[:name] == key }
+        !!@target.params.find { |param| param[:name] == key }
       end
     end
 
@@ -125,12 +125,7 @@ module Lookbook
         path: params[:path]
       }
 
-      example = @example
       preview = @preview
-      preview.define_singleton_method(:params, proc {
-        example.params
-      })
-
       examples = target_examples.map do |example|
         render_args = @preview.render_args(example.name, params: preview_controller.params)
         has_template = render_args[:template] != "view_components/preview"
@@ -144,11 +139,18 @@ module Lookbook
         example
       end
 
+      target = @target.type == :group ? @target : examples.find { |e| e.lookup_path == @target.lookup_path }
+
+      preview.define_singleton_method(:params, proc {
+        target.params
+      })
+
       @inspector_data ||= Lookbook::Store.new({
         context: context_data,
         preview: preview,
         examples: examples,
-        example: example,
+        example: examples.first,
+        target: target,
         data: Lookbook.data,
         app: Lookbook
       })
@@ -198,7 +200,7 @@ module Lookbook
         {
           file_path: @preview&.full_path,
           line_number: 0,
-          source_code: @example&.source
+          source_code: @target&.source
         }
       elsif exception.is_a?(ActionView::Template::Error) & exception.message.include?("implements a reserved method")
         message_parts = exception.message.split("\n").first.split

data/app/helpers/lookbook/component_helper.rb

@@ -6,6 +6,10 @@ module Lookbook
       render Lookbook::Icon::Component.new(name: name, **attrs)
     end
 
+    def code(**attrs, &block)
+      render Lookbook::Code::Component.new(**attrs), &block
+    end
+
     def render_component(ref, **attrs, &block)
       klass = component_class(ref)
       comp = attrs.key?(:content) ? klass.new(**attrs.except(:content)).with_content(attrs[:content]) : klass.new(**attrs)

data/app/views/lookbook/index.html.erb

@@ -7,7 +7,7 @@
       <% if Lookbook.previews? %>
         <p>Select a preview from the nav to get started.</p>
       <% else %>
-        <p><a class="underline" href="https://beta.lookbook.build/guide/previews" target="_blank">Create a preview</a> to get started.</p>
+        <p><a class="underline" href="https://lookbook.build/guide/previews" target="_blank">Create a preview</a> to get started.</p>
       <% end %>
     </div>
   </div>

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

@@ -29,7 +29,7 @@
             <% 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;
+                &lt;%= embed <%= @preview.preview_class %>, :<%= @target.name %>, params: <%= request.query_parameters.deep_symbolize_keys.to_s %> %&gt;
             <% end %>
           <% end %>
           
@@ -38,7 +38,7 @@
             "@click.stop": "startSpin(); $dispatch('viewport:reload'); stopSpin(500);" %>
 
           <% group.button icon: :external_link,
-            href: lookbook_preview_path(@example.lookup_path, request.query_parameters),
+            href: lookbook_preview_path(@target.lookup_path, request.query_parameters),
             tooltip: "Open preview in new window",
             target: "_blank" %>
 

data/config/routes.rb

@@ -1,5 +1,5 @@
 Lookbook::Engine.routes.draw do
-  if Lookbook.config.auto_refresh
+  if Lookbook::Engine.websocket?
     mount Lookbook::Engine.websocket => Lookbook.config.cable_mount_path
   end
 

data/lib/lookbook/component.rb

@@ -11,6 +11,10 @@ module Lookbook
       name.underscore
     end
 
+    def rel_path
+      Pathname.new("#{path}.rb")
+    end
+
     def full_path
       Pathname.new("#{Lookbook.config.components_path}/#{path}.rb")
     end

data/lib/lookbook/engine.rb

@@ -1,7 +1,6 @@
 require "view_component"
 require "action_cable/engine"
 require "listen"
-require "rake"
 
 module Lookbook
   autoload :Config, "lookbook/config"
@@ -107,7 +106,7 @@ module Lookbook
         end
       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?
+        unless Lookbook::Engine.prevent_listening?
           init_listeners
         end
       end
@@ -127,69 +126,75 @@ 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 Lookbook::Engine.listeners.any?
         Lookbook.logger.debug "Stopping listeners"
-        Lookbook::Engine.listeners.each { |listener| listener.stop }
+        Lookbook::Engine.stop_listeners
       end
       Lookbook::Engine.run_hooks(:before_exit)
     end
 
     class << self
+      def init_listeners
+        config = Lookbook.config
+        return unless config.listen == true
+        Listen.logger = Lookbook.logger
+
+        preview_listener = Listen.to(
+          *config.listen_paths,
+          only: /\.(#{config.listen_extensions.join("|")})$/,
+          force_polling: config.listen_use_polling
+        ) do |modified, added, removed|
+          changes = {modified: modified, added: added, removed: removed}
+          begin
+            parser.parse
+          rescue
+          end
+          Lookbook::Preview.clear_cache
+          reload_ui(changes)
+          run_hooks(:after_change, changes)
+        end
+        register_listener(preview_listener)
+
+        page_listener = Listen.to(
+          *config.page_paths,
+          only: /\.(html.*|md.*)$/,
+          force_polling: config.listen_use_polling
+        ) do |modified, added, removed|
+          changes = {modified: modified, added: added, removed: removed}
+          reload_ui(changes)
+          run_hooks(:after_change, changes)
+        end
+        register_listener(page_listener)
+      end
+
       def websocket
+        config = Lookbook.config
         return @websocket unless @websocket.nil?
-        if config.lookbook.auto_refresh
-          cable = ActionCable::Server::Configuration.new
-          cable.cable = {adapter: "async"}.with_indifferent_access
-          cable.mount_path = config.lookbook.cable_mount_path
-          cable.connection_class = -> { Lookbook::Connection }
-          cable.logger = config.lookbook.cable_logger
-
-          @websocket ||= if Rails.version.to_f >= 6.0
-            ActionCable::Server::Base.new(config: cable)
-          else
-            ws = ActionCable::Server::Base.new
-            ws.config = cable
-            ws
-          end
+        return unless config.auto_refresh == true
+        Lookbook.logger.info "Initializing websocket"
+
+        cable = ActionCable::Server::Configuration.new
+        cable.cable = {adapter: "async"}.with_indifferent_access
+        cable.mount_path = config.cable_mount_path
+        cable.connection_class = -> { Lookbook::Connection }
+        cable.logger = config.cable_logger
+
+        @websocket ||= if Gem::Version.new(Rails.version) >= Gem::Version.new(6.0)
+          ActionCable::Server::Base.new(config: cable)
+        else
+          ws = ActionCable::Server::Base.new
+          ws.config = cable
+          ws
         end
       end
 
       def websocket_mount_path
-        "#{mounted_path}#{config.lookbook.cable_mount_path}" if websocket
+        "#{mounted_path}#{config.lookbook.cable_mount_path}" if websocket?
+      end
+
+      def websocket?
+        websocket.present?
       end
 
       def mounted_path
@@ -222,6 +227,10 @@ module Lookbook
         @listeners ||= []
       end
 
+      def stop_listeners
+        listeners.each { |listener| listener.stop }
+      end
+
       def run_hooks(event_name, *args)
         config.lookbook.hooks[event_name].each do |hook|
           hook.call(Lookbook, *args)
@@ -232,6 +241,18 @@ module Lookbook
         websocket&.broadcast("reload", changed)
       end
 
+      def prevent_listening?
+        Rails.env.test? || running_in_rake_task?
+      end
+
+      def running_in_rake_task?
+        if defined?(Rake) && Rake.respond_to?(:application)
+          File.basename($0) == "rake" || Rake.application.top_level_tasks.any?
+        else
+          false
+        end
+      end
+
       attr_reader :preview_controller
     end
   end

data/lib/lookbook/page.rb

@@ -13,7 +13,7 @@ module Lookbook
       :data
     ]
 
-    attr_reader :errors
+    attr_reader :errors, :rel_path
     attr_accessor :sections
 
     def initialize(path, base_path)
@@ -23,8 +23,8 @@ module Lookbook
       @errors = []
       @sections = []
       @page_name = remove_position_prefix(path_name)
-      rel_path = @pathname.relative_path_from(@base_path)
-      page_path = rel_path.dirname.to_s == "." ? @page_name : "#{rel_path.dirname}/#{@page_name}"
+      @rel_path = @pathname.relative_path_from(@base_path)
+      page_path = @rel_path.dirname.to_s == "." ? @page_name : "#{@rel_path.dirname}/#{@page_name}"
       super(page_path)
     end
 
@@ -33,7 +33,7 @@ module Lookbook
     end
 
     def full_path
-      Rails.root.join(@pathname.to_s)
+      Pathname.new Rails.root.join(@pathname.to_s)
     end
 
     def name

data/lib/lookbook/preview.rb

@@ -61,11 +61,15 @@ module Lookbook
       examples.first
     end
 
+    def rel_path
+      "#{name.underscore}.rb"
+    end
+
     def full_path
       base_path = Array(Lookbook.config.preview_paths).detect do |preview_path|
-        Dir["#{preview_path}/#{name.underscore}.rb"].first
+        Dir["#{preview_path}/#{rel_path}"].first
       end
-      Pathname.new(Dir["#{base_path}/#{name.underscore}.rb"].first)
+      Pathname.new(Dir["#{base_path}/#{rel_path}"].first)
     end
 
     def url_path

data/lib/lookbook/version.rb

@@ -1,3 +1,3 @@
 module Lookbook
-  VERSION = "1.0.0"
+  VERSION = "1.0.3"
 end

data/public/lookbook-assets/js/lookbook.js

@@ -7701,7 +7701,7 @@ function $5439cede634b2921$var$toCamel(s) {
 }
 
 
-var $6ff830cc0b6487a5$exports = {};
+var $6d30a58562f349fe$exports = {};
 var $cbd28b10fa9798c7$exports = {};
 
 $parcel$defineInteropFlag($cbd28b10fa9798c7$exports);
@@ -11364,39 +11364,6 @@ function $99486586f6691564$export$2e2bcd8739ae039() {
 }
 
 
-var $e398acaded942bbe$exports = {};
-
-$parcel$defineInteropFlag($e398acaded942bbe$exports);
-
-$parcel$export($e398acaded942bbe$exports, "default", () => $e398acaded942bbe$export$2e2bcd8739ae039);
-
-function $e398acaded942bbe$export$2e2bcd8739ae039(targetSelector) {
-    return {
-        width: 0,
-        height: 0,
-        resizing: false,
-        target: null,
-        init () {
-            this.target = document.querySelector(targetSelector);
-            if (this.target) {
-                this.width = Math.round(this.target.clientWidth);
-                this.height = Math.round(this.target.clientHeight);
-                this.createObserver();
-            }
-        },
-        createObserver () {
-            if (this.target) this.observer = (0, $9930d46698775b42$export$a2214cc2adb2dc44)(document.querySelector(targetSelector), ({ width: width , height: height  })=>{
-                this.width = width;
-                this.height = height;
-            });
-        },
-        tearDown () {
-            if (this.observer) this.observer.disconnect();
-        }
-    };
-}
-
-
 var $47a1c62621be0c54$exports = {};
 
 $parcel$defineInteropFlag($47a1c62621be0c54$exports);
@@ -12318,6 +12285,39 @@ function $e1f51f020443edd4$export$2e2bcd8739ae039(id, embedStore) {
 }
 
 
+var $e398acaded942bbe$exports = {};
+
+$parcel$defineInteropFlag($e398acaded942bbe$exports);
+
+$parcel$export($e398acaded942bbe$exports, "default", () => $e398acaded942bbe$export$2e2bcd8739ae039);
+
+function $e398acaded942bbe$export$2e2bcd8739ae039(targetSelector) {
+    return {
+        width: 0,
+        height: 0,
+        resizing: false,
+        target: null,
+        init () {
+            this.target = document.querySelector(targetSelector);
+            if (this.target) {
+                this.width = Math.round(this.target.clientWidth);
+                this.height = Math.round(this.target.clientHeight);
+                this.createObserver();
+            }
+        },
+        createObserver () {
+            if (this.target) this.observer = (0, $9930d46698775b42$export$a2214cc2adb2dc44)(document.querySelector(targetSelector), ({ width: width , height: height  })=>{
+                this.width = width;
+                this.height = height;
+            });
+        },
+        tearDown () {
+            if (this.observer) this.observer.disconnect();
+        }
+    };
+}
+
+
 var $e9904a14dabf652d$exports = {};
 
 $parcel$defineInteropFlag($e9904a14dabf652d$exports);
@@ -13210,12 +13210,12 @@ function $6d64716f0b34fdf4$export$2e2bcd8739ae039(store) {
 }
 
 
-$6ff830cc0b6487a5$exports = {
+$6d30a58562f349fe$exports = {
     "button": $cbd28b10fa9798c7$exports,
     "code": $99486586f6691564$exports,
-    "dimensions_display": $e398acaded942bbe$exports,
     "copy_button": $47a1c62621be0c54$exports,
     "embed": $e1f51f020443edd4$exports,
+    "dimensions_display": $e398acaded942bbe$exports,
     "filter": $e9904a14dabf652d$exports,
     "icon": $36506012e0c6e9e3$exports,
     "nav": $d92d9d5253f84566$exports,
@@ -13367,7 +13367,7 @@ const $d73574cc5e9b9e72$var$prefix = window.APP_NAME;
 // Components
 (0, $caa9439642c6336c$export$2e2bcd8739ae039).data("app", (0, $d709d0f4027033b2$export$2e2bcd8739ae039));
 [
-    $6ff830cc0b6487a5$exports,
+    $6d30a58562f349fe$exports,
     $e4eab7529959b73b$exports,
     $4979d2d897a1c01f$exports
 ].forEach((scripts)=>{