import React from 'react'; import BugReport from '@material-ui/icons/BugReport'; import DownloadIcon from '@material-ui/icons/CloudDownload'; import HomeIcon from '@material-ui/icons/Home'; import { PackageMetaInterface, Author as PackageAuthor } from '../../../types/packageMeta'; import Tag from '../Tag'; import fileSizeSI from '../../utils/file-size'; import { formatDate, formatDateDistance } from '../../utils/package'; import Tooltip from '../../muiComponents/Tooltip'; import { isURL } from '../../utils/url'; import { downloadHandler } from '../ActionBar/ActionBar'; import ListItem from '../../muiComponents/ListItem'; import Grid from '../../muiComponents/Grid'; import { Author, Avatar, Description, Details, GridRightAligned, Icon, IconButton, OverviewItem, PackageList, PackageListItemText, PackageTitle, Published, TagContainer, Text, WrapperLink, } from './styles'; interface Bugs { url: string; } interface Dist { unpackedSize: number; tarball: string; } export interface PackageInterface { name: string; version: string; time?: number | string; author: PackageAuthor; description?: string; keywords?: string[]; license?: PackageMetaInterface['latest']['license']; homepage?: string; bugs?: Bugs; dist?: Dist; } const Package: React.FC = ({ author: { name: authorName, avatar: authorAvatar }, bugs, description, dist, homepage, keywords = [], license, name: packageName, time, version, }) => { const renderVersionInfo = (): React.ReactNode => version && ( {`v${version}`} ); const renderAuthorInfo = (): React.ReactNode => authorName && (
); const renderFileSize = (): React.ReactNode => dist && dist.unpackedSize && ( {fileSizeSI(dist.unpackedSize)} ); const renderLicenseInfo = (): React.ReactNode => license && ( {license} ); const renderPublishedInfo = (): React.ReactNode => time && ( {`Published on ${formatDate(time)} •`} {`${formatDateDistance(time)} ago`} ); const renderHomePageLink = (): React.ReactNode => homepage && isURL(homepage) && ( {/* eslint-disable-next-line react/jsx-max-depth */} ); const renderBugsLink = (): React.ReactNode => bugs && bugs.url && isURL(bugs.url) && ( {/* eslint-disable-next-line react/jsx-max-depth */} ); const renderDownloadLink = (): React.ReactNode => dist && dist.tarball && isURL(dist.tarball) && ( // eslint-disable-next-line downloadHandler(dist.tarball.replace(`https://registry.npmjs.org/`, window.location.href))} target={'_blank'}> {/* eslint-disable-next-line react/jsx-max-depth */} ); const renderPrimaryComponent = (): React.ReactNode => { return ( {/* eslint-disable-next-line react/jsx-max-depth */} {packageName} {renderHomePageLink()} {renderBugsLink()} {renderDownloadLink()} ); }; const renderSecondaryComponent = (): React.ReactNode => { const tags = keywords.sort().map((keyword, index) => {keyword}); return ( <> {description} {tags.length > 0 && {tags}} ); }; const renderPackageListItemText = (): React.ReactNode => ( ); return ( {renderPackageListItemText()} {renderAuthorInfo()} {renderVersionInfo()} {renderPublishedInfo()} {renderFileSize()} {renderLicenseInfo()} ); }; export default Package;