chore: sync with verdaccio master

src/webui/components/DetailSidebar/index.js

@@ -0,0 +1,95 @@
+import React, {Component} from 'react';
+
+import Card from '@material-ui/core/Card/index';
+import CardContent from '@material-ui/core/CardContent/index';
+import List from '@material-ui/core/List/index';
+
+import ActtionBar from '../ActionBar';
+import Author from '../Author';
+import Developers from '../Developers';
+import Dist from '../Dist';
+import Engine from '../Engines';
+import Install from '../Install';
+import Repository from '../Repository';
+
+
+import { DetailContextConsumer } from '../../pages/version/index';
+
+import { TitleListItem, TitleListItemText } from './styles';
+
+class DetailSidebar extends Component {
+  render() {
+    return (
+      <DetailContextConsumer>
+        {(context) => this.renderSideBar(context)}
+      </DetailContextConsumer>
+    );
+  };
+
+  renderSideBar = ({packageName, packageMeta}) => {
+    return (
+      <div className={'sidebar-info'}>
+        <Card>
+          <CardContent>
+            {this.renderTitle(packageName, packageMeta)}
+            {this.renderActionBar()}
+            {this.renderCopyCLI()}
+            {this.renderRepository()}
+            {this.renderEngine()}
+            {this.renderDist()}
+            {this.renderAuthor()}
+            {this.renderMaintainers()}
+            {this.renderContributors()}
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  renderTitle = (packageName, packageMeta) => {
+      return (
+        <List className={'detail-info'}>
+          <TitleListItem alignItems={"flex-start"}>
+            <TitleListItemText
+              primary={<b>{packageName}</b>}
+              secondary={packageMeta.latest.description}
+            />
+          </TitleListItem>
+        </List>
+      );
+  }
+
+  renderCopyCLI = () => {
+    return <Install />;
+  }
+
+  renderMaintainers = () => {
+    return <Developers type={'maintainers'} />;
+  }
+
+  renderContributors = () => {
+    return <Developers type={'contributors'} />;
+  }
+  
+  renderRepository = () => {
+    return <Repository />;
+  }
+
+  renderAuthor = () => {
+    return <Author />;
+  }
+
+  renderEngine = () => {
+    return <Engine />;
+  }
+
+  renderDist = () => {
+    return <Dist />;
+  }
+
+  renderActionBar = () => {
+    return <ActtionBar />;
+  }
+}
+
+export default DetailSidebar;

src/webui/components/DetailSidebar/styles.js

@@ -0,0 +1,35 @@
+/**
+ * @prettier
+ * @flow
+ */
+
+import styled from 'react-emotion';
+import Avatar from '@material-ui/core/Avatar/index';
+import ListItem from '@material-ui/core/ListItem/index';
+import ListItemText from '@material-ui/core/ListItemText/index';
+
+import colors from '../../utils/styles/colors';
+
+export const TitleListItem = styled(ListItem)`
+  && {
+    padding-left: 0;
+    padding-right: 0;
+    padding-bottom: 0;
+  }
+`;
+
+export const TitleListItemText = styled(ListItemText)`
+  && {
+    padding-left: 0;
+    padding-right: 0;
+    padding-top: 8px;
+  }
+`;
+
+export const TitleAvatar = styled(Avatar)`
+  && {
+    color: ${colors.greySuperLight};
+    background-color: ${colors.primary};
+    text-transform: capitalize;
+  }
+`;

src/webui/components/DetailSidebar/types.js

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