add babel esm and umd exports

config/babel.config.js

@@ -1,6 +1,7 @@
 // https://babeljs.io/docs/en/next/options
 
 module.exports = {
-  presets: ['@babel/preset-env', '@babel/preset-react'],
+  presets: ['@babel/react'],
+  ignore: ['src/jest', 'src/cosmos', '**/tests/**', '**/fixtures/**'],
   plugins: ['@babel/plugin-proposal-class-properties'],
 };

config/eslint.browser.js

@@ -59,5 +59,6 @@ module.exports = {
         groups: [['builtin', 'external'], ['internal', 'parent', 'sibling', 'index']],
       },
     ],
+    'import/no-cycle': 'off',
   },
 };

config/jest.config.js

@@ -23,7 +23,7 @@ module.exports = {
       transform: {
         '\\.js$': `${paths.config}/jest.transform.babel.js`,
       },
-      transformIgnorePatterns: ['node_modules/(?!(@novnc))'],
+      transformIgnorePatterns: ['node_modules/(?!(@novnc|@spice-project))'],
       setupFiles: [`${paths.src}/jest/setupTest.js`],
       snapshotSerializers: ['enzyme-to-json/serializer'],
       moduleNameMapper: {

config/jest.transform.babel.js

@@ -1,4 +1,7 @@
 // Custom Jest transformer that wraps babel-jest and applies project-specific
 // Babel options, avoiding the need to rely on .babelrc lookup semantics.
 
-module.exports = require('babel-jest').createTransformer(require('./babel.config'));
+module.exports = require('babel-jest').createTransformer({
+  presets: ['@babel/env', '@babel/react'],
+  plugins: ['@babel/plugin-proposal-class-properties'],
+});

package.json

@@ -23,8 +23,11 @@
     "test": "yarn jest",
     "test:watch": "yarn test --watch",
     "prebuild": "yarn test --ci && shx rm -rf dist",
-    "build": "NODE_ENV=production yarn build:js && yarn build:sass",
-    "build:js": "babel src --config-file ./config/babel.config.js --out-dir dist/js --only 'src/**/*.js' --ignore 'src/jest,src/cosmos,**/tests/**,**/fixtures/**'",
+    "build": "yarn build:babel && yarn build:sass",
+    "build:babel": "concurrently \"yarn build:babel:esm && yarn build:babel:umd\" \"yarn build:babel:cjs\"",
+    "build:babel:cjs": "babel --config-file ./config/babel.config.js --source-maps --extensions \".js,.ts,.tsx\" src --out-dir dist/js --presets=@babel/env",
+    "build:babel:esm": "babel --config-file ./config/babel.config.js --source-maps --extensions \".js,.ts,.tsx\" src --out-dir dist/esm",
+    "build:babel:umd": "babel --config-file ./config/babel.config.js --source-maps --extensions \".js\" dist/esm --out-dir dist/umd --plugins=transform-es2015-modules-umd",
     "build:sass": "shx cp -r sass dist",
     "dev": "shx rm -rf dist && NODE_ENV=development yarn build:js && yarn build:sass",
     "jest": "jest --config config/jest.config.js",
@@ -43,7 +46,9 @@
   },
   "dependencies": {
     "@patternfly/react-console": "1.x",
+    "babel-plugin-transform-es2015-modules-umd": "6.24.1",
     "classnames": "2.x",
+    "concurrently": "4.1.1",
     "js-yaml": "3.x",
     "lodash": "4.x",
     "react-dnd": "2.6.x",

src/components/BareMetalHosts/tests/BaremetalHostRole.test.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import { BaremetalHostRole } from '..';
-
 import BaremetalHostRoleFixture from '../fixtures/BaremetalHostRole.fixture';
 
+import { BaremetalHostRole } from '..';
+
 const testBaremetalHostRole = () => <BaremetalHostRole {...BaremetalHostRoleFixture[0].props} />;
 
 describe('<BaremetalHostRole />', () => {

src/components/BareMetalHosts/tests/BaremetalHostStatus.test.js

@@ -1,17 +1,15 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import { BaremetalHostStatus } from '..';
-
 import BaremetalHostStatusFixture from '../fixtures/BaremetalHostStatus.fixture';
 
+import { BaremetalHostStatus } from '..';
+
 const getComponentFunction = props => () => <BaremetalHostStatus {...props} />;
 
 describe('<BaremetalHostStatus />', () => {
   BaremetalHostStatusFixture.forEach((fixture, index) => {
-    it(`renders the correct subcomponent for the "${
-      fixture.props.host.status.provisioning.state
-    }" state (${index})`, () => {
+    it(`renders the correct subcomponent for the "${fixture.props.host.status.provisioning.state}" state (${index})`, () => {
       const component = shallow(getComponentFunction(fixture.props)());
       expect(component).toMatchSnapshot();
     });

src/components/CancelAcceptButtons/tests/CancelAcceptButtons.test.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import { CancelAcceptButtons } from '..';
-
 import CancelAcceptButtonsFixture from '../fixtures/CancelAcceptButtons.fixture';
 
+import { CancelAcceptButtons } from '..';
+
 const testCancelAcceptButtons = (disabled = false) => (
   <CancelAcceptButtons {...CancelAcceptButtonsFixture[0].props} disabled={disabled} />
 );

src/components/ClusterOverview/fixtures/ClusterOverview.fixture.js

@@ -8,8 +8,6 @@ import { capacityStats } from '../Capacity/fixtures/Capacity.fixture';
 import { utilizationStats } from '../Utilization/fixtures/Utilization.fixture';
 import { clusterDetailsData } from '../Details/fixtures/Details.fixture';
 
-import { complianceData } from '..';
-
 import { ClusterOverviewContext } from '../ClusterOverviewContext';
 
 import { localhostNode } from '../../../tests/mocks/node';
@@ -20,6 +18,8 @@ import { fullVm } from '../../../tests/mocks/vm/vm.mock';
 import { cloudInitTestVmi } from '../../../tests/mocks/vmi/cloudInitTestVmi.mock';
 import { warningAlert, unknownTypeAlert, criticalAlert } from '../../Dashboard/Alert/fixtures/AlertItem.fixture';
 
+import { complianceData } from '..';
+
 export const nodes = [localhostNode];
 export const pvcs = persistentVolumeClaims;
 export const pods = [cloudInitTestPod];

src/components/ClusterOverview/tests/__snapshots__/ClusterOverview.test.js.snap

@@ -17,15 +17,15 @@ exports[`<ClusterOverview /> renders correctly 1`] = `
       <MediaQuery
         key="main-medium"
         maxWidth={991.9}
-        values={Object {}}
+        values={null}
       >
         <MainCards />
       </MediaQuery>
       <LeftCards />
       <MediaQuery
         key="main-large"
         minWidth={992}
-        values={Object {}}
+        values={null}
       >
         <MainCards />
       </MediaQuery>

src/components/ConfigurationSummary/fixtures/ConfigurationSummary.fixture.js

@@ -1,7 +1,7 @@
-import { ConfigurationSummary } from '..';
-
 import { cloudInitTestVm } from '../../../tests/mocks/vm/cloudInitTestVm.mock';
 
+import { ConfigurationSummary } from '..';
+
 export default {
   component: ConfigurationSummary,
   props: {

src/components/ConfigurationSummary/tests/ConfigurationSummary.test.js

@@ -2,12 +2,12 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { cloneDeep } from 'lodash';
 
-import { ConfigurationSummary } from '..';
-
 import { default as ConfigurationSummaryFixture } from '../fixtures/ConfigurationSummary.fixture';
 import { cloudInitTestVm } from '../../../tests/mocks/vm/cloudInitTestVm.mock';
 import { fullVm } from '../../../tests/mocks/vm/vm.mock';
 
+import { ConfigurationSummary } from '..';
+
 const testConfigurationSummary = (vm = cloudInitTestVm) => (
   <ConfigurationSummary {...ConfigurationSummaryFixture.props} vm={vm} />
 );

src/components/CreateDeviceRow/fixtures/CreateDeviceRow.fixture.js

@@ -1,9 +1,9 @@
 import { noop } from 'patternfly-react';
 
-import { CreateDeviceRow } from '..';
-
 import { Loading } from '../../Loading';
 
+import { CreateDeviceRow } from '..';
+
 const deviceFields = {
   name: {
     id: 'device-name',

src/components/CreateDeviceRow/tests/CreateDeviceRow.test.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import { CreateDeviceRow } from '..';
-
 import { default as CreateDeviceRowFixture } from '../fixtures/CreateDeviceRow.fixture';
 
+import { CreateDeviceRow } from '..';
+
 const testCreateDeviceRow = () => <CreateDeviceRow {...CreateDeviceRowFixture.props} />;
 
 describe('<CreateDeviceRow />', () => {

src/components/CreateNicRow/tests/CreateNicRow.test.js

@@ -3,8 +3,6 @@ import { cloneDeep } from 'lodash';
 import { shallow, mount } from 'enzyme';
 import { MenuItem } from 'patternfly-react';
 
-import { CreateNicRow } from '..';
-
 import { Dropdown } from '../../Form/Dropdown';
 import CreateNicRowFixture from '../fixtures/CreateNicRow.fixture';
 import { networkConfigs } from '../../../tests/mocks/networkAttachmentDefinition';
@@ -13,6 +11,8 @@ import { getName } from '../../../selectors';
 import { Loading } from '../../Loading';
 import { POD_NETWORK } from '../../../constants';
 
+import { CreateNicRow } from '..';
+
 const testCreateNicRow = (networks, nic = {}) => (
   <CreateNicRow {...CreateNicRowFixture.props} networks={networks} nic={nic} />
 );

src/components/Details/Description/fixtures/Description.fixture.js

@@ -1,7 +1,7 @@
-import { Description } from '..';
-
 import { cloudInitTestVm } from '../../../../tests/mocks/vm/cloudInitTestVm.mock';
 
+import { Description } from '..';
+
 export default [
   {
     component: Description,

src/components/Details/Description/tests/Description.test.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import { Description } from '..';
-
 import { default as DescriptionFixture } from '../fixtures/Description.fixture';
 
+import { Description } from '..';
+
 const testDescription = () => <Description {...DescriptionFixture[0].props} id="description" />;
 
 describe('<Description />', () => {

src/components/Details/Flavor/fixtures/Flavor.fixture.js

@@ -1,9 +1,9 @@
-import { Flavor } from '..';
-
 import { cloudInitTestVm } from '../../../../tests/mocks/vm/cloudInitTestVm.mock';
 import { fedora28 } from '../../../../k8s/objects/template/fedora28';
 import { getFlavor } from '../../../../selectors';
 
+import { Flavor } from '..';
+
 export default [
   {
     component: Flavor,

src/components/Details/Flavor/tests/Flavor.test.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import { Flavor } from '..';
-
 import { default as FlavorFixture } from '../fixtures/Flavor.fixture';
 
+import { Flavor } from '..';
+
 const testFlavor = () => <Flavor {...FlavorFixture[0].props} id="myflavor" />;
 const testFlavorEdit = () => <Flavor {...FlavorFixture[1].props} id="myflavor" />;
 

src/components/Details/Url/tests/Url.test.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { mount } from 'enzyme';
 
-import { Url } from '..';
-
 import { default as urlFixtures } from '../fixtures/Url.fixture';
 
+import { Url } from '..';
+
 // eslint-disable-next-line react/prop-types
 const testUrl = ({ props }) => <Url {...props} />;
 

src/components/Dialog/BasicMigrationDialog/tests/BasicMigrationDialog.test.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import { shallow, mount } from 'enzyme';
 
-import { BasicMigrationDialog } from '..';
-
 import { k8sCreate } from '../../../../tests/k8s';
 import { blueVmi } from '../../../../tests/mocks/vmi/blue.mock';
 import { migrate } from '../../../../k8s/migrate';
 import { getButton } from '../../../../tests/enzyme';
 
+import { BasicMigrationDialog } from '..';
+
 jest.mock('../../../../k8s/migrate');
 
 const getMigrateButton = component => getButton(component, 'Migrate');

src/components/Dialog/CloneDialog/fixtures/CloneDialog.fixture.js

@@ -1,11 +1,11 @@
 import { noop } from 'patternfly-react';
 
-import { CloneDialog } from '..';
-
 import { units, namespaces } from '../../../Wizard/CreateVmWizard/fixtures/CreateVmWizard.fixture';
 import { k8sCreate, k8sPatch } from '../../../../tests/k8s';
 import { cloudInitTestVm } from '../../../../tests/mocks/vm/cloudInitTestVm.mock';
 
+import { CloneDialog } from '..';
+
 export default {
   component: CloneDialog,
   props: {

src/components/Dialog/CloneDialog/tests/CloneDialog.test.js

@@ -3,8 +3,6 @@ import { shallow, mount } from 'enzyme';
 import { HelpBlock, noop, Alert } from 'patternfly-react';
 import { cloneDeep } from 'lodash';
 
-import { CloneDialog } from '..';
-
 import { clone } from '../../../../k8s/clone';
 import { default as CloneDialogFixture } from '../fixtures/CloneDialog.fixture';
 import { cloudInitTestVm } from '../../../../tests/mocks/vm/cloudInitTestVm.mock';
@@ -16,6 +14,8 @@ import { DESCRIPTION_KEY, NAME_KEY, NAMESPACE_KEY } from '../../../Wizard/Create
 import { k8sCreate } from '../../../../tests/k8s';
 import { flushPromises, setCheckbox, setInput, clickButton, selectDropdownItem } from '../../../../tests/enzyme';
 
+import { CloneDialog } from '..';
+
 jest.mock('../../../../k8s/clone');
 
 const testCloneDialog = (vms = [], onClose = noop, vm = cloudInitTestVm) => (

src/components/InlineEdit/tests/InlineEdit.test.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import { InlineEdit } from '..';
-
 import { default as InlineEditFixture } from '../fixtures/InlineEdit.fixture';
 
+import { InlineEdit } from '..';
+
 const testInlineEdit = () => <InlineEdit {...InlineEditFixture.props} />;
 
 describe('<InlineEdit />', () => {

src/components/StorageOverview/tests/__snapshots__/StorageOverview.test.js.snap

@@ -17,15 +17,15 @@ exports[`<StorageOverview /> shallow-renders correctly 1`] = `
       <MediaQuery
         key="main-medium"
         maxWidth={991.9}
-        values={Object {}}
+        values={null}
       >
         <MainCards />
       </MediaQuery>
       <LeftCards />
       <MediaQuery
         key="main-large"
         minWidth={992}
-        values={Object {}}
+        values={null}
       >
         <MainCards />
       </MediaQuery>

src/utils/status/vm/vmStatus.js

@@ -39,11 +39,11 @@ import {
   POD_PHASE_PENDING,
 } from '../pod';
 
-import { NOT_HANDLED } from '..';
-
 import { parseNumber } from '../../utils';
 import { CONVERSION_PROGRESS_ANNOTATION } from '../../../k8s/requests/v2v/constants';
 
+import { NOT_HANDLED } from '..';
+
 export const isVmOff = vmStatus => vmStatus.status === VM_STATUS_OFF;
 
 const isBeingMigrated = (vm, migrations) => {