LG-8349: Move AddressSearch component into own package

app/assets/stylesheets/_required.scss → app/assets/stylesheets/_uswds-core.scss

@@ -1,4 +1,8 @@
-@use 'uswds-core' with (
+// Prevent USWDS from rendering `@font-face` in every stylesheet. One stylesheet should override
+// this to ensure that the `@font-face` is defined at least once.
+$render-font-face: false !default;
+
+@forward '@18f/identity-design-system/packages/uswds-core' with (
   $theme-body-font-size: 'sm',
   $theme-font-path: '.',
   $theme-image-path: '@18f/identity-design-system/dist/assets/img',
@@ -8,6 +12,21 @@
   $theme-header-min-width: 'tablet',
   $theme-link-visited-color: 'primary',
   $theme-style-body-element: true,
+  $theme-typeface-tokens:
+    if(
+      $render-font-face,
+      (),
+      (
+        'roboto-mono': (
+          cap-height: 380px,
+          src: false,
+        ),
+        'public-sans': (
+          cap-height: 362px,
+          src: false,
+        ),
+      )
+    ),
   $output-these-utilities: (
     'add-list-reset',
     'align-items',

app/assets/stylesheets/_uswds.scss

@@ -24,7 +24,6 @@
 @forward 'usa-skipnav';
 @forward 'usa-step-indicator';
 @forward 'usa-tag';
-@forward 'usa-tooltip';
 @forward 'usa-verification-badge';
 @forward 'uswds-form-controls';
 @forward 'uswds-utilities';

app/assets/stylesheets/application.css.scss

@@ -1,4 +1,6 @@
-@forward 'required';
+@forward 'uswds-core' with (
+  $render-font-face: true
+);
 @forward 'uswds';
 @forward 'design-system-waiting-room';
 @forward 'components/all';

app/assets/stylesheets/components/all.scss

@@ -29,6 +29,5 @@
 @import 'spinner-button';
 @import 'spinner-dots';
 @import 'step-indicator';
-@import 'tooltip';
 @import 'troubleshooting-options';
 @import 'memorable-date';

app/assets/stylesheets/document-capture.css.scss

@@ -1,2 +1,2 @@
-@forward 'required';
+@forward 'uswds-core';
 @forward '../../javascript/packages/document-capture/styles';

app/assets/stylesheets/email.css.scss

@@ -1,4 +1,3 @@
-@forward 'required';
 @use 'uswds-core' as *;
 @import 'variables/app';
 @import 'variables/email';

app/components/base_component.rb

@@ -1,21 +1,48 @@
 class BaseComponent < ViewComponent::Base
   def before_render
-    return if @rendered_scripts
-    @rendered_scripts = true
-    if helpers.respond_to?(:enqueue_component_scripts) && self.class.scripts.present?
-      helpers.enqueue_component_scripts(*self.class.scripts)
-    end
+    render_assets unless rendered_assets?
   end
 
   def self.scripts
     @scripts ||= begin
-      scripts = sidecar_files(['js', 'ts']).map { |file| File.basename(file, '.*') }
+      scripts = sidecar_files_basenames(['js', 'ts'])
       scripts.concat superclass.scripts if superclass.respond_to?(:scripts)
       scripts
     end
   end
 
+  def self.stylesheets
+    @stylesheets ||= begin
+      stylesheets = sidecar_files_basenames(['scss'])
+      stylesheets.concat superclass.stylesheets if superclass.respond_to?(:stylesheets)
+      stylesheets
+    end
+  end
+
   def unique_id
     @unique_id ||= SecureRandom.hex(4)
   end
+
+  private
+
+  attr_accessor :rendered_assets
+  alias_method :rendered_assets?, :rendered_assets
+
+  class << self
+    def sidecar_files_basenames(extensions)
+      sidecar_files(extensions).map { |file| File.basename(file, '.*') }
+    end
+  end
+
+  def render_assets
+    if helpers.respond_to?(:enqueue_component_scripts) && self.class.scripts.present?
+      helpers.enqueue_component_scripts(*self.class.scripts)
+    end
+
+    if helpers.respond_to?(:enqueue_component_stylesheets) && self.class.stylesheets.present?
+      helpers.enqueue_component_stylesheets(*self.class.stylesheets)
+    end
+
+    @rendered_assets = true
+  end
 end

app/assets/stylesheets/components/_tooltip.scss → app/components/clipboard_button_component.scss

@@ -1,4 +1,5 @@
 @use 'uswds-core' as *;
+@forward 'usa-tooltip';
 
 // Workaround for tooltip styles affecting icon button appearance.
 // See: https://github.com/uswds/uswds/pull/5263

app/controllers/component_preview_controller.rb

@@ -3,8 +3,12 @@ class ComponentPreviewController < ViewComponentsController
     include ActionView::Helpers::AssetTagHelper
     helper Lookbook::PreviewHelper
     include ScriptHelper
+    include StylesheetHelper
 
     helper_method :enqueue_component_scripts
     alias_method :enqueue_component_scripts, :render_javascript_pack_once_tags
+
+    helper_method :enqueue_component_stylesheets
+    alias_method :enqueue_component_stylesheets, :render_stylesheet_once_tags
   end
 end

app/helpers/stylesheet_helper.rb

@@ -0,0 +1,17 @@
+# rubocop:disable Rails/HelperInstanceVariable
+module StylesheetHelper
+  def stylesheet_tag_once(*names)
+    @stylesheets ||= []
+    @stylesheets |= names
+    nil
+  end
+
+  alias_method :enqueue_component_stylesheets, :stylesheet_tag_once
+
+  def render_stylesheet_once_tags(*names)
+    stylesheet_tag_once(*names) if names.present?
+    return if @stylesheets.blank?
+    safe_join(@stylesheets.map { |stylesheet| stylesheet_link_tag(stylesheet) })
+  end
+end
+# rubocop:enable Rails/HelperInstanceVariable

app/javascript/packages/address-search/CHANGELOG.md

@@ -0,0 +1,5 @@
+# `Change Log`
+
+## 1.0.0
+
+- Initial release

app/javascript/packages/address-search/LICENSE.md

@@ -0,0 +1,21 @@
+# License
+
+As a work of the [United States government](https://www.usa.gov/), this project is in the public domain within the United States of America.
+
+Additionally, we waive copyright and related rights in the work worldwide through the CC0 1.0 Universal public domain dedication.
+
+## CC0 1.0 Universal Summary
+
+This is a human-readable summary of the [Legal Code (read the full text)](https://creativecommons.org/publicdomain/zero/1.0/legalcode).
+
+### No Copyright
+
+The person who associated a work with this deed has dedicated the work to the public domain by waiving all of their rights to the work worldwide under copyright law, including all related and neighboring rights, to the extent allowed by law.
+
+You can copy, modify, distribute, and perform the work, even for commercial purposes, all without asking permission.
+
+### Other Information
+
+In no way are the patent or trademark rights of any person affected by CC0, nor are the rights that other persons may have in the work or in how the work is used, such as publicity or privacy rights.
+
+Unless expressly stated otherwise, the person who associated a work with this deed makes no warranties about the work, and disclaims liability for all uses of the work, to the fullest extent permitted by applicable law. When using or citing the work, you should not imply endorsement by the author or the affirmer.

app/javascript/packages/address-search/README.md

@@ -0,0 +1,42 @@
+# `@18f/identity-address-search`
+
+This is a npm module that provides a React UI component to search for USPS (United States Postal Service) locations using the ArcGIS API. It allows you to retrieve USPS location information based on a full address.
+
+Additionally, this module depends on existing backend services from the Login.gov project. Make sure to have the required backend services or mock services set up and running before using this module.
+
+## Installation
+
+You can install this module using npm:
+
+```shell
+npm install @18f/identity-address-search
+```
+
+## Usage
+
+To use this component, provide callbacks to it for desired behaviors.
+
+```typescript jsx
+import AddressSearch from '@18f/identity-address-search';
+
+// Render UI component
+
+return(
+    <>
+    <AddressSearch
+            registerField={registerFieldCallback}
+            onFoundAddress={setFoundAddressCallback}
+            onFoundLocations={setLocationResultsCallback}
+            onLoadingLocations={setLoadingLocationsCallback}
+            onError={setApiErrorCallback}
+            disabled={disabledAddressSearchCallback}
+          />
+    </>
+);
+```
+
+## License
+
+This project is in the public domain within the United States, and copyright and related rights in the work worldwide are waived through the [CC0 1.0 Universal public domain dedication](https://creativecommons.org/publicdomain/zero/1.0/).
+
+All contributions to this project will be released under the CC0 dedication. By submitting a pull request or issue, you are agreeing to comply with this waiver of copyright interest.

app/javascript/packages/document-capture/components/address-search.spec.tsx → app/javascript/packages/address-search/index-spec.tsx

@@ -5,7 +5,7 @@ import { setupServer } from 'msw/node';
 import { rest } from 'msw';
 import type { SetupServer } from 'msw/node';
 import { SWRConfig } from 'swr';
-import AddressSearch, { ADDRESS_SEARCH_URL, LOCATIONS_URL } from './address-search';
+import AddressSearch, { ADDRESS_SEARCH_URL, LOCATIONS_URL } from '.';
 
 const DEFAULT_RESPONSE = [
   {

app/javascript/packages/document-capture/components/address-search.tsx → app/javascript/packages/address-search/index.tsx

@@ -7,10 +7,21 @@ import SpinnerButton, { SpinnerButtonRefHandle } from '@18f/identity-spinner-but
 import type { RegisterFieldCallback } from '@18f/identity-form-steps';
 import useSWR from 'swr/immutable';
 import { useDidUpdateEffect } from '@18f/identity-react-hooks';
-import { FormattedLocation } from './in-person-locations';
 
 export const LOCATIONS_URL = '/verify/in_person/usps_locations';
 
+export interface FormattedLocation {
+  formattedCityStateZip: string;
+  distance: string;
+  id: number;
+  name: string;
+  saturdayHours: string;
+  streetAddress: string;
+  sundayHours: string;
+  weekdayHours: string;
+  isPilot: boolean;
+}
+
 export interface PostOffice {
   address: string;
   city: string;

app/javascript/packages/address-search/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@18f/identity-address-search",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/18f/identity-idp.git",
+    "directory": "app/javascript/packages/address-search"
+  },
+  "files": [
+    "index.tsx"
+  ],
+  "license": "CC0-1.0",
+  "bugs": {
+    "url": "https://github.com/18f/identity-idp/issues"
+  },
+  "homepage": "https://github.com/18f/identity-idp",
+  "dependencies": {
+    "swr": "^2.0.0"
+  },
+  "peerDependencies": {
+    "react": "^17.0.2"
+  }
+}

app/javascript/packages/build-sass/CHANGELOG.md

@@ -1,3 +1,11 @@
+## Unreleased
+
+### Breaking Changes
+
+- Changed priority for how load paths are used when resolving modules. The net effect is that any `--load-path` should take highest priority over those provided as defaults.
+  - Before: (1) `node_modules`, (2) default load paths, (3) custom `--load-path` load paths
+  - After: (1) custom `--load-path` load paths, (2) default load paths, (3) `node_modules`
+
 ## 1.3.0
 
 ### Improvements

app/javascript/packages/build-sass/cli.js

@@ -28,7 +28,7 @@ const { values: flags, positionals: fileArgs } = parseArgs({
 
 const isWatching = flags.watch;
 const outDir = flags['out-dir'];
-const loadPaths = [...getDefaultLoadPaths(), ...flags['load-path']];
+const loadPaths = [...flags['load-path'], ...getDefaultLoadPaths()];
 
 /** @type {BuildOptions & SyncSassOptions} */
 const options = { outDir, loadPaths, optimize: isProduction };

app/javascript/packages/build-sass/index.js

@@ -31,7 +31,7 @@ export async function buildFile(file, options) {
   const sassResult = sass.compile(file, {
     style: optimize ? 'compressed' : 'expanded',
     ...sassOptions,
-    loadPaths: ['node_modules', ...loadPaths],
+    loadPaths: [...loadPaths, 'node_modules'],
     quietDeps: true,
   });
 

app/javascript/packages/document-capture/components/in-person-location-post-office-search-step.spec.tsx

@@ -6,8 +6,8 @@ import { rest } from 'msw';
 import type { SetupServer } from 'msw/node';
 import { SWRConfig } from 'swr';
 import { I18nContext } from '@18f/identity-react-i18n';
+import { ADDRESS_SEARCH_URL, LOCATIONS_URL } from '@18f/identity-address-search';
 import { ComponentType } from 'react';
-import { ADDRESS_SEARCH_URL, LOCATIONS_URL } from './address-search';
 import InPersonLocationPostOfficeSearchStep from './in-person-location-post-office-search-step';
 
 const DEFAULT_RESPONSE = [

app/javascript/packages/document-capture/components/in-person-location-post-office-search-step.tsx

@@ -3,14 +3,14 @@ import { useI18n } from '@18f/identity-react-i18n';
 import { Alert, PageHeading } from '@18f/identity-components';
 import { request } from '@18f/identity-request';
 import { forceRedirect } from '@18f/identity-url';
-import BackButton from './back-button';
-import AnalyticsContext from '../context/analytics';
 import AddressSearch, {
   transformKeys,
   snakeCase,
   LocationQuery,
   LOCATIONS_URL,
-} from './address-search';
+} from '@18f/identity-address-search';
+import BackButton from './back-button';
+import AnalyticsContext from '../context/analytics';
 import InPersonLocations, { FormattedLocation } from './in-person-locations';
 import { InPersonContext } from '../context';
 import UploadContext from '../context/upload';

app/views/layouts/base.html.erb

@@ -26,6 +26,7 @@
   <%= preload_link_tag font_url('public-sans/PublicSans-Bold.woff2') %>
   <%= preload_link_tag font_url('public-sans/PublicSans-Regular.woff2') %>
   <%= stylesheet_link_tag 'application', media: 'all' %>
+  <%= render_stylesheet_once_tags %>
   <%= csrf_meta_tags %>
 
   <%= favicon_link_tag(

app/views/layouts/component_preview.html.erb

@@ -3,6 +3,7 @@
   <head>
     <title>Component Preview</title>
     <%= stylesheet_link_tag 'application', media: 'all' %>
+    <%= render_stylesheet_once_tags %>
   </head>
   <body class="height-auto padding-2 <%= params.dig(:lookbook, :display, :body_class) %>">
     <% if params.dig(:lookbook, :display, :form) == true %>

app/views/saml_idp/shared/saml_post_binding.html.erb

@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <%= csrf_meta_tags %>
     <%= stylesheet_link_tag 'application', media: 'all' %>
+    <%= render_stylesheet_once_tags %>
     <%= render_javascript_pack_once_tags 'saml-post' %>
   </head>
   <body>

app/views/shared/saml_post_form.html.erb

@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <%= csrf_meta_tags %>
     <%= stylesheet_link_tag 'application', media: 'all' %>
+    <%= render_stylesheet_once_tags %>
     <%= render_javascript_pack_once_tags 'saml-post' %>
   </head>
   <body>

package.json

@@ -18,7 +18,7 @@
     "clean": "rm -rf public/packs/*",
     "prebuild": "yarn run clean",
     "build": "webpack && yarn generate-browsers-json",
-    "build:css": "build-sass app/assets/stylesheets/*.css.scss --out-dir=app/assets/builds"
+    "build:css": "build-sass app/assets/stylesheets/*.css.scss app/components/*.scss --load-path=app/assets/stylesheets --out-dir=app/assets/builds"
   },
   "dependencies": {
     "@18f/identity-design-system": "^7.0.1",