initial commit

src/components/Help/index.js

@@ -0,0 +1,51 @@
+/**
+ * @prettier
+ * @flow
+ */
+
+import React, { Fragment } from 'react';
+import type { Node } from 'react';
+import CardActions from '@material-ui/core/CardActions/index';
+import CardContent from '@material-ui/core/CardContent/index';
+import Button from '@material-ui/core/Button/index';
+import Typography from '@material-ui/core/Typography/index';
+
+import CopyToClipBoard from '../CopyToClipBoard/index';
+import { getRegistryURL } from '../../utils/url';
+import { CardStyled as Card, HelpTitle } from './styles';
+
+function renderHeadingClipboardSegments(title: string, text: string): Node {
+  return (
+    <Fragment>
+      <Typography variant={'body2'}>{title}</Typography>
+      <CopyToClipBoard text={text} />
+    </Fragment>
+  );
+}
+
+const Help = (): Node => {
+  const registryUrl = getRegistryURL();
+
+  return (
+    <Card id={'help-card'}>
+      <CardContent>
+        <Typography component={'h2'} gutterBottom={true} id={'help-card__title'} variant={'headline'}>
+          {'No Package Published Yet.'}
+        </Typography>
+        <HelpTitle color={'textSecondary'} gutterBottom={true}>
+          {'To publish your first package just:'}
+        </HelpTitle>
+        {renderHeadingClipboardSegments('1. Login', `$ npm adduser --registry ${registryUrl}`)}
+        {renderHeadingClipboardSegments('2. Publish', `$ npm publish --registry ${registryUrl}`)}
+        <Typography variant={'body2'}>{'3. Refresh this page.'}</Typography>
+      </CardContent>
+      <CardActions>
+        <Button color={'primary'} href={'https://verdaccio.org/docs/en/installation'} size={'small'} target={'_blank'}>
+          {'Learn More'}
+        </Button>
+      </CardActions>
+    </Card>
+  );
+};
+
+export default Help;

src/components/Help/styles.js

@@ -0,0 +1,21 @@
+/**
+ * @prettier
+ * @flow
+ */
+
+import styled from 'react-emotion';
+import Card from '@material-ui/core/Card/index';
+import Typography from '@material-ui/core/Typography/index';
+
+export const CardStyled = styled(Card)`
+  && {
+    width: 600px;
+    margin: auto;
+  }
+`;
+
+export const HelpTitle = styled(Typography)`
+  && {
+    margin-bottom: 20px;
+  }
+`;