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

package/src/components/CopyClipboard/utils.ts

@@ -5,17 +5,6 @@ export const copyToClipBoardUtility =
   (event: SyntheticEvent<HTMLElement>): void => {
     event.preventDefault();
 
-    const node = document.createElement('div');
-    node.innerText = str;
-    if (document.body) {
-      document.body.appendChild(node);
-
-      const range = document.createRange();
-      const selection = window.getSelection() as Selection;
-      range.selectNodeContents(node);
-      selection.removeAllRanges();
-      selection.addRange(range);
-      document.execCommand('copy');
-      document.body.removeChild(node);
-    }
+    // document.execCommand is deprecated
+    navigator.clipboard.writeText(str);
   };

package/src/components/Dependencies/Dependencies.stories.tsx

@@ -71,17 +71,17 @@ const packageMeta = {
       shelljs: '^0.7.8',
       'update-notifier': '^2.1.0',
     },
-    bundleDependencies: {
-      'styled-components': '5.0.0',
-      'cross-spawn': '^5.0.1',
-      jscodeshift: '^0.3.30',
-      json5: '^0.5.1',
-      'latest-version': '^3.1.0',
-      'merge-dirs': '^0.2.1',
-      opencollective: '^1.0.3',
-      shelljs: '^0.7.8',
-      'update-notifier': '^2.1.0',
-    },
+    bundleDependencies: [
+      'styled-components',
+      'cross-spawn',
+      'jscodeshift',
+      'json5',
+      'latest-version',
+      'merge-dirs',
+      'opencollective',
+      'shelljs',
+      'update-notifier',
+    ],
   },
   _uplinks: {},
 };

package/src/components/Dependencies/Dependencies.test.tsx

@@ -6,7 +6,6 @@ import Dependencies from './Dependencies';
 
 describe('<Dependencies /> component', () => {
   test('Renders a message when there are no dependencies', () => {
-    // Given
     const packageMeta = {
       latest: {
         name: 'verdaccio',
@@ -25,15 +24,12 @@ describe('<Dependencies /> component', () => {
       _uplinks: {},
     };
 
-    // When
     const { getByText } = render(<Dependencies packageMeta={packageMeta} />);
 
-    // Then
     expect(getByText('dependencies.has-no-dependencies')).toBeDefined();
   });
 
-  test('Renders a link to each dependency', () => {
-    // Given
+  test('renders a link to each dependency', () => {
     const packageMeta = {
       latest: {
         name: 'verdaccio',
@@ -59,18 +55,12 @@ describe('<Dependencies /> component', () => {
       _uplinks: {},
     };
 
-    // When
     const { getByText } = render(
       <HashRouter>
         <Dependencies packageMeta={packageMeta} />
       </HashRouter>
     );
 
-    // Then
-    // FIXME: currently MaterialUI chips do not support the children
-    // prop, therefore it is impossible to use proper links for
-    // dependencies. Those are for now clickable spans
-
     expect(getByText('dependencies (2)')).toBeDefined();
     expect(getByText('devDependencies (1)')).toBeDefined();
     expect(getByText('peerDependencies (1)')).toBeDefined();

package/src/components/Dependencies/Dependencies.tsx

@@ -1,63 +1,16 @@
 import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
-import { useTheme } from '@mui/styles';
-import React from 'react';
+import React, { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useHistory } from 'react-router-dom';
 
-import { PackageDependencies } from '../../types/packageMeta';
 import NoItems from '../NoItems';
-import { CardWrap, StyledText, Tag, Tags } from './styles';
-
-interface DependencyBlockProps {
-  title: string;
-  dependencies: PackageDependencies;
-}
-
-const DependencyBlock: React.FC<DependencyBlockProps> = ({ title, dependencies }) => {
-  const history = useHistory();
-  const { t } = useTranslation();
-  const theme = useTheme();
-
-  const deps = Object.entries(dependencies);
-
-  function handleClick(name: string): void {
-    history.push(`/-/web/detail/${name}`);
-  }
-
-  return (
-    <Box data-testid={title} sx={{ margin: theme.spacing(2) }}>
-      <StyledText sx={{ marginBottom: theme.spacing(1) }} variant="subtitle1">
-        {`${title} (${deps.length})`}
-      </StyledText>
-      <Tags>
-        {deps.map(([name, version]) => (
-          <Tag
-            className={'dep-tag'}
-            clickable={true}
-            data-testid={name}
-            key={name}
-            label={t('dependencies.dependency-block', { package: name, version })}
-            // eslint-disable-next-line
-            onClick={() => handleClick(name)}
-          />
-        ))}
-      </Tags>
-    </Box>
-  );
-};
-
-function hasKeys(object?: { [key: string]: any }): boolean {
-  return !!object && Object.keys(object).length > 0;
-}
+import { DependencyBlock } from './DependencyBlock';
+import { hasKeys } from './utits';
 
 const Dependencies: React.FC<{ packageMeta: any }> = ({ packageMeta }) => {
   const { t } = useTranslation();
 
-  if (!packageMeta) {
-    throw new Error(t('error.package-meta-is-required-at-detail-context'));
-  }
-
   const { latest } = packageMeta;
   // FIXME: add dependencies to package meta type
   // @ts-ignore
@@ -73,8 +26,8 @@ const Dependencies: React.FC<{ packageMeta: any }> = ({ packageMeta }) => {
     dependencies,
     devDependencies,
     peerDependencies,
-    bundleDependencies,
     optionalDependencies,
+    bundleDependencies,
   };
   const hasDependencies =
     hasKeys(dependencies) ||
@@ -84,28 +37,36 @@ const Dependencies: React.FC<{ packageMeta: any }> = ({ packageMeta }) => {
     hasKeys(peerDependencies);
   if (hasDependencies) {
     return (
-      <CardWrap>
+      <Card sx={{ mb: 2 }}>
         <CardContent>
-          {Object.entries(dependencyMap).map(([dependencyType, dependencies]) => {
-            if (!dependencies || Object.keys(dependencies).length === 0) {
-              return null;
-            }
-            return (
-              <>
-                <DependencyBlock
-                  dependencies={dependencies}
-                  key={dependencyType}
-                  title={dependencyType}
-                />
-              </>
-            );
-          })}
+          <Box data-testid="dependencies-box" sx={{ m: 2 }}>
+            {Object.entries(dependencyMap).map(([dependencyType, dependencies]) => {
+              if (!dependencies || Object.keys(dependencies).length === 0) {
+                return null;
+              }
+              return (
+                <Fragment key={dependencyType}>
+                  <DependencyBlock
+                    dependencies={dependencies}
+                    key={dependencyType}
+                    title={dependencyType}
+                  />
+                </Fragment>
+              );
+            })}
+          </Box>
         </CardContent>
-      </CardWrap>
+      </Card>
     );
   }
 
-  return <NoItems text={t('dependencies.has-no-dependencies', { package: name })} />;
+  return (
+    <Card sx={{ mb: 2 }}>
+      <CardContent>
+        <NoItems text={t('dependencies.has-no-dependencies', { package: name })} />
+      </CardContent>
+    </Card>
+  );
 };
 
 export default Dependencies;

package/src/components/Dependencies/DependencyBlock.test.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { MemoryRouter, Route } from 'react-router';
+
+import { fireEvent, render, screen } from '../../test/test-react-testing-library';
+import { DependencyBlock } from './DependencyBlock';
+
+const mockHistory = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+  useHistory: () => ({
+    push: mockHistory,
+  }),
+}));
+
+describe('<DependencyBlock /> component', () => {
+  test('renders dependency block', () => {
+    render(<DependencyBlock dependencies={{ jquery: '1.0.0' }} title="foo" />);
+
+    expect(screen.getByText('foo (1)')).toBeInTheDocument();
+    expect(screen.getByText('dependencies.dependency-block')).toBeInTheDocument();
+  });
+
+  test('renders bundleDependencies block', () => {
+    render(<DependencyBlock dependencies={{ semver: '7.6.0' }} title="bundleDependencies" />);
+
+    expect(screen.getByText('bundleDependencies (1)')).toBeInTheDocument();
+    expect(screen.getByText('dependencies.dependency-block-bundle')).toBeInTheDocument();
+  });
+
+  test('handle change of route', async () => {
+    render(
+      <MemoryRouter
+        initialEntries={[`/-/web/detail/some-dep`, `/-/web/detail/jquery`]}
+        initialIndex={0}
+      >
+        <Route exact={true} path="/-/web/detail/:package">
+          <DependencyBlock dependencies={{ jquery: '1.0.0' }} title="foo" />
+        </Route>
+      </MemoryRouter>
+    );
+
+    fireEvent.click(screen.getByTestId('jquery'));
+
+    await expect(mockHistory).toHaveBeenCalled();
+  });
+});

package/src/components/Dependencies/DependencyBlock.tsx

@@ -0,0 +1,83 @@
+import styled from '@emotion/styled';
+import Box from '@mui/material/Box';
+import Chip from '@mui/material/Chip';
+import Typography from '@mui/material/Typography';
+import { useTheme } from '@mui/styles';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useHistory } from 'react-router-dom';
+
+import { Theme } from '../../Theme';
+import { PackageDependencies } from '../../types/packageMeta';
+import { Route } from '../../utils';
+
+interface DependencyBlockProps {
+  title: string;
+  dependencies: PackageDependencies;
+}
+
+export const StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({
+  fontWeight: props.theme && props.theme.fontWeight.bold,
+  textTransform: 'capitalize',
+}));
+
+export const Tags = styled('div')<{ theme?: Theme }>((props) => ({
+  display: 'flex',
+  justifyContent: 'start',
+  flexWrap: 'wrap',
+  // force title to be on the same line as the title
+  // could be better to avoid margin on the first element
+  // but it is a bit tricky to do with flexbox
+  marginLeft: props.theme.spacing(-0.6),
+}));
+
+export const Tag = styled(Chip)<{ theme?: Theme }>((props) => ({
+  margin: props.theme.spacing(0.6),
+}));
+
+export const DependencyBlock: React.FC<DependencyBlockProps> = ({ title, dependencies }) => {
+  const history = useHistory();
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const deps = Object.entries(dependencies);
+
+  function handleClick(name: string): void {
+    history.push(`${Route.DETAIL}${name}`);
+  }
+
+  function labelText(title: string, name: string, version: string): string {
+    if (title === 'bundleDependencies') {
+      return t('dependencies.dependency-block-bundle', { package: name });
+    } else {
+      return t('dependencies.dependency-block', { package: name, version });
+    }
+  }
+
+  return (
+    <Box data-testid={title} sx={{ margin: theme.spacing(2) }}>
+      <StyledText sx={{ marginBottom: theme.spacing(1) }} variant="subtitle1">
+        {`${title} (${deps.length})`}
+      </StyledText>
+      <Tags>
+        {deps.map(([name, version]: [string, string]) => {
+          // Bundle dependencies are stored as array, for example [ 0: "semver" ]
+          // so the package name arrives here in the version field
+          const packageName = title == 'bundleDependencies' ? version : name;
+          return (
+            <Tag
+              className={'dep-tag'}
+              clickable={true}
+              data-testid={packageName}
+              key={packageName}
+              label={labelText(title, packageName, version)}
+              // eslint-disable-next-line
+              onClick={() => {
+                handleClick(packageName);
+              }}
+            />
+          );
+        })}
+      </Tags>
+    </Box>
+  );
+};

package/src/components/Dependencies/utits.ts

@@ -0,0 +1,3 @@
+export function hasKeys(object?: { [key: string]: any }): boolean {
+  return !!object && Object.keys(object).length > 0;
+}

package/src/components/Deprecated/Deprecated.tsx

@@ -1,30 +1,17 @@
-import Card from '@mui/material/Card';
-import CardContent from '@mui/material/CardContent';
-import { styled } from '@mui/system';
+import Alert from '@mui/material/Alert';
+import { useTheme } from '@mui/styles';
 import React from 'react';
 
-import { Theme } from '../../Theme';
-
-export const CardStyled = styled(Card)<{ theme?: Theme }>(({ theme }) => {
-  return {
-    marginTop: theme?.spacing(1),
-    marginBottom: theme?.spacing(0.5),
-    backgroundColor: theme?.palette?.error.light,
-    opacity: '0.9',
-    color: theme?.palette?.error.contrastText,
-    fontWeight: 'bold',
-  };
-});
-
 export type Props = {
   message: string;
 };
 
 const Deprecated: React.FC<Props> = ({ message }) => {
+  const theme = useTheme();
   return (
-    <CardStyled>
-      <CardContent>{message}</CardContent>
-    </CardStyled>
+    <Alert severity="warning" sx={{ marginTop: theme.spacing(1), marginBottom: theme.spacing(1) }}>
+      {message}
+    </Alert>
   );
 };
 

package/src/components/Developers/DeveloperType.tsx

@@ -0,0 +1,4 @@
+export enum DeveloperType {
+  CONTRIBUTORS = 'contributors',
+  MAINTAINERS = 'maintainers',
+}

package/src/components/Developers/Developers.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import { cleanup, fireEvent, render } from '../../test/test-react-testing-library';
+import { cleanup, fireEvent, render, screen } from '../../test/test-react-testing-library';
+import { DeveloperType } from './DeveloperType';
 import Developers from './Developers';
-import { DeveloperType } from './Title';
 
 describe('test Developers', () => {
   afterEach(() => {
@@ -63,7 +63,7 @@ describe('test Developers', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
-  test('should test onClick the component avatar', () => {
+  test('should show only up to max items', () => {
     const packageMeta = {
       latest: {
         packageName: 'foo',
@@ -72,6 +72,7 @@ describe('test Developers', () => {
           {
             name: 'dmethvin',
             email: 'test@gmail.com',
+            url: 'https://example.com/',
           },
           {
             name: 'dmethvin2',
@@ -89,14 +90,40 @@ describe('test Developers', () => {
       <Developers packageMeta={packageMeta} type={DeveloperType.CONTRIBUTORS} visibleMax={1} />
     );
 
-    // const item2 = wrapper.find(Fab);
-    // // TODO: I am not sure here how to verify the method inside the component was called.
-    // item2.simulate('click');
-
     expect(wrapper.getByText('sidebar.contributors.title')).toBeInTheDocument();
-    fireEvent.click(wrapper.getByRole('button'));
+    expect(wrapper.getByTestId(packageMeta.latest.contributors[0].name)).toBeInTheDocument();
+    expect(wrapper.queryByTestId(packageMeta.latest.contributors[1].name)).not.toBeInTheDocument();
+    expect(wrapper.queryByTestId(packageMeta.latest.contributors[2].name)).not.toBeInTheDocument();
+  });
+
+  test('renders only the first six contributors when there are more than six', () => {
+    const packageMeta = {
+      latest: {
+        contributors: [
+          { name: 'contributor1', email: 'c1@test.com' },
+          { name: 'contributor2', email: 'c2@test.com' },
+          { name: 'contributor3', email: 'c3@test.com' },
+          { name: 'contributor4', email: 'c4@test.com' },
+          { name: 'contributor5', email: 'c5@test.com' },
+          { name: 'contributor6', email: 'c6@test.com' },
+          { name: 'contributor7', email: 'c7@test.com' },
+        ],
+      },
+    };
+
+    render(<Developers packageMeta={packageMeta} type={DeveloperType.CONTRIBUTORS} />);
+
+    expect(screen.getByTestId('contributor1')).toBeInTheDocument();
+    expect(screen.getByTestId('contributor2')).toBeInTheDocument();
+    expect(screen.getByTestId('contributor3')).toBeInTheDocument();
+    expect(screen.getByTestId('contributor4')).toBeInTheDocument();
+    expect(screen.getByTestId('contributor5')).toBeInTheDocument();
+    expect(screen.getByTestId('contributor6')).toBeInTheDocument();
+    expect(screen.queryByTestId('contributor7')).not.toBeInTheDocument();
+    expect(screen.getByTestId('fab-add')).toBeInTheDocument();
 
-    expect(wrapper.getByLabelText(packageMeta.latest.contributors[0].name)).toBeInTheDocument();
-    expect(wrapper.getByLabelText(packageMeta.latest.contributors[1].name)).toBeInTheDocument();
+    // click on "more"
+    fireEvent.click(screen.getByTestId('fab-add'));
+    expect(screen.getByTestId('contributor7')).toBeInTheDocument();
   });
 });

package/src/components/Developers/Developers.tsx

@@ -1,20 +1,15 @@
 import styled from '@emotion/styled';
 import Add from '@mui/icons-material/Add';
-import Avatar from '@mui/material/Avatar';
 import Box from '@mui/material/Box';
 import FabMUI from '@mui/material/Fab';
-import Tooltip from '@mui/material/Tooltip';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { Theme } from '../../Theme';
+import Person from '../Person';
+import { DeveloperType } from './DeveloperType';
 import Title from './Title';
 import getUniqueDeveloperValues from './get-unique-developer-values';
 
-export enum DeveloperType {
-  CONTRIBUTORS = 'contributors',
-  MAINTAINERS = 'maintainers',
-}
-
 export const Fab = styled(FabMUI)<{ theme?: Theme }>((props) => ({
   backgroundColor: props.theme?.palette.primary.main,
   color: props.theme?.palette.white,
@@ -28,7 +23,7 @@ interface Props {
 
 const StyledBox = styled(Box)({
   '> *': {
-    margin: 5,
+    marginRight: 5,
   },
 });
 
@@ -58,19 +53,24 @@ const Developers: React.FC<Props> = ({ type, visibleMax = VISIBLE_MAX, packageMe
     return null;
   }
 
+  const { name: packageName, version } = packageMeta.latest;
+
   return (
     <>
       <Title type={type} />
       <StyledBox display="flex" flexWrap="wrap" margin="10px 0 10px 0">
-        {visibleDevelopers.map((visibleDeveloper) => {
+        {visibleDevelopers.map((visibleDeveloper, index) => {
           return (
-            <Tooltip key={visibleDeveloper.email} title={visibleDeveloper.name}>
-              <Avatar alt={visibleDeveloper.name} src={visibleDeveloper.avatar} />
-            </Tooltip>
+            <Person
+              key={index}
+              packageName={packageName}
+              person={visibleDeveloper}
+              version={version}
+            />
           );
         })}
         {visibleDevelopersMax < developers.length && (
-          <Fab onClick={handleSetVisibleDevelopersMax} size="small">
+          <Fab data-testid={'fab-add'} onClick={handleSetVisibleDevelopersMax} size="small">
             <Add />
           </Fab>
         )}

package/src/components/Developers/Title.tsx

@@ -4,11 +4,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { Theme } from '../../Theme';
-
-export enum DeveloperType {
-  CONTRIBUTORS = 'contributors',
-  MAINTAINERS = 'maintainers',
-}
+import { DeveloperType } from './';
 
 interface Props {
   type: DeveloperType;

package/src/components/Developers/index.ts

@@ -1 +1,2 @@
-export { default, DeveloperType } from './Developers';
+export { default } from './Developers';
+export { DeveloperType } from './DeveloperType';

package/src/components/Distribution/Dist.test.tsx

@@ -33,7 +33,7 @@ describe('<Dist /> component', () => {
     expect(getByText('sidebar.distribution.size')).toBeInTheDocument();
     expect(getByText('sidebar.distribution.size')).toBeInTheDocument();
     expect(getByText('7', { exact: false })).toBeInTheDocument();
-    expect(getByText('10.00 Bytes', { exact: false })).toBeInTheDocument();
+    expect(getByText('10 Bytes', { exact: false })).toBeInTheDocument();
   });
 
   test('should render the component with license as string', () => {

package/src/components/Distribution/Dist.tsx

@@ -3,8 +3,8 @@ import React, { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { PackageMetaInterface } from '../../types/packageMeta';
+import { fileSizeSI, formatLicense } from '../../utils/utils';
 import { DistChips, DistListItem, StyledText } from './styles';
-import { fileSizeSI, formatLicense } from './utils';
 
 const DistChip: FC<{ name: string; children?: React.ReactElement | string }> = ({
   name,
@@ -47,9 +47,7 @@ const Dist: FC<{ packageMeta: PackageMetaInterface }> = ({ packageMeta }) => {
           <DistChip name={t('sidebar.distribution.size')}>{fileSizeSI(dist.unpackedSize)}</DistChip>
         ) : null}
 
-        <DistChip name={t('sidebar.distribution.license')}>
-          {formatLicense(license as string)}
-        </DistChip>
+        <DistChip name={t('sidebar.distribution.license')}>{formatLicense(license)}</DistChip>
       </DistListItem>
     </List>
   );

package/src/components/Distribution/styles.ts

@@ -1,6 +1,5 @@
 import styled from '@emotion/styled';
 import Chip from '@mui/material/Chip';
-import FabMUI from '@mui/material/Fab';
 import ListItem from '@mui/material/ListItem';
 import Typography from '@mui/material/Typography';
 
@@ -22,8 +21,3 @@ export const DistChips = styled(Chip)({
   textTransform: 'capitalize',
   marginTop: 5,
 });
-
-export const DownloadButton = styled(FabMUI)<{ theme?: Theme }>((props) => ({
-  backgroundColor: props.theme?.palette.primary.main,
-  color: props.theme?.palette.white,
-}));

package/src/components/Engines/Engines.tsx

@@ -1,7 +1,7 @@
+import { Typography } from '@mui/material';
 import Avatar from '@mui/material/Avatar';
 import Grid from '@mui/material/Grid';
 import List from '@mui/material/List';
-import ListItemText from '@mui/material/ListItemText';
 import React, { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -23,8 +23,12 @@ const EngineItem: FC<EngineItemProps> = ({ title, element, engineText }) => (
   <Grid item={true} xs={6}>
     <List subheader={<StyledText variant={'subtitle1'}>{title}</StyledText>}>
       <EngineListItem>
-        <Avatar sx={{ bgcolor: '#FFF' }}>{element}</Avatar>
-        <ListItemText primary={engineText} />
+        <Avatar sx={{ backgroundColor: 'transparent', marginLeft: 0, padding: 0 }}>
+          {element}
+        </Avatar>
+        <Typography sx={{ margin: 0, padding: '0 0 0 10px' }} variant="subtitle2">
+          {engineText}
+        </Typography>
       </EngineListItem>
     </List>
   </Grid>
@@ -68,7 +72,7 @@ const Engine: React.FC<Props> = ({ packageMeta }) => {
       {engines.npm ? (
         <EngineItem
           element={<Npm />}
-          engineText={engines.node}
+          engineText={engines.npm}
           title={t('sidebar.engines.npm-version')}
         />
       ) : null}
@@ -77,7 +81,7 @@ const Engine: React.FC<Props> = ({ packageMeta }) => {
         <EngineItem
           element={<Yarn />}
           engineText={engines.yarn}
-          title={t('sidebar.engines.npm-version')}
+          title={t('sidebar.engines.yarn-version')}
         />
       ) : null}
 
@@ -85,7 +89,7 @@ const Engine: React.FC<Props> = ({ packageMeta }) => {
         <EngineItem
           element={<Pnpm />}
           engineText={engines.pnpm}
-          title={t('sidebar.engines.npm-version')}
+          title={t('sidebar.engines.pnpm-version')}
         />
       ) : null}
     </Grid>

package/src/components/Engines/styles.ts

@@ -10,5 +10,5 @@ export const StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({
 }));
 
 export const EngineListItem = styled(ListItem)({
-  paddingLeft: 0,
+  padding: 0,
 });