Convert demo application to Vite (#10510)

Signed-off-by: Jon Koops <jonkoops@gmail.com>
patternfly · Jun 5, 2024 · f4228be · f4228be
1 parent ca93007
commit f4228be
Show file tree

Hide file tree

Showing 80 changed files with 607 additions and 3,336 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -16,7 +16,7 @@ packages/react-docs/.cache
 packages/react-docs/static
 packages/react-docs/public
 packages/react-integration/results
-packages/react-integration/demo-app-ts/public
+packages/react-integration/demo-app-ts/dist
 
 # package managers
 yarn-error.log

diff --git a/.eslintrc.json b/.eslintrc.json
@@ -136,6 +136,14 @@
                 "react/jsx-key": "off",
                 "no-console": "off"
             }
+        },
+        {
+            "files": ["packages/react-integration/demo-app-ts/**/*"],
+            "rules": {
+                "patternfly-react/no-anonymous-functions": "off",
+                "react/react-in-jsx-scope": "off",
+                "spaced-comment": "off"
+            }
         }
     ]
 }
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -66,7 +66,7 @@ jobs:
         uses: actions/upload-artifact@v4
         with:
           name: demo-app
-          path: packages/react-integration/demo-app-ts/public
+          path: packages/react-integration/demo-app-ts/dist
 
   integration-tests:
     name: Integration tests
@@ -87,7 +87,7 @@ jobs:
         uses: actions/download-artifact@v4
         with:
           name: demo-app
-          path: packages/react-integration/demo-app-ts/public
+          path: packages/react-integration/demo-app-ts/dist
 
       - name: Print environment variables
         run: printenv

diff --git a/package.json b/package.json
@@ -75,7 +75,7 @@
     "build": "yarn clean && yarn build:generate && yarn build:esm && yarn build:cjs && yarn build:subpaths && yarn build:single:packages",
     "build:cjs": "tsc --build --verbose packages/tsconfig.cjs.json",
     "build:esm": "tsc --build --verbose packages/tsconfig.json",
-    "build:integration": "lerna run build:demo-app --stream",
+    "build:integration": "lerna run build --scope=demo-app-ts --stream",
     "build:docs": "yarn workspace @patternfly/react-docs build:docs",
     "build:generate": "lerna run generate --parallel --stream",
     "build:subpaths": "lerna run subpaths --parallel --stream",
@@ -93,11 +93,10 @@
     "lint:tests": "yarn lint packages/*/src/components/*/__tests__/*.test.*",
     "prepare": "ts-patch install -s",
     "serve:docs": "yarn workspace @patternfly/react-docs serve",
-    "serve:integration": "lerna run serve:demo-app",
+    "serve:integration": "lerna run preview --scope=demo-app-ts",
     "start": "yarn build && concurrently --kill-others \"yarn watch\" \"yarn workspace @patternfly/react-docs develop\"",
     "start:cypress": "lerna run cypress:open",
-    "start:demo-app": "lerna run start:demo-app --stream",
-    "start:demo-app:hot": "lerna run start:demo-app:hot --stream",
+    "start:demo-app": "lerna run dev --scope=demo-app-ts --stream",
     "test": "TZ=EST LC_ALL=en_US.UTF8 jest packages",
     "test:a11y": "lerna run test:a11y --stream",
     "test:integration": "yarn workspace @patternfly/react-integration test:integration",

diff --git a/packages/react-integration/demo-app-ts/.env b/packages/react-integration/demo-app-ts/.env
diff --git a/packages/react-integration/demo-app-ts/.gitignore b/packages/react-integration/demo-app-ts/.gitignore
diff --git a/packages/react-integration/demo-app-ts/index.html b/packages/react-integration/demo-app-ts/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>React Demo App</title>
+    <link rel="icon" type="image/svg+xml" href="/vite.svg">
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/packages/react-integration/demo-app-ts/package.json b/packages/react-integration/demo-app-ts/package.json
@@ -2,11 +2,11 @@
   "name": "demo-app-ts",
   "private": true,
   "version": "5.1.1-prerelease.122",
+  "type": "module",
   "scripts": {
-    "build:demo-app": "webpack --mode production",
-    "start:demo-app": "webpack-dev-server",
-    "start:demo-app:hot": "webpack-dev-server --hot=true",
-    "serve:demo-app": "node scripts/serve"
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview --port 3000"
   },
   "dependencies": {
     "@patternfly/react-core": "^5.4.0-prerelease.15",
@@ -16,28 +16,9 @@
     "react-router-dom": "^5.3.4"
   },
   "devDependencies": {
-    "@pmmmwh/react-refresh-webpack-plugin": "0.5.15",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
-    "classnames": "^2.5.1",
-    "clean-webpack-plugin": "^3.0.0",
-    "copy-webpack-plugin": "^6.4.1",
-    "css-loader": "^4.3.0",
-    "file-loader": "^6.2.0",
-    "fork-ts-checker-webpack-plugin": "6.5.3",
-    "html-webpack-plugin": "^5.5.0",
-    "local-web-server": "^2.6.1",
-    "mini-css-extract-plugin": "^0.12.0",
-    "react-hot-loader": "4.13.1",
-    "react-refresh": "0.14.0",
-    "react-refresh-typescript": "2.0.9",
-    "style-loader": "3.3.4",
-    "ts-loader": "^8.3.0",
-    "url-loader": "^4.1.0",
-    "webpack": "5.91.0",
-    "webpack-cli": "4.10.0",
-    "webpack-dev-server": "4.15.2"
+    "@types/react-router": "^5.1.20",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "vite": "^5.2.0"
   }
 }
diff --git a/packages/react-integration/demo-app-ts/public/vite.svg b/packages/react-integration/demo-app-ts/public/vite.svg
diff --git a/packages/react-integration/demo-app-ts/scripts/serve.js b/packages/react-integration/demo-app-ts/scripts/serve.js
diff --git a/packages/react-integration/demo-app-ts/src/App.css b/packages/react-integration/demo-app-ts/src/App.css
@@ -25,16 +25,6 @@
   color: #61dafb;
 }
 
-#webpack-dev-server-client-overlay,
-#react-refresh-overlay {
-  height: 75px !important;
-  min-height: 75px !important;
-  left: 50% !important;
-  top: 0px !important;
-  width: 400px !important;
-  position: absolute !important;
-}
-
 @keyframes App-logo-spin {
   from {
     transform: rotate(0deg);

diff --git a/packages/react-integration/demo-app-ts/src/App.test.tsx b/packages/react-integration/demo-app-ts/src/App.test.tsx
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/AboutModal/AboutModalDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/AboutModal/AboutModalDemo.tsx
@@ -25,7 +25,7 @@ export class AboutModalDemo extends React.Component<{}, AboutModalState> {
     const { isModalOpen } = this.state;
 
     return (
-      <React.Fragment>
+      <>
         <Button id="modal-button" variant="primary" onClick={this.handleModalToggle}>
           Show About Modal
         </Button>
@@ -56,7 +56,7 @@ export class AboutModalDemo extends React.Component<{}, AboutModalState> {
             </TextList>
           </TextContent>
         </AboutModal>
-      </React.Fragment>
+      </>
     );
   }
 }
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/AlertDemo/AlertDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/AlertDemo/AlertDemo.tsx
@@ -24,7 +24,7 @@ export class AlertDemo extends React.Component<{}, AlertDemoState> {
   render() {
     const { alertOneVisible, alertTwoVisible } = this.state;
     return (
-      <React.Fragment>
+      <>
         {alertOneVisible && (
           <Alert
             id="info-alert"
@@ -65,7 +65,7 @@ export class AlertDemo extends React.Component<{}, AlertDemoState> {
         <Alert id="expandable-alert" title="Expandable alert title" isExpandable>
           Expandable alert description
         </Alert>
-      </React.Fragment>
+      </>
     );
   }
 }
diff --git a/...ct-integration/demo-app-ts/src/components/demos/AlertDemo/AlertTimeoutCloseButtonDemo.tsx b/...ct-integration/demo-app-ts/src/components/demos/AlertDemo/AlertTimeoutCloseButtonDemo.tsx
@@ -23,7 +23,7 @@ export class AlertTimeoutCloseButtonDemo extends React.Component<{}, AlertTimeou
   render() {
     const { isOpenAlert } = this.state;
     return (
-      <React.Fragment>
+      <>
         <Button id="close-button-alert-button" onClick={this.onClick}>
           Open Alert
         </Button>
@@ -37,7 +37,7 @@ export class AlertTimeoutCloseButtonDemo extends React.Component<{}, AlertTimeou
             Alert with close button and timeout
           </Alert>
         )}
-      </React.Fragment>
+      </>
     );
   }
 }
diff --git a/...ages/react-integration/demo-app-ts/src/components/demos/AlertGroupDemo/AlertGroupDemo.tsx b/...ages/react-integration/demo-app-ts/src/components/demos/AlertGroupDemo/AlertGroupDemo.tsx
@@ -63,7 +63,7 @@ export class AlertGroupDemo extends React.Component<{}, AlertGroupDemoState> {
       this.setState({ timer: timerValue });
     };
     return (
-      <React.Fragment>
+      <>
         <InputGroup style={{ marginBottom: '16px' }}>
           <InputGroupItem>
             <button onClick={startAsyncAlerts} type="button" className={btnClasses}>
@@ -87,7 +87,7 @@ export class AlertGroupDemo extends React.Component<{}, AlertGroupDemoState> {
             />
           ))}
         </AlertGroup>
-      </React.Fragment>
+      </>
     );
   }
 }

diff --git a/...ation/demo-app-ts/src/components/demos/AlertGroupDemo/AlertGroupTimeoutFromBottomDemo.tsx b/...ation/demo-app-ts/src/components/demos/AlertGroupDemo/AlertGroupTimeoutFromBottomDemo.tsx
@@ -11,7 +11,7 @@ export const AlertGroupTimeoutFromBottomDemo: React.FunctionComponent = () => {
         title={`Alert no. ${count}`}
         timeout={timeout}
         actionLinks={
-          <React.Fragment>
+          <>
             <AlertActionLink component="a" href="#">
               View details
             </AlertActionLink>
@@ -20,7 +20,7 @@ export const AlertGroupTimeoutFromBottomDemo: React.FunctionComponent = () => {
             >
               Ignore
             </AlertActionLink>
-          </React.Fragment>
+          </>
         }
         key={`Alert no. ${count}`}
         id={`Alert no. ${count}`}
@@ -33,12 +33,12 @@ export const AlertGroupTimeoutFromBottomDemo: React.FunctionComponent = () => {
   };
 
   return (
-    <React.Fragment>
+    <>
       <Button variant="secondary" onClick={onClick}>
         Add alert
       </Button>
       <AlertGroup>{alerts}</AlertGroup>
-    </React.Fragment>
+    </>
   );
 };
 

diff --git a/packages/react-integration/demo-app-ts/src/components/demos/BackToTopDemo/BackToTopDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/BackToTopDemo/BackToTopDemo.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import {
   BackToTop,
   Card,

diff --git a/packages/react-integration/demo-app-ts/src/components/demos/CardDemo/CardDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/CardDemo/CardDemo.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import {
   Brand,
   Button,
@@ -18,10 +17,12 @@ import {
   MenuToggle
 } from '@patternfly/react-core';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import { Component } from 'react';
+
 const pfLogo = '../../../assets/images/pfLogo.svg';
 
 interface CardDemoState {
-  selected: string;
+  selected: string | null;
   isExpanded: boolean;
   isOpen: boolean;
   selectableChecked1: boolean;
@@ -33,7 +34,7 @@ interface CardDemoState {
   selectaleClickableDrawerIsExpanded: boolean;
 }
 
-class CardDemo extends React.Component {
+class CardDemo extends Component {
   static displayName = 'CardDemo';
 
   state: CardDemoState = {
@@ -153,7 +154,7 @@ class CardDemo extends React.Component {
     );
 
     return (
-      <React.Fragment>
+      <>
         <Card id="cardWithActions">
           <CardHeader actions={{ actions, hasNoOffset: true }}>
             <Brand src={pfLogo} alt="PatternFly" style={{ height: '50px' }} />
@@ -345,7 +346,7 @@ class CardDemo extends React.Component {
             </DrawerContent>
           </Drawer>
         </div>
-      </React.Fragment>
+      </>
     );
   }
 }

diff --git a/...integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupDefaultIsOpenDemo.tsx b/...integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupDefaultIsOpenDemo.tsx
@@ -1,5 +1,5 @@
 import { Badge, Chip, ChipGroup } from '@patternfly/react-core';
-import React, { Component } from 'react';
+import { Component } from 'react';
 
 interface BadgeChipState {
   badgeChipArray: {

diff --git a/packages/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupDemo.tsx
@@ -1,5 +1,5 @@
 import { Badge, Chip, ChipGroup } from '@patternfly/react-core';
-import React, { Component } from 'react';
+import { Component } from 'react';
 
 interface BadgeChipState {
   badgeChipArray: {

diff --git a/...-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupWithCategoryDemo.tsx b/...-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupWithCategoryDemo.tsx
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { Chip, ChipGroup } from '@patternfly/react-core';
 
 interface ChipWithCategoryGroupState {

diff --git a/.../demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupWithOverflowChipEventHandler.tsx b/.../demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupWithOverflowChipEventHandler.tsx
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { Chip, ChipGroup } from '@patternfly/react-core';
 import { css } from '@patternfly/react-styles';
 import titleStyles from '@patternfly/react-styles/css/components/Title/title';

diff --git a/...eact-integration/demo-app-ts/src/components/demos/ClipboardCopyDemo/ClipboardCopyDemo.tsx b/...eact-integration/demo-app-ts/src/components/demos/ClipboardCopyDemo/ClipboardCopyDemo.tsx
@@ -7,7 +7,7 @@ export class ClipboardCopyDemo extends React.Component {
   static displayName = 'ClipboardCopyDemo';
   render() {
     return (
-      <React.Fragment>
+      <>
         <ClipboardCopy variant={ClipboardCopyVariant.expansion}>
           Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting
           expansion.
@@ -55,7 +55,7 @@ export class ClipboardCopyDemo extends React.Component {
         >
           Some random text.
         </ClipboardCopy>
-      </React.Fragment>
+      </>
     );
   }
 }
diff --git a/...n/demo-app-ts/src/components/demos/DescriptionListDemo/DescriptionListBreakpointsDemo.tsx b/...n/demo-app-ts/src/components/demos/DescriptionListDemo/DescriptionListBreakpointsDemo.tsx
@@ -10,7 +10,7 @@ import {
   Divider
 } from '@patternfly/react-core';
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
-import React, { Component } from 'react';
+import { Component } from 'react';
 
 export class DescriptionListBreakpointsDemo extends Component {
   componentDidMount() {

diff --git a/...-integration/demo-app-ts/src/components/demos/DescriptionListDemo/DescriptionListDemo.tsx b/...-integration/demo-app-ts/src/components/demos/DescriptionListDemo/DescriptionListDemo.tsx
@@ -13,7 +13,7 @@ import {
   Popover
 } from '@patternfly/react-core';
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
-import React, { Component } from 'react';
+import { Component } from 'react';
 
 export class DescriptionListDemo extends Component {
   componentDidMount() {