HMC/handmade-revolt
2
0
Fork 0
forked from abner/for-legacy-web
Code Pull Requests Actions 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
Download Patch File Download Diff File Expand all files Collapse all files

78
src/app.tsx
View File

@@ -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 (
<>
<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>
</>
)
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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;` }
`;
export function Overline(props: Props) {
export default function Overline(props: Props) {
return (
<OverlineBase {...props}>
{ 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>
}

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 (
<RadioBase
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 (
<TipBase>
<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>
)
}