2019-06-20 19:37:28 +07:00
|
|
|
import Button from '@material-ui/core/Button';
|
|
|
|
import CardActions from '@material-ui/core/CardActions';
|
|
|
|
import CardContent from '@material-ui/core/CardContent';
|
|
|
|
import Typography from '@material-ui/core/Typography';
|
2019-02-03 17:23:33 +07:00
|
|
|
import React, { Fragment } from 'react';
|
|
|
|
|
|
|
|
import { getRegistryURL } from '../../utils/url';
|
2019-06-20 19:37:28 +07:00
|
|
|
import CopyToClipBoard from '../CopyToClipBoard';
|
|
|
|
|
2019-02-03 17:23:33 +07:00
|
|
|
import { CardStyled as Card, HelpTitle } from './styles';
|
|
|
|
|
2019-06-20 19:37:28 +07:00
|
|
|
function renderHeadingClipboardSegments(title: string, text: string): React.ReactNode {
|
2019-02-03 17:23:33 +07:00
|
|
|
return (
|
|
|
|
<Fragment>
|
|
|
|
<Typography variant={'body2'}>{title}</Typography>
|
|
|
|
<CopyToClipBoard text={text} />
|
|
|
|
</Fragment>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2019-06-20 19:37:28 +07:00
|
|
|
const Help: React.FC = () => {
|
2019-02-03 17:23:33 +07:00
|
|
|
const registryUrl = getRegistryURL();
|
|
|
|
|
|
|
|
return (
|
2019-06-20 19:37:28 +07:00
|
|
|
<Card id="help-card">
|
2019-02-03 17:23:33 +07:00
|
|
|
<CardContent>
|
2019-06-20 19:37:28 +07:00
|
|
|
<Typography component="h2" gutterBottom={true} id="help-card__title" variant="headline">
|
2019-02-03 17:23:33 +07:00
|
|
|
{'No Package Published Yet.'}
|
|
|
|
</Typography>
|
2019-06-20 19:37:28 +07:00
|
|
|
<HelpTitle color="textSecondary" gutterBottom={true}>
|
2019-02-03 17:23:33 +07:00
|
|
|
{'To publish your first package just:'}
|
|
|
|
</HelpTitle>
|
2019-03-28 05:39:06 +07:00
|
|
|
{renderHeadingClipboardSegments('1. Login', `npm adduser --registry ${registryUrl}`)}
|
|
|
|
{renderHeadingClipboardSegments('2. Publish', `npm publish --registry ${registryUrl}`)}
|
2019-06-20 19:37:28 +07:00
|
|
|
<Typography variant="body2">{'3. Refresh this page.'}</Typography>
|
2019-02-03 17:23:33 +07:00
|
|
|
</CardContent>
|
|
|
|
<CardActions>
|
2019-06-20 19:37:28 +07:00
|
|
|
<Button color="primary" href="https://verdaccio.org/docs/en/installation" size="small" target="_blank">
|
2019-02-03 17:23:33 +07:00
|
|
|
{'Learn More'}
|
|
|
|
</Button>
|
|
|
|
</CardActions>
|
|
|
|
</Card>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default Help;
|