Add i18n, use default imports for UI.

.gitmodules

+[submodule "external/lang"]
+	path = external/lang
+	url = https://gitlab.insrt.uk/revolt/translations

lang @ 03347832

+Subproject commit 0334783257c0b1cd47ee9affdc1a0dddc127edf2

package.json

@@ -13,8 +13,9 @@
     "@preact/preset-vite": "^2.0.0",
     "@styled-icons/bootstrap": "^10.34.0",
     "@styled-icons/feather": "^10.34.0",
+    "@types/preact-i18n": "^2.3.0",
     "@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",
     "rimraf": "^3.0.2",
     "sass": "^1.35.1",

src/app.tsx

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

src/components/ui/Banner.tsx

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

src/components/ui/Button.tsx

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

src/components/ui/Checkbox.tsx

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

src/components/ui/ColourSwatches.tsx

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

src/components/ui/ComboBox.tsx

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

src/components/ui/InputBox.tsx

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

src/components/ui/LineDivider.tsx

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

src/components/ui/Overline.tsx

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

src/components/ui/Preloader.tsx

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

src/components/ui/Radio.tsx

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

src/components/ui/Tip.tsx

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

src/context/Locale.tsx

+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>
+    )
+}

yarn.lock

@@ -318,6 +318,13 @@
     "@types/react" "*"
     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@*":
   version "15.7.3"
   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"
     source-map-js "^0.6.2"
 
-preact-i18n@^1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/preact-i18n/-/preact-i18n-1.5.0.tgz#f9e2ad29cb3abc8b810554963cc90f1a52242605"
-  integrity sha512-gOSyXag3uP1ISSvpcvfP8rdONeLxtQWCEfEZyt+REnGcBUzEWwf7/tjBVZp/ymZeTv4mGh9sALd1NqPYyICkRA==
+preact-i18n@^2.4.0-preactx:
+  version "2.4.0-preactx"
+  resolved "https://registry.yarnpkg.com/preact-i18n/-/preact-i18n-2.4.0-preactx.tgz#fbcb2e3ae22744c7fef5a102db2ef7506057d082"
+  integrity sha512-XJ15wZKdJrpuz2KBs8BkDB9gl85MjIkER5tx8r6RM1+j53hw3/XzUq2DMnkMoLVQiS0VSPI6bXk41CioKwTJIA==
   dependencies:
     dlv "^1.1.3"
+    preact-markup "^2.0.0"
+
+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.5.13:
+preact@^10.0.0, preact@^10.5.13:
   version "10.5.13"
   resolved "https://registry.yarnpkg.com/preact/-/preact-10.5.13.tgz#85f6c9197ecd736ce8e3bec044d08fd1330fa019"
   integrity sha512-q/vlKIGNwzTLu+jCcvywgGrt+H/1P/oIRSD6mV4ln3hmlC+Aa34C7yfPI4+5bzW8pONyVXYS7SvXosy2dKKtWQ==