code editor and fix build

mfrances17 · mfrances17 · commit 4c2431ce03cb · 2025-03-05T17:45:26.000-05:00
diff --git a/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx b/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { Component, createRef, Fragment } from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/CodeEditor/code-editor';
 import fileUploadStyles from '@patternfly/react-styles/css/components/FileUpload/file-upload';
@@ -236,11 +236,11 @@ interface CodeEditorState {
   copied: boolean;
 }
 
-class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
+class CodeEditor extends Component<CodeEditorProps, CodeEditorState> {
   static displayName = 'CodeEditor';
   private editor: editor.IStandaloneCodeEditor | null = null;
-  private wrapperRef = React.createRef<HTMLDivElement>();
-  private ref = React.createRef<HTMLDivElement>();
+  private wrapperRef = createRef<HTMLDivElement>();
+  private ref = createRef<HTMLDivElement>();
   private timer: number | null = null;
   private observer = () => {};
 
@@ -576,7 +576,7 @@ class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
             !!shortcutsPopoverProps.bodyContent;
 
           const editorHeaderContent = (
-            <React.Fragment>
+            <Fragment>
               <div className={css(styles.codeEditorControls)}>
                 <CodeEditorContext.Provider value={{ code: value }}>
                   {isCopyEnabled && (!showEmptyState || !!value) && (
@@ -622,7 +622,7 @@ class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
                   </Popover>
                 </div>
               )}
-            </React.Fragment>
+            </Fragment>
           );
 
           const editorHeader = (
diff --git a/packages/react-code-editor/src/components/CodeEditor/CodeEditorControl.tsx b/packages/react-code-editor/src/components/CodeEditor/CodeEditorControl.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useContext } from 'react';
 import { Button, ButtonProps } from '@patternfly/react-core/dist/esm/components/Button';
 import { Tooltip } from '@patternfly/react-core/dist/esm/components/Tooltip';
 import { CodeEditorContext } from './CodeEditorUtils';
@@ -31,7 +31,7 @@ export const CodeEditorControl: React.FunctionComponent<CodeEditorControlProps>
   tooltipProps = {},
   ...props
 }: CodeEditorControlProps) => {
-  const context = React.useContext(CodeEditorContext);
+  const context = useContext(CodeEditorContext);
 
   const onCustomClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     onClick(context.code, event);
diff --git a/packages/react-code-editor/src/components/CodeEditor/CodeEditorUtils.ts b/packages/react-code-editor/src/components/CodeEditor/CodeEditorUtils.ts
@@ -1,7 +1,7 @@
-import * as React from 'react';
+import { createContext } from 'react';
 
 interface CodeEditorContext {
   code: string;
 }
 
-export const CodeEditorContext = React.createContext<CodeEditorContext>(null);
+export const CodeEditorContext = createContext<CodeEditorContext>(null);
diff --git a/packages/react-code-editor/src/components/CodeEditor/__test__/CodeEditor.test.tsx b/packages/react-code-editor/src/components/CodeEditor/__test__/CodeEditor.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen, act } from '@testing-library/react';
 import { CodeEditor, Language } from '../CodeEditor';
 import styles from '@patternfly/react-styles/css/components/CodeEditor/code-editor';
diff --git a/packages/react-code-editor/src/components/CodeEditor/__test__/CodeEditorControl.test.tsx b/packages/react-code-editor/src/components/CodeEditor/__test__/CodeEditorControl.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { CodeEditorControl } from '../CodeEditorControl';
 
diff --git a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditor.md b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditor.md
@@ -7,6 +7,7 @@ propComponents: ['CodeEditor', 'CodeEditorControl', 'Popover']
 
 Note: Code editor lives in its own package at [@patternfly/react-code-editor](https://www.npmjs.com/package/@patternfly/react-code-editor) and has [**required peer deps**](https://github.com/patternfly/patternfly-react/blob/main/packages/react-code-editor/package.json).
 
+import { Fragment, useState } from 'react';
 import { CodeEditor, CodeEditorControl, Language } from '@patternfly/react-code-editor';
 import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 
diff --git a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorBasic.tsx b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorBasic.tsx
@@ -1,12 +1,12 @@
-import React from 'react';
+import { useState } from 'react';
 import { CodeEditor, Language } from '@patternfly/react-code-editor';
 import { Checkbox } from '@patternfly/react-core';
 
 export const CodeEditorBasic: React.FunctionComponent = () => {
-  const [isDarkTheme, setIsDarkTheme] = React.useState(false);
-  const [isLineNumbersVisible, setIsLineNumbersVisible] = React.useState(true);
-  const [isReadOnly, setIsReadOnly] = React.useState(false);
-  const [isMinimapVisible, setIsMinimapVisible] = React.useState(false);
+  const [isDarkTheme, setIsDarkTheme] = useState(false);
+  const [isLineNumbersVisible, setIsLineNumbersVisible] = useState(true);
+  const [isReadOnly, setIsReadOnly] = useState(false);
+  const [isMinimapVisible, setIsMinimapVisible] = useState(false);
 
   const toggleDarkTheme = (checked) => {
     setIsDarkTheme(checked);
diff --git a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorCustomControl.tsx b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorCustomControl.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
+import { useState } from 'react';
 import { CodeEditor, CodeEditorControl } from '@patternfly/react-code-editor';
 import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 
 export const CodeEditorCustomControl: React.FunctionComponent = () => {
-  const [code, setCode] = React.useState('Some example content');
+  const [code, setCode] = useState('Some example content');
 
   const onChange = (code) => {
     setCode(code);
diff --git a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorFullHeight.tsx b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorFullHeight.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { CodeEditor, Language } from '@patternfly/react-code-editor';
 
 export const CodeEditorFullHeight: React.FunctionComponent = () => {
diff --git a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorShortcutMainHeader.tsx b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorShortcutMainHeader.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
+import { Fragment, useState } from 'react';
 import { CodeEditor, Language } from '@patternfly/react-code-editor';
 import { Grid, GridItem, Label, Radio } from '@patternfly/react-core';
 
 export const CodeEditorShortcutMainHeader: React.FunctionComponent = () => {
   type ShortcutMode = 'PC' | 'Mac';
 
-  const [currentShortcutMode, setCurrentShortcutMode] = React.useState<ShortcutMode>('PC');
+  const [currentShortcutMode, setCurrentShortcutMode] = useState<ShortcutMode>('PC');
 
   const onEditorDidMount = (editor, monaco) => {
     editor.layout();
@@ -51,7 +51,7 @@ export const CodeEditorShortcutMainHeader: React.FunctionComponent = () => {
     bodyContent: (
       <Grid span={6} hasGutter key="grid">
         {shortcuts.map((shortcut, index) => (
-          <React.Fragment key={index}>
+          <Fragment key={index}>
             <GridItem style={{ textAlign: 'right', marginRight: '1em' }}>
               {shortcut[currentShortcutMode]
                 .map((key) => (
@@ -64,7 +64,7 @@ export const CodeEditorShortcutMainHeader: React.FunctionComponent = () => {
                 ))}
             </GridItem>
             <GridItem>{shortcut.description}</GridItem>
-          </React.Fragment>
+          </Fragment>
         ))}
       </Grid>
     ),
diff --git a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorSizeToFit.tsx b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorSizeToFit.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { CodeEditor, Language } from '@patternfly/react-code-editor';
 
 export const CodeEditorSizeToFit: React.FunctionComponent = () => {
diff --git a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorWithActions.tsx b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorWithActions.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { CodeEditor } from '@patternfly/react-code-editor';
 
 export const CodeEditorWithActions: React.FunctionComponent = () => (
diff --git a/packages/react-table/src/demos/examples/TableAutomaticPagination.tsx b/packages/react-table/src/demos/examples/TableAutomaticPagination.tsx
@@ -1,3 +1,4 @@
+import { Fragment, useState } from 'react';
 import { Pagination } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 
@@ -24,9 +25,9 @@ export const TableAutomaticPagination: React.FunctionComponent = () => {
   ];
   const defaultPerPage = 10;
 
-  const [perPage, setPerPage] = React.useState(defaultPerPage);
-  const [page, setPage] = React.useState(1);
-  const [rows, setRows] = React.useState(defaultRows.slice(0, defaultPerPage));
+  const [perPage, setPerPage] = useState(defaultPerPage);
+  const [page, setPage] = useState(1);
+  const [rows, setRows] = useState(defaultRows.slice(0, defaultPerPage));
 
   const handleSetPage = (
     _evt: React.MouseEvent | React.KeyboardEvent | MouseEvent,
@@ -73,7 +74,7 @@ export const TableAutomaticPagination: React.FunctionComponent = () => {
   );
 
   return (
-    <React.Fragment>
+    <Fragment>
       {renderPagination()}
       <Table aria-label="Automated Pagination Table Demo">
         <Thead>
@@ -95,6 +96,6 @@ export const TableAutomaticPagination: React.FunctionComponent = () => {
           ))}
         </Tbody>
       </Table>
-    </React.Fragment>
+    </Fragment>
   );
 };

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`		`-import * as React from 'react';`
	`1`	`+import { createContext } from 'react';`
`2`	`2`
`3`	`3`	`interface CodeEditorContext {`
`4`	`4`	`code: string;`
`5`	`5`	`}`
`6`	`6`
`7`		`-export const CodeEditorContext = React.createContext<CodeEditorContext>(null);`
	`7`	`+export const CodeEditorContext = createContext<CodeEditorContext>(null);`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-import React from 'react';`
`2`	`1`	`import { render, screen, act } from '@testing-library/react';`
`3`	`2`	`import { CodeEditor, Language } from '../CodeEditor';`
`4`	`3`	`import styles from '@patternfly/react-styles/css/components/CodeEditor/code-editor';`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-import React from 'react';`
`2`	`1`	`import { render, screen } from '@testing-library/react';`
`3`	`2`	`import { CodeEditorControl } from '../CodeEditorControl';`
`4`	`3`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-import React from 'react';`
`2`	`1`	`import { CodeEditor, Language } from '@patternfly/react-code-editor';`
`3`	`2`
`4`	`3`	`export const CodeEditorFullHeight: React.FunctionComponent = () => {`