Feat: added "Fund this package" button (#375)

.vscode/settings.json

@@ -1,10 +1,10 @@
 {
 	"eslint.packageManager": "yarn",
-	"eslint.validate": [
-		"javascript",
-		"javascriptreact",
-		"typescript",
-		"typescriptreact"
-	],
+	// "eslint.validate": [
+	// 	"javascript",
+	// 	"javascriptreact",
+	// 	"typescript",
+	// 	"typescriptreact"
+	// ],
 	"typescript.tsdk": "node_modules/typescript/lib"
 } 

src/components/DetailSidebar/DetailSidebar.tsx

@@ -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;

src/components/DetailSidebar/DetailSidebarFundButton.tsx

@@ -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;

src/components/DetailSidebar/DetailSidebarTitle.tsx

@@ -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;

src/components/DetailSidebar/styles.ts

@@ -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',
-});

src/design-tokens/theme.ts

@@ -6,6 +6,7 @@ const colors = {
   black: '#000',
   white: '#fff',
   red: '#d32f2f',
+  orange: '#CD4000',
   greySuperLight: '#f5f5f5',
   greyLight: '#d3d3d3',
   greyLight2: '#908ba1',
@@ -93,6 +94,7 @@ declare module '@material-ui/core/styles/createPalette' {
     black: string;
     white: string;
     red: string;
+    orange: string;
     greySuperLight: string;
     greyLight: string;
     greyLight2: string;

tools/dev.server.js

@@ -37,7 +37,7 @@ new WebpackDevServer(compiler, {
   proxy: [
     {
       context: ['/-/verdaccio/**', '**/*.tgz'],
-      target: 'http://localhost:8080',
+      target: 'http://localhost:4873',
     },
   ],
 }).listen(4872, 'localhost', function(err) {

types/packageMeta.ts

@@ -24,6 +24,8 @@ export interface PackageMetaInterface {
       type?: string;
       url?: string;
     };
+    description?: string;
+    funding?: Funding;
     maintainers?: Array<Developer>;
     contributors?: Array<Developer>;
   };
@@ -35,6 +37,11 @@ export interface Developer {
   avatar: string;
 }
 
+interface Funding {
+  type?: string;
+  url: string;
+}
+
 interface LicenseInterface {
   type: string;
   url: string;

~/.config/verdaccio/storage_demo_gif/.verdaccio-db.json

@@ -0,0 +1 @@
+{"list":[],"secret":"819a0e7ff50afc060d18d766705b95c3924a82f2aee580fd53fa2235faea87e7"}