Rename scss files, update comments, fix paths, formatting

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

@@ -7,7 +7,6 @@ import { LinkProperties } from '$types/veda';
 import { USWDSHeader, USWDSHeaderTitle } from '$components/common/uswds/header';
 import { USWDSNavMenuButton } from '$components/common/uswds/header/nav-menu-button';
 import { USWDSExtendedNav } from '$components/common/uswds/header/extended-nav';
-import './styles.scss';
 
 interface PageHeaderProps {
   mainNavItems: 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
@@ -14,7 +14,7 @@ export default function LogoContainer({
   linkProperties,
   LogoSvg,
   title,
-  version,
+  version
 }: {
   linkProperties: LinkProperties;
   LogoSvg?: SVGElement | JSX.Element;
@@ -26,7 +26,10 @@ export default function LogoContainer({
 
   return (
     <div id='logo-container'>
-      <LinkElement id='logo-container-link' {...{ [linkProperties.pathAttributeKeyName]: '/' }}>
+      <LinkElement
+        id='logo-container-link'
+        {...{ [linkProperties.pathAttributeKeyName]: '/' }}
+      >
         {LogoSvg}
         <span>{title}</span>
       </LinkElement>
@@ -43,4 +46,4 @@ export default function LogoContainer({
       </Tip>
     </div>
   );
-}
+}

app/scripts/styles/styles.scss

@@ -11,9 +11,8 @@
 @use 'usa-modal';
 @use 'usa-header';
 
-// Custom VEDA UI styles
-@use "../components/common/page-header/styles.scss";
-@use "../components/common/page-header/logo-container/styles.scss";
-@use "../components/common/cookie-consent/index.scss";
-@use "../components/common/datepicker/index.scss";
-@use "../components/common/banner/styles.scss";
+// 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";

gulpfile.js

@@ -6,6 +6,9 @@ const del = require('del');
 const portscanner = require('portscanner');
 const log = require('fancy-log');
 const uswds = require('@uswds/compile');
+const sass = require('gulp-sass')(require('sass'));
+const postcss = require('gulp-postcss');
+const url = require('postcss-url');
 
 uswds.settings.version = 3;
 
@@ -75,6 +78,74 @@ 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);
+  });
+}
+
+function copyUswdsAssets() {
+  // 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.
+  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'));
+}
+
+// Task that compiles SCSS files into CSS.
+// It processes styles from the `styles.scss` file, resolves imports and adjusts asset URLs
+// (e.g fonts and images) to verify they are correctly referenced in the output CSS.
+// The compiled styles are then output to the `lib/styles` directory for consumption by the app.
+function buildStyles() {
+  return gulp
+    .src('app/scripts/styles/styles.scss')
+    .pipe(
+      sass({
+        includePaths: [
+          './node_modules/@uswds/uswds/packages',
+          path.resolve(__dirname, 'app/scripts/components')
+        ]
+      }).on('error', sass.logError)
+    )
+    .pipe(
+      postcss([
+        url({
+          url: (asset) => {
+            if (asset.url.startsWith('../fonts/')) {
+              return asset.url.replace('../fonts/', '/fonts/');
+            }
+            if (asset.url.startsWith('../img/')) {
+              return asset.url.replace('../img/', '/img/');
+            }
+            return asset.url;
+          }
+        })
+      ])
+    )
+    .pipe(gulp.dest('lib/styles'));
+}
+
 // Below are the parcel related tasks. One for the build process and other to
 // start the development server.
 
@@ -146,5 +217,17 @@ const parallelTasks =
     ? gulp.parallel(copyFiles, copyUswdsImages)
     : gulp.parallel(copyFiles, copyNetlifyCMS, copyUswdsImages);
 
+module.exports.buildlib = gulp.series(
+  clean,
+  buildStyles,
+  copyUswdsAssets,
+  parcelBuildLib
+);
+
 // Task orchestration used during the production process.
-module.exports.default = gulp.series(clean, parallelTasks, parcelBuild);
+module.exports.default = gulp.series(
+  clean,
+  parallelTasks,
+  buildStyles,
+  parcelBuild
+);

package.json

@@ -177,6 +177,7 @@
     "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",
@@ -222,6 +223,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

@@ -5,14 +5,11 @@ const plugins = [
   require('postcss-import'),
   url({
     url: (asset) => {
-      const uswdsBasePath =
-        '/node_modules/@developmentseed/veda-ui/node_modules/@uswds/uswds/dist';
-
       if (asset.url.startsWith('../fonts/')) {
-        return `${uswdsBasePath}/fonts/${asset.url.slice('../fonts/'.length)}`;
+        return `./fonts/${asset.url.slice('../fonts/'.length)}`;
       }
       if (asset.url.startsWith('../img/')) {
-        return `${uswdsBasePath}/img/${asset.url.slice('../img/'.length)}`;
+        return `./img/${asset.url.slice('../img/'.length)}`;
       }
       return asset.url;
     }