react integration and stragglers

Author: mfrances17

packages/react-icons/src/__tests__/createIcon.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { createIcon } from '../createIcon';
 
@@ -29,7 +28,7 @@ test('aria-hidden is true if no title is specified', () => {
   expect(screen.getByRole('img', { hidden: true })).toHaveAttribute('aria-hidden', 'true');
 });
 
-test('title is not renderd if a title is not passed', () => {
+test('title is not rendered if a title is not passed', () => {
   render(<SVGIcon />);
   expect(screen.queryByRole('img', { hidden: true })?.querySelector('title')).toBeNull();
 });

packages/react-icons/src/createIcon.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { Component } from 'react';
 
 export interface IconDefinition {
   name?: string;
@@ -27,7 +27,7 @@ export function createIcon({
   height,
   svgPath
 }: IconDefinition): React.ComponentClass<SVGIconProps> {
-  return class SVGIcon extends React.Component<SVGIconProps> {
+  return class SVGIcon extends Component<SVGIconProps> {
     static displayName = name;
 
     id = `icon-title-${currentId++}`;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Component, createElement } from 'react';
 import { BrowserRouter as Router, Route, Link, Routes } from 'react-router-dom';
 import { Avatar } from '@patternfly/react-core/dist/esm/components/Avatar';
 import { Brand } from '@patternfly/react-core/dist/esm/components/Brand';
@@ -33,7 +33,7 @@ interface AppState {
   isDarkTheme: boolean;
 }
 
-class App extends React.Component<{}, AppState> {
+class App extends Component<{}, AppState> {
   state: AppState = {
     activeItem: '',
     isNavOpen: true,
@@ -67,9 +67,7 @@ class App extends React.Component<{}, AppState> {
         {Demos.map((demo) => (
           <Route
             path={`/${demo.id}-nav-link`}
-            element={
-              <PageSection id={`/${demo.id}-page-section`}>{React.createElement(demo.componentType)}</PageSection>
-            }
+            element={<PageSection id={`/${demo.id}-page-section`}>{createElement(demo.componentType)}</PageSection>}
             key={demo.id}
           />
         ))}
@@ -78,7 +76,7 @@ class App extends React.Component<{}, AppState> {
             path="/"
             element={
               <PageSection id={`/${defaultDemo.id}-page-section`}>
-                {React.createElement(defaultDemo.componentType)}
+                {createElement(defaultDemo.componentType)}
               </PageSection>
             }
             key={defaultDemo.id}

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

@@ -1,12 +1,12 @@
-import React from 'react';
+import { Component } from 'react';
 import { AboutModal, Button, Content } from '@patternfly/react-core';
 const brandImg = '../../../assets/images/brandImg.svg';
 
 interface AboutModalState {
   isModalOpen: boolean;
 }
 
-export class AboutModalDemo extends React.Component<{}, AboutModalState> {
+export class AboutModalDemo extends Component<{}, AboutModalState> {
   static displayName = 'AboutModalDemo';
   constructor(props: {}) {
     super(props);

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

@@ -1,8 +1,8 @@
-import React from 'react';
+import { useState } from 'react';
 import { Accordion, AccordionItem, AccordionContent, AccordionToggle } from '@patternfly/react-core';
 
 export const AccordionDemo = () => {
-  const [expanded, setExpanded] = React.useState('');
+  const [expanded, setExpanded] = useState('');
 
   const onToggle = (id: string) => {
     if (id === expanded) {

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

@@ -1,13 +1,13 @@
+import { Component } from 'react';
 import { Alert, AlertActionCloseButton } from '@patternfly/react-core';
-import React from 'react';
 import UserIcon from '@patternfly/react-icons/dist/esm/icons/user-icon';
 
 interface AlertDemoState {
   alertOneVisible: boolean;
   alertTwoVisible: boolean;
 }
 
-export class AlertDemo extends React.Component<{}, AlertDemoState> {
+export class AlertDemo extends Component<{}, AlertDemoState> {
   static displayName = 'AlertDemo';
   constructor(props: {}) {
     super(props);

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

@@ -1,11 +1,11 @@
+import { Component } from 'react';
 import { Alert, Button, AlertActionCloseButton } from '@patternfly/react-core';
-import React from 'react';
 
 interface AlertTimeoutCloseButtonDemoState {
   isOpenAlert: boolean;
 }
 
-export class AlertTimeoutCloseButtonDemo extends React.Component<{}, AlertTimeoutCloseButtonDemoState> {
+export class AlertTimeoutCloseButtonDemo extends Component<{}, AlertTimeoutCloseButtonDemoState> {
   static displayName = 'AlertTimeoutCloseButtonDemo';
   constructor(props: {}) {
     super(props);

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Component } from 'react';
 import {
   Alert,
   AlertGroup,
@@ -21,7 +21,7 @@ interface AlertGroupDemoState {
   timer: number;
 }
 
-export class AlertGroupDemo extends React.Component<{}, AlertGroupDemoState> {
+export class AlertGroupDemo extends Component<{}, AlertGroupDemoState> {
   static displayName = 'AlertGroupDemo';
   stopAsyncAlerts: () => void;
   removeAlert: (key: number | string) => void;

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

@@ -1,9 +1,9 @@
-import React from 'react';
+import { useState } from 'react';
 import { Alert, AlertActionLink, AlertGroup, Button } from '@patternfly/react-core';
 
 export const AlertGroupTimeoutFromBottomDemo: React.FunctionComponent = () => {
-  const [alerts, setAlerts] = React.useState<React.ReactNode[]>([]);
-  const [count, setCount] = React.useState(0);
+  const [alerts, setAlerts] = useState<React.ReactNode[]>([]);
+  const [count, setCount] = useState(0);
   const onClick = () => {
     const timeout = 3000;
     setAlerts((prevAlerts) => [

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Component } from 'react';
 import {
   Badge,
   Breadcrumb,
@@ -13,7 +13,7 @@ import {
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 
-export class BreadcrumbDemo extends React.Component {
+export class BreadcrumbDemo extends Component {
   static displayName = 'BreadcrumbDemo';
   state = {
     isOpen: false