diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000000000000000000000000000000000000..68ea04de8c0a14621ec980cf503c6d09e04a9038
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1 @@
+tabWidth: 4
\ No newline at end of file
diff --git a/package.json b/package.json
index 7853ca241f0f7ae7728bd73f06de0c4046e303ad..d6845c4557f8ec778e5b179a40a6dd711051fbae 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 9afc23d2e4e632913373f1ffce216add288dcf50..f47efe3cd32b772a6e41d00084bf658758e0e612 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -1,8 +1,7 @@
export function App() {
- return (
- <>
- <h1>REVOLT</h1>
- </>
- )
+ return (
+ <>
+ <h1>REVOLT</h1>
+ </>
+ );
}
-
\ No newline at end of file
diff --git a/src/components/ui/Banner.tsx b/src/components/ui/Banner.tsx
index 04bc326ff150f3983c8f710c35b1f4ec225290cd..4b96d20529087d7b5645239279575ad6f27fd83f 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 f17b0ec3de390579645fe45ed2e224ff5cb933b1..2f3231430695e22e461939aa23a2dec893bac6a1 100644
--- a/src/components/ui/Button.tsx
+++ b/src/components/ui/Button.tsx
@@ -6,24 +6,24 @@ interface Props {
}
export default styled.button<Props>`
- 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<Props>`
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 ae837d1b35d0f413054a937929a844871e4aa3bf..432b1f6c9645bc267e9cbecf8f2545462f518927 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 (
<CheckboxBase disabled={props.disabled}>
<CheckboxContent>
- <span>{ props.children }</span>
+ <span>{props.children}</span>
{props.description && (
<CheckboxDescription>
{props.description}
@@ -89,5 +91,5 @@ export default function Checkbox(props: Props) {
<Check size={20} />
</Checkmark>
</CheckboxBase>
- )
+ );
}
diff --git a/src/components/ui/ColourSwatches.tsx b/src/components/ui/ColourSwatches.tsx
index c86e9ffaec00272bd9bc2239be2e80c17bc63e4f..e6e2478eef8be1cf0f4dc9cefa1f206b1a85c08a 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 (
<SwatchesBase>
- <Swatch colour={value} type='large'
- onClick={() => ref.current.click()}>
+ <Swatch
+ colour={value}
+ type="large"
+ onClick={() => ref.current.click()}
+ >
<Pencil size={32} />
</Swatch>
<input
type="color"
value={value}
ref={ref}
- onChange={ev => onChange(ev.currentTarget.value)}
+ onChange={(ev) => onChange(ev.currentTarget.value)}
/>
<Rows>
{presets.map((row, i) => (
<div key={i}>
- { row.map((swatch, i) => (
- <Swatch colour={swatch} type='small' key={i}
- onClick={() => onChange(swatch)}>
- {swatch === value && <Check size={18} strokeWidth={2} />}
+ {row.map((swatch, i) => (
+ <Swatch
+ colour={swatch}
+ type="small"
+ key={i}
+ onClick={() => onChange(swatch)}
+ >
+ {swatch === value && (
+ <Check size={18} strokeWidth={2} />
+ )}
</Swatch>
- )) }
+ ))}
</div>
))}
</Rows>
</SwatchesBase>
- )
+ );
}
diff --git a/src/components/ui/ComboBox.tsx b/src/components/ui/ComboBox.tsx
index db328c8fda6aab1e477004ab930bb994dfc91519..de2796c57420493a08dbf68e33db7d6df669c37b 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 1553fd3af3e57e17219f39c1261b2b8edd09b445..b27e6c57c30e20937913ae976451dde029a39a44 100644
--- a/src/components/ui/InputBox.tsx
+++ b/src/components/ui/InputBox.tsx
@@ -12,7 +12,7 @@ export default styled.input<Props>`
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<Props>`
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 49ba646139e12c0cd81e6c9465c9138e2e2da934..58a9c7a45817feddd3bd9eb9aa9bc1b73dc2dd63 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 f2db34f5f1ea856e70de2bdb14a85244feb91aa2..ee43499fad6a88a2a92a9a7afaadba261493d73e 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<Omit<Props, 'children' | 'error'>>`
+const OverlineBase = styled.div<Omit<Props, "children" | "error">>`
display: inline;
margin: 0.4em 0;
margin-top: 0.8em;
@@ -18,30 +18,34 @@ const OverlineBase = styled.div<Omit<Props, 'children' | 'error'>>`
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 (
<OverlineBase {...props}>
- { props.children }
- { props.children && props.error && <> · </> }
- { props.error && (
- <Overline type="error">
- { props.error }
- </Overline>
- ) }
+ {props.children}
+ {props.children && props.error && <> · </>}
+ {props.error && <Overline type="error">{props.error}</Overline>}
</OverlineBase>
- )
+ );
}
diff --git a/src/components/ui/Preloader.tsx b/src/components/ui/Preloader.tsx
index 217d5b4c830eb25ff752ab230c4db8d527c0824d..4f92146c689784e3bc8b52fea4774335f96a933e 100644
--- a/src/components/ui/Preloader.tsx
+++ b/src/components/ui/Preloader.tsx
@@ -1,3 +1,3 @@
export default function Preloader() {
- return <span>LOADING</span>
+ return <span>LOADING</span>;
}
diff --git a/src/components/ui/Radio.tsx b/src/components/ui/Radio.tsx
index b6cc99269547d1b03a13315eb5e06852da528036..d6beb9a4754bd60fde594c7841585b114ff2ef78 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<BaseProps>`
@@ -22,12 +22,12 @@ const RadioBase = styled.label<BaseProps>`
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<BaseProps>`
}
}
- ${ props => props.selected && css`
- color: white;
- cursor: default;
- background: var(--accent);
+ ${(props) =>
+ props.selected &&
+ css`
+ color: white;
+ cursor: default;
+ background: var(--accent);
- > div {
- background: white;
- }
+ > div {
+ background: white;
+ }
- > div svg {
- color: var(--accent);
- }
+ > div svg {
+ color: var(--accent);
+ }
- &:hover {
- background: var(--accent);
- }
- ` }
+ &:hover {
+ background: var(--accent);
+ }
+ `}
`;
const RadioDescription = styled.span<BaseProps>`
@@ -76,9 +78,11 @@ const RadioDescription = styled.span<BaseProps>`
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) {
<RadioBase
selected={props.checked}
disabled={props.disabled}
- onClick={() => !props.disabled && props.onSelect && props.onSelect()}
+ onClick={() =>
+ !props.disabled && props.onSelect && props.onSelect()
+ }
>
<div>
<CircleFill size={12} />
</div>
- <input
- type="radio"
- checked={props.checked}
- />
+ <input type="radio" checked={props.checked} />
<span>
<span>{props.children}</span>
{props.description && (
@@ -105,4 +108,4 @@ export default function Radio(props: Props) {
</span>
</RadioBase>
);
-}
\ No newline at end of file
+}
diff --git a/src/components/ui/Tip.tsx b/src/components/ui/Tip.tsx
index ed2bb95388794dcc1fbc823018a770e30632dc58..b65ccc65b2ff8125f770ec09c939a82efd6750f8 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 (
<TipBase>
<Info size={20} strokeWidth={2} />
- <span>{ props.children }</span>
+ <span>{props.children}</span>
</TipBase>
- )
+ );
}
diff --git a/src/context/Locale.tsx b/src/context/Locale.tsx
index 6ff7155e7f01ac48f91339719a2da728e6178a97..0403fedffc5738564f087bd50285b5ac9f7def30 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 (
- <IntlProvider definition={definition}>
- { children }
- </IntlProvider>
- )
+ return <IntlProvider definition={definition}>{children}</IntlProvider>;
}
diff --git a/src/context/Theme.tsx b/src/context/Theme.tsx
index 5a2b2806a4cf612694caa0de9a2f085c9d4c15a9..4066eb99d4d50bdda32f52254b6459bc0d7c7259 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 1257d2e479385254d6e99708ae1df87299226fd4..ea0c7dfb9d741e10f1ac7ad5a1053f2e171dd13d 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(<App />, document.getElementById('app')!)
+render(<App />, document.getElementById("app")!);
diff --git a/src/preact.d.ts b/src/preact.d.ts
index bed71c7a5e9321bb7d54299d61a36c91cd2d59a7..a2416c62481f4b28b568bea4626d6a2f46fbc9eb 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 1563a6c11285612fd835c78ff82ac3d2f1acc482..b7b477985b397da40b53e1bd49811b2e858e0b7c 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 e68c680e0c1d319802ce1215a06b5613e29172dd..07a04f06cd23ffe9dd24c10a563fa779dfbbfe5b 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"