lookbook 1.0.0.rc.3 → 1.0.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f64c997d49feb8abebcde5278b87487c2e6560325e5f36c849b2f1897e8c749e
-  data.tar.gz: d6d230272a15c2b3685da778e3b174300c5a40845f9b3819dba676c66f78904e
+  metadata.gz: e3f13cba228b6a66ef0c31377116296e1eb1c8b53e3fd5b54ca257780cb30498
+  data.tar.gz: 3c9e509969d78ea297e39649b43d4a8613f97c7be8e0845603b313524bff316b
 SHA512:
-  metadata.gz: 5cae26841a60c692b5f762b77ad5b6ca38cba5164da39b38f8e026b720a9289300469e6f50d8b7e90e7c8135dcae93443650ae4a6861c5e29ea7b527cdd6e6ee
-  data.tar.gz: d59f0142b41eb72a82997a61a479937cf91ac2cf3adffdfd7e28f0fa9e9af6dacc0f106ce8db5afc9431b5b7278afb00fea3498859e4411b563cd67a47342c14
+  metadata.gz: afeead86c2ccbb4cfd6e9afc20641474dbd5ab153916b5602f374750a41aaaec329516b36b39a964740701a536dd52683f9322e039fde3d4f9c83d7101290720
+  data.tar.gz: 54046d3840469aac423eef1b9c9dd88132e7282cda794b5e1ebd9ab8518a05a8184b3d037915e8c2a1dc9c61b5644a314735a05c5de8de8c0fdda6c23acebe55

data/README.md

@@ -1,83 +1,52 @@
-# Lookbook v1.0
+# Lookbook
 
 <div>
-<a href="https://rubygems.org/gems/lookbook"><img src="https://img.shields.io/gem/v/lookbook?include_prereleases" alt="Gem version"></a>
-<img src="https://github.com/allmarkedup/lookbook/actions/workflows/ci.yml/badge.svg?branch=v1.0-beta" alt="CI status">
+<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>
 
-> **This is the Lookbook v1.0 BETA development branch.**<br>
->_For code and documentation for the current stable release see the [main branch](https://github.com/allmarkedup/lookbook/tree/main)._
+A tool to help browse, develop, test & document [ViewComponents](https://viewcomponent.org/) in Ruby on Rails apps.
 
+## Documentation
 
-## Get started
+**Lookbook (v1.x)** documentation: **[https://lookbook.build](https://lookbook.build)**
 
-If you are already using Lookbook in your project, just update the Lookbook gem to the latest beta release and then head over to the [beta documentation site](https://beta.lookbook.build/) to read more about the new features.
+> _Looking for v0.9.x docs? [Head over here](https://github.com/allmarkedup/lookbook/tree/0.9.x)._
 
-```ruby
-gem "lookbook", ">= 1.0.0.beta.8"
-```
 
-If you are **new to Lookbook** then check out the <a href="https://beta.lookbook.build/guide/quick-start/">v1.0 quick start guide</a> for more detailed instructions on installing Lookbook in your project
+## Demo
 
+**Online Demo:** [https://lookbook-demo-app.herokuapp.com/lookbook](https://lookbook-demo-app.herokuapp.com/lookbook) 
 
-<h4>Useful Resources</h4>
+[![Lookbook UI](.github/assets/lookbook_screenshot_v1.0_beta.png)](https://lookbook-demo-app.herokuapp.com/lookbook/)
 
-* 👉 <a href="https://beta.lookbook.build/">v1.0 docs</a>
-* 👉 <a href="https://lookbook-demo-app-v1-0-beta.herokuapp.com/lookbook">v1.0 demo app</a> <em>(The repo for the demo <a href="https://github.com/allmarkedup/lookbook-demo/tree/v1.0-beta">is here</a> if you want to dig in further)</em>
 
+## Development
 
-
-## Changes and new features in v1.0
-
-Lookbook v1.0 includes a completely re-written UI, many under-the hood improvements and a some exciting new customisation options.
-
-### Frontend changes:
-
-* Completely re-written UI - now built with ViewComponents
-* New [UI themes and customisation options](https://beta.lookbook.build/guide/themes/)
-* Improved small-screen/mobile view
-* Debug menu
-* ...and many other small visual and usability improvements
-
-### New options for extending Lookbook:
-
-* Define [custom tags](https://beta.lookbook.build/guide/extend/tags/) for preview file annotations
-* Create [your own tab panels](https://beta.lookbook.build/guide/extend/panels/) - with complete control over content/layout and access to all Lookbook data
-* Use [lifecycle hooks](https://beta.lookbook.build/guide/extend/hooks/) to run your own code when Lookbook starts up, when files change or at shutdown
-
-### Other changes
-
-* 'Workbench' app for developing Lookbook's UI components in Lookbook
-* New Rspec-based test suite and dummy app
-* All new documentation site built using [Bridgetown](https://www.bridgetownrb.com/)
-
-
-[![Lookbook UI](.github/assets/lookbook_screenshot_v1.0_beta.png)](https://lookbook-demo-app-v1-0-beta.herokuapp.com/lookbook/)
-
-## Workbench
-
-As of this release, Lookbook's UI is itself built using ViewComponent components. To help with development it is possible to preview these components (in a Lookbook instance!) by running the included 'Workbench" app, as follows:
+Lookbook's UI is itself built using ViewComponents. To preview these components in a Lookbook instance you can run the included `workbench` app:
 
 1. Clone this repo
 2. Install dependencies: `bundle install & npm install`
-3. Start the Workbench: `foreman start`
-4. Open http://localhost:4545 in your browser to view the Workbench
+3. Start the app: `bin/workbench`
+4. Visit http://localhost:4545/lookbook to view the Lookbook instance
+
+The `workbench` app will be started in development mode and any changes to Lookbook's views or assets will immediately be reflected in the UI.
 
-This will start the Workbench app in development mode and any changes to Lookbooks views or assets will immediately be visible in the UI.
+### Docs site
 
+The [Lookbook docs site](https://lookbook.build) is built using [Bridgetown](https://www.bridgetownrb.com/) and the source files can be found in the `./docs` directory.
 
-## Running tests
+To see a local version of the site run `bin/docs` from the root of this repo and then visit http://localhost:4000 in your browser.
 
-The test suite is in the process of being completely overhauled.
+### Testing
 
-Tests are now written using RSpec and the system now uses [Combustion](https://github.com/pat/combustion) under the hood.
+Lookbook uses RSpec for testing.
 
-- Tests can be run using the `rake lookbook:test` or `bundle exec rspec` commands.
-- The dummy app that the tests are being run against can be viewed by running the `rake lookbook:test:serve` command and then browsing to http://localhost:9292/lookbook
+Tests can be run using the `rake spec` or `bundle exec rspec` commands.
 
+The dummy app that the tests are being run against can be viewed by running the `bin/dummy` command and then browsing to http://localhost:9292/lookbook
 
----
 
 ## License
 

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"
@@ -104,11 +103,13 @@ module Lookbook
         # Rails.application.server is only available for newer Rails versions
         Rails.application.server do
           init_listeners
+          Lookbook::Engine.init_websocket
         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
+          Lookbook::Engine.init_websocket
         end
       end
 
@@ -127,64 +128,65 @@ 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 websocket
-        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
+      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 init_websocket
+        config = Lookbook.config
+        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
 
@@ -192,6 +194,10 @@ module Lookbook
         "#{mounted_path}#{config.lookbook.cable_mount_path}" if websocket
       end
 
+      def websocket?
+        !!websocket
+      end
+
       def mounted_path
         Lookbook::Engine.routes.find_script_name({})
       end
@@ -222,6 +228,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,7 +242,19 @@ module Lookbook
         websocket&.broadcast("reload", changed)
       end
 
-      attr_reader :preview_controller
+      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, :websocket
     end
   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.rc.3"
+  VERSION = "1.0.2"
 end