feat(deps): upgrade dependencies and improve first time experience

ensure selecting logo doesn't cause page refresh
dress up 404 page to look better and provide smoother transition back to home
bring favicon in house to avoid broken urls
set stub brand logo
add webpack copy plugin for favicon asset

Author: seanforyou23

package-lock.json

@@ -1,17 +1,18 @@
 {
   "name": "patternfly-seed",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "An open source build scaffolding utility for web apps.",
   "main": "server.js",
   "repository": "https://github.com/patternfly/patternfly-react-seed.git",
+  "homepage": "https://patternfly-react-seed.surge.sh",
   "license": "MIT",
   "private": true,
   "scripts": {
     "prebuild": "npm run clean",
     "dr:surge": "node dr-surge.js",
     "build": "webpack --config webpack.prod.js && npm run dr:surge",
     "start": "node server.js",
-    "start:dev": "webpack-dev-server --hot --color --progress --info=true --config webpack.dev.js",
+    "start:dev": "webpack serve --hot --color --progress --config webpack.dev.js",
     "test": "jest",
     "eslint": "eslint --ext .tsx,.js ./src/",
     "lint": "npm run eslint",
@@ -25,62 +26,63 @@
     "build:storybook": "build-storybook"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^5.3.19",
-    "@storybook/addon-info": "^5.3.19",
-    "@storybook/addon-links": "^5.3.19",
-    "@storybook/addons": "^5.3.19",
-    "@storybook/react": "^5.3.19",
-    "@types/enzyme": "^3.10.5",
+    "@storybook/addon-actions": "^6.0.26",
+    "@storybook/addon-info": "^5.3.21",
+    "@storybook/addon-links": "^6.0.26",
+    "@storybook/addons": "^6.0.26",
+    "@storybook/react": "^6.0.26",
+    "@types/enzyme": "^3.10.7",
     "@types/enzyme-adapter-react-16": "^1.0.6",
-    "@types/jest": "^25.2.3",
-    "@types/react-router-dom": "^5.1.5",
+    "@types/jest": "^26.0.14",
+    "@types/react-router-dom": "^5.1.6",
     "@types/victory": "^33.1.4",
-    "@typescript-eslint/eslint-plugin": "^3.1.0",
-    "@typescript-eslint/parser": "^3.1.0",
-    "css-loader": "^3.5.3",
-    "dotenv-webpack": "^1.8.0",
+    "@typescript-eslint/eslint-plugin": "^4.4.1",
+    "@typescript-eslint/parser": "^4.4.1",
+    "copy-webpack-plugin": "^6.2.1",
+    "css-loader": "^5.0.0",
+    "dotenv-webpack": "^4.0.0",
     "enzyme": "^3.7.0",
-    "enzyme-adapter-react-16": "^1.15.1",
-    "enzyme-to-json": "^3.5.0",
-    "eslint": "^7.1.0",
-    "eslint-plugin-react": "^7.20.0",
-    "eslint-plugin-react-hooks": "^4.0.4",
-    "file-loader": "^6.0.0",
-    "html-webpack-plugin": "^4.3.0",
+    "enzyme-adapter-react-16": "^1.15.5",
+    "enzyme-to-json": "^3.6.1",
+    "eslint": "^7.11.0",
+    "eslint-plugin-react": "^7.21.4",
+    "eslint-plugin-react-hooks": "^4.1.2",
+    "file-loader": "^6.1.1",
+    "html-webpack-plugin": "^4.5.0",
     "imagemin": "^7.0.0",
-    "jest": "^26.0.1",
-    "mini-css-extract-plugin": "^0.9.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.1",
-    "prettier": "^2.0.5",
+    "jest": "^26.5.3",
+    "mini-css-extract-plugin": "^1.0.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.4",
+    "prettier": "^2.1.2",
     "prop-types": "^15.6.1",
-    "raw-loader": "^4.0.1",
-    "react-axe": "^3.4.1",
+    "raw-loader": "^4.0.2",
+    "react-axe": "^3.5.4",
     "react-docgen-typescript-loader": "^3.7.2",
     "react-router-dom": "^5.2.0",
-    "regenerator-runtime": "^0.13.5",
+    "regenerator-runtime": "^0.13.7",
     "rimraf": "^3.0.2",
-    "style-loader": "^1.2.1",
+    "style-loader": "^2.0.0",
     "svg-url-loader": "^6.0.0",
-    "terser-webpack-plugin": "^3.0.2",
-    "ts-jest": "^26.1.0",
-    "ts-loader": "^7.0.5",
-    "tsconfig-paths-webpack-plugin": "^3.2.0",
-    "tslib": "^2.0.0",
-    "typescript": "^3.9.3",
-    "url-loader": "^4.1.0",
-    "webpack": "^4.43.0",
-    "webpack-bundle-analyzer": "^3.8.0",
-    "webpack-cli": "^3.3.11",
+    "terser-webpack-plugin": "^5.0.0",
+    "ts-jest": "^26.4.1",
+    "ts-loader": "^8.0.5",
+    "tsconfig-paths-webpack-plugin": "^3.3.0",
+    "tslib": "^2.0.3",
+    "typescript": "^4.0.3",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.1.3",
+    "webpack-bundle-analyzer": "^3.9.0",
+    "webpack-cli": "^4.0.0",
     "webpack-dev-server": "^3.11.0",
-    "webpack-merge": "^4.1.4"
+    "webpack-merge": "^5.2.0"
   },
   "dependencies": {
-    "@patternfly/react-core": "^4.32.1",
-    "@patternfly/react-icons": "^4.5.0",
-    "@patternfly/react-styles": "^4.5.0",
+    "@patternfly/react-core": "^4.63.3",
+    "@patternfly/react-icons": "^4.7.11",
+    "@patternfly/react-styles": "^4.7.8",
     "express": "^4.17.1",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
     "react-router-last-location": "^2.0.1"
   }
 }

package.json

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { NavLink, useLocation } from 'react-router-dom';
+import { NavLink, useLocation, useHistory } from 'react-router-dom';
 import {
   Nav,
   NavList,
@@ -11,16 +11,13 @@ import {
   SkipToContent
 } from '@patternfly/react-core';
 import { routes, IAppRoute, IAppRouteGroup } from '@app/routes';
+import logo from '@app/bgimages/Patternfly-Logo.svg';
 
 interface IAppLayout {
   children: React.ReactNode;
 }
 
 const AppLayout: React.FunctionComponent<IAppLayout> = ({children}) => {
-  const logoProps = {
-    href: '/',
-    target: '_blank'
-  };
   const [isNavOpen, setIsNavOpen] = React.useState(true);
   const [isMobileView, setIsMobileView] = React.useState(true);
   const [isNavOpenMobile, setIsNavOpenMobile] = React.useState(false);
@@ -33,10 +30,20 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({children}) => {
   const onPageResize = (props: { mobileView: boolean; windowSize: number }) => {
     setIsMobileView(props.mobileView);
   };
+
+  function LogoImg() {
+    const history = useHistory();
+    function handleClick() {
+      history.push('/');
+    }
+    return (
+      <img src={logo} onClick={handleClick} alt="PatternFly Logo" />
+    );
+  }
+
   const Header = (
     <PageHeader
-      logo="Patternfly"
-      logoProps={logoProps}
+      logo={<LogoImg />}
       showNavToggle
       isNavOpen={isNavOpen}
       onNavToggle={isMobileView ? onNavToggleMobile : onNavToggle}

src/app/AppLayout/AppLayout.tsx

@@ -1,12 +1,40 @@
 import * as React from 'react';
-import { NavLink } from 'react-router-dom';
-import { Alert, PageSection } from '@patternfly/react-core';
+import { ExclamationTriangleIcon } from '@patternfly/react-icons';
+import {
+  PageSection,
+  Title,
+  Button,
+  EmptyState,
+  EmptyStateIcon,
+  EmptyStateBody,
+} from '@patternfly/react-core';
+import { useHistory } from 'react-router-dom';
 
-const NotFound: React.FunctionComponent = () => (
+const NotFound: React.FunctionComponent = () => {
+  function GoHomeBtn() {
+    const history = useHistory();
+    function handleClick() {
+      history.push('/');
+    }
+    return (
+      <Button onClick={handleClick}>Take me home</Button>
+    );
+  }
+
+  return (
     <PageSection>
-      <Alert variant="danger" title="404! This view hasn't been created yet." /><br />
-      <NavLink to="/" className="pf-c-nav__link">Take me home</NavLink>
-    </PageSection>
+    <EmptyState variant="full">
+      <EmptyStateIcon icon={ExclamationTriangleIcon} />
+      <Title headingLevel="h1" size="lg">
+        404 Page not found
+      </Title>
+      <EmptyStateBody>
+        We didn&apos;t find a page that matches the address you navigated to.
+      </EmptyStateBody>
+      <GoHomeBtn />
+    </EmptyState>
+  </PageSection>
   )
+};
 
 export { NotFound };

src/app/NotFound/NotFound.tsx

@@ -26,7 +26,7 @@ const Support = (routeProps: RouteComponentProps): React.ReactElement => {
           loadedComponent = (
             <PageSection aria-label="Loading Content Container">
               <div className="pf-l-bullseye">
-                <Alert title="Loading" className="pf-l-bullseye__item" />
+                <Alert title="Loading" variant="info" className="pf-l-bullseye__item" />
               </div>
             </PageSection>
           );

src/app/bgimages/Patternfly-Logo.svg

@@ -6,7 +6,7 @@
   <title>Patternfly Seed</title>
   <meta id="appName" name="application-name" content="Patternfly Seed">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="icon" type="image/png" href="https://www.patternfly.org/components/patternfly/dist/img/favicon.ico">
+  <link rel="icon" type="image/svg+xml" href="/images/favicon.png">
   <base href="/">
 </head>
 

src/app/routes.tsx

@@ -1,9 +1,10 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CopyPlugin = require('copy-webpack-plugin');
 const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 const Dotenv = require('dotenv-webpack');
 const BG_IMAGES_DIRNAME = 'bgimages';
-
+const ASSET_PATH = process.env.ASSET_PATH || '/';
 module.exports = env => {
 
   return {
@@ -111,7 +112,8 @@ module.exports = env => {
     },
     output: {
       filename: '[name].bundle.js',
-      path: path.resolve(__dirname, 'dist')
+      path: path.resolve(__dirname, 'dist'),
+      publicPath: ASSET_PATH
     },
     plugins: [
       new HtmlWebpackPlugin({
@@ -120,6 +122,11 @@ module.exports = env => {
       new Dotenv({
         systemvars: true,
         silent: true
+      }),
+      new CopyPlugin({
+        patterns: [
+          { from: './src/favicon.png', to: 'images' },
+        ]
       })
     ],
     resolve: {

src/favicon.png

@@ -1,5 +1,5 @@
 const path = require('path');
-const merge = require("webpack-merge");
+const { merge } = require("webpack-merge");
 const common = require("./webpack.common.js");
 const HOST = process.env.HOST || "0.0.0.0";
 const PORT = process.env.PORT || "9000";