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

package/src/pages/Version/DetailSidebar/Dist/styles.ts

@@ -1,5 +1,4 @@
 import styled from '@emotion/styled';
-
 import Chip from 'verdaccio-ui/components/Chip';
 import FloatingActionButton from 'verdaccio-ui/components/FloatingActionButton';
 import ListItem from 'verdaccio-ui/components/ListItem';
@@ -14,11 +13,13 @@ export const StyledText = styled(Text)<{ theme?: Theme }>((props) => ({
 export const DistListItem = styled(ListItem)({
   paddingLeft: 0,
   paddingRight: 0,
+  flexWrap: 'wrap',
 });
 
 export const DistChips = styled(Chip)({
   marginRight: 5,
   textTransform: 'capitalize',
+  marginTop: 5,
 });
 
 export const DownloadButton = styled(FloatingActionButton)<{ theme?: Theme }>((props) => ({

package/src/pages/Version/DetailSidebar/Engines/Engines.test.tsx

@@ -1,10 +1,8 @@
 import React from 'react';
-
-import { render, cleanup } from 'verdaccio-ui/utils/test-react-testing-library';
+import { cleanup, render } from 'verdaccio-ui/utils/test-react-testing-library';
 
 import { PackageMetaInterface } from '../../../../../types/packageMeta';
 import { DetailContext } from '../../context';
-
 import Engine from './Engines';
 
 jest.mock('./img/node.png', () => '');

package/src/pages/Version/DetailSidebar/Engines/Engines.tsx

@@ -1,6 +1,5 @@
 import React, { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
-
 import Avatar from 'verdaccio-ui/components/Avatar';
 import Grid from 'verdaccio-ui/components/Grid';
 import List from 'verdaccio-ui/components/List';
@@ -8,9 +7,8 @@ import ListItemText from 'verdaccio-ui/components/ListItemText';
 
 import { DetailContext } from '../../context';
 import npm from '../Install/img/npm.svg';
-
 import node from './img/node.png';
-import { StyledText, EngineListItem } from './styles';
+import { EngineListItem, StyledText } from './styles';
 
 const Engine: React.FC = () => {
   const { packageMeta } = useContext(DetailContext);

package/src/pages/Version/DetailSidebar/Engines/styles.ts

@@ -1,5 +1,4 @@
 import styled from '@emotion/styled';
-
 import ListItem from 'verdaccio-ui/components/ListItem';
 import Text from 'verdaccio-ui/components/Text';
 import { Theme } from 'verdaccio-ui/design-tokens/theme';

package/src/pages/Version/DetailSidebar/Install/Install.test.tsx

@@ -1,12 +1,10 @@
 import React from 'react';
-
 import { render, screen } from 'verdaccio-ui/utils/test-react-testing-library';
 
 import { DetailContext } from '../../context';
 import { DetailContextProps } from '../../version-config';
-
-import data from './__partials__/data.json';
 import Install from './Install';
+import data from './__partials__/data.json';
 
 const detailContextValue: Partial<DetailContextProps> = {
   packageName: 'foo',

package/src/pages/Version/DetailSidebar/Install/Install.tsx

@@ -1,14 +1,12 @@
 import styled from '@emotion/styled';
 import React, { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
-
 import List from 'verdaccio-ui/components/List';
 import Text from 'verdaccio-ui/components/Text';
 import { Theme } from 'verdaccio-ui/design-tokens/theme';
 import { useConfig } from 'verdaccio-ui/providers/config';
 
 import { DetailContext } from '../..';
-
 import InstallListItem, { DependencyManager } from './InstallListItem';
 
 const StyledText = styled(Text)<{ theme?: Theme }>((props) => ({

package/src/pages/Version/DetailSidebar/Install/InstallListItem.tsx

@@ -1,7 +1,6 @@
 import styled from '@emotion/styled';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-
 import Avatar from 'verdaccio-ui/components/Avatar';
 import CopyToClipBoard from 'verdaccio-ui/components/CopyToClipBoard';
 import ListItem from 'verdaccio-ui/components/ListItem';

package/src/pages/Version/DetailSidebar/Repository/Repository.test.tsx

@@ -1,12 +1,10 @@
 import React from 'react';
-
 import { render } from 'verdaccio-ui/utils/test-react-testing-library';
 
 import { DetailContext } from '../../context';
 import { DetailContextProps } from '../../version-config';
-
-import data from './__partials__/data.json';
 import Repository from './Repository';
+import data from './__partials__/data.json';
 
 const detailContextValue: DetailContextProps = {
   packageName: 'foo',

package/src/pages/Version/DetailSidebar/Repository/Repository.tsx

@@ -1,7 +1,6 @@
 import styled from '@emotion/styled';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-
 import Avatar from 'verdaccio-ui/components/Avatar';
 import CopyToClipBoard from 'verdaccio-ui/components/CopyToClipBoard';
 import Link from 'verdaccio-ui/components/Link';
@@ -13,7 +12,6 @@ import { Theme } from 'verdaccio-ui/design-tokens/theme';
 import { isURL } from 'verdaccio-ui/utils/url';
 
 import { DetailContext } from '../../context';
-
 import git from './img/git.png';
 
 const StyledText = styled(Text)<{ theme?: Theme }>((props) => ({
@@ -22,7 +20,7 @@ const StyledText = styled(Text)<{ theme?: Theme }>((props) => ({
 }));
 
 const GithubLink = styled(Link)<{ theme?: Theme }>(({ theme }) => ({
-  color: theme?.palette.type === 'light' ? theme?.palette.primary.main : theme?.palette.white,
+  color: theme?.palette.mode === 'light' ? theme?.palette.primary.main : theme?.palette.white,
   ':hover': {
     color: theme?.palette.dodgerBlue,
   },

package/src/pages/Version/Version.test.tsx

@@ -1,14 +1,12 @@
 import { waitFor } from '@testing-library/dom';
 import React from 'react';
 import { MemoryRouter } from 'react-router';
-
 import { render } from 'verdaccio-ui/utils/test-react-testing-library';
 
 import translationEN from '../../i18n/crowdin/ui.json';
-
+import Version from './Version';
 import data from './__partials__/data.json';
 import { DetailContext } from './context';
-import Version from './Version';
 
 // :-) we mock this otherways fails on render, some weird issue on material-ui
 jest.mock('verdaccio-ui/components/Avatar');

package/src/pages/Version/Version.tsx

@@ -1,14 +1,12 @@
 import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
-
 import Loading from 'verdaccio-ui/components/Loading';
 import NotFound from 'verdaccio-ui/components/NotFound';
 
 import { Dispatch, RootState } from '../../store/store';
-
-import getRouterPackageName from './get-route-package-name';
 import VersionLayout from './VersionLayout';
+import getRouterPackageName from './get-route-package-name';
 
 interface Params {
   scope?: string;

package/src/pages/Version/VersionContextProvider.tsx

@@ -3,7 +3,6 @@ import { useDispatch, useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
 
 import { Dispatch, RootState } from '../../store/store';
-
 import { DetailContext } from './context';
 import getRouterPackageName from './get-route-package-name';
 

package/src/pages/Version/VersionLayout.tsx

@@ -1,4 +1,4 @@
-import Grid from '@material-ui/core/Grid';
+import Grid from '@mui/material/Grid';
 import React from 'react';
 
 import DetailContainer from './DetailContainer';

package/src/pages/Version/context.ts

@@ -1,4 +1,4 @@
-import { createContext, Consumer, Provider } from 'react';
+import { Consumer, Provider, createContext } from 'react';
 
 import { DetailContextProps, VersionPageConsumerProps } from './version-config';
 

package/src/pages/home/Home.tsx

@@ -1,10 +1,8 @@
 import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-
 import Loading from 'verdaccio-ui/components/Loading';
 
 import { Dispatch, RootState } from '../../store/store';
-
 import { PackageList } from './PackageList';
 
 const Home: React.FC = () => {

package/src/pages/home/PackageList/Help/Help.test.tsx

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

package/src/pages/home/PackageList/Help/Help.tsx

@@ -1,6 +1,5 @@
 import React, { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
-
 import Button from 'verdaccio-ui/components/Button';
 import CardActions from 'verdaccio-ui/components/CardActions';
 import CardContent from 'verdaccio-ui/components/CardContent';

package/src/pages/home/PackageList/Help/__snapshots__/Help.test.tsx.snap

@@ -1,16 +1,55 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Help /> component should load the component in default state 1`] = `
-.emotion-0 {
+.emotion-1 {
+  background-color: #fff;
+  color: rgba(0, 0, 0, 0.87);
+  -webkit-transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  border-radius: 4px;
+  box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);
+  overflow: hidden;
   width: 600px;
   margin: auto;
 }
 
 .emotion-2 {
+  padding: 16px;
+}
+
+.emotion-2:last-child {
+  padding-bottom: 24px;
+}
+
+.emotion-3 {
+  margin: 0;
+  font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
+  font-weight: 400;
+  font-size: 1.5rem;
+  line-height: 1.334;
+  margin-bottom: 0.35em;
+}
+
+.emotion-5 {
+  margin: 0;
+  font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
+  font-weight: 500;
+  font-size: 1.25rem;
+  line-height: 1.6;
+  margin-bottom: 0.35em;
+  color: rgba(0, 0, 0, 0.6);
   margin-bottom: 20px;
 }
 
-.emotion-4 {
+.emotion-6 {
+  margin: 0;
+  font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
+  font-weight: 400;
+  font-size: 1rem;
+  line-height: 1.5;
+}
+
+.emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -21,11 +60,10 @@ exports[`<Help /> component should load the component in default state 1`] = `
   align-items: center;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
   justify-content: space-between;
 }
 
-.emotion-6 {
+.emotion-9 {
   display: inline-block;
   overflow: hidden;
   white-space: nowrap;
@@ -34,124 +72,325 @@ exports[`<Help /> component should load the component in default state 1`] = `
   font-size: 1rem;
 }
 
+.emotion-11 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  position: relative;
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
+  background-color: transparent;
+  outline: 0;
+  border: 0;
+  margin: 0;
+  border-radius: 0;
+  padding: 0;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  vertical-align: middle;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: inherit;
+  text-align: center;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  font-size: 1.5rem;
+  padding: 8px;
+  border-radius: 50%;
+  overflow: visible;
+  color: rgba(0, 0, 0, 0.54);
+  -webkit-transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  padding: 12px;
+  font-size: 1.75rem;
+}
+
+.emotion-11::-moz-focus-inner {
+  border-style: none;
+}
+
+.emotion-11.Mui-disabled {
+  pointer-events: none;
+  cursor: default;
+}
+
+@media print {
+  .emotion-11 {
+    -webkit-print-color-adjust: exact;
+    color-adjust: exact;
+  }
+}
+
+.emotion-11:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+}
+
+@media (hover: none) {
+  .emotion-11:hover {
+    background-color: transparent;
+  }
+}
+
+.emotion-11.Mui-disabled {
+  background-color: transparent;
+  color: rgba(0, 0, 0, 0.26);
+}
+
+.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;
+}
+
+.emotion-13 {
+  overflow: hidden;
+  pointer-events: none;
+  position: absolute;
+  z-index: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  border-radius: inherit;
+}
+
+.emotion-22 {
+  margin: 0;
+  font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
+  font-weight: 400;
+  font-size: 0.875rem;
+  line-height: 1.43;
+}
+
+.emotion-23 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  padding: 8px;
+}
+
+.emotion-23>:not(:first-of-type) {
+  margin-left: 8px;
+}
+
+.emotion-24 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  position: relative;
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
+  background-color: transparent;
+  outline: 0;
+  border: 0;
+  margin: 0;
+  border-radius: 0;
+  padding: 0;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  vertical-align: middle;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: inherit;
+  font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
+  font-weight: 500;
+  font-size: 0.8125rem;
+  line-height: 1.75;
+  text-transform: uppercase;
+  min-width: 64px;
+  padding: 4px 5px;
+  border-radius: 4px;
+  -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  color: #4b5e40;
+}
+
+.emotion-24::-moz-focus-inner {
+  border-style: none;
+}
+
+.emotion-24.Mui-disabled {
+  pointer-events: none;
+  cursor: default;
+}
+
+@media print {
+  .emotion-24 {
+    -webkit-print-color-adjust: exact;
+    color-adjust: exact;
+  }
+}
+
+.emotion-24:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: rgba(75, 94, 64, 0.04);
+}
+
+@media (hover: none) {
+  .emotion-24:hover {
+    background-color: transparent;
+  }
+}
+
+.emotion-24.Mui-disabled {
+  color: rgba(0, 0, 0, 0.26);
+}
+
 <div
-  class="MuiPaper-root MuiCard-root emotion-0 emotion-1 MuiPaper-elevation1 MuiPaper-rounded"
+  class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root emotion-0 emotion-1"
   id="help-card"
 >
   <div
-    class="MuiCardContent-root"
+    class="MuiCardContent-root emotion-2"
   >
     <h5
-      class="MuiTypography-root MuiTypography-h5 MuiTypography-gutterBottom"
+      class="MuiTypography-root MuiTypography-h5 MuiTypography-gutterBottom emotion-3"
       id="help-card__title"
     >
       No Package Published Yet.
     </h5>
     <h6
-      class="MuiTypography-root emotion-2 emotion-3 MuiTypography-h6 MuiTypography-colorTextSecondary MuiTypography-gutterBottom"
+      class="MuiTypography-root MuiTypography-h6 MuiTypography-gutterBottom emotion-4 emotion-5"
     >
       To publish your first package just:
     </h6>
     <span
-      class="MuiTypography-root MuiTypography-body1"
+      class="MuiTypography-root MuiTypography-body1 emotion-6"
     >
       1. Login
     </span>
     <div
-      class="emotion-4 emotion-5"
+      class="emotion-7 emotion-8"
     >
       <span
-        class="emotion-6 emotion-7"
+        class="emotion-9 emotion-10"
       >
         npm adduser --registry http://localhost:9000/
       </span>
       <button
-        class="MuiButtonBase-root MuiIconButton-root"
+        aria-label="Copy to clipboard"
+        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge emotion-11"
+        data-mui-internal-clone-element="true"
         data-testid="copy-icon"
         tabindex="0"
-        title="Copy to clipboard"
         type="button"
       >
-        <span
-          class="MuiIconButton-label"
+        <svg
+          aria-hidden="true"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-12"
+          data-testid="FileCopyIcon"
+          focusable="false"
+          viewBox="0 0 24 24"
         >
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root"
-            focusable="false"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z"
-            />
-          </svg>
-        </span>
+          <path
+            d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4 6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z"
+          />
+        </svg>
         <span
-          class="MuiTouchRipple-root"
+          class="MuiTouchRipple-root emotion-13"
         />
       </button>
     </div>
     <span
-      class="MuiTypography-root MuiTypography-body1"
+      class="MuiTypography-root MuiTypography-body1 emotion-6"
     >
       2. Publish
     </span>
     <div
-      class="emotion-4 emotion-5"
+      class="emotion-7 emotion-8"
     >
       <span
-        class="emotion-6 emotion-7"
+        class="emotion-9 emotion-10"
       >
         npm publish --registry http://localhost:9000/
       </span>
       <button
-        class="MuiButtonBase-root MuiIconButton-root"
+        aria-label="Copy to clipboard"
+        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge emotion-11"
+        data-mui-internal-clone-element="true"
         data-testid="copy-icon"
         tabindex="0"
-        title="Copy to clipboard"
         type="button"
       >
-        <span
-          class="MuiIconButton-label"
+        <svg
+          aria-hidden="true"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-12"
+          data-testid="FileCopyIcon"
+          focusable="false"
+          viewBox="0 0 24 24"
         >
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root"
-            focusable="false"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z"
-            />
-          </svg>
-        </span>
+          <path
+            d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4 6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z"
+          />
+        </svg>
         <span
-          class="MuiTouchRipple-root"
+          class="MuiTouchRipple-root emotion-13"
         />
       </button>
     </div>
     <span
-      class="MuiTypography-root MuiTypography-body2"
+      class="MuiTypography-root MuiTypography-body2 emotion-22"
     >
       3. Refresh this page
     </span>
   </div>
   <div
-    class="MuiCardActions-root MuiCardActions-spacing"
+    class="MuiCardActions-root MuiCardActions-spacing emotion-23"
   >
     <a
-      aria-disabled="false"
-      class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-textSizeSmall MuiButton-sizeSmall"
+      class="MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall MuiButtonBase-root emotion-24"
       href="https://verdaccio.org/docs/en/installation"
       tabindex="0"
     >
+      Learn More
       <span
-        class="MuiButton-label"
-      >
-        Learn More
-      </span>
-      <span
-        class="MuiTouchRipple-root"
+        class="MuiTouchRipple-root emotion-13"
       />
     </a>
   </div>

package/src/pages/home/PackageList/Help/styles.ts

@@ -1,5 +1,4 @@
 import styled from '@emotion/styled';
-
 import Card from 'verdaccio-ui/components/Card';
 import { default as Typography } from 'verdaccio-ui/components/Heading';