mirror of
https://github.com/revoltchat/revite.git
synced 2024-11-21 22:50:59 -05:00
Move UI into its own page.
This commit is contained in:
Paul
parent
58821476e6
commit
8bb6cd456b
15 changed files with 201 additions and 163 deletions
|
|
@ -8,6 +8,6 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<script type="module" src="/src/main.tsx"></script>
|
<script type="module" src="/src/entrypoints/main.tsx"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -13,6 +13,7 @@
|
||||||
"@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/node": "^15.12.3",
|
||||||
"@types/preact-i18n": "^2.3.0",
|
"@types/preact-i18n": "^2.3.0",
|
||||||
"@types/styled-components": "^5.1.10",
|
"@types/styled-components": "^5.1.10",
|
||||||
"preact-i18n": "^2.4.0-preactx",
|
"preact-i18n": "^2.4.0-preactx",
|
||||||
|
|
|
||||||
74
src/app.tsx
74
src/app.tsx
|
|
@ -1,79 +1,7 @@
|
||||||
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 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"};
|
|
||||||
|
|
||||||
const GlobalTheme = createGlobalStyle`
|
|
||||||
:root {
|
|
||||||
${
|
|
||||||
Object.keys(a)
|
|
||||||
.map(key => {
|
|
||||||
return `--${key}: ${(a as any)[key]};`;
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
// ! TEMP END
|
|
||||||
|
|
||||||
export const UIDemo = styled.div`
|
|
||||||
gap: 12px;
|
|
||||||
padding: 12px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
`;
|
|
||||||
|
|
||||||
export function App() {
|
export function App() {
|
||||||
let [checked, setChecked] = useState(false);
|
|
||||||
let [colour, setColour] = useState('#FD6671');
|
|
||||||
let [selected, setSelected] = useState<'a' | 'b' | 'c'>('a');
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<GlobalTheme />
|
<h1>REVOLT</h1>
|
||||||
<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>
|
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
16
src/context/Theme.tsx
Normal file
16
src/context/Theme.tsx
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
import { createGlobalStyle } from "styled-components";
|
||||||
|
|
||||||
|
// ! 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"};
|
||||||
|
|
||||||
|
export const GlobalTheme = createGlobalStyle`
|
||||||
|
:root {
|
||||||
|
${
|
||||||
|
Object.keys(a)
|
||||||
|
.map(key => {
|
||||||
|
return `--${key}: ${(a as any)[key]};`;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
// ! TEMP END
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import { render } from 'preact'
|
import { render } from 'preact'
|
||||||
import './styles/index.scss'
|
import '../styles/index.scss'
|
||||||
import { App } from './app'
|
import { App } from './app'
|
||||||
|
|
||||||
render(<App />, document.getElementById('app')!)
|
render(<App />, document.getElementById('app')!)
|
||||||
|
|
|
||||||
41
src/styles/_elements.scss
Normal file
41
src/styles/_elements.scss
Normal file
|
|
@ -0,0 +1,41 @@
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 3px;
|
||||||
|
height: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: var(--scrollbar-track);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: var(--scrollbar-thumb);
|
||||||
|
}
|
||||||
|
|
||||||
|
::selection {
|
||||||
|
background: var(--accent);
|
||||||
|
color: var(--foreground);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-moz-selection {
|
||||||
|
background: var(--accent);
|
||||||
|
color: var(--foreground);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-selection {
|
||||||
|
background: var(--accent);
|
||||||
|
color: var(--foreground);
|
||||||
|
}
|
||||||
|
|
||||||
|
a,
|
||||||
|
a:link,
|
||||||
|
a:visited,
|
||||||
|
a:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
border: 0;
|
||||||
|
height: 1px;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
9
src/styles/_fonts.scss
Normal file
9
src/styles/_fonts.scss
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
@import "@fontsource/open-sans/300.css";
|
||||||
|
@import "@fontsource/open-sans/400.css";
|
||||||
|
@import "@fontsource/open-sans/600.css";
|
||||||
|
@import "@fontsource/open-sans/700.css";
|
||||||
|
|
||||||
|
@import "@fontsource/open-sans/300-italic.css";
|
||||||
|
@import "@fontsource/open-sans/400-italic.css";
|
||||||
|
@import "@fontsource/open-sans/600-italic.css";
|
||||||
|
@import "@fontsource/open-sans/700-italic.css";
|
||||||
31
src/styles/_page.scss
Normal file
31
src/styles/_page.scss
Normal file
|
|
@ -0,0 +1,31 @@
|
||||||
|
* {
|
||||||
|
text-rendering: optimizeLegibility !important;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
|
||||||
|
scrollbar-width: thin;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
contain: content;
|
||||||
|
background: var(--background);
|
||||||
|
background-size: cover !important;
|
||||||
|
background-repeat: no-repeat !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
font-family: "Open Sans", sans-serif;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
caret-color: var(--accent);
|
||||||
|
color: var(--foreground);
|
||||||
|
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
overscroll-behavior: contain;
|
||||||
|
|
||||||
|
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
|
||||||
|
}
|
||||||
|
|
@ -1,86 +1,3 @@
|
||||||
@import "@fontsource/open-sans/300.css";
|
@import "elements";
|
||||||
@import "@fontsource/open-sans/400.css";
|
@import "fonts";
|
||||||
@import "@fontsource/open-sans/600.css";
|
@import "page";
|
||||||
@import "@fontsource/open-sans/700.css";
|
|
||||||
|
|
||||||
@import "@fontsource/open-sans/300-italic.css";
|
|
||||||
@import "@fontsource/open-sans/400-italic.css";
|
|
||||||
@import "@fontsource/open-sans/600-italic.css";
|
|
||||||
@import "@fontsource/open-sans/700-italic.css";
|
|
||||||
|
|
||||||
@import "./temp-theme.scss";
|
|
||||||
|
|
||||||
* {
|
|
||||||
text-rendering: optimizeLegibility !important;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
|
|
||||||
|
|
||||||
scrollbar-width: thin;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
|
||||||
contain: content;
|
|
||||||
background: var(--background);
|
|
||||||
background-size: cover !important;
|
|
||||||
background-repeat: no-repeat !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
html,
|
|
||||||
body {
|
|
||||||
font-family: "Open Sans", sans-serif;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
caret-color: var(--accent);
|
|
||||||
color: var(--foreground);
|
|
||||||
|
|
||||||
-webkit-tap-highlight-color: transparent;
|
|
||||||
-webkit-overflow-scrolling: touch;
|
|
||||||
-webkit-text-size-adjust: 100%;
|
|
||||||
overscroll-behavior: contain;
|
|
||||||
|
|
||||||
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar {
|
|
||||||
width: 3px;
|
|
||||||
height: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-track {
|
|
||||||
background: var(--scrollbar-track);
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
|
||||||
background: var(--scrollbar-thumb);
|
|
||||||
}
|
|
||||||
|
|
||||||
::selection {
|
|
||||||
background: var(--accent);
|
|
||||||
color: var(--foreground);
|
|
||||||
}
|
|
||||||
|
|
||||||
::-moz-selection {
|
|
||||||
background: var(--accent);
|
|
||||||
color: var(--foreground);
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-selection {
|
|
||||||
background: var(--accent);
|
|
||||||
color: var(--foreground);
|
|
||||||
}
|
|
||||||
|
|
||||||
a,
|
|
||||||
a:link,
|
|
||||||
a:visited,
|
|
||||||
a:hover {
|
|
||||||
text-decoration: none;
|
|
||||||
color: var(--accent);
|
|
||||||
}
|
|
||||||
|
|
||||||
hr {
|
|
||||||
border: 0;
|
|
||||||
height: 1px;
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -17,5 +17,5 @@
|
||||||
"jsxFactory": "h",
|
"jsxFactory": "h",
|
||||||
"jsxFragmentFactory": "Fragment"
|
"jsxFragmentFactory": "Fragment"
|
||||||
},
|
},
|
||||||
"include": ["src"]
|
"include": ["src", "ui/ui.tsx"]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
13
ui/index.html
Normal file
13
ui/index.html
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>REVOLT UI</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/ui/ui.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
68
ui/ui.tsx
Normal file
68
ui/ui.tsx
Normal file
|
|
@ -0,0 +1,68 @@
|
||||||
|
import { useState } from 'preact/hooks';
|
||||||
|
import styled from 'styled-components';
|
||||||
|
import '../src/styles/index.scss'
|
||||||
|
import { render } from 'preact'
|
||||||
|
|
||||||
|
import { GlobalTheme } from '../src/context/Theme';
|
||||||
|
|
||||||
|
export const UIDemo = styled.div`
|
||||||
|
gap: 12px;
|
||||||
|
padding: 12px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
`;
|
||||||
|
|
||||||
|
import Button from '../src/components/ui/Button';
|
||||||
|
import Banner from '../src/components/ui/Banner';
|
||||||
|
import Checkbox from '../src/components/ui/Checkbox';
|
||||||
|
import ComboBox from '../src/components/ui/ComboBox';
|
||||||
|
import InputBox from '../src/components/ui/InputBox';
|
||||||
|
import ColourSwatches from '../src/components/ui/ColourSwatches';
|
||||||
|
import Tip from '../src/components/ui/Tip';
|
||||||
|
import Radio from '../src/components/ui/Radio';
|
||||||
|
import Overline from '../src/components/ui/Overline';
|
||||||
|
|
||||||
|
export function UI() {
|
||||||
|
let [checked, setChecked] = useState(false);
|
||||||
|
let [colour, setColour] = useState('#FD6671');
|
||||||
|
let [selected, setSelected] = useState<'a' | 'b' | 'c'>('a');
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<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>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
render(<>
|
||||||
|
<GlobalTheme />
|
||||||
|
<UIDemo>
|
||||||
|
<UI />
|
||||||
|
</UIDemo>
|
||||||
|
</>, document.getElementById('app')!)
|
||||||
|
|
@ -1,7 +1,16 @@
|
||||||
|
import { resolve } from 'path'
|
||||||
import { defineConfig } from 'vite'
|
import { defineConfig } from 'vite'
|
||||||
import preact from '@preact/preset-vite'
|
import preact from '@preact/preset-vite'
|
||||||
|
|
||||||
// https://vitejs.dev/config/
|
// https://vitejs.dev/config/
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [preact()]
|
plugins: [preact()],
|
||||||
|
build: {
|
||||||
|
rollupOptions: {
|
||||||
|
input: {
|
||||||
|
main: resolve(__dirname, 'index.html'),
|
||||||
|
ui: resolve(__dirname, 'ui/index.html')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -318,6 +318,11 @@
|
||||||
"@types/react" "*"
|
"@types/react" "*"
|
||||||
hoist-non-react-statics "^3.3.0"
|
hoist-non-react-statics "^3.3.0"
|
||||||
|
|
||||||
|
"@types/node@^15.12.3":
|
||||||
|
version "15.12.3"
|
||||||
|
resolved "https://registry.yarnpkg.com/@types/node/-/node-15.12.3.tgz#2817bf5f25bc82f56579018c53f7d41b1830b1af"
|
||||||
|
integrity sha512-SNt65CPCXvGNDZ3bvk1TQ0Qxoe3y1RKH88+wZ2Uf05dduBCqqFQ76ADP9pbT+Cpvj60SkRppMCh2Zo8tDixqjQ==
|
||||||
|
|
||||||
"@types/preact-i18n@^2.3.0":
|
"@types/preact-i18n@^2.3.0":
|
||||||
version "2.3.0"
|
version "2.3.0"
|
||||||
resolved "https://registry.yarnpkg.com/@types/preact-i18n/-/preact-i18n-2.3.0.tgz#d99d4a9ad03b0b65e57ed4d874447de74384e32f"
|
resolved "https://registry.yarnpkg.com/@types/preact-i18n/-/preact-i18n-2.3.0.tgz#d99d4a9ad03b0b65e57ed4d874447de74384e32f"
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue