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

package/src/components/Author/Author.tsx

@@ -1,35 +1,13 @@
-import { Typography } from '@mui/material';
-import Avatar from '@mui/material/Avatar';
 import List from '@mui/material/List';
-import { useTheme } from '@mui/styles';
-import i18next from 'i18next';
 import React, { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { url } from '../../utils';
+import Person from '../Person';
 import { AuthorListItem, StyledText } from './styles';
 
-export function getAuthorName(authorName?: string): string {
-  if (!authorName) {
-    return i18next.t('author-unknown');
-  }
-
-  if (authorName.toLowerCase() === 'anonymous') {
-    return i18next.t('author-anonymous');
-  }
-
-  return authorName;
-}
-
-/**
- * @param param0
- * @returns
- */
 const Author: FC<{ packageMeta }> = ({ packageMeta }) => {
   const { t } = useTranslation();
 
-  const theme = useTheme();
-
   if (!packageMeta) {
     return null;
   }
@@ -40,26 +18,10 @@ const Author: FC<{ packageMeta }> = ({ packageMeta }) => {
     return null;
   }
 
-  const { email, name } = author;
-  const avatarComponent = (
-    <Avatar
-      alt={author.name}
-      src={author.avatar}
-      sx={{ width: 40, height: 40, marginRight: theme.spacing(1) }}
-    />
-  );
-
   return (
     <List subheader={<StyledText variant={'subtitle1'}>{t('sidebar.author.title')}</StyledText>}>
-      <AuthorListItem>
-        {!email || !url.isEmail(email) ? (
-          avatarComponent
-        ) : (
-          <a href={`mailto:${email}?subject=${packageName}@${version}`} target={'_top'}>
-            {avatarComponent}
-          </a>
-        )}
-        {name && <Typography variant="subtitle2">{getAuthorName(name)}</Typography>}
+      <AuthorListItem sx={{ my: 1 }}>
+        <Person packageName={packageName} person={author} version={version} withText={true} />
       </AuthorListItem>
     </List>
   );

package/src/components/CopyClipboard/CopyToClipBoard.test.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import { fireEvent, render, screen } from '../../test/test-react-testing-library';
+import CopyToClipBoard from './CopyToClipBoard';
+
+Object.assign(navigator, {
+  clipboard: { writeText: jest.fn().mockImplementation(() => Promise.resolve()) },
+});
+
+describe('CopyToClipBoard component', () => {
+  test('should copy text to clipboard', async () => {
+    const copyThis = 'copy this';
+    render(
+      <CopyToClipBoard dataTestId={'copy-component'} text={copyThis} title={`npm i verdaccio`} />
+    );
+    expect(screen.getByTestId('copy-component')).toBeInTheDocument();
+
+    const copyComponent = await screen.findByTestId('copy-component');
+    await fireEvent.click(copyComponent);
+
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith(copyThis);
+  });
+});

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.tsx

@@ -1,19 +1,13 @@
-import styled from '@emotion/styled';
 import Box from '@mui/material/Box';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import React, { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { Theme } from '../../Theme';
 import NoItems from '../NoItems';
 import { DependencyBlock } from './DependencyBlock';
 import { hasKeys } from './utits';
 
-export const CardWrap = styled(Card)<{ theme?: Theme }>((props) => ({
-  marginBottom: props.theme.spacing(2),
-}));
-
 const Dependencies: React.FC<{ packageMeta: any }> = ({ packageMeta }) => {
   const { t } = useTranslation();
 
@@ -43,7 +37,7 @@ const Dependencies: React.FC<{ packageMeta: any }> = ({ packageMeta }) => {
     hasKeys(peerDependencies);
   if (hasDependencies) {
     return (
-      <CardWrap>
+      <Card sx={{ mb: 2 }}>
         <CardContent>
           <Box data-testid="dependencies-box" sx={{ m: 2 }}>
             {Object.entries(dependencyMap).map(([dependencyType, dependencies]) => {
@@ -62,11 +56,17 @@ const Dependencies: React.FC<{ packageMeta: any }> = ({ packageMeta }) => {
             })}
           </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.tsx

@@ -9,6 +9,7 @@ import { useHistory } from 'react-router-dom';
 
 import { Theme } from '../../Theme';
 import { PackageDependencies } from '../../types/packageMeta';
+import { Route } from '../../utils';
 
 interface DependencyBlockProps {
   title: string;
@@ -41,7 +42,7 @@ export const DependencyBlock: React.FC<DependencyBlockProps> = ({ title, depende
   const deps = Object.entries(dependencies);
 
   function handleClick(name: string): void {
-    history.push(`/-/web/detail/${name}`);
+    history.push(`${Route.DETAIL}${name}`);
   }
 
   function labelText(title: string, name: string, version: string): string {

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

@@ -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>
   );