chore: add repository, license and author

src/webui/components/Author/index.js

@@ -0,0 +1,54 @@
+/* eslint no-unused-vars: 0 */
+
+import React, {Component, Fragment} from 'react';
+
+import { DetailContextConsumer } from '../../pages/version/index';
+import Card from '@material-ui/core/Card/index';
+import CardContent from '@material-ui/core/CardContent/index';
+import CopyToClipBoard from '../CopyToClipBoard';
+import CardHeader from '@material-ui/core/CardHeader/index';
+import Avatar from '@material-ui/core/Avatar';
+import CardActions from '@material-ui/core/CardActions';
+import Typography from "@material-ui/core/Typography/index";
+
+class Authors extends Component<any, any> {
+  render() {
+    return (
+      <DetailContextConsumer>
+        {(context) => {
+          return this.renderAuthor(context);
+        }}
+      </DetailContextConsumer>
+    );
+  };
+
+  renderAuthor = ({packageMeta}) => {
+    const { author } = packageMeta.latest;
+    
+    if (!author) {
+      return null;
+    }
+
+    return (
+      <Card>
+        <CardContent>
+          {this.renderAvatar(author)}
+        </CardContent>
+      </Card>
+    );
+  }
+
+  renderAvatar = ({name, email, url, avatar}) => {
+    return (
+      <Fragment>
+        <Avatar aria-label={name} src={avatar} />
+        <Typography color={"textPrimary"} gutterBottom={true} variant={'caption'}>
+          {name}
+        </Typography>
+      </Fragment>
+    );
+  }
+}
+
+
+export default Authors;

src/webui/components/DetailSidebar/index.js

@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import React, {Component, Fragment} from 'react';
 
 import { DetailContextConsumer } from '../../pages/version/index';
 import Typography from '@material-ui/core/Typography/index';
@@ -6,6 +6,9 @@ import Grid from '@material-ui/core/Grid/index';
 
 import Install from '../Install';
 import { Content } from './styles';
+import Authors from '../Author';
+import License from '../License';
+import Repository from '../Repository';
 
 class DetailSidebar extends Component<any, any> {
   render() {
@@ -28,6 +31,12 @@ class DetailSidebar extends Component<any, any> {
           <Grid item={true} xs={12}>
             {this.renderCopyCLI()}
           </Grid>
+          <Grid item={true} xs={12}>
+            {this.renderSecondLevel(8)}
+          </Grid>
+          <Grid item={true} xs={12}>
+            {this.renderRepository()}
+          </Grid>
         </Grid>
       </Content>
     );
@@ -49,6 +58,31 @@ class DetailSidebar extends Component<any, any> {
   renderCopyCLI = () => {
     return <Install />;
   }
+  
+  renderSecondLevel = (spacing = 24) => {
+    return (
+      <Grid container={true} spacing={spacing}>
+        {this.renderAuthor()}
+      </Grid>
+    );
+  }
+
+  renderRepository = () => {
+    return <Repository />;
+  }
+
+  renderAuthor = () => {
+    return (
+      <Fragment>
+        <Grid item={true} xs={6}>
+          <Authors />
+        </Grid>
+        <Grid item={true} xs={6}>
+          <License />
+        </Grid>
+      </Fragment>
+    );
+  }
 }
 
 

src/webui/components/License/index.js

@@ -0,0 +1,51 @@
+/* eslint no-unused-vars: 0 */
+
+import React, {Component, Fragment} from 'react';
+
+import { DetailContextConsumer } from '../../pages/version/index';
+import Card from '@material-ui/core/Card/index';
+import CardContent from '@material-ui/core/CardContent/index';
+import Avatar from '@material-ui/core/Avatar';
+import Notes from '@material-ui/icons/Notes';
+import Typography from "@material-ui/core/Typography/index";
+
+class License extends Component<any, any> {
+  render() {
+    return (
+      <DetailContextConsumer>
+        {(context) => {
+          return this.renderAuthor(context);
+        }}
+      </DetailContextConsumer>
+    );
+  };
+
+  renderAuthor = ({packageMeta}) => {
+    const { license } = packageMeta.latest;
+    if (!license) {
+      return null;
+    }
+
+    return (
+      <Card>
+        <CardContent style={{ textAling: 'center'}}>
+          {this.renderLicense(license)}
+        </CardContent> 
+      </Card>
+    );
+  }
+
+  renderLicense = (license) => {
+    return (
+      <Fragment>
+        <Notes style={{ fontSize: 38 }} />
+        <Typography color={"textPrimary"} gutterBottom={true} variant={'caption'}>
+          {license}
+        </Typography>
+      </Fragment>
+    );
+  }
+}
+
+
+export default License;

src/webui/components/Repository/index.js

@@ -0,0 +1,64 @@
+/* eslint no-unused-vars: 0 */
+/* eslint react/jsx-max-depth: 0 */
+
+import React, {Component, Fragment} from 'react';
+
+import { DetailContextConsumer } from '../../pages/version/index';
+import Card from '@material-ui/core/Card/index';
+import CardContent from '@material-ui/core/CardContent/index';
+import Grid from '@material-ui/core/Grid/index';
+import GitHub from '../../icons/GitHub';
+import CopyToClipBoard from '../CopyToClipBoard';
+import BugReport from '@material-ui/icons/BugReport';
+import CardActions from '@material-ui/core/CardActions/index';
+import Button from '@material-ui/core/Button';
+import {GridRepo} from './styles';
+
+class Repository extends Component<any, any> {
+  render() {
+    return (
+      <DetailContextConsumer>
+        {(context) => {
+          return this.renderAuthor(context);
+        }}
+      </DetailContextConsumer>
+    );
+  };
+
+  renderAuthor = ({packageMeta}) => {
+    const { repository, bugs } = packageMeta.latest;
+    if (!repository) {
+      return null;
+    }
+
+    return (
+      <Card>
+        <CardContent style={{ textAling: 'center'}}>
+          <GridRepo container={true} spacing={24}>
+            {this.renderRepository(repository, bugs)}
+          </GridRepo>
+        </CardContent>
+        <CardActions>
+          <Button size={"small"}>{'Open Bugs'}</Button>
+          <Button size={"small"}>{'Open Repository'}</Button>
+        </CardActions>
+      </Card>
+    );
+  }
+
+  renderRepository = ({url, type}, bugs) => {
+    return (
+      <Fragment>
+        <Grid item={true} xs={3}>
+          <GitHub style={{ fontSize: 45 }} />
+        </Grid>
+        <Grid item={true} xs={9}>
+          <CopyToClipBoard text={url} />
+        </Grid>
+      </Fragment>
+    );
+  }
+}
+
+
+export default Repository;

src/webui/components/Repository/styles.js

@@ -0,0 +1,13 @@
+/**
+ * @prettier
+ * @flow
+ */
+
+import styled from 'react-emotion';
+import Grid from '@material-ui/core/Grid/index';
+
+export const GridRepo = styled(Grid)`
+  && {
+    align-items: center;
+  }
+`;

src/webui/components/Versions/index.js

@@ -6,16 +6,24 @@
 import { DetailContextConsumer } from '../../pages/version/index';
 import { formatDateDistance } from '../../utils/package';
 import { Heading, Spacer, ListItemText } from './styles';
-import List from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
+import List from '@material-ui/core/List/index';
+import ListItem from '@material-ui/core/ListItem/index';
 import React from 'react';
+import { DIST_TAGS } from '../../../lib/constants';
 
-class Versions extends React.PureComponent {
+class Versions extends React.PureComponent<any> {
   render() {
-    return <DetailContextConsumer>{({ packageMeta }) => this.renderContent(packageMeta['dist-tags'], packageMeta.versions)}</DetailContextConsumer>;
+    return (
+      // $FlowFixMe
+      <DetailContextConsumer>
+        {({ packageMeta }) => {
+          return this.renderContent(packageMeta[DIST_TAGS], packageMeta.versions);
+        }}
+      </DetailContextConsumer>
+    );
   }
 
-  renderPackageList = (packages: object, isVersion: boolean = false) => (
+  renderPackageList = (packages: any, isVersion: boolean = false) => (
     <List>
       {Object.keys(packages)
         .reverse()
@@ -29,8 +37,7 @@ class Versions extends React.PureComponent {
     </List>
   );
 
-  // $FlowFixMe
-  renderContent = (distTags, versions) => (
+  renderContent = (distTags: any, versions: any) => (
     <>
       {distTags && (
         <>

src/webui/icons/GitHub.js

@@ -0,0 +1,16 @@
+// @flow
+/* eslint-disable max-len */
+/* eslint-disable react/jsx-curly-brace-presence */
+
+import React from 'react';
+import SvgIcon from '@material-ui/core/SvgIcon/index';
+
+function GitHub(props: Object) {
+  return (
+    <SvgIcon {...props}>
+      <path d="M12.007 0C6.12 0 1.1 4.27.157 10.08c-.944 5.813 2.468 11.45 8.054 13.312.19.064.397.033.555-.084.16-.117.25-.304.244-.5v-2.042c-3.33.735-4.037-1.56-4.037-1.56-.22-.726-.694-1.35-1.334-1.756-1.096-.75.074-.735.074-.735.773.103 1.454.557 1.846 1.23.694 1.21 2.23 1.638 3.45.96.056-.61.327-1.178.766-1.605-2.67-.3-5.462-1.335-5.462-6.002-.02-1.193.42-2.35 1.23-3.226-.327-1.015-.27-2.116.166-3.09 0 0 1.006-.33 3.3 1.23 1.966-.538 4.04-.538 6.003 0 2.295-1.5 3.3-1.23 3.3-1.23.445 1.006.49 2.144.12 3.18.81.877 1.25 2.033 1.23 3.226 0 4.607-2.805 5.627-5.476 5.927.578.583.88 1.386.825 2.206v3.29c-.005.2.092.393.26.507.164.115.377.14.565.063 5.568-1.88 8.956-7.514 8.007-13.313C22.892 4.267 17.884.007 12.008 0z" />
+    </SvgIcon>
+  );
+}
+
+export default GitHub;

src/webui/pages/version/index.js

@@ -110,7 +110,6 @@ class VersionPage extends Component<any, any> {
 
   render() {
     const { isLoading, packageMeta, readMe, packageName } = this.state;
-    console.log('render', packageName, isLoading);
 
     if (isLoading === false) {
       return (