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-10-06 22:17:36 +07:00
|
|
|
import Button from '../../muiComponents/Button';
|
2019-10-31 14:12:18 +07:00
|
|
|
import CardContent from '../../muiComponents/CardContent';
|
2019-10-13 02:41:42 +07:00
|
|
|
import { default as Typography } from '../../muiComponents/Heading';
|
2019-10-31 14:12:18 +07:00
|
|
|
import CardActions from '../../muiComponents/CardActions';
|
2019-10-13 02:41:42 +07:00
|
|
|
import Text from '../../muiComponents/Text';
|
2019-06-20 19:37:28 +07:00
|
|
|
|
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>
|
2019-10-13 02:41:42 +07:00
|
|
|
<Text variant={'body1'}>{title}</Text>
|
2019-02-03 17:23:33 +07:00
|
|
|
<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-08-31 16:02:46 +07:00
|
|
|
<Typography component="h2" gutterBottom={true} id="help-card__title" variant="h5">
|
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-10-13 02:41:42 +07:00
|
|
|
<Text variant="body2">{'3. Refresh this page.'}</Text>
|
2019-02-03 17:23:33 +07:00
|
|
|
</CardContent>
|
|
|
|
<CardActions>
|
2019-10-06 22:17:36 +07:00
|
|
|
<Button color="primary" href="https://verdaccio.org/docs/en/installation" size="small">
|
2019-02-03 17:23:33 +07:00
|
|
|
{'Learn More'}
|
|
|
|
</Button>
|
|
|
|
</CardActions>
|
|
|
|
</Card>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default Help;
|