diff --git a/src/components/Author/Author.tsx b/src/components/Author/Author.tsx
index f5a3225..4e76e1d 100644
--- a/src/components/Author/Author.tsx
+++ b/src/components/Author/Author.tsx
@@ -1,13 +1,14 @@
import React, { FC, useContext } from 'react';
-import Avatar from '@material-ui/core/Avatar';
import List from '@material-ui/core/List';
import { DetailContext } from '../../pages/Version';
import { Heading, AuthorListItem, AuthorListItemText } from './styles';
import { isEmail } from '../../utils/url';
-const Authors: FC = () => {
+import Avatar from '../../muiComponents/Avatar';
+
+const Author: FC = () => {
const { packageMeta } = useContext(DetailContext);
if (!packageMeta) {
@@ -41,4 +42,4 @@ const Authors: FC = () => {
);
};
-export default Authors;
+export default Author;
diff --git a/src/components/AvatarTooltip/AvatarTooltip.tsx b/src/components/AvatarTooltip/AvatarTooltip.tsx
index 941772a..7a4c11d 100644
--- a/src/components/AvatarTooltip/AvatarTooltip.tsx
+++ b/src/components/AvatarTooltip/AvatarTooltip.tsx
@@ -1,9 +1,9 @@
import React, { FC } from 'react';
-import Avatar from '@material-ui/core/Avatar';
import { isEmail } from '../../utils/url';
import Tooltip from '../../muiComponents/Tooltip';
+import Avatar from '../../muiComponents/Avatar';
export interface AvatarDeveloper {
name: string;
diff --git a/src/components/Developers/__snapshots__/Developers.test.tsx.snap b/src/components/Developers/__snapshots__/Developers.test.tsx.snap
index eb9ea57..5f37f2d 100644
--- a/src/components/Developers/__snapshots__/Developers.test.tsx.snap
+++ b/src/components/Developers/__snapshots__/Developers.test.tsx.snap
@@ -107,25 +107,29 @@ exports[`test Developers should render the component for contributors with items
target="_top"
title="dmethvin"
>
-
-
-
-
-
+ classes={
+ Object {
+ "colorDefault": "MuiAvatar-colorDefault",
+ "img": "MuiAvatar-img",
+ "root": "MuiAvatar-root",
+ }
+ }
+ >
+
+
+
+
-
-
-
-
-
+ classes={
+ Object {
+ "colorDefault": "MuiAvatar-colorDefault",
+ "img": "MuiAvatar-img",
+ "root": "MuiAvatar-root",
+ }
+ }
+ >
+
+
+
+
-
-
-
-
-
+ classes={
+ Object {
+ "colorDefault": "MuiAvatar-colorDefault",
+ "img": "MuiAvatar-img",
+ "root": "MuiAvatar-root",
+ }
+ }
+ >
+
+
+
+
-
-
-
-
-
+ classes={
+ Object {
+ "colorDefault": "MuiAvatar-colorDefault",
+ "img": "MuiAvatar-img",
+ "root": "MuiAvatar-root",
+ }
+ }
+ >
+
+
+
+
{
return (
diff --git a/src/muiComponents/Avatar/Avatar.tsx b/src/muiComponents/Avatar/Avatar.tsx
new file mode 100644
index 0000000..90b5984
--- /dev/null
+++ b/src/muiComponents/Avatar/Avatar.tsx
@@ -0,0 +1,13 @@
+import React, { forwardRef } from 'react';
+import { default as MaterialUIAvatar, AvatarProps } from '@material-ui/core/Avatar';
+
+// The default element type of MUI's Avatar is 'div' and we don't allow the change of this prop
+type AvatarRef = HTMLElementTagNameMap['div'];
+
+/* eslint-disable verdaccio/jsx-spread */
+// eslint-disable-next-line react/display-name
+const Avatar = forwardRef(function Avatar(props, ref) {
+ return ;
+});
+
+export default Avatar;
diff --git a/src/muiComponents/Avatar/index.ts b/src/muiComponents/Avatar/index.ts
new file mode 100644
index 0000000..ea51b74
--- /dev/null
+++ b/src/muiComponents/Avatar/index.ts
@@ -0,0 +1 @@
+export { default } from './Avatar';
diff --git a/src/muiComponents/IconButton/IconButton.tsx b/src/muiComponents/IconButton/IconButton.tsx
index 9b344d5..6df6870 100644
--- a/src/muiComponents/IconButton/IconButton.tsx
+++ b/src/muiComponents/IconButton/IconButton.tsx
@@ -1,12 +1,12 @@
import React, { forwardRef } from 'react';
-import { default as MuiIconButton, IconButtonProps } from '@material-ui/core/IconButton';
+import { default as MaterialUIIconButton, IconButtonProps } from '@material-ui/core/IconButton';
type IconButtonRef = HTMLElementTagNameMap['button'];
/* eslint-disable verdaccio/jsx-spread */
// eslint-disable-next-line react/display-name
const IconButton = forwardRef(function IconButton(props, ref) {
- return ;
+ return ;
});
export default IconButton;
diff --git a/src/muiComponents/TextField/TextField.tsx b/src/muiComponents/TextField/TextField.tsx
index c26edd5..594ab31 100644
--- a/src/muiComponents/TextField/TextField.tsx
+++ b/src/muiComponents/TextField/TextField.tsx
@@ -1,5 +1,5 @@
import React, { forwardRef } from 'react';
-import { default as TextFieldMaterialUI, TextFieldProps } from '@material-ui/core/TextField';
+import { default as MaterialUITextField, TextFieldProps } from '@material-ui/core/TextField';
// The default element type of MUI's TextField is 'div'
type TextFieldRef = HTMLElementTagNameMap['div'];
@@ -8,7 +8,7 @@ type TextFieldRef = HTMLElementTagNameMap['div'];
// eslint-disable-next-line react/display-name
const TextField = forwardRef(function ToolTip({ InputProps, classes, ...props }, ref) {
return (
- (function ToolTip(props, ref) {
- return ;
+ return ;
});
export default Tooltip;
diff --git a/src/pages/Version/Version.test.tsx b/src/pages/Version/Version.test.tsx
index c66d383..732615d 100644
--- a/src/pages/Version/Version.test.tsx
+++ b/src/pages/Version/Version.test.tsx
@@ -10,7 +10,7 @@ import { waitForElement } from '@testing-library/dom';
import ErrorBoundary from '../../App/AppError';
// :-) we mock this otherways fails on render, some weird issue on material-ui
-jest.mock('@material-ui/core/Avatar');
+jest.mock('../../muiComponents/Avatar');
// eslint-disable-next-line react/display-name
jest.mock('../../components/NotFound', () => () => {'Not found'}
);