fix(packages): make imports tsc compatible (#4051)

* fix import/export default as

* use esm imports from react-core

* fix few remaining default exports

* fix selector to not rely on value of GenerateID

* fix lint

CONTRIBUTING.md

@@ -196,20 +196,6 @@ Please ensure that all React UI components contributed meet the following guidel
     See how to write documentation in the [`react-docs` README](./packages/patternfly-4/react-docs/README.md)
 - When writing a component and you want to use the classnames package, be sure to import and name it `classNames`. For example - `import classNames from 'classnames'`
 - When destructuring or spreading expressions , use ...props as the variable name.
-- Exporting components from other libraries (without manipulating them)
-  to consumers is a common task, use:
-
-  ```js
-  # Badge/Badge.js
-  import { Badge } from 'react-bootstrap';
-  export default Badge;
-
-  # Badge/index.js
-  export { default as Badge } from './Badge';
-
-  # index.js
-  export * from './Badge';
-  ```
 
   **Please see the [Getting Started Readme](./GETTING-STARTED.md) for additional information in getting started with building PatterFly 4 react components.**
 

packages/react-catalog-view-extension/src/components/CatalogTile/CatalogTile.tsx

@@ -1,10 +1,5 @@
 import * as React from 'react';
-import { Card } from '@patternfly/react-core/dist/js/components/Card/Card';
-import { CardActions } from '@patternfly/react-core/dist/js/components/Card/CardActions';
-import { CardHead } from '@patternfly/react-core/dist/js/components/Card/CardHead';
-import { CardHeader } from '@patternfly/react-core/dist/js/components/Card/CardHeader';
-import { CardBody } from '@patternfly/react-core/dist/js/components/Card/CardBody';
-import { CardFooter } from '@patternfly/react-core/dist/js/components/Card/CardFooter';
+import { Card, CardActions, CardHead, CardHeader, CardBody, CardFooter } from '@patternfly/react-core';
 import classNames from 'classnames';
 
 export interface CatalogTileProps extends Omit<React.HTMLProps<HTMLElement>, 'title'> {

packages/react-catalog-view-extension/src/components/FilterSidePanel/FilterSidePanelCategory.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import { Button } from '@patternfly/react-core/dist/js/components/Button';
-import { default as formStyles } from '@patternfly/react-styles/css/components/Form/form';
+import { Button } from '@patternfly/react-core';
+import formStyles from '@patternfly/react-styles/css/components/Form/form';
 import { css } from '@patternfly/react-styles';
 
 import { childrenToArray } from '../../helpers/util';

packages/react-catalog-view-extension/src/components/FilterSidePanel/FilterSidePanelCategoryItem.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import { Checkbox } from '@patternfly/react-core/dist/js/components/Checkbox/Checkbox';
+import { Checkbox } from '@patternfly/react-core';
 
 import { getUniqueId } from '../../helpers/util';
 

packages/react-catalog-view-extension/src/components/PropertiesSidePanel/PropertyItem.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 
-import { Text, TextVariants } from '@patternfly/react-core/dist/js/components/Text/Text';
+import { Text, TextVariants } from '@patternfly/react-core';
 
 export interface PropertyItemProps extends Omit<React.HTMLProps<HTMLDivElement>, 'label' | 'value'> {
   /** Additional css classes for the Property Item */

packages/react-core/src/components/ChipGroup/Chip.tsx

@@ -4,7 +4,7 @@ import { ChipButton } from './ChipButton';
 import { Tooltip } from '../Tooltip';
 import TimesCircleIcon from '@patternfly/react-icons/dist/js/icons/times-circle-icon';
 import styles from '@patternfly/react-styles/css/components/Chip/chip';
-import GenerateId from '../../helpers/GenerateId/GenerateId';
+import { GenerateId } from '../../helpers/GenerateId/GenerateId';
 import { getOUIAProps, OUIAProps } from '../../helpers';
 
 export interface ChipProps extends React.HTMLProps<HTMLDivElement> {

packages/react-core/src/components/ChipGroup/ChipGroupToolbarItem.tsx

@@ -5,7 +5,7 @@ import { ChipGroupContext } from './ChipGroup';
 import { ChipButton } from './ChipButton';
 import { Tooltip } from '../Tooltip';
 import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon';
-import GenerateId from '../../helpers/GenerateId/GenerateId';
+import { GenerateId } from '../../helpers/GenerateId/GenerateId';
 
 export interface ChipGroupToolbarItemProps extends React.HTMLProps<HTMLUListElement> {
   /**  Category name text */

packages/react-core/src/components/ClipboardCopy/ClipboardCopy.tsx

@@ -5,7 +5,7 @@ import { PickOptional } from '../../helpers/typeUtils';
 import { PopoverPosition } from '../Popover';
 import { TextInput } from '../TextInput';
 import { TooltipPosition } from '../Tooltip';
-import GenerateId from '../../helpers/GenerateId/GenerateId';
+import { GenerateId } from '../../helpers/GenerateId/GenerateId';
 import { ClipboardCopyButton } from './ClipboardCopyButton';
 import { ClipboardCopyToggle } from './ClipboardCopyToggle';
 import { ClipboardCopyExpanded } from './ClipboardCopyExpanded';

packages/react-core/src/components/Popover/Popover.tsx

@@ -11,7 +11,7 @@ import { PopoverBody } from './PopoverBody';
 import { PopoverHeader } from './PopoverHeader';
 import { PopoverFooter } from './PopoverFooter';
 import { PopoverCloseButton } from './PopoverCloseButton';
-import GenerateId from '../../helpers/GenerateId/GenerateId';
+import { GenerateId } from '../../helpers/GenerateId/GenerateId';
 import popoverMaxWidth from '@patternfly/react-tokens/dist/js/c_popover_MaxWidth';
 import { ReactElement } from 'react';
 import { PickOptional } from '../../helpers/typeUtils';

packages/react-core/src/components/Select/SelectMenu.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Select/select';
-import { default as formStyles } from '@patternfly/react-styles/css/components/Form/form';
+import formStyles from '@patternfly/react-styles/css/components/Form/form';
 import { css } from '@patternfly/react-styles';
 import { SelectOptionObject, SelectOption } from './SelectOption';
 import { SelectConsumer, SelectVariant } from './selectConstants';

packages/react-core/src/components/Select/SelectOption.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Select/select';
-import { default as checkStyles } from '@patternfly/react-styles/css/components/Check/check';
+import checkStyles from '@patternfly/react-styles/css/components/Check/check';
 import { css } from '@patternfly/react-styles';
 import CheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon';
 import { SelectConsumer, SelectVariant, KeyTypes } from './selectConstants';

packages/react-core/src/components/Wizard/examples/SampleForm.js

@@ -1,8 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Form } from '@patternfly/react-core/dist/js/components/Form/Form';
-import { FormGroup } from '@patternfly/react-core/dist/js/components/Form/FormGroup';
-import { TextInput } from '@patternfly/react-core/dist/js/components/TextInput/TextInput';
+import { Form, FormGroup, TextInput } from '@patternfly/react-core';
 
 const propTypes = {
   formValue: PropTypes.string,

packages/react-core/src/helpers/GenerateId/GenerateId.ts

@@ -22,7 +22,7 @@ interface GenerateIdProps {
   children(id: string): React.ReactNode;
 }
 
-class GenerateId extends React.Component<GenerateIdProps, {}> {
+export class GenerateId extends React.Component<GenerateIdProps, {}> {
   static defaultProps = {
     prefix: 'pf-random-id-'
   };
@@ -32,5 +32,3 @@ class GenerateId extends React.Component<GenerateIdProps, {}> {
     return this.props.children(this.id);
   }
 }
-
-export default GenerateId;

packages/react-core/src/helpers/GenerateId/__tests__/GenerateId.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import GenerateId from '../GenerateId';
+import { GenerateId } from '../GenerateId';
 
 test('generates id', () => {
   const view = shallow(<GenerateId>{id => <div id={id}>div with random ID</div>}</GenerateId>);

packages/react-core/src/helpers/index.ts

@@ -1,6 +1,6 @@
 export * from './constants';
 export * from './FocusTrap/FocusTrap';
-export { default as GenerateId } from './GenerateId/GenerateId';
+export * from './GenerateId/GenerateId';
 export * from './htmlConstants';
 export * from './typeUtils';
 export * from './ouia';

packages/react-core/src/layouts/Toolbar/examples/SimpleToolbar.js

@@ -1,7 +1,5 @@
 import React from 'react';
-import { Toolbar } from '@patternfly/react-core/dist/js/layouts/Toolbar/Toolbar';
-import { ToolbarGroup } from '@patternfly/react-core/dist/js/layouts/Toolbar/ToolbarGroup';
-import { ToolbarItem } from '@patternfly/react-core/dist/js/layouts/Toolbar/ToolbarItem';
+import { Toolbar, ToolbarGroup, ToolbarItem } from '@patternfly/react-core';
 
 class SimpleToolbar extends React.Component {
   render() {

packages/react-core/src/layouts/Toolbar/examples/SimpleToolbarSection.js

@@ -1,8 +1,5 @@
 import React from 'react';
-import { Toolbar } from '@patternfly/react-core/dist/js/layouts/Toolbar/Toolbar';
-import { ToolbarGroup } from '@patternfly/react-core/dist/js/layouts/Toolbar/ToolbarGroup';
-import { ToolbarSection } from '@patternfly/react-core/dist/js/layouts/Toolbar/ToolbarSection';
-import { ToolbarItem } from '@patternfly/react-core/dist/js/layouts/Toolbar/ToolbarItem';
+import { Toolbar, ToolbarGroup, ToolbarSection, ToolbarItem } from '@patternfly/react-core';
 
 class SimpleToolbarSection extends React.Component {
   render() {

packages/react-docs/src/pages/icons.js

@@ -1,11 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Title } from '@patternfly/react-core/dist/js/components/Title/Title';
-import { Tooltip } from '@patternfly/react-core/dist/js/components/Tooltip/Tooltip';
-import { Text } from '@patternfly/react-core/dist/js/components/Text/Text';
-import { Grid } from '@patternfly/react-core/dist/js/layouts/Grid/Grid';
-import { GridItem } from '@patternfly/react-core/dist/js/layouts/Grid/GridItem';
-import { PageSection } from '@patternfly/react-core/dist/js/components/Page/PageSection';
+import { Title, Tooltip, Text, Grid, GridItem, PageSection } from '@patternfly/react-core';
 import spacerMd from '@patternfly/react-tokens/dist/js/global_spacer_md';
 import labelFontSize from '@patternfly/react-tokens/dist/js/global_FontSize_sm';
 import * as IconsModule from '@patternfly/react-icons';

packages/react-docs/src/pages/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { graphql } from 'gatsby';
-import { Title } from '@patternfly/react-core/dist/js/components/Title/Title';
-import { PageSection, PageSectionVariants } from '@patternfly/react-core/dist/js/components/Page/PageSection';
+import { Title, PageSection, PageSectionVariants } from '@patternfly/react-core';
 import { SideNavLayout } from 'gatsby-theme-patternfly-org/layouts';
 
 const containerStyle = {

packages/react-inline-edit-extension/src/components/CancelButton/CancelButton.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import CloseIcon from '@patternfly/react-icons/dist/js/icons/close-icon';
-import { Button } from '@patternfly/react-core/dist/js/components/Button/Button';
+import { Button } from '@patternfly/react-core';
 
-const CancelButton = props => (
+export const CancelButton = props => (
   <Button {...props}>
     <CloseIcon />
   </Button>
@@ -16,5 +16,3 @@ CancelButton.defaultProps = {
   ...Button.defaultProps,
   variant: 'plain'
 };
-
-export default CancelButton;

packages/react-inline-edit-extension/src/components/CancelButton/index.js

@@ -1 +1 @@
-export { default as CancelButton } from './CancelButton';
+export * from './CancelButton';

packages/react-inline-edit-extension/src/components/ConfirmButton/ConfirmButton.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import CheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon';
-import { Button } from '@patternfly/react-core/dist/js/components/Button/Button';
+import { Button } from '@patternfly/react-core';
 
-const ConfirmButton = props => (
+export const ConfirmButton = props => (
   <Button {...props}>
     <CheckIcon />
   </Button>
@@ -16,5 +16,3 @@ ConfirmButton.defaultProps = {
   ...Button.defaultProps,
   variant: 'primary'
 };
-
-export default ConfirmButton;

packages/react-inline-edit-extension/src/components/ConfirmButton/index.js

@@ -1 +1 @@
-export { default as ConfirmButton } from './ConfirmButton';
+export * from './ConfirmButton';

packages/react-inline-edit-extension/src/components/InlineEdit/ConfirmButtons.js

@@ -22,7 +22,7 @@ const buttonsBottomPosition = (window, rowDimensions, bold) => {
   };
 };
 
-const ConfirmButtons = ({
+export const ConfirmButtons = ({
   messages: { confirmButtonLabel, cancelButtonLabel },
   onConfirm,
   onCancel,
@@ -90,5 +90,3 @@ ConfirmButtons.propTypes = {
     cancelButtonLabel: PropTypes.string
   })
 };
-
-export default ConfirmButtons;

packages/react-inline-edit-extension/src/components/InlineEdit/ConfirmButtons.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme/build';
 
-import { default as ConfirmButtons } from './ConfirmButtons';
+import { ConfirmButtons } from './ConfirmButtons';
 
 const getConfirmButtons = () => (
   <ConfirmButtons

packages/react-inline-edit-extension/src/components/InlineEdit/InlineEdit.api.test.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import { Table, TableHeader, TableBody, RowWrapper } from '@patternfly/react-table';
-import { TextInput } from '@patternfly/react-core/dist/js/components/TextInput/TextInput';
+import { TextInput } from '@patternfly/react-core';
 
-import { default as editableRowWrapper } from './editableRowWrapper';
-import { default as editableTableBody } from './editableTableBody';
+import { editableRowWrapper } from './editableRowWrapper';
+import { editableTableBody } from './editableTableBody';
 import { inlineEditFormatterFactory } from './utils';
 import { TableEditConfirmation } from './constants';
 import { TableTextInput } from '../TableTextInput';

packages/react-inline-edit-extension/src/components/InlineEdit/editableRowWrapper.js

@@ -9,7 +9,7 @@ import {
   getBoundingClientRect,
   getClientWindowDimensions
 } from './utils/utils';
-import ConfirmButtons from './ConfirmButtons';
+import { ConfirmButtons } from './ConfirmButtons';
 import { TableEditConfirmation } from './constants';
 import '@patternfly/react-styles/css/components/Table/inline-edit.css';
 import { inlineEditStyles as styles } from './css/inline-edit-css';
@@ -104,7 +104,7 @@ const getTableConfirmation = ({ editConfig }) =>
   tableConfirmationMapper[editConfig && editConfig.editConfirmationType] ||
   tableConfirmationMapper[TableEditConfirmation.NONE];
 
-const editableRowWrapper = RowWrapperComponent => {
+export const editableRowWrapper = RowWrapperComponent => {
   class RowWrapper extends React.Component {
     constructor(props) {
       super(props);
@@ -230,5 +230,3 @@ const editableRowWrapper = RowWrapperComponent => {
 
   return RowWrapper;
 };
-
-export default editableRowWrapper;

packages/react-inline-edit-extension/src/components/InlineEdit/editableRowWrapper.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { mount } from 'enzyme/build';
 
-import { default as editableRowWrapper } from './editableRowWrapper';
+import { editableRowWrapper } from './editableRowWrapper';
 import { TableEditConfirmation } from './constants';
 import { mockClosest } from '../../test-helpers/helpers';
 

packages/react-inline-edit-extension/src/components/InlineEdit/editableTableBody.d.ts

@@ -26,4 +26,4 @@ export interface EditableTableBody {
 }
 
 // eslint-disable-next-line no-undef
-export default EditableTableBody;
+export const EditableTableBody;

packages/react-inline-edit-extension/src/components/InlineEdit/editableTableBody.js

@@ -132,7 +132,7 @@ Body.defaultProps = {
   onRowClick: () => undefined
 };
 
-const editableTableBody = BodyComponent => {
+export const editableTableBody = BodyComponent => {
   const InlineEditBody = ({ editConfig, onRowClick, ...props }) => (
     <TableContext.Consumer>
       {({ rows, ...consumedProps }) => (
@@ -153,5 +153,3 @@ const editableTableBody = BodyComponent => {
 
   return InlineEditBody;
 };
-
-export default editableTableBody;

packages/react-inline-edit-extension/src/components/InlineEdit/index.d.ts

@@ -1,17 +1,6 @@
 export { TableEditConfirmation } from './constants';
 
 export * from './utils';
-export {
-  default as editableTableBody,
-  EditableTableBody,
-  InlineEditBodyProps,
-  EditConfig,
-  IEditedCellData
-} from './editableTableBody';
+export * from './editableTableBody';
 
-export {
-  default as editableRowWrapper,
-  EditableRowWrapper,
-  EditableRowWrapperProps,
-  EditableRowWrapperRow
-} from './editableRowWrapper';
+export * from './editableRowWrapper';

packages/react-inline-edit-extension/src/components/InlineEdit/index.js

@@ -1,4 +1,4 @@
 export { TableEditConfirmation } from './constants';
 export { inlineEditFormatterFactory } from './utils';
-export { default as editableTableBody } from './editableTableBody';
-export { default as editableRowWrapper } from './editableRowWrapper';
+export { editableTableBody } from './editableTableBody';
+export { editableRowWrapper } from './editableRowWrapper';

packages/react-inline-edit-extension/src/components/InlineEdit/utils/formatters.js

@@ -1 +1 @@
-export { default as inlineEditFormatterFactory } from './formatters/inlineEditFormatterFactory';
+export * from './formatters/inlineEditFormatterFactory';

packages/react-inline-edit-extension/src/components/InlineEdit/utils/formatters/index.d.ts

@@ -1,8 +1 @@
-export {
-  default as inlineEditFormatterFactory,
-  InlineEditFormatterFactory,
-  InlineEditFormatterFactoryProps,
-  AdditionalData,
-  Formatter,
-  FormatterExtra
-} from './inlineEditFormatterFactory';
+export * from './inlineEditFormatterFactory';

packages/react-inline-edit-extension/src/components/InlineEdit/utils/formatters/inlineEditFormatterFactory.d.ts

@@ -31,5 +31,4 @@ export interface InlineEditFormatterFactory {
   (props: InlineEditFormatterFactoryProps): Formatter;
 }
 
-// eslint-disable-next-line no-undef
-export default InlineEditFormatterFactory;
+export const InlineEditFormatterFactory;

packages/react-inline-edit-extension/src/components/InlineEdit/utils/formatters/inlineEditFormatterFactory.js

@@ -1,4 +1,4 @@
-const inlineEditFormatterFactory = ({ renderEdit, renderValue, resolveValue, isEditable = null } = {}) => (
+export const inlineEditFormatterFactory = ({ renderEdit, renderValue, resolveValue, isEditable = null } = {}) => (
   value,
   additionalData
 ) => {
@@ -19,5 +19,3 @@ const inlineEditFormatterFactory = ({ renderEdit, renderValue, resolveValue, isE
 
   return value;
 };
-
-export default inlineEditFormatterFactory;

packages/react-inline-edit-extension/src/components/InlineEdit/utils/formatters/inlineEditFormatterFactory.test.js

@@ -1,4 +1,4 @@
-import { default as inlineEditFormatterFactory } from './inlineEditFormatterFactory';
+import { inlineEditFormatterFactory } from './inlineEditFormatterFactory';
 
 const blue = 'blue';
 const alteredValue = 'violet';