Merge pull request #393 from brightlayer-ui/dev

Publish v6.0.0
etn-ccis · Apr 1, 2022 · b8531b1 · b8531b1
2 parents 457891c + d592750
commit b8531b1
Show file tree

Hide file tree

Showing 66 changed files with 3,148 additions and 4,853 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -2,12 +2,14 @@ version: 2.1
 orbs:
     codecov: codecov/[email protected]
     gh: circleci/[email protected]
+    browser-tools: circleci/[email protected]
 jobs:
     build_library:
         docker:
-            - image: circleci/node:12.9.1-browsers
+            - image: cimg/node:14.19.0-browsers
         steps:
             - checkout
+            - browser-tools/install-browser-tools
             - restore_cache:
                   keys:
                       - v2-dependencies-react-{{ checksum "components/yarn.lock" }}
@@ -59,7 +61,7 @@ jobs:
     coverage_report:
         working_directory: ~/react-component-library
         docker:
-            - image: circleci/node:12.9.1-browsers
+            - image: cimg/node:14.19.0-browsers
         steps:
             - checkout
             - attach_workspace:
@@ -71,7 +73,7 @@ jobs:
     # Builds the Storybook app using @brightlayer-ui/react-components persisted in /dist folder.
     build_storybook:
         docker:
-            - image: circleci/node:12.9.1-browsers
+            - image: cimg/node:14.19.0-browsers
         environment:
             - MASTER_BRANCH: master
             - DEV_BRANCH: dev
@@ -133,7 +135,7 @@ jobs:
     # Builds the Showcase app using @brightlayer-ui/react-components persisted in /dist folder.
     build_showcase:
         docker:
-            - image: circleci/node:12.9.1-browsers
+            - image: cimg/node:14.19.0-browsers
         environment:
             - MASTER_BRANCH: master
         steps:
@@ -178,7 +180,7 @@ jobs:
 
     deploy_storybook:
         docker:
-            - image: circleci/node:12.9.1-browsers
+            - image: cimg/node:14.19.0-browsers
         environment:
             - MASTER_BRANCH: master
             - DEV_BRANCH: dev
@@ -216,7 +218,7 @@ jobs:
                       git push
     publish:
       docker:
-        - image: circleci/node:12.9.1-browsers
+        - image: cimg/node:14.19.0-browsers
       steps:
         - checkout
         - attach_workspace:
@@ -233,7 +235,7 @@ jobs:
 
     tag:
       docker:
-        - image: circleci/node:12.9.1-browsers
+        - image: cimg/node:14.19.0-browsers
       steps:
         - checkout
         - attach_workspace:
@@ -249,24 +251,23 @@ workflows:
     react_library:
         jobs:
             - build_library
-            - build_showcase:
-                  requires:
-                      - build_library
-            - build_storybook:
-                  requires:
-                      - build_library
-            - deploy_storybook:
-                  requires:
-                      - build_storybook
-                  filters:
-                      branches:
-                          only:
-                              - master
-                              - dev
+            # - build_showcase:
+                #   requires:
+                #       - build_library
+            # - build_storybook:
+            #       requires:
+            #           - build_library
+            # - deploy_storybook:
+            #       requires:
+            #           - build_storybook
+            #       filters:
+            #           branches:
+            #               only:
+            #                   - master
+            #                   - dev
             - publish:
                   requires:
-                      - build_storybook
-                      - build_showcase
+                      - build_library
                   filters:
                        branches:
                           only:

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,18 @@
 # Changelog
 
+## v6.0.0 (April 1, 2022)
+
+### Changed
+
+-   Components are now built to work with Material UI v5 ([#352](https://github.com/brightlayer-ui/react-component-library/issues/352)).
+-   In `<Hero>` component, `fontSize`, `value`, `valueIcon`, `valueColor` and `units` props have been replaced by `ChannelValueProps` prop, which will allow you to specify any props on the underlying `<ChannelValue>` component. ([#365](https://github.com/brightlayer-ui/react-component-library/issues/365)).
+
+### Removed
+
+-   Quick set options for fontSize ('normal' and 'small') have been removed in the `<Hero>` / `<ChannelValue>` components — if you were using these options previously, they can be replaced with '1.25rem' and '1rem', respectively, e.g.:
+    -   `<Hero ChannelValueProps={{ fontSize: '1rem' }} />`
+-   DropdownToolbar. You should switch to using the `<ToolbarMenu>` component inside of a MUI Toolbar instead. ([#353](https://github.com/brightlayer-ui/react-component-library/issues/353)).
+
 ## v5.4.0 (February 8, 2022)
 
 ### Added

diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 # Brightlayer UI React Components
 
 [![](https://img.shields.io/circleci/project/github/brightlayer-ui/react-component-library/master.svg?style=flat)](https://circleci.com/gh/brightlayer-ui/react-component-library/tree/master)
-![npm](https://img.shields.io/npm/v/@brightlayer-ui/react-components?label=%40brightlayer-ui%2Freact-components)
+![npm](https://img.shields.io/npm/v/@brightlayer-ui/react-components?label=%40brightlayer-ui%2Freact-components) [![codecov](https://codecov.io/gh/brightlayer-ui/react-component-library/branch/master/graph/badge.svg?token=HQFW5YF7WP)](https://codecov.io/gh/brightlayer-ui/react-component-library)
 
 This is a library of re-usable React components for use in Brightlayer UI applications. For the most part, these components are meant to simplify building your application by providing drop-in components that implement common use cases in Brightlayer UI and eliminate the need for multiple teams to build their own components for these.
 

diff --git a/components/.eslintrc.js b/components/.eslintrc.js
@@ -11,5 +11,22 @@ module.exports = {
     rules: {
         '@typescript-eslint/no-empty-function': 'off',
         'no-empty-function': 'off',
+        '@typescript-eslint/naming-convention': [
+            'error',
+            {
+                selector: [
+                    'classProperty',
+                    'objectLiteralProperty',
+                    'typeProperty',
+                    'classMethod',
+                    'objectLiteralMethod',
+                    'typeMethod',
+                    'accessor',
+                    'enumMember',
+                ],
+                format: null,
+                modifiers: ['requiresQuotes'],
+            },
+        ],
     },
 };
diff --git a/components/LICENSES.json b/components/LICENSES.json
@@ -0,0 +1,20 @@
+{
+    "@brightlayer-ui/[email protected]": {
+        "licenses": "BSD-3-Clause",
+        "repository": "https://github.com/brightlayer-ui/colors",
+        "licenseUrl": "https://github.com/brightlayer-ui/colors/raw/master/LICENSE",
+        "parents": "@brightlayer-ui/react-components"
+    },
+    "@seznam/[email protected]": {
+        "licenses": "ISC",
+        "repository": "https://github.com/seznam/compose-react-refs",
+        "licenseUrl": "https://github.com/seznam/compose-react-refs/raw/master/LICENSE",
+        "parents": "@brightlayer-ui/react-components"
+    },
+    "[email protected]": {
+        "licenses": "MIT",
+        "repository": "https://github.com/Qix-/color",
+        "licenseUrl": "https://github.com/Qix-/color/raw/master/LICENSE",
+        "parents": "@brightlayer-ui/react-components"
+    }
+}
diff --git a/components/jest.config.js b/components/jest.config.js
@@ -9,4 +9,5 @@ module.exports = {
             tsconfig: 'tsconfig.test.json',
         },
     },
+    testEnvironment: 'jsdom',
 };
diff --git a/components/package.json b/components/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@brightlayer-ui/react-components",
-    "version": "5.4.0",
+    "version": "6.0.0",
     "description": "React components for Brightlayer UI applications",
     "scripts": {
         "test": "jest src",
@@ -15,40 +15,47 @@
     "dependencies": {
         "@brightlayer-ui/colors": "^3.0.0",
         "@seznam/compose-react-refs": "^1.0.6",
-        "color": "^3.1.2"
+        "color": "^4.2.1"
     },
     "devDependencies": {
-        "@brightlayer-ui/eslint-config": "^2.0.1",
+        "@brightlayer-ui/eslint-config": "^3.0.0",
         "@brightlayer-ui/prettier-config": "^1.0.2",
-        "@brightlayer-ui/react-themes": "^6.0.0",
-        "@material-ui/core": "^4.11.0",
-        "@material-ui/icons": "^4.0.0",
+        "@brightlayer-ui/react-themes": "^7.0.0",
+        "@emotion/react": "^11.7.1",
+        "@emotion/styled": "^11.6.0",
+        "@mui/icons-material": "^5.3.1",
+        "@mui/material": "^5.4.1",
+        "@mui/styles": "^5.4.1",
         "@types/color": "^3.0.1",
         "@types/enzyme": "^3.10.4",
         "@types/enzyme-adapter-react-16": "^1.0.5",
-        "@types/jest": "^26.0.22",
-        "@types/react-dom": "^17.0.3",
-        "@typescript-eslint/eslint-plugin": "^4.19.0",
-        "@typescript-eslint/parser": "^4.19.0",
+        "@types/jest": "^27.4.1",
+        "@types/react-dom": "^17.0.11",
+        "@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": "^7.4.0",
+        "eslint": "^8.10.0",
         "eslint-config-prettier": "^8.1.0",
         "eslint-plugin-react": "^7.20.3",
-        "jest": "^26.0.0",
+        "jest": "^27.5.1",
         "prettier": "^2.2.0",
-        "react": "^17.0.2",
-        "react-dom": "^17.0.2",
-        "ts-jest": "^26.0.0",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0",
+        "ts-jest": "^27.1.3",
         "typescript": "^4.2.3"
     },
     "peerDependencies": {
         "@brightlayer-ui/colors": "^3.0.0",
-        "@material-ui/core": "^4.11.0",
-        "react": "^16.0.0 || ^17.0.0",
-        "react-dom": "^16.0.0 || ^17.0.0"
+        "@emotion/react": "^11.7.1",
+        "@emotion/styled": "^11.6.0",
+        "@mui/icons-material": "^5.3.1",
+        "@mui/material": "^5.4.0",
+        "@mui/styles": "^5.3.0",
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
     },
     "repository": {
         "type": "git",

diff --git a/components/src/core/AppBar/AppBar.test.tsx b/components/src/core/AppBar/AppBar.test.tsx
@@ -1,63 +1,63 @@
 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 { mountWithTheme } from '../test-utils';
 import { AppBar } from './AppBar';
-import MuiAppBar from '@material-ui/core/AppBar';
+import MuiAppBar from '@mui/material/AppBar';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import * as BLUIThemes from '@brightlayer-ui/react-themes';
+
+const theme = createTheme(BLUIThemes.blue);
 
 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.render(
+            <ThemeProvider theme={theme}>
+                <AppBar />
+            </ThemeProvider>,
+            div
+        );
     });
 
     it('should render at the correct default sizes', () => {
         // Dynamic
-        let appbar = Enzyme.mount(<AppBar />);
+        let appbar = mountWithTheme(<AppBar />, theme);
         let muiAppbar = appbar.find(MuiAppBar);
         let height = muiAppbar.props().style.height;
         expect(height).toEqual(200);
 
         // Collapsed
-        appbar = Enzyme.mount(<AppBar variant={'collapsed'} />);
+        appbar = mountWithTheme(<AppBar variant={'collapsed'} />, theme);
         muiAppbar = appbar.find(MuiAppBar);
         height = muiAppbar.props().style.height;
         expect(height).toEqual('4rem');
 
         // Expanded
-        appbar = Enzyme.mount(<AppBar variant={'expanded'} />);
+        appbar = mountWithTheme(<AppBar variant={'expanded'} />, theme);
         muiAppbar = appbar.find(MuiAppBar);
         height = muiAppbar.props().style.height;
         expect(height).toEqual(200);
     });
 
     it('should render at the correct custom sizes', () => {
         // Dynamic
-        let appbar = Enzyme.mount(<AppBar expandedHeight={300} collapsedHeight={100} />);
+        let appbar = mountWithTheme(<AppBar expandedHeight={300} collapsedHeight={100} />, theme);
         let muiAppbar = appbar.find(MuiAppBar);
         let height = muiAppbar.props().style.height;
         expect(height).toEqual(300);
 
         // Collapsed
-        appbar = Enzyme.mount(<AppBar variant={'collapsed'} expandedHeight={300} collapsedHeight={100} />);
+        appbar = mountWithTheme(<AppBar variant={'collapsed'} expandedHeight={300} collapsedHeight={100} />, theme);
         muiAppbar = appbar.find(MuiAppBar);
         height = muiAppbar.props().style.height;
         expect(height).toEqual(100);
 
         // Expanded
-        appbar = Enzyme.mount(<AppBar variant={'expanded'} expandedHeight={300} collapsedHeight={100} />);
+        appbar = mountWithTheme(<AppBar variant={'expanded'} expandedHeight={300} collapsedHeight={100} />, theme);
         muiAppbar = appbar.find(MuiAppBar);
         height = muiAppbar.props().style.height;
         expect(height).toEqual(300);

diff --git a/components/src/core/AppBar/AppBar.tsx b/components/src/core/AppBar/AppBar.tsx
@@ -1,10 +1,9 @@
 import React, { useCallback, useEffect, useState } from 'react';
-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 { Theme, useTheme } from '@mui/material/styles';
+import createStyles from '@mui/styles/createStyles';
+import makeStyles from '@mui/styles/makeStyles';
+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';
@@ -132,7 +131,7 @@ export type AppBarProps = Omit<MuiAppBarProps, 'variant'> & {
 
 const AppBarRender: React.ForwardRefRenderFunction<unknown, AppBarProps> = (props: AppBarProps, ref: any) => {
     const theme = useTheme();
-    const isMobile = useMediaQuery(theme.breakpoints.down('xs'));
+    const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
     const defaultAppBarHeight = isMobile ? '3.5rem' : '4rem';
     const {
         style = {},
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,4 +9,5 @@ module.exports = { @@
                 tsconfig: 'tsconfig.test.json',
             },
         },
+        testEnvironment: 'jsdom',
     };