chore: add dependencies view

src/webui/components/Dependencies/index.js

@@ -0,0 +1,90 @@
+/**
+ * @prettier
+ * @flow
+ */
+
+/* eslint react/jsx-max-depth: 0 */
+
+import React, { Component, Fragment } from 'react';
+
+import { DetailContextConsumer } from '../../pages/version/index';
+import CardContent from '@material-ui/core/CardContent/index';
+// import Avatar from '@material-ui/core/Avatar/index';
+import Chip from '@material-ui/core/Chip/index';
+// import Grid from '@material-ui/core/Grid/index';
+import { Content, Tags, Tag, CardWrap } from './styles';
+import Typography from '@material-ui/core/Typography/index';
+
+class DepDetail extends Component<any, any> {
+  render() {
+    const { name, version } = this.props;
+    const tagText = `${name}@${version}`;
+
+    return (
+      <Tag>
+        <Chip component={'div'} label={tagText} />
+      </Tag>
+    );
+  }
+}
+
+class DependencyBlock extends Component<any, any> {
+  render() {
+    const { dependencies, title } = this.props;
+    const deps = Object.entries(dependencies);
+
+    return (
+      <CardWrap>
+        <CardContent>
+          <Typography color={'headline'} gutterBottom={true}>
+            {title}
+          </Typography>
+          <Tags>
+            {deps.map(dep => {
+              const [name, version] = dep;
+
+              return <DepDetail key={name} name={name} version={version} />;
+            })}
+          </Tags>
+        </CardContent>
+      </CardWrap>
+    );
+  }
+}
+
+class Dependencies extends Component<any, any> {
+  state = {
+    tabPosition: 0,
+  };
+
+  render() {
+    return (
+      <DetailContextConsumer>
+        {packageMeta => {
+          return this.renderDependencies(packageMeta);
+        }}
+      </DetailContextConsumer>
+    );
+  }
+
+  // $FlowFixMe
+  renderDependencies = ({ packageMeta }) => {
+    const { latest } = packageMeta;
+    console.log('renderDependencies', latest);
+    const { dependencies, devDependencies, peerDependencies } = latest;
+    console.log('dependencies', dependencies);
+    console.log('devDependencies', devDependencies);
+
+    return (
+      <Content>
+        <Fragment>
+          {dependencies && <DependencyBlock dependencies={dependencies} title={'Dependencies'} />}
+          {devDependencies && <DependencyBlock dependencies={devDependencies} title={'DevDependencies'} />}
+          {peerDependencies && <DependencyBlock dependencies={peerDependencies} title={'PeerDependencies'} />}
+        </Fragment>
+      </Content>
+    );
+  };
+}
+
+export default Dependencies;

src/webui/components/Dependencies/styles.js

@@ -0,0 +1,33 @@
+/**
+ * @prettier
+ * @flow
+ */
+
+import styled from 'react-emotion';
+import Card from '@material-ui/core/Card/index';
+
+export const Content = styled.div`
+  && {
+    padding: 20px;
+  }
+`;
+
+export const Tags = styled.span`
+  && {
+    display: flex;
+    justify-content: start;
+    flex-wrap: wrap;
+  }
+`;
+
+export const Tag = styled.span`
+  && {
+    margin: 5px;
+  }
+`;
+
+export const CardWrap = styled(Card)`
+  && {
+    margin: 0 0 25px;
+  }
+`;

src/webui/components/Dependencies/types.js

@@ -0,0 +1,12 @@
+/**
+ * @prettier
+ * @flow
+ */
+
+import type { Node } from 'react';
+
+export interface IProps {
+  children: Node;
+  open: boolean;
+  onClose: () => void;
+}

src/webui/components/DetailContainer/index.js

@@ -1,11 +1,17 @@
-import React, {Component} from 'react';
+/**
+ * @prettier
+ * @flow
+ */
+
+import React, { Component } from 'react';
 
 import { DetailContextConsumer } from '../../pages/version/index';
 import Readme from '../Readme';
-import {preventXSS} from '../../utils/sec-utils';
+import { preventXSS } from '../../utils/sec-utils';
 import Tabs from '@material-ui/core/Tabs/index';
 import Tab from '@material-ui/core/Tab/index';
 import { Content } from './styles';
+import Dependencies from '../Dependencies';
 
 class DetailContainer extends Component<any, any> {
   state = {
@@ -15,14 +21,15 @@ class DetailContainer extends Component<any, any> {
   render() {
     return (
       <DetailContextConsumer>
-        {(context) => {
+        {context => {
           return this.renderTabs(context);
         }}
       </DetailContextConsumer>
     );
-  };
+  }
 
-  renderTabs = ({readMe}) => {
+  // $FlowFixMe
+  renderTabs = ({ readMe }) => {
     const { tabPosition } = this.state;
 
     return (
@@ -33,17 +40,30 @@ class DetailContainer extends Component<any, any> {
           <Tab label={'Versions'} />
           <Tab label={'Uplinks'} />
         </Tabs>
-        {tabPosition === 0 && this.renderReadme(readMe)}
+        <Content>
+          {tabPosition === 0 && this.renderReadme(readMe)}
+          {tabPosition === 1 && this.renderDependencies()}
+          {tabPosition === 2 && this.renderReadme(readMe)}
+          {tabPosition === 3 && this.renderReadme(readMe)}
+        </Content>
       </React.Fragment>
     );
-  }
+  };
 
-  renderReadme = (readMe) => {
+  renderReadme = (readMe: string) => {
     const encodedReadme = preventXSS(readMe);
 
-    return (<Content><Readme description={encodedReadme}></Readme></Content>);
-  }
+    return <Readme description={encodedReadme} />;
+  };
+
+  renderDependencies = () => {
+    return <Dependencies />;
+  };
+
+  handleChange = (event: any, tabPosition: number) => {
+    event.preventDefault();
+    this.setState({ tabPosition });
+  };
 }
 
-
 export default DetailContainer;

src/webui/components/DetailContainer/styles.js

@@ -7,6 +7,6 @@ import styled from 'react-emotion';
 
 export const Content = styled.div`
   && {
-    padding: 20px;
+    padding: 15px;
   }
 `;

src/webui/components/DetailSidebar/index.js

@@ -36,7 +36,7 @@ class DetailSidebar extends Component<any, any> {
               <Typography color={"textPrimary"} gutterBottom={true} variant={'title'}>
                 {packageName}
               </Typography>
-              <Typography color={"textSecondary"} gutterBottom={true} variant={'subtitle2'}>
+              <Typography color={"textSecondary"} gutterBottom={true} variant={'body2'}>
                 {packageMeta.latest.description}
               </Typography>
             </Grid>
@@ -47,7 +47,7 @@ class DetailSidebar extends Component<any, any> {
                   <CopyToClipBoard text={`pnpm install ${packageName}`} />
                   <CopyToClipBoard text={`yarn add ${packageName}`} />
                   <CardActions>
-                    <Button color={"primary"} variant={"contained"}>
+                    <Button color={"primary"} size={'small'} variant={"contained"}>
                       {'Download Tarball'}
                     </Button>
                   </CardActions>