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

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

@@ -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: 'transparent' }}>{element}</Avatar>
-        <Typography variant="subtitle2">{engineText}</Typography>
+        <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>

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

package/src/components/ErrorBoundary/ErrorBoundary.test.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import { render, screen } from '../../test/test-react-testing-library';
+import ErrorBoundary from './ErrorBoundary';
+
+describe('ErrorBoundary component', () => {
+  test('should render children when no error is caught', () => {
+    render(
+      <ErrorBoundary>
+        <div>{'Test'}</div>
+      </ErrorBoundary>
+    );
+
+    expect(screen.getByText('Test')).toBeInTheDocument();
+  });
+
+  test('should render error information when error is caught', () => {
+    const ErrorComponent = () => {
+      throw new Error('Test error');
+    };
+
+    // Suppress error messages for this test
+    const spy = jest.spyOn(console, 'error');
+    spy.mockImplementation(() => {});
+
+    render(
+      <ErrorBoundary>
+        <ErrorComponent />
+      </ErrorBoundary>
+    );
+
+    expect(screen.getByText('Something went wrong.')).toBeInTheDocument();
+    expect(screen.getByText(/error:/)).toBeInTheDocument();
+    expect(screen.getByText(/info:/)).toBeInTheDocument();
+
+    // Restore console.error after test
+    spy.mockRestore();
+  });
+});

package/src/components/FundButton/FundButton.tsx

@@ -6,11 +6,11 @@ import { Trans } from 'react-i18next';
 
 import { Theme } from '../../Theme';
 import { url } from '../../utils';
-import { Link } from '../Link';
+import LinkExternal from '../LinkExternal';
 
-const StyledLink = styled(Link)<{ theme?: Theme }>(({ theme }) => ({
-  marginTop: theme?.spacing(1),
-  marginBottom: theme?.spacing(1),
+const StyledLink = styled(LinkExternal)<{ theme?: Theme }>(({ theme }) => ({
+  marginTop: theme?.spacing(2),
+  marginBottom: theme?.spacing(2),
   textDecoration: 'none',
   display: 'block',
 }));
@@ -32,7 +32,7 @@ const FundButton: React.FC<{ packageMeta: any }> = ({ packageMeta }) => {
   }
 
   return (
-    <StyledLink external={true} to={fundingUrl} variant="button">
+    <StyledLink to={fundingUrl} variant="button">
       <Button
         color="primary"
         fullWidth={true}

package/src/components/HeaderInfoDialog/HeaderInfoDialog.test.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+
+import { fireEvent, render, screen } from '../../test/test-react-testing-library';
+import HeaderInfoDialog from './HeaderInfoDialog';
+
+describe('HeaderInfoDialog', () => {
+  const onCloseDialog = jest.fn();
+
+  const tabs = [{ label: 'Tab 1' }, { label: 'Tab 2' }];
+
+  const tabPanels = [{ element: <div>{'Panel 1'}</div> }, { element: <div>{'Panel 2'}</div> }];
+
+  beforeEach(() => {
+    render(
+      <HeaderInfoDialog
+        dialogTitle="Dialog Title"
+        isOpen={true}
+        onCloseDialog={onCloseDialog}
+        tabPanels={tabPanels}
+        tabs={tabs}
+      />
+    );
+  });
+
+  test('renders without crashing', () => {
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+  });
+
+  test('displays the dialog title', () => {
+    expect(screen.getByText('Dialog Title')).toBeInTheDocument();
+  });
+
+  test('renders the tabs correctly', () => {
+    expect(screen.getByText('Tab 1')).toBeInTheDocument();
+    expect(screen.getByText('Tab 2')).toBeInTheDocument();
+  });
+
+  test('renders the tab panels correctly', async () => {
+    expect(screen.getByText('Panel 1')).toBeInTheDocument();
+    // Panel 2 should not be visible initially
+    expect(screen.queryByText('Panel 2')).not.toBeInTheDocument();
+    // Switch to Tab 2
+    fireEvent.click(screen.getByText('Tab 2'));
+    await expect(screen.queryByText('Panel 2')).toBeInTheDocument();
+  });
+
+  test('calls onCloseDialog when the dialog is closed', () => {
+    fireEvent.click(screen.getByRole('button'));
+    expect(onCloseDialog).toHaveBeenCalled();
+  });
+});

package/src/components/HeaderInfoDialog/HeaderInfoDialog.tsx

@@ -54,7 +54,7 @@ const HeaderInfoDialog: React.FC<Props> = ({
     <RegistryInfoDialog onClose={onCloseDialog} open={isOpen} title={dialogTitle}>
       <Box sx={{ width: '100%' }}>
         <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
-          <Tabs aria-label="infoTabs" onChange={handleChange} value={value}>
+          <Tabs aria-label="infoTabs" data-testid={'tabs'} onChange={handleChange} value={value}>
             {tabs
               ? tabs.map((item, index) => {
                   return (
@@ -68,7 +68,7 @@ const HeaderInfoDialog: React.FC<Props> = ({
         {tabPanels
           ? tabPanels.map((item, index) => {
               return (
-                <TabPanel index={index} key={item.key} value={value}>
+                <TabPanel index={index} key={index} value={value}>
                   {item.element}
                 </TabPanel>
               );

package/src/components/Heading/Heading.test.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { render, screen } from '../../test/test-react-testing-library';
+import Heading from './Heading';
+
+describe('Heading component', () => {
+  test('should render correctly with default props', () => {
+    render(<Heading>{'Test'}</Heading>);
+    const headingElement = screen.getByText('Test');
+    expect(headingElement).toBeInTheDocument();
+    expect(headingElement.tagName).toBe('H6');
+  });
+
+  test('should render correctly with custom props', () => {
+    render(<Heading variant="h1">{'Test'}</Heading>);
+    const headingElement = screen.getByText('Test');
+    expect(headingElement).toBeInTheDocument();
+    expect(headingElement.tagName).toBe('H1');
+  });
+});

package/src/components/Icons/DevsIcons/CommonJS.tsx

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

package/src/components/Icons/DevsIcons/ES6Module.tsx

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

package/src/components/Icons/DevsIcons/Git.tsx

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

package/src/components/Icons/DevsIcons/NodeJS.tsx

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

package/src/components/Icons/DevsIcons/TypeScript.tsx

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

package/src/components/Icons/FileBinary.tsx

@@ -9,7 +9,8 @@ const FileBinary = React.forwardRef(function FileBinary(
   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="M8.5 1H1c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h10c.55 0 1-.45 1-1V4.5L8.5 1zM11 14H1V2h7l3 3v9zM5 6.98L3.5 8.5 5 10l-.5 1L2 8.5 4.5 6l.5.98zM7.5 6L10 8.5 7.5 11l-.5-.98L8.5 8.5 7 7l.5-1z" />
     </SvgIcon>
   );

package/src/components/Icons/Icons.stories.tsx

@@ -6,13 +6,17 @@ import {
   CommonJS,
   ES6Modules,
   Earth,
+  FileBinary,
   Git,
   Law,
   License,
   NodeJS,
+  Npm,
+  Pnpm,
   Time,
   TypeScript,
   Version,
+  Yarn,
 } from '.';
 
 export default {
@@ -21,16 +25,28 @@ export default {
 
 export const Icons: any = () => (
   <Box sx={{ width: '100%' }}>
-    <Stack spacing={2}>
+    <Stack direction="row" spacing={2}>
+      <Npm />
+      <Pnpm />
+      <Yarn />
+    </Stack>
+    <Stack direction="row" spacing={2}>
       <NodeJS />
       <Git />
-      <Version />
+    </Stack>
+    <Stack direction="row" spacing={2}>
       <TypeScript />
-      <Time />
-      <License />
-      <Law />
       <ES6Modules />
       <CommonJS />
+    </Stack>
+    <Stack direction="row" spacing={2}>
+      <Version />
+      <Time />
+      <FileBinary />
+      <Law />
+    </Stack>
+    <Stack direction="row" spacing={2}>
+      <License />
       <Earth />
     </Stack>
   </Box>

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