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

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,23 +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}
-      id="raw-viewer--dialog-container"
-      open={isOpen}
-    >
+    <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

@@ -1,30 +1,46 @@
 import styled from '@emotion/styled';
-import 'github-markdown-css';
-import 'highlight.js/styles/default.css';
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
 import React from 'react';
 
-import { Theme } from '../../Theme';
+import { useCustomTheme } from '../../';
+import './github-markdown.css';
 import { Props } from './types';
 import { parseReadme } from './utils';
 
 const Readme: React.FC<Props> = ({ description }) => {
+  // @ts-ignore
+  const { isDarkMode } = useCustomTheme();
+
+  // 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 (
-    <Wrapper
-      className="markdown-body"
-      dangerouslySetInnerHTML={{ __html: parseReadme(description) as string }}
-    />
+    <Card sx={{ mb: 2 }}>
+      <CardContent>
+        <Box data-testid="readme" sx={{ m: 2 }}>
+          <Wrapper
+            className={`markdown-body ${isDarkMode ? 'markdown-dark' : 'markdown-light'}`}
+            dangerouslySetInnerHTML={{ __html: parseReadme(description) as string }}
+          />
+        </Box>
+      </CardContent>
+    </Card>
   );
 };
 export default Readme;
 
-const Wrapper = styled('div')<{ theme?: Theme }>(({ theme }) => ({
-  background: theme?.palette.white,
-  color: theme?.palette.black,
-  padding: theme?.spacing(2, 3),
+const Wrapper = styled('div')({
   ul: {
     listStyle: 'disc',
   },
   img: {
     maxWidth: '100%',
   },
-}));
+});