Skynet/misc_pterodactyl-panel
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui: I HATE STYLED-COMPONENTS WITH TYPESCRIPT

Browse source
This commit is contained in:
Matthew Penner 2021-07-22 11:15:27 -06:00
parent 23de3d68f3
commit 361596e051
40 changed files with 180 additions and 147 deletions
Download patch file Download diff file Expand all files Collapse all files

3
resources/scripts/components/MessageBox.tsx
View file

@ -1,6 +1,5 @@
import * as React from 'react';
import tw, { TwStyle } from 'twin.macro';
import styled from 'styled-components/macro';
import tw, { styled, TwStyle } from 'twin.macro';
export type FlashMessageType = 'success' | 'info' | 'warning' | 'error';

3
resources/scripts/components/NavigationBar.tsx
View file

@ -5,8 +5,7 @@ import { faCogs, faLayerGroup, faSignOutAlt, faUserCircle } from '@fortawesome/f
import { useStoreState } from 'easy-peasy';
import { ApplicationStore } from '@/state';
import SearchContainer from '@/components/dashboard/search/SearchContainer';
import tw, { theme } from 'twin.macro';
import styled from 'styled-components/macro';
import tw, { styled, theme } from 'twin.macro';
const Navigation = styled.div`
${tw`w-full bg-neutral-900 shadow-md overflow-x-auto`};

3
resources/scripts/components/admin/AdminCheckbox.tsx
View file

@ -1,7 +1,6 @@
import Input from '@/components/elements/Input';
import React from 'react';
import styled from 'styled-components/macro';
import tw from 'twin.macro';
import tw, { styled } from 'twin.macro';
export const TableCheckbox = styled(Input)`
&& {

3
resources/scripts/components/admin/AdminTable.tsx
View file

@ -4,8 +4,7 @@ import { debounce } from 'debounce';
import React, { useCallback, useState } from 'react';
import { TableCheckbox } from '@/components/admin/AdminCheckbox';
import Spinner from '@/components/elements/Spinner';
import styled from 'styled-components/macro';
import tw from 'twin.macro';
import tw, { styled } from 'twin.macro';
import { PaginatedResult, PaginationDataSet } from '@/api/http';
import { ListContext as TableHooks } from '@/api/admin';

3
resources/scripts/components/admin/SubNavigation.tsx
View file

@ -1,7 +1,6 @@
import React from 'react';
import { NavLink } from 'react-router-dom';
import styled from 'styled-components/macro';
import tw from 'twin.macro';
import tw, { styled } from 'twin.macro';
export const SubNavigation = styled.div`
${tw`flex flex-row items-center flex-shrink-0 h-12 mb-4 border-b border-neutral-700`};

3
resources/scripts/components/auth/LoginFormContainer.tsx
View file

@ -1,9 +1,8 @@
import React, { forwardRef } from 'react';
import { Form } from 'formik';
import styled from 'styled-components/macro';
import { breakpoint } from '@/theme';
import FlashMessageRender from '@/components/FlashMessageRender';
import tw from 'twin.macro';
import tw, { styled } from 'twin.macro';
const Wrapper = styled.div`
${breakpoint('sm')`

3
resources/scripts/components/dashboard/AccountOverviewContainer.tsx
View file

@ -5,9 +5,8 @@ import UpdateEmailAddressForm from '@/components/dashboard/forms/UpdateEmailAddr
import ConfigureTwoFactorForm from '@/components/dashboard/forms/ConfigureTwoFactorForm';
import PageContentBlock from '@/components/elements/PageContentBlock';
import { useLocation } from 'react-router-dom';
import tw from 'twin.macro';
import tw, { styled } from 'twin.macro';
import { breakpoint } from '@/theme';
import styled from 'styled-components/macro';
import MessageBox from '@/components/MessageBox';
const Container = styled.div`

3
resources/scripts/components/dashboard/ServerRow.tsx
View file

@ -5,10 +5,9 @@ import { Link } from 'react-router-dom';
import { Server } from '@/api/server/getServer';
import getServerResourceUsage, { ServerPowerState, ServerStats } from '@/api/server/getServerResourceUsage';
import { bytesToHuman, megabytesToHuman } from '@/helpers';
import tw from 'twin.macro';
import tw, { styled } from 'twin.macro';
import GreyRowBox from '@/components/elements/GreyRowBox';
import Spinner from '@/components/elements/Spinner';
import styled from 'styled-components/macro';
import isEqual from 'react-fast-compare';
// Determines if the current value is in an alarm threshold so we can show it in red rather

3
resources/scripts/components/dashboard/forms/CreateApiKeyForm.tsx
View file

@ -8,10 +8,9 @@ import { ApplicationStore } from '@/state';
import { httpErrorToHuman } from '@/api/http';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import { ApiKey } from '@/api/account/getApiKeys';
import tw from 'twin.macro';
import tw, { styled } from 'twin.macro';
import Button from '@/components/elements/Button';
import Input, { Textarea } from '@/components/elements/Input';
import styled from 'styled-components/macro';
import ApiKeyModal from '@/components/dashboard/ApiKeyModal';
interface Values {

3
resources/scripts/components/dashboard/search/SearchModal.tsx
View file

@ -10,8 +10,7 @@ import getServers from '@/api/getServers';
import { Server } from '@/api/server/getServer';
import { ApplicationStore } from '@/state';
import { Link } from 'react-router-dom';
import styled from 'styled-components/macro';
import tw from 'twin.macro';
import tw, { styled } from 'twin.macro';
import Input from '@/components/elements/Input';
type Props = RequiredModalProps;

5
resources/scripts/components/elements/Button.tsx
View file

@ -1,6 +1,5 @@
import React from 'react';
import styled, { css } from 'styled-components/macro';
import tw from 'twin.macro';
import tw, { css, styled } from 'twin.macro';
import Spinner from '@/components/elements/Spinner';
interface Props {
@ -95,7 +94,7 @@ const Button: React.FC<ComponentProps> = ({ children, isLoading, ...props }) =>
</ButtonStyle>
);
type LinkProps = Omit<JSX.IntrinsicElements['a'], 'ref' | keyof Props> & Props;
type LinkProps = Omit<JSX.IntrinsicElements['a'], keyof JSX.IntrinsicElements['button'] | keyof Props> & Props;
const LinkButton: React.FC<LinkProps> = props => <ButtonStyle as={'a'} {...props}/>;

3
resources/scripts/components/elements/ContentContainer.tsx
View file

@ -1,6 +1,5 @@
import styled from 'styled-components/macro';
import { breakpoint } from '@/theme';
import tw from 'twin.macro';
import tw, { styled } from 'twin.macro';
const ContentContainer = styled.div`
max-width: 1200px;

2
resources/scripts/components/elements/CopyOnClick.tsx
View file

@ -1,7 +1,7 @@
import React, { useCallback, useEffect, useState } from 'react';
import CopyToClipboard from 'react-copy-to-clipboard';
import tw from 'twin.macro';
import styled, { keyframes } from 'styled-components/macro';
import tw from 'twin.macro';
import Fade from '@/components/elements/Fade';
import { SwitchTransition } from 'react-transition-group';

3
resources/scripts/components/elements/DropdownMenu.tsx
View file

@ -1,6 +1,5 @@
import React, { createRef } from 'react';
import styled from 'styled-components/macro';
import tw from 'twin.macro';
import tw, { styled } from 'twin.macro';
import Fade from '@/components/elements/Fade';
interface Props {

3
resources/scripts/components/elements/Editor.tsx
View file

@ -36,8 +36,7 @@ import { toml } from '@codemirror/legacy-modes/mode/toml';
import { xmlLanguage } from '@codemirror/lang-xml';
import { yaml } from '@codemirror/legacy-modes/mode/yaml';
import React, { useCallback, useEffect, useState } from 'react';
import styled from 'styled-components/macro';
import tw, { TwStyle } from 'twin.macro';
import tw, { styled, TwStyle } from 'twin.macro';
import { ayuMirage } from '@/components/elements/EditorTheme';
type EditorMode = LanguageSupport | LezerLanguage | StreamParser<any>;

11
resources/scripts/components/elements/Fade.tsx
View file

@ -1,6 +1,5 @@
import React from 'react';
import tw from 'twin.macro';
import styled from 'styled-components/macro';
import tw, { styled } from 'twin.macro';
import CSSTransition, { CSSTransitionProps } from 'react-transition-group/CSSTransition';
interface Props extends Omit<CSSTransitionProps, 'timeout' | 'classNames'> {
@ -11,19 +10,19 @@ const Container = styled.div<{ timeout: number }>`
.fade-enter, .fade-exit, .fade-appear {
will-change: opacity;
}
.fade-enter, .fade-appear {
${tw`opacity-0`};
&.fade-enter-active, &.fade-appear-active {
${tw`opacity-100 transition-opacity ease-in`};
transition-duration: ${props => props.timeout}ms;
}
}
.fade-exit {
${tw`opacity-100`};
&.fade-exit-active {
${tw`opacity-0 transition-opacity ease-in`};
transition-duration: ${props => props.timeout}ms;

5
resources/scripts/components/elements/GreyRowBox.tsx
View file

@ -1,9 +1,8 @@
import styled from 'styled-components/macro';
import tw from 'twin.macro';
import tw, { styled } from 'twin.macro';
export default styled.div<{ $hoverable?: boolean }>`
${tw`flex rounded no-underline text-neutral-200 items-center bg-neutral-700 p-4 border border-transparent transition-colors duration-150 overflow-hidden`};
${props => props.$hoverable !== false && tw`hover:border-neutral-500`};
& .icon {

3
resources/scripts/components/elements/Input.tsx
View file

@ -1,5 +1,4 @@
import styled, { css } from 'styled-components/macro';
import tw from 'twin.macro';
import tw, { css, styled } from 'twin.macro';
export interface Props {
isLight?: boolean;

5
resources/scripts/components/elements/InputSpinner.tsx
View file

@ -1,13 +1,12 @@
import React from 'react';
import Spinner from '@/components/elements/Spinner';
import Fade from '@/components/elements/Fade';
import tw from 'twin.macro';
import styled, { css } from 'styled-components/macro';
import tw, { css, styled } from 'twin.macro';
import Select from '@/components/elements/Select';
const Container = styled.div<{ visible?: boolean }>`
${tw`relative`};
${props => props.visible && css`
& ${Select} {
background-image: none;

3
resources/scripts/components/elements/Label.tsx
View file

@ -1,5 +1,4 @@
import styled from 'styled-components/macro';
import tw from 'twin.macro';
import tw, { styled } from 'twin.macro';
const Label = styled.label<{ isLight?: boolean }>`
${tw`block text-xs uppercase text-neutral-200 mb-1 sm:mb-2`};

11
resources/scripts/components/elements/Modal.tsx
View file

@ -1,7 +1,6 @@
import React, { useEffect, useMemo, useRef, useState } from 'react';
import Spinner from '@/components/elements/Spinner';
import tw from 'twin.macro';
import styled, { css } from 'styled-components/macro';
import tw, { css, styled } from 'twin.macro';
import { breakpoint } from '@/theme';
import Fade from '@/components/elements/Fade';
import { createPortal } from 'react-dom';
@ -25,7 +24,7 @@ export const ModalMask = styled.div`
background: rgba(0, 0, 0, 0.70);
`;
const ModalContainer = styled.div<{ alignTop?: boolean }>`
const ModalContainer = styled.div<{ alignTop?: boolean }>`
max-width: 95%;
max-height: calc(100vh - 8rem);
${breakpoint('md')`max-width: 75%`};
@ -38,13 +37,13 @@ const ModalContainer = styled.div<{ alignTop?: boolean }>`
`};
margin-bottom: auto;
& > .close-icon {
${tw`absolute right-0 p-2 text-white cursor-pointer opacity-50 transition-all duration-150 ease-linear hover:opacity-100`};
top: -2.5rem;
&:hover {${tw`transform rotate-90`}}
& > svg {
${tw`w-6 h-6`};
}

5
resources/scripts/components/elements/Pagination.tsx
View file

@ -1,7 +1,6 @@
import React from 'react';
import { PaginatedResult } from '@/api/http';
import tw from 'twin.macro';
import styled from 'styled-components/macro';
import tw, { styled } from 'twin.macro';
import Button from '@/components/elements/Button';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faAngleDoubleLeft, faAngleDoubleRight } from '@fortawesome/free-solid-svg-icons';
@ -22,7 +21,7 @@ interface Props<T> {
const Block = styled(Button)`
${tw`p-0 w-10 h-10`}
&:not(:last-of-type) {
${tw`mr-2`};
}

3
resources/scripts/components/elements/ProgressBar.tsx
View file

@ -1,9 +1,8 @@
import React, { useEffect, useRef, useState } from 'react';
import styled from 'styled-components/macro';
import { useStoreActions, useStoreState } from 'easy-peasy';
import { randomInt } from '@/helpers';
import { CSSTransition } from 'react-transition-group';
import tw from 'twin.macro';
import tw, { styled } from 'twin.macro';
const BarFill = styled.div`
${tw`h-full bg-cyan-400`};

3
resources/scripts/components/elements/SearchableSelect.tsx
View file

@ -1,7 +1,6 @@
import React, { createRef, ReactElement, useEffect, useState } from 'react';
import { debounce } from 'debounce';
import styled from 'styled-components/macro';
import tw from 'twin.macro';
import tw, { styled } from 'twin.macro';
import Input from '@/components/elements/Input';
import Label from '@/components/elements/Label';
import InputSpinner from '@/components/elements/InputSpinner';

7
resources/scripts/components/elements/Select.tsx
View file

@ -1,5 +1,4 @@
import styled, { css } from 'styled-components/macro';
import tw from 'twin.macro';
import tw, { css, styled } from 'twin.macro';
interface Props {
hideDropdownArrow?: boolean;
@ -22,11 +21,11 @@ const Select = styled.select<Props>`
&::-ms-expand {
display: none;
}
${props => !props.hideDropdownArrow && css`
${tw`bg-neutral-600 border-neutral-500 text-neutral-200`};
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='%23C3D1DF' d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z'/%3e%3c/svg%3e ");
&:hover:not(:disabled), &:focus {
${tw`border-neutral-400`};
}

8
resources/scripts/components/elements/Spinner.tsx
View file

@ -1,6 +1,6 @@
import React, { Suspense } from 'react';
import styled, { css, keyframes } from 'styled-components/macro';
import tw from 'twin.macro';
import styled, { keyframes } from 'styled-components/macro';
import tw, { css } from 'twin.macro';
export type SpinnerSize = 'small' | 'base' | 'large';
@ -25,12 +25,12 @@ const SpinnerComponent = styled.div<Props>`
border-width: 3px;
border-radius: 50%;
animation: ${spin} 1s cubic-bezier(0.55, 0.25, 0.25, 0.70) infinite;
${props => props.size === 'small' ? tw`w-4 h-4 border-2` : (props.size === 'large' ? css`
${tw`w-16 h-16`};
border-width: 6px;
` : null)};
border-color: ${props => !props.isBlue ? 'rgba(255, 255, 255, 0.2)' : 'hsla(212, 92%, 43%, 0.2)'};
border-top-color: ${props => !props.isBlue ? 'rgb(255, 255, 255)' : 'hsl(212, 92%, 43%)'};
`;

3
resources/scripts/components/elements/SubNavigation.tsx
View file

@ -1,5 +1,4 @@
import styled from 'styled-components/macro';
import tw, { theme } from 'twin.macro';
import tw, { styled, theme } from 'twin.macro';
const SubNavigation = styled.div`
${tw`w-full bg-neutral-700 shadow overflow-x-auto`};

3
resources/scripts/components/elements/Switch.tsx
View file

@ -1,7 +1,6 @@
import React, { useMemo } from 'react';
import styled from 'styled-components/macro';
import v4 from 'uuid/v4';
import tw from 'twin.macro';
import tw, { styled } from 'twin.macro';
import Label from '@/components/elements/Label';
import Input from '@/components/elements/Input';

3
resources/scripts/components/server/Console.tsx
View file

@ -7,9 +7,8 @@ import { WebLinksAddon } from 'xterm-addon-web-links';
import { ScrollDownHelperAddon } from '@/plugins/XtermScrollDownHelperAddon';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import { ServerContext } from '@/state/server';
import styled from 'styled-components/macro';
import { usePermissions } from '@/plugins/usePermissions';
import tw, { theme as th } from 'twin.macro';
import tw, { styled, theme as th } from 'twin.macro';
import 'xterm/css/xterm.css';
import useEventListener from '@/plugins/useEventListener';
import { debounce } from 'debounce';

3
resources/scripts/components/server/files/FileDropdownMenu.tsx
View file

@ -21,11 +21,10 @@ import copyFile from '@/api/server/files/copyFile';
import Can from '@/components/elements/Can';
import getFileDownloadUrl from '@/api/server/files/getFileDownloadUrl';
import useFlash from '@/plugins/useFlash';
import tw from 'twin.macro';
import tw, { styled } from 'twin.macro';
import { FileObject } from '@/api/server/files/loadDirectory';
import useFileManagerSwr from '@/plugins/useFileManagerSwr';
import DropdownMenu from '@/components/elements/DropdownMenu';
import styled from 'styled-components/macro';
import useEventListener from '@/plugins/useEventListener';
import compressFiles from '@/api/server/files/compressFiles';
import decompressFiles from '@/api/server/files/decompressFiles';

3
resources/scripts/components/server/files/FileObjectRow.tsx
View file

@ -7,9 +7,8 @@ import { FileObject } from '@/api/server/files/loadDirectory';
import FileDropdownMenu from '@/components/server/files/FileDropdownMenu';
import { ServerContext } from '@/state/server';
import { NavLink, useRouteMatch } from 'react-router-dom';
import tw from 'twin.macro';
import tw, { styled } from 'twin.macro';
import isEqual from 'react-fast-compare';
import styled from 'styled-components/macro';
import SelectFileCheckbox from '@/components/server/files/SelectFileCheckbox';
import { usePermissions } from '@/plugins/usePermissions';
import { join } from 'path';

7
resources/scripts/components/server/files/SelectFileCheckbox.tsx
View file

@ -1,13 +1,12 @@
import React from 'react';
import tw from 'twin.macro';
import { ServerContext } from '@/state/server';
import styled from 'styled-components/macro';
import tw, { styled } from 'twin.macro';
import Input from '@/components/elements/Input';
import { ServerContext } from '@/state/server';
export const FileActionCheckbox = styled(Input)`
&& {
${tw`border-neutral-500 bg-transparent`};
&:not(:checked) {
${tw`hover:border-neutral-300`};
}

5
resources/scripts/components/server/files/UploadButton.tsx
View file

@ -1,9 +1,8 @@
import axios from 'axios';
import getFileUploadUrl from '@/api/server/files/getFileUploadUrl';
import tw from 'twin.macro';
import tw, { styled } from 'twin.macro';
import Button from '@/components/elements/Button';
import React, { useEffect, useRef, useState } from 'react';
import styled from 'styled-components/macro';
import { ModalMask } from '@/components/elements/Modal';
import Fade from '@/components/elements/Fade';
import useEventListener from '@/plugins/useEventListener';
@ -15,7 +14,7 @@ import { WithClassname } from '@/components/types';
const InnerContainer = styled.div`
max-width: 600px;
${tw`bg-black w-full border-4 border-primary-500 border-dashed rounded p-10 mx-10`}
${tw`bg-black w-full border-4 border-primary-500 border-dashed rounded p-10 mx-10`};
`;
export default ({ className }: WithClassname) => {

3
resources/scripts/components/server/network/AllocationRow.tsx
View file

@ -1,6 +1,6 @@
import React, { memo, useCallback, useState } from 'react';
import isEqual from 'react-fast-compare';
import tw from 'twin.macro';
import tw, { styled } from 'twin.macro';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faNetworkWired } from '@fortawesome/free-solid-svg-icons';
import InputSpinner from '@/components/elements/InputSpinner';
@ -9,7 +9,6 @@ import Can from '@/components/elements/Can';
import Button from '@/components/elements/Button';
import GreyRowBox from '@/components/elements/GreyRowBox';
import { Allocation } from '@/api/server/getServer';
import styled from 'styled-components/macro';
import { debounce } from 'debounce';
import setServerAllocationNotes from '@/api/server/network/setServerAllocationNotes';
import useFlash from '@/plugins/useFlash';

5
resources/scripts/components/server/users/PermissionRow.tsx
View file

@ -1,5 +1,4 @@
import styled from 'styled-components/macro';
import tw from 'twin.macro';
import tw, { styled } from 'twin.macro';
import Checkbox from '@/components/elements/Checkbox';
import React from 'react';
import { useStoreState } from 'easy-peasy';
@ -16,7 +15,7 @@ const Container = styled.label`
${tw`border-neutral-500 bg-neutral-800`};
}
}
&:not(:first-of-type) {
${tw`mt-4 sm:mt-2`};
}