Infrastructure/verdaccio
0
Fork 0
mirror of https://github.com/verdaccio/verdaccio.git synced 2024-12-23 22:27:34 -05:00
Code Issues Activity

Merge branch 'feat-new-detail-page' of github.com:verdaccio/verdaccio into feat-new-detail-page

Browse source
This commit is contained in:
Priscila Oliveira 2019-01-20 17:15:45 +01:00
commit 8c06f968f9
9 changed files with 316 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
src/webui/components/Author/index.js Normal file
View file

@ -0,0 +1,54 @@
/* eslint no-unused-vars: 0 */
import React, {Component, Fragment} from 'react';
import { DetailContextConsumer } from '../../pages/version/index';
import Card from '@material-ui/core/Card/index';
import CardContent from '@material-ui/core/CardContent/index';
import CopyToClipBoard from '../CopyToClipBoard';
import CardHeader from '@material-ui/core/CardHeader/index';
import Avatar from '@material-ui/core/Avatar';
import CardActions from '@material-ui/core/CardActions';
import Typography from "@material-ui/core/Typography/index";
class Authors extends Component<any, any> {
render() {
return (
<DetailContextConsumer>
{(context) => {
return this.renderAuthor(context);
}}
</DetailContextConsumer>
);
};
renderAuthor = ({packageMeta}) => {
const { author } = packageMeta.latest;
if (!author) {
return null;
}
return (
<Card>
<CardContent>
{this.renderAvatar(author)}
</CardContent>
</Card>
);
}
renderAvatar = ({name, email, url, avatar}) => {
return (
<Fragment>
<Avatar aria-label={name} src={avatar} />
<Typography color={"textPrimary"} gutterBottom={true} variant={'caption'}>
{name}
</Typography>
</Fragment>
);
}
}
export default Authors;

100
src/webui/components/DetailSidebar/index.js
View file

@ -1,19 +1,14 @@
/* eslint react/jsx-max-depth: 0 */
import React, {Component} from 'react';
import React, {Component, Fragment} from 'react';
import { DetailContextConsumer } from '../../pages/version/index';
// import Paper from '@material-ui/core/Paper/index';
import Typography from '@material-ui/core/Typography/index';
import Grid from '@material-ui/core/Grid/index';
// import CardHeader from '@material-ui/core/CardHeader';
import Card from '@material-ui/core/Card/index';
import CardContent from '@material-ui/core/CardContent/index';
import Install from '../Install';
import { Content } from './styles';
import CopyToClipBoard from '../CopyToClipBoard';
import Button from '@material-ui/core/Button';
import CardActions from '@material-ui/core/CardActions';
// import Paper from '@material-ui/core/Paper/index';
import Authors from '../Author';
import License from '../License';
import Repository from '../Repository';
class DetailSidebar extends Component<any, any> {
render() {
@ -28,45 +23,64 @@ class DetailSidebar extends Component<any, any> {
renderSideBar = ({packageMeta, packageName}) => {
return (
<React.Fragment>
{this.renderDescription(packageMeta, packageName)}
<Content>
<Grid container={true} spacing={24}>
<Grid item={true} xs={12}>
<Typography color={"textPrimary"} gutterBottom={true} variant={'title'}>
{packageName}
</Typography>
<Typography color={"textSecondary"} gutterBottom={true} variant={'body2'}>
{packageMeta.latest.description}
</Typography>
</Grid>
<Grid item={true} xs={12}>
<Card>
<CardContent>
<CopyToClipBoard text={`npm install ${packageName}`} />
<CopyToClipBoard text={`pnpm install ${packageName}`} />
<CopyToClipBoard text={`yarn add ${packageName}`} />
<CardActions>
<Button color={"primary"} size={'small'} variant={"contained"}>
{'Download Tarball'}
</Button>
</CardActions>
</CardContent>
</Card>
</Grid>
<Content>
<Grid container={true} spacing={24}>
<Grid item={true} xs={12}>
{this.renderTitle(packageName, packageMeta)}
</Grid>
</Content>
</React.Fragment>
<Grid item={true} xs={12}>
{this.renderCopyCLI()}
</Grid>
<Grid item={true} xs={12}>
{this.renderSecondLevel(8)}
</Grid>
<Grid item={true} xs={12}>
{this.renderRepository()}
</Grid>
</Grid>
</Content>
);
}
renderDescription = (packageMeta) => {
console.log('packageMeta', packageMeta);
renderTitle = (packageName, packageMeta) => {
return (
<React.Fragment>
<Typography color={"textPrimary"} gutterBottom={true} variant={'title'}>
{packageName}
</Typography>
<Typography color={"textSecondary"} gutterBottom={true} variant={'body2'}>
{packageMeta.latest.description}
</Typography>
</React.Fragment>
);
}
renderCopyCLI = () => {
return <Install />;
}
renderSecondLevel = (spacing = 24) => {
return (
<React.Fragment>
<Grid container={true} spacing={spacing}>
{this.renderAuthor()}
</Grid>
);
}
</React.Fragment>
renderRepository = () => {
return <Repository />;
}
renderAuthor = () => {
return (
<Fragment>
<Grid item={true} xs={6}>
<Authors />
</Grid>
<Grid item={true} xs={6}>
<License />
</Grid>
</Fragment>
);
}
}

48
src/webui/components/Install/index.js Normal file
View file

@ -0,0 +1,48 @@
import React, {Component} from 'react';
import { DetailContextConsumer } from '../../pages/version/index';
import Card from '@material-ui/core/Card/index';
import CardContent from '@material-ui/core/CardContent/index';
import CopyToClipBoard from '../CopyToClipBoard';
import Button from '@material-ui/core/Button';
import CardActions from '@material-ui/core/CardActions';
class Install extends Component<any, any> {
render() {
return (
<DetailContextConsumer>
{(context) => {
return this.renderCopyCLI(context);
}}
</DetailContextConsumer>
);
};
renderCopyCLI = ({packageName}) => {
return (
<Card>
<CardContent>
<CopyToClipBoard text={`npm install ${packageName}`} />
<CopyToClipBoard text={`pnpm install ${packageName}`} />
<CopyToClipBoard text={`yarn add ${packageName}`} />
<CardActions>
{this.renderDownloadButton()}
</CardActions>
</CardContent>
</Card>
);
}
renderDownloadButton = () => {
return (
<CardActions>
<Button color={"primary"} size={'small'} variant={"contained"}>
{'Download Tarball'}
</Button>
</CardActions>
);
}
}
export default Install;

51
src/webui/components/License/index.js Normal file
View file

@ -0,0 +1,51 @@
/* eslint no-unused-vars: 0 */
import React, {Component, Fragment} from 'react';
import { DetailContextConsumer } from '../../pages/version/index';
import Card from '@material-ui/core/Card/index';
import CardContent from '@material-ui/core/CardContent/index';
import Avatar from '@material-ui/core/Avatar';
import Notes from '@material-ui/icons/Notes';
import Typography from "@material-ui/core/Typography/index";
class License extends Component<any, any> {
render() {
return (
<DetailContextConsumer>
{(context) => {
return this.renderAuthor(context);
}}
</DetailContextConsumer>
);
};
renderAuthor = ({packageMeta}) => {
const { license } = packageMeta.latest;
if (!license) {
return null;
}
return (
<Card>
<CardContent style={{ textAling: 'center'}}>
{this.renderLicense(license)}
</CardContent>
</Card>
);
}
renderLicense = (license) => {
return (
<Fragment>
<Notes style={{ fontSize: 38 }} />
<Typography color={"textPrimary"} gutterBottom={true} variant={'caption'}>
{license}
</Typography>
</Fragment>
);
}
}
export default License;

64
src/webui/components/Repository/index.js Normal file
View file

@ -0,0 +1,64 @@
/* eslint no-unused-vars: 0 */
/* eslint react/jsx-max-depth: 0 */
import React, {Component, Fragment} from 'react';
import { DetailContextConsumer } from '../../pages/version/index';
import Card from '@material-ui/core/Card/index';
import CardContent from '@material-ui/core/CardContent/index';
import Grid from '@material-ui/core/Grid/index';
import GitHub from '../../icons/GitHub';
import CopyToClipBoard from '../CopyToClipBoard';
import BugReport from '@material-ui/icons/BugReport';
import CardActions from '@material-ui/core/CardActions/index';
import Button from '@material-ui/core/Button';
import {GridRepo} from './styles';
class Repository extends Component<any, any> {
render() {
return (
<DetailContextConsumer>
{(context) => {
return this.renderAuthor(context);
}}
</DetailContextConsumer>
);
};
renderAuthor = ({packageMeta}) => {
const { repository, bugs } = packageMeta.latest;
if (!repository) {
return null;
}
return (
<Card>
<CardContent style={{ textAling: 'center'}}>
<GridRepo container={true} spacing={24}>
{this.renderRepository(repository, bugs)}
</GridRepo>
</CardContent>
<CardActions>
<Button size={"small"}>{'Open Bugs'}</Button>
<Button size={"small"}>{'Open Repository'}</Button>
</CardActions>
</Card>
);
}
renderRepository = ({url, type}, bugs) => {
return (
<Fragment>
<Grid item={true} xs={3}>
<GitHub style={{ fontSize: 45 }} />
</Grid>
<Grid item={true} xs={9}>
<CopyToClipBoard text={url} />
</Grid>
</Fragment>
);
}
}
export default Repository;

13
src/webui/components/Repository/styles.js Normal file
View file

@ -0,0 +1,13 @@
/**
* @prettier
* @flow
*/
import styled from 'react-emotion';
import Grid from '@material-ui/core/Grid/index';
export const GridRepo = styled(Grid)`
&& {
align-items: center;
}
`;

18
src/webui/components/Versions/index.js
View file

@ -6,16 +6,24 @@
import { DetailContextConsumer } from '../../pages/version/index';
import { formatDateDistance } from '../../utils/package';
import { Heading, Spacer, ListItemText } from './styles';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import List from '@material-ui/core/List/index';
import ListItem from '@material-ui/core/ListItem/index';
import React from 'react';
import { DIST_TAGS } from '../../../lib/constants';
class Versions extends React.PureComponent {
class Versions extends React.PureComponent<any> {
render() {
return <DetailContextConsumer>{({ packageMeta }) => this.renderContent(packageMeta['dist-tags'], packageMeta.versions)}</DetailContextConsumer>;
return (
// $FlowFixMe
<DetailContextConsumer>
{({ packageMeta }) => {
return this.renderContent(packageMeta[DIST_TAGS], packageMeta.versions);
}}
</DetailContextConsumer>
);
}
renderPackageList = (packages: object, isVersion: boolean = false) => (
renderPackageList = (packages: any, isVersion: boolean = false) => (
<List>
{Object.keys(packages)
.reverse()

16
src/webui/icons/GitHub.js Normal file
View file

@ -0,0 +1,16 @@
// @flow
/* eslint-disable max-len */
/* eslint-disable react/jsx-curly-brace-presence */
import React from 'react';
import SvgIcon from '@material-ui/core/SvgIcon/index';
function GitHub(props: Object) {
return (
<SvgIcon {...props}>
<path d="M12.007 0C6.12 0 1.1 4.27.157 10.08c-.944 5.813 2.468 11.45 8.054 13.312.19.064.397.033.555-.084.16-.117.25-.304.244-.5v-2.042c-3.33.735-4.037-1.56-4.037-1.56-.22-.726-.694-1.35-1.334-1.756-1.096-.75.074-.735.074-.735.773.103 1.454.557 1.846 1.23.694 1.21 2.23 1.638 3.45.96.056-.61.327-1.178.766-1.605-2.67-.3-5.462-1.335-5.462-6.002-.02-1.193.42-2.35 1.23-3.226-.327-1.015-.27-2.116.166-3.09 0 0 1.006-.33 3.3 1.23 1.966-.538 4.04-.538 6.003 0 2.295-1.5 3.3-1.23 3.3-1.23.445 1.006.49 2.144.12 3.18.81.877 1.25 2.033 1.23 3.226 0 4.607-2.805 5.627-5.476 5.927.578.583.88 1.386.825 2.206v3.29c-.005.2.092.393.26.507.164.115.377.14.565.063 5.568-1.88 8.956-7.514 8.007-13.313C22.892 4.267 17.884.007 12.008 0z" />
</SvgIcon>
);
}
export default GitHub;

1
src/webui/pages/version/index.js
View file

@ -110,7 +110,6 @@ class VersionPage extends Component<any, any> {
render() {
const { isLoading, packageMeta, readMe, packageName } = this.state;
console.log('render', packageName, isLoading);
if (isLoading === false) {
return (