initial commit

src/components/Dependencies/index.js

@@ -0,0 +1,108 @@
+/**
+ * @prettier
+ * @flow
+ */
+
+/* eslint react/jsx-max-depth: 0 */
+
+import React, { Component, Fragment } from 'react';
+import { withRouter } from 'react-router-dom';
+import CardContent from '@material-ui/core/CardContent/index';
+
+import { DetailContextConsumer } from '../../pages/version';
+import { Content, CardWrap, Heading, Tags, Tag } from './styles';
+
+class DepDetail extends Component<any, any> {
+  constructor(props: any) {
+    super(props);
+    const { name, version } = this.props;
+
+    this.state = {
+      name,
+      version,
+    };
+  }
+
+  render() {
+    const { name, version } = this.state;
+    const tagText = `${name}@${version}`;
+    return <Tag clickable={true} component={'div'} label={tagText} onClick={this.handleOnClick} />;
+  }
+
+  handleOnClick = () => {
+    const { name } = this.state;
+    const { onLoading, history } = this.props;
+
+    onLoading();
+    history.push(`/-/web/version/${name}`);
+  };
+}
+
+const WrappDepDetail = withRouter(DepDetail);
+
+class DependencyBlock extends Component<any, any> {
+  renderTags = (deps: any, enableLoading: any) =>
+    deps.map(dep => {
+      const [name, version] = dep;
+
+      return <WrappDepDetail key={name} name={name} onLoading={enableLoading} version={version} />;
+    });
+
+  render() {
+    const { dependencies, title } = this.props;
+    const deps = Object.entries(dependencies);
+
+    return (
+      // $FlowFixMe
+      <DetailContextConsumer>
+        {({ enableLoading }) => {
+          return (
+            <CardWrap>
+              <CardContent>
+                <Heading variant={'subheading'}>{title}</Heading>
+                <Tags>{this.renderTags(deps, enableLoading)}</Tags>
+              </CardContent>
+            </CardWrap>
+          );
+        }}
+      </DetailContextConsumer>
+    );
+  }
+}
+
+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/components/Dependencies/styles.js

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

src/components/Dependencies/types.js

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