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

refactor: corrects eslint and variable name spacing (#31)

Browse Source 
* refactor: corrects eslint and variable namespacing

* chore: fixes git conflict

* chore: fixes eslint
This commit is contained in:
Ayush Sharma 2019-04-08 22:29:20 +02:00 committed by Juan Picado @jotadeveloper
parent f000438b86
commit 96b65d969a
10 changed files with 78 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/webui/components/ActionBar/index.js
View File

@ -1,18 +1,16 @@
/* eslint-disable react/jsx-max-depth */
/**
* @prettier
*/
import React, { Component } from 'react';
import { DetailContextConsumer } from '../../pages/version/index';
import List from '@material-ui/core/List/index';
import DownloadIcon from '@material-ui/icons/CloudDownload';
import BugReportIcon from '@material-ui/icons/BugReport';
import DownloadIcon from '@material-ui/icons/CloudDownload';
import HomeIcon from '@material-ui/icons/Home';
import List from '@material-ui/core/List/index';
import Tooltip from '@material-ui/core/Tooltip/index';
import { DetailContextConsumer } from '../../pages/version/index';
import { Fab, ActionListItem } from './styles';
const ACTIONS = {
@ -46,24 +44,14 @@ class ActionBar extends Component<any, any> {
return null;
}
return (
<a href={link} target={"_blank"}>
<a href={link} target={'_blank'}>
{component}
</a>
);
}
renderActionBarListItems = (packageMeta) => {
const {
latest: {
bugs: {
url: issue,
} = {},
homepage,
dist: {
tarball,
} = {},
} = {},
} = packageMeta;
renderActionBarListItems = packageMeta => {
const { latest: { bugs: { url: issue } = {}, homepage, dist: { tarball } = {} } = {} } = packageMeta;
const actionsMap = {
homepage,
@ -74,11 +62,7 @@ class ActionBar extends Component<any, any> {
const renderList = Object.keys(actionsMap).reduce((component, value, key) => {
const link = actionsMap[value];
if (link) {
const fab = (
<Fab size={'small'}>
{ACTIONS[value]['icon']}
</Fab>
);
const fab = <Fab size={'small'}>{ACTIONS[value]['icon']}</Fab>;
component.push(
<Tooltip key={key} title={ACTIONS[value]['title']}>
{this.renderIconsWithLink(link, fab)}
@ -90,19 +74,13 @@ class ActionBar extends Component<any, any> {
return (
<>
<ActionListItem alignItems={'flex-start'}>
{renderList}
</ActionListItem>
<ActionListItem alignItems={'flex-start'}>{renderList}</ActionListItem>
</>
);
};
renderActionBar = ({ packageMeta = {} }) => {
return (
<List>
{this.renderActionBarListItems(packageMeta)}
</List>
);
return <List>{this.renderActionBarListItems(packageMeta)}</List>;
};
}

6
src/webui/components/CopyToClipBoard/index.js
View File

@ -4,15 +4,15 @@
*/
import React from 'react';
import type { Node } from 'react';
import FileCopy from '@material-ui/icons/FileCopy';
import Tooltip from '@material-ui/core/Tooltip/index';
import type { Node } from 'react';
import { IProps } from './types';
import { ClipBoardCopy, ClipBoardCopyText, CopyIcon } from './styles';
import { copyToClipBoardUtility } from '../../utils/cli-utils';
import { TEXT } from '../../utils/constants';
import { IProps } from './types';
const CopyToClipBoard = ({ text, children }: IProps): Node => {
const renderToolTipFileCopy = () => (

6
src/webui/components/Dependencies/index.js
View File

@ -3,8 +3,6 @@
* @flow
*/
/* eslint react/jsx-max-depth: 0 */
import React, { Component, Fragment } from 'react';
import { withRouter } from 'react-router-dom';
import CardContent from '@material-ui/core/CardContent/index';
@ -40,7 +38,7 @@ class DepDetail extends Component<any, any> {
};
}
const WrappDepDetail = withRouter(DepDetail);
const WrapperDependencyDetail = withRouter(DepDetail);
class DependencyBlock extends Component<any, any> {
render() {
@ -68,7 +66,7 @@ class DependencyBlock extends Component<any, any> {
deps.map(dep => {
const [name, version] = dep;
return <WrappDepDetail key={name} name={name} onLoading={enableLoading} version={version} />;
return <WrapperDependencyDetail key={name} name={name} onLoading={enableLoading} version={version} />;
});
}

4
src/webui/components/DetailSidebar/index.js
View File

@ -4,7 +4,7 @@ import Card from '@material-ui/core/Card/index';
import CardContent from '@material-ui/core/CardContent/index';
import List from '@material-ui/core/List/index';
import ActtionBar from '../ActionBar';
import ActionBar from '../ActionBar';
import Author from '../Author';
import Developers from '../Developers';
import Dist from '../Dist';
@ -88,7 +88,7 @@ class DetailSidebar extends Component {
}
renderActionBar = () => {
return <ActtionBar />;
return <ActionBar />;
}
}

46
src/webui/components/Developers/index.js
View File

@ -1,15 +1,18 @@
import React, {Component} from 'react';
/**
* @prettier
*/
import React, { Component } from 'react';
import Avatar from '@material-ui/core/Avatar';
import Tooltip from '@material-ui/core/Tooltip';
import Add from '@material-ui/icons/Add';
import Tooltip from '@material-ui/core/Tooltip';
import { DetailContextConsumer } from '../../pages/version';
import { Details, Heading, Content, Fab } from './styles';
interface Props {
type: 'contributors' | 'maintainers'
type: 'contributors' | 'maintainers';
}
class Developers extends Component<Props, any> {
@ -28,11 +31,11 @@ class Developers extends Component<Props, any> {
}}
</DetailContextConsumer>
);
};
}
handleLoadMore = () => {
this.setState((prev) => ({ visibleDevs: prev.visibleDevs + 6 }));
}
this.setState(prev => ({ visibleDevs: prev.visibleDevs + 6 }));
};
renderDevelopers = (developers, packageMeta) => {
const { type } = this.props;
@ -44,40 +47,33 @@ class Developers extends Component<Props, any> {
{developers.slice(0, visibleDevs).map(developer => (
<Details key={developer.email}>{this.renderDeveloperDetails(developer, packageMeta)}</Details>
))}
{visibleDevs < developers.length &&
<Fab onClick={this.handleLoadMore} size={'small'}><Add /></Fab>
}
{visibleDevs < developers.length && (
<Fab onClick={this.handleLoadMore} size={'small'}>
<Add />
</Fab>
)}
</Content>
</>
);
}
};
renderLinkForMail(email, avatarComponent, packageName, version) {
if(!email) {
if (!email) {
return avatarComponent;
}
return (
<a href={`mailto:${email}?subject=${packageName}@${version}`} target={"_top"}>
<a href={`mailto:${email}?subject=${packageName}@${version}`} target={'_top'}>
{avatarComponent}
</a>
);
}
renderDeveloperDetails = ({ name, avatar, email }, packageMeta) => {
const {
name: packageName,
version,
} = packageMeta.latest;
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 <Tooltip title={name}>{this.renderLinkForMail(email, avatarComponent, packageName, version)}</Tooltip>;
};
}
export default Developers;

10
src/webui/components/Dist/index.js
View File

@ -2,13 +2,12 @@
* @prettier
*/
/* eslint-disable */
import React, { Component } from 'react';
import List from '@material-ui/core/List/index';
import { DetailContextConsumer } from '../../pages/version/index';
import { Heading, DistListItem, DistChips, DownloadButton } from './styles';
import { Heading, DistListItem, DistChips } from './styles';
import fileSizeSI from '../../utils/file-size';
class Dist extends Component<any, any> {
@ -34,10 +33,11 @@ class Dist extends Component<any, any> {
if (value) {
const label = (
<span>
<b>{title.split('-').join(' ')}</b>: {value}
{/* eslint-disable-next-line */}
<b>{title.split('-').join(' ')}</b>:{value}
</span>
);
componentList.push(<DistChips label={label} key={key} />);
componentList.push(<DistChips key={key} label={label} />);
}
return componentList;
}, []);

43
src/webui/components/Engines/index.js
View File

@ -1,5 +1,8 @@
/* eslint-disable */
import React, {Component} from 'react';
/**
* @prettier
*/
import React, { Component } from 'react';
import Avatar from '@material-ui/core/Avatar/index';
import Grid from '@material-ui/core/Grid/index';
@ -7,29 +10,27 @@ import List from '@material-ui/core/List/index';
import ListItemText from '@material-ui/core/ListItemText/index';
import { DetailContextConsumer } from '../../pages/version/index';
import { Heading, EngineListItem } from './styles';
import node from './img/node.png';
import npm from '../Install/img/npm.svg'
import npm from '../Install/img/npm.svg';
const ICONS = {
'node-JS': <Avatar src={node} />,
'NPM-version': <Avatar src={npm} />,
}
};
class Engine extends Component {
render() {
return (
<DetailContextConsumer>
{(context) => {
{context => {
return this.renderEngine(context);
}}
</DetailContextConsumer>
);
};
}
renderEngine = ({packageMeta}) => {
renderEngine = ({ packageMeta }) => {
const { engines } = packageMeta.latest;
if (!engines) {
return null;
@ -37,14 +38,14 @@ class Engine extends Component {
const engineDict = {
'node-JS': engines.node,
'NPM-version': engines.npm
}
'NPM-version': engines.npm,
};
const items = Object.keys(engineDict).reduce((markup, text, key) => {
const heading = engineDict[text]
if (heading){
const heading = engineDict[text];
if (heading) {
markup.push(
<Grid item={true} xs={6} key={key}>
<Grid item={true} key={key} xs={6}>
{this.renderListItems(heading, text)}
</Grid>
);
@ -56,23 +57,19 @@ class Engine extends Component {
return null;
}
return (
<Grid container={true}>
{items}
</Grid>
);
}
return <Grid container={true}>{items}</Grid>;
};
renderListItems = (heading, text) => {
return (
<List subheader={<Heading variant={"subheading"}>{text.split('-').join(' ')}</Heading>}>
<List subheader={<Heading variant={'subheading'}>{text.split('-').join(' ')}</Heading>}>
<EngineListItem>
{ ICONS[text] }
{ICONS[text]}
<ListItemText primary={heading} />
</EngineListItem>
</List>
);
}
};
}
export default Engine;

13
src/webui/components/Footer/styles.js
View File

@ -6,12 +6,13 @@
import styled, { css } from 'react-emotion';
import mq from '../../utils/styles/media';
import Icon from '../Icon';
import colors from '../../utils/styles/colors';
export const Wrapper = styled.div`
&& {
background: #f9f9f9;
border-top: 1px solid #e3e3e3;
color: #999999;
background: ${colors.snow};
border-top: 1px solid ${colors.greyGainsboro};
color: ${colors.nobel01};
font-size: 14px;
padding: 20px;
}
@ -67,7 +68,7 @@ export const Earth = styled(Icon)`
export const Flags = styled.span`
&& {
position: absolute;
background: #d3dddd;
background: ${colors.greyAthens};
padding: 1px 4px;
border-radius: 3px;
height: 20px;
@ -82,7 +83,7 @@ export const Flags = styled.span`
left: -4px;
margin-left: -5px;
border: 5px solid;
border-color: #d3dddd transparent transparent transparent;
border-color: ${colors.greyAthens} transparent transparent transparent;
transform: rotate(90deg);
}
${ToolTip}:hover & {
@ -93,7 +94,7 @@ export const Flags = styled.span`
export const Love = styled.span`
&& {
color: #e25555;
color: ${colors.love};
padding: 0 5px;
}
`;

1
src/webui/utils/styles/colors.js
View File

@ -22,6 +22,7 @@ const colors = {
paleNavy: '#e4e8f1',
saltpan: '#f7f8f6',
snow: '#f9f9f9',
love: '#e25555',
nobel01: '#999999',
nobel02: '#9f9f9f',

10
tools/verdaccio.js
View File

@ -1,3 +1,7 @@
/**
* @prettier
*/
const fs = require('fs');
const startServer = require('verdaccio').default;
const yalm = require('js-yaml');
@ -11,9 +15,9 @@ const handler = function(webServer, addr, pkgName, pkgVersion) {
process.on('SIGTERM', () => {
webServer.close(() => {
console.log('Process terminated')
})
})
console.log('Process terminated');
});
});
};
startServer(configJsonFormat, 8080, '', '1.0.0', 'verdaccio', handler);