From 58821476e63548abde3adb786d3b6b126d4e3a2b Mon Sep 17 00:00:00 2001 From: Paul Date: Fri, 18 Jun 2021 15:18:10 +0100 Subject: [PATCH] Add i18n, use default imports for UI. --- .gitmodules | 3 ++ external/lang | 1 + package.json | 3 +- src/app.tsx | 78 +++++++++++++++------------- src/components/ui/Banner.tsx | 2 +- src/components/ui/Button.tsx | 2 +- src/components/ui/Checkbox.tsx | 2 +- src/components/ui/ColourSwatches.tsx | 2 +- src/components/ui/ComboBox.tsx | 2 +- src/components/ui/InputBox.tsx | 2 +- src/components/ui/LineDivider.tsx | 2 +- src/components/ui/Overline.tsx | 2 +- src/components/ui/Preloader.tsx | 2 +- src/components/ui/Radio.tsx | 2 +- src/components/ui/Tip.tsx | 2 +- src/context/Locale.tsx | 14 +++++ yarn.lock | 23 ++++++-- 17 files changed, 90 insertions(+), 54 deletions(-) create mode 100644 .gitmodules create mode 160000 external/lang create mode 100644 src/context/Locale.tsx diff --git a/.gitmodules b/.gitmodules new file mode 100644 index 00000000..481dd10f --- /dev/null +++ b/.gitmodules @@ -0,0 +1,3 @@ +[submodule "external/lang"] + path = external/lang + url = https://gitlab.insrt.uk/revolt/translations diff --git a/external/lang b/external/lang new file mode 160000 index 00000000..03347832 --- /dev/null +++ b/external/lang @@ -0,0 +1 @@ +Subproject commit 0334783257c0b1cd47ee9affdc1a0dddc127edf2 diff --git a/package.json b/package.json index 96d4b973..d64671a4 100644 --- a/package.json +++ b/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", diff --git a/src/app.tsx b/src/app.tsx index 5b9d0496..c16cf4ca 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -1,15 +1,17 @@ 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 ( <> - - - - - - I am a banner! - Do you want thing?? - - - - - - - - - - - setColour(v)} /> - I am a tip! I provide valuable information. - setSelected('a')}>First option - setSelected('b')}>Second option - setSelected('c')}>Last option - Normal overline - Subtle overline - Error overline - Normal overline - Subtle overline - + + + + + + + I am a banner! + Do you want thing?? + + + + + + + + + + + setColour(v)} /> + I am a tip! I provide valuable information. + setSelected('a')}>First option + setSelected('b')}>Second option + setSelected('c')}>Last option + Normal overline + Subtle overline + Error overline + Normal overline + Subtle overline + + ) } diff --git a/src/components/ui/Banner.tsx b/src/components/ui/Banner.tsx index 15c0d5ca..04bc326f 100644 --- a/src/components/ui/Banner.tsx +++ b/src/components/ui/Banner.tsx @@ -1,6 +1,6 @@ import styled from "styled-components"; -export const Banner = styled.div` +export default styled.div` padding: 8px; font-size: 14px; text-align: center; diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx index 3952e354..e4d949e0 100644 --- a/src/components/ui/Button.tsx +++ b/src/components/ui/Button.tsx @@ -5,7 +5,7 @@ interface Props { readonly error?: boolean; }; -export const Button = styled.button` +export default styled.button` z-index: 1; padding: 8px; font-size: 16px; diff --git a/src/components/ui/Checkbox.tsx b/src/components/ui/Checkbox.tsx index bccbefb1..ae837d1b 100644 --- a/src/components/ui/Checkbox.tsx +++ b/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 ( diff --git a/src/components/ui/ColourSwatches.tsx b/src/components/ui/ColourSwatches.tsx index 4c33340b..71f71264 100644 --- a/src/components/ui/ColourSwatches.tsx +++ b/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(); return ( diff --git a/src/components/ui/ComboBox.tsx b/src/components/ui/ComboBox.tsx index 75944142..db328c8f 100644 --- a/src/components/ui/ComboBox.tsx +++ b/src/components/ui/ComboBox.tsx @@ -1,6 +1,6 @@ import styled from "styled-components"; -export const ComboBox = styled.select` +export default styled.select` padding: 8px; border-radius: 2px; color: var(--secondary-foreground); diff --git a/src/components/ui/InputBox.tsx b/src/components/ui/InputBox.tsx index cf8ab637..d5c0d9c7 100644 --- a/src/components/ui/InputBox.tsx +++ b/src/components/ui/InputBox.tsx @@ -4,7 +4,7 @@ interface Props { readonly contrast?: boolean; }; -export const InputBox = styled.input` +export default styled.input` z-index: 1; padding: 8px 16px; border-radius: 6px; diff --git a/src/components/ui/LineDivider.tsx b/src/components/ui/LineDivider.tsx index 93fbcdfc..49ba6461 100644 --- a/src/components/ui/LineDivider.tsx +++ b/src/components/ui/LineDivider.tsx @@ -1,6 +1,6 @@ import styled from 'styled-components'; -export const LineDivider = styled.div` +export default styled.div` height: 0px; opacity: 0.6; flex-shrink: 0; diff --git a/src/components/ui/Overline.tsx b/src/components/ui/Overline.tsx index 4aaef59f..f2db34f5 100644 --- a/src/components/ui/Overline.tsx +++ b/src/components/ui/Overline.tsx @@ -32,7 +32,7 @@ const OverlineBase = styled.div>` ${ props => props.block && css`display: block;` } `; -export function Overline(props: Props) { +export default function Overline(props: Props) { return ( { props.children } diff --git a/src/components/ui/Preloader.tsx b/src/components/ui/Preloader.tsx index 79cd39c5..217d5b4c 100644 --- a/src/components/ui/Preloader.tsx +++ b/src/components/ui/Preloader.tsx @@ -1,3 +1,3 @@ -export function Preloader() { +export default function Preloader() { return LOADING } diff --git a/src/components/ui/Radio.tsx b/src/components/ui/Radio.tsx index 0ca1828d..b6cc9926 100644 --- a/src/components/ui/Radio.tsx +++ b/src/components/ui/Radio.tsx @@ -81,7 +81,7 @@ const RadioDescription = styled.span` ` } `; -export function Radio(props: Props) { +export default function Radio(props: Props) { return ( diff --git a/src/context/Locale.tsx b/src/context/Locale.tsx new file mode 100644 index 00000000..6ff7155e --- /dev/null +++ b/src/context/Locale.tsx @@ -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 ( + + { children } + + ) +} diff --git a/yarn.lock b/yarn.lock index 85009143..f68abfd6 100644 --- a/yarn.lock +++ b/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@^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" resolved "https://registry.yarnpkg.com/preact/-/preact-10.5.13.tgz#85f6c9197ecd736ce8e3bec044d08fd1330fa019" integrity sha512-q/vlKIGNwzTLu+jCcvywgGrt+H/1P/oIRSD6mV4ln3hmlC+Aa34C7yfPI4+5bzW8pONyVXYS7SvXosy2dKKtWQ==