1
0
mirror of https://github.com/SomboChea/ui synced 2026-01-18 00:56:00 +07:00

chore: migrate eslint@6.6.0 (#227)

* chore: migrate to eslint6

* chore: migrate to eslint6
This commit is contained in:
Juan Picado @jotadeveloper
2019-10-27 15:49:30 +01:00
committed by GitHub
parent 2a2784ba39
commit e6b53c0479
31 changed files with 409 additions and 196 deletions

View File

@@ -146,7 +146,14 @@ export default class App extends Component<{}, AppProps> {
public renderLoginModal = (): ReactElement<HTMLElement> => {
const { error, showLoginModal } = this.state;
return <LoginModal error={error} onCancel={this.handleToggleLoginModal} onSubmit={this.handleDoLogin} visibility={showLoginModal} />;
return (
<LoginModal
error={error}
onCancel={this.handleToggleLoginModal}
onSubmit={this.handleDoLogin}
visibility={showLoginModal}
/>
);
};
public renderContent = (): ReactElement<HTMLElement> => {
@@ -167,6 +174,14 @@ export default class App extends Component<{}, AppProps> {
scope,
} = this.state;
return <Header logo={logoUrl} onLogout={this.handleLogout} onToggleLoginModal={this.handleToggleLoginModal} scope={scope} username={username} />;
return (
<Header
logo={logoUrl}
onLogout={this.handleLogout}
onToggleLoginModal={this.handleToggleLoginModal}
scope={scope}
username={username}
/>
);
};
}

View File

@@ -20,7 +20,8 @@ export interface Action {
export async function downloadHandler(link: string): Promise<void> {
const fileStream: Blob = await api.request(link, 'GET', {
headers: {
['accept']: 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3',
['accept']:
'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3',
},
credentials: 'include',
});

View File

@@ -140,7 +140,12 @@ const AutoComplete = ({
return (
<Wrapper>
<Autosuggest {...autosuggestProps} inputProps={inputProps} onSuggestionSelected={onClick} renderSuggestionsContainer={renderSuggestionsContainer} />
<Autosuggest
{...autosuggestProps}
inputProps={inputProps}
onSuggestionSelected={onClick}
renderSuggestionsContainer={renderSuggestionsContainer}
/>
</Wrapper>
);
};

View File

@@ -14,7 +14,12 @@ export interface AvatarDeveloper {
const AvatarTooltip: FC<AvatarDeveloper> = ({ name, packageName, version, avatar, email }) => {
const avatarComponent = <Avatar aria-label={name} src={avatar} />;
function renderLinkForMail(email: string, avatarComponent: JSX.Element, packageName: string, version: string): JSX.Element {
function renderLinkForMail(
email: string,
avatarComponent: JSX.Element,
packageName: string,
version: string
): JSX.Element {
if (!email || isEmail(email) === false) {
return avatarComponent;
}

View File

@@ -14,7 +14,8 @@ const Tabs = styled(MuiTabs)({
marginBottom: 16,
});
const getTabIndex = (tabPosition: TabPosition): number => Object.keys(TabPosition).findIndex(position => position === String(tabPosition).toUpperCase());
const getTabIndex = (tabPosition: TabPosition): number =>
Object.keys(TabPosition).findIndex(position => position === String(tabPosition).toUpperCase());
const DetailContainerTabs: React.FC<Props> = ({ tabPosition, onChangeTabPosition }) => {
const [tabPositionIndex, setTabPositionIndex] = useState(0);
@@ -25,7 +26,12 @@ const DetailContainerTabs: React.FC<Props> = ({ tabPosition, onChangeTabPosition
}, [tabPosition]);
return (
<Tabs indicatorColor={'primary'} onChange={onChangeTabPosition} textColor={'primary'} value={tabPositionIndex} variant={'fullWidth'}>
<Tabs
indicatorColor={'primary'}
onChange={onChangeTabPosition}
textColor={'primary'}
value={tabPositionIndex}
variant={'fullWidth'}>
<Tab data-testid={'readme-tab'} id={'readme-tab'} label={TabPosition.README} />
<Tab data-testid={'dependencies-tab'} id={'dependencies-tab'} label={TabPosition.DEPENDENCIES} />
<Tab data-testid={'versions-tab'} id={'versions-tab'} label={TabPosition.VERSIONS} />

View File

@@ -14,7 +14,7 @@ import Card from '../../muiComponents/Card';
import { TitleListItem, TitleListItemText, PackageDescription, PackageVersion } from './styles';
const renderLatestDescription = (description, version, isLatest: boolean = true): JSX.Element => {
const renderLatestDescription = (description, version, isLatest = true): JSX.Element => {
return (
<>
<PackageDescription>{description}</PackageDescription>
@@ -42,7 +42,10 @@ const renderTitle = (packageName, packageVersion, packageMeta): JSX.Element => {
return (
<List className="detail-info">
<TitleListItem alignItems="flex-start" button={true}>
<TitleListItemText primary={<b>{packageName}</b>} secondary={renderLatestDescription(packageMeta.latest.description, version, isLatest)} />
<TitleListItemText
primary={<b>{packageName}</b>}
secondary={renderLatestDescription(packageMeta.latest.description, version, isLatest)}
/>
</TitleListItem>
</List>
);

View File

@@ -17,7 +17,11 @@ describe('<Header /> component with logged in state', () => {
test('should load the component in logged out state', () => {
const { container, queryByTestId, getByText } = render(
<Router>
<Header onLogout={headerProps.handleLogout} onToggleLoginModal={headerProps.handleToggleLoginModal} scope={headerProps.scope} />
<Header
onLogout={headerProps.handleLogout}
onToggleLoginModal={headerProps.handleToggleLoginModal}
scope={headerProps.scope}
/>
</Router>
);
@@ -46,7 +50,11 @@ describe('<Header /> component with logged in state', () => {
test('should open login dialog', async () => {
const { getByText } = render(
<Router>
<Header onLogout={headerProps.handleLogout} onToggleLoginModal={headerProps.handleToggleLoginModal} scope={headerProps.scope} />
<Header
onLogout={headerProps.handleLogout}
onToggleLoginModal={headerProps.handleToggleLoginModal}
scope={headerProps.scope}
/>
</Router>
);
@@ -131,7 +139,9 @@ describe('<Header /> component with logged in state', () => {
const closeBtn = await waitForElement(() => getByText('CLOSE'));
fireEvent.click(closeBtn);
const hasRegistrationInfoModalBeenRemoved = await waitForElementToBeRemoved(() => queryByTestId('registryInfo--dialog'));
const hasRegistrationInfoModalBeenRemoved = await waitForElementToBeRemoved(() =>
queryByTestId('registryInfo--dialog')
);
expect(hasRegistrationInfoModalBeenRemoved).toBeTruthy();
});
test.todo('autocompletion should display suggestions according to the type value');

View File

@@ -38,7 +38,12 @@ const Header: React.FC<Props> = ({ logo, withoutSearch, username, onLogout, onTo
withoutSearch={withoutSearch}
/>
</InnerNavBar>
<HeaderInfoDialog isOpen={isInfoDialogOpen} onCloseDialog={() => setOpenInfoDialog(false)} registryUrl={getRegistryURL()} scope={scope} />
<HeaderInfoDialog
isOpen={isInfoDialogOpen}
onCloseDialog={() => setOpenInfoDialog(false)}
registryUrl={getRegistryURL()}
scope={scope}
/>
</NavBar>
{showMobileNavBar && !withoutSearch && (
<MobileNavBar>

View File

@@ -17,9 +17,20 @@ interface Props {
}
/* eslint-disable react/jsx-max-depth */
const HeaderMenu: React.FC<Props> = ({ onLogout, username, isMenuOpen = false, anchorEl, onLoggedInMenu, onLoggedInMenuClose }) => (
const HeaderMenu: React.FC<Props> = ({
onLogout,
username,
isMenuOpen = false,
anchorEl,
onLoggedInMenu,
onLoggedInMenuClose,
}) => (
<>
<IconButton color="inherit" data-testid="header--menu-acountcircle" id="header--button-account" onClick={onLoggedInMenu}>
<IconButton
color="inherit"
data-testid="header--menu-acountcircle"
id="header--button-account"
onClick={onLoggedInMenu}>
<AccountCircle />
</IconButton>
<Menu

View File

@@ -15,7 +15,14 @@ interface Props {
onLogout: () => void;
}
const HeaderRight: React.FC<Props> = ({ withoutSearch = false, username, onToggleLogin, onLogout, onToggleMobileNav, onOpenRegistryInfoDialog }) => {
const HeaderRight: React.FC<Props> = ({
withoutSearch = false,
username,
onToggleLogin,
onLogout,
onToggleMobileNav,
onOpenRegistryInfoDialog,
}) => {
const [anchorEl, setAnchorEl] = useState();
const [isMenuOpen, setIsMenuOpen] = useState();
@@ -47,7 +54,9 @@ const HeaderRight: React.FC<Props> = ({ withoutSearch = false, username, onToggl
return (
<RightSide>
{!withoutSearch && <HeaderToolTip onClick={onToggleMobileNav} title={'Search packages'} tooltipIconType={'search'} />}
{!withoutSearch && (
<HeaderToolTip onClick={onToggleMobileNav} title={'Search packages'} tooltipIconType={'search'} />
)}
<HeaderToolTip title={'Documentation'} tooltipIconType={'help'} />
<HeaderToolTip onClick={onOpenRegistryInfoDialog} title={'Registry Information'} tooltipIconType={'info'} />
{username ? (

View File

@@ -18,7 +18,10 @@ const HeaderToolTipIcon: React.FC<Props> = ({ tooltipIconType, onClick }) => {
switch (tooltipIconType) {
case 'help':
return (
<StyledExternalLink blank={true} data-testid={'header--tooltip-documentation'} to={'https://verdaccio.org/docs/en/installation'}>
<StyledExternalLink
blank={true}
data-testid={'header--tooltip-documentation'}
to={'https://verdaccio.org/docs/en/installation'}>
<IconButton color={'inherit'}>
<Help />
</IconButton>
@@ -26,7 +29,11 @@ const HeaderToolTipIcon: React.FC<Props> = ({ tooltipIconType, onClick }) => {
);
case 'info':
return (
<IconButton color="inherit" data-testid={'header--tooltip-info'} id="header--button-registryInfo" onClick={onClick}>
<IconButton
color="inherit"
data-testid={'header--tooltip-info'}
id="header--button-registryInfo"
onClick={onClick}>
<Info />
</IconButton>
);

View File

@@ -45,21 +45,30 @@ const InstallListItem: React.FC<Interface> = ({ packageName, dependencyManager }
return (
<InstallItem button={true} data-testid={'installListItem-npm'}>
<PackageMangerAvatar alt="npm" src={npmLogo} />
<InstallListItemText primary={<CopyToClipBoard text={`npm install ${packageName}`} />} secondary={'Install using npm'} />
<InstallListItemText
primary={<CopyToClipBoard text={`npm install ${packageName}`} />}
secondary={'Install using npm'}
/>
</InstallItem>
);
case DependencyManager.YARN:
return (
<InstallItem button={true} data-testid={'installListItem-yarn'}>
<PackageMangerAvatar alt="yarn" src={yarnLogo} />
<InstallListItemText primary={<CopyToClipBoard text={`yarn add ${packageName}`} />} secondary={'Install using yarn'} />
<InstallListItemText
primary={<CopyToClipBoard text={`yarn add ${packageName}`} />}
secondary={'Install using yarn'}
/>
</InstallItem>
);
case DependencyManager.PNPM:
return (
<InstallItem button={true} data-testid={'installListItem-pnpm'}>
<PackageMangerAvatar alt={'pnpm'} src={pnpmLogo} />
<InstallListItemText primary={<CopyToClipBoard text={`pnpm install ${packageName}`} />} secondary={'Install using pnpm'} />
<InstallListItemText
primary={<CopyToClipBoard text={`pnpm install ${packageName}`} />}
secondary={'Install using pnpm'}
/>
</InstallItem>
);
default:

View File

@@ -172,7 +172,11 @@ export default class LoginModal extends Component<Partial<LoginModalProps>, Logi
}
public renderLoginError({ type, title, description }: FormError): JSX.Element | false {
return type === 'error' && <SnackbarContent className={classes.loginError} message={this.renderMessage(title, description)} />;
return (
type === 'error' && (
<SnackbarContent className={classes.loginError} message={this.renderMessage(title, description)} />
)
);
}
public renderNameField = () => {
@@ -182,8 +186,15 @@ export default class LoginModal extends Component<Partial<LoginModalProps>, Logi
return (
<FormControl error={!username.value && !username.pristine} fullWidth={true} required={username.required}>
<InputLabel htmlFor={'username'}>{'Username'}</InputLabel>
<Input id={'login--form-username'} onChange={this.handleUsernameChange} placeholder={'Your username'} value={username.value} />
{!username.value && !username.pristine && <FormHelperText id={'username-error'}>{username.helperText}</FormHelperText>}
<Input
id={'login--form-username'}
onChange={this.handleUsernameChange}
placeholder={'Your username'}
value={username.value}
/>
{!username.value && !username.pristine && (
<FormHelperText id={'username-error'}>{username.helperText}</FormHelperText>
)}
</FormControl>
);
};
@@ -201,8 +212,16 @@ export default class LoginModal extends Component<Partial<LoginModalProps>, Logi
fullWidth={true}
required={password.required}>
<InputLabel htmlFor={'password'}>{'Password'}</InputLabel>
<Input id={'login--form-password'} onChange={this.handlePasswordChange} placeholder={'Your strong password'} type={'password'} value={password.value} />
{!password.value && !password.pristine && <FormHelperText id={'password-error'}>{password.helperText}</FormHelperText>}
<Input
id={'login--form-password'}
onChange={this.handlePasswordChange}
placeholder={'Your strong password'}
type={'password'}
value={password.value}
/>
{!password.value && !password.pristine && (
<FormHelperText id={'password-error'}>{password.helperText}</FormHelperText>
)}
</FormControl>
);
};
@@ -217,7 +236,11 @@ export default class LoginModal extends Component<Partial<LoginModalProps>, Logi
<Button color={'inherit'} id={'login--form-cancel'} onClick={onCancel} type={'button'}>
{'Cancel'}
</Button>
<Button color={'inherit'} disabled={!password.value || !username.value} id={'login--form-submit'} type={'submit'}>
<Button
color={'inherit'}
disabled={!password.value || !username.value}
id={'login--form-submit'}
type={'submit'}>
{'Login'}
</Button>
</DialogActions>

View File

@@ -32,7 +32,14 @@ const NotFound: React.FC = () => {
}, [history]);
return (
<Box alignItems="center" data-testid="404" display="flex" flexDirection="column" flexGrow={1} justifyContent="center" p={2}>
<Box
alignItems="center"
data-testid="404"
display="flex"
flexDirection="column"
flexGrow={1}
justifyContent="center"
p={2}>
<EmptyPackage alt="404 - Page not found" src={PackageImg} />
<StyledHeading className="not-found-text" variant="h4">
{NOT_FOUND_TEXT}

View File

@@ -27,7 +27,14 @@ describe('<Package /> component', () => {
};
const wrapper = shallow(
<Package author={props.author} description={props.description} license={props.license} name={props.name} time={props.time} version={props.version} />
<Package
author={props.author}
description={props.description}
license={props.license}
name={props.name}
time={props.time}
version={props.version}
/>
);
// integration expectations
@@ -65,7 +72,14 @@ describe('<Package /> component', () => {
description: 'Private NPM repository',
};
const wrapper = shallow(
<Package author={props.author} description={props.description} license={props.license} name={props.name} time={props.time} version={props.version} />
<Package
author={props.author}
description={props.description}
license={props.license}
name={props.name}
time={props.time}
version={props.version}
/>
);
// integration expectations

View File

@@ -160,8 +160,13 @@ const Package: React.FC<PackageInterface> = ({
};
const renderPackageListItemText = (): React.ReactNode => (
// @ts-ignore
<PackageListItemText className="package-link" component="div" primary={renderPrimaryComponent()} secondary={renderSecondaryComponent()} />
<PackageListItemText
className="package-link"
// @ts-ignore
component="div"
primary={renderPrimaryComponent()}
secondary={renderSecondaryComponent()}
/>
);
return (

View File

@@ -3,6 +3,8 @@ import 'github-markdown-css';
import { Props } from './types';
const Readme: React.FC<Props> = ({ description }) => <div className="markdown-body" dangerouslySetInnerHTML={{ __html: description }} />;
const Readme: React.FC<Props> = ({ description }) => (
<div className="markdown-body" dangerouslySetInnerHTML={{ __html: description }} />
);
export default Readme;

View File

@@ -47,7 +47,12 @@ class RegistryInfoContent extends Component<Props, State> {
return (
<React.Fragment>
<Tabs indicatorColor="primary" onChange={this.handleChange} textColor="primary" value={tabPosition} variant="fullWidth">
<Tabs
indicatorColor="primary"
onChange={this.handleChange}
textColor="primary"
value={tabPosition}
variant="fullWidth">
<Tab label={NODE_MANAGER.npm} />
<Tab label={NODE_MANAGER.pnpm} />
<Tab label={NODE_MANAGER.yarn} />

View File

@@ -21,7 +21,10 @@ export interface State {
export type cancelAllSearchRequests = () => void;
export type handlePackagesClearRequested = () => void;
export type handleSearch = (event: React.FormEvent<HTMLInputElement>, { newValue, method }: ChangeEvent) => void;
export type handleClickSearch = (event: KeyboardEvent<HTMLInputElement>, { suggestionValue, method }: { suggestionValue: object[]; method: string }) => void;
export type handleClickSearch = (
event: KeyboardEvent<HTMLInputElement>,
{ suggestionValue, method }: { suggestionValue: object[]; method: string }
) => void;
export type handleFetchPackages = ({ value: string }) => Promise<void>;
export type onBlur = (event: React.FormEvent<HTMLInputElement>) => void;

View File

@@ -44,7 +44,9 @@ describe('<Version /> component', () => {
});
test('should not render versions', () => {
const { queryByText } = render(<ComponentToBeRendered contextValue={{ packageName: detailContextValue.packageName }} />);
const { queryByText } = render(
<ComponentToBeRendered contextValue={{ packageName: detailContextValue.packageName }} />
);
expect(queryByText(LABEL_VERSION_HISTORY)).toBeFalsy();
expect(queryByText(LABEL_CURRENT_TAGS)).toBeFalsy();

View File

@@ -7,7 +7,10 @@ interface Props<T extends boolean = false> extends Omit<ListItemProps, 'button'>
button?: T;
}
const ListItem = forwardRef(function ListItem<T extends boolean>({ button, ...props }: Props<T>, ref: React.Ref<ListItemRef<T>>) {
const ListItem = forwardRef(function ListItem<T extends boolean>(
{ button, ...props }: Props<T>,
ref: React.Ref<ListItemRef<T>>
) {
// 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 <MaterialUIListItem {...props} button={button as any} innerRef={ref} />;

View File

@@ -1,2 +1,8 @@
export { DetailContext, DetailContextConsumer, DetailContextProvider, DetailContextProps, VersionPageConsumerProps } from './context';
export {
DetailContext,
DetailContextConsumer,
DetailContextProvider,
DetailContextProps,
VersionPageConsumerProps,
} from './context';
export { default } from './Version';

View File

@@ -1,5 +1,3 @@
/* eslint-disable @typescript-eslint/no-object-literal-type-assertion */
import { handleResponseType } from '../../src/utils/api';
describe('api', () => {

View File

@@ -3,11 +3,17 @@ import { PackageMetaInterface } from '../../types/packageMeta';
import API from './api';
export async function callReadme(packageName: string, packageVersion?: string): Promise<string | {}> {
return await API.request<string | {}>(`package/readme/${packageName}${packageVersion ? `?v=${packageVersion}` : ''}`, 'GET');
return await API.request<string | {}>(
`package/readme/${packageName}${packageVersion ? `?v=${packageVersion}` : ''}`,
'GET'
);
}
export async function callDetailPage(packageName: string, packageVersion?: string): Promise<PackageMetaInterface | {}> {
const packageMeta = await API.request<PackageMetaInterface | {}>(`sidebar/${packageName}${packageVersion ? `?v=${packageVersion}` : ''}`, 'GET');
const packageMeta = await API.request<PackageMetaInterface | {}>(
`sidebar/${packageName}${packageVersion ? `?v=${packageVersion}` : ''}`,
'GET'
);
return packageMeta;
}

View File

@@ -1,6 +1,8 @@
import { SyntheticEvent } from 'react';
export const copyToClipBoardUtility = (str: string): ((e: SyntheticEvent<HTMLElement>) => void) => (event: SyntheticEvent<HTMLElement>): void => {
export const copyToClipBoardUtility = (str: string): ((e: SyntheticEvent<HTMLElement>) => void) => (
event: SyntheticEvent<HTMLElement>
): void => {
event.preventDefault();
const node = document.createElement('div');

View File

@@ -1,3 +1,13 @@
export default function fileSizeSI(a: number, b?: typeof Math, c?: (p: number) => number, d?: number, e?: number): string {
return ((b = Math), (c = b.log), (d = 1e3), (e = (c(a) / c(d)) | 0), a / b.pow(d, e)).toFixed(2) + ' ' + (e ? 'kMGTPEZY'[--e] + 'B' : 'Bytes');
export default function fileSizeSI(
a: number,
b?: typeof Math,
c?: (p: number) => number,
d?: number,
e?: number
): string {
return (
((b = Math), (c = b.log), (d = 1e3), (e = (c(a) / c(d)) | 0), a / b.pow(d, e)).toFixed(2) +
' ' +
(e ? 'kMGTPEZY'[--e] + 'B' : 'Bytes')
);
}

View File

@@ -40,7 +40,11 @@ describe('isTokenExpire', (): void => {
test('isTokenExpire - token is not a valid json token', (): void => {
const token = generateInvalidToken();
const result = ['Invalid token:', new SyntaxError('Unexpected token i in JSON at position 0'), 'xxxxxx.aW52YWxpZHRva2Vu.xxxxxx'];
const result = [
'Invalid token:',
new SyntaxError('Unexpected token i in JSON at position 0'),
'xxxxxx.aW52YWxpZHRva2Vu.xxxxxx',
];
expect(isTokenExpire(token)).toBeTruthy();
expect(console.error).toHaveBeenCalledWith(...result);
});
@@ -66,7 +70,7 @@ describe('makeLogin', (): void => {
test('makeLogin - should login successfully', async (): Promise<void> => {
const { username, password } = { username: 'sam', password: '1234' };
const result = { token: 'TEST_TOKEN', username: 'sam' };
const result = { token: 'TEST_TOKEN', username: 'sam' }; // pragma: allowlist secret
const login = await makeLogin(username, password);
expect(login).toEqual(result);
});

View File

@@ -1,6 +1,13 @@
import { packageMeta } from '../../jest/unit/components/store/packageMeta';
import { formatLicense, formatRepository, formatDate, formatDateDistance, getLastUpdatedPackageTime, getRecentReleases } from './package';
import {
formatLicense,
formatRepository,
formatDate,
formatDateDistance,
getLastUpdatedPackageTime,
getRecentReleases,
} from './package';
describe('formatLicense', (): void => {
test('should check license field different values', (): void => {