diff --git a/package.json b/package.json index 0af0203..5408053 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,8 @@ "devDependencies": { "@commitlint/cli": "8.2.0", "@commitlint/config-conventional": "8.2.0", + "@emotion/core": "10.0.22", + "@emotion/styled": "10.0.23", "@material-ui/core": "4.6.1", "@material-ui/icons": "4.5.1", "@octokit/rest": "16.35.0", @@ -47,7 +49,8 @@ "css-loader": "3.2.0", "date-fns": "2.8.1", "detect-secrets": "1.0.5", - "emotion": "9.2.12", + "emotion": "10.0.23", + "emotion-theming": "10.0.19", "enzyme": "3.10.0", "enzyme-adapter-react-16": "1.15.1", "enzyme-to-json": "3.4.3", @@ -90,7 +93,6 @@ "react": "16.12.0", "react-autosuggest": "9.4.3", "react-dom": "16.12.0", - "react-emotion": "9.2.12", "react-hot-loader": "4.12.18", "react-router-dom": "5.1.2", "request": "2.88.0", @@ -214,5 +216,6 @@ "type": "opencollective", "url": "https://opencollective.com/verdaccio", "logo": "https://opencollective.com/verdaccio/logo.txt" - } + }, + "dependencies": {} } diff --git a/src/App/App.test.tsx b/src/App/App.test.tsx index 931c623..e9a5343 100644 --- a/src/App/App.test.tsx +++ b/src/App/App.test.tsx @@ -1,6 +1,7 @@ import React from 'react'; -import { mount, ReactWrapper } from 'enzyme'; +import { ReactWrapper } from 'enzyme'; +import { mount } from '../utils/test-enzyme'; import storage from '../utils/storage'; import { generateTokenWithTimeRange } from '../../jest/unit/components/__mocks__/token'; diff --git a/src/App/App.tsx b/src/App/App.tsx index e19329a..702d5e2 100644 --- a/src/App/App.tsx +++ b/src/App/App.tsx @@ -9,7 +9,6 @@ import Header from '../components/Header'; import { Container, Content } from '../components/Layout'; import API from '../utils/api'; import Footer from '../components/Footer'; -import StyleBaseline from '../design-tokens/StyleBaseline'; import AppRoute from './AppRoute'; import { AppProps, AppContextProvider } from './AppContext'; @@ -44,13 +43,10 @@ export default class App extends Component<{}, AppProps> { const context = { isUserLoggedIn, packages, logoUrl, user, scope }; return ( - <> - - - {isLoading ? : {this.renderContent()}} - {this.renderLoginModal()} - - + + {isLoading ? : {this.renderContent()}} + {this.renderLoginModal()} + ); } diff --git a/src/App/styles.ts b/src/App/styles.ts index 1071efc..b285b03 100644 --- a/src/App/styles.ts +++ b/src/App/styles.ts @@ -1,9 +1,9 @@ -import { css } from 'emotion'; +import { css } from '@emotion/core'; -import colors from '../utils/styles/colors'; +import { theme } from '../design-tokens/theme'; export const alertError = css({ - backgroundColor: `${colors.red} !important`, + backgroundColor: `${theme.palette.red} !important`, minWidth: 'inherit !important', }); diff --git a/src/components/ActionBar/ActionBar.test.tsx b/src/components/ActionBar/ActionBar.test.tsx index 6f09cae..31ed136 100644 --- a/src/components/ActionBar/ActionBar.test.tsx +++ b/src/components/ActionBar/ActionBar.test.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { mount } from 'enzyme'; +import { mount } from '../../utils/test-enzyme'; import api from '../../utils/api'; import { ActionBar } from './ActionBar'; diff --git a/src/components/ActionBar/__snapshots__/ActionBar.test.tsx.snap b/src/components/ActionBar/__snapshots__/ActionBar.test.tsx.snap index 773b53e..cb1abdf 100644 --- a/src/components/ActionBar/__snapshots__/ActionBar.test.tsx.snap +++ b/src/components/ActionBar/__snapshots__/ActionBar.test.tsx.snap @@ -2,6 +2,6 @@ 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`] = `"
"`; -exports[` component when there is a button to open an issue 1`] = `"
"`; +exports[` component when there is a button to open an issue 1`] = `"
"`; diff --git a/src/components/ActionBar/styles.ts b/src/components/ActionBar/styles.ts index a1691b2..ebe2fd7 100644 --- a/src/components/ActionBar/styles.ts +++ b/src/components/ActionBar/styles.ts @@ -1,8 +1,8 @@ -import styled from 'react-emotion'; +import styled from '@emotion/styled'; -import colors from '../../utils/styles/colors'; import ListItem from '../../muiComponents/ListItem'; import FloatingActionButton from '../../muiComponents/FloatingActionButton'; +import { Theme } from '../../design-tokens/theme'; export const ActionListItem = styled(ListItem)({ paddingTop: 0, @@ -10,8 +10,8 @@ export const ActionListItem = styled(ListItem)({ paddingRight: 0, }); -export const Fab = styled(FloatingActionButton)({ - backgroundColor: colors.primary, - color: colors.white, +export const Fab = styled(FloatingActionButton)<{ theme?: Theme }>(props => ({ + backgroundColor: props.theme && props.theme.palette.primary.main, + color: props.theme && props.theme.palette.white, marginRight: '10px', -}); +})); diff --git a/src/components/Author/Author.test.tsx b/src/components/Author/Author.test.tsx index 3122db5..83dc2a7 100644 --- a/src/components/Author/Author.test.tsx +++ b/src/components/Author/Author.test.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { mount } from 'enzyme'; +import { mount } from '../../utils/test-enzyme'; import { DetailContext } from '../../pages/Version'; import Authors from './Author'; diff --git a/src/components/Author/__snapshots__/Author.test.tsx.snap b/src/components/Author/__snapshots__/Author.test.tsx.snap index 64329a1..25a3e0f 100644 --- a/src/components/Author/__snapshots__/Author.test.tsx.snap +++ b/src/components/Author/__snapshots__/Author.test.tsx.snap @@ -1,5 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` component should render the component in default state 1`] = `"
    Author
    \\"verdaccio
    verdaccio user
"`; +exports[` component should render the component in default state 1`] = `"
    Author
    \\"verdaccio
    verdaccio user
"`; -exports[` component should render the component when there is no author email 1`] = `"
    Author
    \\"verdaccio
    verdaccio user
"`; +exports[` component should render the component when there is no author email 1`] = `"
    Author
    \\"verdaccio
    verdaccio user
"`; diff --git a/src/components/Author/styles.ts b/src/components/Author/styles.ts index d713489..27c11df 100644 --- a/src/components/Author/styles.ts +++ b/src/components/Author/styles.ts @@ -1,4 +1,4 @@ -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import { fontWeight } from '../../utils/styles/sizes'; import ListItem from '../../muiComponents/ListItem'; diff --git a/src/components/AutoComplete/AutoComplete.tsx b/src/components/AutoComplete/AutoComplete.tsx index 7c78a79..987e6a0 100644 --- a/src/components/AutoComplete/AutoComplete.tsx +++ b/src/components/AutoComplete/AutoComplete.tsx @@ -1,5 +1,5 @@ import React, { KeyboardEvent } from 'react'; -import { css } from 'emotion'; +import styled from '@emotion/styled'; import Autosuggest, { SuggestionSelectedEventData, InputProps, ChangeEvent } from 'react-autosuggest'; import match from 'autosuggest-highlight/match'; import parse from 'autosuggest-highlight/parse'; @@ -9,13 +9,20 @@ import MenuItem from '../../muiComponents/MenuItem'; import { Wrapper, InputField, SuggestionContainer } from './styles'; +const StyledAnchor = styled('a')<{ fw: number }>(props => ({ + fontWeight: props.fw, +})); + +const StyledMenuItem = styled(MenuItem)({ + cursor: 'pointer', +}); + interface Props { suggestions: unknown[]; suggestionsLoading?: boolean; suggestionsLoaded?: boolean; suggestionsError?: boolean; apiLoading?: boolean; - color?: string; value?: string; placeholder?: string; startAdornment?: JSX.Element; @@ -54,23 +61,18 @@ const renderSuggestion = (suggestion, { query, isHighlighted }): JSX.Element => const matches = match(suggestion.name, query); const parts = parse(suggestion.name, matches); return ( - +
{parts.map((part, index) => { const fw = part.highlight ? fontWeight.semiBold : fontWeight.light; return ( - + {part.text} - + ); })}
- + ); }; @@ -97,7 +99,6 @@ const AutoComplete = ({ value = '', placeholder = '', disableUnderline = false, - color, onClick, onKeyDown, onBlur, @@ -121,7 +122,6 @@ const AutoComplete = ({ // @ts-ignore startAdornment, disableUnderline, - color, onKeyDown, onBlur, }; diff --git a/src/components/AutoComplete/styles.tsx b/src/components/AutoComplete/styles.tsx index 21e4504..d3a7180 100644 --- a/src/components/AutoComplete/styles.tsx +++ b/src/components/AutoComplete/styles.tsx @@ -1,60 +1,44 @@ import React from 'react'; -import styled, { css } from 'react-emotion'; +import styled from '@emotion/styled'; import TextField from '../../muiComponents/TextField'; import Paper from '../../muiComponents/Paper'; +import { Theme } from '../../design-tokens/theme'; export interface InputFieldProps { color: string; } export const Wrapper = styled('div')({ - '&&': { - width: '100%', - height: '32px', - position: 'relative', - zIndex: 1, - }, + width: '100%', + height: '32px', + position: 'relative', + zIndex: 1, }); +export const StyledTextField = styled(TextField)<{ theme?: Theme }>(props => ({ + '& .MuiInputBase-root': { + ':before': { + content: "''", + border: 'none', + }, + ':after': { + borderColor: props.theme && props.theme.palette.white, + }, + ':hover:before': { + content: 'none', + }, + }, + '& .MuiInputBase-input': { + color: props.theme && props.theme.palette.white, + }, +})); + /* eslint-disable verdaccio/jsx-spread */ -export const InputField: React.FC = ({ color, ...others }) => ( - -); +// @ts-ignore types of color are incompatible +export const InputField: React.FC = ({ ...others }) => ; export const SuggestionContainer = styled(Paper)({ - '&&': { - maxHeight: '500px', - overflowY: 'auto', - }, + maxHeight: '500px', + overflowY: 'auto', }); diff --git a/src/components/CopyToClipBoard/CopyToClipBoard.test.tsx b/src/components/CopyToClipBoard/CopyToClipBoard.test.tsx index d837055..543fa27 100644 --- a/src/components/CopyToClipBoard/CopyToClipBoard.test.tsx +++ b/src/components/CopyToClipBoard/CopyToClipBoard.test.tsx @@ -1,7 +1,8 @@ import React from 'react'; -import { mount, ReactWrapper } from 'enzyme'; +import { ReactWrapper } from 'enzyme'; import { copyToClipBoardUtility } from '../../utils/cli-utils'; +import { mount } from '../../utils/test-enzyme'; import CopyToClipBoard from './CopyToClipBoard'; import { CopyIcon } from './styles'; @@ -16,7 +17,7 @@ describe(' component', () => { wrapper = mount(); }); - test('render the component', () => { + test('should load the component in default state', () => { expect(wrapper.html()).toMatchSnapshot(); }); diff --git a/src/components/CopyToClipBoard/__snapshots__/CopyToClipBoard.test.tsx.snap b/src/components/CopyToClipBoard/__snapshots__/CopyToClipBoard.test.tsx.snap index 8157d54..bbcb88c 100644 --- a/src/components/CopyToClipBoard/__snapshots__/CopyToClipBoard.test.tsx.snap +++ b/src/components/CopyToClipBoard/__snapshots__/CopyToClipBoard.test.tsx.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` component render the component 1`] = `"
copy text
"`; +exports[` component should load the component in default state 1`] = `"
copy text
"`; diff --git a/src/components/CopyToClipBoard/styles.ts b/src/components/CopyToClipBoard/styles.ts index 2f70378..aedaaed 100644 --- a/src/components/CopyToClipBoard/styles.ts +++ b/src/components/CopyToClipBoard/styles.ts @@ -1,24 +1,20 @@ -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import IconButton from '../../muiComponents/IconButton'; export const ClipBoardCopy = styled('div')({ - '&&': { - display: 'flex', - alignItems: 'center', - justifyContent: 'space-between', - }, + display: 'flex', + alignItems: 'center', + justifyContent: 'space-between', }); export const ClipBoardCopyText = styled('span')({ - '&&': { - display: 'inline-block', - textOverflow: 'ellipsis', - overflow: 'hidden', - whiteSpace: 'nowrap', - height: '21px', - fontSize: '1rem', - }, + display: 'inline-block', + textOverflow: 'ellipsis', + overflow: 'hidden', + whiteSpace: 'nowrap', + height: '21px', + fontSize: '1rem', }); export const CopyIcon = styled(IconButton)({}); diff --git a/src/components/Dependencies/Dependencies.test.tsx b/src/components/Dependencies/Dependencies.test.tsx index 3f26ccf..730df82 100644 --- a/src/components/Dependencies/Dependencies.test.tsx +++ b/src/components/Dependencies/Dependencies.test.tsx @@ -1,8 +1,8 @@ import React from 'react'; -import { render } from '@testing-library/react'; import { HashRouter } from 'react-router-dom'; import { DetailContextProvider } from '../../pages/Version'; +import { render } from '../../utils/test-react-testing-library'; import Dependencies from './Dependencies'; diff --git a/src/components/Dependencies/styles.ts b/src/components/Dependencies/styles.ts index 7db712c..2996b00 100644 --- a/src/components/Dependencies/styles.ts +++ b/src/components/Dependencies/styles.ts @@ -1,4 +1,4 @@ -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import { fontWeight } from '../../utils/styles/sizes'; import Text from '../../muiComponents/Text'; diff --git a/src/components/DetailContainer/DetailContainer.test.tsx b/src/components/DetailContainer/DetailContainer.test.tsx index ac61f9b..e441b66 100644 --- a/src/components/DetailContainer/DetailContainer.test.tsx +++ b/src/components/DetailContainer/DetailContainer.test.tsx @@ -1,5 +1,6 @@ import React from 'react'; -import { render } from '@testing-library/react'; + +import { render } from '../../utils/test-react-testing-library'; import DetailContainer from './DetailContainer'; diff --git a/src/components/DetailContainer/DetailContainerTabs.tsx b/src/components/DetailContainer/DetailContainerTabs.tsx index 23b19fc..fdaa009 100644 --- a/src/components/DetailContainer/DetailContainerTabs.tsx +++ b/src/components/DetailContainer/DetailContainerTabs.tsx @@ -1,5 +1,5 @@ import React, { ChangeEvent, useState, useEffect } from 'react'; -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import { default as MuiTabs } from '../../muiComponents/Tabs'; import Tab from '../../muiComponents/Tab'; diff --git a/src/components/DetailContainer/__snapshots__/DetailContainer.test.tsx.snap b/src/components/DetailContainer/__snapshots__/DetailContainer.test.tsx.snap index 6ac4a04..c75cf64 100644 --- a/src/components/DetailContainer/__snapshots__/DetailContainer.test.tsx.snap +++ b/src/components/DetailContainer/__snapshots__/DetailContainer.test.tsx.snap @@ -1,11 +1,15 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`DetailContainer renders correctly 1`] = ` +.emotion-0 { + margin-bottom: 16px; +} +
* { + margin: 5px; +} + +.emotion-8 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + -
contributors
- - + +
- - - +
- +
- + `; exports[`test Developers should render the component for maintainers with items 1`] = ` +.emotion-0 { + font-weight: 700; + margin-bottom: 10px; + text-transform: capitalize; +} + +.emotion-12 { + margin: 10px 0 10px 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} + +.emotion-12 > * { + margin: 5px; +} + +.emotion-8 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + -
maintainers
- - + +
- - - +
- +
- + `; diff --git a/src/components/Developers/styles.ts b/src/components/Developers/styles.ts index 15ab694..369e4d9 100644 --- a/src/components/Developers/styles.ts +++ b/src/components/Developers/styles.ts @@ -1,9 +1,9 @@ -import styled from 'react-emotion'; +import styled from '@emotion/styled'; -import colors from '../../utils/styles/colors'; import { fontWeight } from '../../utils/styles/sizes'; import Text from '../../muiComponents/Text'; import FloatingActionButton from '../../muiComponents/FloatingActionButton'; +import { Theme } from '../../design-tokens/theme'; export const Details = styled('span')({ display: 'flex', @@ -26,7 +26,7 @@ export const StyledText = styled(Text)({ textTransform: 'capitalize', }); -export const Fab = styled(FloatingActionButton)({ - backgroundColor: colors.primary, - color: colors.white, -}); +export const Fab = styled(FloatingActionButton)<{ theme?: Theme }>(props => ({ + backgroundColor: props.theme && props.theme.palette.primary.main, + color: props.theme && props.theme.palette.white, +})); diff --git a/src/components/Dist/Dist.test.tsx b/src/components/Dist/Dist.test.tsx index 6a55b11..565f895 100644 --- a/src/components/Dist/Dist.test.tsx +++ b/src/components/Dist/Dist.test.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { mount } from 'enzyme'; +import { mount } from '../../utils/test-enzyme'; import { DetailContext } from '../../pages/Version'; import Dist from './Dist'; diff --git a/src/components/Dist/__snapshots__/Dist.test.tsx.snap b/src/components/Dist/__snapshots__/Dist.test.tsx.snap index 6ead806..d2b3ab2 100644 --- a/src/components/Dist/__snapshots__/Dist.test.tsx.snap +++ b/src/components/Dist/__snapshots__/Dist.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` component should render the component in default state 1`] = `"
    Latest Distribution
    file count: 7
    size: 10.00 Bytes
"`; +exports[` component should render the component in default state 1`] = `"
    Latest Distribution
    file count: 7
    size: 10.00 Bytes
"`; -exports[` component should render the component with license as object 1`] = `"
    Latest Distribution
    file count: 7
    size: 10.00 Bytes
    license: MIT
"`; +exports[` component should render the component with license as object 1`] = `"
    Latest Distribution
    file count: 7
    size: 10.00 Bytes
    license: MIT
"`; -exports[` component should render the component with license as string 1`] = `"
    Latest Distribution
    file count: 7
    size: 10.00 Bytes
    license: MIT
"`; +exports[` component should render the component with license as string 1`] = `"
    Latest Distribution
    file count: 7
    size: 10.00 Bytes
    license: MIT
"`; diff --git a/src/components/Dist/styles.ts b/src/components/Dist/styles.ts index 30da4e7..f73de93 100644 --- a/src/components/Dist/styles.ts +++ b/src/components/Dist/styles.ts @@ -1,6 +1,6 @@ -import styled from 'react-emotion'; +import styled from '@emotion/styled'; -import colors from '../../utils/styles/colors'; +import { Theme } from '../../design-tokens/theme'; import { fontWeight } from '../../utils/styles/sizes'; import ListItem from '../../muiComponents/ListItem'; import Text from '../../muiComponents/Text'; @@ -18,11 +18,11 @@ export const DistListItem = styled(ListItem)({ }); export const DistChips = styled(Chip)({ - marginRight: '5px', + marginRight: 5, textTransform: 'capitalize', }); -export const DownloadButton = styled(FloatingActionButton)({ - backgroundColor: colors.primary, - color: colors.white, -}); +export const DownloadButton = styled(FloatingActionButton)<{ theme?: Theme }>(props => ({ + backgroundColor: props.theme && props.theme.palette.primary.main, + color: props.theme && props.theme.palette.white, +})); diff --git a/src/components/Engines/Engines.test.tsx b/src/components/Engines/Engines.test.tsx index 1521549..369938b 100644 --- a/src/components/Engines/Engines.test.tsx +++ b/src/components/Engines/Engines.test.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { mount } from 'enzyme'; +import { mount } from '../../utils/test-enzyme'; import { DetailContext } from '../../pages/Version'; import { PackageMetaInterface } from '../../../types/packageMeta'; diff --git a/src/components/Engines/__snapshots__/Engines.test.tsx.snap b/src/components/Engines/__snapshots__/Engines.test.tsx.snap index eceee05..06a6f3f 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 f44af79..8bdd9d1 100644 --- a/src/components/Engines/styles.ts +++ b/src/components/Engines/styles.ts @@ -1,4 +1,4 @@ -import styled from 'react-emotion'; +import styled from '@emotion/styled'; import { fontWeight } from '../../utils/styles/sizes'; import ListItem from '../../muiComponents/ListItem'; diff --git a/src/components/Footer/Footer.test.tsx b/src/components/Footer/Footer.test.tsx index bbf01c6..3abaec1 100644 --- a/src/components/Footer/Footer.test.tsx +++ b/src/components/Footer/Footer.test.tsx @@ -1,21 +1,20 @@ import React from 'react'; -import { mount, ReactWrapper } from 'enzyme'; + +import { render } from '../../utils/test-react-testing-library'; import Footer from './Footer'; -jest.mock('../../../package.json', () => ({ - version: '4.0.0-alpha.3', -})); - describe('