[WNMGDS-478] Add USWDS to build scripts (#826)

* Add USWDS dep * Update includePaths to include USWDS * Only import USWDS SCSS variables * Fix CSS stats comparison * Update yarn version * Fix issue with JSON file missing comma * Move usdws into settings * Simplify css stats * Simplify font size stats and add in TODO for fixing latest font size Co-authored-by: line47 <[email protected]>
CMSgov · Sep 29, 2020 · 75edc2d · 75edc2d
1 parent 1f362d7
commit 75edc2d
Show file tree

Hide file tree

Showing 17 changed files with 2,108 additions and 84 deletions.
diff --git a/packages/design-system-scripts/gulp/build.js b/packages/design-system-scripts/gulp/build.js
@@ -231,7 +231,7 @@ module.exports = {
     logTask('🏃 ', 'Starting design system build task');
     await cleanDist(sourceDir);
     await copyAll(sourceDir);
-    await compileSourceSass(sourceDir);
+    await compileSourceSass(sourceDir, options);
     await compileJs(sourceDir, options);
     if (process.env.NODE_ENV === 'production') {
       await printStats(sourceDir, options);

diff --git a/packages/design-system-scripts/gulp/sass.js b/packages/design-system-scripts/gulp/sass.js
@@ -68,23 +68,37 @@ function compileSass(src, dest, includePaths, browserSync) {
   return streamPromise(stream);
 }
 
-async function compileSourceSass(sourceDir, browserSync) {
+async function compileSourceSass(sourceDir, options, browserSync) {
   // 'styles' folder is renamed to 'css'
   const src = path.join(sourceDir, 'src', 'styles');
   const dest = path.join(sourceDir, 'dist', 'css');
-  const includePaths = [path.resolve(sourceDir, 'node_modules'), src];
+
+  // The core CMSDS repo hoists deps using yarn workspaces, deps in the root `node_module`
+  // A standard child DS will have `node_modules` at the root of the repo
+  const nodeModuleRelativePath = options.core
+    ? path.resolve(sourceDir, '../../node_modules')
+    : path.resolve(sourceDir, 'node_modules');
+  const includePaths = [
+    src,
+    nodeModuleRelativePath,
+    path.resolve(nodeModuleRelativePath, 'uswds', 'dist', 'scss'),
+  ];
   await compileSass(src, dest, includePaths, browserSync);
 }
 
 async function compileDocsSass(docsDir, options, browserSync) {
   const src = path.join(docsDir, 'src');
   const dest = path.join(docsDir, 'dist');
+
+  // The core CMSDS repo hoists deps using yarn workspaces, deps in the root `node_module`
+  // A standard child DS will not have `node_modules` in the docs dir, only at the root of the repo
+  const nodeModuleRelativePath = options.core
+    ? path.resolve(docsDir, '../../node_modules')
+    : path.resolve(docsDir, '../node_modules');
   const includePaths = [
-    // The core CMSDS repo hoists deps using yarn workspaces, deps in the root `node_module`
-    path.resolve(docsDir, '../../node_modules'),
-    // A standard child DS will not have `node_modules` in the docs dir, only at the root of the repo
-    path.resolve(docsDir, '../node_modules'),
     src,
+    nodeModuleRelativePath,
+    path.resolve(nodeModuleRelativePath, 'uswds', 'dist', 'scss'),
   ];
   await compileSass(src, dest, includePaths, browserSync);
 }

diff --git a/packages/design-system-scripts/gulp/stats/stats.js b/packages/design-system-scripts/gulp/stats/stats.js
@@ -6,6 +6,7 @@
  */
 const cssstats = require('cssstats');
 const fs = require('mz/fs');
+const got = require('got');
 const getPackageName = require('../common/getPackageName');
 const logStats = require('./logStats');
 const path = require('path');
@@ -15,17 +16,35 @@ const { logError, logTask } = require('../common/logUtil');
 const tmpPath = path.resolve('./tmp');
 
 const SKIP_LATEST_MESSAGE =
-  'If it is expected that the latest release does not exist in node_modules, add the `--skipLatest` flag to skip this part.';
+  'If it is expected that the latest release is not in NPM, add the `--skipLatest` flag to skip this part.';
+
+// Gets current CSS stats data from the local CSS entry point file
+async function getCurrentCssStats(dir) {
+  const currentCssPath = path.resolve(dir, 'dist', 'css', 'index.css');
+  if (fs.existsSync(currentCssPath)) {
+    try {
+      const css = await fs.readFile(currentCssPath, 'utf8');
+      return cssstats(css);
+    } catch (error) {
+      logError('getCurrentCssStats', 'Error collecting CSS stats');
+      console.error(error);
+    }
+  } else {
+    logError('getCurrentCssStats', `Unable to find current css in ${currentCssPath}`);
+  }
+}
 
-/**
- * @return {Promise} Resolves with a css stats object
- */
-async function getCSSStats(cssPath) {
+// Gets CSS stats from the latest release, use unpkg to easily grab the last release in NPM
+async function getLatestCssStats(packageName) {
+  const latestCssUrl = `https://unpkg.com/${packageName}@latest/dist/css/index.css`;
   try {
-    const css = await fs.readFile(cssPath, 'utf8');
-    return cssstats(css);
+    const response = await got(latestCssUrl);
+    return cssstats(response.body);
   } catch (error) {
-    logError('getCSSStats', 'Error collecting CSS stats');
+    logError(
+      'getLatestCssStats',
+      `Unable to download latest css from ${latestCssUrl}. ${SKIP_LATEST_MESSAGE}`
+    );
     console.error(error);
   }
 }
@@ -36,81 +55,50 @@ async function getCSSStats(cssPath) {
  * @return {Promise<{current, latest}>}
  */
 async function getStatsObject(dir, packageName, skipLatest = false) {
-  let current;
-  let latest;
-
-  const currentCSSPath = path.resolve(dir, 'dist', 'css', 'index.css');
-  if (fs.existsSync(currentCSSPath)) {
-    current = await getCSSStats(currentCSSPath);
-  } else {
-    logError('getStatsObject', `Unable to find current css in ${currentCSSPath}`);
-    return;
-  }
-
-  if (!skipLatest && packageName) {
-    const latestCSSPath = path.resolve('node_modules', packageName, 'dist', 'css', 'index.css');
-    if (fs.existsSync(latestCSSPath)) {
-      latest = await getCSSStats(latestCSSPath);
-    } else {
-      logError('getStatsObject', `Unable to find latest release css in ${latestCSSPath}`);
-      latest = current;
-    }
-  }
-
+  const current = await getCurrentCssStats(dir);
+  const latest = !skipLatest && packageName ? await getLatestCssStats(packageName) : current;
   return { current, latest };
 }
 
-/**
- * @return {Promise} Resolves with the sum of all .woff2 file sizes, assumes valid fontDir
- */
-function getFontsSize(fontDir) {
-  return fs
-    .readdir(fontDir)
-    .then((files) => {
-      return Promise.all(
-        // Array of .woff2 file sizes
-        files
-          .filter((name) => name.match(/\.woff2$/))
-          .map((name) => {
-            return fs.stat(path.resolve(fontDir, name)).then((stats) => stats.size);
-          })
-      );
-    })
-    .then(sum)
-    .catch(() => {
-      logError('getFontSize', 'Error collecting font sizes');
-    });
+// Gets sum of all .woff2 file sizes from the local font directory
+async function getCurrentFontSize(dir) {
+  const currentFontDir = path.resolve(dir, 'dist', 'fonts');
+  if (fs.existsSync(currentFontDir)) {
+    return fs
+      .readdir(currentFontDir)
+      .then((files) => {
+        return Promise.all(
+          // Array of .woff2 file sizes
+          files
+            .filter((name) => name.match(/\.woff2$/))
+            .map((name) => {
+              return fs.stat(path.resolve(currentFontDir, name)).then((stats) => stats.size);
+            })
+        );
+      })
+      .then(sum)
+      .catch(() => {
+        logError('getFontSize', 'Error collecting font sizes');
+      });
+  } else {
+    logError('getFontsStats', `Unable to find current fonts in ${currentFontDir}`);
+    return '0';
+  }
 }
 
 /**
  * Analyze the file sizes of all .woff2 font files and add to the stats object
  * @return {Promise}
  */
 async function getFontsStats(dir, packageName, currentStats, skipLatest = false) {
-  // Get stats from current dist font directory if it exists
-  const currentFontDir = path.resolve(dir, 'dist', 'fonts');
-  if (fs.existsSync(currentFontDir)) {
-    const current = await getFontsSize(currentFontDir);
-    currentStats.current.totalFontFileSize = current;
-  } else {
-    logError('getFontsStats', `Unable to find current fonts in ${currentFontDir}`);
-    currentStats.current.totalFontFileSize = '0';
-  }
-
-  // Get stats from previous release font directory if it exists and if skipLatest flag is not used
-  if (!skipLatest && packageName) {
-    const previousFontDir = path.resolve('node_modules', packageName, 'dist', 'fonts');
-    if (fs.existsSync(previousFontDir)) {
-      const latest = await getFontsSize(previousFontDir);
-      currentStats.latest.totalFontFileSize = latest;
-    } else {
-      logError(
-        'getFontsStats',
-        `Unable to find latest release fonts in ${previousFontDir}. ${SKIP_LATEST_MESSAGE}`
-      );
-      currentStats.latest.totalFontFileSize = currentStats.current.totalFontFileSize;
-    }
-  }
+  const currentFontSize = await getCurrentFontSize(dir);
+  // TODO: Find a way to total up font file sizes from latest NPM release
+  // currently latest font size stats is broken
+  const latestFontSize =
+    !skipLatest && packageName ? await getCurrentFontSize(dir) : currentFontSize;
+
+  currentStats.current.totalFontFileSize = currentFontSize;
+  currentStats.latest.totalFontFileSize = latestFontSize;
 }
 
 /**

diff --git a/packages/design-system-scripts/gulp/watch.js b/packages/design-system-scripts/gulp/watch.js
@@ -41,7 +41,7 @@ async function watchSource(sourceDir, docsDir, options, browserSync) {
   // Source package Sass files
   gulp.watch(`${src}/**/*.scss`, async () => {
     await copyAll(sourceDir);
-    await compileSourceSass(sourceDir);
+    await compileSourceSass(sourceDir, options);
     await compileDocsSass(docsDir, options, browserSync);
   });
 

diff --git a/packages/design-system-scripts/package.json b/packages/design-system-scripts/package.json
@@ -39,6 +39,7 @@
     "fancy-log": "^1.3.3",
     "front-matter": "^2.3.0",
     "glob": "7.1.4",
+    "got": "^11.7.0",
     "gulp": "^4.0.2",
     "gulp-babel": "^8.0.0",
     "gulp-changed": "^3.1.1",

diff --git a/packages/design-system/package.json b/packages/design-system/package.json
@@ -26,7 +26,8 @@
     "lodash.uniqueid": "^4.0.1",
     "prop-types": "^15.7.2",
     "react-aria-modal": "^2.11.1",
-    "react-transition-group": "^2.9.0"
+    "react-transition-group": "^2.9.0",
+    "uswds": "^2.8.1"
   },
   "peerDependencies": {
     "react": ">=16.0.0",

diff --git a/packages/design-system/src/components/Tooltip/Tooltip.jsx b/packages/design-system/src/components/Tooltip/Tooltip.jsx
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 import { createPopper } from '@popperjs/core';
-import { uniqueId } from 'lodash';
+import uniqueId from 'lodash.uniqueid';
 
 export class Tooltip extends React.Component {
   constructor(props) {

diff --git a/packages/design-system/src/styles/index.scss b/packages/design-system/src/styles/index.scss
@@ -1,7 +1,6 @@
 /**
  * index.scss - SCSS entry point
  */
-
 // Settings: Globally-available variables, mixins, functions and config (Sass code that doesn't output CSS)
 @import 'settings/index';
 // Fonts are unique from other settings because font-faces are compiled and included css build files

diff --git a/packages/design-system/src/styles/settings/_index.scss b/packages/design-system/src/styles/settings/_index.scss
@@ -1,3 +1,4 @@
 // This file is imported by many different scss files across the design system
+@import 'uswds/index';
 @import 'variables/index';
 @import 'mixins/index';
diff --git a/packages/design-system/src/styles/settings/uswds/_index.scss b/packages/design-system/src/styles/settings/uswds/_index.scss
@@ -0,0 +1,68 @@
+/*
+* * * * * ==============================
+* * * * * ==============================
+* * * * * ==============================
+* * * * * ==============================
+========================================
+========================================
+========================================
+*/
+
+// -------------------------------------
+// Import individual theme settings
+
+@import 'uswds-theme-general';
+@import 'uswds-theme-typography';
+@import 'uswds-theme-spacing';
+@import 'uswds-theme-color';
+@import 'uswds-theme-utilities';
+
+// components import needs to be last
+@import 'uswds-theme-components';
+
+// -------------------------------------
+// Import individual USWDS packages...
+// See https://designsystem.digital.gov/components/
+
+// First import required and global packages...
+@import 'packages/required';
+// @import 'packages/global';
+
+// Then import individual component packages...
+// @import 'packages/form-controls';
+// @import 'packages/form-templates';
+// @import 'packages/layout-grid';
+// @import 'packages/typography';
+// @import 'packages/validation';
+// @import 'packages/usa-accordion';
+// @import 'packages/usa-alert';
+// @import 'packages/usa-banner';
+// @import 'packages/usa-breadcrumb';
+// @import 'packages/usa-button';
+// @import 'packages/usa-button-group';
+// @import 'packages/usa-card';
+// @import 'packages/usa-checklist';
+// @import 'packages/usa-footer';
+// @import 'packages/usa-header';
+// @import 'packages/usa-hero';
+// @import 'packages/usa-layout';
+// @import 'packages/usa-media-block';
+// @import 'packages/usa-megamenu';
+// @import 'packages/usa-nav-container';
+// @import 'packages/usa-nav';
+// @import 'packages/usa-navbar';
+// @import 'packages/usa-section';
+// @import 'packages/usa-search';
+// @import 'packages/usa-sidenav';
+// @import 'packages/usa-skipnav';
+// @import 'packages/usa-table';
+// @import 'packages/usa-tag';
+
+// or package sets...
+// @import 'packages/uswds-components';
+// @import 'packages/uswds-utilities';
+
+// -------------------------------------
+// ...or import the complete USWDS kit
+
+// @import 'uswds';