chore(upgrade): upgrade deps, fix storybook

.storybook/webpack.config.js

@@ -1,23 +1,16 @@
 const path = require('path');
 const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 const appConfig = require('../webpack.common');
+const { stylePaths } = require("../stylePaths");
 
 module.exports = ({ config, mode }) => {
   config.module.rules = [];
   config.module.rules.push(...appConfig(mode).module.rules);
   config.module.rules.push({
     test: /\.css$/,
     include: [
-      path.resolve(__dirname, '../src'),
       path.resolve(__dirname, '../node_modules/@storybook'),
-      path.resolve(__dirname, '../node_modules/patternfly'),
-      path.resolve(__dirname, '../node_modules/@patternfly/patternfly'),
-      path.resolve(__dirname, '../node_modules/@patternfly/react-styles/css'),
-      path.resolve(__dirname, '../node_modules/@patternfly/react-core/dist/styles/base.css'),
-      path.resolve(__dirname, '../node_modules/@patternfly/react-core/dist/esm/@patternfly/patternfly'),
-      path.resolve(__dirname, '../node_modules/@patternfly/react-core/node_modules/@patternfly/react-styles/css'),
-      path.resolve(__dirname, '../node_modules/@patternfly/react-table/node_modules/@patternfly/react-styles/css'),
-      path.resolve(__dirname, '../node_modules/@patternfly/react-inline-edit-extension/node_modules/@patternfly/react-styles/css')
+      ...stylePaths
     ],
     use: ["style-loader", "css-loader"]
   });

README.md

@@ -4,16 +4,16 @@ Patternfly Seed is an open source build scaffolding utility for web apps. The pr
 
 Out of the box you'll get an app layout with chrome (header/sidebar), routing, build pipeline, test suite, and some code quality tools. Basically, all the essentials.
 
-<img width="1058" alt="Out of box dashboard view of patternfly seed" src="https://user-images.githubusercontent.com/5942899/82119580-b4cf9380-974d-11ea-9f13-fa10471c5c73.png">
+<img width="1058" alt="Out of box dashboard view of patternfly seed" src="https://user-images.githubusercontent.com/5942899/103803761-03a0a500-501f-11eb-870a-345d7d035e6b.png">
 
 ## Quick-start
 
 ```bash
 git clone https://github.com/patternfly/patternfly-react-seed
-cd patternfly-react-seed 
-npm install && npm run start:dev 
+cd patternfly-react-seed
+npm install && npm run start:dev
 ```
-## Development Scripts
+## Development scripts
 ```sh
 # Install development/build dependencies
 npm install
@@ -52,7 +52,7 @@ npm run build:storybook
 * [Jest Config](./jest.config.js)
 * [Editor Config](./.editorconfig)
 
-## Raster Image Support
+## Raster image support
 
 To use an image asset that's shipped with PatternFly core, you'll prefix the paths with "@assets". `@assets` is an alias for the PatternFly assets directory in node_modules.
 
@@ -69,7 +69,7 @@ import loader from '@app/assets/images/loader.gif';
 <img src={loader} alt="Content loading />
 ```
 
-## Vector Image Support
+## Vector image support
 Inlining SVG in the app's markup is also possible.
 
 ```js
@@ -84,7 +84,10 @@ body {
 }
 ```
 
-## Code Quality Tools
+## Adding custom CSS
+When importing CSS from a third-party package for the first time, you may encounter the error `Module parse failed: Unexpected token... You may need an appropriate loader to handle this file typ...`. You need to register the path to the stylesheet directory in [stylePaths.js](./stylePaths.js). We specify these explicity for performance reasons to avoid webpack needing to crawl through the entire node_modules directory when parsing CSS modules.
+
+## Code quality tools
 * For accessibility compliance, we use [react-axe](https://github.com/dequelabs/react-axe)
 * To keep our bundle size in check, we use [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer)
 * To keep our code formatting in check, we use [prettier](https://github.com/prettier/prettier)