Remove a hilarious number of unused dependencies

package.json

@@ -9,7 +9,6 @@
         "ayu-ace": "^2.0.4",
         "brace": "^0.11.1",
         "chart.js": "^2.8.0",
-        "classnames": "^2.2.6",
         "date-fns": "^2.14.0",
         "easy-peasy": "^3.3.1",
         "events": "^3.0.0",
@@ -33,7 +32,6 @@
         "sockette": "^2.0.6",
         "styled-components": "^5.1.1",
         "styled-components-breakpoint": "^3.0.0-preview.20",
-        "use-react-router": "^1.0.7",
         "uuid": "^3.3.2",
         "xterm": "^3.14.4",
         "xterm-addon-attach": "^0.1.0",
@@ -54,7 +52,6 @@
         "@babel/preset-typescript": "^7.7.4",
         "@babel/runtime": "^7.7.5",
         "@types/chart.js": "^2.8.5",
-        "@types/classnames": "^2.2.8",
         "@types/events": "^3.0.0",
         "@types/feather-icons": "^4.7.0",
         "@types/lodash": "^4.14.119",
@@ -75,10 +72,8 @@
         "@typescript-eslint/parser": "^3.5.0",
         "babel-loader": "^8.0.6",
         "babel-plugin-styled-components": "^1.10.7",
-        "babel-plugin-tailwind-components": "^0.5.10",
         "cross-env": "^7.0.2",
         "css-loader": "^3.2.1",
-        "cssnano": "^4.1.10",
         "eslint": "^7.4.0",
         "eslint-config-standard": "^14.1.1",
         "eslint-plugin-import": "^2.22.0",
@@ -88,20 +83,11 @@
         "eslint-plugin-react-hooks": "^4.0.5",
         "eslint-plugin-standard": "^4.0.1",
         "fork-ts-checker-webpack-plugin": "^5.0.6",
-        "html-webpack-plugin": "^3.2.0",
-        "postcss": "^7.0.24",
-        "postcss-import": "^12.0.1",
-        "postcss-loader": "^3.0.0",
-        "postcss-preset-env": "^6.7.0",
-        "precss": "^4.0.0",
         "redux-devtools-extension": "^2.13.8",
-        "resolve-url-loader": "^3.0.0",
-        "source-map-loader": "^1.0.1",
         "style-loader": "^1.2.1",
         "svg-url-loader": "^6.0.0",
         "tailwindcss": "^1.4.6",
         "terser-webpack-plugin": "^3.0.6",
-        "ts-loader": "^6.2.1",
         "twin.macro": "^1.4.1",
         "typescript": "^3.9.6",
         "typescript-plugin-tw-template": "^2.0.1",
@@ -110,7 +96,6 @@
         "webpack-bundle-analyzer": "^3.8.0",
         "webpack-cli": "^3.3.12",
         "webpack-dev-server": "^3.11.0",
-        "webpack-manifest-plugin": "^2.2.0",
         "yarn-deduplicate": "^1.1.1"
     },
     "scripts": {

resources/scripts/components/auth/LoginCheckpointContainer.tsx

@@ -17,7 +17,7 @@ interface Values {
     recoveryCode: '',
 }
 
-type OwnProps = RouteComponentProps<Record<string, unknown>, StaticContext, { token?: string }>
+type OwnProps = RouteComponentProps<Record<string, string | undefined>, StaticContext, { token?: string }>
 
 type Props = OwnProps & {
     addError: ActionCreator<FlashStore['addError']['payload']>;

resources/scripts/components/auth/ResetPasswordContainer.tsx

@@ -56,6 +56,7 @@ export default ({ match, location }: RouteComponentProps<{ token: string }>) =>
                     .min(8, 'Your new password should be at least 8 characters in length.'),
                 passwordConfirmation: string()
                     .required('Your new password does not match.')
+                    // @ts-ignore
                     .oneOf([ ref('password'), null ], 'Your new password does not match.'),
             })}
         >
@@ -66,7 +67,7 @@ export default ({ match, location }: RouteComponentProps<{ token: string }>) =>
                 >
                     <div>
                         <label>Email</label>
-                        <Input value={email} light disabled/>
+                        <Input value={email} isLight disabled/>
                     </div>
                     <div css={tw`mt-6`}>
                         <Field

resources/scripts/components/elements/FormikFieldWrapper.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { Field, FieldProps } from 'formik';
-import classNames from 'classnames';
 import InputError from '@/components/elements/InputError';
 import Label from '@/components/elements/Label';
 
@@ -18,7 +17,7 @@ const FormikFieldWrapper = ({ id, name, label, className, description, validate,
     <Field name={name} validate={validate}>
         {
             ({ field, form: { errors, touched } }: FieldProps) => (
-                <div className={classNames(className, { 'has-error': touched[field.name] && errors[field.name] })}>
+                <div className={`${className} ${(touched[field.name] && errors[field.name]) ? 'has-error' : undefined}`}>
                     {label && <Label htmlFor={id}>{label}</Label>}
                     {children}
                     <InputError errors={errors} touched={touched} name={field.name}>

resources/scripts/components/screens/ScreenBlock.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 import PageContentBlock from '@/components/elements/PageContentBlock';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faArrowLeft, faSyncAlt } from '@fortawesome/free-solid-svg-icons';
-import classNames from 'classnames';
 import styled, { keyframes } from 'styled-components/macro';
 import tw from 'twin.macro';
+import Button from '@/components/elements/Button';
 
 interface BaseProps {
     title: string;
@@ -30,7 +30,7 @@ const spin = keyframes`
     to { transform: rotate(360deg) }
 `;
 
-const ActionButton = styled.button`
+const ActionButton = styled(Button)`
     ${tw`rounded-full w-8 h-8 flex items-center justify-center`};
 
     &.hover\\:spin:hover {
@@ -46,7 +46,7 @@ export default ({ title, image, message, onBack, onRetry }: Props) => (
                 <div css={tw`absolute left-0 top-0 ml-4 mt-4`}>
                     <ActionButton
                         onClick={() => onRetry ? onRetry() : (onBack ? onBack() : null)}
-                        className={classNames('btn btn-primary', { 'hover:spin': !!onRetry })}
+                        className={onRetry ? 'hover:spin' : undefined}
                     >
                         <FontAwesomeIcon icon={onRetry ? faSyncAlt : faArrowLeft}/>
                     </ActionButton>

resources/scripts/components/server/ServerConsole.tsx

@@ -2,7 +2,6 @@ import React, { lazy, useEffect, useState } from 'react';
 import { ServerContext } from '@/state/server';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCircle, faHdd, faMemory, faMicrochip, faServer } from '@fortawesome/free-solid-svg-icons';
-import classNames from 'classnames';
 import { bytesToHuman } from '@/helpers';
 import SuspenseSpinner from '@/components/elements/SuspenseSpinner';
 import TitledGreyBox from '@/components/elements/TitledGreyBox';
@@ -68,11 +67,10 @@ export default () => {
                         <FontAwesomeIcon
                             icon={faCircle}
                             fixedWidth
-                            className={classNames('mr-1', {
-                                'text-red-500': status === 'offline',
-                                'text-yellow-500': [ 'running', 'offline' ].indexOf(status) < 0,
-                                'text-green-500': status === 'running',
-                            })}
+                            css={[
+                                tw`mr-1`,
+                                status === 'offline' ? tw`text-red-500` : (status === 'running' ? tw`text-green-500` : tw`text-yellow-500`),
+                            ]}
                         />
                         &nbsp;{status}
                     </p>

resources/scripts/components/server/files/FileEditContainer.tsx

@@ -1,14 +1,13 @@
 import React, { lazy, useEffect, useState } from 'react';
 import { ServerContext } from '@/state/server';
 import getFileContents from '@/api/server/files/getFileContents';
-import useRouter from 'use-react-router';
 import { Actions, useStoreActions } from 'easy-peasy';
 import { ApplicationStore } from '@/state';
 import { httpErrorToHuman } from '@/api/http';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 import saveFileContents from '@/api/server/files/saveFileContents';
 import FileManagerBreadcrumbs from '@/components/server/files/FileManagerBreadcrumbs';
-import { useParams } from 'react-router';
+import { useHistory, useLocation, useParams } from 'react-router';
 import FileNameModal from '@/components/server/files/FileNameModal';
 import Can from '@/components/elements/Can';
 import FlashMessageRender from '@/components/FlashMessageRender';
@@ -22,11 +21,13 @@ const LazyAceEditor = lazy(() => import(/* webpackChunkName: "editor" */'@/compo
 export default () => {
     const [ error, setError ] = useState('');
     const { action } = useParams();
-    const { history, location: { hash } } = useRouter();
     const [ loading, setLoading ] = useState(action === 'edit');
     const [ content, setContent ] = useState('');
     const [ modalVisible, setModalVisible ] = useState(false);
 
+    const history = useHistory();
+    const { hash } = useLocation();
+
     const { id, uuid } = ServerContext.useStoreState(state => state.server.data!);
     const { addError, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
 

resources/scripts/components/server/files/FileObjectRow.tsx

@@ -6,14 +6,15 @@ import React from 'react';
 import { FileObject } from '@/api/server/files/loadDirectory';
 import FileDropdownMenu from '@/components/server/files/FileDropdownMenu';
 import { ServerContext } from '@/state/server';
-import { NavLink } from 'react-router-dom';
-import useRouter from 'use-react-router';
+import { NavLink, useHistory, useRouteMatch } from 'react-router-dom';
 import tw from 'twin.macro';
 
 export default ({ file }: { file: FileObject }) => {
     const directory = ServerContext.useStoreState(state => state.files.directory);
     const setDirectory = ServerContext.useStoreActions(actions => actions.files.setDirectory);
-    const { match, history } = useRouter();
+
+    const history = useHistory();
+    const match = useRouteMatch();
 
     return (
         <div

resources/scripts/components/server/users/EditSubuserModal.tsx

@@ -9,7 +9,6 @@ import { ApplicationStore } from '@/state';
 import TitledGreyBox from '@/components/elements/TitledGreyBox';
 import Checkbox from '@/components/elements/Checkbox';
 import styled from 'styled-components/macro';
-import classNames from 'classnames';
 import createOrUpdateSubuser from '@/api/server/users/createOrUpdateSubuser';
 import { ServerContext } from '@/state/server';
 import { httpErrorToHuman } from '@/api/http';
@@ -145,10 +144,11 @@ const EditSubuserModal = forwardRef<HTMLHeadingElement, Props>(({ subuser, ...pr
                             <PermissionLabel
                                 key={`permission_${key}_${pkey}`}
                                 htmlFor={`permission_${key}_${pkey}`}
-                                className={classNames('transition-colors duration-75', {
-                                    'mt-2': index !== 0,
-                                    disabled: !canEditUser || editablePermissions.indexOf(`${key}.${pkey}`) < 0,
-                                })}
+                                css={[
+                                    tw`transition-colors duration-75`,
+                                    index > 0 ? tw`mt-2` : undefined,
+                                ]}
+                                className={(!canEditUser || editablePermissions.indexOf(`${key}.${pkey}`) < 0) ? 'disabled' : undefined}
                             >
                                 <div css={tw`p-2`}>
                                     <Checkbox

resources/scripts/components/server/users/UserRow.tsx

@@ -4,7 +4,6 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faPencilAlt, faUnlockAlt, faUserLock } from '@fortawesome/free-solid-svg-icons';
 import RemoveSubuserButton from '@/components/server/users/RemoveSubuserButton';
 import EditSubuserModal from '@/components/server/users/EditSubuserModal';
-import classNames from 'classnames';
 import Can from '@/components/elements/Can';
 import { useStoreState } from 'easy-peasy';
 import tw from 'twin.macro';
@@ -39,9 +38,8 @@ export default ({ subuser }: Props) => {
                      
                     <FontAwesomeIcon
                         icon={subuser.twoFactorEnabled ? faUserLock : faUnlockAlt}
-                        className={classNames('fa-fw', {
-                            'text-red-400': !subuser.twoFactorEnabled,
-                        })}
+                        fixedWidth
+                        css={!subuser.twoFactorEnabled ? tw`text-red-400` : undefined}
                     />
                     &nbsp;
                 </p>
@@ -56,9 +54,10 @@ export default ({ subuser }: Props) => {
             <button
                 type={'button'}
                 aria-label={'Edit subuser'}
-                className={classNames('block text-sm p-2 text-neutral-500 hover:text-neutral-100 transition-colors duration-150 mx-4', {
-                    hidden: subuser.uuid === uuid,
-                })}
+                css={[
+                    tw`block text-sm p-2 text-neutral-500 hover:text-neutral-100 transition-colors duration-150 mx-4`,
+                    subuser.uuid === uuid ? tw`hidden` : undefined,
+                ]}
                 onClick={() => setVisible(true)}
             >
                 <FontAwesomeIcon icon={faPencilAlt}/>