chore(deps): Upgrade USWDS, React USWDS, and Storybook (#1058)

* Signing WIP commit

* Save point for version that compiles. Some missing styles but looking good

* fix a couple compile errors

* add back the postinstall we need to copy vendor files

* case sensitivity in test somehow got out of sync

* fix ordering of stylesheets to correct discrepancies

* cleaning up wip files

* more cleanup for consistency

* remove unused var theme-hero-image

* chore(deps): update storybook monorepo to v7

* fix storybook upgrade

* update storybook again

* disable storybook auto doc gen

* fix strange error in modalContext tests

* split storybook build from happo build

* upgrade to latest storybook

* use shortened path for index.scss file

* update comment

* moved styles that resolve duplicate alert icon issue into storybook only stylesheet

* adjusts css to work on storybook and in production to hide random extra icon

* adds slim attribute to stories for alerts to match what they used to look like

* remove deprecated file

* add missing import statements

* workaround for prefixing css in storybook

* putting back initIcons because we need those!

* remove unneccesary comments

---------

Co-authored-by: John Gedeon <[email protected]>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Shauna Keating <[email protected]>

.github/workflows/node-ci.yml

@@ -5,14 +5,15 @@ on:
     paths-ignore:
       - 'docs/**'
       - '**.md**'
-    branches: [main]
+    branches: [ main ]
   pull_request:
     paths-ignore:
       - 'docs/**'
       - '**.md**'
-    branches: [main]
+    branches: [ main ]
   workflow_dispatch:
 
+
 jobs:
   lint-and-test:
     runs-on: ubuntu-latest
@@ -56,7 +57,10 @@ jobs:
       - name: Run Jest tests
         run: yarn test --coverage --silent
 
-      - name: Build Storybook and start Happo run
+      - name: Build Storybook
+        run: yarn storybook:build
+
+      - name: start Happo run
         run: yarn happo-ci-github-actions
         env:
           HAPPO_API_KEY: ${{ secrets.HAPPO_API_KEY }}

.happo.js

@@ -18,6 +18,7 @@ module.exports = {
   plugins: [
     happoPluginStorybook({
       outputDir: 'storybook-static',
+      usePrebuiltPackage: true,
     }),
   ],
 }

.storybook/main.js

@@ -1,17 +1,12 @@
 const path = require('path')
 
 module.exports = {
-  core: {
-    builder: 'webpack5',
-  },
   stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
     '@storybook/addon-a11y',
     'storybook-addon-apollo-client',
     '@storybook/addon-links',
     '@storybook/addon-essentials',
-    'storybook-css-modules-preset',
-    'storybook-addon-next-router',
     'storybook-theme-toggle',
     'storybook-addon-mock',
     'storybook-addon-launchdarkly',
@@ -25,28 +20,25 @@ module.exports = {
     },
   },
   staticDirs: ['../public'],
-  webpackFinal: async (config) => {
-    config.module.rules.push({
-      test: /\.scss$/,
-      use: [
-        'style-loader',
-
-        // All CSS assets will be served from /public so no need to resolve URLs
-        { loader: 'css-loader', options: { url: false } },
-
-        { loader: 'sass-loader', options: { warnRuleAsWarning: false } },
-      ],
-    })
 
+  webpackFinal: async (config) => {
     config.resolve.alias.uswds = path.resolve(
       __dirname,
-      '../node_modules/uswds'
+      '../node_modules/@uswds/uswds/packages'
     )
     config.resolve.modules = config.resolve.modules || []
     config.resolve.modules.push(path.resolve(__dirname, '../src'))
     config.resolve.modules.push('node_modules')
 
-    // Return the altered config
     return config
   },
+
+  framework: {
+    name: '@storybook/nextjs',
+    options: {},
+  },
+
+  docs: {
+    autodocs: 'tag',
+  },
 }

.storybook/preview.js

@@ -5,11 +5,9 @@ import { MockedProvider } from '@apollo/client/testing'
 // happo support
 import 'happo-plugin-storybook/register'
 
-import 'uswds/dist/css/uswds.css'
-import '../src/initIcons'
-import '../src/styles/index.scss'
 // SFDS
-import '../src/styles/sfds/index.scss'
+import 'styles/index.scss'
+import 'initIcons'
 
 // Storybook and next/image component do not play nice together
 // This enables us to use the <Image/> component and still view in Storybook

next.config.js

@@ -14,6 +14,9 @@ const securityHeaders = [
 ]
 
 module.exports = withBundleAnalyzer({
+  sassOptions: {
+    includePaths: ['./node_modules/@uswds/uswds/packages'],
+  },
   webpack: (config, { buildId }) => {
     config.plugins.push(
       new webpack.DefinePlugin({

package.json

@@ -20,8 +20,8 @@
     "build": "next build",
     "build:analyze": "ANALYZE=true yarn build",
     "start": "node -r ./startup/index.js node_modules/.bin/next start",
-    "storybook": "start-storybook -p 6006",
-    "storybook:build": "build-storybook",
+    "storybook": "storybook dev -p 6006",
+    "storybook:build": "storybook build",
     "format": "prettier --write .",
     "lint": "tsc --noEmit && eslint .",
     "prepare": "husky install",
@@ -57,7 +57,8 @@
     "@opentelemetry/resources": "1.9.1",
     "@opentelemetry/sdk-trace-node": "1.9.1",
     "@opentelemetry/tracing": "0.24.0",
-    "@trussworks/react-uswds": "3.2.0",
+    "@trussworks/react-uswds": "5.0.0",
+    "@uswds/uswds": "3.5.0",
     "apollo-server-core": "3.12.0",
     "apollo-server-micro": "3.12.0",
     "axios": "1.4.0",
@@ -88,7 +89,6 @@
     "react-slick": "0.29.0",
     "redis": "3.1.2",
     "slick-carousel": "1.8.1",
-    "uswds": "2.13.3",
     "yup": "1.2.0"
   },
   "devDependencies": {
@@ -100,14 +100,13 @@
     "@graphql-codegen/typescript-operations": "2.5.13",
     "@graphql-codegen/typescript-react-apollo": "3.3.7",
     "@shelf/jest-mongodb": "3.0.2",
-    "@storybook/addon-a11y": "6.5.16",
-    "@storybook/addon-actions": "6.5.16",
-    "@storybook/addon-essentials": "6.5.16",
-    "@storybook/addon-links": "6.5.16",
-    "@storybook/builder-webpack5": "6.5.16",
-    "@storybook/manager-webpack5": "6.5.16",
-    "@storybook/react": "6.5.16",
-    "@storybook/theming": "6.5.16",
+    "@storybook/addon-a11y": "7.0.24",
+    "@storybook/addon-actions": "7.0.24",
+    "@storybook/addon-essentials": "7.0.24",
+    "@storybook/addon-links": "7.0.24",
+    "@storybook/nextjs": "7.0.24",
+    "@storybook/react": "7.0.24",
+    "@storybook/theming": "7.0.24",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "14.0.0",
     "@testing-library/react-hooks": "8.0.1",
@@ -118,12 +117,13 @@
     "@types/luxon": "3.3.0",
     "@types/passport": "1.0.12",
     "@types/passport-saml-metadata": "2.2.1",
-    "@types/react": "18.2.12",
+    "@types/react": "18.2.14",
     "@types/react-fontawesome": "1.6.5",
     "@types/react-slick": "0.23.10",
     "@typescript-eslint/eslint-plugin": "5.59.11",
     "@typescript-eslint/parser": "5.59.11",
     "assert": "2.0.0",
+    "autoprefixer": "10.4.14",
     "babel-loader": "9.1.2",
     "bson": "4.7.2",
     "concurrently": "8.2.0",
@@ -149,14 +149,15 @@
     "lint-staged": "13.2.2",
     "next-test-api-route-handler": "3.1.8",
     "passport-custom": "1.1.1",
+    "postcss": "8.4.24",
     "prettier": "2.8.8",
     "sass": "1.63.4",
     "sass-loader": "13.3.2",
     "standard-version": "9.5.0",
-    "storybook-addon-apollo-client": "4.1.4",
+    "storybook": "7.0.24",
+    "storybook-addon-apollo-client": "5.0.0",
     "storybook-addon-launchdarkly": "1.0.2",
-    "storybook-addon-mock": "3.2.0",
-    "storybook-addon-next-router": "4.0.2",
+    "storybook-addon-mock": "4.0.0",
     "storybook-css-modules-preset": "1.1.1",
     "storybook-theme-toggle": "0.1.2",
     "style-loader": "3.3.3",

postcss.config.js

@@ -0,0 +1,7 @@
+// This workaround makes sure Storybook adds CSS prefixes
+// Ref: https://github.com/storybookjs/storybook/issues/23234
+module.exports = {
+  plugins: {
+    autoprefixer: {},
+  },
+}

scripts/copy_uswds_assets.sh

@@ -2,5 +2,5 @@
 
 mkdir -p 'public/vendor'
 
-cp -r 'node_modules/uswds/dist/fonts' 'public/vendor/fonts'
-cp -r 'node_modules/uswds/dist/img' 'public/vendor/img'
+cp -r 'node_modules/@uswds/uswds/dist/fonts' 'public/vendor/fonts'
+cp -r 'node_modules/@uswds/uswds/dist/img' 'public/vendor/img'

src/components/AddWidget/AddWidget.module.scss

@@ -1,5 +1,5 @@
-@import 'styles/uswdsDependencies';
-@import 'styles/sfds/sfdsDependencies';
+@use 'uswds-core' as *;
+@use 'styles/sfds/index.scss' as *;
 
 .addWidget {
   display: block;

src/components/Alert/Alert.stories.tsx

@@ -20,25 +20,25 @@ const warningMsg = 'Warning alert'
 const infoMsg = 'Info alert'
 
 export const AlertSuccess = () => (
-  <Alert headingLevel="h1" type="success">
+  <Alert type="success" headingLevel="h4" slim>
     {successMsg}
   </Alert>
 )
 
 export const AlertWarning = () => (
-  <Alert headingLevel="h1" type="warning">
+  <Alert headingLevel="h1" type="warning" slim>
     {warningMsg}
   </Alert>
 )
 
 export const AlertError = () => (
-  <Alert headingLevel="h1" type="error">
+  <Alert headingLevel="h1" type="error" slim>
     {errorMsg}
   </Alert>
 )
 
 export const AlertInfo = () => (
-  <Alert headingLevel="h1" type="info">
+  <Alert headingLevel="h1" type="info" slim>
     {infoMsg}
   </Alert>
 )

src/components/Announcement/Announcement.module.scss

@@ -1,5 +1,5 @@
-@import 'styles/uswdsDependencies';
-@import 'styles/sfds/sfdsDependencies';
+@use 'uswds-core' as *;
+@use 'styles/sfds/index.scss' as *;
 
 .announcement {
   position: relative;

src/components/AnnouncementCarousel/AnnouncementCarousel.module.scss

@@ -1,6 +1,5 @@
-@import 'styles/uswdsDependencies';
-@import 'styles/sfds/sfdsDependencies';
-
+@use 'uswds-core' as *;
+@use 'styles/sfds/index.scss' as *;
 .carouselContainer {
   display: flex !important;
   flex-direction: row;
@@ -22,10 +21,12 @@
     }
   }
 
-  > :global(.slick-dots
-      li.slick-active
-      div.announcement-carousel-container
-      button::before) {
+  > :global(
+      .slick-dots
+        li.slick-active
+        div.announcement-carousel-container
+        button::before
+    ) {
     color: transparent;
     width: 10px;
     height: 9.5px;

src/components/AnnouncementDate/AnnouncementDate.module.scss

@@ -1,6 +1,5 @@
-@import 'styles/uswdsDependencies';
-@import 'styles/sfds/sfdsDependencies';
-
+@use 'uswds-core' as *;
+@use 'styles/sfds/index.scss' as *;
 .dateContainer {
   display: flex;
   flex-direction: row;

src/components/AnnouncementInfo/AnnouncementInfo.module.scss

@@ -1,5 +1,5 @@
-@import 'styles/uswdsDependencies';
-@import 'styles/sfds/sfdsDependencies';
+@use 'uswds-core' as *;
+@use 'styles/sfds/index.scss' as *;
 
 .announcementContainer {
   display: flex;

src/components/ArticleDateIcon/ArticleDateIcon.module.scss

@@ -1,5 +1,5 @@
-@import 'styles/uswdsDependencies';
-@import 'styles/sfds/sfdsDependencies';
+@use 'uswds-core' as *;
+@use 'styles/sfds/index.scss' as *;
 
 .ArticleDateIcon {
   border: 1px solid $theme-cosmiclatte-dark;

src/components/ArticleList/ArticleList.module.scss

@@ -1,6 +1,5 @@
-@import 'styles/uswdsDependencies';
-@import 'styles/sfds/sfdsDependencies';
-
+@use 'uswds-core' as *;
+@use 'styles/sfds/index.scss' as *;
 .ArticleList {
   list-style: none;
   padding: 0;

src/components/ArticleListItem/ArticleListItem.module.scss

@@ -1,6 +1,5 @@
-@import 'styles/uswdsDependencies';
-@import 'styles/sfds/sfdsDependencies';
-
+@use 'uswds-core' as *;
+@use 'styles/sfds/index.scss' as *;
 .articleTitle {
   margin-bottom: 0.5em;
   margin-top: 0;

src/components/Bookmark/Bookmark.module.scss

@@ -1,6 +1,6 @@
-@import 'styles/uswdsDependencies';
-@import 'styles/deps';
-@import 'styles/sfds/sfdsDependencies';
+@use 'uswds-core' as *;
+@use 'styles/sfds/index.scss' as *;
+@use 'styles/deps';
 
 .bookmark {
   border: 1px solid var(--bookmark-border);

src/components/BreadcrumbNav/BreadcrumbNav.module.scss

@@ -1,6 +1,5 @@
-@import 'styles/uswdsDependencies';
-@import 'styles/sfds/sfdsDependencies';
-
+@use 'uswds-core' as *;
+@use 'styles/sfds/index.scss' as *;
 .breadcrumbs {
   :global(.usa-breadcrumb__list-item:not(:last-child)::after) {
     background-color: var(--text);

src/components/Collection/Collection.module.scss

@@ -1,13 +1,11 @@
-@import 'styles/uswdsDependencies';
-
-$collectionHorizontalPadding: units(2);
+@use 'uswds-core' as *;
 
 .collectionList {
   @include add-list-reset;
 
   > li {
-    @include u-margin-x(-$collectionHorizontalPadding);
-    @include u-padding-x($collectionHorizontalPadding);
+    @include u-margin-x(neg-2);
+    @include u-padding-x(2);
     display: flex;
 
     > * {

src/components/CustomCollection/CustomCollection.module.scss

@@ -1,7 +1,6 @@
-@import 'styles/uswdsDependencies';
-@import 'styles/deps';
-@import 'styles/sfds/sfdsDependencies';
-@import 'styles/sfds/_colors.scss';
+@use 'uswds-core' as *;
+@use 'styles/sfds/index.scss' as *;
+@use 'styles/deps';
 
 .undo {
   @extend %button-reset;

src/components/CustomModal/CustomModal.module.scss

@@ -1,4 +1,5 @@
-@import 'styles/sfds/sfdsDependencies';
+@use 'uswds-core' as *;
+@use 'styles/sfds/index.scss' as *;
 
 .buttonGroupWithDelete {
   // Right-align last child

src/components/DropdownFilter/DropdownFilter.module.scss

@@ -1,6 +1,6 @@
-@import 'styles/uswdsDependencies';
-@import 'styles/sfds/sfdsDependencies';
-@import 'styles/deps';
+@use 'uswds-core' as *;
+@use 'styles/deps';
+@use 'styles/sfds/index.scss' as *;
 
 .dropdownFilter {
   display: flex;