forked from sombochea/verdaccio-ui
Feat: added "Fund this package" button (#375)
This commit is contained in:
Priscila Oliveira
committed by
GitHub
GitHub
parent
3a9f66c023
commit
bf093cc27b
@@ -1,78 +1,52 @@
|
||||
import React, { ReactElement } from 'react';
|
||||
import React, { useContext } from 'react';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { DetailContext } from '../../pages/Version';
|
||||
import Paper from '../../muiComponents/Paper';
|
||||
import ActionBar from '../ActionBar';
|
||||
import Repository from '../Repository';
|
||||
import Engines from '../Engines';
|
||||
import Dist from '../Dist';
|
||||
import Install from '../Install';
|
||||
import Author from '../Author';
|
||||
import Developers, { DeveloperType } from '../Developers';
|
||||
import Dist from '../Dist/Dist';
|
||||
import Engine from '../Engines/Engines';
|
||||
import Install from '../Install';
|
||||
import Repository from '../Repository/Repository';
|
||||
import { DetailContext } from '../../pages/Version';
|
||||
import List from '../../muiComponents/List';
|
||||
import Card from '../../muiComponents/Card';
|
||||
import CardContent from '../../muiComponents/CardContent';
|
||||
import { Theme } from '../../design-tokens/theme';
|
||||
|
||||
import { TitleListItem, TitleListItemText, PackageDescription, PackageVersion } from './styles';
|
||||
import DetailSidebarTitle from './DetailSidebarTitle';
|
||||
import DetailSidebarFundButton from './DetailSidebarFundButton';
|
||||
|
||||
const renderLatestDescription = (description, version, isLatest = true): JSX.Element => {
|
||||
return (
|
||||
<>
|
||||
<PackageDescription>{description}</PackageDescription>
|
||||
{version ? (
|
||||
<PackageVersion>
|
||||
<small>{`${isLatest ? 'Latest v' : 'v'}${version}`}</small>
|
||||
</PackageVersion>
|
||||
) : null}
|
||||
</>
|
||||
);
|
||||
};
|
||||
const StyledPaper = styled(Paper)<{ theme?: Theme }>(({ theme }) => ({
|
||||
padding: theme.spacing(3, 2),
|
||||
}));
|
||||
|
||||
const renderCopyCLI = (): JSX.Element => <Install />;
|
||||
const renderRepository = (): JSX.Element => <Repository />;
|
||||
const renderAuthor = (): JSX.Element => <Author />;
|
||||
const renderEngine = (): JSX.Element => <Engine />;
|
||||
const renderDist = (): JSX.Element => <Dist />;
|
||||
const renderActionBar = (): JSX.Element => <ActionBar />;
|
||||
const renderTitle = (packageName, packageVersion, packageMeta): JSX.Element => {
|
||||
const version = packageVersion ? packageVersion : packageMeta.latest.version;
|
||||
const isLatest = typeof packageVersion === 'undefined';
|
||||
const DetailSidebar: React.FC = () => {
|
||||
const detailContext = useContext(DetailContext);
|
||||
|
||||
const { packageMeta, packageName, packageVersion } = detailContext;
|
||||
|
||||
if (!packageMeta || !packageName) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<List className="detail-info">
|
||||
<TitleListItem alignItems="flex-start" button={true}>
|
||||
<TitleListItemText
|
||||
primary={<b>{packageName}</b>}
|
||||
secondary={renderLatestDescription(packageMeta.latest.description, version, isLatest)}
|
||||
/>
|
||||
</TitleListItem>
|
||||
</List>
|
||||
<StyledPaper className={'sidebar-info'}>
|
||||
<DetailSidebarTitle
|
||||
description={packageMeta.latest?.description}
|
||||
isLatest={typeof packageVersion === 'undefined'}
|
||||
packageName={packageName}
|
||||
version={packageVersion || packageMeta.latest.version}
|
||||
/>
|
||||
<ActionBar />
|
||||
<Install />
|
||||
{packageMeta?.latest?.funding && <DetailSidebarFundButton to={packageMeta.latest.funding.url} />}
|
||||
<Repository />
|
||||
<Engines />
|
||||
<Dist />
|
||||
<Author />
|
||||
<Developers type={DeveloperType.MAINTAINERS} />
|
||||
<Developers type={DeveloperType.CONTRIBUTORS} />
|
||||
</StyledPaper>
|
||||
);
|
||||
};
|
||||
|
||||
function renderSideBar(packageName, packageVersion, packageMeta): ReactElement<HTMLElement> {
|
||||
return (
|
||||
<div className={'sidebar-info'}>
|
||||
<Card>
|
||||
<CardContent>
|
||||
{renderTitle(packageName, packageVersion, packageMeta)}
|
||||
{renderActionBar()}
|
||||
{renderCopyCLI()}
|
||||
{renderRepository()}
|
||||
{renderEngine()}
|
||||
{renderDist()}
|
||||
{renderAuthor()}
|
||||
<Developers type={DeveloperType.MAINTAINERS} />
|
||||
<Developers type={DeveloperType.CONTRIBUTORS} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const DetailSidebar = (): JSX.Element => {
|
||||
const { packageName, packageMeta, packageVersion } = React.useContext(DetailContext);
|
||||
|
||||
return renderSideBar(packageName, packageVersion, packageMeta);
|
||||
};
|
||||
|
||||
export default DetailSidebar;
|
||||
|
||||
46
src/components/DetailSidebar/DetailSidebarFundButton.tsx
Normal file
46
src/components/DetailSidebar/DetailSidebarFundButton.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
import React, { MouseEvent } from 'react';
|
||||
import styled from '@emotion/styled';
|
||||
import Favorite from '@material-ui/icons/Favorite';
|
||||
|
||||
import Button from '../../muiComponents/Button';
|
||||
import Link from '../Link';
|
||||
import { Theme } from '../../design-tokens/theme';
|
||||
|
||||
const StyledLink = styled(Link)<{ theme?: Theme }>(({ theme }) => ({
|
||||
marginTop: theme && theme.spacing(1),
|
||||
marginBottom: theme && theme.spacing(1),
|
||||
textDecoration: 'none',
|
||||
display: 'block',
|
||||
}));
|
||||
|
||||
const StyledFavoriteIcon = styled(Favorite)<{ theme?: Theme }>(({ theme }) => ({
|
||||
color: theme && theme.palette.orange,
|
||||
}));
|
||||
|
||||
const StyledFundStrong = styled('strong')({
|
||||
marginRight: 3,
|
||||
});
|
||||
|
||||
interface Props {
|
||||
to: string;
|
||||
}
|
||||
|
||||
/* eslint-disable react/jsx-no-bind */
|
||||
const DetailSidebarFundButton: React.FC<Props> = ({ to }) => {
|
||||
const preventDefault = (event: MouseEvent<HTMLButtonElement>) => event.preventDefault();
|
||||
return (
|
||||
<StyledLink external={true} to={to}>
|
||||
<Button
|
||||
color="primary"
|
||||
fullWidth={true}
|
||||
onClick={preventDefault}
|
||||
startIcon={<StyledFavoriteIcon />}
|
||||
variant="outlined">
|
||||
<StyledFundStrong>{'Fund'}</StyledFundStrong>
|
||||
{'this package'}
|
||||
</Button>
|
||||
</StyledLink>
|
||||
);
|
||||
};
|
||||
|
||||
export default DetailSidebarFundButton;
|
||||
33
src/components/DetailSidebar/DetailSidebarTitle.tsx
Normal file
33
src/components/DetailSidebar/DetailSidebarTitle.tsx
Normal file
@@ -0,0 +1,33 @@
|
||||
import React from 'react';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import Box from '../../muiComponents/Box';
|
||||
import Heading from '../../muiComponents/Heading';
|
||||
import { Theme } from '../../design-tokens/theme';
|
||||
|
||||
interface Props {
|
||||
packageName: string;
|
||||
description?: string;
|
||||
version: string;
|
||||
isLatest: boolean;
|
||||
}
|
||||
|
||||
const StyledHeading = styled(Heading)({
|
||||
fontSize: '1rem',
|
||||
fontWeight: 700,
|
||||
textTransform: 'capitalize',
|
||||
});
|
||||
|
||||
const StyledBoxVersion = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
|
||||
color: theme && theme.palette.text.secondary,
|
||||
}));
|
||||
|
||||
const DetailSidebarTitle: React.FC<Props> = ({ description, packageName, version, isLatest }) => (
|
||||
<Box className={'detail-info'} display="flex" flexDirection="column" marginBottom="8px">
|
||||
<StyledHeading>{packageName}</StyledHeading>
|
||||
{description && <div>{description}</div>}
|
||||
<StyledBoxVersion>{`${isLatest ? 'Latest v' : 'v'}${version}`}</StyledBoxVersion>
|
||||
</Box>
|
||||
);
|
||||
|
||||
export default DetailSidebarTitle;
|
||||
@@ -1,24 +0,0 @@
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import ListItem from '../../muiComponents/ListItem';
|
||||
import ListItemText from '../../muiComponents/ListItemText';
|
||||
|
||||
export const TitleListItem = styled(ListItem)({
|
||||
paddingLeft: 0,
|
||||
paddingRight: 0,
|
||||
paddingBottom: 0,
|
||||
});
|
||||
|
||||
export const TitleListItemText = styled(ListItemText)({
|
||||
paddingLeft: 0,
|
||||
paddingRight: 0,
|
||||
paddingTop: '8px',
|
||||
});
|
||||
|
||||
export const PackageDescription = styled('span')({
|
||||
display: 'block',
|
||||
});
|
||||
|
||||
export const PackageVersion = styled('span')({
|
||||
display: 'block',
|
||||
});
|
||||
Reference in New Issue
Block a user