Skip to content

Commit

Permalink
Base setup for using react-uswds in the veda-ui (#1029)
Browse files Browse the repository at this point in the history
**Related Ticket:** #1043

### Description of Changes
This is a base setup to start using react-uswds inside of the veda-ui

### Example usage

To use the `Card` component from `react-uswds`, we can simply import it
and use it as is from react-uswds, with the default styles applied.

### Notes & Questions About Changes
_{Add additonal notes and outstanding questions here related to changes
in this pull request}_

### Validation / Testing
_{Update with info on what can be manually validated in the Deploy
Preview link for example "Validate style updates to selection modal do
NOT affect cards"}_
  • Loading branch information
dzole0311 authored Jul 12, 2024
2 parents 38bbb62 + a6b1ff9 commit 6029236
Show file tree
Hide file tree
Showing 11 changed files with 1,822 additions and 458 deletions.
5 changes: 3 additions & 2 deletions .parcelrc
Original file line number Diff line number Diff line change
@@ -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"]
}
}
4 changes: 4 additions & 0 deletions .parcelrc-lib
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"extends": ["./.parcelrc"],
"resolvers": ["parcel-resolver-alias", "..."]
}
13 changes: 13 additions & 0 deletions .sassrc.js
Original file line number Diff line number Diff line change
@@ -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
]
}
4 changes: 4 additions & 0 deletions app/scripts/main.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
4 changes: 4 additions & 0 deletions app/scripts/styles/_uswds-theme.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
@use 'uswds-core' with (
$utilities-use-important: true,
$theme-show-notifications: false
);
1 change: 1 addition & 0 deletions app/scripts/styles/styles.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
@forward 'uswds-theme';
18 changes: 14 additions & 4 deletions gulpfile.js
Original file line number Diff line number Diff line change
@@ -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 -------------------------------------//
Expand Down Expand Up @@ -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.

Expand Down Expand Up @@ -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);
25 changes: 19 additions & 6 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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/",
Expand All @@ -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",
Expand Down Expand Up @@ -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",
Expand All @@ -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",
Expand Down Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand Down Expand Up @@ -220,3 +232,4 @@
"$test": "~/test"
}
}

60 changes: 60 additions & 0 deletions parcel-resolver-alias/index.js
Original file line number Diff line number Diff line change
@@ -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;
}
});
8 changes: 8 additions & 0 deletions postcss.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
module.exports = {
syntax: 'postcss-scss',
parser: 'postcss-safe-parser',
plugins: [
require('autoprefixer'),
require('postcss-import'),
]
};
Loading

0 comments on commit 6029236

Please sign in to comment.