From 9ad18a7695b05a5478312a75c78a688143f54730 Mon Sep 17 00:00:00 2001 From: Priscila Oliveira Date: Fri, 11 Oct 2019 23:51:49 +0200 Subject: [PATCH 1/4] refactor: introduced forwardRef --- src/components/ActionBar/styles.ts | 2 +- src/components/Author/styles.ts | 2 +- src/components/DetailSidebar/styles.ts | 11 +++++------ src/components/Dist/styles.ts | 2 +- .../Engines/__snapshots__/Engines.test.tsx.snap | 2 +- src/components/Engines/styles.ts | 6 ++---- src/components/Install/InstallListItem.tsx | 2 +- src/components/NotFound/NotFound.tsx | 3 ++- src/components/Package/Package.tsx | 2 +- src/components/Repository/styles.ts | 2 +- src/components/UpLinks/UpLinks.tsx | 2 +- src/components/Versions/VersionsHistoryList.tsx | 2 +- src/components/Versions/VersionsTagList.tsx | 2 +- src/muiComponents/ListItem/ListItem.tsx | 10 ++++++++++ src/muiComponents/ListItem/index.ts | 1 + 15 files changed, 30 insertions(+), 21 deletions(-) create mode 100644 src/muiComponents/ListItem/ListItem.tsx create mode 100644 src/muiComponents/ListItem/index.ts diff --git a/src/components/ActionBar/styles.ts b/src/components/ActionBar/styles.ts index 8ef987c1e..2ca2de3de 100644 --- a/src/components/ActionBar/styles.ts +++ b/src/components/ActionBar/styles.ts @@ -1,8 +1,8 @@ import styled from 'react-emotion'; import { default as MuiFab } from '@material-ui/core/Fab'; -import ListItem from '@material-ui/core/ListItem'; import colors from '../../utils/styles/colors'; +import ListItem from '../../muiComponents/ListItem'; export const ActionListItem = styled(ListItem)({ '&&': { diff --git a/src/components/Author/styles.ts b/src/components/Author/styles.ts index 8b09ecbf2..80f8d12c7 100644 --- a/src/components/Author/styles.ts +++ b/src/components/Author/styles.ts @@ -1,9 +1,9 @@ import styled from 'react-emotion'; -import ListItem from '@material-ui/core/ListItem'; import Typography from '@material-ui/core/Typography'; import ListItemText from '@material-ui/core/ListItemText'; import { fontWeight } from '../../utils/styles/sizes'; +import ListItem from '../../muiComponents/ListItem'; export const Heading = styled(Typography)({ '&&': { diff --git a/src/components/DetailSidebar/styles.ts b/src/components/DetailSidebar/styles.ts index b9ba2c8f7..664ce0d0f 100644 --- a/src/components/DetailSidebar/styles.ts +++ b/src/components/DetailSidebar/styles.ts @@ -1,13 +1,12 @@ import styled from 'react-emotion'; -import ListItem from '@material-ui/core/ListItem'; import ListItemText from '@material-ui/core/ListItemText'; +import ListItem from '../../muiComponents/ListItem'; + export const TitleListItem = styled(ListItem)({ - '&&': { - paddingLeft: 0, - paddingRight: 0, - paddingBottom: 0, - }, + paddingLeft: 0, + paddingRight: 0, + paddingBottom: 0, }); export const TitleListItemText = styled(ListItemText)({ diff --git a/src/components/Dist/styles.ts b/src/components/Dist/styles.ts index 1ca45c50e..f3bf96b62 100644 --- a/src/components/Dist/styles.ts +++ b/src/components/Dist/styles.ts @@ -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 ListItem from '@material-ui/core/ListItem'; import Typography from '@material-ui/core/Typography'; import colors from '../../utils/styles/colors'; import { fontWeight } from '../../utils/styles/sizes'; +import ListItem from '../../muiComponents/ListItem'; export const Heading = styled(Typography)({ '&&': { diff --git a/src/components/Engines/__snapshots__/Engines.test.tsx.snap b/src/components/Engines/__snapshots__/Engines.test.tsx.snap index ec651b4a7..01088824b 100644 --- a/src/components/Engines/__snapshots__/Engines.test.tsx.snap +++ b/src/components/Engines/__snapshots__/Engines.test.tsx.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` component should render the component in default state 1`] = `"
    node JS
    >= 0.1.98
    NPM version
    >3
"`; +exports[` component should render the component in default state 1`] = `"
    node JS
    >= 0.1.98
    NPM version
    >3
"`; diff --git a/src/components/Engines/styles.ts b/src/components/Engines/styles.ts index 02cac34a5..2dac66ce5 100644 --- a/src/components/Engines/styles.ts +++ b/src/components/Engines/styles.ts @@ -1,8 +1,8 @@ import styled from 'react-emotion'; -import ListItem from '@material-ui/core/ListItem'; import Typography from '@material-ui/core/Typography'; import { fontWeight } from '../../utils/styles/sizes'; +import ListItem from '../../muiComponents/ListItem'; export const Heading = styled(Typography)({ '&&': { @@ -12,7 +12,5 @@ export const Heading = styled(Typography)({ }); export const EngineListItem = styled(ListItem)({ - '&&': { - paddingLeft: 0, - }, + paddingLeft: 0, }); diff --git a/src/components/Install/InstallListItem.tsx b/src/components/Install/InstallListItem.tsx index ff9446947..29b28145f 100644 --- a/src/components/Install/InstallListItem.tsx +++ b/src/components/Install/InstallListItem.tsx @@ -1,10 +1,10 @@ import React from 'react'; import styled from 'react-emotion'; -import ListItem from '@material-ui/core/ListItem'; import ListItemText from '@material-ui/core/ListItemText'; import CopyToClipBoard from '../CopyToClipBoard'; import Avatar from '../../muiComponents/Avatar'; +import ListItem from '../../muiComponents/ListItem'; // logos of package managers import npmLogo from './img/npm.svg'; diff --git a/src/components/NotFound/NotFound.tsx b/src/components/NotFound/NotFound.tsx index 14ab9c016..8aa031c46 100644 --- a/src/components/NotFound/NotFound.tsx +++ b/src/components/NotFound/NotFound.tsx @@ -1,9 +1,10 @@ -import ListItem from '@material-ui/core/ListItem'; import Typography from '@material-ui/core/Typography'; import withWidth, { isWidthUp, WithWidthProps } from '@material-ui/core/withWidth'; import React, { useCallback } from 'react'; import { RouteComponentProps, withRouter } from 'react-router-dom'; +import ListItem from '../../muiComponents/ListItem'; + import PackageImg from './img/package.svg'; import { Card, EmptyPackage, Heading, Inner, List, Wrapper } from './styles'; diff --git a/src/components/Package/Package.tsx b/src/components/Package/Package.tsx index dae7e91bf..27fbc7fc1 100644 --- a/src/components/Package/Package.tsx +++ b/src/components/Package/Package.tsx @@ -2,7 +2,6 @@ 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 ListItem from '@material-ui/core/ListItem'; import { PackageMetaInterface, Author as PackageAuthor } from 'types/packageMeta'; import Tag from '../Tag'; @@ -10,6 +9,7 @@ import fileSizeSI from '../../utils/file-size'; import { formatDate, formatDateDistance } from '../../utils/package'; import Tooltip from '../../muiComponents/Tooltip'; import { isURL } from '../../utils/url'; +import ListItem from '../../muiComponents/ListItem'; import { Author, diff --git a/src/components/Repository/styles.ts b/src/components/Repository/styles.ts index 29b56361b..4317a4da2 100644 --- a/src/components/Repository/styles.ts +++ b/src/components/Repository/styles.ts @@ -1,12 +1,12 @@ import styled from 'react-emotion'; import Grid from '@material-ui/core/Grid'; -import ListItem from '@material-ui/core/ListItem'; import Typography from '@material-ui/core/Typography'; 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 ListItem from '../../muiComponents/ListItem'; export const Heading = styled(Typography)({ '&&': { diff --git a/src/components/UpLinks/UpLinks.tsx b/src/components/UpLinks/UpLinks.tsx index f34e4de96..80d2e8c99 100644 --- a/src/components/UpLinks/UpLinks.tsx +++ b/src/components/UpLinks/UpLinks.tsx @@ -1,10 +1,10 @@ import React, { useContext } from 'react'; import List from '@material-ui/core/List'; -import ListItem from '@material-ui/core/ListItem'; import { DetailContext } from '../../pages/Version'; import NoItems from '../NoItems'; import { formatDateDistance } from '../../utils/package'; +import ListItem from '../../muiComponents/ListItem'; import { Heading, Spacer, ListItemText } from './styles'; diff --git a/src/components/Versions/VersionsHistoryList.tsx b/src/components/Versions/VersionsHistoryList.tsx index d6021f108..3e1bb6181 100644 --- a/src/components/Versions/VersionsHistoryList.tsx +++ b/src/components/Versions/VersionsHistoryList.tsx @@ -1,11 +1,11 @@ import React from 'react'; import List from '@material-ui/core/List'; import Link from '@material-ui/core/Link'; -import ListItem from '@material-ui/core/ListItem'; import { Link as RouterLink } from 'react-router-dom'; import { Versions, Time } from '../../../types/packageMeta'; import { formatDateDistance } from '../../utils/package'; +import ListItem from '../../muiComponents/ListItem'; import { Spacer, ListItemText } from './styles'; diff --git a/src/components/Versions/VersionsTagList.tsx b/src/components/Versions/VersionsTagList.tsx index f35309680..9d6ba30b7 100644 --- a/src/components/Versions/VersionsTagList.tsx +++ b/src/components/Versions/VersionsTagList.tsx @@ -1,8 +1,8 @@ import React from 'react'; import List from '@material-ui/core/List'; -import ListItem from '@material-ui/core/ListItem'; import { DistTags } from '../../../types/packageMeta'; +import ListItem from '../../muiComponents/ListItem'; import { Spacer, ListItemText } from './styles'; diff --git a/src/muiComponents/ListItem/ListItem.tsx b/src/muiComponents/ListItem/ListItem.tsx new file mode 100644 index 000000000..24ad29b25 --- /dev/null +++ b/src/muiComponents/ListItem/ListItem.tsx @@ -0,0 +1,10 @@ +import React, { forwardRef } from 'react'; +import { default as MaterialUIListItem, ListItemProps } from '@material-ui/core/ListItem'; + +type ListItemRef = HTMLLIElement; + +const ListItem = forwardRef>(function ListItem(props, ref) { + return ; +}); + +export default ListItem; diff --git a/src/muiComponents/ListItem/index.ts b/src/muiComponents/ListItem/index.ts new file mode 100644 index 000000000..741aed270 --- /dev/null +++ b/src/muiComponents/ListItem/index.ts @@ -0,0 +1 @@ +export { default } from './ListItem'; From dbc1f7da8d36bf31d121a9afacfde2c9ff7b201f Mon Sep 17 00:00:00 2001 From: Priscila Oliveira Date: Sat, 12 Oct 2019 17:45:17 +0200 Subject: [PATCH 2/4] fix: fixed button prop listItem --- package.json | 2 +- .../__snapshots__/ActionBar.test.tsx.snap | 2 +- src/components/ActionBar/styles.ts | 8 +++----- .../Header/__snapshots__/Header.test.tsx.snap | 2 +- .../Help/__snapshots__/Help.test.tsx.snap | 2 +- .../Login/__snapshots__/Login.test.tsx.snap | 4 ++-- .../__snapshots__/Notfound.test.tsx.snap | 2 +- src/muiComponents/ListItem/ListItem.tsx | 16 +++++++++++++--- yarn.lock | 18 +++++++++--------- 9 files changed, 32 insertions(+), 24 deletions(-) diff --git a/package.json b/package.json index b5b963613..f72178b61 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "devDependencies": { "@commitlint/cli": "8.2.0", "@commitlint/config-conventional": "8.2.0", - "@material-ui/core": "4.4.3", + "@material-ui/core": "4.5.0", "@material-ui/icons": "4.4.3", "@octokit/rest": "16.28.7", "@testing-library/react": "9.2.0", diff --git a/src/components/ActionBar/__snapshots__/ActionBar.test.tsx.snap b/src/components/ActionBar/__snapshots__/ActionBar.test.tsx.snap index 3da4e83e4..b6c99f4fd 100644 --- a/src/components/ActionBar/__snapshots__/ActionBar.test.tsx.snap +++ b/src/components/ActionBar/__snapshots__/ActionBar.test.tsx.snap @@ -2,4 +2,4 @@ exports[` component should render the component in default state 1`] = `""`; -exports[` component when there is a button to download a tarball 1`] = `"
"`; +exports[` component when there is a button to download a tarball 1`] = `"
"`; diff --git a/src/components/ActionBar/styles.ts b/src/components/ActionBar/styles.ts index 2ca2de3de..6efd19f69 100644 --- a/src/components/ActionBar/styles.ts +++ b/src/components/ActionBar/styles.ts @@ -5,11 +5,9 @@ import colors from '../../utils/styles/colors'; import ListItem from '../../muiComponents/ListItem'; export const ActionListItem = styled(ListItem)({ - '&&': { - paddingTop: 0, - paddingLeft: 0, - paddingRight: 0, - }, + paddingTop: 0, + paddingLeft: 0, + paddingRight: 0, }); export const Fab = styled(MuiFab)({ diff --git a/src/components/Header/__snapshots__/Header.test.tsx.snap b/src/components/Header/__snapshots__/Header.test.tsx.snap index a27a30fcc..93b7b8a5d 100644 --- a/src/components/Header/__snapshots__/Header.test.tsx.snap +++ b/src/components/Header/__snapshots__/Header.test.tsx.snap @@ -346,7 +346,7 @@ exports[`
component with logged in state should load the component in />

2. Publish

npm publish --registry http://localhost

3. Refresh this page.

Learn More
"`; +exports[` component should render the component in default state 1`] = `"

No Package Published Yet.

To publish your first package just:

1. Login

npm adduser --registry http://localhost

2. Publish

npm publish --registry http://localhost

3. Refresh this page.

Learn More
"`; diff --git a/src/components/Login/__snapshots__/Login.test.tsx.snap b/src/components/Login/__snapshots__/Login.test.tsx.snap index 63e32275a..53ccdaa22 100644 --- a/src/components/Login/__snapshots__/Login.test.tsx.snap +++ b/src/components/Login/__snapshots__/Login.test.tsx.snap @@ -1,5 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` should load the component in default state 1`] = `"

Login

"`; +exports[` should load the component in default state 1`] = `"

Login

"`; -exports[` should load the component with props 1`] = `"

Login

Error Title
Error Description
"`; +exports[` should load the component with props 1`] = `"

Login

Error Title
Error Description
"`; diff --git a/src/components/NotFound/__snapshots__/Notfound.test.tsx.snap b/src/components/NotFound/__snapshots__/Notfound.test.tsx.snap index 8e17e4f9a..24a2073c1 100644 --- a/src/components/NotFound/__snapshots__/Notfound.test.tsx.snap +++ b/src/components/NotFound/__snapshots__/Notfound.test.tsx.snap @@ -16,7 +16,7 @@ exports[` component should load the component in default state 1`] = Sorry, we couldn't find it...

2. Publish

npm publish --registry http://localhost

3. Refresh this page.

Learn More
"`; +exports[` component should render the component in default state 1`] = `"

No Package Published Yet.

To publish your first package just:

1. Login

npm adduser --registry http://localhost

2. Publish

npm publish --registry http://localhost

3. Refresh this page.

Learn More
"`; diff --git a/src/components/Login/__snapshots__/Login.test.tsx.snap b/src/components/Login/__snapshots__/Login.test.tsx.snap index 53ccdaa22..63e32275a 100644 --- a/src/components/Login/__snapshots__/Login.test.tsx.snap +++ b/src/components/Login/__snapshots__/Login.test.tsx.snap @@ -1,5 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` should load the component in default state 1`] = `"

Login

"`; +exports[` should load the component in default state 1`] = `"

Login

"`; -exports[` should load the component with props 1`] = `"

Login

Error Title
Error Description
"`; +exports[` should load the component with props 1`] = `"

Login

Error Title
Error Description
"`; diff --git a/src/components/NotFound/__snapshots__/Notfound.test.tsx.snap b/src/components/NotFound/__snapshots__/Notfound.test.tsx.snap index 24a2073c1..8e17e4f9a 100644 --- a/src/components/NotFound/__snapshots__/Notfound.test.tsx.snap +++ b/src/components/NotFound/__snapshots__/Notfound.test.tsx.snap @@ -16,7 +16,7 @@ exports[` component should load the component in default state 1`] = Sorry, we couldn't find it...