Merge pull request #456 from brightlayer-ui/dev

Publish v6.1.0
etn-ccis · Jun 24, 2022 · aa8dbc2 · aa8dbc2
2 parents b8531b1 + 8a87bab
commit aa8dbc2
Show file tree

Hide file tree

Showing 85 changed files with 5,665 additions and 2,629 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## v6.1.0 (June 24, 2022)
+
+### Changed
+
+-   Components are now styled using use the new MUI styled engine and extend the sx prop.
+
 ## v6.0.0 (April 1, 2022)
 
 ### Changed

diff --git a/VALIDATION.md b/VALIDATION.md
@@ -0,0 +1,26 @@
+# Validation Steps
+
+### Manual Steps
+
+#### Showcase
+1. Beta package integrates into showcase without errors.
+2. BLUI Data Display page renders correctly; checking ChannelValue, EmptyState, Hero, InfoListItem, ThreeLiner, and UserMenu.
+4. BLUI Surfaces page renders correctly; checking Collapsible Appbar, Toolbar Menu, and Scorecard.
+
+#### Sandbox
+1. Verify the AppBar component renders correctly in the sandbox environment, using available knobs.
+2. Verify the ChannelValue component renders correctly in the sandbox environment, using available knobs.
+3. Verify the Drawer component renders correctly in the sandbox environment, using available knobs.
+4. Verify the DrawerLayout component renders correctly in the sandbox environment, using available knobs.
+5. Verify the Empty State component renders correctly in the sandbox environment, using available knobs.
+6. Verify the Hero component renders correctly in the sandbox environment, using available knobs.
+7. Verify the InfoListItem component renders correctly in the sandbox environment, using available knobs.
+8. Verify the ListItemTag component renders correctly in the sandbox environment, using available knobs.
+9. Verify the ScoreCard component renders correctly in the sandbox environment, using available knobs.
+10. Verify the Spacer component renders correctly in the sandbox environment, using available knobs.
+11. Verify the ThreeLiner component renders correctly in the sandbox environment, using available knobs.
+12. Verify the ToolbarMenu component renders correctly in the sandbox environment, using available knobs.
+13. Verify the UserMenu component renders correctly in the sandbox environment, using available knobs.
+
+### Unit Test Count
+59
diff --git a/components/package.json b/components/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@brightlayer-ui/react-components",
-    "version": "6.0.0",
+    "version": "6.1.0",
     "description": "React components for Brightlayer UI applications",
     "scripts": {
         "test": "jest src",
@@ -13,7 +13,8 @@
     },
     "prettier": "@brightlayer-ui/prettier-config",
     "dependencies": {
-        "@brightlayer-ui/colors": "^3.0.0",
+        "@brightlayer-ui/colors": "^3.1.1",
+        "@emotion/css": "^11.9.0",
         "@seznam/compose-react-refs": "^1.0.6",
         "color": "^4.2.1"
     },
@@ -29,22 +30,23 @@
         "@types/color": "^3.0.1",
         "@types/enzyme": "^3.10.4",
         "@types/enzyme-adapter-react-16": "^1.0.5",
-        "@types/jest": "^27.4.1",
-        "@types/react-dom": "^17.0.11",
+        "@types/jest": "^27.0.0",
+        "@types/react-dom": "^18.0.5",
         "@typescript-eslint/eslint-plugin": "^5.14.0",
         "@typescript-eslint/parser": "^5.14.0",
         "@wojtekmaj/enzyme-adapter-react-17": "^0.6.0",
-        "clsx": "^1.1.0",
         "enzyme": "^3.5.0",
         "enzyme-adapter-react-16": "^1.8.0",
-        "eslint": "^8.10.0",
-        "eslint-config-prettier": "^8.1.0",
-        "eslint-plugin-react": "^7.20.3",
-        "jest": "^27.5.1",
+        "eslint": "^8.15.0",
+        "eslint-config-prettier": "^8.5.0",
+        "eslint-plugin-react": "^7.29.4",
+        "i": "^0.3.7",
+        "jest": "^27.0.0",
+        "npm": "^8.12.1",
         "prettier": "^2.2.0",
         "react": "^18.0.0",
         "react-dom": "^18.0.0",
-        "ts-jest": "^27.1.3",
+        "ts-jest": "^28.0.4",
         "typescript": "^4.2.3"
     },
     "peerDependencies": {

diff --git a/components/src/core/AppBar/AppBar.test.tsx b/components/src/core/AppBar/AppBar.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import * as ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import * as Enzyme from 'enzyme';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { mountWithTheme } from '../test-utils';
@@ -15,11 +15,11 @@ Enzyme.configure({ adapter: new Adapter() });
 describe('AppBar', () => {
     it('should render without crashing', () => {
         const div = document.createElement('div');
-        ReactDOM.render(
+        const root = createRoot(div);
+        root.render(
             <ThemeProvider theme={theme}>
                 <AppBar />
-            </ThemeProvider>,
-            div
+            </ThemeProvider>
         );
     });
 

diff --git a/components/src/core/AppBar/AppBar.tsx b/components/src/core/AppBar/AppBar.tsx
@@ -1,50 +1,53 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { Theme, useTheme } from '@mui/material/styles';
-import createStyles from '@mui/styles/createStyles';
-import makeStyles from '@mui/styles/makeStyles';
+import { styled, useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import MuiAppBar, { AppBarProps as MuiAppBarProps } from '@mui/material/AppBar';
 // import { useScrollPosition } from '@n8tb1t/use-scroll-position';
 import clsx from 'clsx';
 import { usePrevious } from '../hooks/usePrevious';
-
-export type AppBarClasses = {
-    root?: string;
-    background?: string;
-    expanded?: string;
-    collapsed?: string;
-    expandedBackground?: string;
+import { unstable_composeClasses as composeClasses } from '@mui/base';
+import appBarClasses, { AppBarClasses, AppBarClassKey, getAppBarUtilityClass } from './AppBarClasses';
+import { cx } from '@emotion/css';
+
+const useUtilityClasses = (ownerState: AppBarProps): Record<AppBarClassKey, string> => {
+    const { classes } = ownerState;
+
+    const slots = {
+        root: ['root'],
+        background: ['background'],
+        expanded: ['expanded'],
+        collapsed: ['collapsed'],
+        expandedBackground: ['expandedBackground'],
+    };
+
+    return composeClasses(slots, getAppBarUtilityClass, classes);
 };
-const useStyles = makeStyles((theme: Theme) =>
-    createStyles({
-        root: {
-            overflow: 'hidden',
-            transition: (props: AppBarProps): string =>
-                theme.transitions.create(['height'], {
-                    duration: props.animationDuration || theme.transitions.duration.standard,
-                    easing: theme.transitions.easing.easeInOut,
-                }),
-        },
-        background: {
-            position: 'absolute',
-            zIndex: -1,
-            width: '100%',
-            backgroundSize: 'cover',
-            height: '100%',
-            opacity: 0.3,
-            backgroundPosition: 'center bottom',
-            backgroundImage: (props: AppBarProps): string => `url(${props.backgroundImage})`,
-            transition: (props: AppBarProps): string =>
-                theme.transitions.create(['all'], {
-                    duration: props.animationDuration || theme.transitions.duration.standard,
-                    easing: theme.transitions.easing.easeInOut,
-                }),
-        },
-        expanded: {},
-        collapsed: {},
-        expandedBackground: {},
-    })
-);
+
+const Root = styled(MuiAppBar, {
+    name: 'app-bar',
+    slot: 'root',
+    shouldForwardProp: (prop) => prop !== 'backgroundImage',
+})<Pick<AppBarProps, 'animationDuration' | 'backgroundImage'>>(({ animationDuration, backgroundImage, theme }) => ({
+    overflow: 'hidden',
+    transition: theme.transitions.create(['height'], {
+        duration: animationDuration || theme.transitions.duration.standard,
+        easing: theme.transitions.easing.easeInOut,
+    }),
+    [`& .${appBarClasses.background}`]: {
+        position: 'absolute',
+        zIndex: -1,
+        width: '100%',
+        backgroundSize: 'cover',
+        height: '100%',
+        opacity: 0.3,
+        backgroundPosition: 'center bottom',
+        backgroundImage: `url(${backgroundImage})`,
+        transition: theme.transitions.create(['all'], {
+            duration: animationDuration || theme.transitions.duration.standard,
+            easing: theme.transitions.easing.easeInOut,
+        }),
+    },
+}));
 
 export type AppBarProps = Omit<MuiAppBarProps, 'variant'> & {
     /**
@@ -139,6 +142,7 @@ const AppBarRender: React.ForwardRefRenderFunction<unknown, AppBarProps> = (prop
         animationDuration: durationProp,
         expandedHeight = 200,
         backgroundImage,
+        className: userClassName,
         classes = {},
         collapsedHeight = defaultAppBarHeight,
         // onExpandedHeightReached,
@@ -150,7 +154,7 @@ const AppBarRender: React.ForwardRefRenderFunction<unknown, AppBarProps> = (prop
     const scrollElement = scrollContainerId ? document.getElementById(scrollContainerId) : null;
     const scrollTop = scrollElement ? scrollElement.scrollTop : window.scrollY;
 
-    const defaultClasses = useStyles(props);
+    const defaultClasses = useUtilityClasses(props);
     const animationDuration = durationProp || theme.transitions.duration.standard;
 
     const [offset, setOffset] = useState(0);
@@ -280,26 +284,28 @@ const AppBarRender: React.ForwardRefRenderFunction<unknown, AppBarProps> = (prop
     }, [handleScroll]);
 
     return (
-        <>
-            <MuiAppBar
-                ref={ref}
-                {...muiAppBarProps}
-                className={clsx(defaultClasses.root, classes.root, {
-                    [defaultClasses.expanded]: isExpanded,
+        <Root
+            ref={ref}
+            {...muiAppBarProps}
+            className={cx(
+                defaultClasses.root,
+                classes.root,
+                {
                     [classes.expanded]: isExpanded,
-                    [defaultClasses.collapsed]: !isExpanded,
                     [classes.collapsed]: !isExpanded,
-                })}
-                style={Object.assign({}, style, {
-                    height: height,
-                    overflow: 'hidden',
-                })}
-                position={'sticky'}
-            >
-                {getBackgroundImage()}
-                {props.children}
-            </MuiAppBar>
-        </>
+                },
+                userClassName
+            )}
+            style={Object.assign({}, style, {
+                height: height,
+                overflow: 'hidden',
+            })}
+            position={'sticky'}
+            backgroundImage={backgroundImage}
+        >
+            {getBackgroundImage()}
+            {props.children}
+        </Root>
     );
 };
 

diff --git a/components/src/core/AppBar/AppBarClasses.tsx b/components/src/core/AppBar/AppBarClasses.tsx
@@ -0,0 +1,25 @@
+import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+
+export type AppBarClasses = {
+    root?: string;
+    background?: string;
+    expanded?: string;
+    collapsed?: string;
+    expandedBackground?: string;
+};
+
+export type AppBarClassKey = keyof AppBarClasses;
+
+export function getAppBarUtilityClass(slot: string): string {
+    return generateUtilityClass('BluiAppBar', slot);
+}
+
+const appBarClasses: AppBarClasses = generateUtilityClasses('BluiAppBar', [
+    'root',
+    'background',
+    'expanded',
+    'collapsed',
+    'expandedBackground',
+]);
+
+export default appBarClasses;
diff --git a/components/src/core/AppBar/index.ts b/components/src/core/AppBar/index.ts
@@ -1 +1,2 @@
 export * from './AppBar';
+export { AppBarClasses } from './AppBarClasses';
diff --git a/components/src/core/ChannelValue/ChannelValue.test.tsx b/components/src/core/ChannelValue/ChannelValue.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import * as ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { findByTestId, mountWithTheme } from '../test-utils';
 import { ChannelValue } from './ChannelValue';
 import * as Enzyme from 'enzyme';
@@ -15,13 +15,12 @@ Enzyme.configure({ adapter: new Adapter() });
 describe('ChannelValue', () => {
     it('renders without crashing', () => {
         const div = document.createElement('div');
-        ReactDOM.render(
+        const root = createRoot(div);
+        root.render(
             <ThemeProvider theme={theme}>
                 <ChannelValue value={'test'} />
-            </ThemeProvider>,
-            div
+            </ThemeProvider>
         );
-        ReactDOM.unmountComponentAtNode(div);
     });
     it('should render with the wrapper class', () => {
         const wrapper = mountWithTheme(<ChannelValue value={1} />, theme);
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export * from './AppBar';
		export { AppBarClasses } from './AppBarClasses';