Merge remote-tracking branch 'origin' into 1135-Refactor-Layout-Compo…

…nents-Footer

.github/workflows/conventional-commit.yml

@@ -1,11 +1,12 @@
-name: PR Title Checks
+name: PR Title Check
 
 on:
   pull_request:
+    branches: [main]
     types: [opened, synchronize, reopened, edited]
 
 jobs:
-  validate-pr-title:
+  conventional-commit-check:
     runs-on: ubuntu-latest
     steps:
       - name: Conventional Commit Validation

app/scripts/components/common/datepicker/index.tsx

@@ -1,12 +1,11 @@
-import React, { ReactNode, useRef, useState } from "react";
-import { Icon } from "@trussworks/react-uswds";
-import { View } from "react-calendar/dist/cjs/shared/types";
+import React, { ReactNode, useRef, useState } from 'react';
+import { Icon } from '@trussworks/react-uswds';
+import { View } from 'react-calendar/dist/cjs/shared/types';
 import Calendar from 'react-calendar';
-import Tippy from "@tippyjs/react";
-import styled from "styled-components";
+import Tippy from '@tippyjs/react';
+import styled from 'styled-components';
 
 import 'react-calendar/dist/Calendar.css';
-import './index.scss';
 
 interface SimpleDatePickerProps {
   disabled: boolean;
@@ -39,7 +38,7 @@ export const SimpleDatePicker = ({
   renderTriggerElement,
   calendarView,
   minDate,
-  maxDate,
+  maxDate
 }: SimpleDatePickerProps) => {
   const [isCalendarOpen, setIsCalendarOpen] = useState(false);
   const triggerRef = useRef<HTMLDivElement>(null);
@@ -54,7 +53,10 @@ export const SimpleDatePicker = ({
   };
 
   const handleClickOutside = (event) => {
-    if (triggerRef.current && !triggerRef.current.contains(event.target as Node)) {
+    if (
+      triggerRef.current &&
+      !triggerRef.current.contains(event.target as Node)
+    ) {
       setIsCalendarOpen(false);
     }
   };
@@ -67,7 +69,7 @@ export const SimpleDatePicker = ({
           disabled,
           tipContent,
           triggerHeadReference,
-          selectedDay,
+          selectedDay
         })}
       </TriggerWrapper>
       {isCalendarOpen && (

app/scripts/components/common/page-header/index.tsx

@@ -11,8 +11,6 @@ import {
   USWDSExtendedNav
 } from '$components/common/uswds';
 import { LinkProperties } from '$types/veda';
-import './styles.scss';
-
 interface PageHeaderProps {
   mainNavItems: NavItem[];
   subNavItems: NavItem[];

app/scripts/components/common/page-header/logo-container/index.tsx

@@ -1,7 +1,7 @@
 import React, { ComponentType } from 'react';
 import { Tip } from '../../tip';
 import { LinkProperties } from '$types/veda';
-import './styles.scss';
+import './logo-container.scss';
 
 /**
  * LogoContainer that is meant to integrate in the default

app/scripts/index.ts

@@ -33,6 +33,8 @@ import {
   externalDatasetsAtom
 } from '$components/exploration/atoms/datasetLayers';
 
+import './styles/styles.scss';
+
 // Adding .last property to array
 /* eslint-disable-next-line fp/no-mutating-methods */
 Object.defineProperty(Array.prototype, 'last', {

app/scripts/styles/styles.scss

@@ -19,3 +19,9 @@
 @use 'usa-label';
 @use 'uswds-fonts';
 @use 'usa-header';
+
+// 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/datepicker/datepicker.scss";

docs/development/SETUP.md

@@ -1,7 +1,9 @@
 # Installation and Usage
-The steps below will walk you through setting up your own instance of the project. 
+
+The steps below will walk you through setting up your own instance of the project.
 
 ## Install Project Dependencies
+
 To set up the development environment for this website, you'll need to install the following on your system:
 
 - [Node](http://nodejs.org/) v20 (To manage multiple node versions we recommend [nvm](https://github.com/creationix/nvm))
@@ -20,16 +22,19 @@ Install Node modules:
 ```
 yarn install
 ```
-This command  will install all the dependencies and devtools needed for local development. 
+
+This command will install all the dependencies and devtools needed for local development.
 
 ## Usage
 
 ### Config files
+
 Configuration is done using [dot.env](https://parceljs.org/features/node-emulation/#.env-files) files.
 
 These files are used to simplify the configuration of the app and should not contain sensitive information.
 
 Copy the `.env.local-sample` to `.env.local` to add your configuration variables.
+
 ```sh
 cp .env.local-sample .env.local
 ```
@@ -43,6 +48,7 @@ Get your Mapbox access token from Mapbox Dashboard. Put the key in `.env.local`
 ```
 yarn serve
 ```
+
 Compiles the sass files, javascript, and launches the server making the site available at `http://localhost:9000/`
 The system will watch files and execute tasks whenever one of them changes.
 The site will automatically refresh since it is bundled with livereload.
@@ -57,41 +63,62 @@ The site will automatically refresh since it is bundled with livereload.
 ### Lint & TS-Check
 
 #### GitHub Action
+
 VEDA-UI includes a GitHub action for checking TypeScript and lint errors. If your changes trigger any of these errors, your pull request (PR) will be marked as 'Some checks were not successful.'
 
 #### Pre-commit Hook
+
 Additionally, there's a pre-commit hook that performs the same error checks. This helps developers identify and address issues at an earlier stage. If you need to bypass the check (to make a local temporary commit etc.), include the `--no-verify`` flag in your commit command.
 
+### Conventional Commit
+
+The title of any PR to `main` should follow [Conventional Commit](https://www.conventionalcommits.org/en/v1.0.0/). This is to make sure the automatic versioning and release works seamlessly. Please give it a read to [its summary](https://www.conventionalcommits.org/en/v1.0.0/#summary) before making a PR.
+
+An example PR title could look like this:
+
+- `feat: Implement new component`: This commit will bump the minor version.
+- `fix: typo in description`: This commit will bump the patch version.
+- `feat!: New component that is not compatible`: `!` is a shortcut for `BREAKING CHANGE`. This commit will bump the major version.
+
+We currently support the following task types. Any type other than `feat` will be treated as a patch version change (unless it is a breaking change):
+`["feat","fix", "docs", "test", "ci", "refactor", "chore", "revert"]'`
+
 ### Testing
 
 ## Unit tests
 
 `yarn test`
 
 ## End-to-end tests
+
 Make sure the development server is running (`yarn serve`)
 
 `yarn test:e2e --ui`
 
-Alternatively, you can install the playwright extension for vs code (ms-playwright.playwright) and run the tests directly from there. It allows to run the tests in watch mode, open the browser or trace viewer, set breakpoints,... 
+Alternatively, you can install the playwright extension for vs code (ms-playwright.playwright) and run the tests directly from there. It allows to run the tests in watch mode, open the browser or trace viewer, set breakpoints,...
 Again, make sure that the development server is running (`yarn serve`).
 
 ## Deployment
+
 To prepare the app for deployment run:
 
 ```
 yarn build
 ```
+
 or
+
 ```
 yarn stage
 ```
+
 This will package the app and place all the contents in the `dist` directory.
 The app can then be run by any web server.
 
 **When building the site for deployment provide the base url trough the `PUBLIC_URL` environment variable. Omit the trailing slash. (E.g. https://example.com)**
 
 If you want to use any other parcel feature it is also possible. Example:
+
 ```
 PARCEL_BUNDLE_ANALYZER=true yarn parcel build app/index.html
 ```

gulpfile.js

@@ -75,6 +75,41 @@ function copyUswdsImages() {
   return uswds.copyImages();
 }
 
+// Task that uses Parcel to build the library version of the VEDA UI.
+// It specifies the entry file, output directory, and custom Parcel configuration file.
+// This task will generate distributable library (`lib` folder) that other projects can consume.
+function parcelBuildLib(cb) {
+  const args = [
+    'build',
+    'app/scripts/index.ts',
+    '--dist-dir=lib',
+    '--config',
+    '.parcelrc-lib'
+  ];
+
+  const pr = spawn('node', [parcelCli, ...args], {
+    stdio: 'inherit'
+  });
+  pr.on('close', (code) => {
+    cb(code ? 'Build failed' : undefined);
+  });
+}
+
+// Copy the uswds assets to the veda-ui lib directory.
+// This makes things easier for the veda components to consume
+// when the veda-ui library is used as a dependency.
+function copyUswdsAssetsToLibBundle() {
+  return gulp
+    .src(
+      [
+        './node_modules/@uswds/uswds/dist/fonts/**/*',
+        './node_modules/@uswds/uswds/dist/img/**/*'
+      ],
+      { base: './node_modules/@uswds/uswds/dist' }
+    )
+    .pipe(gulp.dest('lib'));
+}
+
 // Below are the parcel related tasks. One for the build process and other to
 // start the development server.
 
@@ -146,5 +181,11 @@ const parallelTasks =
     ? gulp.parallel(copyFiles, copyUswdsImages)
     : gulp.parallel(copyFiles, copyNetlifyCMS, copyUswdsImages);
 
+module.exports.buildlib = gulp.series(
+  clean,
+  copyUswdsAssetsToLibBundle,
+  parcelBuildLib
+);
+
 // Task orchestration used during the production process.
 module.exports.default = gulp.series(clean, parallelTasks, parcelBuild);

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@developmentseed/veda-ui",
   "description": "Dashboard",
-  "version": "5.11.2",
+  "version": "5.11.3",
   "author": {
     "name": "Development Seed",
     "url": "https://developmentseed.org/"
@@ -19,7 +19,7 @@
   "scripts": {
     "serve": "NODE_ENV=development gulp serve",
     "build": "NODE_ENV=production gulp",
-    "buildlib": "gulp clean && parcel build 'app/scripts/index.ts' --dist-dir='lib' --config '.parcelrc-lib'",
+    "buildlib": "gulp buildlib",
     "stage": "yarn buildlib && NODE_ENV=staging gulp",
     "clean": "gulp clean",
     "lint": "yarn lint:scripts && yarn lint:css",
@@ -179,6 +179,8 @@
     "framer-motion": "^10.12.21",
     "geojson-validation": "^1.0.2",
     "google-polyline": "^1.0.3",
+    "gulp-postcss": "^10.0.0",
+    "gulp-sass": "^6.0.0",
     "history": "^5.1.0",
     "intersection-observer": "^0.12.0",
     "jest-environment-jsdom": "^28.1.3",
@@ -199,6 +201,7 @@
     "postcss-import": "^16.1.0",
     "postcss-safe-parser": "^7.0.0",
     "postcss-scss": "^4.0.9",
+    "postcss-url": "^10.1.3",
     "prop-types": "^15.7.2",
     "qs": "^6.10.3",
     "qs-state-hook": "^2.0.0",
@@ -223,6 +226,7 @@
     "react-virtual": "^2.10.4",
     "recharts": "2.1.12",
     "rodemirror": "^2.0.0",
+    "sass": "^1.81.0",
     "scrollama": "^3.1.0",
     "shpjs": "^4.0.4",
     "styled-components": "^5.3.3",

postcss.config.js

@@ -1,4 +1,18 @@
-const plugins = [require('autoprefixer'), require('postcss-import')];
+const url = require('postcss-url');
+
+const plugins = [
+  require('autoprefixer'),
+  require('postcss-import'),
+  // USWDS SCSS files use relative paths like '../fonts/' to reference assets
+  // When we compile these SCSS files, PostCSS needs to resolve these paths
+  // We convert '../' to './' because the final './' paths work correctly in
+  // Next.js when it resolves paths relative to the built CSS file in node_modules/veda-ui/lib/
+  url({
+    url: (asset) => {
+      return asset.url.replace('../', './');
+    }
+  })
+];
 
 module.exports = {
   syntax: 'postcss-scss',