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

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');
+  });
 });

package/src/components/Readme/Readme.tsx

@@ -2,8 +2,6 @@ import styled from '@emotion/styled';
 import Box from '@mui/material/Box';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
-import { useTheme } from '@mui/styles';
-import 'highlight.js/styles/default.css';
 import React from 'react';
 
 import { useCustomTheme } from '../../';
@@ -14,12 +12,19 @@ import { parseReadme } from './utils';
 const Readme: React.FC<Props> = ({ description }) => {
   // @ts-ignore
   const { isDarkMode } = useCustomTheme();
-  const theme = useTheme();
+
+  // Stackoverflow theme fits well to Verdaccio dark colors
+  // https://highlightjs.org/examples
+  if (isDarkMode) {
+    require('highlight.js/styles/github-dark.css');
+  } else {
+    require('highlight.js/styles/github.css');
+  }
 
   return (
-    <Card>
+    <Card sx={{ mb: 2 }}>
       <CardContent>
-        <Box data-testid="readme" sx={{ margin: theme.spacing(1) }}>
+        <Box data-testid="readme" sx={{ m: 2 }}>
           <Wrapper
             className={`markdown-body ${isDarkMode ? 'markdown-dark' : 'markdown-light'}`}
             dangerouslySetInnerHTML={{ __html: parseReadme(description) as string }}

package/src/components/Readme/utils.ts

@@ -21,9 +21,6 @@ marked.setOptions({
 });
 
 export function parseReadme(readme: string): string | void {
-  if (typeof readme === 'string') {
-    const html = marked.parse(readme);
-    return DOMPurify.sanitize(html);
-  }
-  return '';
+  const html = marked.parse(readme);
+  return DOMPurify.sanitize(html);
 }

package/src/components/RegistryInfoDialog/styles.ts

@@ -4,10 +4,11 @@ import DialogTitle from '@mui/material/DialogTitle';
 
 import { Theme } from '../../';
 
-export const Title = styled(DialogTitle)<{ theme?: Theme }>((props) => ({
-  backgroundColor: props.theme?.palette.primary.main,
-  color: props.theme?.palette.white,
-  fontSize: props.theme?.fontSize.lg,
+export const Title = styled(DialogTitle)<{ theme?: Theme }>(({ theme }) => ({
+  backgroundColor:
+    theme?.palette.mode === 'light' ? theme?.palette.primary.main : theme?.palette.cyanBlue,
+  color: theme?.palette.white,
+  fontSize: theme?.fontSize.lg,
 }));
 
 export const Content = styled(DialogContent)<{ theme?: Theme }>(({ theme }) => ({

package/src/components/Repository/Repository.tsx

@@ -4,6 +4,7 @@ import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
 import Typography from '@mui/material/Typography';
+import { useTheme } from '@mui/styles';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -11,20 +12,13 @@ import { Theme } from '../../Theme';
 import { url as urlUtils } from '../../utils';
 import CopyClipboard from '../CopyClipboard';
 import { Git } from '../Icons';
-import { Link } from '../Link';
+import LinkExternal from '../LinkExternal';
 
 const StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({
   fontWeight: props.theme?.fontWeight.bold,
   textTransform: 'capitalize',
 }));
 
-const GithubLink = styled(Link)<{ theme?: Theme }>(({ theme }) => ({
-  color: theme?.palette.mode === 'light' ? theme?.palette.primary.main : theme?.palette.white,
-  ':hover': {
-    color: theme?.palette.dodgerBlue,
-  },
-}));
-
 const RepositoryListItem = styled(ListItem)({
   padding: 0,
   ':hover': {
@@ -33,18 +27,19 @@ const RepositoryListItem = styled(ListItem)({
 });
 
 const RepositoryListItemText = styled(ListItemText)({
-  padding: '0 10px',
+  padding: '0 0 0 10px',
   margin: 0,
 });
 
 const RepositoryAvatar = styled(Avatar)({
-  borderRadius: '0px',
-  padding: '0',
+  padding: 0,
+  marginLeft: 0,
   backgroundColor: 'transparent',
 });
 
 const Repository: React.FC<{ packageMeta: any }> = ({ packageMeta }) => {
   const { t } = useTranslation();
+  const theme = useTheme();
   const url = packageMeta?.latest?.repository?.url;
   if (!url || !urlUtils.isURL(url)) {
     return null;
@@ -66,15 +61,15 @@ const Repository: React.FC<{ packageMeta: any }> = ({ packageMeta }) => {
       subheader={<StyledText variant="subtitle1">{t('sidebar.repository.title')}</StyledText>}
     >
       <RepositoryListItem>
-        <RepositoryAvatar sx={{ backgroundColor: '#fff' }}>
+        <RepositoryAvatar sx={{ bgcolor: theme.palette.white }}>
           <Git />
         </RepositoryAvatar>
         <RepositoryListItemText
           primary={
             <CopyClipboard dataTestId="repositoryID" text={repositoryURL} title={repositoryURL}>
-              <GithubLink external={true} to={repositoryURL} variant="outline">
+              <LinkExternal to={repositoryURL} variant="outline">
                 {repositoryURL}
-              </GithubLink>
+              </LinkExternal>
             </CopyClipboard>
           }
         />

package/src/components/Search/AutoComplete/styles.ts

@@ -0,0 +1,7 @@
+import styled from '@emotion/styled';
+
+export const Wrapper = styled('div')({
+  width: '100%',
+  position: 'relative',
+  zIndex: 1,
+});