diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 00000000..68ea04de --- /dev/null +++ b/.prettierrc @@ -0,0 +1 @@ +tabWidth: 4 \ No newline at end of file diff --git a/package.json b/package.json index 7853ca24..d6845c45 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,8 @@ "dev": "vite", "build": "rimraf build && tsc && vite build", "serve": "vite preview", - "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'" + "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'", + "fmt": "prettier --write 'src/**/*.{js,jsx,ts,tsx}'" }, "eslintConfig": { "parser": "@typescript-eslint/parser", @@ -35,6 +36,7 @@ "eslint": "^7.28.0", "eslint-config-preact": "^1.1.4", "preact-i18n": "^2.4.0-preactx", + "prettier": "^2.3.1", "react-overlapping-panels": "1.1.2-patch.0", "rimraf": "^3.0.2", "sass": "^1.35.1", diff --git a/src/app.tsx b/src/app.tsx index 9afc23d2..f47efe3c 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -1,8 +1,7 @@ export function App() { - return ( - <> -

REVOLT

- - ) + return ( + <> +

REVOLT

+ + ); } - \ No newline at end of file diff --git a/src/components/ui/Banner.tsx b/src/components/ui/Banner.tsx index 04bc326f..4b96d205 100644 --- a/src/components/ui/Banner.tsx +++ b/src/components/ui/Banner.tsx @@ -1,7 +1,7 @@ import styled from "styled-components"; export default styled.div` - padding: 8px; + padding: 8px; font-size: 14px; text-align: center; diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx index f17b0ec3..2f323143 100644 --- a/src/components/ui/Button.tsx +++ b/src/components/ui/Button.tsx @@ -6,24 +6,24 @@ interface Props { } export default styled.button` - z-index: 1; - padding: 8px; - font-size: 16px; - text-align: center; + z-index: 1; + padding: 8px; + font-size: 16px; + text-align: center; - transition: 0.2s ease opacity; - transition: 0.2s ease background-color; + transition: 0.2s ease opacity; + transition: 0.2s ease background-color; - background: var(--primary-background); + background: var(--primary-background); color: var(--foreground); - border-radius: 6px; - cursor: pointer; + border-radius: 6px; + cursor: pointer; border: none; - &:hover { - background: var(--secondary-header); - } + &:hover { + background: var(--secondary-header); + } &:disabled { background: var(--primary-background); @@ -33,33 +33,37 @@ export default styled.button` background: var(--secondary-background); } - ${props => props.contrast && css` - padding: 4px 8px; - background: var(--secondary-header); - - &:hover { - background: var(--primary-header); - } - - &:disabled { + ${(props) => + props.contrast && + css` + padding: 4px 8px; background: var(--secondary-header); - } - &:active { - background: var(--secondary-background); - } - `} + &:hover { + background: var(--primary-header); + } - ${props => props.error && css` - color: white; - background: var(--error); + &:disabled { + background: var(--secondary-header); + } - &:hover { - filter: brightness(1.2) - } + &:active { + background: var(--secondary-background); + } + `} - &:disabled { + ${(props) => + props.error && + css` + color: white; background: var(--error); - } - `} + + &:hover { + filter: brightness(1.2); + } + + &:disabled { + background: var(--error); + } + `} `; diff --git a/src/components/ui/Checkbox.tsx b/src/components/ui/Checkbox.tsx index ae837d1b..432b1f6c 100644 --- a/src/components/ui/Checkbox.tsx +++ b/src/components/ui/Checkbox.tsx @@ -1,9 +1,9 @@ -import { Check } from '@styled-icons/feather'; +import { Check } from "@styled-icons/feather"; import { Children } from "../../types/Preact"; -import styled, { css } from 'styled-components'; +import styled, { css } from "styled-components"; const CheckboxBase = styled.label` - gap: 4px; + gap: 4px; z-index: 1; padding: 4px; display: flex; @@ -13,8 +13,8 @@ const CheckboxBase = styled.label` cursor: pointer; font-size: 18px; user-select: none; - - transition: .2s ease all; + + transition: 0.2s ease all; p { margin: 0; @@ -53,9 +53,11 @@ const Checkmark = styled.div<{ checked: boolean }>` stroke-width: 2; } - ${ props => props.checked && css` - background: var(--accent); - ` } + ${(props) => + props.checked && + css` + background: var(--accent); + `} `; interface Props { @@ -71,7 +73,7 @@ export default function Checkbox(props: Props) { return ( - { props.children } + {props.children} {props.description && ( {props.description} @@ -89,5 +91,5 @@ export default function Checkbox(props: Props) { - ) + ); } diff --git a/src/components/ui/ColourSwatches.tsx b/src/components/ui/ColourSwatches.tsx index c86e9ffa..e6e2478e 100644 --- a/src/components/ui/ColourSwatches.tsx +++ b/src/components/ui/ColourSwatches.tsx @@ -1,7 +1,7 @@ -import { useRef } from 'preact/hooks'; -import { Check } from '@styled-icons/feather'; -import styled, { css } from 'styled-components'; -import { Pencil } from '@styled-icons/bootstrap'; +import { useRef } from "preact/hooks"; +import { Check } from "@styled-icons/feather"; +import styled, { css } from "styled-components"; +import { Pencil } from "@styled-icons/bootstrap"; interface Props { value: string; @@ -17,7 +17,7 @@ const presets = [ "#FF7F50", "#FD6671", "#E91E63", - "#D468EE" + "#D468EE", ], [ "#594CAD", @@ -27,8 +27,8 @@ const presets = [ "#CD5B45", "#FF424F", "#AD1457", - "#954AA8" - ] + "#954AA8", + ], ]; const SwatchesBase = styled.div` @@ -43,35 +43,38 @@ const SwatchesBase = styled.div` } `; -const Swatch = styled.div<{ type: 'small' | 'large', colour: string }>` +const Swatch = styled.div<{ type: "small" | "large"; colour: string }>` flex-shrink: 0; cursor: pointer; border-radius: 4px; - background-color: ${ props => props.colour }; + background-color: ${(props) => props.colour}; display: grid; place-items: center; &:hover { border: 3px solid var(--foreground); - transition: border ease-in-out .07s; + transition: border ease-in-out 0.07s; } svg { color: white; } - ${ props => props.type === 'small' ? css` - width: 30px; - height: 30px; + ${(props) => + props.type === "small" + ? css` + width: 30px; + height: 30px; - svg { - stroke-width: 2; - } - ` : css` - width: 68px; - height: 68px; - ` } + svg { + stroke-width: 2; + } + ` + : css` + width: 68px; + height: 68px; + `} `; const Rows = styled.div` @@ -91,28 +94,37 @@ export default function ColourSwatches({ value, onChange }: Props) { return ( - ref.current.click()}> + ref.current.click()} + > onChange(ev.currentTarget.value)} + onChange={(ev) => onChange(ev.currentTarget.value)} /> {presets.map((row, i) => (
- { row.map((swatch, i) => ( - onChange(swatch)}> - {swatch === value && } + {row.map((swatch, i) => ( + onChange(swatch)} + > + {swatch === value && ( + + )} - )) } + ))}
))} - ) + ); } diff --git a/src/components/ui/ComboBox.tsx b/src/components/ui/ComboBox.tsx index db328c8f..de2796c5 100644 --- a/src/components/ui/ComboBox.tsx +++ b/src/components/ui/ComboBox.tsx @@ -1,7 +1,7 @@ import styled from "styled-components"; export default styled.select` - padding: 8px; + padding: 8px; border-radius: 2px; color: var(--secondary-foreground); background: var(--secondary-background); diff --git a/src/components/ui/InputBox.tsx b/src/components/ui/InputBox.tsx index 1553fd3a..b27e6c57 100644 --- a/src/components/ui/InputBox.tsx +++ b/src/components/ui/InputBox.tsx @@ -12,7 +12,7 @@ export default styled.input` border: 2px solid transparent; background: var(--primary-background); transition: 0.2s ease background-color; - transition: border-color .2s ease-in-out; + transition: border-color 0.2s ease-in-out; &:hover { background: var(--secondary-background); @@ -22,12 +22,14 @@ export default styled.input` border: 2px solid var(--accent); } - ${ props => props.contrast && css` - color: var(--secondary-foreground); - background: var(--secondary-background); + ${(props) => + props.contrast && + css` + color: var(--secondary-foreground); + background: var(--secondary-background); - &:hover { - background: var(--hover); - } - ` } + &:hover { + background: var(--hover); + } + `} `; diff --git a/src/components/ui/LineDivider.tsx b/src/components/ui/LineDivider.tsx index 49ba6461..58a9c7a4 100644 --- a/src/components/ui/LineDivider.tsx +++ b/src/components/ui/LineDivider.tsx @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import styled from "styled-components"; export default styled.div` height: 0px; diff --git a/src/components/ui/Overline.tsx b/src/components/ui/Overline.tsx index f2db34f5..ee43499f 100644 --- a/src/components/ui/Overline.tsx +++ b/src/components/ui/Overline.tsx @@ -1,5 +1,5 @@ -import styled, { css } from 'styled-components'; -import { Children } from '../../types/Preact'; +import styled, { css } from "styled-components"; +import { Children } from "../../types/Preact"; interface Props { block?: boolean; @@ -8,7 +8,7 @@ interface Props { type?: "default" | "subtle" | "error"; } -const OverlineBase = styled.div>` +const OverlineBase = styled.div>` display: inline; margin: 0.4em 0; margin-top: 0.8em; @@ -18,30 +18,34 @@ const OverlineBase = styled.div>` color: var(--foreground); text-transform: uppercase; - ${ props => props.type === 'subtle' && css` - font-size: 12px; - color: var(--secondary-foreground); - ` } + ${(props) => + props.type === "subtle" && + css` + font-size: 12px; + color: var(--secondary-foreground); + `} - ${ props => props.type === 'error' && css` - font-size: 12px; - font-weight: 400; - color: var(--error); - ` } + ${(props) => + props.type === "error" && + css` + font-size: 12px; + font-weight: 400; + color: var(--error); + `} - ${ props => props.block && css`display: block;` } + ${(props) => + props.block && + css` + display: block; + `} `; export default function Overline(props: Props) { return ( - { props.children } - { props.children && props.error && <> · } - { props.error && ( - - { props.error } - - ) } + {props.children} + {props.children && props.error && <> · } + {props.error && {props.error}} - ) + ); } diff --git a/src/components/ui/Preloader.tsx b/src/components/ui/Preloader.tsx index 217d5b4c..4f92146c 100644 --- a/src/components/ui/Preloader.tsx +++ b/src/components/ui/Preloader.tsx @@ -1,3 +1,3 @@ export default function Preloader() { - return LOADING + return LOADING; } diff --git a/src/components/ui/Radio.tsx b/src/components/ui/Radio.tsx index b6cc9926..d6beb9a4 100644 --- a/src/components/ui/Radio.tsx +++ b/src/components/ui/Radio.tsx @@ -1,18 +1,18 @@ import { Children } from "../../types/Preact"; -import styled, { css } from 'styled-components'; +import styled, { css } from "styled-components"; import { CircleFill } from "@styled-icons/bootstrap"; interface Props { children: Children; description?: Children; - + checked: boolean; disabled?: boolean; onSelect: () => void; } interface BaseProps { - selected: boolean + selected: boolean; } const RadioBase = styled.label` @@ -22,12 +22,12 @@ const RadioBase = styled.label` display: flex; cursor: pointer; align-items: center; - + font-size: 1rem; font-weight: 600; user-select: none; border-radius: 4px; - transition: .2s ease all; + transition: 0.2s ease all; &:hover { background: var(--hover); @@ -52,23 +52,25 @@ const RadioBase = styled.label` } } - ${ props => props.selected && css` - color: white; - cursor: default; - background: var(--accent); - - > div { - background: white; - } - - > div svg { - color: var(--accent); - } - - &:hover { + ${(props) => + props.selected && + css` + color: white; + cursor: default; background: var(--accent); - } - ` } + + > div { + background: white; + } + + > div svg { + color: var(--accent); + } + + &:hover { + background: var(--accent); + } + `} `; const RadioDescription = styled.span` @@ -76,9 +78,11 @@ const RadioDescription = styled.span` font-weight: 400; color: var(--secondary-foreground); - ${ props => props.selected && css` - color: white; - ` } + ${(props) => + props.selected && + css` + color: white; + `} `; export default function Radio(props: Props) { @@ -86,15 +90,14 @@ export default function Radio(props: Props) { !props.disabled && props.onSelect && props.onSelect()} + onClick={() => + !props.disabled && props.onSelect && props.onSelect() + } >
- + {props.children} {props.description && ( @@ -105,4 +108,4 @@ export default function Radio(props: Props) { ); -} \ No newline at end of file +} diff --git a/src/components/ui/Tip.tsx b/src/components/ui/Tip.tsx index ed2bb953..b65ccc65 100644 --- a/src/components/ui/Tip.tsx +++ b/src/components/ui/Tip.tsx @@ -3,7 +3,7 @@ import { Info } from "@styled-icons/feather"; import { Children } from "../../types/Preact"; export const TipBase = styled.div` - display: flex; + display: flex; padding: 12px; overflow: hidden; align-items: center; @@ -19,7 +19,7 @@ export const TipBase = styled.div` text-decoration: underline; } } - + svg { flex-shrink: 0; margin-right: 10px; @@ -30,7 +30,7 @@ export default function Tip(props: { children: Children }) { return ( - { props.children } + {props.children} - ) + ); } diff --git a/src/context/Locale.tsx b/src/context/Locale.tsx index 6ff7155e..0403fedf 100644 --- a/src/context/Locale.tsx +++ b/src/context/Locale.tsx @@ -2,13 +2,9 @@ import { IntlProvider } from "preact-i18n"; import definition from "../../external/lang/en.json"; interface Props { - children: JSX.Element | JSX.Element[] + children: JSX.Element | JSX.Element[]; } export default function Locale({ children }: Props) { - return ( - - { children } - - ) + return {children}; } diff --git a/src/context/Theme.tsx b/src/context/Theme.tsx index 5a2b2806..4066eb99 100644 --- a/src/context/Theme.tsx +++ b/src/context/Theme.tsx @@ -1,17 +1,41 @@ import { createGlobalStyle } from "styled-components"; // ! TEMP START -const a = {light:false,accent:"#FD6671",background:"#191919",foreground:"#F6F6F6",block:"#2D2D2D","message-box":"#363636",mention:"rgba(251, 255, 0, 0.06)",success:"#65E572",warning:"#FAA352",error:"#F06464",hover:"rgba(0, 0, 0, 0.1)","sidebar-active":"#FD6671","scrollbar-thumb":"#CA525A","scrollbar-track":"transparent","primary-background":"#242424","primary-header":"#363636","secondary-background":"#1E1E1E","secondary-foreground":"#C8C8C8","secondary-header":"#2D2D2D","tertiary-background":"#4D4D4D","tertiary-foreground":"#848484","status-online":"#3ABF7E","status-away":"#F39F00","status-busy":"#F84848","status-streaming":"#977EFF","status-invisible":"#A5A5A5"}; +const a = { + light: false, + accent: "#FD6671", + background: "#191919", + foreground: "#F6F6F6", + block: "#2D2D2D", + "message-box": "#363636", + mention: "rgba(251, 255, 0, 0.06)", + success: "#65E572", + warning: "#FAA352", + error: "#F06464", + hover: "rgba(0, 0, 0, 0.1)", + "sidebar-active": "#FD6671", + "scrollbar-thumb": "#CA525A", + "scrollbar-track": "transparent", + "primary-background": "#242424", + "primary-header": "#363636", + "secondary-background": "#1E1E1E", + "secondary-foreground": "#C8C8C8", + "secondary-header": "#2D2D2D", + "tertiary-background": "#4D4D4D", + "tertiary-foreground": "#848484", + "status-online": "#3ABF7E", + "status-away": "#F39F00", + "status-busy": "#F84848", + "status-streaming": "#977EFF", + "status-invisible": "#A5A5A5", +}; export const GlobalTheme = createGlobalStyle` :root { - ${ - Object.keys(a) - .map(key => { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - return `--${key}: ${(a as any)[key]};`; - }) - } + ${Object.keys(a).map((key) => { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + return `--${key}: ${(a as any)[key]};`; + })} } `; // ! TEMP END diff --git a/src/main.tsx b/src/main.tsx index 1257d2e4..ea0c7dfb 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,6 +1,6 @@ -import { render } from 'preact' -import '../styles/index.scss' -import { App } from './app' +import { render } from "preact"; +import "../styles/index.scss"; +import { App } from "./app"; // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -render(, document.getElementById('app')!) +render(, document.getElementById("app")!); diff --git a/src/preact.d.ts b/src/preact.d.ts index bed71c7a..a2416c62 100644 --- a/src/preact.d.ts +++ b/src/preact.d.ts @@ -1,2 +1,2 @@ // eslint-disable-next-line @typescript-eslint/no-unused-vars -import JSX = preact.JSX +import JSX = preact.JSX; diff --git a/src/types/Preact.ts b/src/types/Preact.ts index 1563a6c1..b7b47798 100644 --- a/src/types/Preact.ts +++ b/src/types/Preact.ts @@ -1,3 +1,3 @@ -import { VNode } from 'preact'; +import { VNode } from "preact"; export type Children = VNode | (VNode | string)[] | string; diff --git a/yarn.lock b/yarn.lock index e68c680e..07a04f06 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1751,6 +1751,11 @@ prelude-ls@^1.2.1: resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396" integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g== +prettier@^2.3.1: + version "2.3.1" + resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.3.1.tgz#76903c3f8c4449bc9ac597acefa24dc5ad4cbea6" + integrity sha512-p+vNbgpLjif/+D+DwAZAbndtRrR0md0MwfmOVN9N+2RgyACMT+7tfaRnT+WDPkqnuVwleyuBIG2XBxKDme3hPA== + progress@^2.0.0: version "2.0.3" resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"