initial commit

src/components/Versions/index.js

@@ -0,0 +1,61 @@
+/**
+ * @prettier
+ * @flow
+ */
+
+import { DetailContextConsumer } from '../../pages/version/index';
+import { formatDateDistance } from '../../utils/package';
+import { Heading, Spacer, ListItemText } from './styles';
+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<any> {
+  render() {
+    return (
+      // $FlowFixMe
+      <DetailContextConsumer>
+        {({ packageMeta }) => {
+          return this.renderContent(packageMeta[DIST_TAGS], packageMeta.versions);
+        }}
+      </DetailContextConsumer>
+    );
+  }
+
+  renderPackageList = (packages: any, isVersion: boolean = false) => (
+    <List>
+      {Object.keys(packages)
+        .reverse()
+        .map(version => (
+          <ListItem key={version}>
+            <ListItemText>{version}</ListItemText>
+            <Spacer />
+            <ListItemText>{isVersion ? `${formatDateDistance('2017-10-26T09:03:15.044Z')} ago` : packages[version]}</ListItemText>
+          </ListItem>
+        ))}
+    </List>
+  );
+
+  // $FlowFixMe
+  renderContent(distTags: object, versions: object) {
+    return (
+      <>
+        {distTags && (
+          <>
+            <Heading variant={'subheading'}>{'Current Tags'}</Heading>
+            {this.renderPackageList(distTags)}
+          </>
+        )}
+        {versions && (
+          <>
+            <Heading variant={'subheading'}>{'Version History'}</Heading>
+            {this.renderPackageList(versions, true)}
+          </>
+        )}
+      </>
+    );
+  }
+}
+
+export default Versions;

src/components/Versions/styles.js

@@ -0,0 +1,25 @@
+import styled from 'react-emotion';
+import Typography from '@material-ui/core/Typography';
+import { default as MuiListItemText } from '@material-ui/core/ListItemText';
+
+export const Heading = styled(Typography)`
+ && {
+  font-weight: 700;
+ }
+`;
+
+export const Spacer = styled('div')`
+    flex: 1 1 auto;
+    border-bottom: 1px dotted rgba(0, 0, 0, .2);
+    white-space: nowrap;
+    height: 0.5em;
+`;
+
+export const ListItemText = styled(MuiListItemText)`
+    && {
+      flex: none;
+      color: black;
+      opacity: .6;
+    }
+`;
+

src/components/Versions/types.js

@@ -0,0 +1,6 @@
+/**
+ * @prettier
+ * @flow
+ */
+
+export interface IProps {}