sombochea/verdaccio-ui
1
0
Fork 1
mirror of https://github.com/SomboChea/ui synced 2024-11-24 06:54:27 +07:00
Code Issues Releases Wiki Activity

fix: rest MUI components - Introduced ForwardRef (#224)

Browse Source 
* refactor(162): added forwardRef Card

* refactor(162): introduced forwardRefDivider

* refactor(162): introduced forwardRef MuiComponents

* refactor(162): introducing forwardRef

* refactor(162): introduced forwardRef

* refactor(162): introduced forwardRef

* fix(162): fixed link

* fix: fixed port number

* fix: fixed duplicated id

* fix: fixed ref iconbutton

* fix: updated snaps

* fix: fixed port

* fix: fixed eslint errors

* fix: the item should be a button

* fix: fixed eslint errors
This commit is contained in:
Priscila Oliveira 2019-10-31 08:12:18 +01:00 committed by Juan Picado @jotadeveloper
parent a4cdd145d2
commit b56e43846b
82 changed files with 467 additions and 269 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/ActionBar/__snapshots__/ActionBar.test.tsx.snap
View File

@ -2,6 +2,6 @@
exports[`<ActionBar /> component should render the component in default state 1`] = `""`;
exports[`<ActionBar /> component when there is a button to download a tarball 1`] = `"<ul class=\\"MuiList-root MuiList-padding\\"><div class=\\"MuiButtonBase-root MuiListItem-root css-1br2q5z eux6shq0 MuiListItem-gutters MuiListItem-button MuiListItem-alignItemsFlexStart\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><button class=\\"MuiButtonBase-root MuiFab-root css-96oxa0 eux6shq1 MuiFab-sizeSmall\\" tabindex=\\"0\\" type=\\"button\\" title=\\"Download tarball\\"><span class=\\"MuiFab-label\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z\\"></path></svg></span><span class=\\"MuiTouchRipple-root\\"></span></button><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
exports[`<ActionBar /> component when there is a button to download a tarball 1`] = `"<ul class=\\"MuiList-root MuiList-padding\\"><div class=\\"MuiButtonBase-root MuiListItem-root css-1br2q5z eux6shq0 MuiListItem-gutters MuiListItem-button MuiListItem-alignItemsFlexStart\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><button class=\\"MuiButtonBase-root MuiFab-root css-z6z5me eux6shq1 MuiFab-sizeSmall\\" tabindex=\\"0\\" type=\\"button\\" title=\\"Download tarball\\"><span class=\\"MuiFab-label\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z\\"></path></svg></span><span class=\\"MuiTouchRipple-root\\"></span></button><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
exports[`<ActionBar /> component when there is a button to open an issue 1`] = `"<ul class=\\"MuiList-root MuiList-padding\\"><div class=\\"MuiButtonBase-root MuiListItem-root css-1br2q5z eux6shq0 MuiListItem-gutters MuiListItem-button MuiListItem-alignItemsFlexStart\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><a href=\\"https://verdaccio.tld/bugs\\" target=\\"_blank\\"><button class=\\"MuiButtonBase-root MuiFab-root css-96oxa0 eux6shq1 MuiFab-sizeSmall\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiFab-label\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M20 8h-2.81c-.45-.78-1.07-1.45-1.82-1.96L17 4.41 15.59 3l-2.17 2.17C12.96 5.06 12.49 5 12 5c-.49 0-.96.06-1.41.17L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8zm-6 8h-4v-2h4v2zm0-4h-4v-2h4v2z\\"></path></svg></span><span class=\\"MuiTouchRipple-root\\"></span></button></a><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
exports[`<ActionBar /> component when there is a button to open an issue 1`] = `"<ul class=\\"MuiList-root MuiList-padding\\"><div class=\\"MuiButtonBase-root MuiListItem-root css-1br2q5z eux6shq0 MuiListItem-gutters MuiListItem-button MuiListItem-alignItemsFlexStart\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><a href=\\"https://verdaccio.tld/bugs\\" target=\\"_blank\\"><button class=\\"MuiButtonBase-root MuiFab-root css-z6z5me eux6shq1 MuiFab-sizeSmall\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiFab-label\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M20 8h-2.81c-.45-.78-1.07-1.45-1.82-1.96L17 4.41 15.59 3l-2.17 2.17C12.96 5.06 12.49 5 12 5c-.49 0-.96.06-1.41.17L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8zm-6 8h-4v-2h4v2zm0-4h-4v-2h4v2z\\"></path></svg></span><span class=\\"MuiTouchRipple-root\\"></span></button></a><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;

6
src/components/ActionBar/styles.ts
View File

@ -1,8 +1,8 @@
import styled from 'react-emotion';
import { default as MuiFab } from '@material-ui/core/Fab';
import colors from '../../utils/styles/colors';
import ListItem from '../../muiComponents/ListItem';
import FloatingActionButton from '../../muiComponents/FloatingActionButton';
export const ActionListItem = styled(ListItem)({
paddingTop: 0,
@ -10,10 +10,8 @@ export const ActionListItem = styled(ListItem)({
paddingRight: 0,
});
export const Fab = styled(MuiFab)({
'&&': {
export const Fab = styled(FloatingActionButton)({
backgroundColor: colors.primary,
color: colors.white,
marginRight: '10px',
},
});

4
src/components/Author/__snapshots__/Author.test.tsx.snap
View File

@ -1,5 +1,5 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<Author /> component should render the component in default state 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-b8upko e1xuehjw0 MuiTypography-subtitle1\\">Author</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-xugzlj e1xuehjw1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><a href=\\"mailto:verdaccio.user@verdaccio.org?subject=verdaccio@4.0.0\\" target=\\"_top\\"><div class=\\"MuiAvatar-root\\"><img alt=\\"verdaccio user\\" src=\\"https://www.gravatar.com/avatar/000000\\" class=\\"MuiAvatar-img\\"></div></a><div class=\\"MuiListItemText-root css-1vhg3jx e1xuehjw2\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">verdaccio user</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
exports[`<Author /> component should render the component in default state 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-b8upko e1xuehjw0 MuiTypography-subtitle1\\">Author</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-zw46c6 e1xuehjw1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><a href=\\"mailto:verdaccio.user@verdaccio.org?subject=verdaccio@4.0.0\\" target=\\"_top\\"><div class=\\"MuiAvatar-root\\"><img alt=\\"verdaccio user\\" src=\\"https://www.gravatar.com/avatar/000000\\" class=\\"MuiAvatar-img\\"></div></a><div class=\\"MuiListItemText-root css-fipixf e1xuehjw2\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">verdaccio user</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
exports[`<Author /> component should render the component when there is no author email 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-b8upko e1xuehjw0 MuiTypography-subtitle1\\">Author</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-xugzlj e1xuehjw1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiAvatar-root\\"><img alt=\\"verdaccio user\\" src=\\"https://www.gravatar.com/avatar/000000\\" class=\\"MuiAvatar-img\\"></div><div class=\\"MuiListItemText-root css-1vhg3jx e1xuehjw2\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">verdaccio user</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
exports[`<Author /> component should render the component when there is no author email 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-b8upko e1xuehjw0 MuiTypography-subtitle1\\">Author</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-zw46c6 e1xuehjw1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiAvatar-root\\"><img alt=\\"verdaccio user\\" src=\\"https://www.gravatar.com/avatar/000000\\" class=\\"MuiAvatar-img\\"></div><div class=\\"MuiListItemText-root css-fipixf e1xuehjw2\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">verdaccio user</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;

8
src/components/Author/styles.ts
View File

@ -1,9 +1,9 @@
import styled from 'react-emotion';
import ListItemText from '@material-ui/core/ListItemText';
import { fontWeight } from '../../utils/styles/sizes';
import ListItem from '../../muiComponents/ListItem';
import Text from '../../muiComponents/Text';
import ListItemText from '../../muiComponents/ListItemText';
export const StyledText = styled(Text)({
fontWeight: fontWeight.bold,
@ -11,17 +11,13 @@ export const StyledText = styled(Text)({
});
export const AuthorListItem = styled(ListItem)({
'&&': {
padding: 0,
},
'&&:hover': {
':hover': {
backgroundColor: 'transparent',
},
});
export const AuthorListItemText = styled(ListItemText)({
'&&': {
padding: '0 10px',
margin: 0,
},
});

2
src/components/AutoComplete/AutoComplete.tsx
View File

@ -3,9 +3,9 @@ import { css } from 'emotion';
import Autosuggest, { SuggestionSelectedEventData, InputProps, ChangeEvent } from 'react-autosuggest';
import match from 'autosuggest-highlight/match';
import parse from 'autosuggest-highlight/parse';
import MenuItem from '@material-ui/core/MenuItem';
import { fontWeight } from '../../utils/styles/sizes';
import MenuItem from '../../muiComponents/MenuItem';
import { Wrapper, InputField, SuggestionContainer } from './styles';

2
src/components/AutoComplete/styles.tsx
View File

@ -1,8 +1,8 @@
import React from 'react';
import styled, { css } from 'react-emotion';
import Paper from '@material-ui/core/Paper';
import TextField from '../../muiComponents/TextField';
import Paper from '../../muiComponents/Paper';
export interface InputFieldProps {
color: string;

2
src/components/Dependencies/Dependencies.tsx
View File

@ -1,7 +1,7 @@
import React, { useContext } from 'react';
import { useHistory } from 'react-router-dom';
import CardContent from '@material-ui/core/CardContent';
import CardContent from '../../muiComponents/CardContent';
import { PackageDependencies } from '../../../types/packageMeta';
import { DetailContext } from '../../pages/Version';
import NoItems from '../NoItems';

8
src/components/Dependencies/styles.ts
View File

@ -1,14 +1,12 @@
import styled from 'react-emotion';
import Chip from '@material-ui/core/Chip';
import { fontWeight } from '../../utils/styles/sizes';
import Text from '../../muiComponents/Text';
import Card from '../../muiComponents/Card';
import Chip from '../../muiComponents/Chip';
export const CardWrap = styled(Card)({
'&&': {
margin: '0 0 16px',
},
});
export const StyledText = styled(Text)({
@ -17,16 +15,12 @@ export const StyledText = styled(Text)({
});
export const Tags = styled('div')({
'&&': {
display: 'flex',
justifyContent: 'start',
flexWrap: 'wrap',
margin: '0 -5px',
},
});
export const Tag = styled(Chip)({
'&&': {
margin: '5px',
},
});

2
src/components/DetailContainer/DetailContainer.tsx
View File

@ -1,7 +1,7 @@
import React, { useCallback, useState, ChangeEvent, useContext } from 'react';
import Box from '@material-ui/core/Box';
import { DetailContext } from '../../pages/Version';
import Box from '../../muiComponents/Box';
import DetailContainerTabs from './DetailContainerTabs';
import DetailContainerContent from './DetailContainerContent';

5
src/components/DetailContainer/DetailContainerTabs.tsx
View File

@ -1,8 +1,9 @@
import React, { ChangeEvent, useState, useEffect } from 'react';
import { default as MuiTabs } from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import styled from 'react-emotion';
import { default as MuiTabs } from '../../muiComponents/Tabs';
import Tab from '../../muiComponents/Tab';
import { TabPosition } from './tabs';
interface Props {

2
src/components/DetailSidebar/DetailSidebar.tsx
View File

@ -1,5 +1,4 @@
import React, { ReactElement } from 'react';
import CardContent from '@material-ui/core/CardContent';
import { ActionBar } from '../ActionBar/ActionBar';
import Author from '../Author';
@ -11,6 +10,7 @@ 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 { TitleListItem, TitleListItemText, PackageDescription, PackageVersion } from './styles';

8
src/components/DetailSidebar/styles.ts
View File

@ -1,7 +1,7 @@
import styled from 'react-emotion';
import ListItemText from '@material-ui/core/ListItemText';
import ListItem from '../../muiComponents/ListItem';
import ListItemText from '../../muiComponents/ListItemText';
export const TitleListItem = styled(ListItem)({
paddingLeft: 0,
@ -10,21 +10,15 @@ export const TitleListItem = styled(ListItem)({
});
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',
},
});

6
src/components/Developers/styles.ts
View File

@ -1,9 +1,9 @@
import styled from 'react-emotion';
import { default as MuiFab } from '@material-ui/core/Fab';
import colors from '../../utils/styles/colors';
import { fontWeight } from '../../utils/styles/sizes';
import Text from '../../muiComponents/Text';
import FloatingActionButton from '../../muiComponents/FloatingActionButton';
export const Details = styled('span')({
display: 'flex',
@ -26,9 +26,7 @@ export const StyledText = styled(Text)({
textTransform: 'capitalize',
});
export const Fab = styled(MuiFab)({
'&&': {
export const Fab = styled(FloatingActionButton)({
backgroundColor: colors.primary,
color: colors.white,
},
});

6
src/components/Dist/__snapshots__/Dist.test.tsx.snap
View File

@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<Dist /> component should render the component in default state 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-b8upko estxrtg0 MuiTypography-subtitle1\\">Latest Distribution</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-z8a2h0 estxrtg1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiChip-root css-1le6jk6 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>file count</b>: 7</span></div><div class=\\"MuiChip-root css-1le6jk6 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>size</b>: 10.00 Bytes</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
exports[`<Dist /> component should render the component in default state 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-b8upko estxrtg0 MuiTypography-subtitle1\\">Latest Distribution</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1huthg8 estxrtg1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiChip-root css-42zb18 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>file count</b>: 7</span></div><div class=\\"MuiChip-root css-42zb18 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>size</b>: 10.00 Bytes</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
exports[`<Dist /> component should render the component with license as object 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-b8upko estxrtg0 MuiTypography-subtitle1\\">Latest Distribution</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-z8a2h0 estxrtg1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiChip-root css-1le6jk6 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>file count</b>: 7</span></div><div class=\\"MuiChip-root css-1le6jk6 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>size</b>: 10.00 Bytes</span></div><div class=\\"MuiChip-root css-1le6jk6 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>license</b>: MIT</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
exports[`<Dist /> component should render the component with license as object 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-b8upko estxrtg0 MuiTypography-subtitle1\\">Latest Distribution</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1huthg8 estxrtg1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiChip-root css-42zb18 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>file count</b>: 7</span></div><div class=\\"MuiChip-root css-42zb18 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>size</b>: 10.00 Bytes</span></div><div class=\\"MuiChip-root css-42zb18 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>license</b>: MIT</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
exports[`<Dist /> component should render the component with license as string 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-b8upko estxrtg0 MuiTypography-subtitle1\\">Latest Distribution</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-z8a2h0 estxrtg1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiChip-root css-1le6jk6 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>file count</b>: 7</span></div><div class=\\"MuiChip-root css-1le6jk6 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>size</b>: 10.00 Bytes</span></div><div class=\\"MuiChip-root css-1le6jk6 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>license</b>: MIT</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
exports[`<Dist /> component should render the component with license as string 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-b8upko estxrtg0 MuiTypography-subtitle1\\">Latest Distribution</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1huthg8 estxrtg1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiChip-root css-42zb18 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>file count</b>: 7</span></div><div class=\\"MuiChip-root css-42zb18 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>size</b>: 10.00 Bytes</span></div><div class=\\"MuiChip-root css-42zb18 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>license</b>: MIT</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;

12
src/components/Dist/styles.ts
View File

@ -1,11 +1,11 @@
import styled from 'react-emotion';
import { default as MuiFab } from '@material-ui/core/Fab';
import Chip from '@material-ui/core/Chip';
import colors from '../../utils/styles/colors';
import { fontWeight } from '../../utils/styles/sizes';
import ListItem from '../../muiComponents/ListItem';
import Text from '../../muiComponents/Text';
import FloatingActionButton from '../../muiComponents/FloatingActionButton';
import Chip from '../../muiComponents/Chip';
export const StyledText = styled(Text)({
fontWeight: fontWeight.bold,
@ -13,22 +13,16 @@ export const StyledText = styled(Text)({
});
export const DistListItem = styled(ListItem)({
'&&': {
paddingLeft: 0,
paddingRight: 0,
},
});
export const DistChips = styled(Chip)({
'&&': {
marginRight: '5px',
textTransform: 'capitalize',
},
});
export const DownloadButton = styled(MuiFab)({
'&&': {
export const DownloadButton = styled(FloatingActionButton)({
backgroundColor: colors.primary,
color: colors.white,
},
});

4
src/components/Engines/Engines.tsx
View File

@ -1,11 +1,11 @@
import React, { Component, ReactElement } from 'react';
import Grid from '@material-ui/core/Grid';
import ListItemText from '@material-ui/core/ListItemText';
import { VersionPageConsumerProps, DetailContextConsumer } from '../../pages/Version';
import Avatar from '../../muiComponents/Avatar';
import List from '../../muiComponents/List';
import npm from '../Install/img/npm.svg';
import ListItemText from '../../muiComponents/ListItemText';
import Grid from '../../muiComponents/Grid';
import { StyledText, EngineListItem } from './styles';
// @ts-ignore

4
src/components/Header/Header.tsx
View File

@ -50,7 +50,9 @@ const Header: React.FC<Props> = ({ logo, withoutSearch, username, onLogout, onTo
<InnerMobileNavBar>
<Search />
</InnerMobileNavBar>
<Button color="inherit">{'Cancel'}</Button>
<Button color="inherit" onClick={() => setShowMobileNavBar(false)}>
{'Cancel'}
</Button>
</MobileNavBar>
)}
</>

7
src/components/Header/HeaderMenu.tsx
View File

@ -1,9 +1,9 @@
import React, { MouseEvent } from 'react';
import MenuItem from '@material-ui/core/MenuItem';
import Menu from '@material-ui/core/Menu';
import AccountCircle from '@material-ui/icons/AccountCircle';
import IconButton from '../../muiComponents/IconButton';
import MenuItem from '../../muiComponents/MenuItem';
import Menu from '../../muiComponents/Menu';
import HeaderGreetings from './HeaderGreetings';
@ -39,7 +39,6 @@ const HeaderMenu: React.FC<Props> = ({
vertical: 'top',
horizontal: 'right',
}}
id="header--button-account"
onClose={onLoggedInMenuClose}
open={isMenuOpen}
transformOrigin={{
@ -49,7 +48,7 @@ const HeaderMenu: React.FC<Props> = ({
<MenuItem disabled={true}>
<HeaderGreetings username={username} />
</MenuItem>
<MenuItem id="header--button-logout" onClick={onLogout}>
<MenuItem button={true} id="header--button-logout" onClick={onLogout}>
{'Logout'}
</MenuItem>
</Menu>

25
src/components/Header/HeaderToolTipIcon.tsx
View File

@ -1,31 +1,37 @@
import React from 'react';
import React, { forwardRef } from 'react';
import Info from '@material-ui/icons/Info';
import Help from '@material-ui/icons/Help';
import Search from '@material-ui/icons/Search';
import IconButton from '../../muiComponents/IconButton';
import { IconSearchButton, StyledExternalLink } from './styles';
import { IconSearchButton, StyledLink } from './styles';
export type TooltipIconType = 'search' | 'help' | 'info';
interface Props {
tooltipIconType: TooltipIconType;
onClick?: () => void;
}
const HeaderToolTipIcon: React.FC<Props> = ({ tooltipIconType, onClick }) => {
type HeaderToolTipIconRef = HTMLButtonElement;
/* eslint-disable react/jsx-no-undef */
/* eslint-disable react/display-name */
const HeaderToolTipIcon = forwardRef<HeaderToolTipIconRef, Props>(function HeaderToolTipIcon(
{ tooltipIconType, onClick },
ref
) {
switch (tooltipIconType) {
case 'help':
return (
<StyledExternalLink
blank={true}
<StyledLink
data-testid={'header--tooltip-documentation'}
external={true}
to={'https://verdaccio.org/docs/en/installation'}>
<IconButton color={'inherit'}>
<Help />
</IconButton>
</StyledExternalLink>
</StyledLink>
);
case 'info':
return (
@ -33,7 +39,8 @@ const HeaderToolTipIcon: React.FC<Props> = ({ tooltipIconType, onClick }) => {
color="inherit"
data-testid={'header--tooltip-info'}
id="header--button-registryInfo"
onClick={onClick}>
onClick={onClick}
ref={ref}>
<Info />
</IconButton>
);
@ -46,6 +53,6 @@ const HeaderToolTipIcon: React.FC<Props> = ({ tooltipIconType, onClick }) => {
default:
return null;
}
};
});
export default HeaderToolTipIcon;

38
src/components/Header/__snapshots__/Header.test.tsx.snap
View File

@ -5,10 +5,10 @@ exports[`<Header /> component with logged in state should load the component in
class="MuiPaper-root MuiPaper-elevation4 MuiAppBar-root MuiAppBar-positionStatic css-rfunvc emotion-9 MuiAppBar-colorPrimary"
>
<div
class="MuiToolbar-root MuiToolbar-regular css-1pwdmmq emotion-8 MuiToolbar-gutters"
class="MuiToolbar-root MuiToolbar-regular css-1bjere7 emotion-8 MuiToolbar-gutters"
>
<div
class="MuiToolbar-root MuiToolbar-regular css-1vacr9s emotion-4 MuiToolbar-gutters"
class="MuiToolbar-root MuiToolbar-regular css-i5xjw9 emotion-4 MuiToolbar-gutters"
>
<a
class="css-1dk30lc"
@ -19,7 +19,7 @@ exports[`<Header /> component with logged in state should load the component in
/>
</a>
<div
class="css-13zpdre emotion-3"
class="css-12prohx emotion-3"
>
<div
class="css-1crzyyo emotion-2"
@ -40,7 +40,7 @@ exports[`<Header /> component with logged in state should load the component in
class="MuiInputBase-root MuiInput-root css-n9ojyg MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedStart"
>
<div
class="MuiInputAdornment-root css-16qv2i2 MuiInputAdornment-positionStart"
class="MuiInputAdornment-root css-fvu7gn MuiInputAdornment-positionStart"
>
<svg
aria-hidden="true"
@ -74,10 +74,10 @@ exports[`<Header /> component with logged in state should load the component in
</div>
</div>
<div
class="MuiToolbar-root MuiToolbar-regular css-m61s5i emotion-7 MuiToolbar-gutters"
class="MuiToolbar-root MuiToolbar-regular css-1qii1b7 emotion-7 MuiToolbar-gutters"
>
<button
class="MuiButtonBase-root MuiIconButton-root css-1y1xi9f emotion-5 MuiIconButton-colorInherit"
class="MuiButtonBase-root MuiIconButton-root css-13o7eu2 emotion-5 MuiIconButton-colorInherit"
tabindex="0"
type="button"
>
@ -101,10 +101,14 @@ exports[`<Header /> component with logged in state should load the component in
/>
</button>
<a
class="css-1aacqdd emotion-6"
class="css-kbn7if emotion-6"
data-testid="header--tooltip-documentation"
href="https://verdaccio.org/docs/en/installation"
rel="noopener noreferrer"
target="_blank"
>
<h6
class="MuiTypography-root MuiTypography-subtitle1"
>
<button
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
@ -130,6 +134,7 @@ exports[`<Header /> component with logged in state should load the component in
class="MuiTouchRipple-root"
/>
</button>
</h6>
</a>
<button
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
@ -193,10 +198,10 @@ exports[`<Header /> component with logged in state should load the component in
class="MuiPaper-root MuiPaper-elevation4 MuiAppBar-root MuiAppBar-positionStatic css-rfunvc emotion-9 MuiAppBar-colorPrimary"
>
<div
class="MuiToolbar-root MuiToolbar-regular css-1pwdmmq emotion-8 MuiToolbar-gutters"
class="MuiToolbar-root MuiToolbar-regular css-1bjere7 emotion-8 MuiToolbar-gutters"
>
<div
class="MuiToolbar-root MuiToolbar-regular css-1vacr9s emotion-4 MuiToolbar-gutters"
class="MuiToolbar-root MuiToolbar-regular css-i5xjw9 emotion-4 MuiToolbar-gutters"
>
<a
class="css-1dk30lc"
@ -207,7 +212,7 @@ exports[`<Header /> component with logged in state should load the component in
/>
</a>
<div
class="css-13zpdre emotion-3"
class="css-12prohx emotion-3"
>
<div
class="css-1crzyyo emotion-2"
@ -228,7 +233,7 @@ exports[`<Header /> component with logged in state should load the component in
class="MuiInputBase-root MuiInput-root css-n9ojyg MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedStart"
>
<div
class="MuiInputAdornment-root css-16qv2i2 MuiInputAdornment-positionStart"
class="MuiInputAdornment-root css-fvu7gn MuiInputAdornment-positionStart"
>
<svg
aria-hidden="true"
@ -262,10 +267,10 @@ exports[`<Header /> component with logged in state should load the component in
</div>
</div>
<div
class="MuiToolbar-root MuiToolbar-regular css-m61s5i emotion-7 MuiToolbar-gutters"
class="MuiToolbar-root MuiToolbar-regular css-1qii1b7 emotion-7 MuiToolbar-gutters"
>
<button
class="MuiButtonBase-root MuiIconButton-root css-1y1xi9f emotion-5 MuiIconButton-colorInherit"
class="MuiButtonBase-root MuiIconButton-root css-13o7eu2 emotion-5 MuiIconButton-colorInherit"
tabindex="0"
type="button"
>
@ -289,10 +294,14 @@ exports[`<Header /> component with logged in state should load the component in
/>
</button>
<a
class="css-1aacqdd emotion-6"
class="css-kbn7if emotion-6"
data-testid="header--tooltip-documentation"
href="https://verdaccio.org/docs/en/installation"
rel="noopener noreferrer"
target="_blank"
>
<h6
class="MuiTypography-root MuiTypography-subtitle1"
>
<button
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
@ -318,6 +327,7 @@ exports[`<Header /> component with logged in state should load the component in
class="MuiTouchRipple-root"
/>
</button>
</h6>
</a>
<button
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"

26
src/components/Header/styles.ts
View File

@ -1,72 +1,56 @@
import styled, { css } from 'react-emotion';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import colors from '../../utils/styles/colors';
import mq from '../../utils/styles/media';
import IconButton from '../../muiComponents/IconButton';
import ExternalLink from '../Link';
import AppBar from '../../muiComponents/AppBar';
import Toolbar from '../../muiComponents/Toolbar';
import Link from '../Link';
export const InnerNavBar = styled(Toolbar)({
'&&': {
justifyContent: 'space-between',
alignItems: 'center',
padding: '0 15px',
},
});
export const Greetings = styled('span')({
'&&': {
margin: '0 5px 0 0',
},
});
export const RightSide = styled(Toolbar)({
'&&': {
display: 'flex',
padding: 0,
},
});
export const LeftSide = styled(RightSide)({
'&&': {
flex: 1,
},
});
export const MobileNavBar = styled('div')({
'&&': {
alignItems: 'center',
display: 'flex',
borderBottom: `1px solid ${colors.greyLight}`,
padding: '8px',
position: 'relative',
},
});
export const InnerMobileNavBar = styled('div')({
'&&': {
borderRadius: '4px',
backgroundColor: colors.greyLight,
color: colors.white,
width: '100%',
padding: '0 5px',
margin: '0 10px 0 0',
},
});
export const IconSearchButton = styled(IconButton)({
'&&': {
display: 'block',
},
});
export const SearchWrapper = styled('div')({
'&&': {
display: 'none',
maxWidth: '393px',
width: '100%',
},
});
export const NavBar = styled(AppBar)`
@ -104,8 +88,6 @@ export const NavBar = styled(AppBar)`
}
`;
export const StyledExternalLink = styled(ExternalLink)({
'&&': {
export const StyledLink = styled(Link)({
color: 'white',
},
});

4
src/components/Help/Help.tsx
View File

@ -1,11 +1,11 @@
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import React, { Fragment } from 'react';
import { getRegistryURL } from '../../utils/url';
import CopyToClipBoard from '../CopyToClipBoard';
import Button from '../../muiComponents/Button';
import CardContent from '../../muiComponents/CardContent';
import { default as Typography } from '../../muiComponents/Heading';
import CardActions from '../../muiComponents/CardActions';
import Text from '../../muiComponents/Text';
import { CardStyled as Card, HelpTitle } from './styles';

2
src/components/Install/InstallListItem.tsx
View File

@ -1,10 +1,10 @@
import React from 'react';
import styled from 'react-emotion';
import ListItemText from '@material-ui/core/ListItemText';
import CopyToClipBoard from '../CopyToClipBoard';
import Avatar from '../../muiComponents/Avatar';
import ListItem from '../../muiComponents/ListItem';
import ListItemText from '../../muiComponents/ListItemText';
// logos of package managers
import npmLogo from './img/npm.svg';

14
src/components/Link/Link.test.tsx
View File

@ -1,14 +0,0 @@
import React from 'react';
import { mount } from 'enzyme';
import Link from './Link';
describe('<Link /> component', () => {
const props = {
to: 'https://github.com/verdaccio/ui',
};
test('should render the component in default state', () => {
const wrapper = mount(<Link blank={true} to={props.to} />);
expect(wrapper.html()).toMatchSnapshot();
});
});

27
src/components/Link/Link.tsx
View File

@ -1,15 +1,26 @@
import React, { ReactNode } from 'react';
import React from 'react';
import { Link as RouterLink } from 'react-router-dom';
interface Props {
children?: ReactNode;
import Text, { TextProps } from '../../muiComponents/Text';
interface Props extends Pick<TextProps, 'variant'> {
external?: boolean;
className?: string;
to: string;
blank?: boolean;
}
const Link: React.FC<Props> = ({ children, to = '#', blank = false, ...props }) => (
<a href={to} target={blank ? '_blank' : '_self'} {...props}>
{children}
/* eslint-disable verdaccio/jsx-spread */
const Link: React.FC<Props> = ({ external, to, children, variant, className, ...props }) => {
const LinkTextContent = <Text variant={variant}>{children}</Text>;
return external ? (
<a className={className} href={to} rel="noopener noreferrer" target="_blank" {...props}>
{LinkTextContent}
</a>
);
) : (
<RouterLink className={className} to={to} {...props}>
{LinkTextContent}
</RouterLink>
);
};
export default Link;

3
src/components/Link/__snapshots__/Link.test.tsx.snap
View File

@ -1,3 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<Link /> component should render the component in default state 1`] = `"<a href=\\"https://github.com/verdaccio/ui\\" target=\\"_blank\\"></a>"`;

10
src/components/Login/Login.tsx
View File

@ -1,10 +1,5 @@
import React, { Component } from 'react';
import SnackbarContent from '@material-ui/core/SnackbarContent';
import ErrorIcon from '@material-ui/icons/Error';
import InputLabel from '@material-ui/core/InputLabel';
import Input from '@material-ui/core/Input';
import FormControl from '@material-ui/core/FormControl';
import FormHelperText from '@material-ui/core/FormHelperText';
import { css } from 'emotion';
import Button from '../../muiComponents/Button';
@ -12,6 +7,11 @@ import Dialog from '../../muiComponents/Dialog';
import DialogTitle from '../../muiComponents/DialogTitle';
import DialogContent from '../../muiComponents/DialogContent';
import DialogActions from '../../muiComponents/DialogActions';
import FormControl from '../../muiComponents/FormControl';
import FormHelperText from '../../muiComponents/FormHelperText';
import Input from '../../muiComponents/Input';
import InputLabel from '../../muiComponents/InputLabel';
import SnackbarContent from '../../muiComponents/SnackbarContent';
import * as classes from './styles';

6
src/components/NotFound/NotFound.tsx
View File

@ -1,10 +1,10 @@
import Box from '@material-ui/core/Box';
import Typography from '@material-ui/core/Typography';
import styled from 'react-emotion';
import React, { useCallback } from 'react';
import { useHistory } from 'react-router-dom';
import Box from '../../muiComponents/Box';
import Button from '../../muiComponents/Button';
import Heading from '../../muiComponents/Heading';
import colors from '../../utils/styles/colors';
import { spacings } from '../../utils/styles/spacings';
@ -19,7 +19,7 @@ const EmptyPackage = styled('img')({
margin: '0 auto',
});
const StyledHeading = styled(Typography)({
const StyledHeading = styled(Heading)({
color: colors.primary,
marginBottom: spacings.sm,
});

2
src/components/Package/Package.tsx
View File

@ -1,6 +1,5 @@
import React from 'react';
import BugReport from '@material-ui/icons/BugReport';
import Grid from '@material-ui/core/Grid';
import HomeIcon from '@material-ui/icons/Home';
import { PackageMetaInterface, Author as PackageAuthor } from '../../../types/packageMeta';
@ -10,6 +9,7 @@ import { formatDate, formatDateDistance } from '../../utils/package';
import Tooltip from '../../muiComponents/Tooltip';
import { isURL } from '../../utils/url';
import ListItem from '../../muiComponents/ListItem';
import Grid from '../../muiComponents/Grid';
import {
Author,

4
src/components/Package/styles.ts
View File

@ -1,7 +1,5 @@
import styled from 'react-emotion';
import { Link } from 'react-router-dom';
import Grid from '@material-ui/core/Grid';
import ListItemText from '@material-ui/core/ListItemText';
import { breakpoints } from '../../utils/styles/media';
import Ico from '../Icon';
@ -12,6 +10,8 @@ import { default as MuiIconButton } from '../../muiComponents/IconButton';
import { default as Photo } from '../../muiComponents/Avatar';
import List from '../../muiComponents/List';
import { default as Typography } from '../../muiComponents/Heading';
import Grid from '../../muiComponents/Grid';
import ListItemText from '../../muiComponents/ListItemText';
export const OverviewItem = styled('span')`
&& {

8
src/components/PackageList/PackageList.tsx
View File

@ -1,4 +1,4 @@
import * as React from 'react';
import React, { Fragment, ReactElement } from 'react';
import Package from '../Package';
import Help from '../Help';
@ -13,16 +13,16 @@ interface Props {
}
export const PackageList: React.FC<Props> = props => {
const renderPackages: () => React.ReactElement<HTMLElement>[] = () => {
const renderPackages: () => ReactElement<HTMLElement>[] = () => {
return props.packages.map((pkg, i) => {
const { name, version, description, time, keywords, dist, homepage, bugs, author } = pkg;
// TODO: move format license to API side.
const license = formatLicense(pkg.license);
return (
<React.Fragment key={i}>
<Fragment key={i}>
{i !== 0 && <Divider />}
<Package {...{ name, dist, version, author, description, license, time, keywords, homepage, bugs }} />
</React.Fragment>
</Fragment>
);
});
};

4
src/components/RegistryInfoContent/RegistryInfoContent.tsx
View File

@ -1,12 +1,12 @@
import React, { Component } from 'react';
import { css } from 'emotion';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import CopyToClipBoard from '../CopyToClipBoard';
import { getCLISetRegistry, getCLIChangePassword, getCLISetConfigRegistry } from '../../utils/cli-utils';
import { NODE_MANAGER } from '../../utils/constants';
import { default as Typography } from '../../muiComponents/Heading';
import Tabs from '../../muiComponents/Tabs';
import Tab from '../../muiComponents/Tab';
import { CommandContainer } from './styles';
import { Props, State } from './types';

6
src/components/Repository/styles.ts
View File

@ -1,12 +1,12 @@
import styled from 'react-emotion';
import Grid from '@material-ui/core/Grid';
import ListItemText from '@material-ui/core/ListItemText';
import Github from '../../icons/GitHub';
import colors from '../../utils/styles/colors';
import { fontWeight } from '../../utils/styles/sizes';
import Text from '../../muiComponents/Text';
import ListItem from '../../muiComponents/ListItem';
import ListItemText from '../../muiComponents/ListItemText';
import Grid from '../../muiComponents/Grid';
export const StyledText = styled(Text)({
fontWeight: fontWeight.bold,
@ -14,9 +14,7 @@ export const StyledText = styled(Text)({
});
export const GridRepo = styled(Grid)({
'&&': {
alignItems: 'center',
},
});
export const GithubLink = styled('a')({

3
src/components/Search/Search.tsx
View File

@ -3,9 +3,9 @@ import { withRouter, RouteComponentProps } from 'react-router-dom';
import { SuggestionSelectedEventData, ChangeEvent } from 'react-autosuggest';
import { css } from 'emotion';
import { default as IconSearch } from '@material-ui/icons/Search';
import InputAdornment from '@material-ui/core/InputAdornment';
import debounce from 'lodash/debounce';
import InputAdornment from '../../muiComponents/InputAdornment';
import AutoComplete from '../AutoComplete';
import colors from '../../utils/styles/colors';
import { callSearch } from '../../utils/calls';
@ -174,6 +174,7 @@ export class Search extends Component<RouteComponentProps<{}>, State> {
<InputAdornment
className={css`
color: ${colors.white};
}
`}
position={'start'}>
<IconSearch />

2
src/components/Search/__snapshots__/Search.test.tsx.snap
View File

@ -1,3 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<Search /> component test should load the component in default state 1`] = `"<div class=\\"css-1crzyyo e1rflf270\\"><div role=\\"combobox\\" aria-haspopup=\\"listbox\\" aria-owns=\\"react-autowhatever-1\\" aria-expanded=\\"false\\" class=\\"react-autosuggest__container\\"><div class=\\"MuiFormControl-root MuiTextField-root react-autosuggest__input MuiFormControl-fullWidth\\" aria-autocomplete=\\"list\\" aria-controls=\\"react-autowhatever-1\\"><div class=\\"MuiInputBase-root MuiInput-root css-n9ojyg MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedStart\\"><div class=\\"MuiInputAdornment-root css-16qv2i2 MuiInputAdornment-positionStart\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\\"></path></svg></div><input aria-invalid=\\"false\\" autocomplete=\\"off\\" class=\\"MuiInputBase-input MuiInput-input css-hodoyq MuiInputBase-inputAdornedStart\\" placeholder=\\"Search Packages\\" type=\\"text\\" value=\\"\\"></div></div><div class=\\"MuiPaper-root MuiPaper-elevation1 react-autosuggest__suggestions-container css-cfo6a e1rflf271\\" id=\\"react-autowhatever-1\\" role=\\"listbox\\"></div></div></div>"`;
exports[`<Search /> component test should load the component in default state 1`] = `"<div class=\\"css-1crzyyo e1rflf270\\"><div role=\\"combobox\\" aria-haspopup=\\"listbox\\" aria-owns=\\"react-autowhatever-1\\" aria-expanded=\\"false\\" class=\\"react-autosuggest__container\\"><div class=\\"MuiFormControl-root MuiTextField-root react-autosuggest__input MuiFormControl-fullWidth\\" aria-autocomplete=\\"list\\" aria-controls=\\"react-autowhatever-1\\"><div class=\\"MuiInputBase-root MuiInput-root css-n9ojyg MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedStart\\"><div class=\\"MuiInputAdornment-root css-fvu7gn MuiInputAdornment-positionStart\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\\"></path></svg></div><input aria-invalid=\\"false\\" autocomplete=\\"off\\" class=\\"MuiInputBase-input MuiInput-input css-hodoyq MuiInputBase-inputAdornedStart\\" placeholder=\\"Search Packages\\" type=\\"text\\" value=\\"\\"></div></div><div class=\\"MuiPaper-root MuiPaper-elevation1 react-autosuggest__suggestions-container css-cfo6a e1rflf271\\" id=\\"react-autowhatever-1\\" role=\\"listbox\\"></div></div></div>"`;

2
src/components/UpLinks/__snapshots__/UpLinks.test.tsx.snap
View File

@ -2,4 +2,4 @@
exports[`<UpLinks /> component should render the component when there is no uplink 1`] = `"<h6 class=\\"MuiTypography-root MuiTypography-subtitle1 MuiTypography-gutterBottom\\">verdaccio has no uplinks.</h6>"`;
exports[`<UpLinks /> component should render the component with uplinks 1`] = `"<h6 class=\\"MuiTypography-root css-1vg6q84 e14i1sy10 MuiTypography-subtitle1\\">Uplinks</h6><ul class=\\"MuiList-root MuiList-padding\\"><li class=\\"MuiListItem-root MuiListItem-gutters\\"><div class=\\"MuiListItemText-root css-5tz9yo e14i1sy12\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">npmjs</span></div><div class=\\"css-1l1cv61 e14i1sy11\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e14i1sy12\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">over 1 year ago</span></div></li></ul>"`;
exports[`<UpLinks /> component should render the component with uplinks 1`] = `"<h6 class=\\"MuiTypography-root css-1vg6q84 e14i1sy10 MuiTypography-subtitle1\\">Uplinks</h6><ul class=\\"MuiList-root MuiList-padding\\"><li class=\\"MuiListItem-root MuiListItem-gutters\\"><div class=\\"MuiListItemText-root css-o655gb e14i1sy12\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">npmjs</span></div><div class=\\"css-1l1cv61 e14i1sy11\\"></div><div class=\\"MuiListItemText-root css-o655gb e14i1sy12\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">over 1 year ago</span></div></li></ul>"`;

4
src/components/UpLinks/styles.ts
View File

@ -1,7 +1,7 @@
import styled from 'react-emotion';
import { default as MuiListItemText } from '@material-ui/core/ListItemText';
import Text from '../../muiComponents/Text';
import { default as MuiListItemText } from '../../muiComponents/ListItemText';
import { fontWeight } from '../../utils/styles/sizes';
export const StyledText = styled(Text)({
@ -16,9 +16,7 @@ export const Spacer = styled('div')({
});
export const ListItemText = styled(MuiListItemText)({
'&&': {
flex: 'none',
color: 'black',
opacity: 0.6,
},
});

8
src/components/Versions/VersionsHistoryList.tsx
View File

@ -1,13 +1,11 @@
import React from 'react';
import Link from '@material-ui/core/Link';
import { Link as RouterLink } from 'react-router-dom';
import { Versions, Time } from '../../../types/packageMeta';
import { formatDateDistance } from '../../utils/package';
import List from '../../muiComponents/List';
import ListItem from '../../muiComponents/ListItem';
import { Spacer, ListItemText } from './styles';
import { Spacer, ListItemText, StyledLink } from './styles';
export const NOT_AVAILABLE = 'Not available';
@ -23,9 +21,9 @@ const VersionsHistoryList: React.FC<Props> = ({ versions, packageName, time }) =
.reverse()
.map(version => (
<ListItem className="version-item" key={version}>
<Link component={RouterLink} to={`/-/web/detail/${packageName}/v/${version}`}>
<StyledLink to={`/-/web/detail/${packageName}/v/${version}`}>
<ListItemText>{version}</ListItemText>
</Link>
</StyledLink>
<Spacer />
<ListItemText>{time[version] ? `${formatDateDistance(time[version])} ago` : NOT_AVAILABLE}</ListItemText>
</ListItem>

9
src/components/Versions/styles.ts
View File

@ -1,8 +1,9 @@
import styled from 'react-emotion';
import { default as MuiListItemText } from '@material-ui/core/ListItemText';
import { fontWeight } from '../../utils/styles/sizes';
import Text from '../../muiComponents/Text';
import { default as MuiListItemText } from '../../muiComponents/ListItemText';
import Link from '../Link';
export const StyledText = styled(Text)({
fontWeight: fontWeight.bold,
@ -17,9 +18,11 @@ export const Spacer = styled('div')({
});
export const ListItemText = styled(MuiListItemText)({
'&&': {
flex: 'none',
color: 'black',
opacity: 0.6,
},
});
export const StyledLink = styled(Link)({
textDecoration: 'none',
});

10
src/muiComponents/AppBar/AppBar.tsx Normal file
View File

@ -0,0 +1,10 @@
import React, { forwardRef } from 'react';
import { default as MaterialUIAppBar, AppBarProps } from '@material-ui/core/AppBar';
type AppBarRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
const AppBar = forwardRef<AppBarRef, AppBarProps>(function AppBar(props, ref) {
return <MaterialUIAppBar {...props} ref={ref} />;
});
export default AppBar;

1
src/muiComponents/AppBar/index.ts Normal file
View File

@ -0,0 +1 @@
export { default } from './AppBar';

6
src/muiComponents/Box/Box.tsx Normal file
View File

@ -0,0 +1,6 @@
import React from 'react';
import { default as MaterialUIBox, BoxProps } from '@material-ui/core/Box';
const Box: React.FC<BoxProps> = props => <MaterialUIBox {...props} />;
export default Box;

1
src/muiComponents/Box/index.ts Normal file
View File

@ -0,0 +1 @@
export { default } from './Box';

10
src/muiComponents/CardActions/CardActions.tsx Normal file
View File

@ -0,0 +1,10 @@
import React, { forwardRef } from 'react';
import { default as MaterialUICardActions, CardActionsProps } from '@material-ui/core/CardActions';
type CardActionsRef = HTMLDivElement;
const CardActions = forwardRef<CardActionsRef, CardActionsProps>(function CardContentActions(props, ref) {
return <MaterialUICardActions {...props} innerRef={ref} />;
});
export default CardActions;

1
src/muiComponents/CardActions/index.ts Normal file
View File

@ -0,0 +1 @@
export { default } from './CardActions';

10
src/muiComponents/CardContent/CardContent.tsx Normal file
View File

@ -0,0 +1,10 @@
import React, { forwardRef } from 'react';
import { default as MaterialUICardContent, CardContentProps } from '@material-ui/core/CardContent';
type CardContentRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
const CardContent = forwardRef<CardContentRef, CardContentProps>(function CardContent(props, ref) {
return <MaterialUICardContent {...props} innerRef={ref} />;
});
export default CardContent;

1
src/muiComponents/CardContent/index.ts Normal file
View File

@ -0,0 +1 @@
export { default } from './CardContent';

10
src/muiComponents/Chip/Chip.tsx Normal file
View File

@ -0,0 +1,10 @@
import React, { forwardRef } from 'react';
import { default as MaterialUIChip, ChipProps } from '@material-ui/core/Chip';
type ChipRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
const Chip = forwardRef<ChipRef, ChipProps>(function Chip(props, ref) {
return <MaterialUIChip {...props} innerRef={ref} />;
});
export default Chip;

1
src/muiComponents/Chip/index.ts Normal file
View File

@ -0,0 +1 @@
export { default } from './Chip';

2
src/muiComponents/Divider/Divider.tsx
View File

@ -1,7 +1,7 @@
import React, { forwardRef } from 'react';
import { default as MaterialUIDivider, DividerProps } from '@material-ui/core/Divider';
type DividerRef = keyof HTMLElementTagNameMap;
type DividerRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
const Divider = forwardRef<DividerRef, DividerProps>(function Divider(props, ref) {
return <MaterialUIDivider {...props} innerRef={ref} />;

10
src/muiComponents/FloatingActionButton/FloatingActionButton.tsx Normal file
View File

@ -0,0 +1,10 @@
import React, { forwardRef } from 'react';
import { default as MaterialUIFab, FabProps } from '@material-ui/core/Fab';
type FloatingActionButtonRef = HTMLButtonElement;
const FloatingActionButton = forwardRef<FloatingActionButtonRef, FabProps>(function FloatingActionButton(props, ref) {
return <MaterialUIFab {...props} ref={ref} />;
});
export default FloatingActionButton;

1
src/muiComponents/FloatingActionButton/index.ts Normal file
View File

@ -0,0 +1 @@
export { default } from './FloatingActionButton';

10
src/muiComponents/FormControl/FormControl.tsx Normal file
View File

@ -0,0 +1,10 @@
import React, { forwardRef } from 'react';
import { default as MaterialUIFormControl, FormControlProps } from '@material-ui/core/FormControl';
type FormControlRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
const FormControl = forwardRef<FormControlRef, FormControlProps>(function FormControl(props, ref) {
return <MaterialUIFormControl {...props} innerRef={ref} />;
});
export default FormControl;

1
src/muiComponents/FormControl/index.ts Normal file
View File

@ -0,0 +1 @@
export { default } from './FormControl';

10
src/muiComponents/FormHelperText/FormHelperText.tsx Normal file
View File

@ -0,0 +1,10 @@
import React, { forwardRef } from 'react';
import { default as MaterialUIFormHelperText, FormHelperTextProps } from '@material-ui/core/FormHelperText';
type FormHelperTextRef = HTMLButtonElement;
const FormHelperText = forwardRef<FormHelperTextRef, FormHelperTextProps>(function FormHelperText(props, ref) {
return <MaterialUIFormHelperText {...props} ref={ref} />;
});
export default FormHelperText;

1
src/muiComponents/FormHelperText/index.ts Normal file
View File

@ -0,0 +1 @@
export { default } from './FormHelperText';

10
src/muiComponents/Grid/Grid.tsx Normal file
View File

@ -0,0 +1,10 @@
import React, { forwardRef } from 'react';
import { default as MaterialUIGrid, GridProps } from '@material-ui/core/Grid';
type GridRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
const Grid = forwardRef<GridRef, GridProps>(function Grid(props, ref) {
return <MaterialUIGrid {...props} innerRef={ref} />;
});
export default Grid;

1
src/muiComponents/Grid/index.ts Normal file
View File

@ -0,0 +1 @@
export { default } from './Grid';

10
src/muiComponents/Input/Input.tsx Normal file
View File

@ -0,0 +1,10 @@
import React, { forwardRef } from 'react';
import { default as MaterialUIInput, InputProps } from '@material-ui/core/Input';
type InputRef = HTMLDivElement;
const Input = forwardRef<InputRef, InputProps>(function Input(props, ref) {
return <MaterialUIInput {...props} ref={ref} />;
});
export default Input;

1
src/muiComponents/Input/index.ts Normal file
View File

@ -0,0 +1 @@
export { default } from './Input';

10
src/muiComponents/InputAdornment/InputAdornment.tsx Normal file
View File

@ -0,0 +1,10 @@
import React, { forwardRef } from 'react';
import { default as MaterialUIInputAdornment, InputAdornmentProps } from '@material-ui/core/InputAdornment';
type InputAdornmentRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
const InputAdornment = forwardRef<InputAdornmentRef, InputAdornmentProps>(function InputAdornment(props, ref) {
return <MaterialUIInputAdornment {...props} ref={ref} />;
});
export default InputAdornment;

1
src/muiComponents/InputAdornment/index.ts Normal file
View File

@ -0,0 +1 @@
export { default } from './InputAdornment';

10
src/muiComponents/InputLabel/InputLabel.tsx Normal file
View File

@ -0,0 +1,10 @@
import React, { forwardRef } from 'react';
import { default as MaterialUIInputLabel, InputLabelProps } from '@material-ui/core/InputLabel';
type InputLabelRef = HTMLLabelElement;
const InputLabel = forwardRef<InputLabelRef, InputLabelProps>(function InputLabel(props, ref) {
return <MaterialUIInputLabel {...props} ref={ref} />;
});
export default InputLabel;

1
src/muiComponents/InputLabel/index.ts Normal file
View File

@ -0,0 +1 @@
export { default } from './InputLabel';

10
src/muiComponents/ListItemText/ListItemText.tsx Normal file
View File

@ -0,0 +1,10 @@
import React, { forwardRef } from 'react';
import { default as MaterialUIListItemText, ListItemTextProps } from '@material-ui/core/ListItemText';
type ListItemTextRef = HTMLDivElement;
const ListItemText = forwardRef<ListItemTextRef, ListItemTextProps>(function ListItemText(props, ref) {
return <MaterialUIListItemText {...props} ref={ref} />;
});
export default ListItemText;

1
src/muiComponents/ListItemText/index.ts Normal file
View File

@ -0,0 +1 @@
export { default } from './ListItemText';

10
src/muiComponents/Menu/Menu.tsx Normal file
View File

@ -0,0 +1,10 @@
import React, { forwardRef } from 'react';
import { default as MaterialUIMenu, MenuProps } from '@material-ui/core/Menu';
type MenuRef = HTMLDivElement;
const Menu = forwardRef<MenuRef, MenuProps>(function Menu(props, ref) {
return <MaterialUIMenu {...props} ref={ref} />;
});
export default Menu;

1
src/muiComponents/Menu/index.ts Normal file
View File

@ -0,0 +1 @@
export { default } from './Menu';

21
src/muiComponents/MenuItem/MenuItem.tsx Normal file
View File

@ -0,0 +1,21 @@
import React, { forwardRef } from 'react';
import { default as MaterialUIMenuItem, MenuItemProps } from '@material-ui/core/MenuItem';
type HTMLElementTagName = keyof HTMLElementTagNameMap;
type MenuItemRef = HTMLElementTagNameMap[HTMLElementTagName];
interface Props extends Omit<MenuItemProps, 'component'> {
component?: HTMLElementTagName;
}
const MenuItem = forwardRef<MenuItemRef, Props>(function MenuItem({ button, ...props }, ref) {
// it seems typescript has some discrimination type limitions. Please see: https://github.com/mui-org/material-ui/issues/14971
// eslint-disable-next-line @typescript-eslint/no-explicit-any
return <MaterialUIMenuItem {...props} button={button as any} innerRef={ref} />;
});
MenuItem.defaultProps = {
component: 'li',
};
export default MenuItem;

1
src/muiComponents/MenuItem/index.ts Normal file
View File

@ -0,0 +1 @@
export { default } from './MenuItem';

10
src/muiComponents/Paper/Paper.tsx Normal file
View File

@ -0,0 +1,10 @@
import React, { forwardRef } from 'react';
import { default as MaterialUIPaper, PaperProps } from '@material-ui/core/Paper';
type PaperRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
const Paper = forwardRef<PaperRef, PaperProps>(function Paper(props, ref) {
return <MaterialUIPaper {...props} ref={ref} />;
});
export default Paper;

1
src/muiComponents/Paper/index.ts Normal file
View File

@ -0,0 +1 @@
export { default } from './Paper';

10
src/muiComponents/SnackbarContent/SnackbarContent.tsx Normal file
View File

@ -0,0 +1,10 @@
import React, { forwardRef } from 'react';
import { default as MaterialUISnackbarContent, SnackbarContentProps } from '@material-ui/core/SnackbarContent';
type SnackbarContentRef = HTMLDivElement;
const SnackbarContent = forwardRef<SnackbarContentRef, SnackbarContentProps>(function SnackbarContent(props, ref) {
return <MaterialUISnackbarContent {...props} ref={ref} />;
});
export default SnackbarContent;

1
src/muiComponents/SnackbarContent/index.ts Normal file
View File

@ -0,0 +1 @@
export { default } from './SnackbarContent';

10
src/muiComponents/Tab/Tab.tsx Normal file
View File

@ -0,0 +1,10 @@
import React, { forwardRef } from 'react';
import { default as MaterialUITab, TabProps } from '@material-ui/core/Tab';
type TabRef = HTMLButtonElement;
const Tab = forwardRef<TabRef, TabProps>(function Tab(props, ref) {
return <MaterialUITab {...props} innerRef={ref} />;
});
export default Tab;

1
src/muiComponents/Tab/index.ts Normal file
View File

@ -0,0 +1 @@
export { default } from './Tab';

14
src/muiComponents/Tabs/Tabs.tsx Normal file
View File

@ -0,0 +1,14 @@
import React, { forwardRef } from 'react';
import { default as MaterialUITabs, TabsProps } from '@material-ui/core/Tabs';
type TabsRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
interface Props extends Omit<TabsProps, 'onChange'> {
onChange: (event: React.ChangeEvent<{}>, value: number) => void;
}
const Tabs = forwardRef<TabsRef, Props>(function Tabs(props, ref) {
return <MaterialUITabs {...props} innerRef={ref} />;
});
export default Tabs;

1
src/muiComponents/Tabs/index.ts Normal file
View File

@ -0,0 +1 @@
export { default } from './Tabs';

6
src/muiComponents/Text/Text.tsx
View File

@ -2,14 +2,14 @@ import React, { forwardRef } from 'react';
import { default as MaterialUITypography, TypographyProps } from '@material-ui/core/Typography';
type TextType = 'subtitle1' | 'subtitle2' | 'body1' | 'body2';
type TextRef = keyof HTMLElementTagNameMap;
type TextRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
interface Props extends Omit<TypographyProps, 'variant'> {
export interface TextProps extends Omit<TypographyProps, 'variant'> {
variant?: TextType;
}
// The reference is already from type of the Component, so the any below is not a problem
const Text = forwardRef<TextRef, Props>(function Text(props, ref) {
const Text = forwardRef<TextRef, TextProps>(function Text(props, ref) {
return <MaterialUITypography {...props} ref={ref} />;
});

2
src/muiComponents/Text/index.ts
View File

@ -1 +1 @@
export { default } from './Text';
export { default, TextProps } from './Text';

10
src/muiComponents/Toolbar/Toolbar.tsx Normal file
View File

@ -0,0 +1,10 @@
import React, { forwardRef } from 'react';
import { default as MaterialUIToolbar, ToolbarProps } from '@material-ui/core/Toolbar';
type ToolbarRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
const Toolbar = forwardRef<ToolbarRef, ToolbarProps>(function Toolbar(props, ref) {
return <MaterialUIToolbar {...props} ref={ref} />;
});
export default Toolbar;

1
src/muiComponents/Toolbar/index.ts Normal file
View File

@ -0,0 +1 @@
export { default } from './Toolbar';