navapbc · lorenyu · Apr 30, 2025 · Apr 30, 2025 · Apr 30, 2025 · Apr 30, 2025
diff --git a/app-rails/Gemfile b/app-rails/Gemfile
@@ -71,6 +71,8 @@ gem "faraday"
 # Create fake data (outside of dev/test block to support seeding lower environments)
 gem "faker", "~> 3.2"
 
+gem "lookbook", ">= 2.3.9"
+
 group :development, :test do
   gem "guard-rspec", require: false
 
@@ -83,6 +85,10 @@ group :development, :test do
   # Testing framework
   gem "factory_bot_rails"
   gem "rspec-rails", "~> 6.1.0"
+
+  # Required by Lookbook
+  gem "listen"
+  gem "actioncable"
 end
 
 group :development do

diff --git a/app-rails/Gemfile.lock b/app-rails/Gemfile.lock
@@ -132,6 +132,8 @@ GEM
     concurrent-ruby (1.3.5)
     connection_pool (2.5.0)
     crass (1.0.6)
+    css_parser (1.21.1)
+      addressable
     cssbundling-rails (1.4.1)
       railties (>= 6.0.0)
     date (3.4.1)
@@ -191,6 +193,8 @@ GEM
       guard (~> 2.1)
       guard-compat (~> 1.1)
       rspec (>= 2.99.0, < 4.0)
+    htmlbeautifier (1.4.3)
+    htmlentities (4.3.4)
     i18n (1.14.7)
       concurrent-ruby (~> 1.0)
     importmap-rails (2.1.0)
@@ -224,6 +228,18 @@ GEM
     loofah (2.24.0)
       crass (~> 1.0.2)
       nokogiri (>= 1.12.0)
+    lookbook (2.3.9)
+      activemodel
+      css_parser
+      htmlbeautifier (~> 1.3)
+      htmlentities (~> 4.3.4)
+      marcel (~> 1.0)
+      railties (>= 5.0)
+      redcarpet (~> 3.5)
+      rouge (>= 3.26, < 5.0)
+      view_component (>= 2.0)
+      yard (~> 0.9)
+      zeitwerk (~> 2.5)
     lumberjack (1.2.10)
     mail (2.8.1)
       mini_mime (>= 0.1.1)
@@ -351,13 +367,15 @@ GEM
       ffi (~> 1.0)
     rdoc (6.12.0)
       psych (>= 4.0.0)
+    redcarpet (3.6.1)
     regexp_parser (2.10.0)
     reline (0.6.0)
       io-console (~> 0.5)
     responders (3.1.1)
       actionpack (>= 5.2)
       railties (>= 5.2)
     rexml (3.4.1)
+    rouge (4.5.2)
     route_translator (14.2.0)
       actionpack (>= 6.1)
       activesupport (>= 6.1)
@@ -456,6 +474,10 @@ GEM
     unicode-emoji (4.0.4)
     uri (1.0.3)
     useragent (0.16.11)
+    view_component (3.21.0)
+      activesupport (>= 5.2.0, < 8.1)
+      concurrent-ruby (~> 1.0)
+      method_source (~> 1.0)
     warden (1.2.9)
       rack (>= 2.0.9)
     web-console (4.2.1)
@@ -470,6 +492,7 @@ GEM
     websocket-extensions (0.1.5)
     xpath (3.2.0)
       nokogiri (~> 1.8)
+    yard (0.9.37)
     zeitwerk (2.7.2)
 
 PLATFORMS
@@ -489,6 +512,7 @@ PLATFORMS
   x86_64-linux-musl
 
 DEPENDENCIES
+  actioncable
   active_storage_validations
   aws-sdk-cognitoidentityprovider (~> 1.88)
   aws-sdk-rails
@@ -507,6 +531,8 @@ DEPENDENCIES
   jbuilder
   jwt
   letter_opener
+  listen
+  lookbook (>= 2.3.9)
   pg (~> 1.1)
   pg-aws_rds_iam (~> 0.7.0)
   puma (>= 5.0)

diff --git a/app-rails/app/previews/breadcrumbs_preview.rb b/app-rails/app/previews/breadcrumbs_preview.rb
@@ -0,0 +1,9 @@
+class BreadcrumbsPreview < Lookbook::Preview
+  layout "component_preview"
+
+  def default
+    render template: "application/_breadcrumbs", locals: { crumbs: [
+      { name: "Passport applications", url: "https://google.com" },
+      ], current_name: "New passport application" } 
+  end
+end
diff --git a/app-rails/app/views/application/_header.html.erb b/app-rails/app/views/application/_header.html.erb
@@ -29,12 +29,12 @@
             <% end %>
 
           <li class="usa-nav__primary-item">
-            <%= render partial: "language-toggle", locals: { container_class: "display-block desktop:display-none relative" } %>
+            <%= render partial: "application/language-toggle", locals: { container_class: "display-block desktop:display-none relative" } %>
           </li>
         </ul>
       </div>
     </nav>
 
-    <%= render partial: "language-toggle", locals: { container_class: "usa-language-container display-none desktop:display-block" } %>
+    <%= render partial: "application/language-toggle", locals: { container_class: "usa-language-container display-none desktop:display-block" } %>
   </div>
-</header>
+</header>
diff --git a/app-rails/app/views/layouts/application.html.erb b/app-rails/app/views/layouts/application.html.erb
@@ -20,13 +20,13 @@
 
   <body>
     <div class="display-flex flex-column minh-viewport">
-      <%= render partial: 'header' %>
+      <%= render partial: 'application/header' %>
 
       <main id="main-content" class="grid-col-fill display-flex flex-column">
         <div class="grid-col-fill <%= yield :main_col_class %>">
           <section class="usa-section">
             <div class="grid-container">
-              <%= render partial: 'flash' %>
+              <%= render partial: 'application/flash' %>
 
               <div class="grid-row grid-gap">
                 <%= yield :before_content_col %>

diff --git a/app-rails/app/views/layouts/component_preview.html.erb b/app-rails/app/views/layouts/component_preview.html.erb
@@ -0,0 +1,35 @@
+<%# Top-level layout for all pages in the application %>
+<!DOCTYPE html>
+<html lang="<%= I18n.locale %>">
+  <head>
+    <title>
+      <%= content_for?(:title) ? "#{ yield(:title) } | #{ t('header.title') }" : t("header.title") %>
+    </title>
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <%= csrf_meta_tags %>
+    <%= csp_meta_tag %>
+
+    <%= favicon_link_tag asset_path('@uswds/uswds/dist/img/us_flag_small.png') %>
+
+    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
+    <%= yield :head %>
+
+    <%= javascript_importmap_tags %>
+    <%= javascript_include_tag '@uswds/uswds/dist/js/uswds-init.min.js' %>
+  </head>
+
+  <body>
+    <div class="display-flex flex-column minh-viewport">
+      <main id="main-content" class="grid-col-fill display-flex flex-column">
+        <div class="grid-col-fill <%= yield :main_col_class %>">
+          <div class="grid-container">
+            <%= content_for?(:content) ? yield(:content) : yield %>
+          </div>
+        </div>
+      </main>
+    </div>
+
+    <%= javascript_include_tag '@uswds/uswds/dist/js/uswds.min.js' %>
+    <%= yield :scripts %>
+  </body>
+</html>
diff --git a/app-rails/config/initializers/lookbook.rb b/app-rails/config/initializers/lookbook.rb
@@ -0,0 +1,3 @@
+Rails.application.configure do
+  config.lookbook.preview_paths = [Rails.root.join("app", "previews"),]
+end
diff --git a/app-rails/config/routes.rb b/app-rails/config/routes.rb
@@ -7,6 +7,8 @@
   # Keep the default /up rails endpoint.
   get "up" => "rails/health#show"
 
+  mount Lookbook::Engine, at: "/lookbook" if ENV["ENABLE_LOOKBOOK"].present?
+
   # Support locale prefixes for these routes:
   localized do
     # Defines the root path route ("/")

diff --git a/app-rails/local.env.example b/app-rails/local.env.example
@@ -42,3 +42,9 @@ DB_HOST=127.0.0.1
 DB_NAME=app
 DB_USER=app
 DB_PASSWORD=secret123
+
+############################
+# Lookbook
+############################
+
+ENABLE_LOOKBOOK=true
diff --git a/infra/app/app-config/dev.tf b/infra/app/app-config/dev.tf
@@ -23,6 +23,10 @@ module "dev_config" {
   # Defaults to `false`. Uncomment the next line to enable.
   # enable_command_execution = true
 
+  service_override_extra_environment_variables = {
+    ENABLE_LOOKBOOK = "true"
+  }
+
   # Uncomment to override default feature flag values
   feature_flag_overrides = {
     BAR = true