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

React 18 and Vite (#4510)

Browse source
This commit is contained in:
Matthew Penner 2022-11-25 13:25:03 -07:00 • committed by GitHub
parent 1bb1b13f6d
commit 21613fa602
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
244 changed files with 4547 additions and 8933 deletions
Download patch file Download diff file Expand all files Collapse all files

28
resources/scripts/components/elements/AuthenticatedRoute.tsx
View file

@ -1,16 +1,18 @@
import React from 'react';
import { Redirect, Route, RouteProps } from 'react-router';
import type { ReactNode } from 'react';
import { Navigate, useLocation } from 'react-router-dom';
import { useStoreState } from '@/state/hooks';
export default ({ children, ...props }: Omit<RouteProps, 'render'>) => {
const isAuthenticated = useStoreState((state) => !!state.user.data?.uuid);
function AuthenticatedRoute({ children }: { children?: ReactNode }): JSX.Element {
const isAuthenticated = useStoreState(state => !!state.user.data?.uuid);
return (
<Route
{...props}
render={({ location }) =>
isAuthenticated ? children : <Redirect to={{ pathname: '/auth/login', state: { from: location } }} />
}
/>
);
};
const location = useLocation();
if (isAuthenticated) {
return <>{children}</>;
}
return <Navigate to="/auth/login" state={{ from: location.pathname }} />;
}
export default AuthenticatedRoute;

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

@ -1,5 +1,5 @@
import React from 'react';
import styled, { css } from 'styled-components/macro';
import * as React from 'react';
import styled, { css } from 'styled-components';
import tw from 'twin.macro';
import Spinner from '@/components/elements/Spinner';
@ -13,17 +13,17 @@ interface Props {
const ButtonStyle = styled.button<Omit<Props, 'isLoading'>>`
${tw`relative inline-block rounded p-2 uppercase tracking-wide text-sm transition-all duration-150 border`};
${(props) =>
${props =>
((!props.isSecondary && !props.color) || props.color === 'primary') &&
css<Props>`
${(props) => !props.isSecondary && tw`bg-primary-500 border-primary-600 border text-primary-50`};
${props => !props.isSecondary && tw`bg-primary-500 border-primary-600 border text-primary-50`};
&:hover:not(:disabled) {
${tw`bg-primary-600 border-primary-700`};
}
`};
${(props) =>
${props =>
props.color === 'grey' &&
css`
${tw`border-neutral-600 bg-neutral-500 text-neutral-50`};
@ -33,7 +33,7 @@ const ButtonStyle = styled.button<Omit<Props, 'isLoading'>>`
}
`};
${(props) =>
${props =>
props.color === 'green' &&
css<Props>`
${tw`border-green-600 bg-green-500 text-green-50`};
@ -42,7 +42,7 @@ const ButtonStyle = styled.button<Omit<Props, 'isLoading'>>`
${tw`bg-green-600 border-green-700`};
}
${(props) =>
${props =>
props.isSecondary &&
css`
&:active:not(:disabled) {
@ -51,7 +51,7 @@ const ButtonStyle = styled.button<Omit<Props, 'isLoading'>>`
`};
`};
${(props) =>
${props =>
props.color === 'red' &&
css<Props>`
${tw`border-red-600 bg-red-500 text-red-50`};
@ -60,7 +60,7 @@ const ButtonStyle = styled.button<Omit<Props, 'isLoading'>>`
${tw`bg-red-600 border-red-700`};
}
${(props) =>
${props =>
props.isSecondary &&
css`
&:active:not(:disabled) {
@ -69,21 +69,21 @@ const ButtonStyle = styled.button<Omit<Props, 'isLoading'>>`
`};
`};
${(props) => props.size === 'xsmall' && tw`px-2 py-1 text-xs`};
${(props) => (!props.size || props.size === 'small') && tw`px-4 py-2`};
${(props) => props.size === 'large' && tw`p-4 text-sm`};
${(props) => props.size === 'xlarge' && tw`p-4 w-full`};
${props => props.size === 'xsmall' && tw`px-2 py-1 text-xs`};
${props => (!props.size || props.size === 'small') && tw`px-4 py-2`};
${props => props.size === 'large' && tw`p-4 text-sm`};
${props => props.size === 'xlarge' && tw`p-4 w-full`};
${(props) =>
${props =>
props.isSecondary &&
css<Props>`
${tw`border-neutral-600 bg-transparent text-neutral-200`};
&:hover:not(:disabled) {
${tw`border-neutral-500 text-neutral-100`};
${(props) => props.color === 'red' && tw`bg-red-500 border-red-600 text-red-50`};
${(props) => props.color === 'primary' && tw`bg-primary-500 border-primary-600 text-primary-50`};
${(props) => props.color === 'green' && tw`bg-green-500 border-green-600 text-green-50`};
${props => props.color === 'red' && tw`bg-red-500 border-red-600 text-red-50`};
${props => props.color === 'primary' && tw`bg-primary-500 border-primary-600 text-primary-50`};
${props => props.color === 'green' && tw`bg-green-500 border-green-600 text-green-50`};
}
`};
@ -108,7 +108,7 @@ const Button: React.FC<ComponentProps> = ({ children, isLoading, ...props }) =>
type LinkProps = Omit<JSX.IntrinsicElements['a'], 'ref' | keyof Props> & Props;
const LinkButton: React.FC<LinkProps> = (props) => <ButtonStyle as={'a'} {...props} />;
const LinkButton: React.FC<LinkProps> = props => <ButtonStyle as={'a'} {...props} />;
export { LinkButton, ButtonStyle };
export default Button;

21
resources/scripts/components/elements/Can.tsx
View file

@ -1,24 +1,25 @@
import React, { memo } from 'react';
import { usePermissions } from '@/plugins/usePermissions';
import type { ReactNode } from 'react';
import { memo } from 'react';
import isEqual from 'react-fast-compare';
import { usePermissions } from '@/plugins/usePermissions';
interface Props {
action: string | string[];
matchAny?: boolean;
renderOnError?: React.ReactNode | null;
children: React.ReactNode;
renderOnError?: ReactNode | null;
children: ReactNode;
}
const Can = ({ action, matchAny = false, renderOnError, children }: Props) => {
function Can({ action, matchAny = false, renderOnError, children }: Props) {
const can = usePermissions(action);
return (
<>
{(matchAny && can.filter((p) => p).length > 0) || (!matchAny && can.every((p) => p))
? children
: renderOnError}
{(matchAny && can.filter(p => p).length > 0) || (!matchAny && can.every(p => p)) ? children : renderOnError}
</>
);
};
}
export default memo(Can, isEqual);
const MemoizedCan = memo(Can, isEqual);
export default MemoizedCan;

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

@ -1,4 +1,3 @@
import React from 'react';
import { Field, FieldProps } from 'formik';
import Input from '@/components/elements/Input';
@ -29,7 +28,7 @@ const Checkbox = ({ name, value, className, ...props }: Props & InputProps) => (
type={'checkbox'}
checked={(field.value || []).includes(value)}
onClick={() => form.setFieldTouched(field.name, true)}
onChange={(e) => {
onChange={e => {
const set = new Set(field.value);
set.has(value) ? set.delete(value) : set.add(value);

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

@ -1,4 +1,4 @@
import React from 'react';
import * as React from 'react';
import classNames from 'classnames';
interface CodeProps {

21
resources/scripts/components/elements/CodemirrorEditor.tsx
View file

@ -1,7 +1,9 @@
import React, { useCallback, useEffect, useState } from 'react';
import CodeMirror from 'codemirror';
import styled from 'styled-components/macro';
import type { CSSProperties } from 'react';
import { useCallback, useEffect, useState } from 'react';
import styled from 'styled-components';
import tw from 'twin.macro';
import modes from '@/modes';
require('codemirror/lib/codemirror.css');
@ -106,7 +108,7 @@ const EditorContainer = styled.div`
`;
export interface Props {
style?: React.CSSProperties;
style?: CSSProperties;
initialContent?: string;
mode: string;
filename?: string;
@ -119,7 +121,7 @@ const findModeByFilename = (filename: string) => {
for (let i = 0; i < modes.length; i++) {
const info = modes[i];
if (info.file && info.file.test(filename)) {
if (info?.file !== undefined && info.file.test(filename)) {
return info;
}
}
@ -130,7 +132,7 @@ const findModeByFilename = (filename: string) => {
if (ext) {
for (let i = 0; i < modes.length; i++) {
const info = modes[i];
if (info.ext) {
if (info?.ext !== undefined) {
for (let j = 0; j < info.ext.length; j++) {
if (info.ext[j] === ext) {
return info;
@ -146,10 +148,12 @@ const findModeByFilename = (filename: string) => {
export default ({ style, initialContent, filename, mode, fetchContent, onContentSaved, onModeChanged }: Props) => {
const [editor, setEditor] = useState<CodeMirror.Editor>();
const ref = useCallback((node) => {
if (!node) return;
const ref = useCallback<(_?: unknown) => void>(node => {
if (node === undefined) {
return;
}
const e = CodeMirror.fromTextArea(node, {
const e = CodeMirror.fromTextArea(node as HTMLTextAreaElement, {
mode: 'text/plain',
theme: 'ayu-mirage',
indentUnit: 4,
@ -158,7 +162,6 @@ export default ({ style, initialContent, filename, mode, fetchContent, onContent
indentWithTabs: false,
lineWrapping: true,
lineNumbers: true,
foldGutter: true,
fixedGutter: true,
scrollbarStyle: 'overlay',
coverGutterNextToScrollbar: false,

25
resources/scripts/components/elements/ConfirmationModal.tsx
View file

@ -1,23 +1,28 @@
import React, { useContext } from 'react';
import type { ReactNode } from 'react';
import { useContext } from 'react';
import tw from 'twin.macro';
import Button from '@/components/elements/Button';
import asModal from '@/hoc/asModal';
import ModalContext from '@/context/ModalContext';
type Props = {
import Button from '@/components/elements/Button';
import ModalContext from '@/context/ModalContext';
import asModal from '@/hoc/asModal';
interface Props {
children: ReactNode;
title: string;
buttonText: string;
onConfirmed: () => void;
showSpinnerOverlay?: boolean;
};
}
const ConfirmationModal: React.FC<Props> = ({ title, children, buttonText, onConfirmed }) => {
function ConfirmationModal({ title, children, buttonText, onConfirmed }: Props) {
const { dismiss } = useContext(ModalContext);
return (
<>
<h2 css={tw`text-2xl mb-6`}>{title}</h2>
<div css={tw`text-neutral-300`}>{children}</div>
<div css={tw`flex flex-wrap items-center justify-end mt-8`}>
<Button isSecondary onClick={() => dismiss()} css={tw`w-full sm:w-auto border-transparent`}>
Cancel
@ -28,10 +33,8 @@ const ConfirmationModal: React.FC<Props> = ({ title, children, buttonText, onCon
</div>
</>
);
};
}
ConfirmationModal.displayName = 'ConfirmationModal';
export default asModal<Props>((props) => ({
export default asModal<Props>(props => ({
showSpinnerOverlay: props.showSpinnerOverlay,
}))(ConfirmationModal);

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

@ -1,4 +1,4 @@
import React from 'react';
import * as React from 'react';
import FlashMessageRender from '@/components/FlashMessageRender';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import tw from 'twin.macro';

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

@ -1,4 +1,4 @@
import styled from 'styled-components/macro';
import styled from 'styled-components';
import { breakpoint } from '@/theme';
import tw from 'twin.macro';

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

@ -1,13 +1,15 @@
import React, { useEffect, useState } from 'react';
import Fade from '@/components/elements/Fade';
import Portal from '@/components/elements/Portal';
import copy from 'copy-to-clipboard';
import classNames from 'classnames';
import copy from 'copy-to-clipboard';
import type { MouseEvent, ReactNode } from 'react';
import { Children, cloneElement, isValidElement, useEffect, useState } from 'react';
import Portal from '@/components/elements/Portal';
import FadeTransition from '@/components/elements/transitions/FadeTransition';
interface CopyOnClickProps {
text: string | number | null | undefined;
showInNotification?: boolean;
children: React.ReactNode;
children: ReactNode;
}
const CopyOnClick = ({ text, showInNotification = true, children }: CopyOnClickProps) => {
@ -25,15 +27,16 @@ const CopyOnClick = ({ text, showInNotification = true, children }: CopyOnClickP
};
}, [copied]);
if (!React.isValidElement(children)) {
if (!isValidElement(children)) {
throw new Error('Component passed to <CopyOnClick/> must be a valid React element.');
}
const child = !text
? React.Children.only(children)
: React.cloneElement(React.Children.only(children), {
? Children.only(children)
: cloneElement(Children.only(children), {
// @ts-expect-error I don't know
className: classNames(children.props.className || '', 'cursor-pointer'),
onClick: (e: React.MouseEvent<HTMLElement>) => {
onClick: (e: MouseEvent<HTMLElement>) => {
copy(String(text));
setCopied(true);
if (typeof children.props.onClick === 'function') {
@ -46,9 +49,9 @@ const CopyOnClick = ({ text, showInNotification = true, children }: CopyOnClickP
<>
{copied && (
<Portal>
<Fade in appear timeout={250} key={copied ? 'visible' : 'invisible'}>
<div className={'fixed z-50 bottom-0 right-0 m-4'}>
<div className={'rounded-md py-3 px-4 text-gray-200 bg-neutral-600/95 shadow'}>
<FadeTransition show duration="duration-250" key={copied ? 'visible' : 'invisible'}>
<div className="fixed z-50 bottom-0 right-0 m-4">
<div className="rounded-md py-3 px-4 text-gray-200 bg-neutral-600/95 shadow">
<p>
{showInNotification
? `Copied "${String(text)}" to clipboard.`
@ -56,7 +59,7 @@ const CopyOnClick = ({ text, showInNotification = true, children }: CopyOnClickP
</p>
</div>
</div>
</Fade>
</FadeTransition>
</Portal>
)}
{child}

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

@ -1,11 +1,13 @@
import React, { createRef } from 'react';
import styled from 'styled-components/macro';
import type { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
import { createRef, PureComponent } from 'react';
import styled from 'styled-components';
import tw from 'twin.macro';
import Fade from '@/components/elements/Fade';
import FadeTransition from '@/components/elements/transitions/FadeTransition';
interface Props {
children: React.ReactNode;
renderToggle: (onClick: (e: React.MouseEvent<any, MouseEvent>) => void) => React.ReactChild;
children: ReactNode;
renderToggle: (onClick: (e: ReactMouseEvent<unknown>) => void) => any;
}
export const DropdownButtonRow = styled.button<{ danger?: boolean }>`
@ -13,7 +15,7 @@ export const DropdownButtonRow = styled.button<{ danger?: boolean }>`
transition: 150ms all ease;
&:hover {
${(props) => (props.danger ? tw`text-red-700 bg-red-100` : tw`text-neutral-700 bg-neutral-100`)};
${props => (props.danger ? tw`text-red-700 bg-red-100` : tw`text-neutral-700 bg-neutral-100`)};
}
`;
@ -22,19 +24,19 @@ interface State {
visible: boolean;
}
class DropdownMenu extends React.PureComponent<Props, State> {
class DropdownMenu extends PureComponent<Props, State> {
menu = createRef<HTMLDivElement>();
state: State = {
override state: State = {
posX: 0,
visible: false,
};
componentWillUnmount() {
override componentWillUnmount() {
this.removeListeners();
}
componentDidUpdate(prevProps: Readonly<Props>, prevState: Readonly<State>) {
override componentDidUpdate(_prevProps: Readonly<Props>, prevState: Readonly<State>) {
const menu = this.menu.current;
if (this.state.visible && !prevState.visible && menu) {
@ -48,19 +50,21 @@ class DropdownMenu extends React.PureComponent<Props, State> {
}
}
removeListeners = () => {
removeListeners() {
document.removeEventListener('click', this.windowListener);
document.removeEventListener('contextmenu', this.contextMenuListener);
};
}
onClickHandler = (e: React.MouseEvent<any, MouseEvent>) => {
onClickHandler(e: ReactMouseEvent<unknown>) {
e.preventDefault();
this.triggerMenu(e.clientX);
};
}
contextMenuListener = () => this.setState({ visible: false });
contextMenuListener() {
this.setState({ visible: false });
}
windowListener = (e: MouseEvent) => {
windowListener(e: MouseEvent): any {
const menu = this.menu.current;
if (e.button === 2 || !this.state.visible || !menu) {
@ -74,22 +78,24 @@ class DropdownMenu extends React.PureComponent<Props, State> {
if (e.target !== menu && !menu.contains(e.target as Node)) {
this.setState({ visible: false });
}
};
}
triggerMenu = (posX: number) =>
this.setState((s) => ({
triggerMenu(posX: number) {
this.setState(s => ({
posX: !s.visible ? posX : s.posX,
visible: !s.visible,
}));
}
render() {
override render() {
return (
<div>
{this.props.renderToggle(this.onClickHandler)}
<Fade timeout={150} in={this.state.visible} unmountOnExit>
<FadeTransition duration="duration-150" show={this.state.visible} appear unmount>
<div
ref={this.menu}
onClick={(e) => {
onClick={e => {
e.stopPropagation();
this.setState({ visible: false });
}}
@ -98,7 +104,7 @@ class DropdownMenu extends React.PureComponent<Props, State> {
>
{this.props.children}
</div>
</Fade>
</FadeTransition>
</div>
);
}

22
resources/scripts/components/elements/ErrorBoundary.tsx
View file

@ -1,15 +1,20 @@
import React from 'react';
import tw from 'twin.macro';
import Icon from '@/components/elements/Icon';
import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
import type { ReactNode } from 'react';
import { Component } from 'react';
import tw from 'twin.macro';
import Icon from '@/components/elements/Icon';
interface Props {
children?: ReactNode;
}
interface State {
hasError: boolean;
}
// eslint-disable-next-line @typescript-eslint/ban-types
class ErrorBoundary extends React.Component<{}, State> {
state: State = {
class ErrorBoundary extends Component<Props, State> {
override state: State = {
hasError: false,
};
@ -17,15 +22,16 @@ class ErrorBoundary extends React.Component<{}, State> {
return { hasError: true };
}
componentDidCatch(error: Error) {
override componentDidCatch(error: Error) {
console.error(error);
}
render() {
override render() {
return this.state.hasError ? (
<div css={tw`flex items-center justify-center w-full my-4`}>
<div css={tw`flex items-center bg-neutral-900 rounded p-3 text-red-500`}>
<Icon icon={faExclamationTriangle} css={tw`h-4 w-auto mr-2`} />
<p css={tw`text-sm text-neutral-100`}>
An error was encountered by the application while rendering this view. Try refreshing the page.
</p>

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

@ -1,47 +0,0 @@
import React from 'react';
import tw from 'twin.macro';
import styled from 'styled-components/macro';
import CSSTransition, { CSSTransitionProps } from 'react-transition-group/CSSTransition';
interface Props extends Omit<CSSTransitionProps, 'timeout' | 'classNames'> {
timeout: number;
}
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;
}
}
`;
const Fade: React.FC<Props> = ({ timeout, children, ...props }) => (
<Container timeout={timeout}>
<CSSTransition timeout={timeout} classNames={'fade'} {...props}>
{children}
</CSSTransition>
</Container>
);
Fade.displayName = 'Fade';
export default Fade;

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

@ -1,4 +1,5 @@
import React, { forwardRef } from 'react';
import { forwardRef } from 'react';
import * as React from 'react';
import { Field as FormikField, FieldProps } from 'formik';
import Input from '@/components/elements/Input';
import Label from '@/components/elements/Label';
@ -41,7 +42,7 @@ const Field = forwardRef<HTMLInputElement, Props>(
</div>
)}
</FormikField>
)
),
);
Field.displayName = 'Field';

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

@ -1,4 +1,4 @@
import React from 'react';
import * as React from 'react';
import { Field, FieldProps } from 'formik';
import InputError from '@/components/elements/InputError';
import Label from '@/components/elements/Label';

1
resources/scripts/components/elements/FormikSwitch.tsx
View file

@ -1,4 +1,3 @@
import React from 'react';
import FormikFieldWrapper from '@/components/elements/FormikFieldWrapper';
import { Field, FieldProps } from 'formik';
import Switch, { SwitchProps } from '@/components/elements/Switch';

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

@ -1,10 +1,10 @@
import styled from 'styled-components/macro';
import styled from 'styled-components';
import tw 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`};
${props => props.$hoverable !== false && tw`hover:border-neutral-500`};
& .icon {
${tw`rounded-full w-16 flex items-center justify-center bg-neutral-500 p-3`};

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

@ -1,4 +1,4 @@
import React, { CSSProperties } from 'react';
import { CSSProperties } from 'react';
import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
import tw from 'twin.macro';

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

@ -1,4 +1,4 @@
import styled, { css } from 'styled-components/macro';
import styled, { css } from 'styled-components';
import tw from 'twin.macro';
export interface Props {
@ -45,7 +45,7 @@ const inputStyle = css<Props>`
& + .input-help {
${tw`mt-1 text-xs`};
${(props) => (props.hasError ? tw`text-red-200` : tw`text-neutral-200`)};
${props => (props.hasError ? tw`text-red-200` : tw`text-neutral-200`)};
}
&:required,
@ -55,15 +55,15 @@ const inputStyle = css<Props>`
&:not(:disabled):not(:read-only):focus {
${tw`shadow-md border-primary-300 ring-2 ring-primary-400 ring-opacity-50`};
${(props) => props.hasError && tw`border-red-300 ring-red-200`};
${props => props.hasError && tw`border-red-300 ring-red-200`};
}
&:disabled {
${tw`opacity-75`};
}
${(props) => props.isLight && light};
${(props) => props.hasError && tw`text-red-100 border-red-400 hover:border-red-300`};
${props => props.isLight && light};
${props => props.hasError && tw`text-red-100 border-red-400 hover:border-red-300`};
`;
const Input = styled.input<Props>`

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

@ -1,4 +1,3 @@
import React from 'react';
import { FormikErrors, FormikTouched } from 'formik';
import tw from 'twin.macro';
import { capitalize } from '@/lib/strings';
@ -15,7 +14,7 @@ const InputError = ({ errors, touched, name, children }: Props) =>
<p css={tw`text-xs text-red-400 pt-2`}>
{typeof errors[name] === 'string'
? capitalize(errors[name] as string)
: capitalize((errors[name] as unknown as string[])[0])}
: capitalize((errors[name] as unknown as string[])[0] ?? '')}
</p>
) : (
<>{children ? <p css={tw`text-xs text-neutral-400 pt-2`}>{children}</p> : null}</>

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

@ -1,14 +1,15 @@
import React from 'react';
import Spinner from '@/components/elements/Spinner';
import Fade from '@/components/elements/Fade';
import type { ReactNode } from 'react';
import styled, { css } from 'styled-components';
import tw from 'twin.macro';
import styled, { css } from 'styled-components/macro';
import Select from '@/components/elements/Select';
import Spinner from '@/components/elements/Spinner';
import FadeTransition from '@/components/elements/transitions/FadeTransition';
const Container = styled.div<{ visible?: boolean }>`
${tw`relative`};
${(props) =>
${props =>
props.visible &&
css`
& ${Select} {
@ -17,15 +18,18 @@ const Container = styled.div<{ visible?: boolean }>`
`};
`;
const InputSpinner = ({ visible, children }: { visible: boolean; children: React.ReactNode }) => (
<Container visible={visible}>
<Fade appear unmountOnExit in={visible} timeout={150}>
<div css={tw`absolute right-0 h-full flex items-center justify-end pr-3`}>
<Spinner size={'small'} />
</div>
</Fade>
{children}
</Container>
);
function InputSpinner({ visible, children }: { visible: boolean; children: ReactNode }) {
return (
<Container visible={visible}>
<FadeTransition show={visible} duration="duration-150" appear unmount>
<div css={tw`absolute right-0 h-full flex items-center justify-end pr-3`}>
<Spinner size="small" />
</div>
</FadeTransition>
{children}
</Container>
);
}
export default InputSpinner;

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

@ -1,9 +1,9 @@
import styled from 'styled-components/macro';
import styled from 'styled-components';
import tw from 'twin.macro';
const Label = styled.label<{ isLight?: boolean }>`
${tw`block text-xs uppercase text-neutral-200 mb-1 sm:mb-2`};
${(props) => props.isLight && tw`text-neutral-700`};
${props => props.isLight && tw`text-neutral-700`};
`;
export default Label;

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

@ -1,12 +1,16 @@
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 { breakpoint } from '@/theme';
import Fade from '@/components/elements/Fade';
import type { ReactNode } from 'react';
import { Fragment, useEffect, useMemo, useRef, useState } from 'react';
import { createPortal } from 'react-dom';
import styled, { css } from 'styled-components';
import tw from 'twin.macro';
import Spinner from '@/components/elements/Spinner';
import { breakpoint } from '@/theme';
import FadeTransition from '@/components/elements/transitions/FadeTransition';
export interface RequiredModalProps {
children?: ReactNode;
visible: boolean;
onDismissed: () => void;
appear?: boolean;
@ -32,7 +36,7 @@ const ModalContainer = styled.div<{ alignTop?: boolean }>`
${breakpoint('lg')`max-width: 50%`};
${tw`relative flex flex-col w-full m-auto`};
${(props) =>
${props =>
props.alignTop &&
css`
margin-top: 20%;
@ -55,7 +59,7 @@ const ModalContainer = styled.div<{ alignTop?: boolean }>`
}
`;
const Modal: React.FC<ModalProps> = ({
function Modal({
visible,
appear,
dismissable,
@ -65,7 +69,7 @@ const Modal: React.FC<ModalProps> = ({
closeOnEscape = true,
onDismissed,
children,
}) => {
}: ModalProps) {
const [render, setRender] = useState(visible);
const isDismissable = useMemo(() => {
@ -85,14 +89,20 @@ const Modal: React.FC<ModalProps> = ({
};
}, [isDismissable, closeOnEscape, render]);
useEffect(() => setRender(visible), [visible]);
useEffect(() => {
setRender(visible);
if (!visible) {
onDismissed();
}
}, [visible]);
return (
<Fade in={render} timeout={150} appear={appear || true} unmountOnExit onExited={() => onDismissed()}>
<FadeTransition as={Fragment} show={render} duration="duration-150" appear={appear ?? true} unmount>
<ModalMask
onClick={(e) => e.stopPropagation()}
onContextMenu={(e) => e.stopPropagation()}
onMouseDown={(e) => {
onClick={e => e.stopPropagation()}
onContextMenu={e => e.stopPropagation()}
onMouseDown={e => {
if (isDismissable && closeOnBackground) {
e.stopPropagation();
if (e.target === e.currentTarget) {
@ -119,16 +129,16 @@ const Modal: React.FC<ModalProps> = ({
</svg>
</div>
)}
{showSpinnerOverlay && (
<Fade timeout={150} appear in>
<div
css={tw`absolute w-full h-full rounded flex items-center justify-center`}
style={{ background: 'hsla(211, 10%, 53%, 0.35)', zIndex: 9999 }}
>
<Spinner />
</div>
</Fade>
)}
<FadeTransition duration="duration-150" show={showSpinnerOverlay ?? false} appear>
<div
css={tw`absolute w-full h-full rounded flex items-center justify-center`}
style={{ background: 'hsla(211, 10%, 53%, 0.35)', zIndex: 9999 }}
>
<Spinner />
</div>
</FadeTransition>
<div
css={tw`bg-neutral-800 p-3 sm:p-4 md:p-6 rounded shadow-md overflow-y-scroll transition-all duration-150`}
>
@ -136,14 +146,14 @@ const Modal: React.FC<ModalProps> = ({
</div>
</ModalContainer>
</ModalMask>
</Fade>
</FadeTransition>
);
};
}
const PortaledModal: React.FC<ModalProps> = ({ children, ...props }) => {
function PortaledModal({ children, ...props }: ModalProps): JSX.Element {
const element = useRef(document.getElementById('modal-portal'));
return createPortal(<Modal {...props}>{children}</Modal>, element.current!);
};
}
export default PortaledModal;

54
resources/scripts/components/elements/PageContentBlock.tsx
View file

@ -1,16 +1,19 @@
import React, { useEffect } from 'react';
import ContentContainer from '@/components/elements/ContentContainer';
import { CSSTransition } from 'react-transition-group';
import type { ReactNode } from 'react';
import { useEffect } from 'react';
import tw from 'twin.macro';
import ContentContainer from '@/components/elements/ContentContainer';
import FlashMessageRender from '@/components/FlashMessageRender';
export interface PageContentBlockProps {
children?: ReactNode;
title?: string;
className?: string;
showFlashKey?: string;
}
const PageContentBlock: React.FC<PageContentBlockProps> = ({ title, showFlashKey, className, children }) => {
function PageContentBlock({ title, showFlashKey, className, children }: PageContentBlockProps) {
useEffect(() => {
if (title) {
document.title = title;
@ -18,28 +21,27 @@ const PageContentBlock: React.FC<PageContentBlockProps> = ({ title, showFlashKey
}, [title]);
return (
<CSSTransition timeout={150} classNames={'fade'} appear in>
<>
<ContentContainer css={tw`my-4 sm:my-10`} className={className}>
{showFlashKey && <FlashMessageRender byKey={showFlashKey} css={tw`mb-4`} />}
{children}
</ContentContainer>
<ContentContainer css={tw`mb-4`}>
<p css={tw`text-center text-neutral-500 text-xs`}>
<a
rel={'noopener nofollow noreferrer'}
href={'https://pterodactyl.io'}
target={'_blank'}
css={tw`no-underline text-neutral-500 hover:text-neutral-300`}
>
Pterodactyl&reg;
</a>
&nbsp;&copy; 2015 - {new Date().getFullYear()}
</p>
</ContentContainer>
</>
</CSSTransition>
<>
<ContentContainer css={tw`my-4 sm:my-10`} className={className}>
{showFlashKey && <FlashMessageRender byKey={showFlashKey} css={tw`mb-4`} />}
{children}
</ContentContainer>
<ContentContainer css={tw`mb-4`}>
<p css={tw`text-center text-neutral-500 text-xs`}>
<a
rel={'noopener nofollow noreferrer'}
href={'https://pterodactyl.io'}
target={'_blank'}
css={tw`no-underline text-neutral-500 hover:text-neutral-300`}
>
Pterodactyl&reg;
</a>
&nbsp;&copy; 2015 - {new Date().getFullYear()}
</p>
</ContentContainer>
</>
);
};
}
export default PageContentBlock;

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

@ -1,7 +1,7 @@
import React from 'react';
import * as React from 'react';
import { PaginatedResult } from '@/api/http';
import tw from 'twin.macro';
import styled from 'styled-components/macro';
import styled from 'styled-components';
import Button from '@/components/elements/Button';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faAngleDoubleLeft, faAngleDoubleRight } from '@fortawesome/free-solid-svg-icons';
@ -48,12 +48,12 @@ function Pagination<T>({ data: { items, pagination }, onPageSelect, children }:
{children({ items, isFirstPage, isLastPage })}
{pages.length > 1 && (
<div css={tw`mt-4 flex justify-center`}>
{pages[0] > 1 && !isFirstPage && (
{(pages?.[0] ?? 0) > 1 && !isFirstPage && (
<Block isSecondary color={'primary'} onClick={() => onPageSelect(1)}>
<FontAwesomeIcon icon={faAngleDoubleLeft} />
</Block>
)}
{pages.map((i) => (
{pages.map(i => (
<Block
isSecondary={pagination.currentPage !== i}
color={'primary'}
@ -63,7 +63,7 @@ function Pagination<T>({ data: { items, pagination }, onPageSelect, children }:
{i}
</Block>
))}
{pages[4] < pagination.totalPages && !isLastPage && (
{(pages?.[4] ?? 0) < pagination.totalPages && !isLastPage && (
<Block isSecondary color={'primary'} onClick={() => onPageSelect(pagination.totalPages)}>
<FontAwesomeIcon icon={faAngleDoubleRight} />
</Block>

48
resources/scripts/components/elements/PermissionRoute.tsx
View file

@ -1,28 +1,26 @@
import React from 'react';
import { Route } from 'react-router-dom';
import { RouteProps } from 'react-router';
import Can from '@/components/elements/Can';
import { ServerError } from '@/components/elements/ScreenBlock';
import type { ReactNode } from 'react';
interface Props extends Omit<RouteProps, 'path'> {
path: string;
permission: string | string[] | null;
import { ServerError } from '@/components/elements/ScreenBlock';
import { usePermissions } from '@/plugins/usePermissions';
interface Props {
children?: ReactNode;
permission?: string | string[];
}
export default ({ permission, children, ...props }: Props) => (
<Route {...props}>
{!permission ? (
children
) : (
<Can
matchAny
action={permission}
renderOnError={
<ServerError title={'Access Denied'} message={'You do not have permission to access this page.'} />
}
>
{children}
</Can>
)}
</Route>
);
function PermissionRoute({ children, permission }: Props): JSX.Element {
if (permission === undefined) {
return <>{children}</>;
}
const can = usePermissions(permission);
if (can.filter(p => p).length > 0) {
return <>{children}</>;
}
return <ServerError title="Access Denied" message="You do not have permission to access this page." />;
}
export default PermissionRoute;

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

@ -1,4 +1,5 @@
import React, { useRef } from 'react';
import { useRef } from 'react';
import * as React from 'react';
import { createPortal } from 'react-dom';
export default ({ children }: { children: React.ReactNode }) => {

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

@ -1,25 +1,19 @@
import React, { useEffect, useRef, useState } from 'react';
import styled from 'styled-components/macro';
import { Transition } from '@headlessui/react';
import { useStoreActions, useStoreState } from 'easy-peasy';
import { randomInt } from '@/helpers';
import { CSSTransition } from 'react-transition-group';
import tw from 'twin.macro';
import { Fragment, useEffect, useRef, useState } from 'react';
const BarFill = styled.div`
${tw`h-full bg-cyan-400`};
transition: 250ms ease-in-out;
box-shadow: 0 -2px 10px 2px hsl(178, 78%, 57%);
`;
import { randomInt } from '@/helpers';
type Timer = ReturnType<typeof setTimeout>;
export default () => {
const interval = useRef<Timer>(null) as React.MutableRefObject<Timer>;
const timeout = useRef<Timer>(null) as React.MutableRefObject<Timer>;
function ProgressBar() {
const interval = useRef<Timer>();
const timeout = useRef<Timer>();
const [visible, setVisible] = useState(false);
const progress = useStoreState((state) => state.progress.progress);
const continuous = useStoreState((state) => state.progress.continuous);
const setProgress = useStoreActions((actions) => actions.progress.setProgress);
const continuous = useStoreState(state => state.progress.continuous);
const progress = useStoreState(state => state.progress.progress);
const setProgress = useStoreActions(actions => actions.progress.setProgress);
useEffect(() => {
return () => {
@ -59,10 +53,26 @@ export default () => {
}, [progress, continuous]);
return (
<div css={tw`w-full fixed`} style={{ height: '2px' }}>
<CSSTransition timeout={150} appear in={visible} unmountOnExit classNames={'fade'}>
<BarFill style={{ width: progress === undefined ? '100%' : `${progress}%` }} />
</CSSTransition>
<div className="fixed h-[2px] w-full">
<Transition
as={Fragment}
show={visible}
enter="transition-opacity duration-150"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="transition-opacity duration-150"
leaveFrom="opacity-100"
leaveTo="opacity-0"
appear
unmount
>
<div
className="h-full bg-cyan-400 shadow-[0_-2px_10px_2px] shadow-[#3CE7E1] transition-all duration-[250ms] ease-in-out"
style={{ width: progress === undefined ? '100%' : `${progress}%` }}
/>
</Transition>
</div>
);
};
}
export default ProgressBar;

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

@ -1,8 +1,7 @@
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 styled, { keyframes } from 'styled-components/macro';
import styled, { keyframes } from 'styled-components';
import tw from 'twin.macro';
import Button from '@/components/elements/Button';
import NotFoundSvg from '@/assets/images/not_found.svg';

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

@ -1,4 +1,4 @@
import styled, { css } from 'styled-components/macro';
import styled, { css } from 'styled-components';
import tw from 'twin.macro';
interface Props {
@ -25,7 +25,7 @@ const Select = styled.select<Props>`
display: none;
}
${(props) =>
${props =>
!props.hideDropdownArrow &&
css`
${tw`bg-neutral-600 border-neutral-500 text-neutral-200`};

4
resources/scripts/components/elements/ServerContentBlock.tsx
View file

@ -1,5 +1,5 @@
import PageContentBlock, { PageContentBlockProps } from '@/components/elements/PageContentBlock';
import React from 'react';
import * as React from 'react';
import { ServerContext } from '@/state/server';
interface Props extends PageContentBlockProps {
@ -7,7 +7,7 @@ interface Props extends PageContentBlockProps {
}
const ServerContentBlock: React.FC<Props> = ({ title, children, ...props }) => {
const name = ServerContext.useStoreState((state) => state.server.data!.name);
const name = ServerContext.useStoreState(state => state.server.data!.name);
return (
<PageContentBlock title={`${name} | ${title}`} {...props}>

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

@ -1,19 +1,23 @@
import React, { Suspense } from 'react';
import styled, { css, keyframes } from 'styled-components/macro';
import type { FC, ReactNode } from 'react';
import { Suspense } from 'react';
import styled, { css, keyframes } from 'styled-components';
import tw from 'twin.macro';
import ErrorBoundary from '@/components/elements/ErrorBoundary';
export type SpinnerSize = 'small' | 'base' | 'large';
interface Props {
children?: ReactNode;
size?: SpinnerSize;
centered?: boolean;
isBlue?: boolean;
}
interface Spinner extends React.FC<Props> {
interface Spinner extends FC<Props> {
Size: Record<'SMALL' | 'BASE' | 'LARGE', SpinnerSize>;
Suspense: React.FC<Props>;
Suspense: FC<Props>;
}
const spin = keyframes`
@ -27,7 +31,7 @@ const SpinnerComponent = styled.div<Props>`
border-radius: 50%;
animation: ${spin} 1s cubic-bezier(0.55, 0.25, 0.25, 0.7) infinite;
${(props) =>
${props =>
props.size === 'small'
? tw`w-4 h-4 border-2`
: props.size === 'large'
@ -37,8 +41,8 @@ const SpinnerComponent = styled.div<Props>`
`
: 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%)')};
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%)')};
`;
const Spinner: Spinner = ({ centered, ...props }) =>

20
resources/scripts/components/elements/SpinnerOverlay.tsx
View file

@ -1,17 +1,23 @@
import React from 'react';
import Spinner, { SpinnerSize } from '@/components/elements/Spinner';
import Fade from '@/components/elements/Fade';
import type { ReactNode } from 'react';
import tw from 'twin.macro';
import Spinner, { SpinnerSize } from '@/components/elements/Spinner';
interface Props {
children?: ReactNode;
visible: boolean;
fixed?: boolean;
size?: SpinnerSize;
backgroundOpacity?: number;
}
const SpinnerOverlay: React.FC<Props> = ({ size, fixed, visible, backgroundOpacity, children }) => (
<Fade timeout={150} in={visible} unmountOnExit>
function SpinnerOverlay({ size, fixed, visible, backgroundOpacity, children }: Props) {
if (!visible) {
return null;
}
return (
<div
css={[
tw`top-0 left-0 flex items-center justify-center w-full h-full rounded flex-col z-40`,
@ -22,7 +28,7 @@ const SpinnerOverlay: React.FC<Props> = ({ size, fixed, visible, backgroundOpaci
<Spinner size={size} />
{children && (typeof children === 'string' ? <p css={tw`mt-4 text-neutral-400`}>{children}</p> : children)}
</div>
</Fade>
);
);
}
export default SpinnerOverlay;

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

@ -1,4 +1,4 @@
import styled from 'styled-components/macro';
import styled from 'styled-components';
import tw, { theme } from 'twin.macro';
const SubNavigation = styled.div`

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

@ -1,6 +1,7 @@
import React, { useMemo } from 'react';
import styled from 'styled-components/macro';
import { v4 } from 'uuid';
import type { ChangeEvent, ReactNode } from 'react';
import { useMemo } from 'react';
import { nanoid } from 'nanoid';
import styled from 'styled-components';
import tw from 'twin.macro';
import Label from '@/components/elements/Label';
import Input from '@/components/elements/Input';
@ -42,12 +43,12 @@ export interface SwitchProps {
description?: string;
defaultChecked?: boolean;
readOnly?: boolean;
onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
children?: React.ReactNode;
onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
children?: ReactNode;
}
const Switch = ({ name, label, description, defaultChecked, readOnly, onChange, children }: SwitchProps) => {
const uuid = useMemo(() => v4(), []);
const uuid = useMemo(() => nanoid(), []);
return (
<div css={tw`flex items-center`}>
@ -57,7 +58,7 @@ const Switch = ({ name, label, description, defaultChecked, readOnly, onChange,
id={uuid}
name={name}
type={'checkbox'}
onChange={(e) => onChange && onChange(e)}
onChange={e => onChange && onChange(e)}
defaultChecked={defaultChecked}
disabled={readOnly}
/>

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

@ -1,4 +1,5 @@
import React, { memo } from 'react';
import { memo } from 'react';
import * as React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { IconProp } from '@fortawesome/fontawesome-svg-core';
import tw from 'twin.macro';

12
resources/scripts/components/elements/Translate.tsx
View file

@ -1,9 +1,9 @@
import React from 'react';
import { Trans, TransProps, useTranslation } from 'react-i18next';
import type { TransProps } from 'react-i18next';
import { Trans, useTranslation } from 'react-i18next';
type Props = Omit<TransProps, 't'>;
type Props = Omit<TransProps<string, string>, 't'>;
export default ({ ns, children, ...props }: Props) => {
function Translate({ ns, children, ...props }: Props) {
const { t } = useTranslation(ns);
return (
@ -11,4 +11,6 @@ export default ({ ns, children, ...props }: Props) => {
{children}
</Trans>
);
};
}
export default Translate;

2
resources/scripts/components/elements/activity/ActivityLogEntry.tsx
View file

@ -1,4 +1,4 @@
import React from 'react';
import * as React from 'react';
import { Link } from 'react-router-dom';
import Tooltip from '@/components/elements/tooltip/Tooltip';
import Translate from '@/components/elements/Translate';

2
resources/scripts/components/elements/activity/ActivityLogMetaButton.tsx
View file

@ -1,4 +1,4 @@
import React, { useState } from 'react';
import { useState } from 'react';
import { ClipboardListIcon } from '@heroicons/react/outline';
import { Dialog } from '@/components/elements/dialog';
import { Button } from '@/components/elements/button/index';

4
resources/scripts/components/elements/alert/Alert.tsx
View file

@ -1,5 +1,5 @@
import { ExclamationIcon, ShieldExclamationIcon } from '@heroicons/react/outline';
import React from 'react';
import * as React from 'react';
import classNames from 'classnames';
interface AlertProps {
@ -17,7 +17,7 @@ export default ({ type, className, children }: AlertProps) => {
['border-red-500 bg-red-500/25']: type === 'danger',
['border-yellow-500 bg-yellow-500/25']: type === 'warning',
},
className
className,
)}
>
{type === 'danger' ? (

6
resources/scripts/components/elements/button/Button.tsx
View file

@ -1,4 +1,4 @@
import React, { forwardRef } from 'react';
import { forwardRef } from 'react';
import classNames from 'classnames';
import { ButtonProps, Options } from '@/components/elements/button/types';
import styles from './style.module.css';
@ -17,14 +17,14 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
[styles.small]: size === Options.Size.Small,
[styles.large]: size === Options.Size.Large,
},
className
className,
)}
{...rest}
>
{children}
</button>
);
}
},
);
const TextButton = forwardRef<HTMLButtonElement, ButtonProps>(({ className, ...props }, ref) => (

6
resources/scripts/components/elements/button/types.ts
View file

@ -1,15 +1,15 @@
enum Shape {
export enum Shape {
Default,
IconSquare,
}
enum Size {
export enum Size {
Default,
Small,
Large,
}
enum Variant {
export enum Variant {
Primary,
Secondary,
}

2
resources/scripts/components/elements/dialog/ConfirmationDialog.tsx
View file

@ -1,4 +1,4 @@
import React from 'react';
import * as React from 'react';
import { Dialog, RenderDialogProps } from './';
import { Button } from '@/components/elements/button/index';

3
resources/scripts/components/elements/dialog/Dialog.tsx
View file

@ -1,4 +1,5 @@
import React, { useRef, useState } from 'react';
import { useRef, useState } from 'react';
import * as React from 'react';
import { Dialog as HDialog } from '@headlessui/react';
import { Button } from '@/components/elements/button/index';
import { XIcon } from '@heroicons/react/solid';

5
resources/scripts/components/elements/dialog/DialogFooter.tsx
View file

@ -1,4 +1,5 @@
import React, { useContext } from 'react';
import { useContext } from 'react';
import * as React from 'react';
import { DialogContext } from './';
import { useDeepCompareEffect } from '@/plugins/useDeepCompareEffect';
@ -7,7 +8,7 @@ export default ({ children }: { children: React.ReactNode }) => {
useDeepCompareEffect(() => {
setFooter(
<div className={'px-6 py-3 bg-gray-700 flex items-center justify-end space-x-3 rounded-b'}>{children}</div>
<div className={'px-6 py-3 bg-gray-700 flex items-center justify-end space-x-3 rounded-b'}>{children}</div>,
);
}, [children]);

4
resources/scripts/components/elements/dialog/DialogIcon.tsx
View file

@ -1,4 +1,4 @@
import React, { useContext, useEffect } from 'react';
import { useContext, useEffect } from 'react';
import { CheckIcon, ExclamationIcon, InformationCircleIcon, ShieldExclamationIcon } from '@heroicons/react/outline';
import classNames from 'classnames';
import { DialogContext, DialogIconProps, styles } from './';
@ -19,7 +19,7 @@ export default ({ type, position, className }: DialogIconProps) => {
setIcon(
<div className={classNames(styles.dialog_icon, styles[type], className)}>
<Icon className={'w-6 h-6'} />
</div>
</div>,
);
}, [type, className]);

6
resources/scripts/components/elements/dialog/context.ts
View file

@ -1,13 +1,13 @@
import React from 'react';
import { createContext } from 'react';
import { DialogContextType, DialogWrapperContextType } from './types';
export const DialogContext = React.createContext<DialogContextType>({
export const DialogContext = createContext<DialogContextType>({
setIcon: () => null,
setFooter: () => null,
setIconPosition: () => null,
});
export const DialogWrapperContext = React.createContext<DialogWrapperContextType>({
export const DialogWrapperContext = createContext<DialogWrapperContextType>({
props: {},
setProps: () => null,
close: () => null,

2
resources/scripts/components/elements/dialog/types.d.ts vendored
View file

@ -1,4 +1,4 @@
import React from 'react';
import * as React from 'react';
import { IconPosition } from '@/components/elements/dialog/DialogIcon';
type Callback<T> = ((value: T) => void) | React.Dispatch<React.SetStateAction<T>>;

7
resources/scripts/components/elements/dropdown/Dropdown.tsx
View file

@ -1,4 +1,5 @@
import React, { ElementType, forwardRef, useMemo } from 'react';
import { ElementType, forwardRef, useMemo } from 'react';
import * as React from 'react';
import { Menu, Transition } from '@headlessui/react';
import styles from './style.module.css';
import classNames from 'classnames';
@ -23,8 +24,8 @@ const Dropdown = forwardRef<typeof Menu, Props>(({ as, children }, ref) => {
const list = React.Children.toArray(children) as unknown as TypedChild[];
return [
list.filter((child) => child.type === DropdownButton),
list.filter((child) => child.type !== DropdownButton),
list.filter(child => child.type === DropdownButton),
list.filter(child => child.type !== DropdownButton),
];
}, [children]);

2
resources/scripts/components/elements/dropdown/DropdownButton.tsx
View file

@ -2,7 +2,7 @@ import classNames from 'classnames';
import styles from '@/components/elements/dropdown/style.module.css';
import { ChevronDownIcon } from '@heroicons/react/solid';
import { Menu } from '@headlessui/react';
import React from 'react';
import * as React from 'react';
interface Props {
className?: string;

7
resources/scripts/components/elements/dropdown/DropdownItem.tsx
View file

@ -1,4 +1,5 @@
import React, { forwardRef } from 'react';
import { forwardRef } from 'react';
import * as React from 'react';
import { Menu } from '@headlessui/react';
import styles from './style.module.css';
import classNames from 'classnames';
@ -26,7 +27,7 @@ const DropdownItem = forwardRef<HTMLAnchorElement, Props>(
[styles.danger]: danger,
[styles.disabled]: disabled,
},
className
className,
)}
onClick={onClick}
>
@ -36,7 +37,7 @@ const DropdownItem = forwardRef<HTMLAnchorElement, Props>(
)}
</Menu.Item>
);
}
},
);
export default DropdownItem;

206
resources/scripts/components/elements/editor/Editor.tsx Normal file
View file

@ -0,0 +1,206 @@
import { autocompletion, completionKeymap, closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete';
import { defaultKeymap, history, historyKeymap, indentWithTab } from '@codemirror/commands';
import {
defaultHighlightStyle,
syntaxHighlighting,
indentOnInput,
bracketMatching,
foldGutter,
foldKeymap,
LanguageDescription,
indentUnit,
} from '@codemirror/language';
import { languages } from '@codemirror/language-data';
import { lintKeymap } from '@codemirror/lint';
import { searchKeymap, highlightSelectionMatches } from '@codemirror/search';
import type { Extension } from '@codemirror/state';
import { EditorState, Compartment } from '@codemirror/state';
import {
keymap,
highlightSpecialChars,
drawSelection,
highlightActiveLine,
dropCursor,
rectangularSelection,
crosshairCursor,
lineNumbers,
highlightActiveLineGutter,
EditorView,
} from '@codemirror/view';
import type { CSSProperties } from 'react';
import { useEffect, useRef, useState } from 'react';
import { ayuMirageHighlightStyle, ayuMirageTheme } from './theme';
function findLanguageByFilename(filename: string): LanguageDescription | undefined {
const language = LanguageDescription.matchFilename(languages, filename);
if (language !== null) {
return language;
}
return undefined;
}
const defaultExtensions: Extension = [
// Ayu Mirage
ayuMirageTheme,
syntaxHighlighting(ayuMirageHighlightStyle),
lineNumbers(),
highlightActiveLineGutter(),
highlightSpecialChars(),
history(),
foldGutter(),
drawSelection(),
dropCursor(),
EditorState.allowMultipleSelections.of(true),
indentOnInput(),
syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
bracketMatching(),
closeBrackets(),
autocompletion(),
rectangularSelection(),
crosshairCursor(),
highlightActiveLine(),
highlightSelectionMatches(),
keymap.of([
...closeBracketsKeymap,
...defaultKeymap,
...searchKeymap,
...historyKeymap,
...foldKeymap,
...completionKeymap,
...lintKeymap,
indentWithTab,
]),
EditorState.tabSize.of(4),
indentUnit.of('\t'),
];
export interface EditorProps {
// DOM
className?: string;
style?: CSSProperties;
// CodeMirror Config
extensions?: Extension[];
language?: LanguageDescription;
// Options
filename?: string;
initialContent?: string;
// ?
fetchContent?: (callback: () => Promise<string>) => void;
// Events
onContentSaved?: () => void;
onLanguageChanged?: (language: LanguageDescription | undefined) => void;
}
export function Editor(props: EditorProps) {
const ref = useRef<HTMLDivElement>(null);
const [view, setView] = useState<EditorView>();
// eslint-disable-next-line react/hook-use-state
const [languageConfig] = useState(new Compartment());
// eslint-disable-next-line react/hook-use-state
const [keybindings] = useState(new Compartment());
const createEditorState = () =>
EditorState.create({
doc: props.initialContent,
extensions: [
defaultExtensions,
props.extensions === undefined ? [] : props.extensions,
languageConfig.of([]),
keybindings.of([]),
],
});
useEffect(() => {
if (ref.current === null) {
return;
}
setView(
new EditorView({
state: createEditorState(),
parent: ref.current,
}),
);
return () => {
if (view === undefined) {
return;
}
view.destroy();
setView(undefined);
};
}, [ref]);
useEffect(() => {
if (view === undefined) {
return;
}
view.setState(createEditorState());
}, [props.initialContent]);
useEffect(() => {
if (view === undefined) {
return;
}
const language = props.language ?? findLanguageByFilename(props.filename ?? '');
if (language === undefined) {
return;
}
void language.load().then(language => {
view.dispatch({
effects: languageConfig.reconfigure(language),
});
});
if (props.onLanguageChanged !== undefined) {
props.onLanguageChanged(language);
}
}, [view, props.filename, props.language]);
useEffect(() => {
if (props.fetchContent === undefined) {
return;
}
if (!view) {
props.fetchContent(async () => {
throw new Error('no editor session has been configured');
});
return;
}
const { onContentSaved } = props;
if (onContentSaved !== undefined) {
view.dispatch({
effects: keybindings.reconfigure(
keymap.of([
{
key: 'Mod-s',
run() {
onContentSaved();
return true;
},
},
]),
),
});
}
props.fetchContent(async () => view.state.doc.toJSON().join('\n'));
}, [view, props.fetchContent, props.onContentSaved]);
return <div ref={ref} className={`relative ${props.className ?? ''}`.trimEnd()} style={props.style} />;
}

1
resources/scripts/components/elements/editor/index.ts Normal file
View file

@ -0,0 +1 @@
export { Editor } from './Editor';

148
resources/scripts/components/elements/editor/theme.ts Normal file
View file

@ -0,0 +1,148 @@
import { HighlightStyle } from '@codemirror/language';
import type { Extension } from '@codemirror/state';
import { EditorView } from '@codemirror/view';
import { tags as t } from '@lezer/highlight';
const highlightBackground = 'transparent';
const background = '#1F2430';
const selection = '#34455A';
const cursor = '#FFCC66';
export const ayuMirageTheme: Extension = EditorView.theme(
{
'&': {
color: '#CBCCC6',
backgroundColor: background,
},
'.cm-content': {
caretColor: cursor,
},
'&.cm-focused .cm-cursor': { borderLeftColor: cursor },
'&.cm-focused .cm-selectionBackground, .cm-selectionBackground, ::selection': {
backgroundColor: selection,
},
'.cm-panels': { backgroundColor: '#232834', color: '#CBCCC6' },
'.cm-panels.cm-panels-top': { borderBottom: '2px solid black' },
'.cm-panels.cm-panels-bottom': { borderTop: '2px solid black' },
'.cm-searchMatch': {
backgroundColor: '#72a1ff59',
outline: '1px solid #457dff',
},
'.cm-searchMatch.cm-searchMatch-selected': {
backgroundColor: '#6199ff2f',
},
'.cm-activeLine': { backgroundColor: highlightBackground },
'.cm-selectionMatch': { backgroundColor: '#aafe661a' },
'.cm-matchingBracket, .cm-nonmatchingBracket': {
backgroundColor: '#bad0f847',
outline: '1px solid #515a6b',
},
'.cm-gutters': {
backgroundColor: 'transparent',
color: '#FF3333',
border: 'none',
},
'.cm-gutterElement': {
color: 'rgba(61, 66, 77, 99)',
},
'.cm-activeLineGutter': {
backgroundColor: highlightBackground,
},
'.cm-foldPlaceholder': {
backgroundColor: 'transparent',
border: 'none',
color: '#ddd',
},
'.cm-tooltip': {
border: '1px solid #181a1f',
backgroundColor: '#232834',
},
'.cm-tooltip-autocomplete': {
'& > ul > li[aria-selected]': {
backgroundColor: highlightBackground,
color: '#CBCCC6',
},
},
},
{ dark: true },
);
export const ayuMirageHighlightStyle = HighlightStyle.define([
{
tag: t.keyword,
color: '#FFA759',
},
{
tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],
color: '#5CCFE6',
},
{
tag: [t.function(t.variableName), t.labelName],
color: '#CBCCC6',
},
{
tag: [t.color, t.constant(t.name), t.standard(t.name)],
color: '#F29E74',
},
{
tag: [t.definition(t.name), t.separator],
color: '#CBCCC6B3',
},
{
tag: [t.typeName, t.className, t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace],
color: '#FFCC66',
},
{
tag: [t.operator, t.operatorKeyword, t.url, t.escape, t.regexp, t.link, t.special(t.string)],
color: '#5CCFE6',
},
{
tag: [t.meta, t.comment],
color: '#5C6773',
},
{
tag: t.strong,
fontWeight: 'bold',
},
{
tag: t.emphasis,
fontStyle: 'italic',
},
{
tag: t.strikethrough,
textDecoration: 'line-through',
},
{
tag: t.link,
color: '#FF3333',
textDecoration: 'underline',
},
{
tag: t.heading,
fontWeight: 'bold',
color: '#BAE67E',
},
{
tag: [t.atom, t.bool, t.special(t.variableName)],
color: '#5CCFE6',
},
{
tag: [t.processingInstruction, t.string, t.inserted],
color: '#BAE67E',
},
{
tag: t.invalid,
color: '#FF3333',
},
]);

3
resources/scripts/components/elements/inputs/Checkbox.tsx
View file

@ -1,4 +1,5 @@
import React, { forwardRef } from 'react';
import { forwardRef } from 'react';
import * as React from 'react';
import classNames from 'classnames';
import styles from './styles.module.css';

5
resources/scripts/components/elements/inputs/InputField.tsx
View file

@ -1,4 +1,5 @@
import React, { forwardRef } from 'react';
import { forwardRef } from 'react';
import * as React from 'react';
import classNames from 'classnames';
import styles from './styles.module.css';
@ -19,7 +20,7 @@ const Component = forwardRef<HTMLInputElement, InputFieldProps>(({ className, va
'form-input',
styles.text_input,
{ [styles.loose]: variant === Variant.Loose },
className
className,
)}
{...props}
/>

2
resources/scripts/components/elements/inputs/index.ts
View file

@ -6,7 +6,7 @@ const Input = Object.assign(
{
Text: InputField,
Checkbox: Checkbox,
}
},
);
export { Input };

5
resources/scripts/components/elements/table/PaginationFooter.tsx
View file

@ -1,4 +1,3 @@
import React from 'react';
import { PaginationDataSet } from '@/api/http';
import classNames from 'classnames';
import { Button } from '@/components/elements/button/index';
@ -53,7 +52,7 @@ const PaginationFooter = ({ pagination, className, onPageSelect }: Props) => {
<Button.Text {...buttonProps(1)} disabled={pages.previous.length !== 2}>
<ChevronDoubleLeftIcon className={'w-3 h-3'} />
</Button.Text>
{pages.previous.reverse().map((value) => (
{pages.previous.reverse().map(value => (
<Button.Text key={`previous-${value}`} {...buttonProps(value)}>
{value}
</Button.Text>
@ -61,7 +60,7 @@ const PaginationFooter = ({ pagination, className, onPageSelect }: Props) => {
<Button size={Button.Sizes.Small} shape={Button.Shapes.IconSquare}>
{current}
</Button>
{pages.next.map((value) => (
{pages.next.map(value => (
<Button.Text key={`next-${value}`} {...buttonProps(value)}>
{value}
</Button.Text>

5
resources/scripts/components/elements/tooltip/Tooltip.tsx
View file

@ -1,4 +1,5 @@
import React, { cloneElement, useRef, useState } from 'react';
import { cloneElement, useRef, useState } from 'react';
import * as React from 'react';
import {
arrow,
autoUpdate,
@ -104,7 +105,7 @@ export default ({ children, ...props }: Props) => {
ref={arrowEl}
style={{
transform: `translate(${Math.round(ax || 0)}px, ${Math.round(
ay || 0
ay || 0,
)}px) rotate(45deg)`,
}}
className={classNames('absolute bg-gray-900 w-3 h-3', side)}

14
resources/scripts/components/elements/transitions/FadeTransition.tsx
View file

@ -1,16 +1,18 @@
import React from 'react';
import { Transition } from '@headlessui/react';
import type { ElementType, ReactNode } from 'react';
type Duration = `duration-${number}`;
interface Props {
as?: React.ElementType;
as?: ElementType;
duration?: Duration | [Duration, Duration];
appear?: boolean;
unmount?: boolean;
show: boolean;
children: React.ReactNode;
children: ReactNode;
}
export default ({ children, duration, ...props }: Props) => {
function FadeTransition({ children, duration, ...props }: Props) {
const [enterDuration, exitDuration] = Array.isArray(duration)
? duration
: !duration
@ -30,4 +32,6 @@ export default ({ children, duration, ...props }: Props) => {
{children}
</Transition>
);
};
}
export default FadeTransition;