fix: verdaccio/jsx-no-style

Author: griffithtp

src/components/AutoComplete/AutoComplete.tsx

@@ -1,4 +1,5 @@
 import React, { KeyboardEvent } from 'react';
+import { css } from 'emotion';
 import Autosuggest from 'react-autosuggest';
 import match from 'autosuggest-highlight/match';
 import parse from 'autosuggest-highlight/parse';
@@ -53,12 +54,14 @@ const renderSuggestion = (suggestion, { query, isHighlighted }): JSX.Element =>
     <MenuItem component="div" selected={isHighlighted}>
       <div>
         {parts.map((part, index) => {
-          return part.highlight ? (
-            <a href={suggestion.link} key={String(index)} style={{ fontWeight: fontWeight.semiBold }}>
-              {part.text}
-            </a>
-          ) : (
-            <a href={suggestion.link} key={String(index)} style={{ fontWeight: fontWeight.light }}>
+          const fw = part.highlight ? fontWeight.semiBold : fontWeight.light;
+          return (
+            <a
+              className={css`
+                font-weight: ${fw};
+              `}
+              href={suggestion.link}
+              key={String(index)}>
               {part.text}
             </a>
           );

src/components/Header/Header.tsx

@@ -1,5 +1,6 @@
 import React, { SyntheticEvent, Component, Fragment, ReactElement } from 'react';
 import { Link } from 'react-router-dom';
+import { css } from 'emotion';
 
 import Button from '@material-ui/core/Button';
 import IconButton from '@material-ui/core/IconButton';
@@ -141,7 +142,11 @@ class Header extends Component<Props, State> {
     const { withoutSearch = false } = this.props;
     return (
       <LeftSide>
-        <Link style={{ marginRight: '1em' }} to={'/'}>
+        <Link
+          className={css`
+            margin-right: '1em';
+          `}
+          to={'/'}>
           {this.renderLogo()}
         </Link>
         {!withoutSearch && (

src/components/Login/Login.tsx

@@ -10,6 +10,7 @@ import InputLabel from '@material-ui/core/InputLabel';
 import Input from '@material-ui/core/Input';
 import FormControl from '@material-ui/core/FormControl';
 import FormHelperText from '@material-ui/core/FormHelperText';
+import { css } from 'emotion';
 
 // @ts-ignore
 import classes from './login.scss';
@@ -192,7 +193,13 @@ export default class LoginModal extends Component<Partial<LoginModalProps>, Logi
       form: { password },
     } = this.state;
     return (
-      <FormControl error={!password.value && !password.pristine} fullWidth={true} required={password.required} style={{ marginTop: '8px' }}>
+      <FormControl
+        className={css`
+          margin-top: '8px';
+        `}
+        error={!password.value && !password.pristine}
+        fullWidth={true}
+        required={password.required}>
         <InputLabel htmlFor={'password'}>{'Password'}</InputLabel>
         <Input id={'login--form-password'} onChange={this.handlePasswordChange} placeholder={'Your strong password'} type={'password'} value={password.value} />
         {!password.value && !password.pristine && <FormHelperText id={'password-error'}>{password.helperText}</FormHelperText>}

src/components/RegistryInfoContent/RegistryInfoContent.tsx

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import { css } from 'emotion';
 
 import { Props, State } from './types';
 import { CommandContainer } from './styles';
@@ -14,7 +15,12 @@ import { NODE_MANAGER } from '../../utils/constants';
 function TabContainer({ children }): JSX.Element {
   return (
     <CommandContainer>
-      <Typography component="div" style={{ padding: 0, minHeight: 170 }}>
+      <Typography
+        className={css`
+          padding: 0;
+          min-height: 170;
+        `}
+        component="div">
         {children}
       </Typography>
     </CommandContainer>

src/components/Search/Search.tsx

@@ -1,5 +1,6 @@
 import React, { KeyboardEvent, Component, ReactElement } from 'react';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
+import { css } from 'emotion';
 
 import { default as IconSearch } from '@material-ui/icons/Search';
 import InputAdornment from '@material-ui/core/InputAdornment';
@@ -50,6 +51,28 @@ export class Search extends Component<RouteComponentProps<{}>, State> {
     this.requestList = [];
   }
 
+  public render(): ReactElement<HTMLElement> {
+    const { suggestions, search, loaded, loading, error } = this.state;
+
+    return (
+      <AutoComplete
+        color={colors.white}
+        onBlur={this.handleOnBlur}
+        onChange={this.handleSearch}
+        onCleanSuggestions={this.handlePackagesClearRequested}
+        onClick={this.handleClickSearch}
+        onSuggestionsFetch={debounce(this.handleFetchPackages, CONSTANTS.API_DELAY)}
+        placeholder={CONSTANTS.PLACEHOLDER_TEXT}
+        startAdornment={this.getAdorment()}
+        suggestions={suggestions}
+        suggestionsError={error}
+        suggestionsLoaded={loaded}
+        suggestionsLoading={loading}
+        value={search}
+      />
+    );
+  }
+
   /**
    * Cancel all the requests which are in pending state.
    */
@@ -146,33 +169,15 @@ export class Search extends Component<RouteComponentProps<{}>, State> {
     }
   };
 
-  public render(): ReactElement<HTMLElement> {
-    const { suggestions, search, loaded, loading, error } = this.state;
-
-    return (
-      <AutoComplete
-        color={colors.white}
-        onBlur={this.handleOnBlur}
-        onChange={this.handleSearch}
-        onCleanSuggestions={this.handlePackagesClearRequested}
-        onClick={this.handleClickSearch}
-        onSuggestionsFetch={debounce(this.handleFetchPackages, CONSTANTS.API_DELAY)}
-        placeholder={CONSTANTS.PLACEHOLDER_TEXT}
-        startAdornment={this.getAdorment()}
-        suggestions={suggestions}
-        suggestionsError={error}
-        suggestionsLoaded={loaded}
-        suggestionsLoading={loading}
-        value={search}
-      />
-    );
-  }
-
   private requestList: AbortControllerInterface[];
 
   public getAdorment(): JSX.Element {
     return (
-      <InputAdornment position={'start'} style={{ color: colors.white }}>
+      <InputAdornment
+        className={css`
+          color: ${colors.white};
+        `}
+        position={'start'}>
         <IconSearch />
       </InputAdornment>
     );