Skip to content

Commit 94e3acb

Browse files
DaneEverittDaneEveritt
committed
Get compilation back to working
1 parent 2193916 commit 94e3acb

21 files changed

+97
-97
lines changed

‎resources/scripts/.eslintrc.yml‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,9 @@ rules:
3636
comma-dangle:
3737
- error
3838
- always-multiline
39+
array-bracket-spacing:
40+
- warn
41+
- always
3942
"react-hooks/rules-of-hooks":
4043
- error
4144
"react-hooks/exhaustive-deps": 0
@@ -45,6 +48,8 @@ rules:
4548
"@typescript-eslint/no-unused-vars": 0
4649
"@typescript-eslint/no-explicit-any": 0
4750
"@typescript-eslint/no-non-null-assertion": 0
51+
# @todo this would be nice to have, but don't want to deal with the warning spam at the moment.
52+
"@typescript-eslint/explicit-module-boundary-types": 0
4853
no-restricted-imports:
4954
- error
5055
- paths:

‎resources/scripts/TransitionRouter.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,11 @@ import React from 'react';
22
import { Route } from 'react-router';
33
import { CSSTransition, TransitionGroup } from 'react-transition-group';
44

5-
type Props = Readonly<{
6-
children: React.ReactNode;
7-
}>;
8-
9-
export default ({ children }: Props) => (
5+
const TransitionRouter: React.FC = ({ children }) => (
106
<Route
117
render={({ location }) => (
128
<TransitionGroup className={'route-transition-group'}>
13-
<CSSTransition key={location.key} timeout={250} in={true} appear={true} classNames={'fade'}>
9+
<CSSTransition key={location.key} timeout={250} in appear classNames={'fade'}>
1410
<section>
1511
{children}
1612
</section>
@@ -19,3 +15,5 @@ export default ({ children }: Props) => (
1915
)}
2016
/>
2117
);
18+
19+
export default TransitionRouter;

‎resources/scripts/components/App.tsx‎

Lines changed: 16 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ import ServerRouter from '@/routers/ServerRouter';
88
import AuthenticationRouter from '@/routers/AuthenticationRouter';
99
import { Provider } from 'react-redux';
1010
import { SiteSettings } from '@/state/settings';
11-
import { DefaultTheme, ThemeProvider } from 'styled-components';
1211
import ProgressBar from '@/components/elements/ProgressBar';
1312
import NotFound from '@/components/screens/NotFound';
13+
import tw from 'twin.macro';
1414

1515
interface ExtendedWindow extends Window {
1616
SiteConfiguration?: SiteSettings;
@@ -28,16 +28,6 @@ interface ExtendedWindow extends Window {
2828
};
2929
}
3030

31-
const theme: DefaultTheme = {
32-
breakpoints: {
33-
xs: 0,
34-
sm: 576,
35-
md: 768,
36-
lg: 992,
37-
xl: 1200,
38-
},
39-
};
40-
4131
const App = () => {
4232
const { PterodactylUser, SiteConfiguration } = (window as ExtendedWindow);
4333
if (PterodactylUser && !store.getState().user.data) {
@@ -58,23 +48,21 @@ const App = () => {
5848
}
5949

6050
return (
61-
<ThemeProvider theme={theme}>
62-
<StoreProvider store={store}>
63-
<Provider store={store}>
64-
<ProgressBar/>
65-
<div className={'mx-auto w-auto'}>
66-
<BrowserRouter basename={'/'} key={'root-router'}>
67-
<Switch>
68-
<Route path="/server/:id" component={ServerRouter}/>
69-
<Route path="/auth" component={AuthenticationRouter}/>
70-
<Route path="/" component={DashboardRouter}/>
71-
<Route path={'*'} component={NotFound}/>
72-
</Switch>
73-
</BrowserRouter>
74-
</div>
75-
</Provider>
76-
</StoreProvider>
77-
</ThemeProvider>
51+
<StoreProvider store={store}>
52+
<Provider store={store}>
53+
<ProgressBar/>
54+
<div css={tw`mx-auto w-auto`}>
55+
<BrowserRouter basename={'/'} key={'root-router'}>
56+
<Switch>
57+
<Route path="/server/:id" component={ServerRouter}/>
58+
<Route path="/auth" component={AuthenticationRouter}/>
59+
<Route path="/" component={DashboardRouter}/>
60+
<Route path={'*'} component={NotFound}/>
61+
</Switch>
62+
</BrowserRouter>
63+
</div>
64+
</Provider>
65+
</StoreProvider>
7866
);
7967
};
8068

‎resources/scripts/components/FlashMessageRender.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,9 @@ import { ApplicationStore } from '@/state';
66
type Props = Readonly<{
77
byKey?: string;
88
spacerClass?: string;
9-
className?: string;
109
}>;
1110

12-
export default ({ className, spacerClass, byKey }: Props) => {
11+
export default ({ spacerClass, byKey }: Props) => {
1312
const flashes = useStoreState((state: State<ApplicationStore>) => state.flashes.items);
1413

1514
let filtered = flashes;
@@ -22,11 +21,11 @@ export default ({ className, spacerClass, byKey }: Props) => {
2221
}
2322

2423
return (
25-
<div className={className}>
24+
<div>
2625
{
2726
filtered.map((flash, index) => (
2827
<React.Fragment key={flash.id || flash.type + flash.message}>
29-
{index > 0 && <div className={spacerClass || 'mt-2'}></div>}
28+
{index > 0 && <div css={tw`${spacerClass || 'mt-2'}`}></div>}
3029
<MessageBox type={flash.type} title={flash.title}>
3130
{flash.message}
3231
</MessageBox>

‎resources/scripts/components/auth/LoginFormContainer.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import React, { forwardRef } from 'react';
22
import { Form } from 'formik';
3-
import styled from 'styled-components';
3+
import styled from 'styled-components/macro';
44
import { breakpoint } from 'styled-components-breakpoint';
55
import FlashMessageRender from '@/components/FlashMessageRender';
6+
import tw from 'twin.macro';
67

78
type Props = React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement> & {
89
title?: string;

‎resources/scripts/components/dashboard/AccountOverviewContainer.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,10 @@ import ContentBox from '@/components/elements/ContentBox';
33
import UpdatePasswordForm from '@/components/dashboard/forms/UpdatePasswordForm';
44
import UpdateEmailAddressForm from '@/components/dashboard/forms/UpdateEmailAddressForm';
55
import ConfigureTwoFactorForm from '@/components/dashboard/forms/ConfigureTwoFactorForm';
6-
import styled from 'styled-components';
7-
import { breakpoint } from 'styled-components-breakpoint';
86
import PageContentBlock from '@/components/elements/PageContentBlock';
7+
import tw from 'twin.macro';
8+
import { breakpoint } from '@/theme';
9+
import styled from 'styled-components/macro';
910

1011
const Container = styled.div`
1112
${tw`flex flex-wrap my-10`};
@@ -31,13 +32,13 @@ export default () => {
3132
<UpdatePasswordForm/>
3233
</ContentBox>
3334
<ContentBox
34-
className={'mt-8 md:mt-0 md:ml-8'}
35+
css={tw`mt-8 md:mt-0 md:ml-8`}
3536
title={'Update Email Address'}
3637
showFlashes={'account:email'}
3738
>
3839
<UpdateEmailAddressForm/>
3940
</ContentBox>
40-
<ContentBox className={'xl:ml-8 mt-8 xl:mt-0'} title={'Configure Two Factor'}>
41+
<ContentBox css={tw`xl:ml-8 mt-8 xl:mt-0`} title={'Configure Two Factor'}>
4142
<ConfigureTwoFactorForm/>
4243
</ContentBox>
4344
</Container>

‎resources/scripts/components/dashboard/search/SearchModal.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@ import { Server } from '@/api/server/getServer';
1111
import { ApplicationStore } from '@/state';
1212
import { httpErrorToHuman } from '@/api/http';
1313
import { Link } from 'react-router-dom';
14-
import styled from 'styled-components';
14+
import styled from 'styled-components/macro';
15+
import tw from 'twin.macro';
1516

1617
type Props = RequiredModalProps;
1718

@@ -102,7 +103,7 @@ export default ({ ...props }: Props) => {
102103
</FormikFieldWrapper>
103104
</Form>
104105
{servers.length > 0 &&
105-
<div className={'mt-6'}>
106+
<div css={tw`mt-6`}>
106107
{
107108
servers.map(server => (
108109
<ServerResult
@@ -111,17 +112,17 @@ export default ({ ...props }: Props) => {
111112
onClick={() => props.onDismissed()}
112113
>
113114
<div>
114-
<p className={'text-sm'}>{server.name}</p>
115-
<p className={'mt-1 text-xs text-neutral-400'}>
115+
<p css={tw`text-sm`}>{server.name}</p>
116+
<p css={tw`mt-1 text-xs text-neutral-400`}>
116117
{
117118
server.allocations.filter(alloc => alloc.default).map(allocation => (
118119
<span key={allocation.ip + allocation.port.toString()}>{allocation.alias || allocation.ip}:{allocation.port}</span>
119120
))
120121
}
121122
</p>
122123
</div>
123-
<div className={'flex-1 text-right'}>
124-
<span className={'text-xs py-1 px-2 bg-cyan-800 text-cyan-100 rounded'}>
124+
<div css={tw`flex-1 text-right`}>
125+
<span css={tw`text-xs py-1 px-2 bg-cyan-800 text-cyan-100 rounded`}>
125126
{server.node}
126127
</span>
127128
</div>

‎resources/scripts/components/elements/AceEditor.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import useRouter from 'use-react-router';
33
import { ServerContext } from '@/state/server';
44
import ace, { Editor } from 'brace';
55
import getFileContents from '@/api/server/files/getFileContents';
6-
import styled from 'styled-components';
6+
import styled from 'styled-components/macro';
77

88
// @ts-ignore
99
require('brace/ext/modelist');
@@ -113,7 +113,7 @@ export default ({ style, initialContent, initialModePath, fetchContent, onConten
113113
return (
114114
<EditorContainer style={style}>
115115
<div id={'editor'} ref={ref}/>
116-
<div className={'absolute pin-r pin-b z-50'}>
116+
<div className={'absolute right-0 bottom-0 z-50'}>
117117
<div className={'m-3 rounded bg-neutral-900 border border-black'}>
118118
<select
119119
className={'input-dark'}

‎resources/scripts/components/elements/DropdownMenu.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { useEffect, useRef, useState } from 'react';
22
import { CSSTransition } from 'react-transition-group';
3-
import styled from 'styled-components';
3+
import styled from 'styled-components/macro';
4+
import tw from 'twin.macro';
45

56
interface Props {
67
children: React.ReactNode;
@@ -12,10 +13,7 @@ export const DropdownButtonRow = styled.button<{ danger?: boolean }>`
1213
transition: 150ms all ease;
1314
1415
&:hover {
15-
${props => props.danger
16-
? tw`text-red-700 bg-red-100`
17-
: tw`text-neutral-700 bg-neutral-100`
18-
};
16+
${props => props.danger ? tw`text-red-700 bg-red-100` : tw`text-neutral-700 bg-neutral-100`};
1917
}
2018
`;
2119

‎resources/scripts/components/elements/InputSpinner.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const InputSpinner = ({ visible, children }: { visible: boolean, children: React
1111
appear={true}
1212
classNames={'fade'}
1313
>
14-
<div className={'absolute pin-r h-full flex items-center justify-end pr-3'}>
14+
<div className={'absolute right-0 h-full flex items-center justify-end pr-3'}>
1515
<Spinner size={'tiny'}/>
1616
</div>
1717
</CSSTransition>

0 commit comments

Comments
 (0)