Merge branch 'feat-new-detail-page' of github.com:verdaccio/verdaccio into feat-new-detail-page

src/webui/components/Dependencies/index.js

@@ -8,11 +8,10 @@
 import React, { Component, Fragment } from 'react';
 import { withRouter } from 'react-router-dom';
 
-import { DetailContextConsumer } from '../../pages/version/index';
-import CardContent from '@material-ui/core/CardContent/index';
-import Chip from '@material-ui/core/Chip/index';
-import { Content, Tags, Tag, CardWrap } from './styles';
-import Typography from '@material-ui/core/Typography/index';
+import { DetailContextConsumer } from '../../pages/version';
+import Chip from '@material-ui/core/Chip';
+import { Content, CardWrap, Heading, ListItem, CardContent } from './styles';
+import List from '@material-ui/core/List';
 
 class DepDetail extends Component<any, any> {
   constructor(props: any) {
@@ -28,11 +27,10 @@ class DepDetail extends Component<any, any> {
   render() {
     const { name, version } = this.state;
     const tagText = `${name}@${version}`;
-
     return (
-      <Tag>
+      <ListItem>
         <Chip clickable={true} component={'div'} label={tagText} onClick={this.handleOnClick} />
-      </Tag>
+      </ListItem>
     );
   }
 
@@ -48,6 +46,13 @@ class DepDetail extends Component<any, any> {
 const WrappDepDetail = withRouter(DepDetail);
 
 class DependencyBlock extends Component<any, any> {
+  renderList = (deps: object, enableLoading: boolean) =>
+    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);
@@ -59,16 +64,8 @@ class DependencyBlock extends Component<any, any> {
           return (
             <CardWrap>
               <CardContent>
-                <Typography gutterBottom={true} variant={'headline'}>
-                  {title}
-                </Typography>
-                <Tags>
-                  {deps.map(dep => {
-                    const [name, version] = dep;
-
-                    return <WrappDepDetail key={name} name={name} onLoading={enableLoading} version={version} />;
-                  })}
-                </Tags>
+                <Heading variant={'subheading'}>{title}</Heading>
+                <List>{this.renderList(deps, enableLoading)}</List>
               </CardContent>
             </CardWrap>
           );

src/webui/components/Dependencies/styles.js

@@ -4,7 +4,10 @@
  */
 
 import styled from 'react-emotion';
-import Card from '@material-ui/core/Card/index';
+import Card from '@material-ui/core/Card';
+import Typography from '@material-ui/core/Typography';
+import { default as MuiListItem } from '@material-ui/core/ListItem';
+import { default as MuiCardContent } from '@material-ui/core/CardContent';
 
 export const Content = styled.div`
   && {
@@ -12,17 +15,9 @@ export const Content = styled.div`
   }
 `;
 
-export const Tags = styled.span`
+export const CardContent = styled(MuiCardContent)`
   && {
-    display: flex;
-    justify-content: start;
-    flex-wrap: wrap;
-  }
-`;
-
-export const Tag = styled.span`
-  && {
-    margin: 5px;
+    padding-bottom: 0;
   }
 `;
 
@@ -31,3 +26,16 @@ export const CardWrap = styled(Card)`
     margin: 0 0 25px;
   }
 `;
+
+export const Heading = styled(Typography)`
+  && {
+    font-weight: 700;
+  }
+`;
+
+export const ListItem = styled(MuiListItem)`
+  && {
+    padding-left: 0;
+    padding-right: 0;
+  }
+`;

src/webui/components/DetailContainer/index.js

@@ -13,6 +13,7 @@ import Tabs from '@material-ui/core/Tabs/index';
 import Tab from '@material-ui/core/Tab/index';
 import { Content } from './styles';
 import Dependencies from '../Dependencies';
+import UpLinks from '../UpLinks';
 
 class DetailContainer extends Component<any, any> {
   state = {
@@ -43,9 +44,9 @@ class DetailContainer extends Component<any, any> {
         </Tabs>
         <Content>
           {tabPosition === 0 && this.renderReadme(readMe)}
-          {tabPosition === 1 && this.renderDependencies()}
-          {tabPosition === 2 && this.renderVersions()}
-          {tabPosition === 3 && this.renderReadme(readMe)}
+          {tabPosition === 1 && <Dependencies />}
+          {tabPosition === 2 && <Versions />}
+          {tabPosition === 3 && <UpLinks />}
         </Content>
       </React.Fragment>
     );
@@ -57,10 +58,6 @@ class DetailContainer extends Component<any, any> {
     return <Readme description={encodedReadme} />;
   };
 
-  renderVersions = () => <Versions />;
-
-  renderDependencies = () => <Dependencies />;
-
   handleChange = (event: any, tabPosition: number) => {
     event.preventDefault();
     this.setState({ tabPosition });

src/webui/components/UpLinks/index.js

@@ -0,0 +1,43 @@
+/**
+ * @prettier
+ * @flow
+ */
+
+import { DetailContextConsumer } from '../../pages/version/index';
+import { Heading, ListItem, CardContent } from './styles';
+import List from '@material-ui/core/List';
+import Chip from '@material-ui/core/Chip';
+import Card from '@material-ui/core/Card';
+
+import React from 'react';
+
+class UpLinks extends React.PureComponent {
+  render() {
+    return <DetailContextConsumer>{({ packageMeta }) => this.renderContent(packageMeta._uplinks)}</DetailContextConsumer>;
+  }
+
+  renderList = (uplinks: object) => (
+    <List>
+      {Object.keys(uplinks)
+        .reverse()
+        .map(name => (
+          <ListItem key={name}>
+            <Chip label={name} />
+          </ListItem>
+        ))}
+    </List>
+  );
+
+  // $FlowFixMe
+  renderContent = uplinks =>
+    uplinks && (
+      <Card>
+        <CardContent>
+          <Heading variant={'subheading'}>{'UpLinks'}</Heading>
+          {this.renderList(uplinks)}
+        </CardContent>
+      </Card>
+    );
+}
+
+export default UpLinks;

src/webui/components/UpLinks/styles.js

@@ -0,0 +1,23 @@
+import styled from 'react-emotion';
+import Typography from '@material-ui/core/Typography';
+import { default as MuiListItem } from '@material-ui/core/ListItem';
+import { default as MuiCardContent } from '@material-ui/core/CardContent';
+
+export const Heading = styled(Typography)`
+  && {
+    font-weight: 700;
+  }
+`;
+
+export const ListItem = styled(MuiListItem)`
+  && {
+    padding-left: 0;
+    padding-right: 0;
+  }
+`;
+
+export const CardContent = styled(MuiCardContent)`
+  && {
+    padding-bottom: 0;
+  }
+`;

src/webui/components/UpLinks/types.js

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

src/webui/components/Versions/styles.js

@@ -3,7 +3,9 @@ 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')`

src/webui/styles/global.scss

@@ -3,7 +3,7 @@
 
 :global {
   .container {
-    padding: 0px 15px;
+    padding: 15px;
     flex: 1;
 
     @include container-size;