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

package/src/components/Install/Install.tsx

@@ -1,8 +1,6 @@
 import styled from '@emotion/styled';
 import { Typography } from '@mui/material';
-import Grid from '@mui/material/Grid';
 import List from '@mui/material/List';
-import { useTheme } from '@mui/styles';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -18,6 +16,12 @@ const StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({
   textTransform: 'capitalize',
 }));
 
+const Wrapper = styled('div')({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+});
+
 export type Props = {
   packageMeta: PackageMetaInterface;
   packageName: string;
@@ -26,7 +30,6 @@ export type Props = {
 
 const Install: React.FC<Props> = ({ packageMeta, packageName, configOptions }) => {
   const { t } = useTranslation();
-  const theme = useTheme();
   if (!packageMeta || !packageName) {
     return null;
   }
@@ -38,16 +41,14 @@ const Install: React.FC<Props> = ({ packageMeta, packageName, configOptions }) =
 
   return hasPkgManagers ? (
     <>
-      <Grid
-        container={true}
-        justifyContent="flex-end"
-        sx={{ marginRight: theme.spacing(10), alingText: 'right' }}
-      >
-        <SettingsMenu packageName={packageName} />
-      </Grid>
       <List
         data-testid={'installList'}
-        subheader={<StyledText variant={'subtitle1'}>{t('sidebar.installation.title')}</StyledText>}
+        subheader={
+          <Wrapper>
+            <StyledText variant={'subtitle1'}>{t('sidebar.installation.title')}</StyledText>
+            <SettingsMenu packageName={packageName} />
+          </Wrapper>
+        }
       >
         {hasNpm && (
           <InstallListItem

package/src/components/Install/InstallListItem.tsx

@@ -22,9 +22,9 @@ const InstallListItemText = styled(ListItemText)({
 });
 
 const PackageMangerAvatar = styled(Avatar)({
-  borderRadius: '0px',
   backgroundColor: 'transparent',
   padding: 0,
+  marginLeft: 0,
 });
 
 export enum DependencyManager {
@@ -39,10 +39,10 @@ interface Interface {
   packageVersion?: string;
 }
 
-export function getGlobalInstall(isGlobal, packageVersion, packageName, isYarn = false) {
+export function getGlobalInstall(isLatest, isGlobal, packageVersion, packageName, isYarn = false) {
   const name = isGlobal
-    ? `${isYarn ? '' : '-g'} ${packageVersion ? `${packageName}@${packageVersion}` : packageName}`
-    : packageVersion
+    ? `${isYarn ? '' : '-g'} ${packageVersion && !isLatest ? `${packageName}@${packageVersion}` : packageName}`
+    : packageVersion && !isLatest
       ? `${packageName}@${packageVersion}`
       : packageName;
 
@@ -56,6 +56,7 @@ const InstallListItem: React.FC<Interface> = ({
 }) => {
   const { localSettings } = useSettings();
   const theme = useTheme();
+  const isLatest = localSettings[packageName]?.latest ?? false;
   const isGlobal = localSettings[packageName]?.global ?? false;
   switch (dependencyManager) {
     case DependencyManager.NPM:
@@ -67,9 +68,9 @@ const InstallListItem: React.FC<Interface> = ({
           <InstallListItemText
             primary={
               <CopyToClipBoard
-                dataTestId="instalNpm"
-                text={`npm install ${getGlobalInstall(isGlobal, packageVersion, packageName)}`}
-                title={`npm install ${getGlobalInstall(isGlobal, packageVersion, packageName)}`}
+                dataTestId="installNpm"
+                text={`npm install ${getGlobalInstall(isLatest, isGlobal, packageVersion, packageName)}`}
+                title={`npm install ${getGlobalInstall(isLatest, isGlobal, packageVersion, packageName)}`}
               />
             }
           />
@@ -93,7 +94,7 @@ const InstallListItem: React.FC<Interface> = ({
                         packageName,
                         true
                       )}`
-                    : `yarn add ${getGlobalInstall(isGlobal, packageVersion, packageName, true)}`
+                    : `yarn add ${getGlobalInstall(isLatest, isGlobal, packageVersion, packageName, true)}`
                 }
                 title={
                   isGlobal
@@ -103,7 +104,7 @@ const InstallListItem: React.FC<Interface> = ({
                         packageName,
                         true
                       )}`
-                    : `yarn add ${getGlobalInstall(isGlobal, packageVersion, packageName, true)}`
+                    : `yarn add ${getGlobalInstall(isLatest, isGlobal, packageVersion, packageName, true)}`
                 }
               />
             }
@@ -120,8 +121,8 @@ const InstallListItem: React.FC<Interface> = ({
             primary={
               <CopyToClipBoard
                 dataTestId="installPnpm"
-                text={`pnpm install ${getGlobalInstall(isGlobal, packageVersion, packageName)}`}
-                title={`pnpm install ${getGlobalInstall(isGlobal, packageVersion, packageName)}`}
+                text={`pnpm install ${getGlobalInstall(isLatest, isGlobal, packageVersion, packageName)}`}
+                title={`pnpm install ${getGlobalInstall(isLatest, isGlobal, packageVersion, packageName)}`}
               />
             }
           />

package/src/components/Keywords/KeywordListItems.tsx

@@ -0,0 +1,22 @@
+import Chip from '@mui/material/Chip';
+import ListItem from '@mui/material/ListItem';
+import React from 'react';
+
+const KeywordListItems: React.FC<{ keywords: undefined | string | string[] }> = ({ keywords }) => {
+  const keywordList =
+    typeof keywords === 'string' ? keywords.replace(/,/g, ' ').split(' ') : keywords;
+
+  if (!keywordList) {
+    return null;
+  }
+
+  return (
+    <ListItem sx={{ px: 0, mt: 0, flexWrap: 'wrap' }}>
+      {keywordList.sort().map((keyword, index) => (
+        <Chip key={index} label={keyword} sx={{ mt: 1, mr: 1 }} />
+      ))}
+    </ListItem>
+  );
+};
+
+export default KeywordListItems;

package/src/components/Keywords/Keywords.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { default as Keywords } from '.';
+
+export default {
+  title: 'Components/Sidebar/Keywords',
+};
+
+export const AllProperties: any = () => (
+  <Keywords
+    packageMeta={{
+      latest: {
+        name: 'verdaccio1',
+        version: '4.0.0',
+        keywords: ['verdaccio', 'npm', 'yarn'],
+      },
+    }}
+  />
+);

package/src/components/Keywords/Keywords.test.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+
+import { render, screen } from '../../test/test-react-testing-library';
+import Keywords from './Keywords';
+
+describe('<Keywords /> component', () => {
+  test('should render the component in default state', () => {
+    const packageMeta = {
+      latest: {
+        name: 'verdaccio1',
+        version: '4.0.0',
+        keywords: ['verdaccio', 'npm', 'yarn'],
+      },
+    };
+
+    const container = render(<Keywords packageMeta={packageMeta} />);
+
+    expect(container.getByText('sidebar.keywords.title')).toBeInTheDocument();
+    expect(container.getByText('verdaccio')).toBeInTheDocument();
+    expect(container.getByText('npm')).toBeInTheDocument();
+    expect(container.getByText('yarn')).toBeInTheDocument();
+  });
+
+  test('should not render if data is missing', () => {
+    // @ts-ignore
+    render(<Keywords packageMeta={{}} />);
+    expect(screen.queryByTestId('keyword-list')).toBeNull();
+
+    const packageMeta = {
+      latest: {
+        name: 'verdaccio1',
+        version: '4.0.0',
+        keywords: '',
+      },
+    };
+
+    render(<Keywords packageMeta={packageMeta} />);
+    expect(screen.queryByTestId('keyword-list')).toBeNull();
+  });
+
+  test('should render keywords set in string', () => {
+    const packageMeta = {
+      latest: {
+        name: 'verdaccio1',
+        version: '4.0.0',
+        keywords: 'hello, world, verdaccio',
+      },
+    };
+
+    const container = render(<Keywords packageMeta={packageMeta} />);
+
+    expect(container.getByText('sidebar.keywords.title')).toBeInTheDocument();
+    expect(container.getByText('verdaccio')).toBeInTheDocument();
+    expect(container.getByText('hello')).toBeInTheDocument();
+    expect(container.getByText('world')).toBeInTheDocument();
+  });
+});

package/src/components/Keywords/Keywords.tsx

@@ -0,0 +1,35 @@
+import List from '@mui/material/List';
+import Typography from '@mui/material/Typography';
+import { useTheme } from '@mui/styles';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { PackageMetaInterface } from '../../types/packageMeta';
+import KeywordListItems from './KeywordListItems';
+
+const Keywords: React.FC<{ packageMeta: PackageMetaInterface }> = ({ packageMeta }) => {
+  const { t } = useTranslation();
+  const theme = useTheme();
+
+  if (!packageMeta?.latest?.keywords) {
+    return null;
+  }
+
+  return (
+    <List
+      data-testid="keyword-list"
+      subheader={
+        <Typography
+          sx={{ fontWeight: theme.fontWeight.bold, textTransform: 'capitalize' }}
+          variant="subtitle1"
+        >
+          {t('sidebar.keywords.title')}
+        </Typography>
+      }
+    >
+      <KeywordListItems keywords={packageMeta?.latest?.keywords} />
+    </List>
+  );
+};
+
+export default Keywords;

package/src/components/Keywords/index.ts

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

package/src/components/Link/Link.test.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { BrowserRouter as Router } from 'react-router-dom';
+
+import { render } from '../../test/test-react-testing-library';
+import Link from './Link';
+
+describe('<Link /> component', () => {
+  test('should render the component in default state', () => {
+    const { container } = render(
+      <Router>
+        <Link to={'/'} />
+      </Router>
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test('should render the component with link', () => {
+    const { container } = render(
+      <Router>
+        <Link to={'/'}>{'Home'}</Link>
+      </Router>
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

package/src/components/Link/Link.tsx

@@ -3,9 +3,7 @@ import Typography from '@mui/material/Typography';
 import React from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 
-type LinkRef = HTMLAnchorElement;
-
-export const CustomRouterLink = styled(RouterLink)`
+const CustomRouterLink = styled(RouterLink)`
   text-decoration: none;
   &:hover,
   &:focus {
@@ -13,23 +11,11 @@ export const CustomRouterLink = styled(RouterLink)`
   }
 `;
 
-// TODO: improve any with custom types for a and RouterLink
-const Link = React.forwardRef<LinkRef, any>(function LinkFunction(
-  { external, to, children, variant, className, onClick },
+const Link = React.forwardRef<HTMLAnchorElement, any>(function LinkFunction(
+  { to, children, variant, className, onClick },
   ref
 ) {
-  return external ? (
-    <a
-      className={className}
-      href={to}
-      onClick={onClick}
-      ref={ref}
-      rel="noopener noreferrer"
-      target="_blank"
-    >
-      <Typography variant={variant ?? 'caption'}>{children}</Typography>
-    </a>
-  ) : (
+  return (
     <CustomRouterLink className={className} innerRef={ref} onClick={onClick} to={to}>
       <Typography variant={variant}>{children}</Typography>
     </CustomRouterLink>

package/src/components/Link/index.ts

@@ -1 +1 @@
-export { default as Link } from './Link';
+export { default } from './Link';

package/src/components/LinkExternal/LinkExternal.test.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { render } from '../../test/test-react-testing-library';
+import LinkExternal from './LinkExternal';
+
+describe('<LinkExternal /> component', () => {
+  test('should render the component in default state', () => {
+    const { container } = render(<LinkExternal to={'/'} />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test('should render the component with external link', () => {
+    const { container } = render(
+      <LinkExternal to={'https://example.com'}>{'Example'}</LinkExternal>
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

package/src/components/LinkExternal/LinkExternal.tsx

@@ -0,0 +1,22 @@
+import Link from '@mui/material/Link';
+import React from 'react';
+
+const LinkExternal = React.forwardRef<HTMLAnchorElement, any>((props, ref) => {
+  const { to, children, variant, ...rest } = props;
+  return (
+    // eslint-disable-next-line verdaccio/jsx-spread
+    <Link
+      href={to}
+      ref={ref}
+      rel="noopener noreferrer"
+      target="_blank"
+      underline="hover"
+      variant={variant ?? 'caption'}
+      {...rest}
+    >
+      {children}
+    </Link>
+  );
+});
+
+export default LinkExternal;

package/src/components/LinkExternal/index.ts

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

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