refactor: action bar [WIP]

src/webui/components/Author/index.js

@@ -38,7 +38,7 @@ class Authors extends Component<any, any> {
     if (!author) {
       return null;
     }
-    console.log(author);
+
     const avatarComponent = <Avatar alt={author.name} src={author.avatar} />;
     return (
       <List subheader={<Heading variant={'subheading'}>{'Author'}</Heading>}>

src/webui/components/Author/styles.js

@@ -16,5 +16,6 @@ export const Heading = styled(Typography)`
 export const AuthorListItem = styled(ListItem)`
   && {
     padding-left: 0;
+    padding-right: 0;
   }
 `;

src/webui/components/DetailSidebar/index.js

@@ -1,9 +1,14 @@
+/* eslint-disable */
 import React, {Component} from 'react';
 
-import Card from '@material-ui/core/Card';
-import CardContent from '@material-ui/core/CardContent';
-import List from '@material-ui/core/List';
-import ListItemText from '@material-ui/core/ListItemText';
+import Add from '@material-ui/icons/Add';
+import BugReport from '@material-ui/icons/BugReport';
+import Card from '@material-ui/core/Card/index';
+import CardContent from '@material-ui/core/CardContent/index';
+import Home from '@material-ui/icons/Home';
+import List from '@material-ui/core/List/index';
+import ListItemText from '@material-ui/core/ListItemText/index';
+import Tooltip from '@material-ui/core/Tooltip/index';
 
 import Install from '../Install';
 import Author from '../Author';
@@ -11,9 +16,10 @@ import License from '../License';
 import Repository from '../Repository';
 import Developers from '../Developers';
 import Engine from '../Engines';
+import Dist from '../Dist';
 import { DetailContextConsumer } from '../../pages/version/index';
 
-import { TitleListItem, TitleAvatar } from './styles';
+import { TitleListItem, TitleAvatar, Fab } from './styles';
 
 class DetailSidebar extends Component {
   render() {
@@ -33,10 +39,11 @@ class DetailSidebar extends Component {
             {this.renderCopyCLI()}
             {this.renderRepository()}
             {this.renderEngine()}
+            {this.renderDist()}
             {this.renderAuthor()}
             {this.renderMaintainers()}
             {this.renderContributors()}
-            {this.renderLicense()}
+            {/* {this.renderLicense()} */}
           </CardContent>
         </Card>
       </>
@@ -47,11 +54,23 @@ class DetailSidebar extends Component {
       return (
         <List>
           <TitleListItem alignItems={"flex-start"}>
-            <TitleAvatar>{packageName[0]}</TitleAvatar>
+            {/* <TitleAvatar>{packageName[0]}</TitleAvatar> */}
             <ListItemText
-              primary={packageName}
+              primary={<b>{packageName}</b>}
               secondary={packageMeta.latest.description}
             />
+            
+          </TitleListItem>
+          <TitleListItem alignItems={"flex-start"}>
+            <Tooltip title="Visit Homepage">
+              <Fab size={'small'}><Home /></Fab>
+            </Tooltip>
+            <Tooltip title="Report a bug">
+              <Fab size={'small'}><BugReport/></Fab>
+            </Tooltip>
+            <Tooltip title="Download Tarball">
+              <Fab size={'small'}><Add /></Fab>
+            </Tooltip>
           </TitleListItem>
         </List>
       );
@@ -84,6 +103,10 @@ class DetailSidebar extends Component {
   renderEngine = () => {
     return <Engine />;
   }
+
+  renderDist = () => {
+    return <Dist />;
+  }
 }
 
 export default DetailSidebar;

src/webui/components/DetailSidebar/styles.js

@@ -5,6 +5,7 @@
 
 import styled from 'react-emotion';
 import Avatar from '@material-ui/core/Avatar/index';
+import { default as MuiFab } from '@material-ui/core/Fab';
 import ListItem from '@material-ui/core/ListItem/index';
 
 import colors from '../../utils/styles/colors';
@@ -12,6 +13,7 @@ import colors from '../../utils/styles/colors';
 export const TitleListItem = styled(ListItem)`
   && {
     padding-left: 0;
+    padding-right: 0;
   }
 `;
 
@@ -22,3 +24,11 @@ export const TitleAvatar = styled(Avatar)`
     text-transform: capitalize;
   }
 `;
+
+export const Fab = styled(MuiFab)`
+  && {
+    background-color: ${colors.primary};
+    color: ${colors.white};
+    margin-right: 10px;
+  }
+`;

src/webui/components/Dist/index.js

@@ -0,0 +1,59 @@
+/**
+ * @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 fileSizeSI from '../../utils/file-size';
+
+class Dist extends Component<any, any> {
+  render() {
+    return (
+      <DetailContextConsumer>
+        {context => {
+          return this.renderDist(context);
+        }}
+      </DetailContextConsumer>
+    );
+  }
+
+  renderChips(dist, license) {
+    const distDict = {
+      'file-count': dist.fileCount,
+      size: dist.unpackedSize && fileSizeSI(dist.unpackedSize),
+      license,
+    };
+
+    const chipsList = Object.keys(distDict).reduce((componentList, title, key) => {
+      const value = distDict[title];
+      if (value) {
+        const label = (
+          <span>
+            <b>{title.split('-').join(' ')}</b>: {value}
+          </span>
+        );
+        componentList.push(<DistChips label={label} key={key} />);
+      }
+      return componentList;
+    }, []);
+
+    return chipsList;
+  }
+
+  renderDist = ({ packageMeta }) => {
+    const { dist = {}, license } = packageMeta.latest;
+
+    return (
+      <List subheader={<Heading variant={'subheading'}>{'Latest Distribution'}</Heading>}>
+        <DistListItem>{this.renderChips(dist, license)}</DistListItem>
+      </List>
+    );
+  };
+}
+
+export default Dist;

src/webui/components/Dist/styles.js

@@ -0,0 +1,40 @@
+/**
+ * @prettier
+ * @flow
+ */
+
+import styled from 'react-emotion';
+import Fab from '@material-ui/core/Fab/index';
+import Chip from '@material-ui/core/Chip/index';
+import ListItem from '@material-ui/core/ListItem/index';
+import Typography from '@material-ui/core/Typography/index';
+
+import colors from '../../utils/styles/colors';
+
+export const Heading = styled(Typography)`
+  && {
+    font-weight: 700;
+    text-transform: capitalize;
+  }
+`;
+
+export const DistListItem = styled(ListItem)`
+  && {
+    padding-left: 0;
+    padding-right: 0;
+  }
+`;
+
+export const DistChips = styled(Chip)`
+  && {
+    margin-right: 5px;
+    text-transform: capitalize;
+  }
+`;
+
+export const DownloadButton = styled(Fab)`
+  && {
+    background-color: ${colors.primary};
+    color: ${colors.white};
+  }
+`;

src/webui/components/Engines/index.js

@@ -1,19 +1,21 @@
 /* eslint-disable */
 import React, {Component} from 'react';
 
-import Grid from '@material-ui/core/Grid';
-import List from '@material-ui/core/List';
-import ListItemText from '@material-ui/core/ListItemText';
-import Toys from '@material-ui/icons/Toys';
-import SettingsIcon from '@material-ui/icons/Settings';
+import Avatar from '@material-ui/core/Avatar/index';
+import Grid from '@material-ui/core/Grid/index';
+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, EngineAvatar } from './styles';
+import { Heading, EngineListItem } from './styles';
+import node from './img/node.png';
+import npm from '../Install/img/npm.svg'
+
 
 const ICONS = {
-  node: <SettingsIcon />,
-  NPM: <Toys />,
+  'node-JS': <Avatar src={node} />,
+  'NPM-version': <Avatar src={npm} />,
 }
 
 class Engine extends Component {
@@ -34,8 +36,8 @@ class Engine extends Component {
     }
 
     const engineDict = {
-      node: engines.node,
-      NPM: engines.npm
+      'node-JS': engines.node,
+      'NPM-version': engines.npm
     }
 
     const items = Object.keys(engineDict).reduce((markup, text, key) => {
@@ -63,11 +65,9 @@ class Engine extends Component {
 
   renderListItems = (heading, text) => {
     return (
-      <List subheader={<Heading variant={"subheading"}>{text}</Heading>}>
+      <List subheader={<Heading variant={"subheading"}>{text.split('-').join(' ')}</Heading>}>
         <EngineListItem>
-          <EngineAvatar>
-            { ICONS[text] }
-          </EngineAvatar>
+          { ICONS[text] }
           <ListItemText primary={heading} />
         </EngineListItem>
       </List>

src/webui/components/Engines/styles.js

@@ -4,12 +4,9 @@
  */
 
 import styled from 'react-emotion';
-import Avatar from '@material-ui/core/Avatar';
 import ListItem from '@material-ui/core/ListItem/index';
 import Typography from '@material-ui/core/Typography/index';
 
-import colors from '../../utils/styles/colors';
-
 export const Heading = styled(Typography)`
   && {
     font-weight: 700;
@@ -22,10 +19,3 @@ export const EngineListItem = styled(ListItem)`
     padding-left: 0;
   }
 `;
-
-export const EngineAvatar = styled(Avatar)`
-  && {
-    color: ${colors.greySuperLight};
-    background-color: ${colors.primary};
-  }
-`;

src/webui/components/Repository/index.js

@@ -3,13 +3,13 @@
 import React, {Component} from 'react';
 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 { DetailContextConsumer } from '../../pages/version/index';
 import CopyToClipBoard from '../CopyToClipBoard';
 
-import { Heading, GithubLink, GithubLogo, RepositoryListItem } from './styles';
+import { Heading, GithubLink, RepositoryListItem } from './styles';
+import git from './img/git.png';
 
 class Repository extends Component<any, any> {
   render() {
@@ -23,23 +23,22 @@ class Repository extends Component<any, any> {
   };
 
   renderRepositoryText(url) {
-    return (<GithubLink href={url}>{url}</GithubLink>);
+    return (<GithubLink href={url} target={"_blank"}>{url}</GithubLink>);
   }
 
   renderRepository = ({packageMeta}) => {
-    const { repository } = packageMeta.latest;
+    const { repository, homepage } = packageMeta.latest;
     if (!repository) {
       return null;
     }
 
-    const { url } = repository;
+    // we prefer homepage first, because it's more cleaner
+    const url = homepage || repository.url;
     return (
       <>
         <List dense={true} subheader={<Heading variant={"subheading"}>{'Repository'}</Heading>}>
           <RepositoryListItem>
-            <Avatar>
-              <GithubLogo />
-            </Avatar>
+            <Avatar src={git} />
             <ListItemText primary={(<CopyToClipBoard text={this.renderRepositoryText(url)} />)} />
           </RepositoryListItem>
         </List>

src/webui/utils/file-size.js

@@ -0,0 +1,5 @@
+export default function fileSizeSI(a, b, c, d, e) {
+    return (b = Math, c = b.log, d = 1e3, e = c(a) / c(d) | 0, a / b.pow(d, e)).toFixed(2)
+        + ' ' + (e ? 'kMGTPEZY'[--e] + 'B' : 'Bytes');
+};
+