Refactor: Updated developers component structure (#360)

src/components/AvatarTooltip/AvatarTooltip.tsx

@@ -1,37 +0,0 @@
-import React, { FC } from 'react';
-
-import { isEmail } from '../../utils/url';
-import Tooltip from '../../muiComponents/Tooltip';
-import Avatar from '../../muiComponents/Avatar';
-
-export interface AvatarDeveloper {
-  name: string;
-  packageName: string;
-  version: string;
-  avatar: string;
-  email: string;
-}
-
-const AvatarTooltip: FC<AvatarDeveloper> = ({ name, packageName, version, avatar, email }) => {
-  const avatarComponent = <Avatar aria-label={name} src={avatar} />;
-  function renderLinkForMail(
-    email: string,
-    avatarComponent: JSX.Element,
-    packageName: string,
-    version: string
-  ): JSX.Element {
-    if (!email || isEmail(email) === false) {
-      return avatarComponent;
-    }
-
-    return (
-      <a href={`mailto:${email}?subject=${packageName}@${version}`} target={'_top'}>
-        {avatarComponent}
-      </a>
-    );
-  }
-
-  return <Tooltip title={name}>{renderLinkForMail(email, avatarComponent, packageName, version)}</Tooltip>;
-};
-
-export { AvatarTooltip };

src/components/AvatarTooltip/index.ts

@@ -1,4 +0,0 @@
-import { AvatarTooltip } from './AvatarTooltip';
-
-export { AvatarTooltip };
-export default AvatarTooltip;

src/components/DetailSidebar/DetailSidebar.tsx

@@ -2,7 +2,7 @@ import React, { ReactElement } from 'react';
 
 import ActionBar from '../ActionBar';
 import Author from '../Author';
-import Developers from '../Developers';
+import Developers, { DeveloperType } from '../Developers';
 import Dist from '../Dist/Dist';
 import Engine from '../Engines/Engines';
 import Install from '../Install';
@@ -28,8 +28,6 @@ const renderLatestDescription = (description, version, isLatest = true): JSX.Ele
 };
 
 const renderCopyCLI = (): JSX.Element => <Install />;
-const renderMaintainers = (): JSX.Element => <Developers type="maintainers" />;
-const renderContributors = (): JSX.Element => <Developers type="contributors" />;
 const renderRepository = (): JSX.Element => <Repository />;
 const renderAuthor = (): JSX.Element => <Author />;
 const renderEngine = (): JSX.Element => <Engine />;
@@ -63,8 +61,8 @@ function renderSideBar(packageName, packageVersion, packageMeta): ReactElement<H
           {renderEngine()}
           {renderDist()}
           {renderAuthor()}
-          {renderMaintainers()}
+          <Developers type={DeveloperType.MAINTAINERS} />
-          {renderContributors()}
+          <Developers type={DeveloperType.CONTRIBUTORS} />
         </CardContent>
       </Card>
     </div>

src/components/Developers/Developers.test.tsx

@@ -3,8 +3,7 @@ import React from 'react';
 import { mount } from '../../utils/test-enzyme';
 import { DetailContextProvider } from '../../pages/Version';
 
-import Developers, { DevelopersType } from './Developers';
+import Developers, { DeveloperType, Fab } from './Developers';
-import { Fab } from './styles';
 
 describe('test Developers', () => {
   const packageMeta = {
@@ -35,14 +34,13 @@ describe('test Developers', () => {
   };
 
   test('should render the component with no items', () => {
-    const type: DevelopersType = 'maintainers';
     const packageMeta = {
       latest: {},
     };
     const wrapper = mount(
       // @ts-ignore
       <DetailContextProvider value={{ packageMeta }}>
-        <Developers type={type} />
+        <Developers type={DeveloperType.MAINTAINERS} />
       </DetailContextProvider>
     );
 
@@ -50,11 +48,10 @@ describe('test Developers', () => {
   });
 
   test('should render the component for maintainers with items', () => {
-    const type: DevelopersType = 'maintainers';
     const wrapper = mount(
       // @ts-ignore
       <DetailContextProvider value={{ packageMeta }}>
-        <Developers type={type} />
+        <Developers type={DeveloperType.MAINTAINERS} />
       </DetailContextProvider>
     );
 
@@ -62,11 +59,10 @@ describe('test Developers', () => {
   });
 
   test('should render the component for contributors with items', () => {
-    const type: DevelopersType = 'contributors';
     const wrapper = mount(
       // @ts-ignore
       <DetailContextProvider value={{ packageMeta }}>
-        <Developers type={type} />
+        <Developers type={DeveloperType.CONTRIBUTORS} />
       </DetailContextProvider>
     );
 
@@ -74,7 +70,6 @@ describe('test Developers', () => {
   });
 
   test('should test onClick the component avatar', () => {
-    const type: DevelopersType = 'contributors';
     const packageMeta = {
       latest: {
         packageName: 'foo',
@@ -95,7 +90,7 @@ describe('test Developers', () => {
     const wrapper = mount(
       // @ts-ignore
       <DetailContextProvider value={{ packageMeta }}>
-        <Developers type={type} visibleMax={1} />
+        <Developers type={DeveloperType.CONTRIBUTORS} visibleMax={1} />
       </DetailContextProvider>
     );
 

src/components/Developers/Developers.tsx

@@ -1,60 +1,89 @@
-import React, { FC, Fragment } from 'react';
+import React, { useState, useCallback, useContext, useEffect, useMemo } from 'react';
 import Add from '@material-ui/icons/Add';
+import styled from '@emotion/styled';
 
 import { DetailContext } from '../../pages/Version';
-import { AvatarTooltip } from '../AvatarTooltip';
+import Tooltip from '../../muiComponents/Tooltip';
+import Avatar from '../../muiComponents/Avatar';
+import Box from '../../muiComponents/Box';
+import Text from '../../muiComponents/Text';
+import FloatingActionButton from '../../muiComponents/FloatingActionButton';
+import { Theme } from '../../design-tokens/theme';
 
-import { Details, StyledText, Content, Fab } from './styles';
+import getUniqueDeveloperValues from './get-unique-developer-values';
 
-export type DevelopersType = 'contributors' | 'maintainers';
+export const Fab = styled(FloatingActionButton)<{ theme?: Theme }>(props => ({
+  backgroundColor: props.theme && props.theme.palette.primary.main,
+  color: props.theme && props.theme.palette.white,
+}));
+
+export enum DeveloperType {
+  CONTRIBUTORS = 'contributors',
+  MAINTAINERS = 'maintainers',
+}
 
 interface Props {
-  type: DevelopersType;
+  type: DeveloperType;
   visibleMax?: number;
 }
 
+export const StyledText = styled(Text)<{ theme?: Theme }>(({ theme }) => ({
+  fontWeight: theme && theme.fontWeight.bold,
+  marginBottom: '10px',
+  textTransform: 'capitalize',
+}));
+
+const StyledBox = styled(Box)({
+  '> *': {
+    margin: 5,
+  },
+});
+
 export const VISIBLE_MAX = 6;
 
-const Developers: FC<Props> = ({ type, visibleMax }) => {
+const Developers: React.FC<Props> = ({ type, visibleMax = VISIBLE_MAX }) => {
-  const [visibleDevs, setVisibleDevs] = React.useState<number>(visibleMax || VISIBLE_MAX);
+  const detailContext = useContext(DetailContext);
-  const { packageMeta } = React.useContext(DetailContext);
 
-  const handleLoadMore = (): void => {
+  if (!detailContext) {
-    setVisibleDevs(visibleDevs + VISIBLE_MAX);
+    throw Error("The app's detail Context was not correct used");
-  };
+  }
 
-  const renderDeveloperDetails = ({ name, avatar, email }, packageMeta): JSX.Element => {
+  const developers = useMemo(() => getUniqueDeveloperValues(detailContext.packageMeta?.latest[type]), [
-    const { name: packageName, version } = packageMeta.latest;
+    detailContext.packageMeta,
+    type,
+  ]);
 
-    return <AvatarTooltip avatar={avatar} email={email} name={name} packageName={packageName} version={version} />;
+  const [visibleDevelopersMax, setVisibleDevelopersMax] = useState(visibleMax);
-  };
+  const [visibleDevelopers, setVisibleDevelopers] = useState(developers);
 
-  const renderDevelopers = (developers, packageMeta): JSX.Element => {
+  useEffect(() => {
-    const listVisibleDevelopers = developers.slice(0, visibleDevs);
+    if (!developers) return;
+    setVisibleDevelopers(developers.slice(0, visibleDevelopersMax));
+  }, [developers, visibleDevelopersMax]);
+
+  const handleSetVisibleDevelopersMax = useCallback(() => {
+    setVisibleDevelopersMax(visibleDevelopersMax + VISIBLE_MAX);
+  }, [visibleDevelopersMax]);
+
+  if (!visibleDevelopers || !developers) return null;
 
   return (
-      <Fragment>
+    <>
       <StyledText variant={'subtitle1'}>{type}</StyledText>
-        <Content>
+      <StyledBox display="flex" flexWrap="wrap" margin="10px 0 10px 0">
-          {listVisibleDevelopers.map(developer => (
+        {visibleDevelopers.map(visibleDeveloper => (
-            <Details key={developer.email}>{renderDeveloperDetails(developer, packageMeta)}</Details>
+          <Tooltip key={visibleDeveloper.email} title={visibleDeveloper.name}>
+            <Avatar alt={visibleDeveloper.name} src={visibleDeveloper.avatar} />
+          </Tooltip>
         ))}
-          {visibleDevs < developers.length && (
+        {visibleDevelopersMax < developers.length && (
-            <Fab onClick={handleLoadMore} size="small">
+          <Fab onClick={handleSetVisibleDevelopersMax} size="small">
             <Add />
           </Fab>
         )}
-        </Content>
+      </StyledBox>
-      </Fragment>
+    </>
   );
 };
 
-  const developerList = packageMeta && packageMeta.latest[type];
-  if (!developerList || developerList.length === 0) {
-    return null;
-  }
-
-  return renderDevelopers(developerList, packageMeta);
-};
-
 export default Developers;

src/components/Developers/__snapshots__/Developers.test.tsx.snap

@@ -7,35 +7,10 @@ exports[`test Developers should render the component for contributors with items
   text-transform: capitalize;
 }
 
-.emotion-12 {
+.emotion-8 > * {
-  margin: 10px 0 10px 0;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-}
-
-.emotion-12 > * {
   margin: 5px;
 }
 
-.emotion-8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
 <Developers
   type="contributors"
 >
@@ -97,22 +72,28 @@ exports[`test Developers should render the component for contributors with items
       </WithStyles(ForwardRef(Typography))>
     </ForwardRef(Text)>
   </StyledText>
-  <Content>
+  <StyledBox
-    <div
+    display="flex"
-      className="emotion-12 emotion-13"
+    flexWrap="wrap"
+    margin="10px 0 10px 0"
   >
-      <Details
+    <Box
+      className="emotion-8 emotion-9"
+      display="flex"
+      flexWrap="wrap"
+      margin="10px 0 10px 0"
+    >
+      <Styled(MuiBox)
+        className="emotion-8 emotion-9"
+        display="flex"
+        flexWrap="wrap"
+        margin="10px 0 10px 0"
+      >
+        <div
+          className="MuiBox-root MuiBox-root-60 emotion-8 emotion-9"
+        >
+          <ForwardRef(ToolTip)
             key="dave.methvin@gmail.com"
-      >
-        <span
-          className="emotion-8 emotion-9"
-        >
-          <AvatarTooltip
-            email="dave.methvin@gmail.com"
-            name="dmethvin"
-            version="1.0.0"
-          >
-            <ForwardRef(ToolTip)
             title="dmethvin"
           >
             <WithStyles(ForwardRef(Tooltip))
@@ -137,27 +118,34 @@ exports[`test Developers should render the component for contributors with items
                 }
                 title="dmethvin"
               >
-                  <a
+                <ForwardRef(Avatar)
+                  alt="dmethvin"
+                  aria-describedby={null}
+                  className=""
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseLeave={[Function]}
+                  onMouseOver={[Function]}
+                  onTouchEnd={[Function]}
+                  onTouchStart={[Function]}
+                  title="dmethvin"
+                >
+                  <WithStyles(ForwardRef(Avatar))
+                    alt="dmethvin"
                     aria-describedby={null}
                     className=""
-                    href="mailto:dave.methvin@gmail.com?subject=undefined@1.0.0"
                     onBlur={[Function]}
                     onFocus={[Function]}
                     onMouseLeave={[Function]}
                     onMouseOver={[Function]}
                     onTouchEnd={[Function]}
                     onTouchStart={[Function]}
-                    target="_top"
                     title="dmethvin"
                   >
                     <ForwardRef(Avatar)
-                      aria-label="dmethvin"
+                      alt="dmethvin"
-                    >
+                      aria-describedby={null}
-                      <WithStyles(ForwardRef(Avatar))
+                      className=""
-                        aria-label="dmethvin"
-                      >
-                        <ForwardRef(Avatar)
-                          aria-label="dmethvin"
                       classes={
                         Object {
                           "circle": "MuiAvatar-circle",
@@ -169,10 +157,24 @@ exports[`test Developers should render the component for contributors with items
                           "square": "MuiAvatar-square",
                         }
                       }
+                      onBlur={[Function]}
+                      onFocus={[Function]}
+                      onMouseLeave={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      onTouchStart={[Function]}
+                      title="dmethvin"
                     >
                       <div
-                            aria-label="dmethvin"
+                        aria-describedby={null}
                         className="MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault"
+                        onBlur={[Function]}
+                        onFocus={[Function]}
+                        onMouseLeave={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        onTouchStart={[Function]}
+                        title="dmethvin"
                       >
                         <ForwardRef
                           className="MuiAvatar-fallback"
@@ -214,18 +216,11 @@ exports[`test Developers should render the component for contributors with items
                     </ForwardRef(Avatar)>
                   </WithStyles(ForwardRef(Avatar))>
                 </ForwardRef(Avatar)>
-                  </a>
                 <ForwardRef(Popper)
                   anchorEl={
-                      <a
-                        class=""
-                        href="mailto:dave.methvin@gmail.com?subject=undefined@1.0.0"
-                        target="_top"
-                        title="dmethvin"
-                      >
                     <div
-                          aria-label="dmethvin"
                       class="MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault"
+                      title="dmethvin"
                     >
                       <svg
                         aria-hidden="true"
@@ -239,7 +234,6 @@ exports[`test Developers should render the component for contributors with items
                         />
                       </svg>
                     </div>
-                      </a>
                   }
                   className="MuiTooltip-popper"
                   id={null}
@@ -260,21 +254,8 @@ exports[`test Developers should render the component for contributors with items
               </ForwardRef(Tooltip)>
             </WithStyles(ForwardRef(Tooltip))>
           </ForwardRef(ToolTip)>
-          </AvatarTooltip>
+          <ForwardRef(ToolTip)
-        </span>
-      </Details>
-      <Details
             key="m.goleb@gmail.com"
-      >
-        <span
-          className="emotion-8 emotion-9"
-        >
-          <AvatarTooltip
-            email="m.goleb@gmail.com"
-            name="mgol"
-            version="1.0.0"
-          >
-            <ForwardRef(ToolTip)
             title="mgol"
           >
             <WithStyles(ForwardRef(Tooltip))
@@ -299,27 +280,34 @@ exports[`test Developers should render the component for contributors with items
                 }
                 title="mgol"
               >
-                  <a
+                <ForwardRef(Avatar)
+                  alt="mgol"
+                  aria-describedby={null}
+                  className=""
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseLeave={[Function]}
+                  onMouseOver={[Function]}
+                  onTouchEnd={[Function]}
+                  onTouchStart={[Function]}
+                  title="mgol"
+                >
+                  <WithStyles(ForwardRef(Avatar))
+                    alt="mgol"
                     aria-describedby={null}
                     className=""
-                    href="mailto:m.goleb@gmail.com?subject=undefined@1.0.0"
                     onBlur={[Function]}
                     onFocus={[Function]}
                     onMouseLeave={[Function]}
                     onMouseOver={[Function]}
                     onTouchEnd={[Function]}
                     onTouchStart={[Function]}
-                    target="_top"
                     title="mgol"
                   >
                     <ForwardRef(Avatar)
-                      aria-label="mgol"
+                      alt="mgol"
-                    >
+                      aria-describedby={null}
-                      <WithStyles(ForwardRef(Avatar))
+                      className=""
-                        aria-label="mgol"
-                      >
-                        <ForwardRef(Avatar)
-                          aria-label="mgol"
                       classes={
                         Object {
                           "circle": "MuiAvatar-circle",
@@ -331,10 +319,24 @@ exports[`test Developers should render the component for contributors with items
                           "square": "MuiAvatar-square",
                         }
                       }
+                      onBlur={[Function]}
+                      onFocus={[Function]}
+                      onMouseLeave={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      onTouchStart={[Function]}
+                      title="mgol"
                     >
                       <div
-                            aria-label="mgol"
+                        aria-describedby={null}
                         className="MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault"
+                        onBlur={[Function]}
+                        onFocus={[Function]}
+                        onMouseLeave={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        onTouchStart={[Function]}
+                        title="mgol"
                       >
                         <ForwardRef
                           className="MuiAvatar-fallback"
@@ -376,18 +378,11 @@ exports[`test Developers should render the component for contributors with items
                     </ForwardRef(Avatar)>
                   </WithStyles(ForwardRef(Avatar))>
                 </ForwardRef(Avatar)>
-                  </a>
                 <ForwardRef(Popper)
                   anchorEl={
-                      <a
-                        class=""
-                        href="mailto:m.goleb@gmail.com?subject=undefined@1.0.0"
-                        target="_top"
-                        title="mgol"
-                      >
                     <div
-                          aria-label="mgol"
                       class="MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault"
+                      title="mgol"
                     >
                       <svg
                         aria-hidden="true"
@@ -401,7 +396,6 @@ exports[`test Developers should render the component for contributors with items
                         />
                       </svg>
                     </div>
-                      </a>
                   }
                   className="MuiTooltip-popper"
                   id={null}
@@ -422,11 +416,10 @@ exports[`test Developers should render the component for contributors with items
               </ForwardRef(Tooltip)>
             </WithStyles(ForwardRef(Tooltip))>
           </ForwardRef(ToolTip)>
-          </AvatarTooltip>
-        </span>
-      </Details>
         </div>
-  </Content>
+      </Styled(MuiBox)>
+    </Box>
+  </StyledBox>
 </Developers>
 `;
 
@@ -437,35 +430,10 @@ exports[`test Developers should render the component for maintainers with items
   text-transform: capitalize;
 }
 
-.emotion-12 {
+.emotion-8 > * {
-  margin: 10px 0 10px 0;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-}
-
-.emotion-12 > * {
   margin: 5px;
 }
 
-.emotion-8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
 <Developers
   type="maintainers"
 >
@@ -527,22 +495,28 @@ exports[`test Developers should render the component for maintainers with items
       </WithStyles(ForwardRef(Typography))>
     </ForwardRef(Text)>
   </StyledText>
-  <Content>
+  <StyledBox
-    <div
+    display="flex"
-      className="emotion-12 emotion-13"
+    flexWrap="wrap"
+    margin="10px 0 10px 0"
   >
-      <Details
+    <Box
+      className="emotion-8 emotion-9"
+      display="flex"
+      flexWrap="wrap"
+      margin="10px 0 10px 0"
+    >
+      <Styled(MuiBox)
+        className="emotion-8 emotion-9"
+        display="flex"
+        flexWrap="wrap"
+        margin="10px 0 10px 0"
+      >
+        <div
+          className="MuiBox-root MuiBox-root-32 emotion-8 emotion-9"
+        >
+          <ForwardRef(ToolTip)
             key="dave.methvin@gmail.com"
-      >
-        <span
-          className="emotion-8 emotion-9"
-        >
-          <AvatarTooltip
-            email="dave.methvin@gmail.com"
-            name="dmethvin"
-            version="1.0.0"
-          >
-            <ForwardRef(ToolTip)
             title="dmethvin"
           >
             <WithStyles(ForwardRef(Tooltip))
@@ -567,27 +541,34 @@ exports[`test Developers should render the component for maintainers with items
                 }
                 title="dmethvin"
               >
-                  <a
+                <ForwardRef(Avatar)
+                  alt="dmethvin"
+                  aria-describedby={null}
+                  className=""
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseLeave={[Function]}
+                  onMouseOver={[Function]}
+                  onTouchEnd={[Function]}
+                  onTouchStart={[Function]}
+                  title="dmethvin"
+                >
+                  <WithStyles(ForwardRef(Avatar))
+                    alt="dmethvin"
                     aria-describedby={null}
                     className=""
-                    href="mailto:dave.methvin@gmail.com?subject=undefined@1.0.0"
                     onBlur={[Function]}
                     onFocus={[Function]}
                     onMouseLeave={[Function]}
                     onMouseOver={[Function]}
                     onTouchEnd={[Function]}
                     onTouchStart={[Function]}
-                    target="_top"
                     title="dmethvin"
                   >
                     <ForwardRef(Avatar)
-                      aria-label="dmethvin"
+                      alt="dmethvin"
-                    >
+                      aria-describedby={null}
-                      <WithStyles(ForwardRef(Avatar))
+                      className=""
-                        aria-label="dmethvin"
-                      >
-                        <ForwardRef(Avatar)
-                          aria-label="dmethvin"
                       classes={
                         Object {
                           "circle": "MuiAvatar-circle",
@@ -599,10 +580,24 @@ exports[`test Developers should render the component for maintainers with items
                           "square": "MuiAvatar-square",
                         }
                       }
+                      onBlur={[Function]}
+                      onFocus={[Function]}
+                      onMouseLeave={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      onTouchStart={[Function]}
+                      title="dmethvin"
                     >
                       <div
-                            aria-label="dmethvin"
+                        aria-describedby={null}
                         className="MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault"
+                        onBlur={[Function]}
+                        onFocus={[Function]}
+                        onMouseLeave={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        onTouchStart={[Function]}
+                        title="dmethvin"
                       >
                         <ForwardRef
                           className="MuiAvatar-fallback"
@@ -644,18 +639,11 @@ exports[`test Developers should render the component for maintainers with items
                     </ForwardRef(Avatar)>
                   </WithStyles(ForwardRef(Avatar))>
                 </ForwardRef(Avatar)>
-                  </a>
                 <ForwardRef(Popper)
                   anchorEl={
-                      <a
-                        class=""
-                        href="mailto:dave.methvin@gmail.com?subject=undefined@1.0.0"
-                        target="_top"
-                        title="dmethvin"
-                      >
                     <div
-                          aria-label="dmethvin"
                       class="MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault"
+                      title="dmethvin"
                     >
                       <svg
                         aria-hidden="true"
@@ -669,7 +657,6 @@ exports[`test Developers should render the component for maintainers with items
                         />
                       </svg>
                     </div>
-                      </a>
                   }
                   className="MuiTooltip-popper"
                   id={null}
@@ -690,21 +677,8 @@ exports[`test Developers should render the component for maintainers with items
               </ForwardRef(Tooltip)>
             </WithStyles(ForwardRef(Tooltip))>
           </ForwardRef(ToolTip)>
-          </AvatarTooltip>
+          <ForwardRef(ToolTip)
-        </span>
-      </Details>
-      <Details
             key="m.goleb@gmail.com"
-      >
-        <span
-          className="emotion-8 emotion-9"
-        >
-          <AvatarTooltip
-            email="m.goleb@gmail.com"
-            name="mgol"
-            version="1.0.0"
-          >
-            <ForwardRef(ToolTip)
             title="mgol"
           >
             <WithStyles(ForwardRef(Tooltip))
@@ -729,27 +703,34 @@ exports[`test Developers should render the component for maintainers with items
                 }
                 title="mgol"
               >
-                  <a
+                <ForwardRef(Avatar)
+                  alt="mgol"
+                  aria-describedby={null}
+                  className=""
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseLeave={[Function]}
+                  onMouseOver={[Function]}
+                  onTouchEnd={[Function]}
+                  onTouchStart={[Function]}
+                  title="mgol"
+                >
+                  <WithStyles(ForwardRef(Avatar))
+                    alt="mgol"
                     aria-describedby={null}
                     className=""
-                    href="mailto:m.goleb@gmail.com?subject=undefined@1.0.0"
                     onBlur={[Function]}
                     onFocus={[Function]}
                     onMouseLeave={[Function]}
                     onMouseOver={[Function]}
                     onTouchEnd={[Function]}
                     onTouchStart={[Function]}
-                    target="_top"
                     title="mgol"
                   >
                     <ForwardRef(Avatar)
-                      aria-label="mgol"
+                      alt="mgol"
-                    >
+                      aria-describedby={null}
-                      <WithStyles(ForwardRef(Avatar))
+                      className=""
-                        aria-label="mgol"
-                      >
-                        <ForwardRef(Avatar)
-                          aria-label="mgol"
                       classes={
                         Object {
                           "circle": "MuiAvatar-circle",
@@ -761,10 +742,24 @@ exports[`test Developers should render the component for maintainers with items
                           "square": "MuiAvatar-square",
                         }
                       }
+                      onBlur={[Function]}
+                      onFocus={[Function]}
+                      onMouseLeave={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      onTouchStart={[Function]}
+                      title="mgol"
                     >
                       <div
-                            aria-label="mgol"
+                        aria-describedby={null}
                         className="MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault"
+                        onBlur={[Function]}
+                        onFocus={[Function]}
+                        onMouseLeave={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        onTouchStart={[Function]}
+                        title="mgol"
                       >
                         <ForwardRef
                           className="MuiAvatar-fallback"
@@ -806,18 +801,11 @@ exports[`test Developers should render the component for maintainers with items
                     </ForwardRef(Avatar)>
                   </WithStyles(ForwardRef(Avatar))>
                 </ForwardRef(Avatar)>
-                  </a>
                 <ForwardRef(Popper)
                   anchorEl={
-                      <a
-                        class=""
-                        href="mailto:m.goleb@gmail.com?subject=undefined@1.0.0"
-                        target="_top"
-                        title="mgol"
-                      >
                     <div
-                          aria-label="mgol"
                       class="MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault"
+                      title="mgol"
                     >
                       <svg
                         aria-hidden="true"
@@ -831,7 +819,6 @@ exports[`test Developers should render the component for maintainers with items
                         />
                       </svg>
                     </div>
-                      </a>
                   }
                   className="MuiTooltip-popper"
                   id={null}
@@ -852,11 +839,10 @@ exports[`test Developers should render the component for maintainers with items
               </ForwardRef(Tooltip)>
             </WithStyles(ForwardRef(Tooltip))>
           </ForwardRef(ToolTip)>
-          </AvatarTooltip>
-        </span>
-      </Details>
         </div>
-  </Content>
+      </Styled(MuiBox)>
+    </Box>
+  </StyledBox>
 </Developers>
 `;
 

src/components/Developers/get-unique-developer-values.ts

@@ -0,0 +1,12 @@
+import { Developer } from '../../../types/packageMeta';
+
+function getUniqueDeveloperValues(developers?: Array<Developer>): undefined | Array<Developer> {
+  if (!developers) return;
+  return developers.reduce(
+    (accumulator: Array<Developer>, current: Developer) =>
+      accumulator.some(developer => developer.email === current.email) ? accumulator : [...accumulator, current],
+    []
+  );
+}
+
+export default getUniqueDeveloperValues;

src/components/Developers/index.ts

@@ -1 +1 @@
-export { default } from './Developers';
+export { default, DeveloperType } from './Developers';

types/packageMeta.ts

@@ -24,9 +24,16 @@ export interface PackageMetaInterface {
       type?: string;
       url?: string;
     };
+    maintainers?: Array<Developer>;
+    contributors?: Array<Developer>;
   };
   _uplinks: {};
 }
+export interface Developer {
+  name: string;
+  email: string;
+  avatar: string;
+}
 
 interface LicenseInterface {
   type: string;