Merge pull request #333 from pxblue/dev

Publish 5.3.2

.circleci/config.yml

@@ -53,6 +53,9 @@ jobs:
                   paths:
                       - dist
                       - components/coverage
+            - run:
+                  command: cat /sys/fs/cgroup/memory/memory.max_usage_in_bytes
+                  when: always
     coverage_report:
         working_directory: ~/react-component-library
         docker:
@@ -123,6 +126,9 @@ jobs:
                   root: .
                   paths:
                       - demos/storybook/storybook-static
+            - run:
+                  command: cat /sys/fs/cgroup/memory/memory.max_usage_in_bytes
+                  when: always
 
     # Builds the Showcase app using @pxblue/react-components persisted in /dist folder.
     build_showcase:
@@ -166,17 +172,20 @@ jobs:
                   command: |
                       cd demos/showcase
                       yarn build
+            - run:
+                  command: cat /sys/fs/cgroup/memory/memory.max_usage_in_bytes
+                  when: always
 
     deploy_storybook:
         docker:
             - image: circleci/node:12.9.1-browsers
         environment:
             - MASTER_BRANCH: master
             - DEV_BRANCH: dev
-            - DEV_TARGET: https://github.com/pxblue-components/react-dev
-            - MASTER_TARGET: https://github.com/pxblue-components/react
+            - DEV_TARGET: https://github.com/brightlayer-ui-components/react-dev
+            - MASTER_TARGET: https://github.com/brightlayer-ui-components/react
             - GH_EMAIL: [email protected]
-            - GH_NAME: PX Blue Agent
+            - GH_NAME: Brightlayer UI Agent
         steps:
             - checkout
             - attach_workspace:
@@ -197,10 +206,6 @@ jobs:
 
                       cd out
                       git rm -rf .
-                      # Add the CNAME record for pxblue.eaton.com
-                      # if [ $CIRCLE_BRANCH == $MASTER_BRANCH ]; then
-                      #   echo "pxblue-components.eaton.com/react" > CNAME
-                      # fi
                       cd ..
 
                       cp -a storybook-static/. out/.

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## v5.3.2 (November 11, 2021)
+
+### Updated
+
+-   Import material-ui components via default imports instead of named imports to reduce overall bundle size.
+
 ## v5.3.1 (August 9, 2021)
 
 ### Added
@@ -243,4 +249,4 @@ Fixes a bug in icon size for inline `<ChannelValue>` components.
 
 ## v0.0.1 (May 24, 2019)
 
-Initial beta release
+Initial beta release

CODEOWNERS

@@ -1 +1 @@
-* @joebochill @emclaug2 @huayunh @daileytj
+* @jeffvg @emclaug2 @huayunh @daileytj

components/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pxblue/react-components",
-    "version": "5.3.1",
+    "version": "5.3.2",
     "description": "React components for PX Blue applications",
     "scripts": {
         "test": "jest src",

components/src/core/AppBar/AppBar.test.tsx

@@ -1,17 +1,26 @@
 import React from 'react';
 import * as ReactDOM from 'react-dom';
 import * as Enzyme from 'enzyme';
+import { Mount } from '../types';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import { createMount } from '@material-ui/core/test-utils';
 import { AppBar } from './AppBar';
-import { AppBar as MuiAppBar } from '@material-ui/core';
+import MuiAppBar from '@material-ui/core/AppBar';
 
 Enzyme.configure({ adapter: new Adapter() });
+let mount: Mount;
 
 describe('AppBar', () => {
+    beforeEach(() => {
+        mount = createMount({ strict: true });
+    });
+
+    afterEach(() => {
+        mount.cleanUp();
+    });
     it('should render without crashing', () => {
         const div = document.createElement('div');
         ReactDOM.render(<AppBar />, div);
-        ReactDOM.unmountComponentAtNode(div);
     });
 
     it('should render at the correct default sizes', () => {

components/src/core/AppBar/AppBar.tsx

@@ -1,13 +1,10 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import {
-    AppBar as MuiAppBar,
-    AppBarProps as MuiAppBarProps,
-    createStyles,
-    makeStyles,
-    Theme,
-    useMediaQuery,
-    useTheme,
-} from '@material-ui/core';
+import { Theme } from '@material-ui/core/styles/createMuiTheme';
+import createStyles from '@material-ui/core/styles/createStyles';
+import makeStyles from '@material-ui/core/styles/makeStyles';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
+import useTheme from '@material-ui/core/styles/useTheme';
+import MuiAppBar, { AppBarProps as MuiAppBarProps } from '@material-ui/core/AppBar';
 // import { useScrollPosition } from '@n8tb1t/use-scroll-position';
 import clsx from 'clsx';
 import { usePrevious } from '../hooks/usePrevious';

components/src/core/Drawer/Drawer.test.tsx

@@ -6,7 +6,8 @@ import * as Enzyme from 'enzyme';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { createMount, createShallow } from '@material-ui/core/test-utils';
 import { findByTestId } from '../test-utils';
-import { Avatar, Typography } from '@material-ui/core';
+import Avatar from '@material-ui/core/Avatar';
+import Typography from '@material-ui/core/Typography';
 
 import { Drawer } from './Drawer';
 import { DrawerHeader } from './DrawerHeader';

components/src/core/Drawer/Drawer.tsx

@@ -1,13 +1,10 @@
 import React, { useEffect, useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
-import {
-    Drawer as MUIDrawer,
-    DrawerProps as MUIDrawerProps,
-    createStyles,
-    makeStyles,
-    Theme,
-    useTheme,
-} from '@material-ui/core';
+import { Theme } from '@material-ui/core/styles/createMuiTheme';
+import createStyles from '@material-ui/core/styles/createStyles';
+import makeStyles from '@material-ui/core/styles/makeStyles';
+import useTheme from '@material-ui/core/styles/useTheme';
+import MUIDrawer, { DrawerProps as MUIDrawerProps } from '@material-ui/core/Drawer';
 import { DrawerBodyProps } from './DrawerBody';
 import { useDrawerLayout } from '../DrawerLayout/contexts/DrawerLayoutContextProvider';
 import { DrawerContext } from './DrawerContext';

components/src/core/Drawer/DrawerBody.tsx

@@ -1,6 +1,6 @@
 import React, { HTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/core';
+import makeStyles from '@material-ui/core/styles/makeStyles';
 import { DrawerNavGroup, DrawerNavGroupProps } from './DrawerNavGroup';
 import { NavItemSharedStyleProps, NavItemSharedStylePropTypes, SharedStyleProps, SharedStylePropTypes } from './types';
 import { mergeStyleProp } from './utilities';

components/src/core/Drawer/DrawerFooter.tsx

@@ -1,6 +1,7 @@
 import React, { HTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
-import { Divider, makeStyles } from '@material-ui/core';
+import makeStyles from '@material-ui/core/styles/makeStyles';
+import Divider from '@material-ui/core/Divider';
 import { useDrawerContext } from './DrawerContext';
 import clsx from 'clsx';
 

components/src/core/Drawer/DrawerHeader.tsx

@@ -1,15 +1,12 @@
 import React, { ReactNode, useCallback } from 'react';
 import PropTypes from 'prop-types';
-import {
-    createStyles,
-    makeStyles,
-    Theme,
-    Toolbar,
-    Typography,
-    ToolbarProps,
-    Divider,
-    IconButton,
-} from '@material-ui/core';
+import { Theme } from '@material-ui/core/styles/createMuiTheme';
+import createStyles from '@material-ui/core/styles/createStyles';
+import makeStyles from '@material-ui/core/styles/makeStyles';
+import Toolbar, { ToolbarProps } from '@material-ui/core/Toolbar';
+import Typography from '@material-ui/core/Typography';
+import Divider from '@material-ui/core/Divider';
+import IconButton from '@material-ui/core/IconButton';
 import { useDrawerContext } from './DrawerContext';
 import clsx from 'clsx';
 

components/src/core/Drawer/DrawerNavGroup.tsx

@@ -2,17 +2,14 @@ import React, { ReactNode, useCallback, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useDrawerContext } from './DrawerContext';
 import { NavGroupContext } from './NavGroupContext';
-import {
-    createStyles,
-    makeStyles,
-    Theme,
-    useTheme,
-    List,
-    ListProps,
-    Typography,
-    ListSubheader,
-    Divider,
-} from '@material-ui/core';
+import { Theme } from '@material-ui/core/styles/createMuiTheme';
+import createStyles from '@material-ui/core/styles/createStyles';
+import makeStyles from '@material-ui/core/styles/makeStyles';
+import useTheme from '@material-ui/core/styles/useTheme';
+import List, { ListProps } from '@material-ui/core/List';
+import Typography from '@material-ui/core/Typography';
+import ListSubheader from '@material-ui/core/ListSubheader';
+import Divider from '@material-ui/core/Divider';
 import { NavItemSharedStyleProps, NavItemSharedStylePropTypes, SharedStyleProps, SharedStylePropTypes } from './types';
 import { DrawerNavItem, DrawerNavItemProps, NestedDrawerNavItemProps } from './DrawerNavItem';
 import { DrawerRailItem, DrawerRailItemProps } from './DrawerRailItem';

components/src/core/Drawer/DrawerNavItem.tsx

@@ -3,7 +3,12 @@ import PropTypes from 'prop-types';
 import { useDrawerContext } from './DrawerContext';
 import { useNavGroupContext } from './NavGroupContext';
 import { usePrevious } from '../hooks/usePrevious';
-import { createStyles, makeStyles, Theme, useTheme, Collapse, List } from '@material-ui/core';
+import { Theme } from '@material-ui/core/styles/createMuiTheme';
+import createStyles from '@material-ui/core/styles/createStyles';
+import makeStyles from '@material-ui/core/styles/makeStyles';
+import useTheme from '@material-ui/core/styles/useTheme';
+import List from '@material-ui/core/List';
+import Collapse from '@material-ui/core/Collapse';
 import { InfoListItem, InfoListItemProps as PXBInfoListItemProps } from '../InfoListItem';
 import ArrowDropDown from '@material-ui/icons/ArrowDropDown';
 import ChevronRight from '@material-ui/icons/ChevronRight';

components/src/core/Drawer/DrawerRailItem.tsx

@@ -1,17 +1,14 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { useDrawerContext } from './DrawerContext';
-import {
-    Avatar,
-    ButtonBase,
-    ButtonBaseProps as MuiButtonBaseProps,
-    Divider,
-    Tooltip,
-    Typography,
-    createStyles,
-    makeStyles,
-    Theme,
-} from '@material-ui/core';
+import { Theme } from '@material-ui/core/styles/createMuiTheme';
+import createStyles from '@material-ui/core/styles/createStyles';
+import makeStyles from '@material-ui/core/styles/makeStyles';
+import Avatar from '@material-ui/core/Avatar';
+import ButtonBase, { ButtonBaseProps as MuiButtonBaseProps } from '@material-ui/core/ButtonBase';
+import Divider from '@material-ui/core/Divider';
+import Tooltip from '@material-ui/core/Tooltip';
+import Typography from '@material-ui/core/Typography';
 import { RAIL_WIDTH, RAIL_WIDTH_CONDENSED } from './Drawer';
 import { SharedStyleProps, SharedStylePropTypes } from './types';
 import { NavItem } from './DrawerNavItem';

components/src/core/Drawer/DrawerSubheader.tsx

@@ -1,7 +1,7 @@
 import React, { HTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
 import { useDrawerContext } from './DrawerContext';
-import { Divider } from '@material-ui/core';
+import Divider from '@material-ui/core/Divider';
 
 export type DrawerSubheaderProps = HTMLAttributes<HTMLDivElement> & {
     /** Optional divider which appears below the Subheader

components/src/core/Drawer/types.tsx

@@ -1,4 +1,4 @@
-import { DrawerProps } from '@material-ui/core';
+import { DrawerProps } from '@material-ui/core/Drawer';
 import PropTypes from 'prop-types';
 
 export type DrawerVariant = DrawerProps['variant'] | 'rail';

components/src/core/DropdownToolbar/DropdownToolbar.test.tsx

@@ -1,20 +1,30 @@
 import React from 'react';
 import * as ReactDOM from 'react-dom';
 import * as Enzyme from 'enzyme';
+import { Mount } from '../types';
 // import Adapter from 'enzyme-adapter-react-16';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { DropdownToolbar } from './DropdownToolbar';
-import { ListItemText, Typography } from '@material-ui/core';
-import { Menu } from '@material-ui/icons';
+import ListItemText from '@material-ui/core/ListItemText';
+import Typography from '@material-ui/core/Typography';
+import Menu from '@material-ui/icons/Menu';
 import { act } from 'react-dom/test-utils';
+import { createMount } from '@material-ui/core/test-utils';
 
 Enzyme.configure({ adapter: new Adapter() });
+let mount: Mount;
 
 describe('DropdownToolbar', () => {
+    beforeEach(() => {
+        mount = createMount({ strict: true });
+    });
+
+    afterEach(() => {
+        mount.cleanUp();
+    });
     it('should render without crashing', () => {
         const div = document.createElement('div');
         ReactDOM.render(<DropdownToolbar title={'title'} />, div);
-        ReactDOM.unmountComponentAtNode(div);
     });
 
     it('should render correct title and subtitle', () => {

components/src/core/DropdownToolbar/DropdownToolbar.tsx

@@ -1,16 +1,12 @@
 import React, { useState, useCallback, useRef, useEffect } from 'react';
-import {
-    Typography,
-    Toolbar,
-    ListItemText,
-    Menu,
-    ToolbarProps,
-    createStyles,
-    makeStyles,
-    useTheme,
-    Theme,
-    MenuProps as standardMenuProps,
-} from '@material-ui/core';
+import { Theme } from '@material-ui/core/styles/createMuiTheme';
+import createStyles from '@material-ui/core/styles/createStyles';
+import makeStyles from '@material-ui/core/styles/makeStyles';
+import useTheme from '@material-ui/core/styles/useTheme';
+import Typography from '@material-ui/core/Typography';
+import Toolbar, { ToolbarProps } from '@material-ui/core/Toolbar';
+import ListItemText from '@material-ui/core/ListItemText';
+import Menu, { MenuProps as standardMenuProps } from '@material-ui/core/Menu';
 import ArrowDropDown from '@material-ui/icons/ArrowDropDown';
 import clsx from 'clsx';
 import { NavItem, DrawerNavGroup } from '../Drawer';

components/src/core/EmptyState/EmptyState.test.tsx

@@ -38,7 +38,6 @@ describe('EmptyState', () => {
             />,
             div
         );
-        ReactDOM.unmountComponentAtNode(div);
     });
 
     it('renders with frame class', () => {

components/src/core/Hero/Hero.test.tsx

@@ -26,7 +26,6 @@ describe('Hero', () => {
     it('renders without crashing', () => {
         const div = document.createElement('div');
         ReactDOM.render(<Hero icon={'A'} label={'Healthy'} value={96} units={'/100'} />, div);
-        ReactDOM.unmountComponentAtNode(div);
     });
     it('should render with the wrapper class', () => {
         const wrapper = shallow(<Hero value={1} label={'test'} icon={'a'} />);

components/src/core/HeroBanner/HeroBanner.test.tsx

@@ -2,17 +2,26 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { HeroBanner } from './HeroBanner';
 import { Hero } from '../Hero';
-import Enzyme, { mount } from 'enzyme';
+import Enzyme from 'enzyme';
+import { Mount } from '../types';
 // import Adapter from 'enzyme-adapter-react-16';
+import { createMount } from '@material-ui/core/test-utils';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 
 Enzyme.configure({ adapter: new Adapter() });
+let mount: Mount;
 
 describe('HeroBanner', () => {
+    beforeEach(() => {
+        mount = createMount({ strict: true });
+    });
+
+    afterEach(() => {
+        mount.cleanUp();
+    });
     test('renders without crashing', () => {
         const div = document.createElement('div');
         ReactDOM.render(<HeroBanner />, div);
-        ReactDOM.unmountComponentAtNode(div);
     });
     it('renders only 4 children', () => {
         const hero = mount(