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

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';