chore: fix comma-dangle and react/jsx-sort-props

enable react/jsx-sort-props
enable camelcase on ui
enable semi global

src/webui/components/PackageSidebar/Module/index.jsx

@@ -21,5 +21,5 @@ Module.propTypes = {
   title: PropTypes.string.isRequired,
   description: PropTypes.string,
   children: PropTypes.any.isRequired,
-  className: PropTypes.string
+  className: PropTypes.string,
 };

src/webui/components/PackageSidebar/ModuleContentPlaceholder/index.jsx

@@ -7,5 +7,5 @@ export default function ModuleContentPlaceholder({text}) {
   return <p className={classes.emptyPlaceholder}>{text}</p>;
 }
 ModuleContentPlaceholder.propTypes = {
-  text: PropTypes.string.isRequired
+  text: PropTypes.string.isRequired,
 };

src/webui/components/PackageSidebar/index.jsx

@@ -11,7 +11,7 @@ import {
   formatLicense,
   formatRepository,
   getLastUpdatedPackageTime,
-  getRecentReleases
+  getRecentReleases,
 } from '../../utils/package';
 import API from '../../utils/api';
 
@@ -19,7 +19,7 @@ export default class PackageSidebar extends React.Component {
   state = {};
 
   static propTypes = {
-    packageName: PropTypes.string.isRequired
+    packageName: PropTypes.string.isRequired,
   };
 
   constructor(props) {
@@ -38,12 +38,12 @@ export default class PackageSidebar extends React.Component {
       packageMeta = await API.request(`sidebar/${packageName}`, 'GET');
     } catch (err) {
       this.setState({
-        failed: true
+        failed: true,
       });
     }
 
     this.setState({
-      packageMeta
+      packageMeta,
     });
   }
 
@@ -73,14 +73,14 @@ export default class PackageSidebar extends React.Component {
         <aside className="sidebar-info">
           {time && (
             <LastSync
-              recentReleases={recentReleases}
               lastUpdated={lastUpdated}
+              recentReleases={recentReleases}
             />
           )}
           <Infos
             homepage={homepage}
-            repository={repository}
             license={license}
+            repository={repository}
           />
           {/* TODO: Refacor later, when we decide to show only maintainers/authors */}
           <Maintainers packageMeta={packageMeta} />

src/webui/components/PackageSidebar/modules/Dependencies/index.jsx

@@ -32,7 +32,7 @@ const renderDependenciesList = (dependencies, dependenciesList) => {
 const Dependencies = ({dependencies = {}, title = 'Dependencies'}) => {
   const dependenciesList = Object.keys(dependencies);
   return (
-    <Module title={title} className={classes.dependenciesModule}>
+    <Module className={classes.dependenciesModule} title={title}>
       {dependenciesList.length > 0 ? (
         renderDependenciesList(dependencies, dependenciesList)
       ) : (
@@ -44,7 +44,7 @@ const Dependencies = ({dependencies = {}, title = 'Dependencies'}) => {
 
 Dependencies.propTypes = {
   dependencies: PropTypes.object,
-  title: PropTypes.string
+  title: PropTypes.string,
 };
 
 export default Dependencies;

src/webui/components/PackageSidebar/modules/Infos/index.jsx

@@ -8,7 +8,7 @@ import classes from './style.scss';
 const renderSection = (title, url) => (
   <li>
     <span>{title}</span>
-    <a href={url} target="_blank" rel="noopener noreferrer">
+    <a href={url} rel="noopener noreferrer" target="_blank">
       {url}
     </a>
   </li>
@@ -16,22 +16,25 @@ const renderSection = (title, url) => (
 
 const Infos = ({homepage, repository, license}) => {
   const showInfo = homepage || repository || license;
-  return <Module title="Infos" className={classes.infosModule}>
+  return (
-      {showInfo ? <ul>
+    <Module className={classes.infosModule} title="Infos">
+      {showInfo ? (
+        <ul>
           {homepage && renderSection('Homepage', homepage)}
           {repository && renderSection('Repository', repository)}
-          {license && <li>
+          {license && (
+          <li>
             <span>License</span>
             <span>{license}</span>
-            </li>}
+          </li>)}
-        </ul> : <ModuleContentPlaceholder text="Not Available!" />}
+        </ul>) : <ModuleContentPlaceholder text="Not Available!" />}
-    </Module>;
+    </Module>);
 };
 
 Infos.propTypes = {
   homepage: PropTypes.string,
   repository: PropTypes.string,
-  license: PropTypes.string
+  license: PropTypes.string,
 };
 
 export default Infos;

src/webui/components/PackageSidebar/modules/LastSync/index.jsx

@@ -24,9 +24,9 @@ const renderRecentReleases = (recentReleases) => {
 const LastSync = ({recentReleases = [], lastUpdated = ''}) => {
   return (
     <Module
-      title="Last Sync"
-      description={lastUpdated}
       className={classes.releasesModule}
+      description={lastUpdated}
+      title="Last Sync"
     >
       {recentReleases.length ? (
         renderRecentReleases(recentReleases)
@@ -39,7 +39,7 @@ const LastSync = ({recentReleases = [], lastUpdated = ''}) => {
 
 LastSync.propTypes = {
   recentReleases: propTypes.array,
-  lastUpdated: propTypes.string
+  lastUpdated: propTypes.string,
 };
 
 export default LastSync;

src/webui/components/PackageSidebar/modules/Maintainers/MaintainerInfo/index.jsx

@@ -7,7 +7,7 @@ export default function MaintainerInfo({title, name, avatar}) {
   let avatarDescription = `${title} ${name}'s avatar`;
   return (
     <div className={classes.maintainer} title={name}>
-      <img src={avatar} alt={avatarDescription} title={avatarDescription}/>
+      <img alt={avatarDescription} src={avatar} title={avatarDescription} />
       <span className="maintainer-name">{name}</span>
     </div>
   );
@@ -15,5 +15,5 @@ export default function MaintainerInfo({title, name, avatar}) {
 MaintainerInfo.propTypes = {
   title: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
-  avatar: PropTypes.string.isRequired
+  avatar: PropTypes.string.isRequired,
 };

src/webui/components/PackageSidebar/modules/Maintainers/index.jsx

@@ -16,7 +16,7 @@ const CONTRIBUTORS_TO_SHOW = 5;
 
 export default class Maintainers extends React.Component {
   static propTypes = {
-    packageMeta: PropTypes.object.isRequired
+    packageMeta: PropTypes.object.isRequired,
   };
 
   state = {};
@@ -57,7 +57,7 @@ export default class Maintainers extends React.Component {
 
   handleShowAllContributors() {
     this.setState({
-      showAllContributors: true
+      showAllContributors: true,
     });
   }
 
@@ -70,10 +70,10 @@ export default class Maintainers extends React.Component {
     ).map((contributor, index) => {
       return (
         <MaintainerInfo
-          key={index}
-          title="Contributors"
-          name={contributor.name}
           avatar={contributor.avatar}
+          key={index}
+          name={contributor.name}
+          title="Contributors"
         />
       );
     });
@@ -86,17 +86,17 @@ export default class Maintainers extends React.Component {
           {author &&
             author.name && (
               <MaintainerInfo
-                title="Author"
-                name={author.name}
                 avatar={author.avatar}
+                name={author.name}
+                title="Author"
               />
             )}
           {this.renderContributors()}
         </ul>
         {!this.showAllContributors && (
           <button
-            onClick={this.handleShowAllContributors}
             className={classes.showAllContributors}
+            onClick={this.handleShowAllContributors}
             title="Current list only show the author and first 5 contributors unique by name"
           >
             Show all contributor
@@ -110,7 +110,7 @@ export default class Maintainers extends React.Component {
     let author = this.author;
     const contributors = this.renderContributors();
     return (
-      <Module title="Maintainers" className={classes.maintainersModule}>
+      <Module className={classes.maintainersModule} title="Maintainers">
         {contributors.length || has(author, 'name') ? (
           this.renderAuthorAndContributors(author)
         ) : (