cubetiq/verdaccio-ui
1
0
Fork 0
forked from sombochea/verdaccio-ui
Code Issues Pull Requests Releases Wiki Activity

Refactor: Updated developers component structure (#360)

Browse Source
This commit is contained in:
Priscila Oliveira 2019-12-17 22:57:53 -03:00 committed by GitHub
parent eef2913dd5
commit 3a9f66c023
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 699 additions and 713 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/AvatarTooltip/AvatarTooltip.tsx
View File

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

4
src/components/AvatarTooltip/index.ts
View File

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

8
src/components/DetailSidebar/DetailSidebar.tsx
View File

@ -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()}
{renderContributors()}
<Developers type={DeveloperType.MAINTAINERS} />
<Developers type={DeveloperType.CONTRIBUTORS} />
</CardContent>
</Card>
</div>

15
src/components/Developers/Developers.test.tsx
View File

@ -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 { Fab } from './styles';
import Developers, { DeveloperType, Fab } from './Developers';
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>
);

95
src/components/Developers/Developers.tsx
View File

@ -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 [visibleDevs, setVisibleDevs] = React.useState<number>(visibleMax || VISIBLE_MAX);
const { packageMeta } = React.useContext(DetailContext);
const Developers: React.FC<Props> = ({ type, visibleMax = VISIBLE_MAX }) => {
const detailContext = useContext(DetailContext);
const handleLoadMore = (): void => {
setVisibleDevs(visibleDevs + VISIBLE_MAX);
};
if (!detailContext) {
throw Error("The app's detail Context was not correct used");
}
const renderDeveloperDetails = ({ name, avatar, email }, packageMeta): JSX.Element => {
const { name: packageName, version } = packageMeta.latest;
const developers = useMemo(() => getUniqueDeveloperValues(detailContext.packageMeta?.latest[type]), [
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 => {
const listVisibleDevelopers = developers.slice(0, visibleDevs);
useEffect(() => {
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>
{listVisibleDevelopers.map(developer => (
<Details key={developer.email}>{renderDeveloperDetails(developer, packageMeta)}</Details>
<StyledBox display="flex" flexWrap="wrap" margin="10px 0 10px 0">
{visibleDevelopers.map(visibleDeveloper => (
<Tooltip key={visibleDeveloper.email} title={visibleDeveloper.name}>
<Avatar alt={visibleDeveloper.name} src={visibleDeveloper.avatar} />
</Tooltip>
))}
{visibleDevs < developers.length && (
<Fab onClick={handleLoadMore} size="small">
{visibleDevelopersMax < developers.length && (
<Fab onClick={handleSetVisibleDevelopersMax} size="small">
<Add />
</Fab>
)}
</Content>
</Fragment>
</StyledBox>
</>
);
};
const developerList = packageMeta && packageMeta.latest[type];
if (!developerList || developerList.length === 0) {
return null;
}
return renderDevelopers(developerList, packageMeta);
};
export default Developers;

378
src/components/Developers/__snapshots__/Developers.test.tsx.snap
View File

@ -7,35 +7,10 @@ exports[`test Developers should render the component for contributors with items
text-transform: capitalize;
}
.emotion-12 {
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 > * {
.emotion-8 > * {
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>
<div
className="emotion-12 emotion-13"
<StyledBox
display="flex"
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"
>
<WithStyles(ForwardRef(Avatar))
aria-label="dmethvin"
>
<ForwardRef(Avatar)
aria-label="dmethvin"
alt="dmethvin"
aria-describedby={null}
className=""
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>
</span>
</Details>
<Details
<ForwardRef(ToolTip)
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"
>
<WithStyles(ForwardRef(Avatar))
aria-label="mgol"
>
<ForwardRef(Avatar)
aria-label="mgol"
alt="mgol"
aria-describedby={null}
className=""
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 {
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 > * {
.emotion-8 > * {
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>
<div
className="emotion-12 emotion-13"
<StyledBox
display="flex"
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"
>
<WithStyles(ForwardRef(Avatar))
aria-label="dmethvin"
>
<ForwardRef(Avatar)
aria-label="dmethvin"
alt="dmethvin"
aria-describedby={null}
className=""
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>
</span>
</Details>
<Details
<ForwardRef(ToolTip)
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"
>
<WithStyles(ForwardRef(Avatar))
aria-label="mgol"
>
<ForwardRef(Avatar)
aria-label="mgol"
alt="mgol"
aria-describedby={null}
className=""
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>
`;

12
src/components/Developers/get-unique-developer-values.ts Normal file
View File

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

2
src/components/Developers/index.ts
View File

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

7
types/packageMeta.ts
View File

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