mirror of
https://github.com/SomboChea/ui
synced 2024-12-25 21:54:26 +07:00
Merge pull request #153 from antoinechalifour/fix-ts-ignore
Fix a few ts-ignore
This commit is contained in:
commit
0ca89dcbe7
@ -29,16 +29,14 @@ export interface AppStateInterface {
|
||||
scope: string;
|
||||
showLoginModal: boolean;
|
||||
isUserLoggedIn: boolean;
|
||||
packages: [];
|
||||
packages: any[];
|
||||
isLoading: boolean;
|
||||
}
|
||||
export default class App extends Component<{}, AppStateInterface> {
|
||||
public state: AppStateInterface = {
|
||||
// @ts-ignore
|
||||
logoUrl: window.VERDACCIO_LOGO,
|
||||
user: {},
|
||||
// @ts-ignore
|
||||
scope: window.VERDACCIO_SCOPE ? `${window.VERDACCIO_SCOPE}:` : '',
|
||||
scope: window.VERDACCIO_SCOPE || '',
|
||||
showLoginModal: false,
|
||||
isUserLoggedIn: false,
|
||||
packages: [],
|
||||
@ -64,7 +62,6 @@ export default class App extends Component<{}, AppStateInterface> {
|
||||
const context = { isUserLoggedIn, packages, logoUrl, user, scope };
|
||||
|
||||
return (
|
||||
// @ts-ignore
|
||||
<Container isLoading={isLoading}>
|
||||
{isLoading ? <Loading /> : <AppContextProvider value={context}>{this.renderContent()}</AppContextProvider>}
|
||||
{this.renderLoginModal()}
|
||||
@ -88,11 +85,9 @@ export default class App extends Component<{}, AppStateInterface> {
|
||||
|
||||
public loadOnHandler = async () => {
|
||||
try {
|
||||
// @ts-ignore
|
||||
this.req = await API.request('packages', 'GET');
|
||||
const packages = await API.request<any[]>('packages', 'GET');
|
||||
this.setState({
|
||||
// @ts-ignore
|
||||
packages: this.req,
|
||||
packages,
|
||||
isLoading: false,
|
||||
});
|
||||
} catch (error) {
|
||||
@ -116,7 +111,6 @@ export default class App extends Component<{}, AppStateInterface> {
|
||||
*/
|
||||
public handleToggleLoginModal = () => {
|
||||
this.setState(prevState => ({
|
||||
// @ts-ignore
|
||||
showLoginModal: !prevState.showLoginModal,
|
||||
}));
|
||||
};
|
||||
@ -126,7 +120,6 @@ export default class App extends Component<{}, AppStateInterface> {
|
||||
* Required by: <Header />
|
||||
*/
|
||||
public handleDoLogin = async (usernameValue, passwordValue) => {
|
||||
// @ts-ignore
|
||||
const { username, token, error } = await makeLogin(usernameValue, passwordValue);
|
||||
|
||||
if (username && token) {
|
||||
@ -187,7 +180,6 @@ export default class App extends Component<{}, AppStateInterface> {
|
||||
public renderHeader = (): ReactElement<HTMLElement> => {
|
||||
const {
|
||||
logoUrl,
|
||||
// @ts-ignore
|
||||
user: { username },
|
||||
scope,
|
||||
} = this.state;
|
||||
|
@ -2,7 +2,7 @@ import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import { ActionBar } from './ActionBar';
|
||||
|
||||
const mockPackageMeta = jest.fn(() => ({
|
||||
const mockPackageMeta: jest.Mock = jest.fn(() => ({
|
||||
latest: {
|
||||
homepage: 'https://verdaccio.tld',
|
||||
bugs: {
|
||||
@ -32,7 +32,6 @@ describe('<ActionBar /> component', () => {
|
||||
});
|
||||
|
||||
test('when there is no action bar data', () => {
|
||||
// @ts-ignore
|
||||
mockPackageMeta.mockImplementation(() => ({
|
||||
latest: {},
|
||||
}));
|
||||
@ -44,7 +43,6 @@ describe('<ActionBar /> component', () => {
|
||||
});
|
||||
|
||||
test('when there is a button to download a tarball', () => {
|
||||
// @ts-ignore
|
||||
mockPackageMeta.mockImplementation(() => ({
|
||||
latest: {
|
||||
dist: {
|
||||
|
@ -70,7 +70,6 @@ class ActionBar extends Component {
|
||||
}
|
||||
|
||||
private renderActionBar = ({ packageMeta }) => {
|
||||
// @ts-ignore
|
||||
const { latest } = packageMeta;
|
||||
|
||||
if (!latest) {
|
||||
@ -107,7 +106,6 @@ class ActionBar extends Component {
|
||||
} else {
|
||||
const fab = <Fab size={'small'}>{actionItem['icon']}</Fab>;
|
||||
component.push(
|
||||
// @ts-ignore
|
||||
<Tooltip key={key} title={actionItem['title']}>
|
||||
<>{this.renderIconsWithLink(link, fab)}</>
|
||||
</Tooltip>
|
||||
|
@ -96,14 +96,16 @@ class Dependencies extends Component {
|
||||
|
||||
const dependencyMap = { dependencies, devDependencies, peerDependencies };
|
||||
|
||||
const dependencyList = Object.keys(dependencyMap).reduce((result, value, key) => {
|
||||
const selectedDepndency = dependencyMap[value];
|
||||
if (selectedDepndency && this.checkDependencyLength(selectedDepndency)) {
|
||||
// @ts-ignore
|
||||
result.push(<DependencyBlock className="dependency-block" dependencies={selectedDepndency} key={key} title={value} />);
|
||||
}
|
||||
return result;
|
||||
}, []);
|
||||
const dependencyList = Object.keys(dependencyMap).reduce(
|
||||
(result, value, key) => {
|
||||
const selectedDepndency = dependencyMap[value];
|
||||
if (selectedDepndency && this.checkDependencyLength(selectedDepndency)) {
|
||||
result.push(<DependencyBlock dependencies={selectedDepndency} key={key} title={value} />);
|
||||
}
|
||||
return result;
|
||||
},
|
||||
[] as JSX.Element[]
|
||||
);
|
||||
|
||||
if (dependencyList.length) {
|
||||
return <Fragment>{dependencyList}</Fragment>;
|
||||
|
@ -18,7 +18,7 @@ const Developers: FC<Props> = ({ type, visibleMax }) => {
|
||||
const [visibleDevs, setVisibleDevs] = React.useState<number>(visibleMax || VISIBLE_MAX);
|
||||
const { packageMeta } = React.useContext(DetailContext);
|
||||
|
||||
const handleLoadMore = () => {
|
||||
const handleLoadMore = (): void => {
|
||||
setVisibleDevs(visibleDevs + VISIBLE_MAX);
|
||||
};
|
||||
|
||||
|
@ -5,7 +5,7 @@ import Engine from './Engines';
|
||||
jest.mock('./img/node.png', () => '');
|
||||
jest.mock('../Install/img/npm.svg', () => '');
|
||||
|
||||
const mockPackageMeta = jest.fn(() => ({
|
||||
const mockPackageMeta: jest.Mock = jest.fn(() => ({
|
||||
latest: {
|
||||
homepage: 'https://verdaccio.tld',
|
||||
bugs: {
|
||||
@ -38,7 +38,6 @@ describe('<Engines /> component', () => {
|
||||
},
|
||||
};
|
||||
|
||||
// @ts-ignore
|
||||
mockPackageMeta.mockImplementation(() => packageMeta);
|
||||
|
||||
const wrapper = mount(<Engine />);
|
||||
@ -50,7 +49,6 @@ describe('<Engines /> component', () => {
|
||||
latest: {},
|
||||
};
|
||||
|
||||
// @ts-ignore
|
||||
mockPackageMeta.mockImplementation(() => packageMeta);
|
||||
|
||||
const wrapper = mount(<Engine />);
|
||||
@ -64,7 +62,6 @@ describe('<Engines /> component', () => {
|
||||
},
|
||||
};
|
||||
|
||||
// @ts-ignore
|
||||
mockPackageMeta.mockImplementation(() => packageMeta);
|
||||
|
||||
const wrapper = mount(<Engine />);
|
||||
|
@ -10,10 +10,8 @@ jest.mock('../../../package.json', () => ({
|
||||
describe('<Footer /> component', () => {
|
||||
let wrapper;
|
||||
beforeEach(() => {
|
||||
// @ts-ignore : Property 'VERDACCIO_VERSION' does not exist on type 'Window'
|
||||
window.VERDACCIO_VERSION = 'v.1.0.0';
|
||||
wrapper = mount(<Footer />);
|
||||
// @ts-ignore : Property 'VERDACCIO_VERSION' does not exist on type 'Window'
|
||||
delete window.VERDACCIO_VERSION;
|
||||
});
|
||||
|
||||
|
@ -21,7 +21,6 @@ const MADEWITH_LABEL = ' Made with';
|
||||
const ON_LABEL = 'on';
|
||||
const HEARTH_EMOJI = '♥';
|
||||
|
||||
// @ts-ignore
|
||||
const renderRight = (version = window.VERDACCIO_VERSION): JSX.Element => {
|
||||
return (
|
||||
<Right>
|
||||
|
@ -20,7 +20,6 @@ export const Inner = styled('div')`
|
||||
justify-content: flex-end;
|
||||
width: 100%;
|
||||
${() => {
|
||||
// @ts-ignore
|
||||
return mq.medium(css`
|
||||
min-width: 400px;
|
||||
max-width: 800px;
|
||||
@ -29,7 +28,6 @@ export const Inner = styled('div')`
|
||||
`);
|
||||
}};
|
||||
${() => {
|
||||
// @ts-ignore
|
||||
return mq.large(css`
|
||||
max-width: 1240px;
|
||||
`);
|
||||
@ -42,7 +40,6 @@ export const Left = styled('div')`
|
||||
align-items: center;
|
||||
display: none;
|
||||
${() => {
|
||||
// @ts-ignore
|
||||
return mq.medium(css`
|
||||
display: flex;
|
||||
`);
|
||||
|
@ -184,7 +184,6 @@ class Header extends Component<Props, State> {
|
||||
switch (type) {
|
||||
case 'help':
|
||||
content = (
|
||||
// @ts-ignore
|
||||
<StyledExternalLink blank={true} to={'https://verdaccio.org/docs/en/installation'}>
|
||||
<IconButton color={'inherit'}>
|
||||
<Help />
|
||||
|
@ -76,9 +76,8 @@ export const NavBar = styled(AppBar)`
|
||||
min-height: 60px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
${() => {
|
||||
// @ts-ignore
|
||||
return mq.medium(css`
|
||||
${() =>
|
||||
mq.medium(css`
|
||||
${SearchWrapper} {
|
||||
display: flex;
|
||||
}
|
||||
@ -88,26 +87,21 @@ export const NavBar = styled(AppBar)`
|
||||
${MobileNavBar} {
|
||||
display: none;
|
||||
}
|
||||
`);
|
||||
}};
|
||||
${() => {
|
||||
// @ts-ignore
|
||||
return mq.large(css`
|
||||
`)};
|
||||
${() =>
|
||||
mq.large(css`
|
||||
${InnerNavBar} {
|
||||
padding: 0 20px;
|
||||
}
|
||||
`);
|
||||
}};
|
||||
${() => {
|
||||
// @ts-ignore
|
||||
return mq.xlarge(css`
|
||||
`)};
|
||||
${() =>
|
||||
mq.xlarge(css`
|
||||
${InnerNavBar} {
|
||||
max-width: 1240px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
`);
|
||||
}};
|
||||
`)};
|
||||
}
|
||||
`;
|
||||
|
||||
|
@ -65,14 +65,12 @@ export interface Props {
|
||||
}
|
||||
|
||||
const Icon: React.FC<Props> = ({ className, name, size = 'sm', img = false, pointer = false, ...props }) => {
|
||||
// @ts-ignore
|
||||
const title = capitalize(name);
|
||||
const title = capitalize(name.toString());
|
||||
return img ? (
|
||||
<ImgWrapper className={className} name={name} pointer={pointer} size={size} title={title} {...props}>
|
||||
<Img alt={title} src={Icons[name]} />
|
||||
</ImgWrapper>
|
||||
) : (
|
||||
// @ts-ignore
|
||||
<Svg className={className} pointer={pointer} size={size} {...props}>
|
||||
<title>{title}</title>
|
||||
<use xlinkHref={`${Icons[name]}#${name}`} />
|
||||
|
@ -9,18 +9,20 @@ interface Props {
|
||||
modifiers?: null | undefined;
|
||||
}
|
||||
|
||||
interface WrapperProps {
|
||||
capitalize: boolean;
|
||||
weight: string;
|
||||
modifiers?: null;
|
||||
}
|
||||
|
||||
const Wrapper = styled('div')`
|
||||
font-weight: ${({ weight }) => {
|
||||
// @ts-ignore
|
||||
return fontWeight[weight];
|
||||
}};
|
||||
text-transform: ${({ capitalize }) => (capitalize ? 'capitalize' : 'none')};
|
||||
${({ modifiers }: Props) => modifiers && modifiers};
|
||||
font-weight: ${({ weight }: WrapperProps) => fontWeight[weight]};
|
||||
text-transform: ${({ capitalize }: WrapperProps) => (capitalize ? 'capitalize' : 'none')};
|
||||
${({ modifiers }: WrapperProps) => modifiers};
|
||||
`;
|
||||
|
||||
const Label: React.FC<Props> = ({ text = '', capitalize = false, weight = 'regular', ...props }) => {
|
||||
return (
|
||||
// @ts-ignore
|
||||
<Wrapper capitalize={capitalize} weight={weight} {...props}>
|
||||
{text}
|
||||
</Wrapper>
|
||||
|
@ -11,15 +11,18 @@ export const Content = styled('div')({
|
||||
},
|
||||
});
|
||||
|
||||
interface ContainerProps {
|
||||
isLoading: boolean;
|
||||
}
|
||||
|
||||
export const Container = styled('div')`
|
||||
&& {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
${props =>
|
||||
// @ts-ignore
|
||||
props.isLoading &&
|
||||
${({ isLoading }: ContainerProps) =>
|
||||
isLoading &&
|
||||
css`
|
||||
${Content} {
|
||||
background-color: #f5f6f8;
|
||||
|
@ -150,7 +150,6 @@ const Package: React.FC<PackageInterface> = ({
|
||||
};
|
||||
|
||||
const renderSecondaryComponent = (): React.ReactNode => {
|
||||
// @ts-ignore
|
||||
const tags = keywords.sort().map((keyword, index) => <Tag key={index}>{keyword}</Tag>);
|
||||
return (
|
||||
<>
|
||||
|
@ -48,7 +48,6 @@ export const Published = styled('span')({
|
||||
},
|
||||
});
|
||||
|
||||
// @ts-ignore
|
||||
export const Text = styled(Label)({
|
||||
'&&': {
|
||||
fontSize: '12px',
|
||||
|
@ -4,7 +4,7 @@ import Repository from './Repository';
|
||||
|
||||
jest.mock('./img/git.png', () => '');
|
||||
|
||||
const mockPackageMeta = jest.fn(() => ({
|
||||
const mockPackageMeta: jest.Mock = jest.fn(() => ({
|
||||
latest: {
|
||||
homepage: 'https://verdaccio.tld',
|
||||
bugs: {
|
||||
@ -37,7 +37,6 @@ describe('<Repository /> component', () => {
|
||||
},
|
||||
};
|
||||
|
||||
// @ts-ignore
|
||||
mockPackageMeta.mockImplementation(() => packageMeta);
|
||||
|
||||
const wrapper = mount(<Repository />);
|
||||
@ -49,7 +48,6 @@ describe('<Repository /> component', () => {
|
||||
latest: {},
|
||||
};
|
||||
|
||||
// @ts-ignore
|
||||
mockPackageMeta.mockImplementation(() => packageMeta);
|
||||
|
||||
const wrapper = mount(<Repository />);
|
||||
@ -66,7 +64,6 @@ describe('<Repository /> component', () => {
|
||||
},
|
||||
};
|
||||
|
||||
// @ts-ignore
|
||||
mockPackageMeta.mockImplementation(() => packageMeta);
|
||||
|
||||
const wrapper = mount(<Repository />);
|
||||
|
@ -8,7 +8,6 @@ interface Props {
|
||||
}
|
||||
|
||||
const Spinner: React.FC<Props> = ({ size = 50, centered = false }) => (
|
||||
// @ts-ignore
|
||||
<Wrapper centered={centered}>
|
||||
<Circular size={size} />
|
||||
</Wrapper>
|
||||
|
@ -3,13 +3,16 @@ import styled, { css } from 'react-emotion';
|
||||
|
||||
import colors from '../../utils/styles/colors';
|
||||
|
||||
interface WrapperProps {
|
||||
centered: boolean;
|
||||
}
|
||||
|
||||
export const Wrapper = styled('div')`
|
||||
&& {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
${props =>
|
||||
// @ts-ignore
|
||||
${(props: WrapperProps) =>
|
||||
props.centered &&
|
||||
css`
|
||||
position: absolute;
|
||||
|
@ -43,7 +43,6 @@ class API {
|
||||
}
|
||||
|
||||
if (!['http://', 'https://', '//'].some(prefix => url.startsWith(prefix))) {
|
||||
// @ts-ignore
|
||||
url = window.VERDACCIO_API_URL + url;
|
||||
}
|
||||
|
||||
|
@ -30,7 +30,6 @@ const colors = {
|
||||
// Main colors
|
||||
// -------------------------
|
||||
|
||||
// @ts-ignore
|
||||
primary: window.VERDACCIO_PRIMARY_COLOR || '#4b5e40',
|
||||
secondary: '#20232a',
|
||||
};
|
||||
|
@ -8,16 +8,26 @@ export const breakpoints = {
|
||||
xlarge: 1275,
|
||||
};
|
||||
|
||||
const mq = Object.keys(breakpoints).reduce((accumulator, label) => {
|
||||
const prefix = typeof breakpoints[label] === 'string' ? '' : 'min-width:';
|
||||
const suffix = typeof breakpoints[label] === 'string' ? '' : 'px';
|
||||
accumulator[label] = cls =>
|
||||
css`
|
||||
@media (${prefix + breakpoints[label] + suffix}) {
|
||||
${cls};
|
||||
}
|
||||
`;
|
||||
return accumulator;
|
||||
}, {});
|
||||
type Sizes = keyof typeof breakpoints;
|
||||
|
||||
type MediaQuery = {
|
||||
[key in Sizes]: (cls: any) => string;
|
||||
};
|
||||
|
||||
const mq: MediaQuery = Object.keys(breakpoints).reduce(
|
||||
(accumulator, label) => {
|
||||
const prefix = typeof breakpoints[label] === 'string' ? '' : 'min-width:';
|
||||
const suffix = typeof breakpoints[label] === 'string' ? '' : 'px';
|
||||
accumulator[label] = cls =>
|
||||
css`
|
||||
@media (${prefix + breakpoints[label] + suffix}) {
|
||||
${cls};
|
||||
}
|
||||
`;
|
||||
return accumulator;
|
||||
},
|
||||
// eslint-disable-next-line @typescript-eslint/no-object-literal-type-assertion
|
||||
{} as MediaQuery
|
||||
);
|
||||
|
||||
export default mq;
|
||||
|
@ -7,6 +7,10 @@ export interface VerdaccioOptions {
|
||||
declare global {
|
||||
interface Window {
|
||||
__VERDACCIO_BASENAME_UI_OPTIONS: VerdaccioOptions;
|
||||
VERDACCIO_PRIMARY_COLOR: string;
|
||||
VERDACCIO_LOGO: string;
|
||||
VERDACCIO_SCOPE: string;
|
||||
VERDACCIO_VERSION: string;
|
||||
VERDACCIO_API_URL: string;
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user