cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-12-24 06:32:08 -05:00
Code Issues Projects Releases Packages Wiki Activity

Add prettier.

Browse source
This commit is contained in:
Paul 2021-06-18 15:57:08 +01:00
parent 34a4bccbbe
commit 0cba2b362d
20 changed files with 222 additions and 168 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.prettierrc Normal file
View file

@ -0,0 +1 @@
tabWidth: 4

4
package.json
View file

@ -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",

11
src/app.tsx
View file

@ -1,8 +1,7 @@
export function App() {
return (
<>
<h1>REVOLT</h1>
</>
)
return (
<>
<h1>REVOLT</h1>
</>
);
}

2
src/components/ui/Banner.tsx
View file

@ -1,7 +1,7 @@
import styled from "styled-components";
export default styled.div`
padding: 8px;
padding: 8px;
font-size: 14px;
text-align: center;

74
src/components/ui/Button.tsx
View file

@ -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);
}
`}
`;

22
src/components/ui/Checkbox.tsx
View file

@ -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>
)
);
}

70
src/components/ui/ColourSwatches.tsx
View file

@ -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>
)
);
}

2
src/components/ui/ComboBox.tsx
View file

@ -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);

18
src/components/ui/InputBox.tsx
View file

@ -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);
}
`}
`;

2
src/components/ui/LineDivider.tsx
View file

@ -1,4 +1,4 @@
import styled from 'styled-components';
import styled from "styled-components";
export default styled.div`
height: 0px;

46
src/components/ui/Overline.tsx
View file

@ -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 && <> &middot; </> }
{ props.error && (
<Overline type="error">
{ props.error }
</Overline>
) }
{props.children}
{props.children && props.error && <> &middot; </>}
{props.error && <Overline type="error">{props.error}</Overline>}
</OverlineBase>
)
);
}

2
src/components/ui/Preloader.tsx
View file

@ -1,3 +1,3 @@
export default function Preloader() {
return <span>LOADING</span>
return <span>LOADING</span>;
}

63
src/components/ui/Radio.tsx
View file

@ -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);
> 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<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>
);
}
}

8
src/components/ui/Tip.tsx
View file

@ -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>
)
);
}

8
src/context/Locale.tsx
View file

@ -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>;
}

40
src/context/Theme.tsx
View file

@ -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

8
src/main.tsx
View file

@ -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")!);

2
src/preact.d.ts vendored
View file

@ -1,2 +1,2 @@
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import JSX = preact.JSX
import JSX = preact.JSX;

2
src/types/Preact.ts
View file

@ -1,3 +1,3 @@
import { VNode } from 'preact';
import { VNode } from "preact";
export type Children = VNode | (VNode | string)[] | string;

5
yarn.lock
View file

@ -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"