cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-11-29 02:10:59 -05:00
Code Issues Projects Releases Packages Wiki Activity

Add i18n, use default imports for UI.

Browse source
This commit is contained in:
Paul 2021-06-18 15:18:10 +01:00
parent 9ac2316ed0
commit 58821476e6
17 changed files with 90 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
.gitmodules vendored Normal file
View file

@ -0,0 +1,3 @@
[submodule "external/lang"]
path = external/lang
url = https://gitlab.insrt.uk/revolt/translations

1
external/lang vendored Submodule

@ -0,0 +1 @@
Subproject commit 0334783257c0b1cd47ee9affdc1a0dddc127edf2

3
package.json
View file

@ -13,8 +13,9 @@
"@preact/preset-vite": "^2.0.0", "@preact/preset-vite": "^2.0.0",
"@styled-icons/bootstrap": "^10.34.0", "@styled-icons/bootstrap": "^10.34.0",
"@styled-icons/feather": "^10.34.0", "@styled-icons/feather": "^10.34.0",
"@types/preact-i18n": "^2.3.0",
"@types/styled-components": "^5.1.10", "@types/styled-components": "^5.1.10",
"preact-i18n": "^1.5.0", "preact-i18n": "^2.4.0-preactx",
"react-overlapping-panels": "1.1.2-patch.0", "react-overlapping-panels": "1.1.2-patch.0",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"sass": "^1.35.1", "sass": "^1.35.1",

78
src/app.tsx
View file

@ -1,15 +1,17 @@
import styled, { createGlobalStyle } from 'styled-components'; import styled, { createGlobalStyle } from 'styled-components';
import { useState } from 'preact/hooks'; import { useState } from 'preact/hooks';
import { Button } from './components/ui/Button'; import Button from './components/ui/Button';
import { Banner } from './components/ui/Banner'; import Banner from './components/ui/Banner';
import { Checkbox } from './components/ui/Checkbox'; import Checkbox from './components/ui/Checkbox';
import { ComboBox } from './components/ui/ComboBox'; import ComboBox from './components/ui/ComboBox';
import { InputBox } from './components/ui/InputBox'; import InputBox from './components/ui/InputBox';
import { ColourSwatches } from './components/ui/ColourSwatches'; import ColourSwatches from './components/ui/ColourSwatches';
import { Tip } from './components/ui/Tip'; import Tip from './components/ui/Tip';
import { Radio } from './components/ui/Radio'; import Radio from './components/ui/Radio';
import { Overline } from './components/ui/Overline'; import Overline from './components/ui/Overline';
import Locale from './context/Locale';
// ! TEMP START // ! TEMP START
let 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"}; let 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"};
@ -42,34 +44,36 @@ export function App() {
return ( return (
<> <>
<GlobalTheme /> <GlobalTheme />
<UIDemo> <Locale>
<Button>Button (normal)</Button> <UIDemo>
<Button contrast>Button (contrast)</Button> <Button>Button (normal)</Button>
<Button error>Button (error)</Button> <Button contrast>Button (contrast)</Button>
<Button contrast error>Button (contrast + error)</Button> <Button error>Button (error)</Button>
<Banner>I am a banner!</Banner> <Button contrast error>Button (contrast + error)</Button>
<Checkbox checked={checked} onChange={setChecked} description="ok gamer">Do you want thing??</Checkbox> <Banner>I am a banner!</Banner>
<ComboBox> <Checkbox checked={checked} onChange={setChecked} description="ok gamer">Do you want thing??</Checkbox>
<option>Select an option.</option> <ComboBox>
<option>1</option> <option>Select an option.</option>
<option>2</option> <option>1</option>
<option>3</option> <option>2</option>
</ComboBox> <option>3</option>
<InputBox placeholder="Normal input box..." /> </ComboBox>
<InputBox placeholder="Contrast input box..." contrast /> <InputBox placeholder="Normal input box..." />
<InputBox value="Input box with value" /> <InputBox placeholder="Contrast input box..." contrast />
<InputBox value="Contrast with value" contrast /> <InputBox value="Input box with value" />
<ColourSwatches value={colour} onChange={v => setColour(v)} /> <InputBox value="Contrast with value" contrast />
<Tip>I am a tip! I provide valuable information.</Tip> <ColourSwatches value={colour} onChange={v => setColour(v)} />
<Radio checked={selected === 'a'} onSelect={() => setSelected('a')}>First option</Radio> <Tip>I am a tip! I provide valuable information.</Tip>
<Radio checked={selected === 'b'} onSelect={() => setSelected('b')}>Second option</Radio> <Radio checked={selected === 'a'} onSelect={() => setSelected('a')}>First option</Radio>
<Radio checked={selected === 'c'} onSelect={() => setSelected('c')}>Last option</Radio> <Radio checked={selected === 'b'} onSelect={() => setSelected('b')}>Second option</Radio>
<Overline>Normal overline</Overline> <Radio checked={selected === 'c'} onSelect={() => setSelected('c')}>Last option</Radio>
<Overline type="subtle">Subtle overline</Overline> <Overline>Normal overline</Overline>
<Overline type="error">Error overline</Overline> <Overline type="subtle">Subtle overline</Overline>
<Overline error="with error">Normal overline</Overline> <Overline type="error">Error overline</Overline>
<Overline type="subtle" error="with error">Subtle overline</Overline> <Overline error="with error">Normal overline</Overline>
</UIDemo> <Overline type="subtle" error="with error">Subtle overline</Overline>
</UIDemo>
</Locale>
</> </>
) )
} }

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

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

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

@ -5,7 +5,7 @@ interface Props {
readonly error?: boolean; readonly error?: boolean;
}; };
export const Button = styled.button<Props>` export default styled.button<Props>`
z-index: 1; z-index: 1;
padding: 8px; padding: 8px;
font-size: 16px; font-size: 16px;

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

@ -67,7 +67,7 @@ interface Props {
onChange: (state: boolean) => void; onChange: (state: boolean) => void;
} }
export function Checkbox(props: Props) { export default function Checkbox(props: Props) {
return ( return (
<CheckboxBase disabled={props.disabled}> <CheckboxBase disabled={props.disabled}>
<CheckboxContent> <CheckboxContent>

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

@ -86,7 +86,7 @@ const Rows = styled.div`
} }
`; `;
export function ColourSwatches({ value, onChange }: Props) { export default function ColourSwatches({ value, onChange }: Props) {
const ref = useRef<HTMLInputElement>(); const ref = useRef<HTMLInputElement>();
return ( return (

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

@ -1,6 +1,6 @@
import styled from "styled-components"; import styled from "styled-components";
export const ComboBox = styled.select` export default styled.select`
padding: 8px; padding: 8px;
border-radius: 2px; border-radius: 2px;
color: var(--secondary-foreground); color: var(--secondary-foreground);

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

@ -4,7 +4,7 @@ interface Props {
readonly contrast?: boolean; readonly contrast?: boolean;
}; };
export const InputBox = styled.input<Props>` export default styled.input<Props>`
z-index: 1; z-index: 1;
padding: 8px 16px; padding: 8px 16px;
border-radius: 6px; border-radius: 6px;

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

@ -1,6 +1,6 @@
import styled from 'styled-components'; import styled from 'styled-components';
export const LineDivider = styled.div` export default styled.div`
height: 0px; height: 0px;
opacity: 0.6; opacity: 0.6;
flex-shrink: 0; flex-shrink: 0;

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

@ -32,7 +32,7 @@ const OverlineBase = styled.div<Omit<Props, 'children' | 'error'>>`
${ props => props.block && css`display: block;` } ${ props => props.block && css`display: block;` }
`; `;
export function Overline(props: Props) { export default function Overline(props: Props) {
return ( return (
<OverlineBase {...props}> <OverlineBase {...props}>
{ props.children } { props.children }

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

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

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

@ -81,7 +81,7 @@ const RadioDescription = styled.span<BaseProps>`
` } ` }
`; `;
export function Radio(props: Props) { export default function Radio(props: Props) {
return ( return (
<RadioBase <RadioBase
selected={props.checked} selected={props.checked}

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

@ -26,7 +26,7 @@ export const TipBase = styled.div`
} }
`; `;
export function Tip(props: { children: Children }) { export default function Tip(props: { children: Children }) {
return ( return (
<TipBase> <TipBase>
<Info size={20} strokeWidth={2} /> <Info size={20} strokeWidth={2} />

14
src/context/Locale.tsx Normal file
View file

@ -0,0 +1,14 @@
import { IntlProvider } from "preact-i18n";
import definition from "../../external/lang/en.json";
interface Props {
children: JSX.Element | JSX.Element[]
}
export default function Locale({ children }: Props) {
return (
<IntlProvider definition={definition}>
{ children }
</IntlProvider>
)
}

23
yarn.lock
View file

@ -318,6 +318,13 @@
"@types/react" "*" "@types/react" "*"
hoist-non-react-statics "^3.3.0" hoist-non-react-statics "^3.3.0"
"@types/preact-i18n@^2.3.0":
version "2.3.0"
resolved "https://registry.yarnpkg.com/@types/preact-i18n/-/preact-i18n-2.3.0.tgz#d99d4a9ad03b0b65e57ed4d874447de74384e32f"
integrity sha512-qDgb5QbPnWJ141y+fca5R3MBQis5h7ITnSB9WQiHj5WH41Q5g9Wc4rCnqYERfqSBSC0ac4cE1JAlFisiAUIiLw==
dependencies:
preact "^10.0.0"
"@types/prop-types@*": "@types/prop-types@*":
version "15.7.3" version "15.7.3"
resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7" resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
@ -745,14 +752,20 @@ postcss@^8.3.0:
nanoid "^3.1.23" nanoid "^3.1.23"
source-map-js "^0.6.2" source-map-js "^0.6.2"
preact-i18n@^1.5.0: preact-i18n@^2.4.0-preactx:
version "1.5.0" version "2.4.0-preactx"
resolved "https://registry.yarnpkg.com/preact-i18n/-/preact-i18n-1.5.0.tgz#f9e2ad29cb3abc8b810554963cc90f1a52242605" resolved "https://registry.yarnpkg.com/preact-i18n/-/preact-i18n-2.4.0-preactx.tgz#fbcb2e3ae22744c7fef5a102db2ef7506057d082"
integrity sha512-gOSyXag3uP1ISSvpcvfP8rdONeLxtQWCEfEZyt+REnGcBUzEWwf7/tjBVZp/ymZeTv4mGh9sALd1NqPYyICkRA== integrity sha512-XJ15wZKdJrpuz2KBs8BkDB9gl85MjIkER5tx8r6RM1+j53hw3/XzUq2DMnkMoLVQiS0VSPI6bXk41CioKwTJIA==
dependencies: dependencies:
dlv "^1.1.3" dlv "^1.1.3"
preact-markup "^2.0.0"
preact@^10.5.13: preact-markup@^2.0.0:
version "2.1.1"
resolved "https://registry.yarnpkg.com/preact-markup/-/preact-markup-2.1.1.tgz#0451e7eed1dac732d7194c34a7f16ff45a2cfdd7"
integrity sha512-8JL2p36mzK8XkspOyhBxUSPjYwMxDM0L5BWBZWxsZMVW8WsGQrYQDgVuDKkRspt2hwrle+Cxr/053hpc9BJwfw==
preact@^10.0.0, preact@^10.5.13:
version "10.5.13" version "10.5.13"
resolved "https://registry.yarnpkg.com/preact/-/preact-10.5.13.tgz#85f6c9197ecd736ce8e3bec044d08fd1330fa019" resolved "https://registry.yarnpkg.com/preact/-/preact-10.5.13.tgz#85f6c9197ecd736ce8e3bec044d08fd1330fa019"
integrity sha512-q/vlKIGNwzTLu+jCcvywgGrt+H/1P/oIRSD6mV4ln3hmlC+Aa34C7yfPI4+5bzW8pONyVXYS7SvXosy2dKKtWQ== integrity sha512-q/vlKIGNwzTLu+jCcvywgGrt+H/1P/oIRSD6mV4ln3hmlC+Aa34C7yfPI4+5bzW8pONyVXYS7SvXosy2dKKtWQ==