@verdaccio/ui-components 3.0.0-next-7.7 → 3.0.0-next-7.9

package/src/components/Loading/Loading.test.tsx

@@ -1,12 +1,15 @@
 import React from 'react';
 
-import { render, screen } from '../../test/test-react-testing-library';
+import { act, render, screen, waitFor } from '../../test/test-react-testing-library';
 import Loading from './Loading';
 
 describe('<Loading /> component', () => {
-  test('should render the component in default state', () => {
-    render(<Loading />);
-    screen.debug();
-    expect(screen.getByTestId('loading')).toBeInTheDocument();
+  test('should render the component in default state', async () => {
+    act(() => {
+      render(<Loading />);
+    });
+    await waitFor(() => {
+      expect(screen.getByTestId('loading')).toBeInTheDocument();
+    });
   });
 });

package/src/components/Loading/styles.ts

@@ -11,6 +11,7 @@ export const Wrapper = styled('div')({
 
 export const Badge = styled('div')<{ theme?: Theme }>(({ theme }) => ({
   margin: '0 0 30px 0',
+  padding: 5,
   borderRadius: 25,
   boxShadow: '0 10px 20px 0 rgba(69, 58, 100, 0.2)',
   background: theme?.palette.mode === 'dark' ? theme?.palette.black : '#f7f8f6',

package/src/components/LoginDialog/LoginDialog.test.tsx

@@ -87,7 +87,7 @@ describe('<LoginDialog /> component', () => {
     fireEvent.change(userNameInput, { target: { value: 'xyz' } });
 
     const passwordInput = screen.getByPlaceholderText('form-placeholder.password');
-    expect(userNameInput).toBeInTheDocument();
+    expect(passwordInput).toBeInTheDocument();
     fireEvent.focus(passwordInput);
 
     await act(async () => {

package/src/components/LoginDialog/LoginDialog.tsx

@@ -21,7 +21,7 @@ const LoginDialog: React.FC<Props> = ({ onClose, open = false }) => {
   const makeLogin = useCallback(
     async (username?: string, password?: string): Promise<LoginBody | void> => {
       // checks isEmpty
-      if (isEmpty(username) || isEmpty(password)) {
+      if (!username || !password || isEmpty(username) || isEmpty(password)) {
         dispatch.login.addError({
           type: 'error',
           description: i18next.t('form-validation.username-or-password-cant-be-empty'),
@@ -29,6 +29,15 @@ const LoginDialog: React.FC<Props> = ({ onClose, open = false }) => {
         return;
       }
 
+      // checks min username and password length
+      if (username.length < 2 || password.length < 2) {
+        dispatch.login.addError({
+          type: 'error',
+          description: i18next.t('form-validation.required-min-length', { length: 2 }),
+        });
+        return;
+      }
+
       try {
         dispatch.login.getUser({ username, password });
         // const response: LoginBody = await doLogin(username as string, password as string);

package/src/components/LoginDialog/LoginDialogCloseButton.tsx

@@ -12,6 +12,7 @@ const StyledIconButton = styled(IconButton)<{ theme?: Theme }>(({ theme }) => ({
   right: theme.spacing() / 2,
   top: theme.spacing() / 2,
   color: theme.palette.grey[500],
+  zIndex: 99,
 }));
 
 interface Props {

package/src/components/LoginDialog/LoginDialogForm.tsx

@@ -48,7 +48,6 @@ const LoginDialogForm = memo(({ onSubmit, error }: Props) => {
         id="login--dialog-username"
         {...register('username', {
           required: { value: true, message: t('form-validation.required-field') },
-          minLength: { value: 2, message: t('form-validation.required-min-length', { length: 2 }) },
         })}
         label={t('form.username')}
         margin="normal"
@@ -65,7 +64,6 @@ const LoginDialogForm = memo(({ onSubmit, error }: Props) => {
         id="login--dialog-password"
         {...register('password', {
           required: { value: true, message: t('form-validation.required-field') },
-          minLength: { value: 2, message: t('form-validation.required-min-length', { length: 2 }) },
         })}
         data-testid="password"
         label={t('form.password')}

package/src/components/LoginDialog/LoginDialogFormError.tsx

@@ -30,7 +30,7 @@ const LoginDialogFormError = memo(({ error }: Props) => {
   return (
     <StyledSnackbarContent
       message={
-        <Box alignItems="center" display="flex">
+        <Box alignItems="center" data-testid="error" display="flex">
           <StyledErrorIcon />
           {error.description}
         </Box>

package/src/components/Logo/Logo.stories.tsx

@@ -0,0 +1,16 @@
+import Box from '@mui/material/Box';
+import React from 'react';
+
+import Logo from './Logo';
+
+export default {
+  title: 'Components/Logo',
+};
+
+export const Icons: any = () => (
+  <Box sx={{ width: '100%' }}>
+    <Logo size="x-small" />
+    <Logo size="small" />
+    <Logo size="big" />
+  </Box>
+);

package/src/components/Logo/Logo.test.tsx

@@ -1,11 +1,18 @@
 import React from 'react';
 
-import { render } from '../../test/test-react-testing-library';
+import { render, screen } from '../../test/test-react-testing-library';
 import Logo from './Logo';
 
 describe('<Logo /> component', () => {
   test('should render the component in default state', () => {
     const { container } = render(<Logo />);
     expect(container.firstChild).toMatchSnapshot();
+    expect(screen.getByTestId('default-logo')).toBeTruthy();
+  });
+
+  test('should render custom logo', () => {
+    window.__VERDACCIO_BASENAME_UI_OPTIONS.logo = 'custom.png';
+    render(<Logo />);
+    expect(screen.getByTestId('custom-logo')).toBeTruthy();
   });
 });

package/src/components/Logo/Logo.tsx

@@ -1,4 +1,5 @@
 import styled from '@emotion/styled';
+import { useTheme } from '@mui/styles';
 import React from 'react';
 
 import { Theme, useConfig } from '../../';
@@ -22,18 +23,33 @@ interface Props {
   onClick?: () => void;
   className?: string;
   isDefault?: boolean;
+  title?: string;
 }
 
-const Logo: React.FC<Props> = ({ size, onClick, className, isDefault = false }) => {
+const Logo: React.FC<Props> = ({ size, onClick, className, isDefault = false, title = '' }) => {
   const { configOptions } = useConfig();
+  const theme = useTheme();
   if (!isDefault && configOptions?.logo) {
+    const logoSrc =
+      theme?.palette.mode === 'dark' && configOptions.logoDark
+        ? configOptions.logoDark
+        : configOptions.logo;
     return (
       <ImageLogo className={className} onClick={onClick}>
-        <img alt="logo" height="40px" src={configOptions.logo} />
+        <img alt={title} data-testid={'custom-logo'} height="40px" src={logoSrc} />
       </ImageLogo>
     );
   }
-  return <StyledLogo className={className} onClick={onClick} size={size} />;
+
+  return (
+    <StyledLogo
+      className={className}
+      data-testid={'default-logo'}
+      onClick={onClick}
+      size={size}
+      title={title}
+    />
+  );
 };
 
 export default Logo;

package/src/components/Package/Package.test.tsx

@@ -2,7 +2,13 @@ import React from 'react';
 import { MemoryRouter } from 'react-router';
 
 import { store } from '../../';
-import { cleanup, renderWithStore } from '../../test/test-react-testing-library';
+import {
+  cleanup,
+  fireEvent,
+  renderWithStore,
+  screen,
+  waitFor,
+} from '../../test/test-react-testing-library';
 import Package from './Package';
 
 /**
@@ -11,29 +17,36 @@ import Package from './Package';
  */
 const dateOneMonthAgo = (): Date => new Date(1544377770747);
 
+const props = {
+  name: 'verdaccio',
+  version: '1.0.0',
+  time: String(dateOneMonthAgo()),
+  license: 'MIT',
+  description: 'Private NPM repository',
+  author: {
+    name: 'Sam',
+  },
+  dist: {
+    fileCount: 1,
+    unpackedSize: 171,
+    tarball: 'http://localhost:9000/verdaccio/-/verdaccio-1.0.0.tgz',
+  },
+  keywords: ['verdaccio-core'],
+};
+
 describe('<Package /> component', () => {
   afterEach(() => {
     cleanup();
   });
 
   test('should load the component', () => {
-    const props = {
-      name: 'verdaccio',
-      version: '1.0.0',
-      time: String(dateOneMonthAgo()),
-      license: 'MIT',
-      description: 'Private NPM repository',
-      author: {
-        name: 'Sam',
-      },
-      keywords: ['verdaccio'],
-    };
-
     const wrapper = renderWithStore(
       <MemoryRouter>
         <Package
           author={props.author}
           description={props.description}
+          dist={props.dist}
+          keywords={props.keywords}
           license={props.license}
           name={props.name}
           time={props.time}
@@ -50,5 +63,25 @@ describe('<Package /> component', () => {
     expect(wrapper.getByText('MIT')).toBeInTheDocument();
   });
 
-  test.todo('should load the component without author');
+  // test if click on download button will trigger the download action
+  test('should download the package', async () => {
+    renderWithStore(
+      <MemoryRouter>
+        <Package
+          author={props.author}
+          description={props.description}
+          dist={props.dist}
+          keywords={props.keywords}
+          license={props.license}
+          name={props.name}
+          time={props.time}
+          version={props.version}
+        />
+      </MemoryRouter>,
+      store
+    );
+
+    fireEvent.click(screen.getByTestId('download-tarball'));
+    await waitFor(() => expect(store.getState().loading.models.download).toBe(true));
+  });
 });

package/src/components/Package/Package.tsx

@@ -3,20 +3,20 @@ import styled from '@emotion/styled';
 import BugReport from '@mui/icons-material/BugReport';
 import DownloadIcon from '@mui/icons-material/CloudDownload';
 import HomeIcon from '@mui/icons-material/Home';
-import { useTheme } from '@mui/material';
 import CircularProgress from '@mui/material/CircularProgress';
 import Grid from '@mui/material/Grid';
+import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import Tooltip from '@mui/material/Tooltip';
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { Dispatch, Link, RootState, Theme } from '../../';
+import { Dispatch, Link, LinkExternal, RootState, Theme } from '../../';
 import { FileBinary, Law, Time, Version } from '../../components/Icons';
 import { Author as PackageAuthor, PackageMetaInterface } from '../../types/packageMeta';
-import { url, utils } from '../../utils';
-import Tag from './Tag';
+import { Route, url, utils } from '../../utils';
+import KeywordListItems from '../Keywords/KeywordListItems';
 import {
   Author,
   Avatar,
@@ -28,7 +28,6 @@ import {
   PackageListItemText,
   PackageTitle,
   Published,
-  TagContainer,
   Wrapper,
   WrapperLink,
 } from './styles';
@@ -47,7 +46,7 @@ export interface PackageInterface {
   time?: number | string;
   author: PackageAuthor;
   description?: string;
-  keywords?: string[];
+  keywords?: PackageMetaInterface['latest']['keywords'];
   license?: PackageMetaInterface['latest']['license'];
   homepage?: string;
   bugs?: Bugs;
@@ -61,7 +60,7 @@ const Package: React.FC<PackageInterface> = ({
   description,
   dist,
   homepage,
-  keywords = [],
+  keywords,
   license,
   name: packageName,
   time,
@@ -71,7 +70,6 @@ const Package: React.FC<PackageInterface> = ({
   const config = useSelector((state: RootState) => state.configuration.config);
   const dispatch = useDispatch<Dispatch>();
   const { t } = useTranslation();
-  const theme = useTheme();
   const isLoading = useSelector((state: RootState) => state?.loading?.models.download);
 
   const handleDownload = useCallback(
@@ -94,21 +92,12 @@ const Package: React.FC<PackageInterface> = ({
   const renderAuthorInfo = (): React.ReactNode => {
     const name = utils.getAuthorName(authorName);
     return (
-      <Author>
-        <Avatar alt={name} src={authorAvatar} />
-        <Details>
-          <div
-            style={{
-              fontSize: '12px',
-              fontWeight: theme?.fontWeight.semiBold,
-              color:
-                theme?.palette.mode === 'light' ? theme?.palette.greyLight2 : theme?.palette.white,
-            }}
-          >
-            {name}
-          </div>
-        </Details>
-      </Author>
+      <OverviewItem>
+        <Author>
+          <Avatar alt={name} src={authorAvatar} />
+          <Details>{name}</Details>
+        </Author>
+      </OverviewItem>
     );
   };
 
@@ -132,33 +121,34 @@ const Package: React.FC<PackageInterface> = ({
     time && (
       <OverviewItem>
         <StyledTime />
-        <Published>{t('package.published-on', { time: utils.formatDate(time) })}</Published>
-        {utils.formatDateDistance(time)}
+        <Published title={utils.formatDate(time)}>
+          {t('package.published-on', { time: utils.formatDateDistance(time) })}
+        </Published>
       </OverviewItem>
     );
 
   const renderHomePageLink = (): React.ReactNode =>
     homepage &&
     url.isURL(homepage) && (
-      <Link external={true} to={homepage}>
+      <LinkExternal to={homepage}>
         <Tooltip aria-label={t('package.homepage')} title={t('package.visit-home-page')}>
           <IconButton aria-label={t('package.homepage')} size="large">
             <HomeIcon />
           </IconButton>
         </Tooltip>
-      </Link>
+      </LinkExternal>
     );
 
   const renderBugsLink = (): React.ReactNode =>
     bugs?.url &&
     url.isURL(bugs.url) && (
-      <Link external={true} to={bugs.url}>
+      <LinkExternal to={bugs.url}>
         <Tooltip aria-label={t('package.bugs')} title={t('package.open-an-issue')}>
           <IconButton aria-label={t('package.bugs')} size="large">
             <BugReport />
           </IconButton>
         </Tooltip>
-      </Link>
+      </LinkExternal>
     );
 
   const renderDownloadLink = (): React.ReactNode =>
@@ -174,7 +164,11 @@ const Package: React.FC<PackageInterface> = ({
           aria-label={t('package.download', { what: t('package.the-tar-file') })}
           title={t('package.tarball')}
         >
-          <IconButton aria-label={t('package.download')} size="large">
+          <IconButton
+            aria-label={t('package.download')}
+            data-testid="download-tarball"
+            size="large"
+          >
             {isLoading ? (
               <CircularProgress size={13}>
                 <DownloadIcon />
@@ -191,7 +185,7 @@ const Package: React.FC<PackageInterface> = ({
     return (
       <Grid container={true} item={true} xs={12}>
         <Grid item={true} xs={11}>
-          <WrapperLink to={`/-/web/detail/${packageName}`}>
+          <WrapperLink to={`${Route.DETAIL}${packageName}`}>
             <PackageTitle className="package-title" data-testid="package-title">
               {packageName}
             </PackageTitle>
@@ -213,15 +207,7 @@ const Package: React.FC<PackageInterface> = ({
     );
   };
 
-  const renderSecondaryComponent = (): React.ReactNode => {
-    const tags = keywords.sort().map((keyword, index) => <Tag key={index}>{keyword}</Tag>);
-    return (
-      <>
-        <Description>{description}</Description>
-        {tags.length > 0 && <TagContainer>{tags}</TagContainer>}
-      </>
-    );
-  };
+  const renderSecondaryComponent = (): React.ReactNode => <Description>{description}</Description>;
 
   const renderPackageListItemText = (): React.ReactNode => (
     <PackageListItemText
@@ -231,10 +217,21 @@ const Package: React.FC<PackageInterface> = ({
     />
   );
 
+  const renderKeywords = (): React.ReactNode => (
+    <ListItem alignItems={'flex-start'} sx={{ py: 0, my: 0 }}>
+      <List sx={{ p: 0, my: 0 }}>
+        <KeywordListItems keywords={keywords} />
+      </List>
+    </ListItem>
+  );
+
   return (
     <Wrapper className={'package'} data-testid="package-item-list">
-      <ListItem alignItems={'flex-start'}>{renderPackageListItemText()}</ListItem>
-      <ListItem alignItems={'flex-start'}>
+      <ListItem alignItems={'flex-start'} sx={{ mb: 0 }}>
+        {renderPackageListItemText()}
+      </ListItem>
+      {keywords && keywords?.length > 0 ? renderKeywords() : null}
+      <ListItem alignItems={'flex-start'} sx={{ mt: 0 }}>
         {renderAuthorInfo()}
         {renderVersionInfo()}
         {renderPublishedInfo()}
@@ -248,8 +245,8 @@ const Package: React.FC<PackageInterface> = ({
 export default Package;
 
 const iconStyle = ({ theme }: { theme: Theme }) => css`
-  margin: 2px 10px 0 0;
-  fill: ${theme?.palette.mode === 'light' ? theme?.palette.greyLight2 : theme?.palette.white};
+  margin: 0 10px 0 0;
+  fill: ${theme?.palette.mode === 'light' ? theme?.palette.greyDark : theme?.palette.white};
 `;
 
 const StyledVersion = styled(Version)`

package/src/components/Package/styles.ts

@@ -11,8 +11,8 @@ import { Theme } from '../../';
 export const OverviewItem = styled('span')<{ theme?: Theme }>(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
-  margin: '0 0 0 16px',
-  color: theme?.palette.mode === 'light' ? theme?.palette.greyLight2 : theme?.palette.white,
+  margin: '0 20px 0 0',
+  color: theme?.palette.mode === 'light' ? theme?.palette.greyDark2 : theme?.palette.white,
   fontSize: 12,
   [`@media (max-width: ${theme?.breakPoints.medium}px)`]: {
     ':nth-of-type(3)': {
@@ -26,10 +26,9 @@ export const OverviewItem = styled('span')<{ theme?: Theme }>(({ theme }) => ({
   },
 }));
 
-export const Published = styled('span')<{ theme?: Theme }>(({ theme }) => ({
-  color: theme?.palette.mode === 'light' ? theme?.palette.greyLight2 : theme?.palette.white,
+export const Published = styled('span')({
   margin: '0 5px 0 0',
-}));
+});
 
 export const Details = styled('span')({
   marginLeft: '5px',
@@ -59,6 +58,7 @@ export const PackageTitle = styled('span')<{ theme?: Theme }>(({ theme }) => ({
   marginBottom: 12,
   color: theme?.palette.mode == 'dark' ? theme?.palette.dodgerBlue : theme?.palette.eclipse,
   cursor: 'pointer',
+  textDecoration: 'none',
   [`@media (max-width: ${theme?.breakPoints.small}px)`]: {
     fontSize: 14,
     marginBottom: 8,
@@ -70,9 +70,9 @@ export const GridRightAligned = styled(Grid)({
 });
 
 export const Wrapper = styled(List)<{ theme?: Theme }>(({ theme }) => ({
-  ':hover': {
+  '&:hover': {
     backgroundColor:
-      theme?.palette?.type == 'dark' ? theme?.palette?.secondary.main : theme?.palette?.greyLight3,
+      theme?.palette?.type == 'dark' ? theme?.palette?.secondary.main : theme?.palette?.greyLight2,
   },
 }));
 
@@ -83,16 +83,6 @@ export const IconButton = styled(MuiIconButton)({
   },
 });
 
-export const TagContainer = styled('span')<{ theme?: Theme }>(({ theme }) => ({
-  marginTop: 8,
-  marginBottom: 12,
-  display: 'flex',
-  flexWrap: 'wrap',
-  [`@media (max-width: ${theme?.breakPoints.medium}px)`]: {
-    display: 'none',
-  },
-}));
-
 export const PackageListItemText = styled(ListItemText)({
   paddingRight: 0,
 });

package/src/components/PackageList/Packagelist.test.tsx

@@ -40,6 +40,7 @@ describe('<PackageList /> component', () => {
           name: 'xyz',
           version: '1.1.0',
           description: 'xyz description',
+          keywords: ['hello', 'mars'],
           author: { name: 'Martin', avatar: 'test avatar' },
         },
       ],

package/src/components/Person/Person.test.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+
+import { fireEvent, render, screen } from '../../test/test-react-testing-library';
+import { Developer } from '../../types/packageMeta';
+import Person from './Person';
+
+const mockPerson: Developer = {
+  name: 'John Doe',
+  email: 'john.doe@example.com',
+  avatar: 'https://example.com/avatar.jpg',
+  url: 'https://example.com/~johndoe',
+};
+
+const mockPackageName = 'test-package';
+const mockVersion = '1.0.0';
+
+const ComponentToBeRendered: React.FC<{ withText?: boolean }> = ({ withText = false }) => {
+  return (
+    <Person
+      packageName={mockPackageName}
+      person={mockPerson}
+      version={mockVersion}
+      withText={withText}
+    />
+  );
+};
+
+describe('Person component', () => {
+  test('should render avatar', () => {
+    render(<ComponentToBeRendered />);
+    const avatar = screen.getByAltText(mockPerson.name);
+    expect(avatar).toBeInTheDocument();
+    // but not include text
+    expect(screen.queryByText(mockPerson.name)).not.toBeInTheDocument();
+  });
+
+  test('should render name when withText is true', () => {
+    render(<ComponentToBeRendered withText={true} />);
+    const name = screen.getByText(mockPerson.name);
+    expect(name).toBeInTheDocument();
+  });
+
+  test('should not render name when withText is false', async () => {
+    render(<ComponentToBeRendered />);
+    // hover over the avatar
+    fireEvent.mouseEnter(screen.getByTestId(mockPerson.name));
+    // wait for the tooltip to appear
+    await screen.findByTestId(mockPerson.name + '-tooltip');
+  });
+});

package/src/components/Person/Person.tsx

@@ -0,0 +1,45 @@
+import { Typography } from '@mui/material';
+import Avatar from '@mui/material/Avatar';
+import Tooltip from '@mui/material/Tooltip';
+import React from 'react';
+
+import { Developer } from '../../types/packageMeta';
+import LinkExternal from '../LinkExternal';
+import PersonTooltip from './PersonTooltip';
+import { getLink, getName } from './utils';
+
+const Person: React.FC<{
+  person: Developer;
+  packageName: string;
+  version: string;
+  withText?: boolean;
+}> = ({ person, packageName, version, withText = false }) => {
+  const link = getLink(person, packageName, version);
+
+  const avatarComponent = (
+    <Avatar alt={person.name} src={person.avatar} sx={{ width: 40, height: 40, ml: 0, mr: 1 }} />
+  );
+
+  return (
+    <>
+      <Tooltip
+        data-testid={person.name}
+        key={person.email}
+        title={<PersonTooltip person={person} />}
+      >
+        {link.length > 0 ? (
+          <LinkExternal to={link}>{avatarComponent}</LinkExternal>
+        ) : (
+          avatarComponent
+        )}
+      </Tooltip>
+      {withText && (
+        <Typography sx={{ ml: 1 }} variant="subtitle2">
+          {getName(person.name)}
+        </Typography>
+      )}
+    </>
+  );
+};
+
+export default Person;

package/src/components/Person/PersonTooltip.tsx

@@ -0,0 +1,26 @@
+import Typography from '@mui/material/Typography';
+import React from 'react';
+
+import { Developer } from '../../types/packageMeta';
+import { url } from '../../utils';
+import LinkExternal from '../LinkExternal';
+
+const PersonTooltip: React.FC<{ person: Developer }> = ({ person }) => (
+  <Typography data-testid={person.name + '-tooltip'}>
+    {person.name}
+    {person.email && url.isEmail(person.email) && (
+      <LinkExternal to={`mailto:${person.email}`}>
+        <br />
+        {person.email}
+      </LinkExternal>
+    )}
+    {person.url && url.isURL(person.url) && (
+      <LinkExternal to={person.url}>
+        <br />
+        {person.url}
+      </LinkExternal>
+    )}
+  </Typography>
+);
+
+export default PersonTooltip;

package/src/components/Person/index.ts

@@ -0,0 +1 @@
+export { default } from './Person';