@verdaccio/ui-components 3.0.0-next.2 → 4.0.0-next-8.0

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/NotFound/NotFound.tsx

@@ -1,4 +1,6 @@
+/* eslint-disable verdaccio/jsx-no-style */
 import styled from '@emotion/styled';
+import FolderOffIcon from '@mui/icons-material/FolderOff';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import React, { useCallback } from 'react';
@@ -7,8 +9,6 @@ import { useHistory } from 'react-router-dom';
 
 import { Theme } from '../../';
 import Heading from '../Heading';
-// @ts-ignore
-import PackageImg from './img/package.svg';
 
 const NotFound: React.FC = () => {
   const history = useHistory();
@@ -28,7 +28,9 @@ const NotFound: React.FC = () => {
       justifyContent="center"
       p={2}
     >
-      <EmptyPackage alt={t('error.404.page-not-found')} src={PackageImg} />
+      <Container>
+        <FolderOffIcon color="primary" style={{ fontSize: 236 }} />
+      </Container>
       <StyledHeading className="not-found-text" variant="h4">
         {t('error.404.sorry-we-could-not-find-it')}
       </StyledHeading>
@@ -41,8 +43,7 @@ const NotFound: React.FC = () => {
 
 export default NotFound;
 
-const EmptyPackage = styled('img')({
-  width: '150px',
+const Container = styled('div')({
   margin: '0 auto',
 });
 

package/src/components/NotFound/Notfound.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { MemoryRouter } from 'react-router';
 
-import { fireEvent, render } from '../../test/test-react-testing-library';
+import { fireEvent, render, screen } from '../../test/test-react-testing-library';
 import NotFound from './NotFound';
 
 const mockHistory = jest.fn();
@@ -14,12 +14,15 @@ jest.mock('react-router-dom', () => ({
 
 describe('<NotFound /> component', () => {
   test('should load the component in default state', () => {
-    const { container } = render(
+    render(
       <MemoryRouter>
         <NotFound />
       </MemoryRouter>
     );
-    expect(container.firstChild).toMatchSnapshot();
+
+    expect(screen.getByTestId('FolderOffIcon')).toBeInTheDocument();
+    expect(screen.getByText('button.go-to-the-home-page')).toBeInTheDocument();
+    expect(screen.getByText('error.404.sorry-we-could-not-find-it')).toBeInTheDocument();
   });
 
   test('go to Home Page button click', async () => {

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';

package/src/components/Person/utils.ts

@@ -0,0 +1,20 @@
+import i18next from 'i18next';
+
+import { Developer } from '../../types/packageMeta';
+import { url } from '../../utils';
+
+export function getLink(person: Developer, packageName: string, version: string): string {
+  return person.email && url.isEmail(person.email)
+    ? `mailto:${person.email}?subject=${packageName} v${version}`
+    : person.url && url.isURL(person.url)
+      ? person.url
+      : '';
+}
+
+export function getName(name?: string): string {
+  return !name
+    ? i18next.t('author-unknown')
+    : name.toLowerCase() === 'anonymous'
+      ? i18next.t('author-anonymous')
+      : name;
+}

package/src/components/RawViewer/RawViewer.tsx

@@ -3,6 +3,7 @@ import Dialog from '@mui/material/Dialog';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
 import IconButton from '@mui/material/IconButton';
+import { useTheme } from '@mui/styles';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import ReactJson from 'react-json-view';
@@ -22,6 +23,7 @@ const ViewerTitle = (props: ViewerTitleProps) => {
       {onClose ? (
         <IconButton
           aria-label="close"
+          data-testid="close-raw-viewer"
           onClick={onClose}
           sx={{
             position: 'absolute',
@@ -46,18 +48,20 @@ type Props = {
 /* eslint-disable verdaccio/jsx-spread */
 const RawViewer: React.FC<Props> = ({ isOpen = false, onClose, packageMeta }) => {
   const { t } = useTranslation();
+  const theme = useTheme();
   return (
     <Dialog data-testid={'rawViewer--dialog'} fullScreen={true} open={isOpen}>
       <ViewerTitle id="viewer-title" onClose={onClose}>
-        {t('action-bar-action.raw')}
+        {t('action-bar-action.raw-title', { package: packageMeta.latest.name })}
       </ViewerTitle>
       <DialogContent>
         <ReactJson
-          collapseStringsAfterLength={40}
-          collapsed={true}
-          enableClipboard={false}
+          collapseStringsAfterLength={200}
+          collapsed={2}
+          enableClipboard={true}
           groupArraysAfterLength={10}
           src={packageMeta as any}
+          theme={theme?.palette.mode == 'light' ? 'bright:inverted' : 'bright'}
         />
       </DialogContent>
     </Dialog>

package/src/components/Readme/Readme.spec.tsx

@@ -15,4 +15,21 @@ describe('<Readme /> component', () => {
     const wrapper = render(<Readme description="<h1>This is a test string</h1>" />);
     expect(wrapper.getByText('This is a test string')).toBeInTheDocument();
   });
+
+  test('should sanitize html', () => {
+    const markdown = `<script>alert('test')</script>`;
+    const wrapper = render(<Readme description={markdown} />);
+    expect(wrapper.queryAllByText('test')).toHaveLength(0);
+  });
+
+  test('should highlight code', () => {
+    const markdown = `\`\`\`js\nconst test = 1 + 2;\n\`\`\``;
+    const wrapper = render(<Readme description={markdown} />);
+    expect(wrapper.getByText('const')).toBeInTheDocument();
+    expect(wrapper.getByText('const')).toHaveClass('hljs-keyword');
+    expect(wrapper.getByText('1')).toBeInTheDocument();
+    expect(wrapper.getByText('1')).toHaveClass('hljs-number');
+    expect(wrapper.getByText('2')).toBeInTheDocument();
+    expect(wrapper.getByText('2')).toHaveClass('hljs-number');
+  });
 });