From 8913843e05ebd212dbbe8e8f4df7a9986df0a456 Mon Sep 17 00:00:00 2001 From: Jon Koops Date: Mon, 3 Jun 2024 19:19:32 +0200 Subject: [PATCH] Convert demo application to Vite Signed-off-by: Jon Koops --- .eslintignore | 2 +- .eslintrc.json | 8 + .github/workflows/main.yml | 4 +- package.json | 7 +- packages/react-integration/demo-app-ts/.env | 1 - .../react-integration/demo-app-ts/.gitignore | 1 - .../react-integration/demo-app-ts/index.html | 13 + .../demo-app-ts/package.json | 33 +- .../demo-app-ts/public/vite.svg | 1 + .../demo-app-ts/scripts/serve.js | 8 - .../react-integration/demo-app-ts/src/App.css | 10 - .../demo-app-ts/src/App.test.tsx | 14 - .../demos/AboutModal/AboutModalDemo.tsx | 4 +- .../components/demos/AlertDemo/AlertDemo.tsx | 4 +- .../AlertDemo/AlertTimeoutCloseButtonDemo.tsx | 4 +- .../demos/AlertGroupDemo/AlertGroupDemo.tsx | 4 +- .../AlertGroupTimeoutFromBottomDemo.tsx | 8 +- .../demos/BackToTopDemo/BackToTopDemo.tsx | 1 - .../components/demos/CardDemo/CardDemo.tsx | 11 +- .../ChipGroupDefaultIsOpenDemo.tsx | 2 +- .../demos/ChipGroupDemo/ChipGroupDemo.tsx | 2 +- .../ChipGroupWithCategoryDemo.tsx | 2 +- .../ChipGroupWithOverflowChipEventHandler.tsx | 2 +- .../ClipboardCopyDemo/ClipboardCopyDemo.tsx | 4 +- .../DescriptionListBreakpointsDemo.tsx | 2 +- .../DescriptionListDemo.tsx | 2 +- .../demos/DrawerDemo/DrawerDemo.tsx | 4 +- .../demos/DrawerDemo/DrawerResizeDemo.tsx | 4 +- .../ExpandableSectionDemo.tsx | 4 +- .../components/demos/FormDemo/FormDemo.tsx | 4 +- .../demos/InputGroupDemo/InputGroupDemo.tsx | 4 +- .../demos/JumpLinksDemo/JumpLinksDemo.tsx | 5 +- .../components/demos/LabelDemo/LabelDemo.tsx | 6 +- .../LabelGroupDemo/LabelGroupEditableDemo.tsx | 2 +- .../LabelGroupDemo/LabelGroupVerticalDemo.tsx | 2 +- .../LabelGroupWithCategoryDemo.tsx | 2 +- .../demos/LoginPageDemo/LoginPageDemo.tsx | 16 +- .../demos/MastheadDemo/MastheadDemo.tsx | 2 +- .../components/demos/MenuDemo/MenuDemo.tsx | 4 +- .../components/demos/ModalDemo/ModalDemo.tsx | 8 +- .../demos/ModalNextDemo/ModalNextDemo.tsx | 4 +- .../demos/NumberInputDemo/NumberInputDemo.tsx | 4 +- .../demos/OptionsMenuDemo/OptionsMenuDemo.tsx | 10 +- .../OverflowMenuDemo/OverflowMenuDemo.tsx | 4 +- .../demos/PaginationDemo/PaginationDemo.tsx | 12 +- .../components/demos/RadioDemo/RadioDemo.tsx | 4 +- .../demos/SearchInputDemo/SearchInputDemo.tsx | 4 +- .../SelectDeprecatedDemo/SelectInModal.tsx | 4 +- .../demos/SimpleList/SimpleListDemo.tsx | 4 +- .../demos/SliderDemo/SliderDemo.tsx | 2 +- .../components/demos/StackDemo/StackDemo.tsx | 6 +- .../demos/SwitchDemo/SwitchDemo.tsx | 8 +- .../demos/TableDemo/TableComposableDemo.tsx | 24 +- .../TableDemo/TableCompoundExpandableDemo.tsx | 24 +- .../TableEditableCompoundExpandableDemo.tsx | 24 +- .../demos/TableDemo/TableFavoritesDemo.tsx | 2 +- .../demos/TableDemo/TableRowClickDemo.tsx | 4 +- .../components/demos/TabsDemo/TabsDemo.tsx | 4 +- .../demos/TabsDemo/TabsExpandableDemo.tsx | 4 +- .../demos/TabsDemo/TabsStringEventKeyDemo.tsx | 4 +- .../demos/TabsDemo/TabsUncontrolledDemo.tsx | 4 +- .../demos/TextAreaDemo/TextAreaDemo.tsx | 4 +- .../demos/TextInputDemo/TextInputDemo.tsx | 4 +- .../demos/ToolbarDemo/ToolbarDemo.tsx | 12 +- .../ToolbarDemo/ToolbarVisibilityDemo.tsx | 16 +- .../demos/TreeViewDemo/TreeViewDemo.tsx | 6 +- .../demos/WizardDemo/WizardDemo.tsx | 4 +- .../WizardDeprecatedDemo.tsx | 4 +- .../demo-app-ts/src/custom.d.ts | 4 - .../demo-app-ts/src/index.html | 17 - .../demo-app-ts/src/{index.tsx => main.tsx} | 14 +- .../demo-app-ts/src/vite-env.d.ts | 1 + .../demo-app-ts/static/favicon.ico | Bin 3870 -> 0 bytes .../demo-app-ts/tsconfig.dev.json | 15 - .../demo-app-ts/tsconfig.json | 40 +- .../demo-app-ts/tsconfig.node.json | 11 + .../demo-app-ts/vite.config.ts | 10 + .../demo-app-ts/webpack.config.js | 142 - packages/react-integration/package.json | 7 +- yarn.lock | 3251 ++--------------- 80 files changed, 607 insertions(+), 3336 deletions(-) delete mode 100644 packages/react-integration/demo-app-ts/.env delete mode 100644 packages/react-integration/demo-app-ts/.gitignore create mode 100644 packages/react-integration/demo-app-ts/index.html create mode 100644 packages/react-integration/demo-app-ts/public/vite.svg delete mode 100644 packages/react-integration/demo-app-ts/scripts/serve.js delete mode 100755 packages/react-integration/demo-app-ts/src/App.test.tsx delete mode 100644 packages/react-integration/demo-app-ts/src/custom.d.ts delete mode 100755 packages/react-integration/demo-app-ts/src/index.html rename packages/react-integration/demo-app-ts/src/{index.tsx => main.tsx} (61%) mode change 100755 => 100644 create mode 100644 packages/react-integration/demo-app-ts/src/vite-env.d.ts delete mode 100755 packages/react-integration/demo-app-ts/static/favicon.ico delete mode 100644 packages/react-integration/demo-app-ts/tsconfig.dev.json create mode 100644 packages/react-integration/demo-app-ts/tsconfig.node.json create mode 100644 packages/react-integration/demo-app-ts/vite.config.ts delete mode 100644 packages/react-integration/demo-app-ts/webpack.config.js diff --git a/.eslintignore b/.eslintignore index cdfefe2893d..6839bf69a5e 100644 --- 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 index 3a119092f7d..9acf76f38a1 100644 --- 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 index e4fc55e74fb..64ccb220488 100644 --- 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 index fe7e9b71974..99697e22e89 100644 --- 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 deleted file mode 100644 index 7d910f1484c..00000000000 --- a/packages/react-integration/demo-app-ts/.env +++ /dev/null @@ -1 +0,0 @@ -SKIP_PREFLIGHT_CHECK=true \ No newline at end of file diff --git a/packages/react-integration/demo-app-ts/.gitignore b/packages/react-integration/demo-app-ts/.gitignore deleted file mode 100644 index a48cf0de7af..00000000000 --- a/packages/react-integration/demo-app-ts/.gitignore +++ /dev/null @@ -1 +0,0 @@ -public diff --git a/packages/react-integration/demo-app-ts/index.html b/packages/react-integration/demo-app-ts/index.html new file mode 100644 index 00000000000..b680cfed6c0 --- /dev/null +++ b/packages/react-integration/demo-app-ts/index.html @@ -0,0 +1,13 @@ + + + + + + React Demo App + + + +
+ + + diff --git a/packages/react-integration/demo-app-ts/package.json b/packages/react-integration/demo-app-ts/package.json index 40056a85cde..a5a60b2a97a 100644 --- 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 new file mode 100644 index 00000000000..e7b8dfb1b2a --- /dev/null +++ b/packages/react-integration/demo-app-ts/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/react-integration/demo-app-ts/scripts/serve.js b/packages/react-integration/demo-app-ts/scripts/serve.js deleted file mode 100644 index b035453ee46..00000000000 --- a/packages/react-integration/demo-app-ts/scripts/serve.js +++ /dev/null @@ -1,8 +0,0 @@ -const LocalWebServer = require('local-web-server'); - -const localWebServer = new LocalWebServer(); -localWebServer.listen({ - directory: './public', - port: 3000, - spa: 'index.html' -}); diff --git a/packages/react-integration/demo-app-ts/src/App.css b/packages/react-integration/demo-app-ts/src/App.css index 7a7a4ddba95..99235253251 100755 --- 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 deleted file mode 100755 index 772b5f88d60..00000000000 --- a/packages/react-integration/demo-app-ts/src/App.test.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React, { StrictMode } from 'react'; -import { createRoot } from 'react-dom/client'; -import App from './App'; - -it('renders without crashing', () => { - const container = document.createElement('div'); - const root = createRoot(container); - root.render( - - - - ); - root.unmount(); -}); 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 index c144e87e3a4..3cda19c050f 100644 --- 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 ( - + <> @@ -56,7 +56,7 @@ export class AboutModalDemo extends React.Component<{}, AboutModalState> { - + ); } } 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 index 3898cf36a85..8934b159b19 100644 --- 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 ( - + <> {alertOneVisible && ( { Expandable alert description - + ); } } diff --git a/packages/react-integration/demo-app-ts/src/components/demos/AlertDemo/AlertTimeoutCloseButtonDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/AlertDemo/AlertTimeoutCloseButtonDemo.tsx index b2bc63cc11c..357959dd58d 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/AlertDemo/AlertTimeoutCloseButtonDemo.tsx +++ b/packages/react-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 ( - + <> @@ -37,7 +37,7 @@ export class AlertTimeoutCloseButtonDemo extends React.Component<{}, AlertTimeou Alert with close button and timeout )} - + ); } } diff --git a/packages/react-integration/demo-app-ts/src/components/demos/AlertGroupDemo/AlertGroupDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/AlertGroupDemo/AlertGroupDemo.tsx index 533031e651e..62f2fcbe810 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/AlertGroupDemo/AlertGroupDemo.tsx +++ b/packages/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 ( - + <> {alerts} - + ); }; 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 index cb667533019..e16ad487d66 100644 --- 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 index 404476759aa..96851d6da59 100644 --- 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 ( - + <> @@ -345,7 +346,7 @@ class CardDemo extends React.Component { - + ); } } diff --git a/packages/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupDefaultIsOpenDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupDefaultIsOpenDemo.tsx index fb4f40d555f..e5908bfe181 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupDefaultIsOpenDemo.tsx +++ b/packages/react-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 index 6a4ead7ffd3..7df94e69332 100644 --- 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/packages/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupWithCategoryDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupWithCategoryDemo.tsx index d9c6737989a..2bd15f3b42a 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupWithCategoryDemo.tsx +++ b/packages/react-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/packages/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupWithOverflowChipEventHandler.tsx b/packages/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupWithOverflowChipEventHandler.tsx index 8f3bcb3d1b8..21f626870bd 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupWithOverflowChipEventHandler.tsx +++ b/packages/react-integration/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/packages/react-integration/demo-app-ts/src/components/demos/ClipboardCopyDemo/ClipboardCopyDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/ClipboardCopyDemo/ClipboardCopyDemo.tsx index cd4f0b3f555..f400a400867 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/ClipboardCopyDemo/ClipboardCopyDemo.tsx +++ b/packages/react-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 ( - + <> 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. - + ); } } diff --git a/packages/react-integration/demo-app-ts/src/components/demos/DescriptionListDemo/DescriptionListBreakpointsDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/DescriptionListDemo/DescriptionListBreakpointsDemo.tsx index 7d0a53734f5..d18a2261990 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/DescriptionListDemo/DescriptionListBreakpointsDemo.tsx +++ b/packages/react-integration/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/packages/react-integration/demo-app-ts/src/components/demos/DescriptionListDemo/DescriptionListDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/DescriptionListDemo/DescriptionListDemo.tsx index 2f358be5d9a..340b5f9e5d9 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/DescriptionListDemo/DescriptionListDemo.tsx +++ b/packages/react-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() { diff --git a/packages/react-integration/demo-app-ts/src/components/demos/DrawerDemo/DrawerDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/DrawerDemo/DrawerDemo.tsx index 922f01a8383..3947e8ef169 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/DrawerDemo/DrawerDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/DrawerDemo/DrawerDemo.tsx @@ -119,7 +119,7 @@ export class DrawerDemo extends React.Component { 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.'; return ( - + <> @@ -149,7 +149,7 @@ export class DrawerDemo extends React.Component { {drawerContent} - + ); } } diff --git a/packages/react-integration/demo-app-ts/src/components/demos/DrawerDemo/DrawerResizeDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/DrawerDemo/DrawerResizeDemo.tsx index d91fee2ced3..afa32cb83d0 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/DrawerDemo/DrawerResizeDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/DrawerDemo/DrawerResizeDemo.tsx @@ -75,7 +75,7 @@ export class DrawerResizeDemo extends React.Component + <> @@ -85,7 +85,7 @@ export class DrawerResizeDemo extends React.Component{drawerContent} - + ); } } diff --git a/packages/react-integration/demo-app-ts/src/components/demos/ExpandableSectionDemo/ExpandableSectionDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/ExpandableSectionDemo/ExpandableSectionDemo.tsx index 4c5a5f68cca..0bd22e40ba8 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/ExpandableSectionDemo/ExpandableSectionDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/ExpandableSectionDemo/ExpandableSectionDemo.tsx @@ -26,7 +26,7 @@ export class ExpandableSectionDemo extends React.Component + <>

Simple Expandable Example:

This content is visible only when the component is expanded. - + ); } } diff --git a/packages/react-integration/demo-app-ts/src/components/demos/FormDemo/FormDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/FormDemo/FormDemo.tsx index 9fab4e0d1aa..7afc5ce5131 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/FormDemo/FormDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/FormDemo/FormDemo.tsx @@ -107,7 +107,7 @@ export class FormDemo extends Component { ]; return ( - + <>
{
- + ); } } diff --git a/packages/react-integration/demo-app-ts/src/components/demos/InputGroupDemo/InputGroupDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/InputGroupDemo/InputGroupDemo.tsx index 00f54a66816..45e24556079 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/InputGroupDemo/InputGroupDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/InputGroupDemo/InputGroupDemo.tsx @@ -51,7 +51,7 @@ export class InputGroupDemo extends React.Component<{}, InputGroupState> { render() { return ( - + <> @@ -104,6 +104,6 @@ export const SelectInModal = () => { - + ); }; diff --git a/packages/react-integration/demo-app-ts/src/components/demos/SimpleList/SimpleListDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/SimpleList/SimpleListDemo.tsx index adfbd4e9d4e..a7873132d79 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/SimpleList/SimpleListDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/SimpleList/SimpleListDemo.tsx @@ -23,7 +23,7 @@ export class SimpleListDemo extends React.Component { const { activeItem } = this.state; return ( - + <>

Simple List

Item 1 @@ -66,7 +66,7 @@ export class SimpleListDemo extends React.Component { Item 3 - + ); } } diff --git a/packages/react-integration/demo-app-ts/src/components/demos/SliderDemo/SliderDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/SliderDemo/SliderDemo.tsx index b8ddd6461a2..a1c655d819b 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/SliderDemo/SliderDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/SliderDemo/SliderDemo.tsx @@ -1,5 +1,5 @@ import { Slider, SliderOnChangeEvent } from '@patternfly/react-core'; -import React, { Component } from 'react'; +import { Component } from 'react'; export interface SliderDemoState { valueDiscrete: number; diff --git a/packages/react-integration/demo-app-ts/src/components/demos/StackDemo/StackDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/StackDemo/StackDemo.tsx index 72270a33ddb..6e2dc811da2 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/StackDemo/StackDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/StackDemo/StackDemo.tsx @@ -1,10 +1,10 @@ -import React, { Component } from 'react'; +import { Component } from 'react'; import { Badge, Stack, StackItem } from '@patternfly/react-core'; export class StackDemo extends Component { render() { return ( - + <> 3 13 @@ -12,7 +12,7 @@ export class StackDemo extends Component { pf-m-fill content - + ); } } diff --git a/packages/react-integration/demo-app-ts/src/components/demos/SwitchDemo/SwitchDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/SwitchDemo/SwitchDemo.tsx index 00b88c37a4a..f50ada917fc 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/SwitchDemo/SwitchDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/SwitchDemo/SwitchDemo.tsx @@ -50,7 +50,7 @@ export class SwitchDemo extends React.Component<{}, SwitchState> { simple: { isChecked } } = this.state; return ( - + <> Message when on} @@ -67,7 +67,7 @@ export class SwitchDemo extends React.Component<{}, SwitchState> { isChecked={false} isDisabled /> - + ); } @@ -104,10 +104,10 @@ export class SwitchDemo extends React.Component<{}, SwitchState> { render() { return ( - + <> {this.renderSimple()} {this.renderTable()} - + ); } } diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableComposableDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableComposableDemo.tsx index 9e0a48547d8..839af38cc66 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableComposableDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableComposableDemo.tsx @@ -483,7 +483,7 @@ export const TableComposableDemo = () => { setChoice(id); }; return ( - + <> @@ -534,7 +534,7 @@ export const TableComposableDemo = () => { ))} - + ); }; @@ -593,7 +593,7 @@ export const TableComposableDemo = () => { }; let rowIndex = -1; return ( - + <> @@ -695,7 +695,7 @@ export const TableComposableDemo = () => { ); })} - + ); }; @@ -798,21 +798,21 @@ export const TableComposableDemo = () => { return {cell}; } else if (index === 1) { return ( - + <> {cell} - + ); } else if (index === 2) { return ( - + <> {cell} - + ); } else if (index === 3) { return ( - + <> {cell} - + ); } else if (index === 5) { return {cell}; @@ -839,7 +839,7 @@ export const TableComposableDemo = () => { const isRowExpanded = activeChild[rowIndex] !== null; return ( - + <> {row.map((cell, cellIndex) => { // for this example, only columns 1 - 3 are clickable @@ -889,7 +889,7 @@ export const TableComposableDemo = () => { )} - + ); })} diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableCompoundExpandableDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableCompoundExpandableDemo.tsx index 42ae7a54006..349ea29a89c 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableCompoundExpandableDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableCompoundExpandableDemo.tsx @@ -47,25 +47,25 @@ export class TableCompoundExpandableDemo extends React.Componentsiemur/test-space, props: { component: 'th' } }, { title: ( - + <> 10 - + ), props: { isOpen: true, ariaControls: 'compoound-expansion-table-1' } }, { title: ( - + <> 4 - + ), props: { isOpen: false, ariaControls: 'compoound-expansion-table-2' } }, { title: ( - + <> 4 - + ), props: { isOpen: false, ariaControls: 'compoound-expansion-table-3' } }, @@ -124,25 +124,25 @@ export class TableCompoundExpandableDemo extends React.Componentsiemur/test-space, props: { component: 'th' } }, { title: ( - + <> 3 - + ), props: { isOpen: false, ariaControls: 'compoound-expansion-table-4' } }, { title: ( - + <> 4 - + ), props: { isOpen: false, ariaControls: 'compoound-expansion-table-5' } }, { title: ( - + <> 2 - + ), props: { isOpen: false, ariaControls: 'compoound-expansion-table-6' } }, diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableEditableCompoundExpandableDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableEditableCompoundExpandableDemo.tsx index ce038525b9a..1c2e772c2fc 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableEditableCompoundExpandableDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableEditableCompoundExpandableDemo.tsx @@ -47,25 +47,25 @@ export class TableEditableCompoundExpandableDemo extends React.Componentsiemur/test-space, props: { component: 'th' } }, { title: ( - + <> 10 - + ), props: { isOpen: true, ariaControls: 'compoound-expansion-table-1' } }, { title: ( - + <> 4 - + ), props: { isOpen: false, ariaControls: 'compoound-expansion-table-2' } }, { title: ( - + <> 4 - + ), props: { isOpen: false, ariaControls: 'compoound-expansion-table-3' } }, @@ -124,25 +124,25 @@ export class TableEditableCompoundExpandableDemo extends React.Componentsiemur/test-space, props: { component: 'th' } }, { title: ( - + <> 3 - + ), props: { isOpen: false, ariaControls: 'compoound-expansion-table-4' } }, { title: ( - + <> 4 - + ), props: { isOpen: false, ariaControls: 'compoound-expansion-table-5' } }, { title: ( - + <> 2 - + ), props: { isOpen: false, ariaControls: 'compoound-expansion-table-6' } }, diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableFavoritesDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableFavoritesDemo.tsx index 291cb7af7ce..aa8bd7c38fe 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableFavoritesDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableFavoritesDemo.tsx @@ -84,7 +84,7 @@ export class TableFavoritesDemo extends React.Component }); } - onSort(_event: React.MouseEvent, index: number, direction: 'asc' | 'desc') { + onSort(_: React.MouseEvent, index: number, direction: 'asc' | 'desc') { let sortedRows; if (index === 1) { // favorites column diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableRowClickDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableRowClickDemo.tsx index 4d8316a0786..4f2a516bf2d 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableRowClickDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableRowClickDemo.tsx @@ -1,16 +1,16 @@ -import * as React from 'react'; import { ICell, IRow } from '@patternfly/react-table'; import { Table, TableBody, TableHeader, TableProps, type OnRowClick } from '@patternfly/react-table/deprecated'; +import { Component } from 'react'; interface ITableRowClickDemoState { rows: IRow[]; columns: (ICell | string)[]; } -export class TableRowClickDemo extends React.Component { +export class TableRowClickDemo extends Component { static displayName = 'TableRowClickDemo'; rowClickHandler: OnRowClick; constructor(props: TableProps) { diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TabsDemo/TabsDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TabsDemo/TabsDemo.tsx index 8458ed78d60..8c740e37db2 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/TabsDemo/TabsDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/TabsDemo/TabsDemo.tsx @@ -58,7 +58,7 @@ export class TabDemo extends Component { const { isTab2Hidden } = this.state; return ( - + <> @@ -185,7 +185,7 @@ export class TabDemo extends Component { Tab 3 section - + ); } } diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TabsDemo/TabsExpandableDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TabsDemo/TabsExpandableDemo.tsx index 70585c255fb..d6dd65e0aa9 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/TabsDemo/TabsExpandableDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/TabsDemo/TabsExpandableDemo.tsx @@ -88,7 +88,7 @@ export class TabsExpandableDemo extends Component { render() { return ( - + <>
- + ); } } diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TabsDemo/TabsStringEventKeyDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TabsDemo/TabsStringEventKeyDemo.tsx index 6d3646b82e0..332dadc831e 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/TabsDemo/TabsStringEventKeyDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/TabsDemo/TabsStringEventKeyDemo.tsx @@ -31,7 +31,7 @@ export class TabsStringEventKeyDemo extends Component { render() { return ( - + <> - + ); } } diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TabsDemo/TabsUncontrolledDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TabsDemo/TabsUncontrolledDemo.tsx index 75d0b346f0b..7a8fe8861fa 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/TabsDemo/TabsUncontrolledDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/TabsDemo/TabsUncontrolledDemo.tsx @@ -26,7 +26,7 @@ export class TabUncontrolledDemo extends Component { const { isTab2Hidden } = this.state; return ( - + <> @@ -147,7 +147,7 @@ export class TabUncontrolledDemo extends Component { Tab 3 section - + ); } } diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TextAreaDemo/TextAreaDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TextAreaDemo/TextAreaDemo.tsx index 2cce8749f14..b6b5be34ae7 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/TextAreaDemo/TextAreaDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/TextAreaDemo/TextAreaDemo.tsx @@ -80,7 +80,7 @@ export class TextAreaDemo extends React.Component<{}, TextAreaState> { validated } = this.state; return ( - + <> Text area