Base setup for using react-uswds in the veda-ui

.parcelrc

@@ -1,10 +1,11 @@
 {
   "extends": ["@parcel/config-default"],
-  "bundler": "@parcel/bundler-experimental",
   "reporters": ["...", "@parcel/reporter-bundle-analyzer"],
   "resolvers": ["parcel-resolver-ignore", "parcel-resolver-veda", "@parcel/resolver-glob", "..."],
   "transformers": {
     "raw:*": ["@parcel/transformer-raw"],
-    "*.mdx": ["parcel-transformer-mdx-frontmatter", "parcel-transformer-mdx"]
+    "*.mdx": ["parcel-transformer-mdx-frontmatter", "parcel-transformer-mdx"],
+    "*.css": ["@parcel/transformer-postcss"],
+    "*.scss": ["@parcel/transformer-sass"]
   }
 }

.parcelrc-lib

@@ -0,0 +1,4 @@
+{
+  "extends": ["./.parcelrc"],
+  "resolvers": ["parcel-resolver-alias", "..."]
+}

.sassrc.js

@@ -0,0 +1,13 @@
+const path = require('path');
+const fs = require('fs-extra');
+
+const CWD = process.cwd();
+let uswdsPath = path.resolve(CWD, 'node_modules/@uswds/uswds/packages');
+// If the build command is from one of the instances
+if (!fs.existsSync(uswdsPath)) uswdsPath = path.resolve(CWD,'.veda/ui', 'node_modules/@uswds/uswds/packages');
+
+module.exports = {
+  "includePaths": [
+    uswdsPath
+  ]
+}

app/scripts/main.tsx

@@ -2,6 +2,10 @@ import React, { lazy, Suspense, useEffect } from 'react';
 import { createRoot } from 'react-dom/client';
 import T from 'prop-types';
 import { BrowserRouter, Route, Routes, useLocation } from 'react-router-dom';
+
+import '@trussworks/react-uswds/lib/index.css';
+import '$styles/styles.scss';
+
 import { userPages } from 'veda';
 import DevseedUiThemeProvider from './theme-provider';
 

app/scripts/styles/_uswds-theme.scss

@@ -0,0 +1,4 @@
+@use 'uswds-core' with (
+    $utilities-use-important: true,
+    $theme-show-notifications: false
+);

app/scripts/styles/styles.scss

@@ -0,0 +1 @@
+@forward 'uswds-theme';

gulpfile.js

@@ -1,10 +1,15 @@
-const fs = require('fs-extra');
 const path = require('path');
 const { spawn } = require('child_process');
+const fs = require('fs-extra');
 const gulp = require('gulp');
 const del = require('del');
 const portscanner = require('portscanner');
 const log = require('fancy-log');
+const uswds = require('@uswds/compile');
+
+uswds.settings.version = 3;
+
+uswds.paths.dist.img = './dist/img';
 
 // /////////////////////////////////////////////////////////////////////////////
 // --------------------------- Variables -------------------------------------//
@@ -66,6 +71,10 @@ function copyNetlifyCMS() {
   return gulp.src('admin/**/*').pipe(gulp.dest('dist/admin'));
 }
 
+function copyUswdsImages() {
+  return uswds.copyImages();
+}
+
 // Below are the parcel related tasks. One for the build process and other to
 // start the development server.
 
@@ -125,16 +134,17 @@ module.exports.serve = gulp.series(
   gulp.parallel(
     // Task to copy the files. DO NOT REMOVE
     copyFiles,
-    copyNetlifyCMS
+    copyNetlifyCMS,
+    copyUswdsImages
   ),
   gulp.parallel(watcher, parcelServe)
 );
 
 // do not deploy netlify cms to production
 const parallelTasks =
   process.env.NODE_ENV === 'production'
-    ? gulp.parallel(copyFiles)
-    : gulp.parallel(copyFiles, copyNetlifyCMS);
+    ? gulp.parallel(copyFiles, copyUswdsImages)
+    : gulp.parallel(copyFiles, copyNetlifyCMS, copyUswdsImages);
 
 // Task orchestration used during the production process.
 module.exports.default = gulp.series(clean, parallelTasks, parcelBuild);

package.json

@@ -19,8 +19,8 @@
   "scripts": {
     "serve": "NODE_ENV=development gulp serve",
     "build": "NODE_ENV=production gulp",
-    "buildlib": "gulp clean && parcel build 'app/scripts/index.ts' --dist-dir='lib'",
-    "stage": "NODE_ENV=staging gulp",
+    "buildlib": "gulp clean && parcel build 'app/scripts/index.ts' --dist-dir='lib' --config '.parcelrc-lib'",
+    "stage": "yarn buildlib && NODE_ENV=staging gulp",
     "clean": "gulp clean",
     "lint": "yarn lint:scripts && yarn lint:css",
     "lint:scripts": "eslint app/scripts/",
@@ -45,14 +45,14 @@
     "@babel/preset-react": "^7.16.0",
     "@babel/preset-typescript": "^7.18.6",
     "@mdx-js/mdx": "^2.0.0",
-    "@parcel/bundler-experimental": "^2.7.0",
     "@parcel/packager-raw-url": "2.7.0",
-    "@parcel/packager-ts": "2.7.0",
+    "@parcel/packager-ts": "2.12.0",
     "@parcel/reporter-bundle-analyzer": "^2.0.0",
     "@parcel/reporter-bundle-buddy": "^2.0.0",
     "@parcel/resolver-glob": "^2.0.1",
     "@parcel/transformer-mdx": "^2.0.1",
-    "@parcel/transformer-typescript-types": "2.7.0",
+    "@parcel/transformer-sass": "2.7.0",
+    "@parcel/transformer-typescript-types": "2.12.0",
     "@parcel/transformer-webmanifest": "2.7.0",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.2",
@@ -85,8 +85,9 @@
     "jest": "^28.1.3",
     "jest-css-modules-transform": "^4.3.0",
     "lint-staged": "14.0.1",
-    "parcel": "^2.7.0",
+    "parcel": "^2.12.0",
     "parcel-resolver-ignore": "^2.1.3",
+    "parcel-resolver-alias": "link:./parcel-resolver-alias",
     "parcel-resolver-veda": "link:./parcel-resolver-veda",
     "parcel-transformer-mdx": "link:./parcel-transformer-mdx",
     "parcel-transformer-mdx-frontmatter": "link:./parcel-transformer-mdx-frontmatter",
@@ -96,6 +97,7 @@
     "process": "^0.11.10",
     "remark-gfm": "^3.0.1",
     "stream-browserify": "^3.0.0",
+    "string_decoder": "^1.3.0",
     "stylelint": "^13.12",
     "stylelint-config-recommended": "^3.0.0",
     "stylelint-config-styled-components": "^0.1.1",
@@ -128,13 +130,15 @@
     "@mapbox/mapbox-gl-draw": "^1.3.0",
     "@mapbox/mapbox-gl-draw-static-mode": "^1.0.1",
     "@mapbox/mapbox-gl-geocoder": "^5.0.1",
+    "@parcel/transformer-postcss": "^2.12.0",
     "@mdx-js/react": "^3.0.1",
     "@parcel/transformer-raw": "~2.7.0",
     "@reactour/tour": "^3.6.1",
     "@tanstack/react-query": "^4.3.9",
     "@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",
@@ -151,13 +155,17 @@
     "@types/react": "18.0.32",
     "@types/react-dom": "18.0.11",
     "@types/styled-components": "^5.1.26",
+    "@uswds/compile": "^1.1.0",
+    "@uswds/uswds": "^3.8.1",
+    "autoprefixer": "^10.4.19",
     "axios": "^0.25.0",
     "clipboard": "^2.0.11",
     "codemirror": "^6.0.1",
     "d3": "^7.6.1",
     "d3-scale-chromatic": "^3.0.0",
     "date-fns": "^2.28.0",
     "file-saver": "^2.0.5",
+    "focus-trap-react": "^10.2.3",
     "framer-motion": "^10.12.21",
     "geojson-validation": "^1.0.2",
     "google-polyline": "^1.0.3",
@@ -177,6 +185,10 @@
     "optics-ts": "^2.4.1",
     "papaparse": "^5.3.2",
     "polished": "^4.1.3",
+    "postcss": "^8.4.39",
+    "postcss-import": "^16.1.0",
+    "postcss-safe-parser": "^7.0.0",
+    "postcss-scss": "^4.0.9",
     "prop-types": "^15.7.2",
     "qs": "^6.10.3",
     "qs-state-hook": "^2.0.0",
@@ -220,3 +232,4 @@
     "$test": "~/test"
   }
 }
+

parcel-resolver-alias/index.js

@@ -0,0 +1,60 @@
+// Resolver for resolving aliases in library building
+// Related issue in Parcel repo: https://github.com/parcel-bundler/parcel/issues/9519
+
+const path = require('path');
+const fs = require('fs-extra');
+const { Resolver } = require('@parcel/plugin');
+const { alias } = require('../package.json');
+
+const aliases = Object.keys(alias).reduce((acc, key) => {
+  const value = alias[key].replace('~', '');
+  acc[`${key}`] = `${value}`;
+  return acc;
+}, {});
+
+// Files with redundant extensions ex. $components/panel (components/panel.d.ts.ts)
+const fileExtensions = ['.js', '.ts', '.jsx', '.tsx'];
+// Index files with a trailing slash ex. $components/panel/ (components/panel/index.jsx)
+const indexFileExtensions = fileExtensions.map((e) => `index${e}`);
+// Index files without a trailing slash ex. $components/panel (components/panel/index.jsx)
+const pathIndexExtensions = fileExtensions.map((e) => `/index${e}`);
+
+function findMatchingFile(filePath) {
+  const filePathParts = filePath.split('/');
+  const fileName = filePathParts[filePathParts.length - 1];
+  // Files ex. $components/panel.jsx or $components/panel.css
+  if (fileName.includes('.')) {
+    if (fs.existsSync(filePath)) return filePath;
+  }
+
+  for (const extension of [
+    ...fileExtensions,
+    ...indexFileExtensions,
+    ...pathIndexExtensions
+  ]) {
+    if (fs.existsSync(`${filePath}${extension}`))
+      return `${filePath}${extension}`;
+  }
+
+  return null;
+}
+
+module.exports = new Resolver({
+  async resolve({ specifier }) {
+    let toReturn;
+    for (let aliasKey in aliases) {
+      if (specifier.startsWith(aliasKey)) {
+        const replaced = specifier.replace(aliasKey, aliases[aliasKey]);
+        const rPath = path.join(__dirname, '..', replaced);
+        const fileP = findMatchingFile(rPath);
+        toReturn = {
+          filePath: fileP
+        };
+        break;
+      }
+    }
+    if (toReturn) return toReturn;
+    // Let the next resolver in the pipeline handle this dependency
+    else return null;
+  }
+});

postcss.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  syntax: 'postcss-scss',
+  parser: 'postcss-safe-parser',
+  plugins: [
+    require('autoprefixer'),
+    require('postcss-import'),
+  ]
+};