Skip to content
This repository was archived by the owner on Jan 16, 2022. It is now read-only.

Commit b56e438

Browse files
priscilawebdevjuanpicado
priscilawebdev
authored and
juanpicado
committed
fix: rest MUI components - Introduced ForwardRef (#224)
* 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
1 parent a4cdd14 commit b56e438

File tree

82 files changed

+467
-269
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

82 files changed

+467
-269
lines changed

‎src/components/ActionBar/__snapshots__/ActionBar.test.tsx.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,6 @@
22

33
exports[`<ActionBar /> component should render the component in default state 1`] = `""`;
44

5-
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>"`;
5+
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>"`;
66
7-
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>"`;
7+
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>"`;

‎src/components/ActionBar/styles.ts‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,17 @@
11
import styled from 'react-emotion';
2-
import { default as MuiFab } from '@material-ui/core/Fab';
32

43
import colors from '../../utils/styles/colors';
54
import ListItem from '../../muiComponents/ListItem';
5+
import FloatingActionButton from '../../muiComponents/FloatingActionButton';
66

77
export const ActionListItem = styled(ListItem)({
88
paddingTop: 0,
99
paddingLeft: 0,
1010
paddingRight: 0,
1111
});
1212

13-
export const Fab = styled(MuiFab)({
14-
'&&': {
15-
backgroundColor: colors.primary,
16-
color: colors.white,
17-
marginRight: '10px',
18-
},
13+
export const Fab = styled(FloatingActionButton)({
14+
backgroundColor: colors.primary,
15+
color: colors.white,
16+
marginRight: '10px',
1917
});

‎src/components/Author/__snapshots__/Author.test.tsx.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
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>"`;
3+
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>"`;
44
5-
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>"`;
5+
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>"`;

‎src/components/Author/styles.ts‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,23 @@
11
import styled from 'react-emotion';
2-
import ListItemText from '@material-ui/core/ListItemText';
32

43
import { fontWeight } from '../../utils/styles/sizes';
54
import ListItem from '../../muiComponents/ListItem';
65
import Text from '../../muiComponents/Text';
6+
import ListItemText from '../../muiComponents/ListItemText';
77

88
export const StyledText = styled(Text)({
99
fontWeight: fontWeight.bold,
1010
textTransform: 'capitalize',
1111
});
1212

1313
export const AuthorListItem = styled(ListItem)({
14-
'&&': {
15-
padding: 0,
16-
},
17-
'&&:hover': {
14+
padding: 0,
15+
':hover': {
1816
backgroundColor: 'transparent',
1917
},
2018
});
2119

2220
export const AuthorListItemText = styled(ListItemText)({
23-
'&&': {
24-
padding: '0 10px',
25-
margin: 0,
26-
},
21+
padding: '0 10px',
22+
margin: 0,
2723
});

‎src/components/AutoComplete/AutoComplete.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import { css } from 'emotion';
33
import Autosuggest, { SuggestionSelectedEventData, InputProps, ChangeEvent } from 'react-autosuggest';
44
import match from 'autosuggest-highlight/match';
55
import parse from 'autosuggest-highlight/parse';
6-
import MenuItem from '@material-ui/core/MenuItem';
76

87
import { fontWeight } from '../../utils/styles/sizes';
8+
import MenuItem from '../../muiComponents/MenuItem';
99

1010
import { Wrapper, InputField, SuggestionContainer } from './styles';
1111

‎src/components/AutoComplete/styles.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React from 'react';
22
import styled, { css } from 'react-emotion';
3-
import Paper from '@material-ui/core/Paper';
43

54
import TextField from '../../muiComponents/TextField';
5+
import Paper from '../../muiComponents/Paper';
66

77
export interface InputFieldProps {
88
color: string;

‎src/components/Dependencies/Dependencies.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useContext } from 'react';
22
import { useHistory } from 'react-router-dom';
3-
import CardContent from '@material-ui/core/CardContent';
43

4+
import CardContent from '../../muiComponents/CardContent';
55
import { PackageDependencies } from '../../../types/packageMeta';
66
import { DetailContext } from '../../pages/Version';
77
import NoItems from '../NoItems';

‎src/components/Dependencies/styles.ts‎

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
import styled from 'react-emotion';
2-
import Chip from '@material-ui/core/Chip';
32

43
import { fontWeight } from '../../utils/styles/sizes';
54
import Text from '../../muiComponents/Text';
65
import Card from '../../muiComponents/Card';
6+
import Chip from '../../muiComponents/Chip';
77

88
export const CardWrap = styled(Card)({
9-
'&&': {
10-
margin: '0 0 16px',
11-
},
9+
margin: '0 0 16px',
1210
});
1311

1412
export const StyledText = styled(Text)({
@@ -17,16 +15,12 @@ export const StyledText = styled(Text)({
1715
});
1816

1917
export const Tags = styled('div')({
20-
'&&': {
21-
display: 'flex',
22-
justifyContent: 'start',
23-
flexWrap: 'wrap',
24-
margin: '0 -5px',
25-
},
18+
display: 'flex',
19+
justifyContent: 'start',
20+
flexWrap: 'wrap',
21+
margin: '0 -5px',
2622
});
2723

2824
export const Tag = styled(Chip)({
29-
'&&': {
30-
margin: '5px',
31-
},
25+
margin: '5px',
3226
});

‎src/components/DetailContainer/DetailContainer.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useCallback, useState, ChangeEvent, useContext } from 'react';
2-
import Box from '@material-ui/core/Box';
32

43
import { DetailContext } from '../../pages/Version';
4+
import Box from '../../muiComponents/Box';
55

66
import DetailContainerTabs from './DetailContainerTabs';
77
import DetailContainerContent from './DetailContainerContent';

‎src/components/DetailContainer/DetailContainerTabs.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import React, { ChangeEvent, useState, useEffect } from 'react';
2-
import { default as MuiTabs } from '@material-ui/core/Tabs';
3-
import Tab from '@material-ui/core/Tab';
42
import styled from 'react-emotion';
53

4+
import { default as MuiTabs } from '../../muiComponents/Tabs';
5+
import Tab from '../../muiComponents/Tab';
6+
67
import { TabPosition } from './tabs';
78

89
interface Props {

0 commit comments

Comments
 (0)
⚡