chore: apply eslint fix

2025-03-18 02:22:46 -05:00 · 2018-12-15 00:23:30 +01:00 · 2018-12-15 00:23:30 +01:00 · 172182357b
commit 172182357b
parent b2b176be0d
37 changed files with 195 additions and 179 deletions
--- a/src/webui/app.js
+++ b/src/webui/app.js
@ -146,11 +146,11 @@ export default class App extends Component {
    const { logoUrl, user, scope } = this.state;
    return (
      <Header 
-        logo={logoUrl}
-        username={user.username}
-        toggleLoginModal={this.toggleLoginModal}
-        onLogout={this.handleLogout}
-        scope={scope}
+        logo={ logoUrl }
+        onLogout={ this.handleLogout }
+        scope={ scope }
+        toggleLoginModal={ this.toggleLoginModal }
+        username={ user.username }
      />
    );
  }
@ -159,11 +159,11 @@ export default class App extends Component {
    const { error, showLoginModal } = this.state;
    return (
      <LoginModal
-        visibility={showLoginModal}
-        error={error}
-        onChange={this.setUsernameAndPassword}
-        onCancel={this.toggleLoginModal}
-        onSubmit={this.doLogin}
+        error={ error }
+        onCancel={ this.toggleLoginModal }
+        onChange={ this.setUsernameAndPassword }
+        onSubmit={ this.doLogin }
+        visibility={ showLoginModal }
      />
    );
  }
@ -171,14 +171,14 @@ export default class App extends Component {
  render() {
    const { isLoading, isUserLoggedIn, packages } = this.state;
    return (
-      <Container isLoading={isLoading}>
+      <Container isLoading={ isLoading }>
        {isLoading ? (
          <Loading />
        ) : (
          <Fragment>
            {this.renderHeader()}
            <Content>
-              <Route isUserLoggedIn={isUserLoggedIn} packages={packages} />
+              <Route isUserLoggedIn={ isUserLoggedIn } packages={ packages } />
            </Content>
            <Footer />
          </Fragment>
--- a/src/webui/components/AutoComplete/index.js
+++ b/src/webui/components/AutoComplete/index.js
@ -39,15 +39,15 @@ const renderSuggestion = (suggestion, { query, isHighlighted }): Node => {
  const matches = match(suggestion.name, query);
  const parts = parse(suggestion.name, matches);
  return (
-    <MenuItem selected={isHighlighted} component="div">
+    <MenuItem component={'div'} selected={isHighlighted}>
      <div>
        {parts.map((part, index) => {
          return part.highlight ? (
-            <span key={String(index)} href={suggestion.link} style={{ fontWeight: fontWeight.semiBold }}>
+            <span href={ suggestion.link } key={ String(index) } style={ { fontWeight: fontWeight.semiBold } }>
              {part.text}
            </span>
          ) : (
-            <span key={String(index)} href={suggestion.link} style={{ fontWeight: fontWeight.light }}>
+            <span href={ suggestion.link } key={ String(index) } style={ { fontWeight: fontWeight.light } }>
              {part.text}
            </span>
          );
@ -59,7 +59,7 @@ const renderSuggestion = (suggestion, { query, isHighlighted }): Node => {

 const renderMessage = (message): Node => {
  return (
-    <MenuItem selected={false} component="div">
+    <MenuItem component={'div'} selected={false}>
      <div>{message}</div>
    </MenuItem>
  );
@ -100,7 +100,7 @@ const AutoComplete = ({
    <Wrapper>
      <Autosuggest
        {...autosuggestProps}
-        inputProps={{
+        inputProps={ {
          value,
          onChange,
          placeholder,
@ -109,16 +109,16 @@ const AutoComplete = ({
          color,
          onKeyDown,
          onBlur,
-        }}
-        renderSuggestionsContainer={({ containerProps, children, query }) => (
-          <Paper {...containerProps} square>
+        } }
+        onSuggestionSelected={ onClick }
+        renderSuggestionsContainer={ ({ containerProps, children, query }) => (
+          <Paper { ...containerProps } square={true}>
            {suggestionsLoaded && children === null && query && renderMessage(SUGGESTIONS_RESPONSE.NO_RESULT)}
            {suggestionsLoading && query && renderMessage(SUGGESTIONS_RESPONSE.LOADING)}
            {suggestionsError && renderMessage(SUGGESTIONS_RESPONSE.FAILURE)}
            {children}
          </Paper>
-        )}
-        onSuggestionSelected={onClick}
+        ) }
      />
    </Wrapper>
  );
--- a/src/webui/components/CopyToClipBoard/index.js
+++ b/src/webui/components/CopyToClipBoard/index.js
@ -32,7 +32,7 @@ const copyToClipBoardUtility = (str: string) => (event: SyntheticEvent<HTMLEleme
 const CopyToClipBoard = ({ text }: IProps): Node => (
  <ClipBoardCopy>
    <ClipBoardCopyText>{text}</ClipBoardCopyText>
-    <Tooltip title="Copy to Clipboard" disableFocusListener>
+    <Tooltip disableFocusListener={true} title={'Copy to Clipboard'}>
      <CopyIcon onClick={copyToClipBoardUtility(text)}>
        <FileCopy />
      </CopyIcon>
--- a/src/webui/components/Footer/index.js
+++ b/src/webui/components/Footer/index.js
@ -17,21 +17,21 @@ const Footer = (): Element<Wrapper> => (
        <Love>♥</Love>
        on
        <ToolTip>
-          <Earth name="earth" size="md" />
+          <Earth name={ 'earth' } size={ 'md' } />
          <Flags>
-            <Flag name="spain" size="md" />
-            <Flag name="nicaragua" size="md" />
-            <Flag name="india" size="md" />
-            <Flag name="brazil" size="md" />
-            <Flag name="pakistan" size="md" />
-            <Flag name="china" size="md" />
-            <Flag name="austria" size="md" />
+            <Flag name={ 'spain' } size={ 'md' } />
+            <Flag name={ 'nicaragua' } size={ 'md' } />
+            <Flag name={ 'india' } size={ 'md' } />
+            <Flag name={ 'brazil' } size={ 'md' } />
+            <Flag name={ 'pakistan' } size={ 'md' } />
+            <Flag name={ 'china' } size={ 'md' } />
+            <Flag name={ 'austria' } size={ 'md' } />
          </Flags>
        </ToolTip>
      </Left>
      <Right>
        Powered by
-        <Logo name="verdaccio" size="md" pointer img onClick={() => window.open('http://www.verdaccio.org/', '_blank')} />
+        <Logo img={true} name={'verdaccio'} onClick={() => window.open('http://www.verdaccio.org/', '_blank')} pointer={true} size={'md'} />
        {`/ ${version}`}
      </Right>
    </Inner>
--- a/src/webui/components/Header/index.js
+++ b/src/webui/components/Header/index.js
@ -115,7 +115,7 @@ class Header extends Component<IProps, IState> {
    const { withoutSearch = false } = this.props;
    return (
      <LeftSide>
-        <Link to="/" style={{ marginRight: '1em' }}>
+        <Link style={ { marginRight: '1em' } } to={ '/' }>
          <Logo />
        </Link>
        {!withoutSearch && (
@ -133,26 +133,26 @@ class Header extends Component<IProps, IState> {
    return (
      <RightSide>
        {!withoutSearch && (
-          <Tooltip title="Search packages" disableFocusListener>
-            <IconSearchButton color="inherit" onClick={this.handleToggleMNav}>
+          <Tooltip disableFocusListener={true} title={'Search packages'}>
+            <IconSearchButton color={ 'inherit' } onClick={ this.handleToggleMNav }>
              <IconSearch />
            </IconSearchButton>
          </Tooltip>
        )}
-        <Tooltip title="Documentation" disableFocusListener>
-          <IconButton color="inherit" component={Link} to={installationLink} blank>
+        <Tooltip disableFocusListener={true} title={'Documentation'}>
+          <IconButton blank={true} color={'inherit'} component={Link} to={installationLink}>
            <Help />
          </IconButton>
        </Tooltip>
-        <Tooltip title="Registry Information" disableFocusListener>
-          <IconButton id="header--button-registryInfo" color="inherit" onClick={this.handleOpenRegistryInfoDialog}>
+        <Tooltip disableFocusListener={true} title={'Registry Information'}>
+          <IconButton color={'inherit'} id={'header--button-registryInfo'} onClick={this.handleOpenRegistryInfoDialog}>
            <Info />
          </IconButton>
        </Tooltip>
        {username ? (
          this.renderMenu()
        ) : (
-          <Button id="header--button-login" color="inherit" onClick={this.handleToggleLogin}>
+          <Button color={'inherit'} id={'header--button-login'} onClick={this.handleToggleLogin}>
            Login
          </Button>
        )}
@ -169,28 +169,28 @@ class Header extends Component<IProps, IState> {
    const open = Boolean(anchorEl);
    return (
      <React.Fragment>
-        <IconButton id="header--button-account" color="inherit" onClick={this.handleLoggedInMenu}>
+        <IconButton color={'inherit'} id={'header--button-account'} onClick={this.handleLoggedInMenu}>
          <AccountCircle />
        </IconButton>
        <Menu
-          id="sidebar-menu"
-          anchorEl={anchorEl}
-          anchorOrigin={{
+          anchorEl={ anchorEl }
+          anchorOrigin={ {
            vertical: 'top',
            horizontal: 'right',
-          }}
-          transformOrigin={{
+          } }
+          id={'sidebar-menu'}
+          onClose={ this.handleLoggedInMenuClose }
+          open={ open }
+          transformOrigin={ {
            vertical: 'top',
            horizontal: 'right',
-          }}
-          open={open}
-          onClose={this.handleLoggedInMenuClose}
+          } }
        >
-          <MenuItem disabled>
+          <MenuItem disabled={ true }>
            <Greetings>{`Hi,`}</Greetings>
-            <Label text={username} limit={140} weight="bold" capitalize />
+            <Label capitalize={true} limit={ 140 } text={ username } weight={ 'bold' } />
          </MenuItem>
-          <MenuItem onClick={onLogout} id="header--button-logout">
+          <MenuItem id={'header--button-logout'} onClick={onLogout}>
            Logout
          </MenuItem>
        </Menu>
@ -202,7 +202,7 @@ class Header extends Component<IProps, IState> {
    const { scope } = this.props;
    const { openInfoDialog, registryUrl } = this.state;
    return (
-      <RegistryInfoDialog open={openInfoDialog} onClose={this.handleCloseRegistryInfoDialog}>
+      <RegistryInfoDialog onClose={ this.handleCloseRegistryInfoDialog } open={ openInfoDialog }>
        <div>
          <CopyToClipBoard text={`npm set ${scope} registry ${registryUrl}`} />
          <CopyToClipBoard text={`npm adduser --registry ${registryUrl}`} />
@ -216,7 +216,7 @@ class Header extends Component<IProps, IState> {
    const { withoutSearch = false } = this.props;
    return (
      <div>
-        <NavBar position="static">
+        <NavBar position={ 'static' }>
          <InnerNavBar>
            {this.renderLeftSide()}
            {this.renderRightSide()}
@ -229,7 +229,7 @@ class Header extends Component<IProps, IState> {
              <InnerMobileNavBar>
                <Search />
              </InnerMobileNavBar>
-              <Button color="inherit" onClick={this.handleDismissMNav}>
+              <Button color={ 'inherit' } onClick={ this.handleDismissMNav }>
                Cancel
              </Button>
            </MobileNavBar>
--- a/src/webui/components/Help/index.js
+++ b/src/webui/components/Help/index.js
@ -17,7 +17,9 @@ import { CardStyled as Card, HelpTitle } from './styles';
 function renderHeadingClipboardSegments(title: string, text: string): Node {
  return (
    <Fragment>
-      <Typography variant="body2">{title}</Typography>
+      <Typography variant={ 'body2' }>
+{title}
+</Typography>
      <CopyToClipBoard text={text} />
    </Fragment>
  );
@ -27,20 +29,20 @@ const Help = (): Node => {
  const registryUrl = getRegistryURL();

  return (
-    <Card id="help-card">
+    <Card id={ 'help-card' }>
      <CardContent>
-        <Typography component="h2" variant="headline" gutterBottom id="help-card__title">
+        <Typography component={'h2'} gutterBottom={true} id={'help-card__title'} variant={'headline'}>
          No Package Published Yet.
        </Typography>
-        <HelpTitle color="textSecondary" gutterBottom>
+        <HelpTitle color={ 'textSecondary' } gutterBottom={ true }>
          To publish your first package just:
        </HelpTitle>
        {renderHeadingClipboardSegments('1. Login', `$ npm adduser --registry ${registryUrl}`)}
        {renderHeadingClipboardSegments('2. Publish', `$ npm publish --registry ${registryUrl}`)}
-        <Typography variant="body2">3. Refresh this page.</Typography>
+        <Typography variant={ 'body2' }>3. Refresh this page.</Typography>
      </CardContent>
      <CardActions>
-        <Button href="https://verdaccio.org/docs/en/installation" target="_blank" size="small" color="primary">
+        <Button color={'primary'} href={'https://verdaccio.org/docs/en/installation'} size={'small'} target={'_blank'}>
          Learn More
        </Button>
      </CardActions>
--- a/src/webui/components/Icon/index.js
+++ b/src/webui/components/Icon/index.js
@ -40,11 +40,11 @@ export const Icons: $Shape<IIconsMap> = {
 const Icon = ({ className, name, size = 'sm', img = false, pointer = false, ...props }: IProps): Node => {
  const title = capitalize(name);
  return img ? (
-    <ImgWrapper className={className} size={size} title={title} pointer={pointer} {...props}>
-      <Img src={Icons[name]} alt={title} />
+    <ImgWrapper className={ className } pointer={ pointer } size={ size } title={ title } {...props}>
+      <Img alt={ title } src={ Icons[name] } />
    </ImgWrapper>
  ) : (
-    <SVG className={className} size={size} pointer={pointer} {...props}>
+    <SVG className={ className } pointer={ pointer } size={ size } {...props}>
      <title>{title}</title>
      <use xlinkHref={`${Icons[name]}#${name}`} />
    </SVG>
--- a/src/webui/components/Label/index.js
+++ b/src/webui/components/Label/index.js
@ -18,7 +18,7 @@ const Wrapper = styled.div`

 const Label = ({ text = '', capitalize = false, weight = 'regular', ...props }: IProps): Node => {
  return (
-    <Wrapper weight={weight} capitalize={capitalize} {...props}>
+    <Wrapper capitalize={ capitalize } weight={ weight } {...props}>
      {text}
    </Wrapper>
  );
--- a/src/webui/components/Loading/index.js
+++ b/src/webui/components/Loading/index.js
@ -14,7 +14,7 @@ import { Wrapper, Badge } from './styles';
 const Loading = (): Node => (
  <Wrapper>
    <Badge>
-      <Logo md />
+      <Logo md={ true } />
    </Badge>
    <Spinner />
  </Wrapper>
--- a/src/webui/components/Login/index.js
+++ b/src/webui/components/Login/index.js
@ -102,18 +102,24 @@ export default class LoginModal extends Component {
  renderLoginError({ type, title, description } = {}) {
    return type === 'error' && (
      <SnackbarContent
-        className={classes.loginError}
+        className={ classes.loginError }
        message={
-          <div
-            id="client-snackbar"
-            className={classes.loginErrorMsg}
+          (<div
+            className={ classes.loginErrorMsg }
+            id={ "client-snackbar" }
          >
-            <ErrorIcon className={classes.loginIcon} />
+            <ErrorIcon className={ classes.loginIcon } />
            <span>
-              <div><strong>{title}</strong></div>
-              <div>{description}</div>
+              <div>
+                <strong>
+                  {title}
+                </strong>
+              </div>
+              <div>
+                {description}
+              </div>
            </span>
-          </div>
+           </div>)
        }
      />
    );
@ -123,76 +129,76 @@ export default class LoginModal extends Component {
    const { visibility, onCancel, error } = this.props;
    const { form: { username, password } } = this.state;
    return (
-        <Dialog
-          onClose={onCancel}
-          open={visibility}
-          id="login--form-container"
-          maxWidth="xs"
-          fullWidth
+      <Dialog
+        fullWidth={ true }
+        id={ "login--form-container" }
+        maxWidth={ "xs" }
+        onClose={ onCancel }
+        open={ visibility }
        >
-        <form onSubmit={this.validateCredentials.bind(this)} noValidate>
+        <form noValidate={ true } onSubmit={ this.validateCredentials.bind(this) }>
          <DialogTitle>Login</DialogTitle>
          <DialogContent>
            {this.renderLoginError(error)}
            <FormControl
-              error={!username.value && !username.pristine}
-              required={username.required}
-              fullWidth
+              error={ !username.value && !username.pristine }
+              fullWidth={ true }
+              required={ username.required }
            >
-              <InputLabel htmlFor="username">Username</InputLabel>
+              <InputLabel htmlFor={ "username" }>Username</InputLabel>
              <Input
-                id="login--form-username"
-                value={username.value}
-                onChange={this.setCredentials.bind(this, 'username')}
-                placeholder="Your username"
+                id={ "login--form-username" }
+                onChange={ this.setCredentials.bind(this, 'username') }
+                placeholder={ "Your username" }
+                value={ username.value }
              />
              {!username.value && !username.pristine && (
-                <FormHelperText id='username-error'>
+                <FormHelperText id={ "username-error" }>
                  {username.helperText}
                </FormHelperText>
              )}
            </FormControl>
            <FormControl
-              error={!password.value && !password.pristine}
-              required={password.required}
-              style={{ marginTop: '8px' }}
-              fullWidth
+              error={ !password.value && !password.pristine }
+              fullWidth={ true }
+              required={ password.required }
+              style={ { marginTop: '8px' } }
            >
-              <InputLabel htmlFor="password">Password</InputLabel>
+              <InputLabel htmlFor={ "password" }>Password</InputLabel>
              <Input
-                id="login--form-password"
-                type="password"
-                value={password.value}
-                onChange={this.setCredentials.bind(this, 'password')}
-                placeholder="Your strong password"
+                id={ "login--form-password" }
+                onChange={ this.setCredentials.bind(this, 'password') }
+                placeholder={ "Your strong password" }
+                type={ "password" }
+                value={ password.value }
              />
              {!password.value && !password.pristine && (
-                <FormHelperText id='password-error'>
+                <FormHelperText id={ "password-error" }>
                  {password.helperText}
                </FormHelperText>
              )}
            </FormControl>
          </DialogContent>
-          <DialogActions className="dialog-footer">
+          <DialogActions className={ "dialog-footer" }>
            <Button
-              onClick={onCancel}
-              id="login--form-cancel"
-              color="inherit"
-              type="button"
+              color={ "inherit" }
+              id={ "login--form-cancel" }
+              onClick={ onCancel }
+              type={ "button" }
            >
              Cancel
-              </Button>
+            </Button>
            <Button
-              id="login--form-submit"
-              type="submit"
-              color="inherit"
+              color={ "inherit" }
              disabled={ !password.value || !username.value }
+              id={ "login--form-submit" }
+              type={ "submit" }
            >
              Login
            </Button>
          </DialogActions>
-          </form>
-        </Dialog>
+        </form>
+      </Dialog>
    );
  }
 }
--- a/src/webui/components/NotFound/index.js
+++ b/src/webui/components/NotFound/index.js
@ -9,7 +9,9 @@ import { IProps } from './types';

 const NotFound = ({ pkg }: IProps) => (
  <Wrapper>
-    <h1>Error 404 - {pkg}</h1>
+    <h1>Error 404 -
+{pkg}
+</h1>
    <hr />
    <p>Oops, The package you are trying to access does not exist.</p>
  </Wrapper>
--- a/src/webui/components/Package/index.js
+++ b/src/webui/components/Package/index.js
@ -38,7 +38,7 @@ const getInitialsName = (name: string) =>
    .toUpperCase();

 const Package = ({ name: label, version, time, author: { name, avatar }, description, license, keywords = [] }: IProps): Element<Wrapper> => (
-  <Wrapper className="package" to={`detail/${label}`}>
+  <Wrapper className={ 'package' } to={ `detail/${label}` }>
    <Header>
      <MainInfo>
        <Name>{label}</Name>
@ -47,12 +47,12 @@ const Package = ({ name: label, version, time, author: { name, avatar }, descrip
      <Overview>
        {license && (
          <OverviewItem>
-            <Icon name="license" pointer modifiers={spacing('margin', '4px', '5px', '0px', '0px')} />
+            <Icon modifiers={ spacing('margin', '4px', '5px', '0px', '0px') } name={ 'license' } pointer={true} />
            {license}
          </OverviewItem>
        )}
        <OverviewItem>
-          <Icon name="time" pointer />
+          <Icon name={ 'time' } pointer={ true } />
          <Published modifiers={spacing('margin', '0px', '5px', '0px', '0px')}>{`Published on ${formatDate(time)} •`}</Published>
          {`${formatDateDistance(time)} ago`}
        </OverviewItem>
@ -65,7 +65,7 @@ const Package = ({ name: label, version, time, author: { name, avatar }, descrip
            {!avatar && getInitialsName(name)}
          </Avatar>
          <Details>
-            <Text text={name} weight="bold" />
+            <Text text={name} weight={'bold'} />
          </Details>
        </Author>
      </Field>
--- a/src/webui/components/PackageDetail/index.js
+++ b/src/webui/components/PackageDetail/index.js
@ -7,14 +7,18 @@ import Readme from '../Readme';
 import classes from './packageDetail.scss';

 const displayState = (description) => {
-  return !isNil(description) ? <Readme description={description} /> : '';
+  return !isNil(description) ? <Readme description={ description } /> : '';
 };

 const PackageDetail = ({packageName, readMe}) => {
  return (
-    <div className={classes.pkgDetail}>
-      <h1 className={classes.title}>{packageName}</h1>
-      <div className={classes.readme}>{displayState(readMe)}</div>
+    <div className={ classes.pkgDetail }>
+      <h1 className={ classes.title }>
+        {packageName}
+      </h1>
+      <div className={ classes.readme }>
+        {displayState(readMe)}
+      </div>
    </div>
  );
 };
--- a/src/webui/components/PackageList/index.js
+++ b/src/webui/components/PackageList/index.js
@ -18,7 +18,7 @@ export default class PackageList extends React.Component {
    return (
      packages.length > 0 ? (
        <Fragment>
-          <h1 className={classes.listTitle}>Available Packages</h1>
+          <h1 className={ classes.listTitle }>Available Packages</h1>
          {this.renderList()}
        </Fragment>
      ) : null
@ -33,7 +33,7 @@ export default class PackageList extends React.Component {
        const author = formatAuthor(pkg.author);	
        const license = formatLicense(pkg.license);	
        return (	
-         <Package key={i} {...{ name, version, author, description, license, time, keywords }} />
+          <Package key={ i } { ...{ name, version, author, description, license, time, keywords } } />
        );
      })
    );
@ -42,8 +42,8 @@ export default class PackageList extends React.Component {
  render() {
    const { help } = this.props;
    return (
-      <div className="package-list-items">
-        <div className={classes.pkgContainer}>
+      <div className={ "package-list-items" }>
+        <div className={ classes.pkgContainer }>
          {help ? <Help /> : this.renderPackages()}
        </div>
      </div>
--- a/src/webui/components/Readme/index.js
+++ b/src/webui/components/Readme/index.js
@ -8,6 +8,6 @@ import 'github-markdown-css';

 import { IProps } from './types';

-const Readme = ({ description }: IProps) => <div className="markdown-body" dangerouslySetInnerHTML={{ __html: description }} />;
+const Readme = ({ description }: IProps) => <div className={ 'markdown-body' } dangerouslySetInnerHTML={ { __html: description } } />;

 export default Readme;
--- a/src/webui/components/RegistryInfoDialog/index.js
+++ b/src/webui/components/RegistryInfoDialog/index.js
@ -14,11 +14,11 @@ import type { Node } from 'react';
 import { IProps } from './types';

 const RegistryInfoDialog = ({ open = false, children, onClose }: IProps): Node => (
-  <Dialog id="registryInfo--dialog-container" open={open} onClose={onClose}>
-    <Title disableTypography>Register Info</Title>
+  <Dialog id={'registryInfo--dialog-container'} onClose={onClose} open={open}>
+    <Title disableTypography={ true }>Register Info</Title>
    <Content>{children}</Content>
    <DialogActions>
-      <Button id="registryInfo--dialog-close" onClick={onClose} color="inherit" autoFocus>
+      <Button autoFocus={true} color={'inherit'} id={'registryInfo--dialog-close'} onClick={onClose}>
        CLOSE
      </Button>
    </DialogActions>
--- a/src/webui/components/Search/index.js
+++ b/src/webui/components/Search/index.js
@ -155,23 +155,21 @@ class Search extends Component<IProps, IState> {

    return (
      <AutoComplete
-        suggestions={suggestions}
-        suggestionsLoaded={loaded}
-        suggestionsLoading={loading}
-        suggestionsError={error}
-        value={search}
-        placeholder={CONSTANTS.PLACEHOLDER_TEXT}
        color={colors.white}
-        startAdornment={
-          <InputAdornment position="start" style={{ color: colors.white }}>
-            <IconSearch />
-          </InputAdornment>
-        }
-        onSuggestionsFetch={this.handleFetchPackages}
-        onCleanSuggestions={this.handlePackagesClearRequested}
-        onClick={this.handleClickSearch}
-        onChange={this.handleSearch}
        onBlur={this.onBlur}
+        onChange={this.handleSearch}
+        onCleanSuggestions={this.handlePackagesClearRequested}
+        onClick={this.handleClionSuggestionsFetch={this.handleFetchPackages}.PLAC
+        startAdornment={
+          (<InputAdornment position="start" style={{ color: colors.white }}>
+            <IconSearch />
+          </InputAdornment>)
+        }
+        onSuggestionsFetch={ this.handleFetchPackages }
+        onCleanSuggestions={ this.handlePackagesClearRequested }
+        onClick={ this.handleClickSearch }
+        onChange={ this.handleSearch }
+        onBlur={ this.onBlur }
      />
    );
  }
--- a/src/webui/components/Tag/index.js
+++ b/src/webui/components/Tag/index.js
@ -9,6 +9,8 @@ import type { Element } from 'react';
 import { IProps } from './types';
 import { Wrapper } from './styles';

-const Tag = ({ children }: IProps): Element<Wrapper> => <Wrapper>{children}</Wrapper>;
+const Tag = ({ children }: IProps): Element<Wrapper> => <Wrapper>
+{children}
+</Wrapper>;

 export default Tag;
--- a/src/webui/index.js
+++ b/src/webui/index.js
@ -11,7 +11,7 @@ let rootNode = document.getElementById('root');
 let renderApp = (Component) => {
  ReactDOM.render(
    <AppContainer>
-      <Component/>
+      <Component />
    </AppContainer>,
    rootNode
  );
--- a/src/webui/pages/home/index.js
+++ b/src/webui/pages/home/index.js
@ -12,8 +12,8 @@ class Home extends Component {
  render() {
    const { packages } = this.props;
    return (
-      <div className="container content">
-        <PackageList help={packages.length < 1} packages={packages} />
+      <div className={ "container content" }>
+        <PackageList help={ packages.length < 1 } packages={ packages } />
      </div>
    );
  }
--- a/src/webui/router.js
+++ b/src/webui/router.js
@ -24,9 +24,9 @@ class RouterApp extends Component<IProps, IState> {
    return (
      <Router>
        <Switch>
-          <Route exact path="/" render={() => <HomePage isUserLoggedIn={isUserLoggedIn} packages={packages} />} />
-          <Route exact path="/detail/@:scope/:package" render={props => <DetailPackage {...props} isUserLoggedIn={isUserLoggedIn} />} />
-          <Route exact path="/detail/:package" render={props => <DetailPackage {...props} isUserLoggedIn={isUserLoggedIn} />} />
+          <Route exact={ true } path={ '/' } render={ () => <HomePage isUserLoggedIn={ isUserLoggedIn } packages={ packages } /> } />
+          <Route exact={ true } path={ '/detail/@:scope/:package' } render={ props => <DetailPackage { ...props } isUserLoggedIn={ isUserLoggedIn } /> } />
+          <Route exact={ true } path={ '/detail/:package' } render={ props => <DetailPackage { ...props } isUserLoggedIn={ isUserLoggedIn } /> } />
        </Switch>
      </Router>
    );
--- a/src/webui/utils/asyncComponent.js
+++ b/src/webui/utils/asyncComponent.js
@ -16,7 +16,7 @@ export function asyncComponent(getComponent) {
    render() {
      const {Component} = this.state;
      if (Component) {
-        return <Component {...this.props} />;
+        return <Component { ...this.props } />;
      }
      return null;
    }
--- a/test/unit/webui/components/PackageSidebar/dependencies.spec.js
+++ b/test/unit/webui/components/PackageSidebar/dependencies.spec.js
@ -45,7 +45,7 @@ describe('<PackageSidebar /> : <Dependencies />', () => {
      semver: '^5.1.0',
      'unix-crypt-td-js': '^1.0.0'
    };
-    const wrapper = shallow(<Dependencies dependencies={dependencies} />);
+    const wrapper = shallow(<Dependencies dependencies={ dependencies } />);

    expect(wrapper.find(`.${DEP_ITEM_CLASS}`)).toHaveLength(Object.keys(dependencies).length);
    expect(wrapper.html()).toMatchSnapshot();
@ -59,7 +59,7 @@ describe('<PackageSidebar /> : <Dependencies />', () => {
  });

  test('should permit overriding title', () => {
-    const wrapper = mount(<Dependencies title='Package dependencies' />);
+    const wrapper = mount(<Dependencies title={ "Package dependencies" } />);

    expect(wrapper.find('h2').text()).toEqual('Package dependencies');
    expect(wrapper.html()).toMatchSnapshot();
--- a/test/unit/webui/components/PackageSidebar/infos.spec.js
+++ b/test/unit/webui/components/PackageSidebar/infos.spec.js
@ -8,7 +8,7 @@ import Infos from '../../../../../src/webui/components/PackageSidebar/modules/In

 describe('<PackageSidebar /> : <Infos />', () => {
  test('should load the component without props', () => {
-    const wrapper = shallow(<Infos/>);
+    const wrapper = shallow(<Infos />);
    expect(wrapper.html()).toMatchSnapshot();
  });

@ -18,7 +18,7 @@ describe('<PackageSidebar /> : <Infos />', () => {
      license: 'MIT',
      repository: 'https://github.com/verdaccio/verdaccio'
    }
-    const wrapper = shallow(<Infos {...props}/>);
+    const wrapper = shallow(<Infos { ...props } />);
    expect(wrapper.html()).toMatchSnapshot();
  });

@ -26,7 +26,7 @@ describe('<PackageSidebar /> : <Infos />', () => {
    const props = {
      homepage: 'https://www.verdaccio.org'
    }
-    const wrapper = shallow(<Infos {...props} />);
+    const wrapper = shallow(<Infos { ...props } />);
    expect(wrapper.html()).toMatchSnapshot();
  });

@ -34,13 +34,13 @@ describe('<PackageSidebar /> : <Infos />', () => {
    const props = {
      license: 'MIT',
    }
-    const wrapper = shallow(<Infos {...props} />);
+    const wrapper = shallow(<Infos { ...props } />);
    expect(wrapper.html()).toMatchSnapshot();
  });

  test('should load the Info component with repository only', () => {
    const props = { repository: 'https://github.com/verdaccio/verdaccio' };
-    const wrapper = shallow(<Infos {...props} />);
+    const wrapper = shallow(<Infos { ...props } />);
    expect(wrapper.html()).toMatchSnapshot();
  });
 });
--- a/test/unit/webui/components/PackageSidebar/lastsync.spec.js
+++ b/test/unit/webui/components/PackageSidebar/lastsync.spec.js
@ -8,7 +8,7 @@ import LastSync from '../../../../../src/webui/components/PackageSidebar/modules

 describe('<PackageSidebar /> : <LastSync />', () => {
  test('should check the default props condition', () => {
-    const wrapper = shallow(<LastSync/>);
+    const wrapper = shallow(<LastSync />);
    expect(wrapper.html()).toMatchSnapshot();
  });

@ -21,7 +21,7 @@ describe('<PackageSidebar /> : <LastSync />', () => {
        { time: '2017/11/08, 22:47:16', version: '2.6.6' }
      ]
    };
-    const wrapper = shallow(<LastSync {...props}/>);
+    const wrapper = shallow(<LastSync { ...props } />);
    expect(wrapper.html()).toMatchSnapshot();
  });
 });
--- a/test/unit/webui/components/PackageSidebar/maintainerInfo.spec.js
+++ b/test/unit/webui/components/PackageSidebar/maintainerInfo.spec.js
@ -20,7 +20,7 @@ describe('<PackageSidebar /> : <Maintainers /> <MaintainerInfo />', () => {
      name: 'test',
      avatar: 'http://xyz.com/profile.jpg'
    };
-    const wrapper = shallow(<MaintainerInfo {...props} />);
+    const wrapper = shallow(<MaintainerInfo { ...props } />);
    expect(wrapper.find('.maintainer').prop('title')).toEqual('test');
    expect(wrapper.find('img').prop('src')).toEqual(
      'http://xyz.com/profile.jpg'
--- a/test/unit/webui/components/PackageSidebar/maintainers.spec.js
+++ b/test/unit/webui/components/PackageSidebar/maintainers.spec.js
@ -12,7 +12,7 @@ describe('<PackageSidebar /> : <Maintainers />', () => {
  let instance;

  beforeEach(() => {
-    wrapper = mount(<Maintainers packageMeta={packageMeta} />);
+    wrapper = mount(<Maintainers packageMeta={ packageMeta } />);
    instance = wrapper.instance();
  });

--- a/test/unit/webui/components/PackageSidebar/module.spec.js
+++ b/test/unit/webui/components/PackageSidebar/module.spec.js
@ -20,7 +20,7 @@ describe('<PackageSidebar /> : <Module />', () => {
      className: 'module-component'
    };
    const wrapper = shallow(
-      <Module {...props}>
+      <Module { ...props }>
        <p>test children</p>
      </Module>
    );
--- a/test/unit/webui/components/PackageSidebar/moduleContentPlaceholder.spec.js
+++ b/test/unit/webui/components/PackageSidebar/moduleContentPlaceholder.spec.js
@ -17,7 +17,7 @@ describe('<PackageSidebar /> : <ModuleContentPlaceholder />', () => {
    const props = {
      text: 'Test text'
    };
-    const wrapper = shallow(<ModuleContentPlaceholder {...props} />);
+    const wrapper = shallow(<ModuleContentPlaceholder { ...props } />);
    expect(wrapper.html()).toMatchSnapshot();
  });
 });
--- a/test/unit/webui/components/PackageSidebar/packageSidebar.spec.js
+++ b/test/unit/webui/components/PackageSidebar/packageSidebar.spec.js
@ -25,7 +25,7 @@ describe('<PackageSidebar /> component', () => {
  });

  test('should load the packageMeta', () => {
-    const wrapper = mount(<PackageSidebar packageName={'verdaccio'} />);
+    const wrapper = mount(<PackageSidebar packageName={ 'verdaccio' } />);
    const { loadPackageData } = wrapper.instance();
    loadPackageData('verdaccio').then(response => {
      expect(wrapper.state('packageMeta')).toEqual(packageMeta);
--- a/test/unit/webui/components/PackageSidebar/peerDependencies.spec.js
+++ b/test/unit/webui/components/PackageSidebar/peerDependencies.spec.js
@ -48,7 +48,7 @@ describe('<PackageSidebar /> : <PeerDependencies />', () => {
      semver: '^5.1.0',
      'unix-crypt-td-js': '^1.0.0'
    };
-    const wrapper = mount(<PeerDependencies dependencies={peerDependencies} />);
+    const wrapper = mount(<PeerDependencies dependencies={ peerDependencies } />);

    expect(wrapper.find('h2').text()).toEqual(TITLE);
    expect(wrapper.find(`.${DEP_ITEM_CLASS}`)).toHaveLength(Object.keys(peerDependencies).length);
--- a/test/unit/webui/components/noitems.spec.js
+++ b/test/unit/webui/components/noitems.spec.js
@ -18,7 +18,7 @@ describe('<NoItem /> component', () => {
    const props = {
      text: 'This is a test string'
    };
-    const wrapper = shallow(<NoItems {...props} />);
+    const wrapper = shallow(<NoItems { ...props } />);
    expect(wrapper.find('h2').text()).toEqual('This is a test string');
    expect(wrapper.html()).toMatchSnapshot();
  });
--- a/test/unit/webui/components/notfound.spec.js
+++ b/test/unit/webui/components/notfound.spec.js
@ -10,7 +10,7 @@ console.error = jest.fn();

 describe('<NotFound /> component', () => {
  test('should load the component in default state', () => {
-    const wrapper = mount(<NotFound pkg='test' />);
+    const wrapper = mount(<NotFound pkg={ "test" } />);
    expect(wrapper.html()).toMatchSnapshot();
  });

@ -18,7 +18,7 @@ describe('<NotFound /> component', () => {
    const props = {
      pkg: 'verdaccio'
    };
-    const wrapper = shallow(<NotFound {...props} />);
+    const wrapper = shallow(<NotFound { ...props } />);
    expect(wrapper.find('h1').text()).toEqual('Error 404 - verdaccio');
    expect(wrapper.find('p').text()).toEqual(
      'Oops, The package you are trying to access does not exist.'
--- a/test/unit/webui/components/package.spec.js
+++ b/test/unit/webui/components/package.spec.js
@ -32,7 +32,7 @@ describe('<Package /> component', () => {
    };

    const wrapper = shallow(
-      <Package {...props} />
+      <Package { ...props } />
    );


@ -51,7 +51,9 @@ describe('<Package /> component', () => {
    expect(wrapper.find(Field).someWhere(n => {
      return (
        n.children().first().get(0).props.children[0].props.text === 'Description' &&
-        n.children().childAt(1).containsMatchingElement(<span>{props.description}</span>)
+        n.children().childAt(1).containsMatchingElement(<span>
+          {props.description}
+                                                        </span>)
      )
    })).toBe(true);

@ -63,7 +65,7 @@ describe('<Package /> component', () => {

  });

-  it.skip('should load the component without author', () => {
+  test.skip('should load the component without author', () => {
    const props = {
      name: 'verdaccio',
      version: '1.0.0',
@ -77,7 +79,7 @@ describe('<Package /> component', () => {
      description: 'Private NPM repository'
    };
    const wrapper = shallow(
-      <Package {...props} />
+      <Package { ...props } />
    );

    // integration expectations
--- a/test/unit/webui/components/packagedetail.spec.js
+++ b/test/unit/webui/components/packagedetail.spec.js
@ -20,7 +20,7 @@ describe('<PackageDetail /> component', () => {
      readMe: 'Test readme',
      packageName: WEB_TITLE
    };
-    const wrapper = shallow(<PackageDetail {...props} />);
+    const wrapper = shallow(<PackageDetail { ...props } />);

    expect(wrapper.find('h1').text()).toEqual(WEB_TITLE);
    expect(
--- a/test/unit/webui/components/packagelist.spec.js
+++ b/test/unit/webui/components/packagelist.spec.js
@ -15,7 +15,7 @@ describe('<PackageList /> component', () => {
      help: true
    };
    const wrapper = mount(
-      <PackageList packages={props.packages} help={props.help} />
+      <PackageList help={ props.help } packages={ props.packages } />
    );
    expect(wrapper.find(Help).exists()).toBeTruthy();

@ -50,7 +50,7 @@ describe('<PackageList /> component', () => {

    const wrapper = mount(
      <BrowserRouter>
-        <PackageList packages={props.packages} help={props.help} />
+        <PackageList help={ props.help } packages={ props.packages } />
      </BrowserRouter>
    );

--- a/test/unit/webui/components/readme.spec.js
+++ b/test/unit/webui/components/readme.spec.js
@ -8,12 +8,12 @@ import Readme from '../../../../src/webui/components/Readme/index';

 describe('<Readme /> component', () => {
  test('should load the component in default state', () => {
-    const wrapper = mount(<Readme description='test' />);
+    const wrapper = mount(<Readme description={ "test" } />);
    expect(wrapper.html()).toMatchSnapshot();
  });

  test('should dangerously set html', () => {
-    const wrapper = shallow(<Readme description='<h1>This is a test string</h1>' />);
+    const wrapper = shallow(<Readme description={ "<h1>This is a test string</h1>" } />);
    expect(wrapper.html()).toEqual(
      '<div class="markdown-body"><h1>This is a test string</h1></div>'
    );