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;