Add enhanced view component preview support pages

app/controllers/support/view_components_controller.rb

@@ -0,0 +1,58 @@
+# frozen_string_literal: true
+
+module Support
+  class ViewComponentsController < ApplicationController
+    include ViewComponent::PreviewActions
+
+    helper_method :shared_component_previews, :find_component_previews, :publish_component_previews
+
+    def index
+      @previews = case params[:namespace]
+                  when 'find'
+                    find_component_previews
+                  when 'publish'
+                    publish_component_previews
+                  else
+                    shared_component_previews
+                  end
+
+      @previews.sort_by!(&:name)
+
+      render :index
+    end
+
+    def previews
+      find_preview
+
+      if params[:path] == @preview.preview_name
+        @page_title = "Component Previews for #{@preview.preview_name}"
+        render :previews, **determine_layout
+      else
+        prepend_application_view_paths
+        prepend_preview_examples_view_path
+        @example_name = File.basename(params[:path])
+        @render_args = @preview.render_args(@example_name, params: params.permit!)
+        layout = determine_layout(@render_args[:layout], prepend_views: false)[:layout]
+        locals = @render_args[:locals]
+        opts = {}
+        opts[:layout] = layout if layout.present? || layout == false
+        opts[:locals] = locals if locals.present?
+        render :preview, opts
+      end
+    end
+
+    private
+
+    def shared_component_previews
+      @shared_component_previews ||= ViewComponent::Preview.all.reject { |preview| preview.name.deconstantize.split('::')[0].in?(%w[Find Publish]) }
+    end
+
+    def find_component_previews
+      @find_component_previews ||= ViewComponent::Preview.all.filter { |preview| preview.name.deconstantize.split('::')[0] == 'Find' }
+    end
+
+    def publish_component_previews
+      @publish_component_previews ||= ViewComponent::Preview.all.filter { |preview| preview.name.deconstantize.split('::')[0] == 'Publish' }
+    end
+  end
+end

app/views/support/view_components/index.html.erb

@@ -0,0 +1,23 @@
+<div class="govuk-width-container">
+  <h1 class="govuk-heading-l">Find and Publish Components</h1>
+
+  <p class="govuk-body">
+    Below are view components used in Find and Publish.
+    These act as larger building blocks used to build pages specific to the Find and Publish services leveraging the <%= govuk_link_to("GOV.UK Design System", "https://design-system.service.gov.uk/") %> and the <%= govuk_link_to("GOV.UK components gem", "https://github.com/DFE-Digital/govuk-components") %>
+  </p>
+
+  <%= render SecondaryNavigationComponent.new do |secondary_navigation| %>
+    <% secondary_navigation.with_navigation_item "Shared components", support_view_components_path, current: params[:namespace].nil? %>
+    <% secondary_navigation.with_navigation_item "Find components", support_view_components_path(namespace: "find") %>
+    <% secondary_navigation.with_navigation_item "Publish components", support_view_components_path(namespace: "publish") %>
+  <% end %>
+
+  <% @previews.each do |preview| %>
+    <h2 class="govuk-heading-m"><%= link_to preview.preview_name.titleize, preview_view_component_path(preview.preview_name) %></h2>
+    <ul class="govuk-list">
+      <% preview.examples.each do |preview_example| %>
+        <li><%= govuk_link_to preview_example, preview_view_component_path("#{preview.preview_name}/#{preview_example}") %></li>
+      <% end %>
+    </ul>
+  <% end %>
+</div>

app/views/support/view_components/preview.html.erb

@@ -0,0 +1,22 @@
+<% content_for :page_title, params[:path] %>
+<% content_for :before_content do %>
+  <%= govuk_back_link_to(support_view_components_path) %>
+<% end %>
+
+<div class="govuk-width-container">
+  <h1 class="govuk-heading-l"><%= @preview.preview_name.classify %></h1>
+
+  <% if @render_args[:component] %>
+    <% if ViewComponent::Base.config.render_monkey_patch_enabled || Rails.version.to_f >= 6.1 %>
+      <%= render(@render_args[:component], @render_args[:args], &@render_args[:block]) %>
+    <% else %>
+      <%= render_component(@render_args[:component], &@render_args[:block]) %>
+    <% end %>
+  <% else %>
+    <%= render template: @render_args[:template], locals: @render_args[:locals] || {} %>
+  <% end %>
+
+  <% if ViewComponent::Base.config.show_previews_source %>
+    <%= preview_source %>
+  <% end %>
+</div>

app/views/support/view_components/previews.html.erb

@@ -0,0 +1,11 @@
+<% content_for :page_title, params[:path] %>
+<% content_for :before_content do %>
+  <%= govuk_back_link_to(support_view_components_path) %>
+<% end %>
+
+<h3><%= @preview.preview_name.titleize %></h3>
+<ul>
+  <% @preview.examples.each do |example| %>
+    <li><%= link_to example, preview_view_component_path("#{@preview.preview_name}/#{example}") %></li>
+  <% end %>
+</ul>

config/application.rb

@@ -61,9 +61,7 @@ class Application < Rails::Application
 
     config.view_component.preview_paths = [Rails.root.join('spec/components')]
     config.view_component.preview_route = '/support/view_components'
-    config.view_component.default_preview_layout = 'component_preview'
-    config.view_component.preview_controller = 'Support::ComponentPreviewsController'
-    config.view_component.show_previews = !Rails.env.production?
+    config.view_component.preview_controller = 'Support::ViewComponentsController'
 
     config.analytics = config_for(:analytics)
 

config/locales/en/support/view_components.yml

@@ -0,0 +1,5 @@
+en:
+  support:
+    view_components:
+      index:
+        page_title: Find and Publish Components

config/routes.rb

@@ -19,8 +19,4 @@
     draw(:support)
     draw(:api)
   end
-
-  direct :publish_support_view_component_previews, path_only: true do
-    Rails.application.config.view_component.preview_route
-  end
 end

config/routes/support.rb

@@ -74,4 +74,6 @@
   end
 
   resources :user_permissions, only: %i[destroy]
+
+  resources :view_components, only: %i[index]
 end