fix(demo-app): replace CRA with webpack and ts-loader (patternfly#4877)

* fix(demo-app): replace CRA with webpack and ts-loader

* consistent ts-loader

* upgrade cypress

* fix lint

* update persist path

* update snapshots

* remove more unused deps

.circleci/config.yml

@@ -145,7 +145,7 @@ jobs:
     - persist_to_workspace:
         root: ~/project
         paths:
-          - packages/react-integration/demo-app-ts/build/
+          - packages/react-integration/demo-app-ts/public/
   test_integration:
     docker:
     - image: circleci/node:12

package.json

@@ -39,7 +39,6 @@
     "@typescript-eslint/eslint-plugin": "^2.18.0",
     "@typescript-eslint/parser": "^2.18.0",
     "babel-jest": "^25.1.0",
-    "babel-plugin-typescript-to-proptypes": "^0.17.1",
     "change-case": "^3.0.2",
     "codecov": "^3.7.2",
     "commitizen": "^3.0.7",
@@ -55,11 +54,9 @@
     "eslint-plugin-react": "^7.18.0",
     "fs-extra": "^6.0.1",
     "glob": "^7.1.2",
-    "http-get": "^0.5.10",
     "jest": "24.1.0",
     "jest-cli": "24.1.0",
     "lerna": "3.16.2",
-    "libnpm": "^3.0.1",
     "minimist": "^1.2.0",
     "mutation-observer": "^1.0.3",
     "plop": "^2.0.0",

packages/react-catalog-view-extension/src/components/VerticalTabs/__snapshots__/VerticalTabs.test.tsx.snap

@@ -10,7 +10,7 @@ exports[`Vertical Tabs Tab onActivate is called correctly 1`] = `
       ],
       "results": Array [
         Object {
-          "isThrow": false,
+          "type": "return",
           "value": undefined,
         },
       ],

packages/react-core/src/components/Select/__tests__/__snapshots__/SelectOption.test.tsx.snap

@@ -33,7 +33,7 @@ exports[`select options disabled renders disabled successfully 1`] = `
       ],
       "results": Array [
         Object {
-          "isThrow": false,
+          "type": "return",
           "value": undefined,
         },
       ],
@@ -115,7 +115,7 @@ exports[`select options renders custom component 1`] = `
       ],
       "results": Array [
         Object {
-          "isThrow": false,
+          "type": "return",
           "value": undefined,
         },
       ],
@@ -200,7 +200,7 @@ exports[`select options renders with custom display and custom user object succe
       ],
       "results": Array [
         Object {
-          "isThrow": false,
+          "type": "return",
           "value": undefined,
         },
       ],
@@ -285,7 +285,7 @@ exports[`select options renders with custom display successfully 1`] = `
       ],
       "results": Array [
         Object {
-          "isThrow": false,
+          "type": "return",
           "value": undefined,
         },
       ],
@@ -359,7 +359,7 @@ exports[`select options renders with custom user object successfully 1`] = `
       ],
       "results": Array [
         Object {
-          "isThrow": false,
+          "type": "return",
           "value": undefined,
         },
       ],
@@ -457,7 +457,7 @@ exports[`select options renders with description successfully 1`] = `
       ],
       "results": Array [
         Object {
-          "isThrow": false,
+          "type": "return",
           "value": undefined,
         },
       ],
@@ -538,7 +538,7 @@ exports[`select options renders with value parameter successfully 1`] = `
       ],
       "results": Array [
         Object {
-          "isThrow": false,
+          "type": "return",
           "value": undefined,
         },
       ],

packages/react-core/src/components/SimpleList/__tests__/__snapshots__/SimpleList.test.tsx.snap

@@ -30,7 +30,7 @@ exports[`SimpleList onSelect is called when anchor item is selected 1`] = `
       ],
       "results": Array [
         Object {
-          "isThrow": false,
+          "type": "return",
           "value": undefined,
         },
       ],
@@ -144,7 +144,7 @@ exports[`SimpleList onSelect is called when item is selected 1`] = `
       ],
       "results": Array [
         Object {
-          "isThrow": false,
+          "type": "return",
           "value": undefined,
         },
       ],

packages/react-docs/package.json

@@ -38,7 +38,6 @@
     "@types/react-dom": "^16.8.0",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
-    "react-helmet": "^5.2.1",
     "rimraf": "^2.6.3",
     "serve": "^11.3.2",
     "shx": "^0.3.2",

packages/react-inline-edit-extension/src/components/InlineEdit/__snapshots__/editableRowWrapper.test.tsx.snap

@@ -20,7 +20,7 @@ exports[`editableRowWrapper renders correctly 1`] = `
       ],
       "results": Array [
         Object {
-          "isThrow": false,
+          "type": "return",
           "value": undefined,
         },
       ],

packages/react-integration/demo-app-ts/.gitignore

@@ -1,23 +1 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
+public

packages/react-integration/demo-app-ts/package.json

@@ -3,8 +3,9 @@
   "private": true,
   "version": "4.42.0",
   "scripts": {
-    "build:demo-app": "react-scripts build",
-    "start:demo-app": "react-scripts start"
+    "build:demo-app": "webpack --mode production",
+    "start:demo-app": "webpack-dev-server",
+    "serve:demo-app": "node scripts/serve"
   },
   "dependencies": {
     "@patternfly/react-core": "^4.54.0",
@@ -17,13 +18,17 @@
     "@types/react": "^16.8.0",
     "@types/react-dom": "^16.8.0",
     "@types/react-router-dom": "^4.3.1",
-    "react-scripts": "2.1.3",
-    "typescript": "^3.8.3"
-  },
-  "browserslist": [
-    ">0.2%",
-    "not dead",
-    "not ie <= 11",
-    "not op_mini all"
-  ]
+    "clean-webpack-plugin": "^3.0.0",
+    "copy-webpack-plugin": "^6.1.0",
+    "css-loader": "^4.3.0",
+    "file-loader": "^6.1.0",
+    "html-webpack-plugin": "^4.4.1",
+    "local-web-server": "^2.6.1",
+    "mini-css-extract-plugin": "^0.11.1",
+    "ts-loader": "^8.0.4",
+    "typescript": "^3.8.3",
+    "url-loader": "^4.1.0",
+    "webpack": "^4.43.0",
+    "webpack-cli": "^3.3.12"
+  }
 }

packages/react-integration/demo-app-ts/scripts/serve.js

@@ -0,0 +1,8 @@
+const LocalWebServer = require('local-web-server');
+
+const localWebServer = new LocalWebServer();
+localWebServer.listen({
+  directory: './public',
+  port: 3000,
+  spa: 'index.html'
+});

packages/react-integration/demo-app-ts/src/components/demos/AvatarDemo/AvatarDemo.tsx

@@ -1,6 +1,6 @@
 import { Avatar, AvatarProps } from '@patternfly/react-core';
 import React, { Component } from 'react';
-const avatarImg = '../../../assets/images/imgAvatar.svg';
+import avatarImg from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
 
 export class AvatarDemo extends Component {
   myAvatarProps: AvatarProps = {

packages/react-integration/demo-app-ts/src/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="/favicon.ico" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#000000" />
+    <title>React Demo App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>

packages/react-integration/demo-app-ts/src/index.tsx

@@ -3,11 +3,5 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
-import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(<App />, document.getElementById('root'));
-
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: http://bit.ly/CRA-PWA
-serviceWorker.unregister();