forked from conventional-changelog/commitlint
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request conventional-changelog#115 from verdaccio/hooks-fi…
…rst-step hooks first step
- Loading branch information
Showing
13 changed files
with
3,019 additions
and
58 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| import React, { FC } from 'react'; | ||
|
|
||
| import Avatar from '@material-ui/core/Avatar'; | ||
| import Tooltip from '@material-ui/core/Tooltip'; | ||
| import { isEmail } from '../../utils/url'; | ||
|
|
||
| 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, avatarComponent, packageName, version): 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 }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| import { AvatarTooltip } from './AvatarTooltip'; | ||
|
|
||
| export { AvatarTooltip }; | ||
| export default AvatarTooltip; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,104 @@ | ||
| import React from 'react'; | ||
| import { mount } from 'enzyme'; | ||
| import Developers, { DevelopersType } from './Developers'; | ||
| import { Fab } from './styles'; | ||
| import { DetailContextProvider } from '../../pages/version/Version'; | ||
|
|
||
| describe('test Developers', () => { | ||
| const packageMeta = { | ||
| latest: { | ||
| packageName: 'foo', | ||
| version: '1.0.0', | ||
| maintainers: [ | ||
| { | ||
| name: 'dmethvin', | ||
| email: 'dave.methvin@gmail.com', | ||
| }, | ||
| { | ||
| name: 'mgol', | ||
| email: 'm.goleb@gmail.com', | ||
| }, | ||
| ], | ||
| contributors: [ | ||
| { | ||
| name: 'dmethvin', | ||
| email: 'dave.methvin@gmail.com', | ||
| }, | ||
| { | ||
| name: 'mgol', | ||
| email: 'm.goleb@gmail.com', | ||
| }, | ||
| ], | ||
| }, | ||
| }; | ||
|
|
||
| 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} /> | ||
| </DetailContextProvider> | ||
| ); | ||
|
|
||
| expect(wrapper).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| test('should render the component for maintainers with items', () => { | ||
| const type: DevelopersType = 'maintainers'; | ||
| const wrapper = mount( | ||
| // @ts-ignore | ||
| <DetailContextProvider value={{ packageMeta }}> | ||
| <Developers type={type} /> | ||
| </DetailContextProvider> | ||
| ); | ||
|
|
||
| expect(wrapper).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| test('should render the component for contributors with items', () => { | ||
| const type: DevelopersType = 'contributors'; | ||
| const wrapper = mount( | ||
| // @ts-ignore | ||
| <DetailContextProvider value={{ packageMeta }}> | ||
| <Developers type={type} /> | ||
| </DetailContextProvider> | ||
| ); | ||
|
|
||
| expect(wrapper).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| test('should test onClick the component avatar', () => { | ||
| const type: DevelopersType = 'contributors'; | ||
| const packageMeta = { | ||
| latest: { | ||
| packageName: 'foo', | ||
| version: '1.0.0', | ||
| contributors: [ | ||
| { | ||
| name: 'dmethvin', | ||
| email: 'dave.methvin@gmail.com', | ||
| }, | ||
| { | ||
| name: 'dmethvin2', | ||
| email: 'dave2.methvin@gmail.com', | ||
| }, | ||
| ], | ||
| }, | ||
| }; | ||
|
|
||
| const wrapper = mount( | ||
| // @ts-ignore | ||
| <DetailContextProvider value={{ packageMeta }}> | ||
| <Developers type={type} visibleMax={1} /> | ||
| </DetailContextProvider> | ||
| ); | ||
|
|
||
| const item2 = wrapper.find(Fab); | ||
| // TODO: I am not sure here how to verify the method inside the component was called. | ||
| item2.simulate('click'); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,79 +1,59 @@ | ||
| import React, { Component } from 'react'; | ||
|
|
||
| import Avatar from '@material-ui/core/Avatar'; | ||
| import React, { FC, Fragment } from 'react'; | ||
| import Add from '@material-ui/icons/Add'; | ||
| import Tooltip from '@material-ui/core/Tooltip'; | ||
|
|
||
| import { DetailContextConsumer } from '../../pages/version/Version'; | ||
| import { DetailContext } from '../../pages/version/Version'; | ||
| import { AvatarTooltip } from '../AvatarTooltip'; | ||
| import { Details, Heading, Content, Fab } from './styles'; | ||
| import { isEmail } from '../../utils/url'; | ||
|
|
||
| export type DevelopersType = 'contributors' | 'maintainers'; | ||
|
|
||
| interface Props { | ||
| type: 'contributors' | 'maintainers'; | ||
| } | ||
| interface State { | ||
| visibleDevs: number; | ||
| type: DevelopersType; | ||
| visibleMax?: number; | ||
| } | ||
|
|
||
| class Developers extends Component<Props, State> { | ||
| public state = { | ||
| visibleDevs: 6, | ||
| 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 handleLoadMore = () => { | ||
| setVisibleDevs(visibleDevs + VISIBLE_MAX); | ||
| }; | ||
|
|
||
| public render(): JSX.Element { | ||
| return ( | ||
| <DetailContextConsumer> | ||
| {({ packageMeta }) => { | ||
| const { type } = this.props; | ||
| const developerType = packageMeta && packageMeta.latest[type]; | ||
| if (!developerType || developerType.length === 0) return null; | ||
| return this.renderDevelopers(developerType, packageMeta); | ||
| }} | ||
| </DetailContextConsumer> | ||
| ); | ||
| } | ||
| const renderDeveloperDetails = ({ name, avatar, email }, packageMeta) => { | ||
| const { name: packageName, version } = packageMeta.latest; | ||
|
|
||
| public handleLoadMore = () => { | ||
| this.setState(prev => ({ visibleDevs: prev.visibleDevs + 6 })); | ||
| return <AvatarTooltip avatar={avatar} email={email} name={name} packageName={packageName} version={version} />; | ||
| }; | ||
|
|
||
| private renderDevelopers = (developers, packageMeta) => { | ||
| const { type } = this.props; | ||
| const { visibleDevs } = this.state; | ||
| const renderDevelopers = (developers, packageMeta) => { | ||
| const listVisibleDevelopers = developers.slice(0, visibleDevs); | ||
|
|
||
| return ( | ||
| <> | ||
| <Fragment> | ||
| <Heading variant={'subheading'}>{type}</Heading> | ||
| <Content> | ||
| {developers.slice(0, visibleDevs).map(developer => ( | ||
| <Details key={developer.email}>{this.renderDeveloperDetails(developer, packageMeta)}</Details> | ||
| {listVisibleDevelopers.map(developer => ( | ||
| <Details key={developer.email}>{renderDeveloperDetails(developer, packageMeta)}</Details> | ||
| ))} | ||
| {visibleDevs < developers.length && ( | ||
| <Fab onClick={this.handleLoadMore} size="small"> | ||
| <Fab onClick={handleLoadMore} size="small"> | ||
| <Add /> | ||
| </Fab> | ||
| )} | ||
| </Content> | ||
| </> | ||
| </Fragment> | ||
| ); | ||
| }; | ||
|
|
||
| private renderLinkForMail(email, avatarComponent, packageName, version): JSX.Element { | ||
| if (!email || isEmail(email) === false) { | ||
| return avatarComponent; | ||
| } | ||
| return ( | ||
| <a href={`mailto:${email}?subject=${packageName}@${version}`} target={'_top'}> | ||
| {avatarComponent} | ||
| </a> | ||
| ); | ||
| const developerList = packageMeta && packageMeta.latest[type]; | ||
| if (!developerList || developerList.length === 0) { | ||
| return null; | ||
| } | ||
|
|
||
| private renderDeveloperDetails = ({ name, avatar, email }, packageMeta) => { | ||
| const { name: packageName, version } = packageMeta.latest; | ||
|
|
||
| const avatarComponent = <Avatar aria-label={name} src={avatar} />; | ||
| return <Tooltip title={name}>{this.renderLinkForMail(email, avatarComponent, packageName, version)}</Tooltip>; | ||
| }; | ||
| } | ||
| return renderDevelopers(developerList, packageMeta); | ||
| }; | ||
|
|
||
| export default Developers; |
Oops, something went wrong.