@verdaccio/ui-theme 6.0.0-6-next.12 → 6.0.0-6-next.13

package/.babelrc

@@ -12,7 +12,7 @@
     ],
     "@babel/preset-react"
   ],
-  "plugins": ["react-hot-loader/babel", "@babel/transform-runtime", "emotion"],
+  "plugins": ["react-hot-loader/babel", "@babel/transform-runtime", "@emotion"],
   "env": {
     "test": {
       "presets": [

package/.eslintrc

@@ -11,21 +11,6 @@
     "verdaccio"
   ],
   "rules": {
-    "import/order": ["error", {
-      "pathGroups": [
-        {
-          "pattern": "verdaccio-ui/**",
-          "group": "external",
-          "position": "after"
-        }
-      ],
-      "pathGroupsExcludedImportTypes": ["verdaccio-ui"],
-      "alphabetize": {
-        "order": "asc",
-        "caseInsensitive": true
-      },
-      "newlines-between": "always"
-    }],
     "react/display-name": 0,
     "react/no-deprecated": 1,
     "react/jsx-no-target-blank": 1,

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @verdaccio/ui-theme
 
+## 6.0.0-6-next.13
+
+### Major Changes
+
+- 000d4374: feat: upgrade to material ui 5
+
 ## 6.0.0-6-next.12
 
 ### Major Changes

package/jest/setup-env.ts

@@ -1,9 +1,12 @@
+import '@testing-library/jest-dom';
 import '@testing-library/jest-dom/extend-expect';
 import 'whatwg-fetch';
-import '@testing-library/jest-dom';
 
 import { server } from './server';
 
+// mock load translations to avoid warnings
+jest.mock('../src/i18n/loadTranslationFile');
+
 beforeAll(() => {
   server.listen({
     onUnhandledRequest: 'warn',

package/jest/unit/components/__mocks__/token.ts

@@ -1,7 +1,6 @@
 /**
  * Token Utility
  */
-
 import dayjs from 'dayjs';
 import { Base64 } from 'js-base64';
 

package/jest/unit/components/store/login.ts

@@ -1,4 +1,5 @@
 import { API_ERROR } from '../../../../lib/constants';
+
 /**
  * API mock for login endpoint
  * @param {object}  config configuration of api call

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@verdaccio/ui-theme",
-	"version": "6.0.0-6-next.12",
+	"version": "6.0.0-6-next.13",
 	"description": "Verdaccio User Interface",
 	"author": {
 		"name": "Verdaccio Contributors",
@@ -17,44 +17,42 @@
 		"npm": ">=6"
 	},
 	"devDependencies": {
-		"@types/react": "17.0.19",
+		"@types/react": "17.0.37",
 		"@types/react-autosuggest": "10.1.5",
-		"@types/react-dom": "17.0.9",
-		"@types/react-helmet": "6.1.2",
+		"@types/react-dom": "17.0.11",
+		"@types/react-helmet": "6.1.4",
 		"@types/redux": "3.6.0",
-		"@types/react-router-dom": "5.1.8",
-		"@types/react-virtualized": "9.21.13",
-		"@emotion/core": "10.1.1",
-		"@emotion/jest": "11.3.0",
-		"@emotion/styled": "10.0.27",
-		"@emotion/styled-base": "^10.0.31",
-		"@material-ui/core": "4.11.4",
-		"@material-ui/icons": "4.11.2",
-		"@material-ui/styles": "4.11.4",
-		"@rematch/core": "2.1.0",
-		"@rematch/loading": "2.1.0",
-		"@testing-library/dom": "8.5.0",
-		"@testing-library/jest-dom": "5.14.1",
-		"@testing-library/react": "12.1.0",
-		"@verdaccio/node-api": "6.0.0-6-next.22",
-		"autosuggest-highlight": "3.1.1",
-		"babel-loader": "8.2.2",
+		"@types/react-router-dom": "5.3.2",
+		"@types/react-virtualized": "9.21.15",
+		"@emotion/react": "11.5.0",
+		"@emotion/jest": "11.5.0",
+		"@emotion/styled": "11.3.0",
+		"@emotion/css": "11.5.0",
+		"@emotion/babel-plugin": "11.0.0",
+		"@mui/icons-material": "5.0.5",
+		"@mui/material": "5.0.6",
+		"@mui/styles": "5.0.2",
+		"@rematch/core": "2.2.0",
+		"@rematch/loading": "2.1.2",
+		"@testing-library/dom": "8.11.1",
+		"@testing-library/jest-dom": "5.16.1",
+		"@testing-library/react": "12.1.2",
+		"@verdaccio/node-api": "6.0.0-6-next.25",
+		"@verdaccio/types": "11.0.0-6-next.10",
+		"babel-loader": "8.2.3",
 		"babel-plugin-dynamic-import-node": "2.3.3",
-		"babel-plugin-emotion": "10.2.2",
 		"bundlesize": "0.18.1",
-		"css-loader": "6.2.0",
-		"dayjs": "1.10.6",
-		"emotion": "10.0.27",
-		"emotion-theming": "10.0.27",
+		"css-loader": "6.5.1",
+		"dayjs": "1.10.7",
 		"friendly-errors-webpack-plugin": "1.7.0",
 		"github-markdown-css": "4.0.0",
 		"harmony-reflect": "1.6.2",
 		"history": "4.10.1",
-		"html-webpack-plugin": "5.3.2",
+		"html-webpack-plugin": "5.4.0",
 		"i18next": "20.6.1",
 		"in-publish": "2.0.1",
-		"country-flag-icons": "1.4.10",
-		"js-base64": "3.6.1",
+		"country-flag-icons": "1.4.19",
+		"js-base64": "3.7.2",
 		"js-yaml": "3.14.1",
 		"localstorage-memory": "1.0.3",
 		"lodash": "4.17.21",
@@ -66,7 +64,6 @@
 		"ora": "5.4.1",
 		"prop-types": "15.7.2",
 		"react": "17.0.2",
-		"react-autosuggest": "10.1.0",
 		"react-dom": "17.0.2",
 		"react-hook-form": "7.15.3",
 		"react-hot-loader": "4.13.0",
@@ -74,8 +71,8 @@
 		"react-router": "5.2.1",
 		"react-router-dom": "5.3.0",
 		"react-virtualized": "9.22.3",
-		"react-redux": "7.2.1",
-		"redux": "4.1.1",
+		"react-redux": "7.2.6",
+		"redux": "4.1.2",
 		"rimraf": "3.0.2",
 		"msw": "0.35.0",
 		"standard-version": "9.3.1",
@@ -86,18 +83,18 @@
 		"stylelint-processor-styled-components": "1.10.0",
 		"stylelint-webpack-plugin": "3.0.1",
 		"supertest": "6.1.6",
-		"terser-webpack-plugin": "5.2.3",
+		"terser-webpack-plugin": "5.2.5",
 		"url-loader": "4.1.1",
-		"validator": "13.6.0",
-		"webpack": "5.52.0",
+		"validator": "13.7.0",
+		"webpack": "5.64.0",
 		"webpack-bundle-analyzer": "4.4.2",
 		"webpack-bundle-size-analyzer": "3.1.0",
 		"webpack-cli": "^4.7.2",
-		"webpack-dev-server": "3.11.2",
+		"webpack-dev-server": "3.11.3",
 		"webpack-manifest-plugin": "4.0.2",
 		"webpack-merge": "5.8.0",
 		"whatwg-fetch": "3.6.2",
-		"xss": "1.0.9"
+		"xss": "1.0.10"
 	},
 	"keywords": [
 		"private",

package/src/App/App.test.tsx

@@ -1,17 +1,15 @@
 import React from 'react';
-
 import {
-  renderWithStore,
   act,
-  waitFor,
   fireEvent,
+  renderWithStore,
   screen,
+  waitFor,
 } from 'verdaccio-ui/utils/test-react-testing-library';
 
 // eslint-disable-next-line jest/no-mocks-import
 import { generateTokenWithTimeRange } from '../../jest/unit/components/__mocks__/token';
 import { store } from '../store';
-
 import App from './App';
 
 jest.mock('verdaccio-ui/utils/storage', () => {
@@ -68,7 +66,7 @@ describe('<App />', () => {
           expect(queryByTestId('greetings-label')).toBeFalsy();
         }
       }
-    });
+    }, 10000);
 
     test('isUserAlreadyLoggedIn: token already available in storage', async () => {
       const { queryByTestId, queryAllByText } = renderWithStore(<App />, store);
@@ -92,7 +90,7 @@ describe('<App />', () => {
           expect(queryAllByText('verdaccio')).toBeTruthy();
         }
       }
-    });
+    }, 10000);
   });
 
   describe('list packages', () => {

package/src/App/App.tsx

@@ -1,20 +1,18 @@
 /* eslint-disable react/jsx-max-depth */
 import styled from '@emotion/styled';
-import React, { useEffect, Suspense } from 'react';
+import React, { Suspense, useEffect } from 'react';
 import { Router } from 'react-router-dom';
-
 import Box from 'verdaccio-ui/components/Box';
 import Loading from 'verdaccio-ui/components/Loading';
-import loadDayJSLocale from 'verdaccio-ui/design-tokens/load-dayjs-locale';
 import StyleBaseline from 'verdaccio-ui/design-tokens/StyleBaseline';
+import loadDayJSLocale from 'verdaccio-ui/design-tokens/load-dayjs-locale';
 import { Theme } from 'verdaccio-ui/design-tokens/theme';
 
+import '../i18n/config';
 import AppRoute, { history } from './AppRoute';
 import Footer from './Footer';
 import Header from './Header';
 
-import '../i18n/config';
-
 const StyledBox = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
   backgroundColor: theme?.palette.background.default,
 }));

package/src/App/AppRoute.tsx

@@ -1,6 +1,6 @@
 import { createBrowserHistory } from 'history';
 import React from 'react';
-import { Route as ReactRouterDomRoute, Switch, Router } from 'react-router-dom';
+import { Route as ReactRouterDomRoute, Router, Switch } from 'react-router-dom';
 
 import loadable from './utils/loadable';
 

package/src/App/Footer/Footer.test.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-
 import { render } from 'verdaccio-ui/utils/test-react-testing-library';
 
 import Footer from './Footer';

package/src/App/Footer/Footer.tsx

@@ -1,17 +1,17 @@
 /* eslint-disable react/jsx-max-depth */
+
 /* eslint-disable react/jsx-pascal-case */
 import styled from '@emotion/styled';
 import FlagsIcon from 'country-flag-icons/react/3x2';
 import React from 'react';
-import { useTranslation, Trans } from 'react-i18next';
-
+import { Trans, useTranslation } from 'react-i18next';
 import { Earth } from 'verdaccio-ui/components/Icons';
 import Logo from 'verdaccio-ui/components/Logo';
 import { Theme } from 'verdaccio-ui/design-tokens/theme';
 import { useConfig } from 'verdaccio-ui/providers/config';
 import { goToVerdaccioWebsite } from 'verdaccio-ui/utils/windows';
 
-import { Wrapper, Left, Right, Love, Inner } from './styles';
+import { Inner, Left, Love, Right, Wrapper } from './styles';
 
 /* eslint-disable react/jsx-key */
 const Footer = () => {

package/src/App/Footer/__snapshots__/Footer.test.tsx.snap

@@ -19,25 +19,24 @@ exports[`<Footer /> component should load the initial state of Footer component
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
   -ms-flex-pack: end;
+  -webkit-justify-content: flex-end;
   justify-content: flex-end;
   width: 100%;
 }
 
-@media (min-width:768px) {
+@media (min-width: 768px) {
   .emotion-2 {
     min-width: 400px;
     max-width: 800px;
     margin: auto;
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
-    -ms-flex-pack: justify;
     justify-content: space-between;
   }
 }
 
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
   .emotion-2 {
     max-width: 1240px;
   }
@@ -51,7 +50,7 @@ exports[`<Footer /> component should load the initial state of Footer component
   display: none;
 }
 
-@media (min-width:768px) {
+@media (min-width: 768px) {
   .emotion-4 {
     display: -webkit-box;
     display: -webkit-flex;
@@ -74,7 +73,21 @@ exports[`<Footer /> component should load the initial state of Footer component
   visibility: visible;
 }
 
-.emotion-11 {
+.emotion-12 {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  width: 1em;
+  height: 1em;
+  display: inline-block;
+  fill: currentColor;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  font-size: 1.5rem;
   width: 18px;
   height: 18px;
   margin: 0px 8px;
@@ -82,7 +95,7 @@ exports[`<Footer /> component should load the initial state of Footer component
 
 .emotion-13 {
   display: inline-grid;
-  grid-template-columns: repeat(8,max-content);
+  grid-template-columns: repeat(8, max-content);
   grid-gap: 0px 8px;
   position: absolute;
   background: #d3dddd;
@@ -106,6 +119,7 @@ exports[`<Footer /> component should load the initial state of Footer component
   border: 5px solid;
   border-color: #d3dddd transparent transparent transparent;
   -webkit-transform: rotate(90deg);
+  -moz-transform: rotate(90deg);
   -ms-transform: rotate(90deg);
   transform: rotate(90deg);
 }
@@ -126,7 +140,7 @@ exports[`<Footer /> component should load the initial state of Footer component
   display: flex;
 }
 
-@media (min-width:768px) {
+@media (min-width: 768px) {
   .emotion-31 {
     display: -webkit-box;
     display: -webkit-flex;
@@ -139,7 +153,9 @@ exports[`<Footer /> component should load the initial state of Footer component
   display: inline-block;
   vertical-align: middle;
   box-sizing: border-box;
+  -webkit-background-position: center;
   background-position: center;
+  -webkit-background-size: contain;
   background-size: contain;
   background-image: url([object Object]);
   background-repeat: no-repeat;
@@ -168,7 +184,7 @@ exports[`<Footer /> component should load the initial state of Footer component
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root emotion-10 emotion-11 emotion-12"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-10 emotion-11 emotion-12"
           focusable="false"
           viewBox="0 0 45 45"
         >

package/src/App/Footer/styles.ts

@@ -1,11 +1,10 @@
 import styled from '@emotion/styled';
-
 import { Theme } from 'verdaccio-ui/design-tokens/theme';
 
 export const Wrapper = styled('div')<{ theme?: Theme }>(({ theme }) => ({
-  background: theme?.palette.type === 'light' ? theme?.palette.snow : theme?.palette.cyanBlue,
+  background: theme?.palette.mode === 'light' ? theme?.palette.snow : theme?.palette.cyanBlue,
   borderTop: `1px solid ${theme?.palette.greyGainsboro}`,
-  color: theme?.palette.type === 'dark' ? theme?.palette.white : theme?.palette.nobel01,
+  color: theme?.palette.mode === 'dark' ? theme?.palette.white : theme?.palette.nobel01,
   fontSize: '14px',
   padding: '20px',
 }));

package/src/App/Header/Header.test.tsx

@@ -1,18 +1,16 @@
 import React from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
-
 import {
-  renderWithStore,
-  fireEvent,
-  waitFor,
   cleanup,
+  fireEvent,
+  renderWithStore,
   screen,
+  waitFor,
   waitForElementToBeRemoved,
 } from 'verdaccio-ui/utils/test-react-testing-library';
 
 import translationEN from '../../i18n/crowdin/ui.json';
 import { store } from '../../store';
-
 import Header from './Header';
 
 /* eslint-disable react/jsx-no-bind*/

package/src/App/Header/Header.tsx

@@ -1,18 +1,16 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
-
 import Button from 'verdaccio-ui/components/Button';
 import { useConfig } from 'verdaccio-ui/providers/config';
 
 import { Dispatch, RootState } from '../../store/store';
-
 import HeaderInfoDialog from './HeaderInfoDialog';
 import HeaderLeft from './HeaderLeft';
 import HeaderRight from './HeaderRight';
 import LoginDialog from './LoginDialog';
 import Search from './Search';
-import { NavBar, InnerNavBar, MobileNavBar, InnerMobileNavBar } from './styles';
+import { InnerMobileNavBar, InnerNavBar, MobileNavBar, NavBar } from './styles';
 
 interface Props {
   withoutSearch?: boolean;
@@ -25,7 +23,7 @@ const Header: React.FC<Props> = ({ withoutSearch }) => {
   const [showMobileNavBar, setShowMobileNavBar] = useState<boolean>(false);
   const [showLoginModal, setShowLoginModal] = useState<boolean>(false);
   const loginStore = useSelector((state: RootState) => state.login);
-  const configStore = useSelector((state: RootState) => state.configuration);
+  const configStore = useSelector((state: RootState) => state.configuration.config);
   const { configOptions } = useConfig();
   const dispatch = useDispatch<Dispatch>();
   const handleLogout = () => {
@@ -64,7 +62,7 @@ const Header: React.FC<Props> = ({ withoutSearch }) => {
           </Button>
         </MobileNavBar>
       )}
-      {!loginStore.user && (
+      {!loginStore.username && (
         <LoginDialog onClose={() => setShowLoginModal(false)} open={showLoginModal} />
       )}
     </>

package/src/App/Header/HeaderGreetings.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-
 import Label from 'verdaccio-ui/components/Label';
 
 import { Greetings } from './styles';

package/src/App/Header/HeaderLeft.tsx

@@ -1,7 +1,6 @@
 import styled from '@emotion/styled';
 import React from 'react';
 import { Link } from 'react-router-dom';
-
 import Logo from 'verdaccio-ui/components/Logo';
 
 import Search from './Search';

package/src/App/Header/HeaderMenu.tsx

@@ -1,7 +1,6 @@
-import AccountCircle from '@material-ui/icons/AccountCircle';
+import AccountCircle from '@mui/icons-material/AccountCircle';
 import React, { MouseEvent } from 'react';
 import { useTranslation } from 'react-i18next';
-
 import IconButton from 'verdaccio-ui/components/IconButton';
 import Menu from 'verdaccio-ui/components/Menu';
 import MenuItem from 'verdaccio-ui/components/MenuItem';
@@ -32,7 +31,8 @@ const HeaderMenu: React.FC<Props> = ({
         color="inherit"
         data-testid="logInDialogIcon"
         id="header--button-account"
-        onClick={onLoggedInMenu}>
+        onClick={onLoggedInMenu}
+        size="large">
         <AccountCircle />
       </IconButton>
       <Menu

package/src/App/Header/HeaderRight.tsx

@@ -1,6 +1,5 @@
-import React, { useState, useEffect, useContext, MouseEvent } from 'react';
+import React, { MouseEvent, useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-
 import Button from 'verdaccio-ui/components/Button';
 import ThemeContext from 'verdaccio-ui/design-tokens/ThemeContext';
 

package/src/App/Header/HeaderToolTip.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-
 import Tooltip from 'verdaccio-ui/components/Tooltip';
 
 import HeaderToolTipIcon, { TooltipIconType } from './HeaderToolTipIcon';

package/src/App/Header/HeaderToolTipIcon.tsx

@@ -1,10 +1,9 @@
-import Help from '@material-ui/icons/Help';
-import Info from '@material-ui/icons/Info';
-import NightsStay from '@material-ui/icons/NightsStay';
-import Search from '@material-ui/icons/Search';
-import WbSunny from '@material-ui/icons/WbSunny';
+import Help from '@mui/icons-material/Help';
+import Info from '@mui/icons-material/Info';
+import NightsStay from '@mui/icons-material/NightsStay';
+import Search from '@mui/icons-material/Search';
+import WbSunny from '@mui/icons-material/WbSunny';
 import React, { forwardRef } from 'react';
-
 import IconButton from 'verdaccio-ui/components/IconButton';
 
 import { IconSearchButton, StyledLink } from './styles';
@@ -30,7 +29,7 @@ const HeaderToolTipIcon = forwardRef<HeaderToolTipIconRef, Props>(function Heade
           data-testid={'header--tooltip-documentation'}
           external={true}
           to={'https://verdaccio.org/docs/en/installation'}>
-          <IconButton color={'inherit'}>
+          <IconButton color={'inherit'} size="large">
             <Help />
           </IconButton>
         </StyledLink>
@@ -42,7 +41,8 @@ const HeaderToolTipIcon = forwardRef<HeaderToolTipIconRef, Props>(function Heade
           data-testid={'header--tooltip-info'}
           id="header--button-registryInfo"
           onClick={onClick}
-          ref={ref}>
+          ref={ref}
+          size="large">
           <Info />
         </IconButton>
       );
@@ -55,7 +55,7 @@ const HeaderToolTipIcon = forwardRef<HeaderToolTipIconRef, Props>(function Heade
     case 'dark-mode':
       // todo(Priscila): Add Zoom transition effect
       return (
-        <IconButton color="inherit" onClick={onClick} ref={ref}>
+        <IconButton color="inherit" onClick={onClick} ref={ref} size="large">
           <NightsStay />
         </IconButton>
       );
@@ -63,7 +63,7 @@ const HeaderToolTipIcon = forwardRef<HeaderToolTipIconRef, Props>(function Heade
     case 'light-mode':
       // todo(Priscila): Add Zoom transition effect
       return (
-        <IconButton color="inherit" onClick={onClick} ref={ref}>
+        <IconButton color="inherit" onClick={onClick} ref={ref} size="large">
           <WbSunny />
         </IconButton>
       );

package/src/App/Header/LanguageSwitch.tsx

@@ -1,15 +1,14 @@
 /* eslint-disable react/jsx-pascal-case */
 import styled from '@emotion/styled';
-import { withStyles } from '@material-ui/core/styles';
-import LanguageIcon from '@material-ui/icons/Language';
+import LanguageIcon from '@mui/icons-material/Language';
+import withStyles from '@mui/styles/withStyles';
 import i18next from 'i18next';
-import React, { useCallback, useContext, useState, useMemo } from 'react';
+import React, { useCallback, useContext, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-
 import { AutoComplete } from 'verdaccio-ui/components/AutoComplete/AutoCompleteV2';
 import MenuItem from 'verdaccio-ui/components/MenuItem';
-import { Theme } from 'verdaccio-ui/design-tokens/theme';
 import ThemeContext from 'verdaccio-ui/design-tokens/ThemeContext';
+import { Theme } from 'verdaccio-ui/design-tokens/theme';
 
 import { Language, listLanguages } from '../../i18n/enabledLanguages';
 

package/src/App/Header/LoginDialog/LoginDialog.test.tsx

@@ -1,17 +1,15 @@
 import React from 'react';
-
 import api from 'verdaccio-ui/providers/API/api';
 import {
-  renderWithStore,
-  waitFor,
-  fireEvent,
+  act,
   cleanup,
+  fireEvent,
+  renderWithStore,
   screen,
-  act,
+  waitFor,
 } from 'verdaccio-ui/utils/test-react-testing-library';
 
 import { store } from '../../../store';
-
 import LoginDialog from './LoginDialog';
 
 describe('<LoginDialog /> component', () => {
@@ -103,7 +101,6 @@ describe('<LoginDialog /> component', () => {
       fireEvent.click(signInButton);
     });
     expect(props.onClose).toHaveBeenCalledTimes(1);
-    // screen.debug();
   });
 
   test.todo('validateCredentials: should validate credentials');