refactor: Decouple USWDS packages from the library bundle (#1337)

**Related Ticket / Closes:**
#1317
**Related Next.js PR:**
developmentseed/next-veda-ui#30

### Description of Changes

Restructured the library build for local development and library build:

1. Development environment:

- When developing in the veda-ui repo, we will have full USWDS package
access
- Moved USWDS related packages under `devDependencies` and added USWDS
as a `peerDependency`

2. Library build:

- Modified the build to only bundle custom component styles
- Removed USWDS package styles from the final library bundle

### Notes & Questions About Changes

Going forward, the VEDA UI library now expects consuming apps to:

- Install USWDS as a dependency
- Configure their own USWDS theme via a `_uswds-theme.scss` config file

Furthermore, we could also expose the themed variables that @AliceR and
@sandrahoang686 created in a similar config file like the one for USWDS
(e.g. `_veda-theme.scss`) and allow instances to customize them in a
similar manner like the uswds theme. Since that's out of scope for this
PR, I'll create a follow-up issue to track it.

### Validation / Testing

1. Deployment preview:

- Component styles are correctly applied
- USWDS theming works as expected
- Style specificity is maintained (custom styles override USWDS
defaults)

2. Test in local development:

- Run `yarn dev` and check that the development environment still has
full USWDS access
- Build library (yarn build) and inspect the main.css under /lib
directory -> it should contain only custom CSS styles w/o USWDS styles
included

3. In Next.js

- See related PR with deployment preview
- Change the colors using USWDS tokens in the instances
`_uswds-theme.scss` config file -> check that the change is applied, for
example, to the header

app/scripts/index.ts

@@ -33,7 +33,8 @@ import {
   externalDatasetsAtom
 } from '$components/exploration/atoms/datasetLayers';
 
-import './styles/styles.scss';
+// Include only the custom stylings for the VEDA components into the library build
+import './styles/veda-components.scss';
 
 // Adding .last property to array
 /* eslint-disable-next-line fp/no-mutating-methods */

app/scripts/styles/styles.scss

@@ -12,9 +12,4 @@
 @use 'usa-site-alert';
 @use 'usa-banner';
 
-// Custom VEDA UI styles should be added here, so that they can be
-// picked up by Parcel and included in the final CSS bundle for the veda-ui library.
-@use "../components/common/page-header/page-header.scss";
-@use "../components/common/banner/banner.scss";
-@use "../components/common/page-header/logo-container/logo-container.scss";
-@use "../components/common/datepicker/datepicker.scss";
+@use './veda-components';

app/scripts/styles/veda-components.scss

@@ -0,0 +1,6 @@
+// Custom VEDA UI styles should be added here, so that they can be
+// picked up by Parcel and included in the final CSS bundle for the veda-ui library.
+@use "../components/common/page-header/page-header.scss";
+@use "../components/common/page-header/logo-container/logo-container.scss";
+@use "../components/common/banner/banner.scss";
+@use "../components/common/datepicker/datepicker.scss";

gulpfile.js

@@ -29,6 +29,7 @@ process.env.APP_BUILD_TIME = Date.now();
 
 const parcelCli = path.join(__dirname, './node_modules/parcel/lib/cli.js');
 const parcelConfig = path.join(__dirname, '.parcelrc');
+const parcelLibConfig = path.join(__dirname, '.parcelrc-lib');
 
 // /////////////////////////////////////////////////////////////////////////////
 // ----------------------- Watcher and custom tasks --------------------------//
@@ -51,7 +52,7 @@ function watcher() {
 
 function clean() {
   // Remove build cache and dist.
-  return del(['dist', '.parcel-cache']);
+  return del(['dist', 'lib', '.parcel-cache']);
 }
 
 // Simple task to copy the static files to the dist directory. The static
@@ -84,7 +85,7 @@ function parcelBuildLib(cb) {
     'app/scripts/index.ts',
     '--dist-dir=lib',
     '--config',
-    '.parcelrc-lib'
+    parcelLibConfig
   ];
 
   const pr = spawn('node', [parcelCli, ...args], {
@@ -183,8 +184,8 @@ const parallelTasks =
 
 module.exports.buildlib = gulp.series(
   clean,
-  copyUswdsAssetsToLibBundle,
-  parcelBuildLib
+  parcelBuildLib,
+  copyUswdsAssetsToLibBundle
 );
 
 // Task orchestration used during the production process.

package.json

@@ -40,6 +40,9 @@
   "engines": {
     "node": ">=18.0.0"
   },
+  "peerDependencies": {
+    "@uswds/uswds": "^3.8.1"
+  },
   "devDependencies": {
     "@babel/core": "^7.26.0",
     "@babel/eslint-parser": "^7.16.0",
@@ -120,6 +123,8 @@
     "stylelint": "^16.10.0",
     "stylelint-config-recommended": "^14.0.1",
     "stylelint-config-standard-scss": "^13.1.0",
+    "@uswds/compile": "^1.1.0",
+    "@uswds/uswds": "^3.8.1",
     "ts-jest": "^29.2.5",
     "typescript": "4.8.4"
   },
@@ -156,7 +161,6 @@
     "@tanstack/react-query-devtools": "^4.3.9",
     "@tanstack/react-table": "^8.9.3",
     "@tippyjs/react": "^4.2.6",
-    "@trussworks/react-uswds": "^9.0.0",
     "@turf/area": "^6.5.0",
     "@turf/bbox": "^6.5.0",
     "@turf/bbox-polygon": "^6.5.0",
@@ -168,8 +172,12 @@
     "@turf/intersect": "^6.5.0",
     "@turf/simplify": "^6.5.0",
     "@turf/union": "^6.5.0",
-    "@uswds/compile": "^1.1.0",
-    "@uswds/uswds": "^3.8.1",
+    "@types/geojson": "^7946.0.10",
+    "@types/he": "^1.2.3",
+    "@types/mdx": "^2.0.1",
+    "@types/react": "18.0.32",
+    "@types/react-dom": "18.0.11",
+    "@types/styled-components": "^5.1.26",
     "autoprefixer": "^10.4.19",
     "axios": "^0.25.0",
     "clipboard": "^2.0.11",
@@ -235,6 +243,7 @@
     "shpjs": "^4.0.4",
     "styled-components": "^5.3.3",
     "tippy.js": "^6.3.7",
+    "@trussworks/react-uswds": "^9.0.0",
     "use-deep-compare": "^1.1.0",
     "xlsx": "^0.18.5"
   },