From bf093cc27b8625cdc50dbfc9b8dd7e37f4e24da9 Mon Sep 17 00:00:00 2001 From: Priscila Oliveira Date: Wed, 18 Dec 2019 17:30:42 -0300 Subject: [PATCH] Feat: added "Fund this package" button (#375) --- .vscode/settings.json | 12 +- .../DetailSidebar/DetailSidebar.tsx | 104 +++++++----------- .../DetailSidebar/DetailSidebarFundButton.tsx | 46 ++++++++ .../DetailSidebar/DetailSidebarTitle.tsx | 33 ++++++ src/components/DetailSidebar/styles.ts | 24 ---- src/design-tokens/theme.ts | 2 + tools/dev.server.js | 2 +- types/packageMeta.ts | 7 ++ .../storage_demo_gif/.verdaccio-db.json | 1 + 9 files changed, 135 insertions(+), 96 deletions(-) create mode 100644 src/components/DetailSidebar/DetailSidebarFundButton.tsx create mode 100644 src/components/DetailSidebar/DetailSidebarTitle.tsx delete mode 100644 src/components/DetailSidebar/styles.ts create mode 100644 ~/.config/verdaccio/storage_demo_gif/.verdaccio-db.json diff --git a/.vscode/settings.json b/.vscode/settings.json index e24418c..ac8e432 100644 --- a/.vscode/settings.json +++ b/.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" } \ No newline at end of file diff --git a/src/components/DetailSidebar/DetailSidebar.tsx b/src/components/DetailSidebar/DetailSidebar.tsx index e51de6a..23a0f9a 100644 --- a/src/components/DetailSidebar/DetailSidebar.tsx +++ b/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 ( - <> - {description} - {version ? ( - - {`${isLatest ? 'Latest v' : 'v'}${version}`} - - ) : null} - - ); -}; +const StyledPaper = styled(Paper)<{ theme?: Theme }>(({ theme }) => ({ + padding: theme.spacing(3, 2), +})); -const renderCopyCLI = (): JSX.Element => ; -const renderRepository = (): JSX.Element => ; -const renderAuthor = (): JSX.Element => ; -const renderEngine = (): JSX.Element => ; -const renderDist = (): JSX.Element => ; -const renderActionBar = (): JSX.Element => ; -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 ( - - - {packageName}} - secondary={renderLatestDescription(packageMeta.latest.description, version, isLatest)} - /> - - + + + + + {packageMeta?.latest?.funding && } + + + + + + + ); }; -function renderSideBar(packageName, packageVersion, packageMeta): ReactElement { - return ( -
- - - {renderTitle(packageName, packageVersion, packageMeta)} - {renderActionBar()} - {renderCopyCLI()} - {renderRepository()} - {renderEngine()} - {renderDist()} - {renderAuthor()} - - - - -
- ); -} - -const DetailSidebar = (): JSX.Element => { - const { packageName, packageMeta, packageVersion } = React.useContext(DetailContext); - - return renderSideBar(packageName, packageVersion, packageMeta); -}; - export default DetailSidebar; diff --git a/src/components/DetailSidebar/DetailSidebarFundButton.tsx b/src/components/DetailSidebar/DetailSidebarFundButton.tsx new file mode 100644 index 0000000..5e41363 --- /dev/null +++ b/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 = ({ to }) => { + const preventDefault = (event: MouseEvent) => event.preventDefault(); + return ( + + + + ); +}; + +export default DetailSidebarFundButton; diff --git a/src/components/DetailSidebar/DetailSidebarTitle.tsx b/src/components/DetailSidebar/DetailSidebarTitle.tsx new file mode 100644 index 0000000..f29c74e --- /dev/null +++ b/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 = ({ description, packageName, version, isLatest }) => ( + + {packageName} + {description &&
{description}
} + {`${isLatest ? 'Latest v' : 'v'}${version}`} +
+); + +export default DetailSidebarTitle; diff --git a/src/components/DetailSidebar/styles.ts b/src/components/DetailSidebar/styles.ts deleted file mode 100644 index da9fc5f..0000000 --- a/src/components/DetailSidebar/styles.ts +++ /dev/null @@ -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', -}); diff --git a/src/design-tokens/theme.ts b/src/design-tokens/theme.ts index b5a2231..5f1d6cb 100644 --- a/src/design-tokens/theme.ts +++ b/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; diff --git a/tools/dev.server.js b/tools/dev.server.js index 52334c3..b65c23e 100644 --- a/tools/dev.server.js +++ b/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) { diff --git a/types/packageMeta.ts b/types/packageMeta.ts index 4d250c1..b61cb97 100644 --- a/types/packageMeta.ts +++ b/types/packageMeta.ts @@ -24,6 +24,8 @@ export interface PackageMetaInterface { type?: string; url?: string; }; + description?: string; + funding?: Funding; maintainers?: Array; contributors?: Array; }; @@ -35,6 +37,11 @@ export interface Developer { avatar: string; } +interface Funding { + type?: string; + url: string; +} + interface LicenseInterface { type: string; url: string; diff --git a/~/.config/verdaccio/storage_demo_gif/.verdaccio-db.json b/~/.config/verdaccio/storage_demo_gif/.verdaccio-db.json new file mode 100644 index 0000000..3a0bced --- /dev/null +++ b/~/.config/verdaccio/storage_demo_gif/.verdaccio-db.json @@ -0,0 +1 @@ +{"list":[],"secret":"819a0e7ff50afc060d18d766705b95c3924a82f2aee580fd53fa2235faea87e7"} \ No newline at end of file