Fix circular deps (patternfly#5086)

* add rollup to react-table

* fix circular deps in react-core

* fix circular deps in react-table

* fix circular deps in react-charts

* add check to react-datetime

* move to types and enums

* revert most table changes

* fix table build

* revert fixing charts circular dependencies

package.json

@@ -70,7 +70,7 @@
     "build:integration": "lerna run build:demo-app --stream",
     "build:docs": "yarn workspace @patternfly/react-docs build:docs",
     "build:generate": "lerna run generate --parallel --stream",
-    "build:umd": "yarn workspace @patternfly/react-core build:umd",
+    "build:umd": "lerna run build:umd --parallel --stream",
     "clean": "yarn clean:build && lerna run clean --parallel",
     "clean:build": "rimraf .cache .eslintcache coverage",
     "generate": "yarn plop",

packages/react-core/package.json

@@ -29,8 +29,8 @@
   },
   "homepage": "https://github.com/patternfly/patternfly-react#readme",
   "scripts": {
-    "clean": "rimraf dist",
     "build:umd": "rollup -c && rollup -c --environment IS_PRODUCTION",
+    "clean": "rimraf dist",
     "generate": "node scripts/copyStyles.js",
     "gen:tests": "yo tsx-docgen"
   },

packages/react-core/rollup.config.js

@@ -1,30 +1,7 @@
-import resolve from '@rollup/plugin-node-resolve';
-import commonjs from '@rollup/plugin-commonjs';
-import scss from 'rollup-plugin-scss';
-import replace from '@rollup/plugin-replace';
-import { terser } from 'rollup-plugin-terser';
+const { name } = require('./package.json');
+const baseConfig = require('../rollup.base');
 
-const isProduction = process.env.IS_PRODUCTION;
-
-module.exports = {
-  input: 'dist/esm/index.js',
-  output: {
-    file: `dist/umd/react-core${isProduction ? '.min' : ''}.js`,
-    format: 'umd',
-    name: 'PatternFlyReact',
-    globals: {
-      react: 'React',
-      'react-dom': 'ReactDOM'
-    }
-  },
-  external: ['react', 'react-dom'],
-  plugins: [
-    replace({
-      'process.env.NODE_ENV': `'${isProduction ? 'production' : 'development'}'`
-    }),
-    resolve(),
-    commonjs(),
-    scss(),
-    isProduction && terser()
-  ]
-};
+module.exports = baseConfig({
+  packageName: name.replace('@patternfly/', ''),
+  name: 'PatternFlyReact'
+});

packages/react-core/src/components/ApplicationLauncher/ApplicationLauncherSeparator.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DropdownSeparator, SeparatorProps } from '../Dropdown';
+import { DropdownSeparator, SeparatorProps } from '../Dropdown/DropdownSeparator';
 
 export const ApplicationLauncherSeparator: React.FunctionComponent<SeparatorProps> = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars

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

@@ -22,7 +22,7 @@ import {
 } from '../../helpers';
 import { Divider } from '../Divider';
 import { ToggleMenuBaseProps, Popper } from '../../helpers/Popper/Popper';
-import { createRenderableFavorites, extendItemsWithFavorite } from '../../helpers/util';
+import { createRenderableFavorites, extendItemsWithFavorite } from './favorites';
 
 // seed for the aria-labelledby ID
 let currentId = 0;

packages/react-core/src/components/Select/favorites.ts

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import { ApplicationLauncherSeparator } from '../ApplicationLauncher/ApplicationLauncherSeparator';
+import { Divider } from '../Divider/Divider';
+
+/**
+ * This function is a helper for creating an array of renderable favorite items for the Application launcher or Select
+ *
+ * @param {object} items The items rendered in Select or Application aLauncher
+ * @param {boolean} isGrouped Flag indicating if items are grouped
+ * @param {any[]} favorites Array of ids of favorited items
+ * @param {boolean} isEnterTriggersArrowDown Flag indicating if we should add isEnterTriggersArrowDown to favorited item
+ */
+export const createRenderableFavorites = (
+  items: object,
+  isGrouped: boolean,
+  favorites: any[],
+  isEnterTriggersArrowDown?: boolean
+) => {
+  if (isGrouped) {
+    const favoriteItems: React.ReactNode[] = [];
+    (items as React.ReactElement[]).forEach(group => {
+      if (favorites.length > 0) {
+        return (
+          group.props.children &&
+          (group.props.children as React.ReactElement[])
+            .filter(item => favorites.includes(item.props.id))
+            .map(item => {
+              if (isEnterTriggersArrowDown) {
+                return favoriteItems.push(
+                  React.cloneElement(item, {
+                    isFavorite: true,
+                    enterTriggersArrowDown: isEnterTriggersArrowDown,
+                    id: `favorite-${item.props.id}`
+                  })
+                );
+              } else {
+                return favoriteItems.push(
+                  React.cloneElement(item, { isFavorite: true, id: `favorite-${item.props.id}` })
+                );
+              }
+            })
+        );
+      }
+    });
+    return favoriteItems;
+  }
+  return (items as React.ReactElement[])
+    .filter(item => favorites.includes(item.props.id))
+    .map(item => React.cloneElement(item, { isFavorite: true, enterTriggersArrowDown: isEnterTriggersArrowDown }));
+};
+
+/**
+ * This function is a helper for extending the array of renderable favorite with the select/application launcher items to  render in the Application launcher or Select
+ *
+ * @param {object} items The items rendered in Select or Application aLauncher
+ * @param {boolean} isGrouped Flag indicating if items are grouped
+ * @param {any[]} favorites Array of ids of favorited items
+ */
+export const extendItemsWithFavorite = (items: object, isGrouped: boolean, favorites: any[]) => {
+  if (isGrouped) {
+    return (items as React.ReactElement[]).map(group =>
+      React.cloneElement(group, {
+        children: React.Children.map(group.props.children as React.ReactElement[], item => {
+          if (item.type === ApplicationLauncherSeparator || item.type === Divider) {
+            return item;
+          }
+          return React.cloneElement(item, {
+            isFavorite: favorites.some(
+              favoriteId => favoriteId === item.props.id || `favorite-${favoriteId}` === item.props.id
+            )
+          });
+        })
+      })
+    );
+  }
+  return (items as React.ReactElement[]).map(item =>
+    React.cloneElement(item, {
+      isFavorite: favorites.some(favoriteId => favoriteId === item.props.id)
+    })
+  );
+};

packages/react-core/src/components/Tabs/TabContent.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/TabContent/tab-content';
 import { css } from '@patternfly/react-styles';
 import { getOUIAProps, OUIAProps } from '../../helpers';
-import { TabsContextConsumer, TabsContextProps } from './Tabs';
+import { TabsContextConsumer, TabsContextProps } from './TabsContext';
 
 export interface TabContentProps extends Omit<React.HTMLProps<HTMLElement>, 'ref'>, OUIAProps {
   /** content rendered inside the tab content area if used outside Tabs component */

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

@@ -9,6 +9,7 @@ import { getUniqueId, isElementInView, formatBreakpointMods } from '../../helper
 import { TabButton } from './TabButton';
 import { TabContent } from './TabContent';
 import { TabProps } from './Tab';
+import { TabsContextProvider } from './TabsContext';
 import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
 
 export enum TabsComponent {
@@ -60,17 +61,6 @@ export interface TabsProps extends Omit<React.HTMLProps<HTMLElement | HTMLDivEle
   };
 }
 
-export interface TabsContextProps {
-  variant: 'default' | 'light300';
-}
-
-const TabsContext = React.createContext<TabsContextProps>({
-  variant: 'default'
-});
-
-export const TabsContextProvider = TabsContext.Provider;
-export const TabsContextConsumer = TabsContext.Consumer;
-
 const variantStyle = {
   default: '',
   light300: styles.modifiers.colorSchemeLight_300

packages/react-core/src/components/Tabs/TabsContext.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+export interface TabsContextProps {
+  variant: 'default' | 'light300';
+}
+
+const TabsContext = React.createContext<TabsContextProps>({
+  variant: 'default'
+});
+
+export const TabsContextProvider = TabsContext.Provider;
+export const TabsContextConsumer = TabsContext.Consumer;

packages/react-core/src/components/Tabs/index.ts

@@ -1,5 +1,6 @@
 export * from './Tab';
 export * from './Tabs';
 export * from './TabContent';
+export * from './TabsContext';
 export * from './TabTitleText';
 export * from './TabTitleIcon';

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

@@ -1,8 +1,5 @@
 import * as ReactDOM from 'react-dom';
 import { SIDE } from './constants';
-import * as React from 'react';
-import { ApplicationLauncherSeparator } from '../components/ApplicationLauncher/ApplicationLauncherSeparator';
-import { Divider } from '../components/Divider/Divider';
 
 /**
  * @param {string} input - String to capitalize first letter
@@ -277,84 +274,6 @@ export const toCamel = (s: string) => s.replace(/([-_][a-z])/gi, camelize);
  */
 export const canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
 
-/**
- * This function is a helper for creating an array of renderable favorite items for the Application launcher or Select
- *
- * @param {object} items The items rendered in Select or Application aLauncher
- * @param {boolean} isGrouped Flag indicating if items are grouped
- * @param {any[]} favorites Array of ids of favorited items
- * @param {boolean} isEnterTriggersArrowDown Flag indicating if we should add isEnterTriggersArrowDown to favorited item
- */
-export const createRenderableFavorites = (
-  items: object,
-  isGrouped: boolean,
-  favorites: any[],
-  isEnterTriggersArrowDown?: boolean
-) => {
-  if (isGrouped) {
-    const favoriteItems: React.ReactNode[] = [];
-    (items as React.ReactElement[]).forEach(group => {
-      if (favorites.length > 0) {
-        return (
-          group.props.children &&
-          (group.props.children as React.ReactElement[])
-            .filter(item => favorites.includes(item.props.id))
-            .map(item => {
-              if (isEnterTriggersArrowDown) {
-                return favoriteItems.push(
-                  React.cloneElement(item, {
-                    isFavorite: true,
-                    enterTriggersArrowDown: isEnterTriggersArrowDown,
-                    id: `favorite-${item.props.id}`
-                  })
-                );
-              } else {
-                return favoriteItems.push(
-                  React.cloneElement(item, { isFavorite: true, id: `favorite-${item.props.id}` })
-                );
-              }
-            })
-        );
-      }
-    });
-    return favoriteItems;
-  }
-  return (items as React.ReactElement[])
-    .filter(item => favorites.includes(item.props.id))
-    .map(item => React.cloneElement(item, { isFavorite: true, enterTriggersArrowDown: isEnterTriggersArrowDown }));
-};
-
-/**
- * This function is a helper for extending the array of renderable favorite with the select/application launcher items to  render in the Application launcher or Select
- *
- * @param {object} items The items rendered in Select or Application aLauncher
- * @param {boolean} isGrouped Flag indicating if items are grouped
- * @param {any[]} favorites Array of ids of favorited items
- */
-export const extendItemsWithFavorite = (items: object, isGrouped: boolean, favorites: any[]) => {
-  if (isGrouped) {
-    return (items as React.ReactElement[]).map(group =>
-      React.cloneElement(group, {
-        children: React.Children.map(group.props.children as React.ReactElement[], item => {
-          if (item.type === ApplicationLauncherSeparator || item.type === Divider) {
-            return item;
-          }
-          return React.cloneElement(item, {
-            isFavorite: favorites.some(
-              favoriteId => favoriteId === item.props.id || `favorite-${favoriteId}` === item.props.id
-            )
-          });
-        })
-      })
-    );
-  }
-  return (items as React.ReactElement[]).map(item =>
-    React.cloneElement(item, {
-      isFavorite: favorites.some(favoriteId => favoriteId === item.props.id)
-    })
-  );
-};
-
 /**
  * Calculate the width of the text
  * Example:

packages/react-datetime/package.json

@@ -31,6 +31,7 @@
   },
   "homepage": "https://github.com/patternfly/patternfly-react/tree/master/packages/react-datetime#readme",
   "scripts": {
+    "build:umd": "rollup -c && rollup -c --environment IS_PRODUCTION",
     "clean": "rimraf dist"
   },
   "dependencies": {

packages/react-datetime/rollup.config.js

@@ -0,0 +1,7 @@
+const { name } = require('./package.json');
+const baseConfig = require('../rollup.base');
+
+module.exports = baseConfig({
+  packageName: name.replace('@patternfly/', ''),
+  name: 'PatternFlyDateTime'
+});

packages/react-table/package.json

@@ -27,6 +27,7 @@
   },
   "homepage": "https://github.com/patternfly/patternfly-react/tree/master/packages/react-table#readme",
   "scripts": {
+    "build:umd": "rollup -c && rollup -c --environment IS_PRODUCTION",
     "clean": "rimraf dist"
   },
   "dependencies": {

packages/react-table/rollup.config.js

@@ -0,0 +1,7 @@
+const { name } = require('./package.json');
+const baseConfig = require('../rollup.base');
+
+module.exports = baseConfig({
+  packageName: name.replace('@patternfly/', ''),
+  name: 'PatternFlyTable'
+});

packages/react-table/src/components/Table/SelectColumn.tsx

@@ -1,5 +1,9 @@
 import * as React from 'react';
-import { RowSelectVariant } from './Table';
+
+export enum RowSelectVariant {
+  radio = 'radio',
+  checkbox = 'checkbox'
+}
 
 export interface SelectColumnProps {
   name?: string;

packages/react-table/src/components/Table/SortColumn.tsx

@@ -4,9 +4,13 @@ import LongArrowAltDownIcon from '@patternfly/react-icons/dist/js/icons/long-arr
 import ArrowsAltVIcon from '@patternfly/react-icons/dist/js/icons/arrows-alt-v-icon';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Table/table';
-import { SortByDirection } from './Table';
 import { TableText } from './TableText';
 
+export enum SortByDirection {
+  asc = 'asc',
+  desc = 'desc'
+}
+
 export interface SortColumnProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children?: React.ReactNode;
   className?: string;

packages/react-table/src/components/Table/Table.tsx

@@ -17,6 +17,8 @@ import { BodyWrapper } from './BodyWrapper';
 import { toCamel } from './utils';
 import { calculateColumns } from './utils/headerUtils';
 import { formatterValueType, ColumnType, RowType, RowKeyType, ColumnsType } from './base';
+import { RowSelectVariant } from './SelectColumn';
+import { SortByDirection } from './SortColumn';
 
 export enum TableGridBreakpoint {
   none = '',
@@ -33,11 +35,6 @@ export enum TableVariant {
 
 export type RowEditType = 'save' | 'cancel' | 'edit';
 
-export enum RowSelectVariant {
-  radio = 'radio',
-  checkbox = 'checkbox'
-}
-
 export interface RowErrors {
   [name: string]: string[];
 }
@@ -78,11 +75,6 @@ export type OnRowEdit = (
   validationErrors?: RowErrors
 ) => void;
 
-export enum SortByDirection {
-  asc = 'asc',
-  desc = 'desc'
-}
-
 // Todo: Update type with next breaking change release
 // export type IHeaderRow = ColumnType;