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

package/src/components/Icons/Icons.test.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+
+import { render } from '../../test/test-react-testing-library';
+import {
+  CommonJS,
+  ES6Modules,
+  Earth,
+  FileBinary,
+  Git,
+  Law,
+  License,
+  NodeJS,
+  Npm,
+  Pnpm,
+  Time,
+  TypeScript,
+  Version,
+  Yarn,
+} from './';
+import { SvgIcon } from './SvgIcon';
+
+describe('Icon components', () => {
+  test('should render an SVG graphic', () => {
+    const { container } = render(
+      <>
+        <Earth />
+        <FileBinary />
+        <Law />
+        <License />
+        <Time />
+        <Version />
+      </>
+    );
+    expect(container.querySelectorAll('svg')).toHaveLength(6);
+  });
+
+  test('should render an IMG graphic linking to and SVG', () => {
+    const { container } = render(
+      <>
+        <CommonJS />
+        <ES6Modules />
+        <Git />
+        <NodeJS />
+        <TypeScript />
+        <Npm />
+        <Pnpm />
+        <Yarn />
+      </>
+    );
+    expect(container.querySelectorAll('img')).toHaveLength(8);
+  });
+
+  test('should render small graphic', () => {
+    const { container } = render(
+      <SvgIcon size={'sm'}>
+        <circle cx="7" cy="7" r="7" />
+      </SvgIcon>
+    );
+    expect(container.querySelector('svg')).toHaveStyle('width: 14px');
+  });
+
+  test('should render medium graphic', () => {
+    const { container } = render(
+      <SvgIcon size={'md'}>
+        <circle cx="7" cy="7" r="7" />
+      </SvgIcon>
+    );
+    expect(container.querySelector('svg')).toHaveStyle('width: 18px');
+  });
+});

package/src/components/Icons/Law.tsx

@@ -6,7 +6,8 @@ type Props = React.ComponentProps<typeof SvgIcon>;
 
 const Law = React.forwardRef(function Law(props: Props, ref: React.Ref<SVGSVGElement>) {
   return (
-    <SvgIcon {...props} ref={ref}>
+    // eslint-disable-next-line verdaccio/jsx-spread
+    <SvgIcon viewBox="0 0 14 16" {...props} ref={ref}>
       <path
         d="M7 4c-.83 0-1.5-.67-1.5-1.5S6.17 1 7 1s1.5.67 1.5 1.5S7.83 4 7 4zm7 6c0 1.11-.89 2-2 2h-1c-1.11 0-2-.89-2-2l2-4h-1c-.55 0-1-.45-1-1H8v8c.42 0 1 .45 1 1h1c.42 0 1 .45 1 1H3c0-.55.58-1 1-1h1c0-.55.58-1 1-1h.03L6 5H5c0 .55-.45 1-1 1H3l2 4c0 1.11-.89 2-2 2H2c-1.11 0-2-.89-2-2l2-4H1V5h3c0-.55.45-1 1-1h4c.55 0 1 .45 1 1h3v1h-1l2 4zM2.5 7L1 10h3L2.5 7zM13 10l-1.5-3-1.5 3h3z"
         fillRule="evenodd"

package/src/components/Icons/Managers/Npm.tsx

@@ -1,13 +1,7 @@
-import styled from '@emotion/styled';
-import { Theme } from '@mui/material';
 import React from 'react';
 
 const icon = require('./npm.svg');
 
-const ImgIcon = styled.img<{ theme?: Theme }>(({ theme }) => ({
-  marginLeft: theme?.spacing(1),
-}));
-
 export function Npm() {
-  return <ImgIcon alt="npm package manager" height="20" src={icon} width="20" />;
+  return <img alt="npm package manager" height="20" src={icon} width="20" />;
 }

package/src/components/Icons/Managers/Pnpm.tsx

@@ -1,13 +1,7 @@
-import styled from '@emotion/styled';
-import { Theme } from '@mui/material';
 import React from 'react';
 
 const icon = require('./pnpm.svg');
 
-const ImgIcon = styled.img<{ theme?: Theme }>(({ theme }) => ({
-  marginLeft: theme?.spacing(1),
-}));
-
 export function Pnpm() {
-  return <ImgIcon alt="pnpm package manager" height="20" src={icon} width="20" />;
+  return <img alt="pnpm package manager" height="20" src={icon} width="20" />;
 }

package/src/components/Icons/Managers/Yarn.tsx

@@ -1,13 +1,7 @@
-import styled from '@emotion/styled';
-import { Theme } from '@mui/material';
 import React from 'react';
 
 const icon = require('./yarn.svg');
 
-const ImgIcon = styled.img<{ theme?: Theme }>(({ theme }) => ({
-  marginLeft: theme?.spacing(1),
-}));
-
 export function Yarn() {
-  return <ImgIcon alt="npm package manager" height="20" src={icon} width="20" />;
+  return <img alt="npm package manager" height="20" src={icon} width="20" />;
 }

package/src/components/Install/Install.test.tsx

@@ -5,12 +5,14 @@ import { PackageManagers } from '@verdaccio/types';
 import { useConfig } from '../../providers';
 import { render, screen } from '../../test/test-react-testing-library';
 import Install from './Install';
-import { getGlobalInstall } from './InstallListItem';
+import InstallListItem, { DependencyManager, getGlobalInstall } from './InstallListItem';
 import data from './__partials__/data.json';
 
-const ComponentToBeRendered: React.FC<{ pkgManagers?: PackageManagers[] }> = () => {
+const ComponentToBeRendered: React.FC<{ name?: string; pkgManagers?: PackageManagers[] }> = ({
+  name = 'foo',
+}) => {
   const { configOptions } = useConfig();
-  return <Install configOptions={configOptions} packageMeta={data} packageName="foo" />;
+  return <Install configOptions={configOptions} packageMeta={data} packageName={name} />;
 };
 
 /* eslint-disable react/jsx-no-bind*/
@@ -22,6 +24,11 @@ describe('<Install />', () => {
     expect(screen.getByText('npm install foo@8.0.0')).toBeInTheDocument();
   });
 
+  test('should not render if name is missing', () => {
+    render(<ComponentToBeRendered name="" />);
+    expect(screen.queryByTestId('installList')).toBeNull();
+  });
+
   test('should have 3 children', () => {
     window.__VERDACCIO_BASENAME_UI_OPTIONS.pkgManagers = ['yarn', 'pnpm', 'npm'];
     const { getByTestId } = render(<ComponentToBeRendered />);
@@ -32,9 +39,7 @@ describe('<Install />', () => {
 
   test('should have the element NPM', () => {
     window.__VERDACCIO_BASENAME_UI_OPTIONS.pkgManagers = ['npm'];
-
     render(<ComponentToBeRendered />);
-
     expect(screen.getByText('sidebar.installation.title')).toBeTruthy();
     expect(screen.queryByText('pnpm')).not.toBeInTheDocument();
     expect(screen.queryByText('yarn')).not.toBeInTheDocument();
@@ -59,18 +64,54 @@ describe('<Install />', () => {
   });
 });
 
+describe('<InstallListItem />', () => {
+  test('renders correctly', () => {
+    render(
+      <InstallListItem
+        dependencyManager={DependencyManager.NPM}
+        packageName={'foo'}
+        packageVersion={'8.0.0'}
+      />
+    );
+    expect(screen.queryByTestId('installListItem-npm')).toBeInTheDocument();
+  });
+
+  test('should not render if name is missing', () => {
+    render(
+      // @ts-ignore - testing invalid value
+      <InstallListItem dependencyManager={'other'} packageName={'foo'} packageVersion={'8.0.0'} />
+    );
+    // expect nothing to be rendered
+    expect(screen.queryByTestId('installListItem-npm')).toBeNull();
+  });
+});
+
 describe('getGlobalInstall', () => {
-  test('no global', () => {
-    expect(getGlobalInstall(false, 'foo', '1.0.0')).toEqual('1.0.0@foo');
+  test('version', () => {
+    expect(getGlobalInstall(false, false, '1.0.0', 'foo')).toEqual('foo@1.0.0');
+  });
+  test('latest', () => {
+    expect(getGlobalInstall(true, false, '1.0.0', 'foo')).toEqual('foo');
+  });
+
+  test('version global', () => {
+    expect(getGlobalInstall(false, true, '1.0.0', 'foo')).toEqual('-g foo@1.0.0');
+  });
+  test('latest global', () => {
+    expect(getGlobalInstall(true, true, '1.0.0', 'foo')).toEqual('-g foo');
+  });
+
+  test('yarn version', () => {
+    expect(getGlobalInstall(false, false, '1.0.0', 'foo', true)).toEqual('foo@1.0.0');
   });
-  test('global', () => {
-    expect(getGlobalInstall(true, 'foo', '1.0.0')).toEqual('-g 1.0.0@foo');
+  test('yarn latest', () => {
+    expect(getGlobalInstall(true, false, '1.0.0', 'foo', true)).toEqual('foo');
   });
 
-  test('yarn no global', () => {
-    expect(getGlobalInstall(false, 'foo', '1.0.0', true)).toEqual('1.0.0@foo');
+  test('yarn version global', () => {
+    expect(getGlobalInstall(false, true, '1.0.0', 'foo', true)).toEqual('foo@1.0.0');
   });
-  test('yarn global', () => {
-    expect(getGlobalInstall(true, 'foo', '1.0.0', true)).toEqual('1.0.0@foo');
+  test('yarn latest global', () => {
+    expect(getGlobalInstall(true, true, '1.0.0', 'foo', true)).toEqual('foo');
   });
 });

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 () => {