refactor: adds engine part in packag sidebar

src/webui/components/DetailSidebar/index.js

@@ -12,6 +12,7 @@ import Author from '../Author';
 import License from '../License';
 import Repository from '../Repository';
 import Developers from '../Developers';
+import Engine from '../Engines';
 import { DetailContextConsumer } from '../../pages/version/index';
 class DetailSidebar extends Component {
   render() {
@@ -30,6 +31,7 @@ class DetailSidebar extends Component {
             {this.renderTitle(packageName, packageMeta)}
             {this.renderCopyCLI()}
             {this.renderRepository()}
+            {this.renderEngine()}
             {this.renderAuthor()}
             {this.renderMaintainers()}
             {this.renderContributors()}
@@ -46,7 +48,7 @@ class DetailSidebar extends Component {
           <ListItem alignItems={"flex-start"}>
             <Avatar style={{textTransform: 'capitalize'}}>{packageName[0]}</Avatar>
             <ListItemText
-              primary={<span style={{textTransform: 'capitalize'}}>{packageName}</span>}
+              primary={packageName}
               secondary={packageMeta.latest.description}
             />
           </ListItem>
@@ -77,6 +79,10 @@ class DetailSidebar extends Component {
   renderAuthor = () => {
     return <Author />;
   }
+
+  renderEngine = () => {
+    return <Engine />;
+  }
 }
 
 export default DetailSidebar;

src/webui/components/Engines/index.js

@@ -0,0 +1,81 @@
+/* eslint-disable */
+import React, {Component} from 'react';
+
+import Avatar from '@material-ui/core/Avatar';
+import Grid from '@material-ui/core/Grid';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import Toys from '@material-ui/icons/Toys';
+import SettingsIcon from '@material-ui/icons/Settings';
+
+import { DetailContextConsumer } from '../../pages/version/index';
+
+import { Heading } from './styles';
+
+const ICONS = {
+  node: <SettingsIcon />,
+  NPM: <Toys />,
+}
+
+class Engine extends Component {
+  render() {
+    return (
+      <DetailContextConsumer>
+        {(context) => {
+          return this.renderEngine(context);
+        }}
+      </DetailContextConsumer>
+    );
+  };
+
+  renderEngine = ({packageMeta}) => {
+    const { engines } = packageMeta.latest;
+    if (!engines) {
+      return null;
+    }
+
+    const engineDict = {
+      node: engines.node,
+      NPM: engines.npm
+    }
+
+    const items = Object.keys(engineDict).reduce((markup, text, key) => {
+      const heading = engineDict[text]
+      if (heading){
+        markup.push(
+          <Grid item={true} xs={6} key={key}>
+            {this.renderListItems(heading, text)}
+          </Grid>
+        );
+      }
+      return markup;
+    }, []);
+
+    if (items.length < 1) {
+      return null;
+    }
+
+    return (
+      <Grid container={true}>
+        {items}
+      </Grid>
+    );
+  }
+
+  renderListItems = (text, value) => {
+    return (
+      <List subheader={<Heading variant={"subheading"}>{value}</Heading>}>
+        <ListItem>
+          <Avatar>
+            { ICONS[value] }
+          </Avatar>
+          <ListItemText primary={text} />
+        </ListItem>
+      </List>
+    );
+  }
+}
+
+
+export default Engine;

src/webui/components/Engines/styles.js

@@ -0,0 +1,14 @@
+/**
+ * @prettier
+ * @flow
+ */
+
+import styled from 'react-emotion';
+import Typography from '@material-ui/core/Typography/index';
+
+export const Heading = styled(Typography)`
+  && {
+    font-weight: 700;
+    text-transform: capitalize;
+  }
+`;

src/webui/components/License/index.js

@@ -4,7 +4,7 @@ import Avatar from '@material-ui/core/Avatar';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
-import NotesIcon from '@material-ui/icons/Notes';
+import BookIcon from '@material-ui/icons/Book';
 
 import { DetailContextConsumer } from '../../pages/version/index';
 
@@ -38,7 +38,7 @@ class License extends Component {
     return (
       <ListItem>
         <Avatar>
-          <NotesIcon />
+          <BookIcon />
         </Avatar>
         <ListItemText primary={license} />
       </ListItem>