From c9858c85e3a4c9455bb93699f1196a382c9c5275 Mon Sep 17 00:00:00 2001 From: Ayush Sharma Date: Sun, 3 Mar 2019 20:01:41 +0100 Subject: [PATCH] refactor: package list [WIP] --- src/lib/utils.js | 3 +- src/webui/components/Icon/img/filebinary.svg | 2 +- src/webui/components/Icon/index.js | 9 +- src/webui/components/Icon/types.js | 2 +- src/webui/components/Package/index.js | 229 +++++++------------ src/webui/components/Package/styles.js | 205 ++++++++--------- src/webui/components/PackageList/index.js | 35 +-- src/webui/utils/styles/colors.js | 3 + src/webui/utils/styles/media.js | 2 +- 9 files changed, 211 insertions(+), 279 deletions(-) diff --git a/src/lib/utils.js b/src/lib/utils.js index 7de507ab5..202007aa8 100644 --- a/src/lib/utils.js +++ b/src/lib/utils.js @@ -1,5 +1,6 @@ /** * @prettier + * @flow */ import _ from 'lodash'; @@ -515,7 +516,7 @@ export function getVersionFromTarball(name: string) { * @see https://docs.npmjs.com/files/package.json#author * @param {string|object|undefined} author */ -export function formatAuthor(author:any) { +export function formatAuthor(author: any) { let authorDetails = { name: DEFAULT_USER, email: '', diff --git a/src/webui/components/Icon/img/filebinary.svg b/src/webui/components/Icon/img/filebinary.svg index f891b36fe..489e632da 100644 --- a/src/webui/components/Icon/img/filebinary.svg +++ b/src/webui/components/Icon/img/filebinary.svg @@ -1,3 +1,3 @@ - + \ No newline at end of file diff --git a/src/webui/components/Icon/index.js b/src/webui/components/Icon/index.js index 239616e5c..f91ea8241 100644 --- a/src/webui/components/Icon/index.js +++ b/src/webui/components/Icon/index.js @@ -19,11 +19,11 @@ import austria from './img/austria.svg'; import spain from './img/spain.svg'; import earth from './img/earth.svg'; import verdaccio from './img/verdaccio.svg'; -import license from './img/license.svg'; +import fileBinary from './img/fileBinary.svg'; import law from './img/law.svg'; +import license from './img/license.svg'; import time from './img/time.svg'; import version from './img/version.svg'; -import filebinary from './img/filebinary.svg'; export const Icons: $Shape = { // flags @@ -36,11 +36,12 @@ export const Icons: $Shape = { austria, earth, verdaccio, + // other icons + fileBinary, + law, license, time, - law, version, - filebinary, }; const Icon = ({ className, name, size = 'sm', img = false, pointer = false, ...props }: IProps): Node => { diff --git a/src/webui/components/Icon/types.js b/src/webui/components/Icon/types.js index 5b2adf68a..b825c4e26 100644 --- a/src/webui/components/Icon/types.js +++ b/src/webui/components/Icon/types.js @@ -19,7 +19,7 @@ export interface IIconsMap { time: string; law: string; version: string; - filebinary: string; + fileBinary: string; [key: string]: string; } diff --git a/src/webui/components/Package/index.js b/src/webui/components/Package/index.js index 4132316bd..e1c7d6387 100644 --- a/src/webui/components/Package/index.js +++ b/src/webui/components/Package/index.js @@ -1,72 +1,53 @@ /** * @prettier + * @flow */ - -/* eslint-disable */ - import React from 'react'; import type { Element } from 'react'; -import { spacing } from '../../utils/styles/mixings'; -import Grid from '@material-ui/core/Grid/index'; -import List from '@material-ui/core/List/index'; -import ListItem from '@material-ui/core/ListItem/index'; -import ListItemText from '@material-ui/core/ListItemText/index'; -// import ListItemAvatar from '@material-ui/core/ListItemAvatar/index'; -// import Avatar2 from '@material-ui/core/Avatar/index'; -import Typography from '@material-ui/core/Typography/index'; -import IconButton from '@material-ui/core/IconButton'; import BugReport from '@material-ui/icons/BugReport'; -import Tooltip from '@material-ui/core/Tooltip/index'; +import Grid from '@material-ui/core/Grid/index'; import HomeIcon from '@material-ui/icons/Home'; -// import BookmarkBorder from '@material-ui/icons/BookmarkBorder/index'; +import ListItem from '@material-ui/core/ListItem/index'; +import Tooltip from '@material-ui/core/Tooltip/index'; import Tag from '../Tag'; import fileSizeSI from '../../utils/file-size'; import { formatDate, formatDateDistance } from '../../utils/package'; - import { IProps } from './types'; -import { - WrapperLink, - Header, - MainInfo, - Name, - Version, - Overview, - Published, - OverviewItem, - Description, - Icon, - Text, - Details, - Avatar, - Author, - Field, - Content, - Footer, - PackageName, -} from './styles'; -import { fontWeight } from '../../utils/styles/sizes'; -// const getInitialsName = (name: string) => -// name -// .split(' ') -// .reduce((accumulator, currentValue) => accumulator.charAt(0) + currentValue.charAt(0), '') -// .toUpperCase(); +import { + Author, + Avatar, + Description, + Details, + GridRightAligned, + Icon, + IconButton, + OverviewItem, + PackageList, + PackageListItem, + PackageListItemText, + PackageTitle, + Published, + TagContainer, + Text, + WrapperLink, +} from './styles'; const Package = ({ - name: label, - version, - dist: { unpackedSize } = {}, - time, - author: { name, avatar }, + author: { name: authorName, avatar: authorAvatar }, + bugs: { url } = {}, description, - license, - keywords = [], + dist: { unpackedSize } = {}, homepage, - bugs, + keywords = [], + license, + name: packageName, + time, + version, }: IProps): Element => { - console.log(homepage); + // const renderVersionInfo = () => version && ( @@ -75,21 +56,20 @@ const Package = ({ ); - const renderAuthorInfo = () => { - return ( + const renderAuthorInfo = () => + authorName && ( - +
- +
); - } const renderFileSize = () => unpackedSize && ( - + {fileSizeSI(unpackedSize)} ); @@ -102,114 +82,79 @@ const Package = ({ ); - const renderPublishedInfo = () => ( - - - {`Published on ${formatDate(time)} •`} - {`${formatDateDistance(time)} ago`} - - ); - - const renderDescription = () => - description && ( - - {description} - + const renderPublishedInfo = () => + time && ( + + + {`Published on ${formatDate(time)} •`} + {`${formatDateDistance(time)} ago`} + ); - // return ( - // - //
- // {renderMainInfo()} - // - // {renderLicenseInfo()} - // {renderPublishedInfo()} - // - //
- // - // {renderAuthorInfo()} - // {renderDescription()} - // - // {keywords.length > 0 && ( - //
- // {keywords.sort().map((keyword, index) => ( - // {keyword} - // ))} - //
- // )} - // - // ); - const tags = keywords.sort().map((keyword, index) => ( - - {keyword} - - )); - const renderHomePageLink = () => homepage && ( - - - - + + + + {/* eslint-disable-next-line react/jsx-max-depth */} + ); const renderBugsLink = () => - bugs && - bugs.url && ( - - - - + url && ( + + + + {/* eslint-disable-next-line react/jsx-max-depth */} + ); + const renderPrimaryComponent = () => { + return ( + + + + {/* eslint-disable-next-line react/jsx-max-depth */} + {packageName} + + + + {renderHomePageLink()} + {renderBugsLink()} + + + ); + }; + + const renderSecondaryComponent = () => { + const tags = keywords.sort().map((keyword, index) => {keyword}); + return ( + <> + {description} + {tags.length > 0 && {tags}} + + ); + }; + return ( - - - - - - {label} - - - - {renderHomePageLink()} - {renderBugsLink()} - {/* - - - - */} - - - } - secondary={ - - - {description} - - {tags.length > 0 && {tags}} - - } - /> + + + - + {renderAuthorInfo()} {renderVersionInfo()} {renderPublishedInfo()} {renderFileSize()} {renderLicenseInfo()} - - + + ); }; export default Package; diff --git a/src/webui/components/Package/styles.js b/src/webui/components/Package/styles.js index dac0c11c9..eaa486040 100644 --- a/src/webui/components/Package/styles.js +++ b/src/webui/components/Package/styles.js @@ -5,124 +5,66 @@ import styled from 'react-emotion'; import { Link } from 'react-router-dom'; -import { default as Photo } from '@material-ui/core/Avatar'; -import { default as Ico } from '../Icon'; -// import mq from '../../utils/styles/media'; -import { ellipsis } from '../../utils/styles/mixings'; -import colors from '../../utils/styles/colors'; +import Grid from '@material-ui/core/Grid/index'; +import List from '@material-ui/core/List/index'; +import ListItem from '@material-ui/core/ListItem/index'; +import ListItemText from '@material-ui/core/ListItemText/index'; +import MuiIconButton from '@material-ui/core/IconButton/index'; +import Photo from '@material-ui/core/Avatar'; +import Typography from '@material-ui/core/Typography/index'; +import { breakpoints } from '../../utils/styles/media'; +import Ico from '../Icon'; import Label from '../Label'; - -// HEADER -export const Header = styled.div` - && { - display: flex; - flex-direction: column; - padding: 0 0 5px 0; - } -`; - -export const Name = styled.span` - && { - color: ${colors.primary}; - } -`; - -export const MainInfo = styled.span` - && { - font-size: 16px; - font-weight: 600; - line-height: 30px; - flex: 1; - color: #3a8bff; - padding: 0 10px 0 0; - overflow: hidden; - display: flex; - align-items: center; - :hover { - ${Name} { - text-decoration: underline; - } - } - } -`; +import colors from '../../utils/styles/colors'; export const OverviewItem = styled.span` && { display: flex; align-items: center; margin: 0 0 0 16px; - color: #908ba1; - font-size: 16px; - } -`; - -export const Overview = styled.span` - && { - position: relative; - display: flex; - flex-direction: column; - } -`; - -export const Version = styled.span` - && { + color: ${colors.greyLight2}; font-size: 12px; - padding: 0 0 0 10px; - margin: 0 0 0 5px; - color: #9f9f9f; - position: relative; - ${ellipsis('100%')}; - :before { - content: '•'; - position: absolute; - left: 0; + @media (max-width: ${breakpoints.medium}px) { + &:nth-child(3) { + display: none; + } + } + @media (max-width: ${breakpoints.small}px) { + &:nth-child(4) { + display: none; + } } } `; export const Icon = styled(Ico)` && { - margin: 0px 10px 0px 0; - fill: #908ba1; + margin: 2px 10px 0px 0; + fill: ${colors.greyLight2}; } `; export const Published = styled.span` && { - color: #908ba1; - ${({ modifiers }) => modifiers}; - } -`; - -// Content -export const Field = styled.div` - && { - padding: 0 0 5px 0; - } -`; - -export const Content = styled.div` - && { - ${Field} { - :last-child { - padding: 0; - } - } + color: ${colors.greyLight2}; + margin: 0px 5px 0px 0px; } `; export const Text = styled(Label)` && { - color: #908ba1; + font-size: 12px; + font-weight: 500; + color: ${colors.greyLight2}; } `; export const Details = styled.span` && { margin-left: 5px; - line-height: 14px; + line-height: 1.5; display: flex; flex-direction: column; } @@ -137,49 +79,88 @@ export const Author = styled.div` export const Avatar = styled(Photo)` && { - width: 30px; - height: 30px; - background: #4b5e40; - font-size: 15px; + width: 20px; + height: 20px; } `; -export const Description = styled.div` - && { - margin: 5px 0; - } -`; - -// Footer -export const Footer = styled.div` - && { - display: none; - padding: 5px 0 0 0; - } -`; - -// Container export const WrapperLink = styled(Link)` && { text-decoration: none; } `; -/** - * Ayush's style - */ - -export const PackageName = styled.span` +export const PackageTitle = styled.span` && { font-weight: 600; font-size: 20px; display: block; margin-bottom: 12px; - color: #414141; + color: ${colors.eclipse}; cursor: pointer; &:hover { - color: black; + color: ${colors.black}; + } + + @media (max-width: ${breakpoints.small}px) { + font-size: 14px; + margin-bottom: 8px; } } `; + +export const GridRightAligned = styled(Grid)` + && { + text-align: right; + } +`; + +export const PackageList = styled(List)` + && { + padding: 12px 0 12px 0; + + &:hover { + background-color: ${colors.greyLight3}; + } + } +`; + +export const IconButton = styled(MuiIconButton)` + && { + padding: 6px; + + svg { + font-size: 16px; + } + } +`; + +export const TagContainer = styled.span` + && { + margin-top: 8px; + margin-bottom: 12px; + display: block; + @media (max-width: ${breakpoints.medium}px) { + display: none; + } + } +`; + +export const PackageListItem = styled(ListItem)` + && { + padding-top: 0; + } +`; + +export const PackageListItemText = styled(ListItemText)` + && { + padding-right: 0; + } +`; + +export const Description = styled(Typography)` + color: ${colors.greyDark2}; + font-size: 14px; + padding-right: 0; +`; diff --git a/src/webui/components/PackageList/index.js b/src/webui/components/PackageList/index.js index b32f8b179..db869eb5d 100644 --- a/src/webui/components/PackageList/index.js +++ b/src/webui/components/PackageList/index.js @@ -2,6 +2,7 @@ import React, { Fragment } from 'react'; import PropTypes from 'prop-types'; import Divider from '@material-ui/core/Divider'; + import Package from '../Package'; import Help from '../Help'; import { formatLicense } from '../../utils/package'; @@ -13,6 +14,21 @@ export default class PackageList extends React.Component { packages: PropTypes.array, }; + render() { + return ( +
+
+ {this.hasPackages() ? this.renderPackages(): } +
+
+ ); + } + + hasPackages() { + const {packages} = this.props; + return packages.length > 0; + } + renderPackages = () => { return ( @@ -27,30 +43,15 @@ export default class PackageList extends React.Component { packages.map((pkg, i) => { const { name, version, description, time, keywords, dist, homepage, bugs } = pkg; const author = pkg.author; + // TODO: move format license to API side. const license = formatLicense(pkg.license); return ( - {i !== 0 && } + {i !== 0 && } ); }) ); } - - render() { - return ( -
-
- {this.hasPackages() ? this.renderPackages(): } -
-
- ); - } - - hasPackages() { - const {packages} = this.props; - - return packages.length > 0; - } } diff --git a/src/webui/utils/styles/colors.js b/src/webui/utils/styles/colors.js index 4cd495f25..fecfa9c14 100644 --- a/src/webui/utils/styles/colors.js +++ b/src/webui/utils/styles/colors.js @@ -10,7 +10,10 @@ const colors = { grey: '#808080', greySuperLight: '#f5f5f5', greyLight: '#d3d3d3', + greyLight2: '#908ba1', + greyLight3: '#f3f4f240', greyDark: '#a9a9a9', + greyDark2: '#586069', greyChateau: '#95989a', greyGainsboro: '#e3e3e3', greyAthens: '#d3dddd', diff --git a/src/webui/utils/styles/media.js b/src/webui/utils/styles/media.js index 3240d70fd..1c7402511 100644 --- a/src/webui/utils/styles/media.js +++ b/src/webui/utils/styles/media.js @@ -1,6 +1,6 @@ import { css } from 'emotion'; -const breakpoints = { +export const breakpoints = { small: 576, medium: 768, large: 1024,