lookbook 3.0.0.alpha.1 → 3.0.0.alpha.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b1abe573d8ff2988838217abe357ec62bf107b4117203388872f622ef5575253
-  data.tar.gz: cee6369ffc488c3cbe1a502b85cbfb96b55c65144866b6f958ee19f9278b526f
+  metadata.gz: e001a0495be9b2addbeb92aaf82dfa6152b19e3f038c9cb4846ef9cccbc938e3
+  data.tar.gz: b59f9ddfd438cd2e38d7a99d0196f0a8e98aa2355a50db0ba7e34e253b4cd1e2
 SHA512:
-  metadata.gz: 58b876a5c0deae713e792516f22b935e2852b5647626b9f758f736864a084d1cc13bba6b4ace46edc1ed233451724dbbfb7f3dcb254fc262bf27f5cda3e49a74
-  data.tar.gz: c464e9e51c3a7b7bcaaacd9178f0bdda3f4acb2d6cf2e0fa77ab25408357e8c46ed56119980815c5fe89f74a6827fa559b78d951e0f556bbd9bae3f4fae6f025
+  metadata.gz: 4175c9a8b770a18d9b873e94a607f52666cb66be489f9c7e6abf57c5edbc6249a3c54bccc2820efbf2f06a9dd70fd63e8c429eb51d102d905895336eaaf924c5
+  data.tar.gz: d4e4ad273d84d352f765cb7398e4e6b927fa094fd6b4ae9831855b90386c9df91cd6357cf1a98e90ad2de02ae62f1f066f41620e3d83641f5aa9ef3c1e501f97

data/README.md

@@ -6,7 +6,7 @@
 
 This branch contains a work-in-progress, exploratory, from-scratch rebuild of Lookbook, intended to form the basis of a future v3.0 release.
 
-[Demo](#demo-site)  ・ [Usage](#usage)  ・ [Development](#development) ・ [Background & motivation](#v3-rebuild---background-and-motivation) ・ [Current status](#v3-rebuild---current-status)
+[Demo](#demo-site)  ・ [Documentation](#documentation)  ・ [Development](#development)
 
 ![CI status](https://github.com/lookbook-hq/lookbook/actions/workflows/ci.yml/badge.svg?branch=v3)
 
@@ -16,53 +16,15 @@ You can find a hosted version of the [demo/test app](#demo-app) here: https://v3
 
 This pulls directly from the `v3` development branch and so may occasionally be broken.
 
-## Usage
+## Documentation
 
-Lookbook v3 is currently under heavy development and **should not be considered stable**. 
+v3-specific documentation is still very much a work in progress. The pages below should provide enough information if you wish to install the latest alpha release and test out some of the new features.
 
-However, intrepid individuals who are familiar with Lookbook and wish to kick the tyres or get a preview of the upcoming changes can install the Lookbook gem directly from the `v3` branch of this repository.
-
-> Alternatively you can pull down the codebase and [run the included demo app](#demo-app) to see some of the new features in action.
-
-### Requirements
-
-* Ruby >= 3.0.0
-* Rails >= 6.1.0
-
-### Installation
-
-Add Lookbook to the `development` group in your Gemfile:
-
-```rb
-group :development do
-  gem "lookbook", github: "lookbook-hq/lookbook", branch: "v3"
-  gem "listen" # Required for 'live' UI updates when file changes are detected
-end
-```
-
-Lookbook will automatically be mounted at `/lookbook` within your app when the server is started.
-
-> 🚨 Previously Lookbook required manual mounting in your app. This is **no longer the case**, so if trialing v3 in a project with an existing Lookbook install you must remove [the mounting code](https://lookbook.build/guide/installation#step-2) from your routes.rb file first.
-
-### Configuration
-
-The currently implemented v3 configuration options are not yet documented, but can be seen in the [config.rb](lib/lookbook/config.rb) file.
-
-> 🚨 If testing out the v3 branch on an existing Lookbook install you may see errors if setting v2.x config options that have not yet been re-implemented in v3.
-
-### Breaking changes
-
-Lookbook v3.0 will contain a number of breaking changes from the v2.x releases.
-
-The majority of these changes will be in the _extending_, _theming_ and _API_ areas, so heavily customised Lookbook installations may find upgrading a more involved process. As yet there is no documentation on the exact scope of these changes.
-
-In addition, until v3 development reaches beta release stage there are likely to be _unintentional breaking changes_ due to missing or partly-implemented features.
-
-For these reasons, it is recommended that anyone who wants to kick the tyres on the pre-alpha v3 codebase do so **on new projects** or **existing projects with simple, 'vanilla' Lookbook installs** to minimise the chance of running into issues.
-
-### Running in production
-
- Please don't do this. It's really not ready yet.
+* [Installing/Upgrading](./docs/alpha/01_usage.md)
+* [New features](./docs/alpha/02_new_features.md)
+* [Background and motivation](./docs/alpha/03_motivation.md)
+* [Development status](./docs/alpha/08_status.md)
+* [Troubleshooting/Known issues](./docs/alpha/09_troubleshooting.md)
 
 ## Development
 
@@ -141,221 +103,6 @@ If you want to disable `Lookbook` logging, set
 Lookbook.logger = ::Logger.new('/dev/null')
 ```
 
-## v3 rebuild - background and motivation
-
-The current Lookbook codebase has grown organically and haphazardly from a few custom ViewComponent preview templates into a standalone Rails Engine gem with support for previewing many different types of components and views.
-
-In order to provide a solid foundation for future development this v3 branch was created with aspirations to improve the quality of the Lookbook codebase, reduce the number of third party dependencies, fix long-standing issues that are hard to address in the current implementation
-and explore building out new (and experimental) feature ideas.
-
-More concretely, a number of **key goals** are helping shape the development work:
-
-#### UI
-
-* Improve accessibilty and usability of the app (#17)
-* Expose a better theming system using CSS variables (with light and dark modes out of the box)
-* Replace ViewComponent dependency with bespoke component system for building the UI
-
-#### Previews
-
-* Add support for ActionMailer previews (#570)
-* Implement customisable preview overview/documentation pages
-* Fix compatability issues with partial/view template previews (#581, #555)
-* Improve handling and logging of parser errors (#593)
-
-#### Preview embeds
-
-* Add more granualar security configuration options for embed iframes (#571)
-* Implement `<lookbook-embed></lookbook-embed>` as a native web component
-
-#### Pages
-
-* Make it easier to customise the look and feel of pages
-* Expand set of UI and path helpers available in pages
-
-#### Development/Testing
-
-* Streamline Lookbook development process - runnable test/demo/development app, simpler asset dev/build pipeline
-* Improve test setup - switch to Minitest, run tests against demo app, better integration test coverage
-* Make logging play nicer with standard Rails logging options and third party gems
-
-#### Other
-
-* Remove ActionCable requirement, use SSE for live UI updates in dev
-* Improve error handling and compatability with `better_errors` etc (#528)
-* Remove some of the madness from codebase 🙈
-
-## v3 rebuild - Current status
-
-Lookbook v3 is currently in a pre-alpha stage and is under active, exploratory development.
-
-The 'todo' list below is intended to provide a _very rough_ overview of the current state of progress. **It is not exhaustive**. Checked off items may still be revisited/refactored/removed in the future without warning.
-
-**Emoji key:**
-
-* 🆕 - New feature in v3
-* 🚧 - In progress or implemented but incomplete 
-* 🧪 - Experimental feature/implementation
-
-### UI
-
-#### General
-
-* [x] Basic desktop UI implementation
-* [x] Replace Tailwind with vanilla CSS
-* [x] Bespoke component system to replace ViewComponent
-* [x] Status bar 🆕 🚧
-* [x] Notifications for parser errors
-* [x] SSE-based live UI updating 🧪 
-* [x] Expand nav to current item when opening app
-* [x] Don't fetch/render entire DOM on navigation (no need to re-render sidebar etc)
-* [ ] Improve accessibilty (exact requirements tbd)
-* [ ] Mobile/small screen layout optimisations
-* [ ] Side-dockable preview inspector drawer
-* [ ] Search fields 'clear' buttons
-* [ ] Use custom icon sprite instead of inlined icons
-
-#### Code samples
-
-* [x] Syntax highlighting 🆕 🚧 🧪
-* [ ] Replace Shiki with something lighter (server-side?)
-* [ ] Click to copy
-* [ ] Line wrap toggle
-
-#### Theming/branding
-
-* [x] Light/dark mode themes + toggle 🆕 🚧
-* [x] Project links in header 🆕
-* [ ] Theme system based on CSS custom properties 🚧
-* [ ] Project logo customisation
-
-### Previews
-
-#### Preview types
-
-* [x] ViewComponent previews
-* [x] Phlex previews
-* [x] Partials/templates previews
-* [x] ActionMailer previews 🆕 🧪
-
-#### Tags/annotations
-
-* [x] Notes
-* [x] `@label`
-* [x] `@hidden`
-* [x] `@param`
-* [x] `@display`
-* [x] `@!group ... @!endgroup`
-* [x] `@id` 🆕
-* [x] `@priority` 🆕
-* [x] `@location/@logical_path`
-* [ ] `@component/@renders`
-* [ ] `@source`
-* [ ] `@after_render`
-* [ ] `@status/@wip` ?
-
-#### Dynamic params
-
-* [x] Text input
-* [x] Textarea input
-* [x] Select input
-* [x] Checkbox input 🆕
-* [ ] Toggle input
-* [ ] Color picker input
-* [ ] Range input
-
-#### Display options
-
-* [x] Static display options
-* [x] Dynamic display options
-
-#### Inspector
-
-* [x] Preview panel
-* [x] Output panel
-* [x] Usage panel (combination of old 'source' and 'notes' panels)
-* [x] Metadata panel 🚧 🆕 🧪
-* [x] Params panel 🚧 
-* [ ] Configurable breakpoints for quick preview viewport resizing
-* [ ] Embed code dropdown
-* [ ] Preview URL copy button
-* [ ] Manual preview refresh button
-
-#### Other
-
-* [x] Grouped scenarios
-* [x] Preview overview pages 🚧 🆕
-* [x] Custom preview controllers support
-* [x] Custom preview layouts support
-* [x] Preview parser error reporting
-* [x] Render previews in parent app context to fix path helper issues
-* [x] JSON endpoint
-* [x] ActionView annotation stripping
-* [ ] Option to specify order of preview directories in nav (i.e. non-alphabetical)
-* [ ] Output transformation
-
-### Preview Embeds
-
-* [x] `<lookbook-embed>` implemented as HTML custom element
-* [x] Internal embeds (within pages in Lookbook)
-* [ ] External embeds (outside of Lookbook)
-* [ ] Configurable frame ancestors
-
-### Pages
-
-* [x] Basic markdown + ERB pages system
-* [x] YAML Frontmatter config
-* [x] Landing page
-* [ ] Tabbed pages
-* [ ] Page layout and styling options 🚧
-
-### Extending
-
-* [x] Custom inspector panels 🚧
-* [ ] Custom param inputs
-* [ ] Custom tags
-* [ ] Lifecycle hooks
-* [ ] Global data store
-* [ ] Ruby API
-
-### Development
-
-* [x] Replace Parcel with PostCSS + esbuild for compiling assets
-* [x] Runnable, bundled demo app for development
-* [x] Minitest test suite setup
-* [x] Setup GH actions CI
-* [ ] Comprehensive set of test components + previews 🚧
-* [ ] UI integration tests 🚧
-* [ ] Set up Ruby & Rails versions test matrix via Appraisal
-* [ ] Release script (automate from GH?)
-
-### Internals
-
-* [x] Auto-mounting of Lookbook engine 🆕
-* [x] Remove ActionCable dependency, use SSE for triggering UI live updates 🆕 🧪
-* [x] File change detection system
-* [x] Config options defined in Ruby and not YAML
-* [x] Config options synced with ViewComponent where appropriate
-* [x] UUID-based permalink endpoint 🆕 🧪
-* [x] Improved logger implementation
-* [ ] Rationalise & document entity method names
-* [ ] Make debug logging more consitent
-* [ ] Improve parsing/tree building performance
-
-### Documentation
-
-* [ ] Switch to Nanoc for static docs building?
-* [ ] Document new features in v3 
-* [ ] Port and update existing docs to new docs site
-* [ ] Automate config option documentation via YARD
-* [ ] Automate API docs via YARD
-* [ ] Set up automated build & deploy process for docs
-
-### Other/Ideas/Maybe
-
-* [ ] CLI tool
-* [ ] JSON API
-
 ## License
 
 The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/app/components/lookbook/ui/app/router/router.html.erb

@@ -5,6 +5,7 @@
     "@click": "handleClick",
     "@lookbook:visit": "visit($event.detail.url)",
     "@lookbook:update": "updatePage",
+    "@error.window": "handleError",
     "@popstate.window": "visit(location, false)",
     "@visibilitychange.document": "handleVisibilityChange"
   }) do %>

data/app/components/lookbook/ui/app/router/router.js

@@ -7,6 +7,8 @@ export default AlpineComponent("router", (sseEndpoint = null) => {
   return {
     serverEventsListener: null,
     routerLogger: null,
+    lastUpdate: Date.now(),
+    morphing: false,
 
     init() {
       this.routerLogger = new Logger("Router");
@@ -29,6 +31,7 @@ export default AlpineComponent("router", (sseEndpoint = null) => {
       await this.updateDOM(location, "router", {
         headers: { "X-Lookbook-Frame": "root" },
       });
+      this.lastUpdate = Date.now();
       this.routerLogger.info(`Page updated`);
       this.$dispatch("page-update:complete");
     },
@@ -41,16 +44,34 @@ export default AlpineComponent("router", (sseEndpoint = null) => {
       if (updateHistory) {
         history.pushState({}, "", result.url);
       }
+      this.lastUpdate = Date.now();
       this.routerLogger.debug(`Page loaded`);
       this.$dispatch("page-load:complete");
     },
 
+    async handleError(error) {
+      if (this.morphing) {
+        const { stack } = error.error;
+        if (stack.indexOf("Alpine") >= 0) {
+          window.location.reload();
+        }
+      }
+    },
+
     async updateDOM(url, selector, options = {}) {
+      if (this.morphing) {
+        return;
+      }
+
       const result = await fetchHTML(url, selector, options);
       if (result.status < 500) {
+        this.morphing = true;
         document.dispatchEvent(new CustomEvent("morph:start"));
         Alpine.morph(document.querySelector(selector), result.fragment);
-        document.dispatchEvent(new CustomEvent("morph:complete"));
+        this.$nextTick(() => {
+          document.dispatchEvent(new CustomEvent("morph:complete"));
+          this.morphing = false;
+        });
       } else {
         location.href = url;
       }
@@ -69,8 +90,13 @@ export default AlpineComponent("router", (sseEndpoint = null) => {
       }
     },
 
-    handleVisibilityChange() {
-      if (this.serverEventsListener && !document.hidden) this.updatePage();
+    async handleVisibilityChange() {
+      if (this.serverEventsListener && !document.hidden) {
+        const response = await fetch(`${sseEndpoint}/ping`);
+        const lastServerUpdate = Date.parse(await response.text());
+
+        if (lastServerUpdate > this.lastUpdate) this.updatePage();
+      }
     },
 
     destroy() {

data/app/components/lookbook/ui/elements/nav/nav_item/nav_item.js

@@ -3,12 +3,14 @@ import { getData } from "@js/alpine/utils";
 
 export default AlpineComponent("navItem", ({ keywords, collection }) => {
   return {
+    key: null,
     keywords: [],
     isCollection: false,
     filteredOut: false,
     selected: false,
 
     init() {
+      this.key = this.$el.getAttribute("key");
       this.keywords = keywords || [];
       this.isCollection = collection || false;
       this.setSelectionState();
@@ -52,10 +54,6 @@ export default AlpineComponent("navItem", ({ keywords, collection }) => {
       return this.$root.getAttribute("data-url");
     },
 
-    get key() {
-      return this.$root.getAttribute("key");
-    },
-
     get expanded() {
       return (
         this.expandedItems && this.key && this.expandedItems.includes(this.key)

data/app/components/lookbook/ui/elements/viewport/viewport.css

@@ -53,6 +53,7 @@
     grid-template-columns: 1fr;
     grid-template-rows: 1fr;
     outline: 1px solid var(--lb-color-surface-divider);
+    background-color: var(--lb-viewport-background-color);
   }
 
   &.resize-x {

data/app/components/lookbook/ui/elements/viewport/viewport.html.erb

@@ -26,7 +26,6 @@
         class="viewport-window"
         :class="{inert}"
         src="<%= src %>"
-        <% if srcdoc.present? %>srcdoc="<%== srcdoc %>"<% end %>
         frameborder="0"
         title="viewport window"></iframe>
       <% if resize_x? %>

data/app/components/lookbook/ui/elements/viewport/viewport.rb

@@ -3,18 +3,13 @@ module Lookbook
     class Viewport < BaseComponent
       attr_reader :id, :src
 
-      def initialize(id:, src:, srcdoc: nil, resize_x: true, resize_y: true, **kwargs)
+      def initialize(id:, src:, resize_x: true, resize_y: true, **kwargs)
         @id = id
         @src = src
-        @srcdoc = srcdoc
         @resize_x = resize_x
         @resize_y = resize_y
       end
 
-      def srcdoc
-        @srcdoc&.gsub("&", "&amp;")&.gsub("\"", "&quot;")
-      end
-
       def resize_x? = @resize_x
 
       def resize_y? = @resize_y

data/app/components/lookbook/ui/previews/preview_embed/preview_embed.html.erb

@@ -25,7 +25,6 @@
 
       lb_viewport(
         target.preview_path(preview_params),
-        srcdoc: preview_html,
         id: "embed-viewport-#{target.name}",
         resize_y: false
       )
@@ -44,7 +43,7 @@
 
       panels.each do |panel|
         pane.with_tab_panel(panel.name, key: "embed-panel-#{target.name}-#{panel.name}", label: panel.label) do
-          render panel.partial, preview: preview, target: target, panel: panel
+          render panel.partial, preview: preview, target: target, panel: panel, preview_html: preview_html, **panel.locals
         end
       end
     end

data/app/components/lookbook/ui/previews/preview_embed/preview_embed.rb

@@ -1,22 +1,23 @@
 module Lookbook
   module UI
     class PreviewEmbed < BaseComponent
-      attr_reader :preview, :target, :targets, :panels, :display_options, :display_options_values, :preview_html
+      attr_reader :preview, :target, :targets, :panels, :preview_html, :display_options, :display_options_values
 
-      def initialize(preview:, target:, preview_html: nil, targets: [], panels: [], preview_params: {}, display_options: {}, display_options_values: {}, **kwargs)
+      def initialize(preview:, target:, targets: [], panels: [], preview_params: {}, preview_html: nil, display_options: {}, display_options_values: {}, **kwargs)
         @preview = preview
         @target = target
         @targets = targets
         @panels = panels
-        @preview_html = preview_html
         @preview_params = preview_params
+        @preview_html = preview_html
         @display_options = display_options
         @display_options_values = display_options_values
       end
 
       def preview_params
         @preview_params.merge({
-          _lookbook_embed: true
+          _lookbook_embed: true,
+          checksum: helpers.checksum(preview_html)
         })
       end
     end

data/app/components/lookbook/ui/previews/preview_inspector/preview_inspector.html.erb

@@ -40,7 +40,7 @@
 
           preview_panels.each do |panel|
             pane.with_tab_panel(panel.name, key: "inspector-panel-#{@target.name}-#{panel.name}", label: panel.label) do
-              render panel.partial, preview: preview, target: target, panel: panel, **panel.locals
+              render panel.partial, preview: preview, target: target, panel: panel, preview_html: preview_html, **panel.locals
             end
           end
         end
@@ -60,7 +60,7 @@
       
         drawer_panels.each do |panel|
           pane.with_tab_panel(panel.name, key: "inspector-panel-#{@target.name}-#{panel.name}", label: panel.label) do
-            render panel.partial, preview: preview, target: target, panel: panel, **panel.locals
+            render panel.partial, preview: preview, target: target, panel: panel, preview_html: preview_html, **panel.locals
           end
         end
       end

data/app/components/lookbook/ui/previews/preview_inspector/preview_inspector.rb

@@ -1,13 +1,14 @@
 module Lookbook
   module UI
     class PreviewInspector < BaseComponent
-      attr_reader :preview, :target, :preview_url, :preview_panels, :drawer_panels, :display_options, :display_options_values
+      attr_reader :preview, :target, :preview_url, :preview_panels, :preview_html, :drawer_panels, :display_options, :display_options_values
 
-      def initialize(preview:, target:, preview_url:, preview_panels: [], drawer_panels: [], display_options: {}, display_options_values: {}, **kwargs)
+      def initialize(preview:, target:, preview_url:, preview_panels: [], preview_html: nil, drawer_panels: [], display_options: {}, display_options_values: {}, **kwargs)
         @preview = preview
         @target = target
         @preview_url = preview_url
         @preview_panels = preview_panels
+        @preview_html = preview_html
         @drawer_panels = drawer_panels
         @display_options = display_options
         @display_options_values = display_options_values

data/app/controllers/lookbook/events_controller.rb

@@ -30,5 +30,9 @@ module Lookbook
 
       head :ok
     end
+
+    def ping
+      render html: Engine.updated_at
+    end
   end
 end

data/app/controllers/lookbook/previews_controller.rb

@@ -39,7 +39,7 @@ module Lookbook
       @targets = @preview.inspector_targets.select { _1.name.to_sym.in?(target_names) }
       @panels = Inspector.embed_panels(embed_params[:panels], **panel_context)
       @actions = embed_params.fetch(:actions, [])
-      @preview_html = render_target_in_layout(@target, embed: true)
+      @preview_html = render_target_in_layout(@target)
 
       render layout: "lookbook/embed"
     end

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

@@ -1,6 +1,6 @@
 <% content_for :body do %>
   <%= render Lookbook::UI::Router.new do %>
-    <%= yield %>    
+    <%= tag.main { yield } %>
   <% end %>
 <% end %>
 

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

@@ -1,7 +1,6 @@
 <%=
   lb_viewport(
-    target.preview_path(request.query_parameters),
-    srcdoc: @preview_html,
+    target.preview_path(request.query_parameters.merge({checksum: checksum(preview_html)})),
     id: "preview-viewport",
   ) 
 %>

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

@@ -1,12 +1,12 @@
 <%=
   render Lookbook::UI::PreviewEmbed.new(
     preview: @preview,
-    preview_html: @preview_html,
     target: @target,
     targets: @targets,
     panels: @panels,
     actions: @actions,
     preview_params: request.query_parameters,
+    preview_html: @preview_html,
     display_options: @inspector.dynamic_display_options,
     display_options_values: @display_options
   )

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

@@ -2,6 +2,7 @@
   render Lookbook::UI::PreviewInspector.new(
     preview: @preview,
     target: @target,
+    preview_html: @preview_html,
     preview_panels: @preview_panels,
     drawer_panels: @drawer_panels,
     display_options: @inspector.dynamic_display_options,

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

@@ -5,7 +5,11 @@
     <%= render(@render_args[:component], @render_args[:args], &@render_args[:block]) %>
   <% end %>
 <% elsif @render_args[:email] %>
-  <%= raw(@render_args[:email].decoded) %>
+  <% if @render_args[:email].multipart? %>
+    <%= raw(@render_args[:email].html_part.decoded) %>
+  <% else %>
+    <%= raw(@render_args[:email].decoded) %>
+  <% end %>
 <% else %>
   <%= render(@render_args[:template], **@render_args[:locals], &@render_args[:block]) %>
 <% end %>

data/config/initializers/05_autoload_previews.rb

@@ -1,5 +1,5 @@
-if Lookbook::Engine.enabled? && Lookbook.config.preview_paths.any?
-  paths_to_add = Lookbook.config.preview_paths - ActiveSupport::Dependencies.autoload_paths
+if Lookbook::Engine.enabled? && Lookbook::Previews.preview_paths.any?
+  paths_to_add = Lookbook::Previews.preview_paths - ActiveSupport::Dependencies.autoload_paths
   filtered_paths = paths_to_add.filter { |p| !Lookbook::Engine.component_paths.include?(p) }
   ActiveSupport::Dependencies.autoload_paths.concat(filtered_paths) if filtered_paths.any?
 end

data/config/routes.rb

@@ -14,7 +14,8 @@ if Lookbook::Engine.enabled?
 
     get "/embed", to: "embeds#show", as: :embed
 
-    resources :events, only: [:index]
+    get "/events", to: "events#index", as: :events
+    get "/events/ping", to: "events#ping", as: :ping
 
     match "*path", to: "application#not_found", via: :all
   end

data/lib/lookbook/concerns/feature_checks.rb

@@ -0,0 +1,17 @@
+module Lookbook
+  module FeatureChecks
+    extend ActiveSupport::Concern
+
+    def view_component_available?
+      @has_view_component ||= Utils.gem_installed?("view_component")
+    end
+
+    def listen_available?
+      @has_listen ||= Utils.gem_installed?("listen") && defined?(::Listen)
+    end
+
+    def action_mailer_available?
+      @has_action_mailer ||= !!defined?(::ActionMailer)
+    end
+  end
+end

data/lib/lookbook/config.rb

@@ -14,7 +14,7 @@ module Lookbook
           preview_layout: nil,
           preview_url_param: :name,
           preview_overview_template: "lookbook/previews/overview",
-          preview_paths: ["test/components/previews", "test/mailers/previews"],
+          preview_paths: ["lookbook/previews", "test/components/previews"],
           preview_watch_paths: [],
           preview_watch_extensions: ["rb", "html.*"],
           preview_display_options: {},
@@ -38,7 +38,7 @@ module Lookbook
           inspector_param_inputs: default_inspector_param_inputs,
 
           page_route: "pages",
-          page_paths: ["test/components/docs"],
+          page_paths: ["lookbook/docs", "test/components/docs"],
           page_extensions: ["md", "html.*", "md.*"],
           page_watch_paths: [],
           page_watch_extensions: [],
@@ -128,7 +128,6 @@ module Lookbook
           Lookbook::LabelTag,
           Lookbook::LocationTag,
           Lookbook::ParamTag,
-          Lookbook::PriorityTag,
           Lookbook::StatusTag
         ]
       end