Lookbook setup fixes

Author: etewiah

app/views/lookbook/previews/_preview.html.erb

@@ -0,0 +1 @@
+<%= yield %>

config/initializers/lookbook.rb

@@ -2,20 +2,14 @@
 
 # Lookbook configuration for component previews
 # See: https://lookbook.build/guide/configuration
+#
+# NOTE: Configuration must be set via Rails.application.config.lookbook
+# BEFORE the app initializes, so Lookbook's engine uses the correct paths.
 
 if Rails.env.development?
-  # Load preview helper first (defines namespaces like Atoms, Molecules, etc.)
-  require Rails.root.join("spec/components/previews/preview_helper")
-
-  preview_path = Rails.root.join("spec/components/previews")
-
-  # Configure ViewComponent preview paths (required for Lookbook to discover previews)
-  Rails.application.config.view_component.preview_paths = [preview_path]
-
-  # Configure Lookbook preview paths
-  if defined?(Lookbook)
-    Lookbook.configure do |config|
-      config.preview_paths = [preview_path]
-    end
+  Rails.application.configure do
+    config.lookbook.preview_paths = [
+      Rails.root.join("spec/components/previews").to_s
+    ]
   end
 end

spec/components/previews/atoms.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+# Namespace for atomic design "atoms" - basic building blocks
+module Atoms
+end

spec/components/previews/atoms/skeleton_preview.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+# Namespace for atomic design "molecules" - combinations of atoms
+module Molecules
+end

spec/components/previews/molecules.rb

@@ -6,45 +6,30 @@ class PaginationPreview < Lookbook::Preview
   # First page pagination
   # @label First Page
   def first_page
-    render inline: <<~ERB
-      <div style="padding: 2rem; background: #f5f5f5;">
-        <h3 style="margin-bottom: 1rem;">Pagination - Page 1 of 10</h3>
-        <%= render partial: "shared/pagination", locals: { 
-          current_page: 1, 
-          total_pages: 10,
-          base_path: "/properties" 
-        } %>
-      </div>
-    ERB
+    render partial: "shared/pagination", locals: {
+      current_page: 1,
+      total_pages: 10,
+      base_path: "/properties"
+    }
   end
 
   # Middle page pagination
   # @label Middle Page
   def middle_page
-    render inline: <<~ERB
-      <div style="padding: 2rem; background: #f5f5f5;">
-        <h3 style="margin-bottom: 1rem;">Pagination - Page 5 of 10</h3>
-        <%= render partial: "shared/pagination", locals: { 
-          current_page: 5, 
-          total_pages: 10,
-          base_path: "/properties" 
-        } %>
-      </div>
-    ERB
+    render partial: "shared/pagination", locals: {
+      current_page: 5,
+      total_pages: 10,
+      base_path: "/properties"
+    }
   end
 
   # Last page pagination
   # @label Last Page
   def last_page
-    render inline: <<~ERB
-      <div style="padding: 2rem; background: #f5f5f5;">
-        <h3 style="margin-bottom: 1rem;">Pagination - Page 10 of 10</h3>
-        <%= render partial: "shared/pagination", locals: { 
-          current_page: 10, 
-          total_pages: 10,
-          base_path: "/properties" 
-        } %>
-      </div>
-    ERB
+    render partial: "shared/pagination", locals: {
+      current_page: 10,
+      total_pages: 10,
+      base_path: "/properties"
+    }
   end
 end