From 361596e05147b183eacdf405b47e2aa30ad6202e Mon Sep 17 00:00:00 2001 From: Matthew Penner Date: Thu, 22 Jul 2021 11:15:27 -0600 Subject: [PATCH] ui: I HATE STYLED-COMPONENTS WITH TYPESCRIPT --- package.json | 6 +- resources/scripts/TransitionRouter.tsx | 3 +- resources/scripts/components/MessageBox.tsx | 3 +- .../scripts/components/NavigationBar.tsx | 3 +- .../components/admin/AdminCheckbox.tsx | 3 +- .../scripts/components/admin/AdminTable.tsx | 3 +- .../components/admin/SubNavigation.tsx | 3 +- .../components/auth/LoginFormContainer.tsx | 3 +- .../dashboard/AccountOverviewContainer.tsx | 3 +- .../components/dashboard/ServerRow.tsx | 3 +- .../dashboard/forms/CreateApiKeyForm.tsx | 3 +- .../dashboard/search/SearchModal.tsx | 3 +- .../scripts/components/elements/Button.tsx | 5 +- .../components/elements/ContentContainer.tsx | 3 +- .../components/elements/CopyOnClick.tsx | 2 +- .../components/elements/DropdownMenu.tsx | 3 +- .../scripts/components/elements/Editor.tsx | 3 +- .../scripts/components/elements/Fade.tsx | 11 +- .../components/elements/GreyRowBox.tsx | 5 +- .../scripts/components/elements/Input.tsx | 3 +- .../components/elements/InputSpinner.tsx | 5 +- .../scripts/components/elements/Label.tsx | 3 +- .../scripts/components/elements/Modal.tsx | 11 +- .../components/elements/Pagination.tsx | 5 +- .../components/elements/ProgressBar.tsx | 3 +- .../components/elements/SearchableSelect.tsx | 3 +- .../scripts/components/elements/Select.tsx | 7 +- .../scripts/components/elements/Spinner.tsx | 8 +- .../components/elements/SubNavigation.tsx | 3 +- .../scripts/components/elements/Switch.tsx | 3 +- .../scripts/components/server/Console.tsx | 3 +- .../server/files/FileDropdownMenu.tsx | 3 +- .../components/server/files/FileObjectRow.tsx | 3 +- .../server/files/SelectFileCheckbox.tsx | 7 +- .../components/server/files/UploadButton.tsx | 5 +- .../server/network/AllocationRow.tsx | 3 +- .../components/server/users/PermissionRow.tsx | 5 +- resources/scripts/macros.d.ts | 43 +++--- resources/scripts/routers/AdminRouter.tsx | 3 +- yarn.lock | 127 +++++++++++++----- 40 files changed, 180 insertions(+), 147 deletions(-) diff --git a/package.json b/package.json index 8275a62f2..aa64fa9f4 100644 --- a/package.json +++ b/package.json @@ -73,7 +73,7 @@ "react-transition-group": "^4.4.2", "reaptcha": "^1.7.2", "sockette": "^2.0.6", - "styled-components": "^5.2.1", + "styled-components": "^5.3.0", "styled-components-breakpoint": "^3.0.0-preview.20", "swr": "^0.5.6", "uuid": "^3.3.2", @@ -116,7 +116,7 @@ "@types/react-router-dom": "^5.1.8", "@types/react-select": "^4.0.17", "@types/react-transition-group": "^4.4.2", - "@types/styled-components": "^5.1.7", + "@types/styled-components": "^5.1.11", "@types/uuid": "^3.4.5", "@types/webappsec-credential-management": "^0.6.1", "@types/webpack-env": "^1.16.2", @@ -143,7 +143,7 @@ "source-map-loader": "^1.1.3", "style-loader": "^2.0.0", "svg-url-loader": "^7.1.1", - "tailwindcss": "^2.2.4", + "tailwindcss": "^2.2.6", "terser-webpack-plugin": "^4.2.3", "twin.macro": "^2.6.2", "typescript": "^4.3.5", diff --git a/resources/scripts/TransitionRouter.tsx b/resources/scripts/TransitionRouter.tsx index f36c6d369..ce3074181 100644 --- a/resources/scripts/TransitionRouter.tsx +++ b/resources/scripts/TransitionRouter.tsx @@ -2,8 +2,7 @@ import React from 'react'; import { Route } from 'react-router'; import { SwitchTransition } from 'react-transition-group'; import Fade from '@/components/elements/Fade'; -import styled from 'styled-components/macro'; -import tw from 'twin.macro'; +import tw, { styled } from 'twin.macro'; const StyledSwitchTransition = styled(SwitchTransition)` ${tw`relative`}; diff --git a/resources/scripts/components/MessageBox.tsx b/resources/scripts/components/MessageBox.tsx index e16986ed5..342d5a408 100644 --- a/resources/scripts/components/MessageBox.tsx +++ b/resources/scripts/components/MessageBox.tsx @@ -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'; diff --git a/resources/scripts/components/NavigationBar.tsx b/resources/scripts/components/NavigationBar.tsx index 11220c274..939c9ff07 100644 --- a/resources/scripts/components/NavigationBar.tsx +++ b/resources/scripts/components/NavigationBar.tsx @@ -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`}; diff --git a/resources/scripts/components/admin/AdminCheckbox.tsx b/resources/scripts/components/admin/AdminCheckbox.tsx index 3acdf2bee..98643073c 100644 --- a/resources/scripts/components/admin/AdminCheckbox.tsx +++ b/resources/scripts/components/admin/AdminCheckbox.tsx @@ -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)` && { diff --git a/resources/scripts/components/admin/AdminTable.tsx b/resources/scripts/components/admin/AdminTable.tsx index 93856a4c5..5d343529d 100644 --- a/resources/scripts/components/admin/AdminTable.tsx +++ b/resources/scripts/components/admin/AdminTable.tsx @@ -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'; diff --git a/resources/scripts/components/admin/SubNavigation.tsx b/resources/scripts/components/admin/SubNavigation.tsx index d9a83a6dd..e0dfe7091 100644 --- a/resources/scripts/components/admin/SubNavigation.tsx +++ b/resources/scripts/components/admin/SubNavigation.tsx @@ -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`}; diff --git a/resources/scripts/components/auth/LoginFormContainer.tsx b/resources/scripts/components/auth/LoginFormContainer.tsx index 750eafed3..5250a5433 100644 --- a/resources/scripts/components/auth/LoginFormContainer.tsx +++ b/resources/scripts/components/auth/LoginFormContainer.tsx @@ -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')` diff --git a/resources/scripts/components/dashboard/AccountOverviewContainer.tsx b/resources/scripts/components/dashboard/AccountOverviewContainer.tsx index 9f9611956..5f6653f71 100644 --- a/resources/scripts/components/dashboard/AccountOverviewContainer.tsx +++ b/resources/scripts/components/dashboard/AccountOverviewContainer.tsx @@ -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` diff --git a/resources/scripts/components/dashboard/ServerRow.tsx b/resources/scripts/components/dashboard/ServerRow.tsx index 3c3878586..ab8c4562e 100644 --- a/resources/scripts/components/dashboard/ServerRow.tsx +++ b/resources/scripts/components/dashboard/ServerRow.tsx @@ -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 diff --git a/resources/scripts/components/dashboard/forms/CreateApiKeyForm.tsx b/resources/scripts/components/dashboard/forms/CreateApiKeyForm.tsx index 9022ae6c8..28490ddd2 100644 --- a/resources/scripts/components/dashboard/forms/CreateApiKeyForm.tsx +++ b/resources/scripts/components/dashboard/forms/CreateApiKeyForm.tsx @@ -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 { diff --git a/resources/scripts/components/dashboard/search/SearchModal.tsx b/resources/scripts/components/dashboard/search/SearchModal.tsx index 67aa518f8..598001af3 100644 --- a/resources/scripts/components/dashboard/search/SearchModal.tsx +++ b/resources/scripts/components/dashboard/search/SearchModal.tsx @@ -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; diff --git a/resources/scripts/components/elements/Button.tsx b/resources/scripts/components/elements/Button.tsx index cdf1a8d98..7da93ed30 100644 --- a/resources/scripts/components/elements/Button.tsx +++ b/resources/scripts/components/elements/Button.tsx @@ -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 = ({ children, isLoading, ...props }) => ); -type LinkProps = Omit & Props; +type LinkProps = Omit & Props; const LinkButton: React.FC = props => ; diff --git a/resources/scripts/components/elements/ContentContainer.tsx b/resources/scripts/components/elements/ContentContainer.tsx index 799f512d2..b5a1bdcd8 100644 --- a/resources/scripts/components/elements/ContentContainer.tsx +++ b/resources/scripts/components/elements/ContentContainer.tsx @@ -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; diff --git a/resources/scripts/components/elements/CopyOnClick.tsx b/resources/scripts/components/elements/CopyOnClick.tsx index 1597881cb..93be7e0a4 100644 --- a/resources/scripts/components/elements/CopyOnClick.tsx +++ b/resources/scripts/components/elements/CopyOnClick.tsx @@ -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'; diff --git a/resources/scripts/components/elements/DropdownMenu.tsx b/resources/scripts/components/elements/DropdownMenu.tsx index 81b397487..77b3bb929 100644 --- a/resources/scripts/components/elements/DropdownMenu.tsx +++ b/resources/scripts/components/elements/DropdownMenu.tsx @@ -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 { diff --git a/resources/scripts/components/elements/Editor.tsx b/resources/scripts/components/elements/Editor.tsx index 3bd218d71..2d844fa8c 100644 --- a/resources/scripts/components/elements/Editor.tsx +++ b/resources/scripts/components/elements/Editor.tsx @@ -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; diff --git a/resources/scripts/components/elements/Fade.tsx b/resources/scripts/components/elements/Fade.tsx index 2b9c3efa8..ff1b99b1c 100644 --- a/resources/scripts/components/elements/Fade.tsx +++ b/resources/scripts/components/elements/Fade.tsx @@ -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 { @@ -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; diff --git a/resources/scripts/components/elements/GreyRowBox.tsx b/resources/scripts/components/elements/GreyRowBox.tsx index 139947f25..09ba91f69 100644 --- a/resources/scripts/components/elements/GreyRowBox.tsx +++ b/resources/scripts/components/elements/GreyRowBox.tsx @@ -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 { diff --git a/resources/scripts/components/elements/Input.tsx b/resources/scripts/components/elements/Input.tsx index d326229f4..7b76371da 100644 --- a/resources/scripts/components/elements/Input.tsx +++ b/resources/scripts/components/elements/Input.tsx @@ -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; diff --git a/resources/scripts/components/elements/InputSpinner.tsx b/resources/scripts/components/elements/InputSpinner.tsx index f26fba621..bd0381717 100644 --- a/resources/scripts/components/elements/InputSpinner.tsx +++ b/resources/scripts/components/elements/InputSpinner.tsx @@ -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; diff --git a/resources/scripts/components/elements/Label.tsx b/resources/scripts/components/elements/Label.tsx index a8dc1d670..ad354e708 100644 --- a/resources/scripts/components/elements/Label.tsx +++ b/resources/scripts/components/elements/Label.tsx @@ -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`}; diff --git a/resources/scripts/components/elements/Modal.tsx b/resources/scripts/components/elements/Modal.tsx index f07c2fbba..c4161d25f 100644 --- a/resources/scripts/components/elements/Modal.tsx +++ b/resources/scripts/components/elements/Modal.tsx @@ -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`}; } diff --git a/resources/scripts/components/elements/Pagination.tsx b/resources/scripts/components/elements/Pagination.tsx index 1ca625fd4..176b1e534 100644 --- a/resources/scripts/components/elements/Pagination.tsx +++ b/resources/scripts/components/elements/Pagination.tsx @@ -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 { const Block = styled(Button)` ${tw`p-0 w-10 h-10`} - + &:not(:last-of-type) { ${tw`mr-2`}; } diff --git a/resources/scripts/components/elements/ProgressBar.tsx b/resources/scripts/components/elements/ProgressBar.tsx index 0282ee469..050df02d0 100644 --- a/resources/scripts/components/elements/ProgressBar.tsx +++ b/resources/scripts/components/elements/ProgressBar.tsx @@ -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`}; diff --git a/resources/scripts/components/elements/SearchableSelect.tsx b/resources/scripts/components/elements/SearchableSelect.tsx index 7c0fffb59..485ddeb77 100644 --- a/resources/scripts/components/elements/SearchableSelect.tsx +++ b/resources/scripts/components/elements/SearchableSelect.tsx @@ -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'; diff --git a/resources/scripts/components/elements/Select.tsx b/resources/scripts/components/elements/Select.tsx index 7ca441b48..14c59020d 100644 --- a/resources/scripts/components/elements/Select.tsx +++ b/resources/scripts/components/elements/Select.tsx @@ -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` &::-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`}; } diff --git a/resources/scripts/components/elements/Spinner.tsx b/resources/scripts/components/elements/Spinner.tsx index 890d94ea0..35ef62edc 100644 --- a/resources/scripts/components/elements/Spinner.tsx +++ b/resources/scripts/components/elements/Spinner.tsx @@ -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` 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%)'}; `; diff --git a/resources/scripts/components/elements/SubNavigation.tsx b/resources/scripts/components/elements/SubNavigation.tsx index ea6754944..17bac7a26 100644 --- a/resources/scripts/components/elements/SubNavigation.tsx +++ b/resources/scripts/components/elements/SubNavigation.tsx @@ -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`}; diff --git a/resources/scripts/components/elements/Switch.tsx b/resources/scripts/components/elements/Switch.tsx index 5c4b1e9b3..68bac5466 100644 --- a/resources/scripts/components/elements/Switch.tsx +++ b/resources/scripts/components/elements/Switch.tsx @@ -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'; diff --git a/resources/scripts/components/server/Console.tsx b/resources/scripts/components/server/Console.tsx index daaf99d5a..c0f0d825a 100644 --- a/resources/scripts/components/server/Console.tsx +++ b/resources/scripts/components/server/Console.tsx @@ -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'; diff --git a/resources/scripts/components/server/files/FileDropdownMenu.tsx b/resources/scripts/components/server/files/FileDropdownMenu.tsx index 866bdb3de..a7dc99cb3 100644 --- a/resources/scripts/components/server/files/FileDropdownMenu.tsx +++ b/resources/scripts/components/server/files/FileDropdownMenu.tsx @@ -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'; diff --git a/resources/scripts/components/server/files/FileObjectRow.tsx b/resources/scripts/components/server/files/FileObjectRow.tsx index 628bdc4ee..8e7e66882 100644 --- a/resources/scripts/components/server/files/FileObjectRow.tsx +++ b/resources/scripts/components/server/files/FileObjectRow.tsx @@ -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'; diff --git a/resources/scripts/components/server/files/SelectFileCheckbox.tsx b/resources/scripts/components/server/files/SelectFileCheckbox.tsx index 62b93288a..470a87335 100644 --- a/resources/scripts/components/server/files/SelectFileCheckbox.tsx +++ b/resources/scripts/components/server/files/SelectFileCheckbox.tsx @@ -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`}; } diff --git a/resources/scripts/components/server/files/UploadButton.tsx b/resources/scripts/components/server/files/UploadButton.tsx index a2e218bb7..067642fe0 100644 --- a/resources/scripts/components/server/files/UploadButton.tsx +++ b/resources/scripts/components/server/files/UploadButton.tsx @@ -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) => { diff --git a/resources/scripts/components/server/network/AllocationRow.tsx b/resources/scripts/components/server/network/AllocationRow.tsx index 9359edc4d..31fe249df 100644 --- a/resources/scripts/components/server/network/AllocationRow.tsx +++ b/resources/scripts/components/server/network/AllocationRow.tsx @@ -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'; diff --git a/resources/scripts/components/server/users/PermissionRow.tsx b/resources/scripts/components/server/users/PermissionRow.tsx index 1f48eaaf0..1baf6d381 100644 --- a/resources/scripts/components/server/users/PermissionRow.tsx +++ b/resources/scripts/components/server/users/PermissionRow.tsx @@ -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`}; } diff --git a/resources/scripts/macros.d.ts b/resources/scripts/macros.d.ts index 720aa9d29..5d29dcf17 100644 --- a/resources/scripts/macros.d.ts +++ b/resources/scripts/macros.d.ts @@ -1,28 +1,29 @@ -// This allows the use of css={} on JSX elements. -// -// @see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31245 -// -// This is just the contents of the @types/styled-components/cssprop.d.ts file -// since using the other method of just importing the one file did not work -// correctly for some reason. -// noinspection ES6UnusedImports -import {} from 'react'; +import { ComponentType, ReactElement } from 'react'; // eslint-disable-next-line no-restricted-imports -import { CSSProp } from 'styled-components'; +import styledImport, { CSSProp, css as cssImport, StyledComponentProps } from 'styled-components'; declare module 'react' { interface Attributes { - // NOTE: unlike the plain javascript version, it is not possible to get access - // to the element's own attributes inside function interpolations. - // Only theme will be accessible, and only with the DefaultTheme due to the global - // nature of this declaration. - // If you are writing this inline you already have access to all the attributes anyway, - // no need for the extra indirection. - /** - * If present, this React element will be converted by - * `babel-plugin-styled-components` into a styled component - * with the given css as its styles. - */ css?: CSSProp; } } + +declare module 'styled-components' { + interface StyledComponentBase< + C extends string | ComponentType, + // eslint-disable-next-line @typescript-eslint/ban-types + T extends object, + // eslint-disable-next-line @typescript-eslint/ban-types + O extends object = {}, + A extends keyof any = never + > extends ForwardRefExoticBase> { + (props: StyledComponentProps & { as?: Element | string; forwardedAs?: never | undefined }): ReactElement< + StyledComponentProps + >; + } +} + +declare module 'twin.macro' { + const css: typeof cssImport; + const styled: typeof styledImport; +} diff --git a/resources/scripts/routers/AdminRouter.tsx b/resources/scripts/routers/AdminRouter.tsx index 666534576..610ab5320 100644 --- a/resources/scripts/routers/AdminRouter.tsx +++ b/resources/scripts/routers/AdminRouter.tsx @@ -1,8 +1,7 @@ import React, { useState } from 'react'; import { NavLink, Route, RouteComponentProps, Switch } from 'react-router-dom'; import { State, useStoreState } from 'easy-peasy'; -import tw from 'twin.macro'; -import styled from 'styled-components/macro'; +import tw, { styled } from 'twin.macro'; import { breakpoint } from '@/theme'; import { ApplicationStore } from '@/state'; import { AdminContext } from '@/state/admin'; diff --git a/yarn.lock b/yarn.lock index 429724fe0..1b17348fc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2591,14 +2591,14 @@ __metadata: languageName: node linkType: hard -"@types/styled-components@npm:^5.1.7": - version: 5.1.7 - resolution: "@types/styled-components@npm:5.1.7" +"@types/styled-components@npm:^5.1.11": + version: 5.1.11 + resolution: "@types/styled-components@npm:5.1.11" dependencies: "@types/hoist-non-react-statics": "*" "@types/react": "*" csstype: ^3.0.2 - checksum: e0ce3949cbca71581288aac9b948c9943708f7ef20bdc030c8665f88f9e829b37ae7312979d9c949200aff99a704eb22e28f06b8c7bb50d4dbe1d01894762c99 + checksum: ada6d315dd3cc5069f6e64c3bc4ab8a8f38eb3b7daba1b52c018567a793ae728f20078aeecb8a6fe8fbea3ffd285aa99e6737d082de6ffc30997be89ef7f73cb languageName: node linkType: hard @@ -3559,21 +3559,7 @@ __metadata: languageName: node linkType: hard -"babel-plugin-styled-components@npm:>= 1": - version: 1.10.6 - resolution: "babel-plugin-styled-components@npm:1.10.6" - dependencies: - "@babel/helper-annotate-as-pure": ^7.0.0 - "@babel/helper-module-imports": ^7.0.0 - babel-plugin-syntax-jsx: ^6.18.0 - lodash: ^4.17.11 - peerDependencies: - styled-components: ">= 2" - checksum: 77928f4ab02e94395e27c8b38837c1aa8035c0c19083fcd9787caf72f92e7389d1ccba31a1af228eeded378f58759456a3113469e51f6c0ab4f8134c86a88f60 - languageName: node - linkType: hard - -"babel-plugin-styled-components@npm:^1.13.2": +"babel-plugin-styled-components@npm:>= 1.12.0, babel-plugin-styled-components@npm:^1.13.2": version: 1.13.2 resolution: "babel-plugin-styled-components@npm:1.13.2" dependencies: @@ -4223,6 +4209,15 @@ __metadata: languageName: node linkType: hard +"color-convert@npm:^1.9.3": + version: 1.9.3 + resolution: "color-convert@npm:1.9.3" + dependencies: + color-name: 1.1.3 + checksum: 5f244daa3d1fe1f216d48878c550465067d15268688308554e613b7640a068f96588096d51f0b98b68f15d6ff6bb8ad24e172582ac8c0ad43fa4d3da60fd1b79 + languageName: node + linkType: hard + "color-convert@npm:^2.0.1": version: 2.0.1 resolution: "color-convert@npm:2.0.1" @@ -4239,7 +4234,7 @@ __metadata: languageName: node linkType: hard -"color-name@npm:^1.0.0": +"color-name@npm:1.1.3, color-name@npm:^1.0.0": version: 1.1.3 resolution: "color-name@npm:1.1.3" checksum: d8b91bb90aefc05b6ff568cf8889566dcc6269824df6f3c9b8ca842b18d7f4d089c07dc166808d33f22092d4a79167aa56a96a5ff0d21efab548bf44614db43b @@ -4263,6 +4258,16 @@ __metadata: languageName: node linkType: hard +"color-string@npm:^1.6.0": + version: 1.6.0 + resolution: "color-string@npm:1.6.0" + dependencies: + color-name: ^1.0.0 + simple-swizzle: ^0.2.2 + checksum: d48692037a6d38bd1deb91886a075d8af82e4e8269c5ab33eadf174d8aa5e82753a2f3edfe6749e24e48898ea2eb76df706b603c65a721e10ddc57c5d6a078cf + languageName: node + linkType: hard + "color@npm:^3.1.3": version: 3.1.3 resolution: "color@npm:3.1.3" @@ -4273,6 +4278,16 @@ __metadata: languageName: node linkType: hard +"color@npm:^3.2.0": + version: 3.2.1 + resolution: "color@npm:3.2.1" + dependencies: + color-convert: ^1.9.3 + color-string: ^1.6.0 + checksum: 2cf9436cba4cf0cd2da88d82aa69cbad548a850ec24abc1a64930778aa4bc6ef2839b178d85fa2bc254b2a5b982e7db1040c05764f6161a1266880bb0dd14d4f + languageName: node + linkType: hard + "colorette@npm:^1.2.1": version: 1.2.1 resolution: "colorette@npm:1.2.1" @@ -4979,6 +4994,13 @@ __metadata: languageName: node linkType: hard +"didyoumean@npm:^1.2.2": + version: 1.2.2 + resolution: "didyoumean@npm:1.2.2" + checksum: 808a1e4855dbb3c099bb9479af665b0065e574afd39c379c19be8cc4a1a9b06a520b919a6f4f07dcea9d88b4e87d3c69736c509d0725b89437f60ae09e8c4498 + languageName: node + linkType: hard + "diffie-hellman@npm:^5.0.0": version: 5.0.3 resolution: "diffie-hellman@npm:5.0.3" @@ -5814,7 +5836,7 @@ __metadata: languageName: node linkType: hard -"fast-glob@npm:^3.2.5": +"fast-glob@npm:^3.2.5, fast-glob@npm:^3.2.7": version: 3.2.7 resolution: "fast-glob@npm:3.2.7" dependencies: @@ -9885,7 +9907,7 @@ fsevents@^1.2.7: "@types/react-router-dom": ^5.1.8 "@types/react-select": ^4.0.17 "@types/react-transition-group": ^4.4.2 - "@types/styled-components": ^5.1.7 + "@types/styled-components": ^5.1.11 "@types/uuid": ^3.4.5 "@types/webappsec-credential-management": ^0.6.1 "@types/webpack-env": ^1.16.2 @@ -9941,11 +9963,11 @@ fsevents@^1.2.7: sockette: ^2.0.6 source-map-loader: ^1.1.3 style-loader: ^2.0.0 - styled-components: ^5.2.1 + styled-components: ^5.3.0 styled-components-breakpoint: ^3.0.0-preview.20 svg-url-loader: ^7.1.1 swr: ^0.5.6 - tailwindcss: ^2.2.4 + tailwindcss: ^2.2.6 terser-webpack-plugin: ^4.2.3 twin.macro: ^2.6.2 typescript: ^4.3.5 @@ -11861,16 +11883,16 @@ resolve@^2.0.0-next.3: languageName: node linkType: hard -"styled-components@npm:^5.2.1": - version: 5.2.1 - resolution: "styled-components@npm:5.2.1" +"styled-components@npm:^5.3.0": + version: 5.3.0 + resolution: "styled-components@npm:5.3.0" dependencies: "@babel/helper-module-imports": ^7.0.0 "@babel/traverse": ^7.4.5 "@emotion/is-prop-valid": ^0.8.8 "@emotion/stylis": ^0.8.4 "@emotion/unitless": ^0.7.4 - babel-plugin-styled-components: ">= 1" + babel-plugin-styled-components: ">= 1.12.0" css-to-react-native: ^3.0.0 hoist-non-react-statics: ^3.0.0 shallowequal: ^1.1.0 @@ -11879,7 +11901,7 @@ resolve@^2.0.0-next.3: react: ">= 16.8.0" react-dom: ">= 16.8.0" react-is: ">= 16.8.0" - checksum: c27911be08f2c6212d1f381d154cab5204c63b34d1b9ba56388b19654497a523ff466884fbf8914637c046ae8862387b0fc63f9ead67e1a8ab3a8af70b0d8089 + checksum: 1f94f92b5dab0b0a965646079604c184e9ef31fd0546881408039a5b4d9a4ebe73b6bb62b05912f06b68392352f1fed4c2dd66a74888b2446226aa0105b681c9 languageName: node linkType: hard @@ -11961,7 +11983,7 @@ resolve@^2.0.0-next.3: languageName: node linkType: hard -"tailwindcss@npm:^2.1.0, tailwindcss@npm:^2.2.4": +"tailwindcss@npm:^2.1.0": version: 2.2.4 resolution: "tailwindcss@npm:2.2.4" dependencies: @@ -12006,6 +12028,51 @@ resolve@^2.0.0-next.3: languageName: node linkType: hard +"tailwindcss@npm:^2.2.6": + version: 2.2.6 + resolution: "tailwindcss@npm:2.2.6" + dependencies: + arg: ^5.0.0 + bytes: ^3.0.0 + chalk: ^4.1.1 + chokidar: ^3.5.2 + color: ^3.2.0 + cosmiconfig: ^7.0.0 + detective: ^5.2.0 + didyoumean: ^1.2.2 + dlv: ^1.1.3 + fast-glob: ^3.2.7 + fs-extra: ^10.0.0 + glob-parent: ^6.0.0 + html-tags: ^3.1.0 + is-glob: ^4.0.1 + lodash: ^4.17.21 + lodash.topath: ^4.5.2 + modern-normalize: ^1.1.0 + node-emoji: ^1.8.1 + normalize-path: ^3.0.0 + object-hash: ^2.2.0 + postcss-js: ^3.0.3 + postcss-load-config: ^3.1.0 + postcss-nested: 5.0.5 + postcss-selector-parser: ^6.0.6 + postcss-value-parser: ^4.1.0 + pretty-hrtime: ^1.0.3 + purgecss: ^4.0.3 + quick-lru: ^5.1.1 + reduce-css-calc: ^2.1.8 + resolve: ^1.20.0 + tmp: ^0.2.1 + peerDependencies: + autoprefixer: ^10.0.2 + postcss: ^8.0.9 + bin: + tailwind: lib/cli.js + tailwindcss: lib/cli.js + checksum: 61bf4028f419e9c496e53521cd18bb727cb27c9bf932958a15c320041e5c4d5572e8adf44513bb9b11bd3015719784bc7ffca1995a9208dec6d4eb06a4c91961 + languageName: node + linkType: hard + "tapable@npm:^1.0, tapable@npm:^1.0.0, tapable@npm:^1.1.3": version: 1.1.3 resolution: "tapable@npm:1.1.3"