268 lines
7.1 KiB
TypeScript
268 lines
7.1 KiB
TypeScript
import React, {useState} from "react";
|
|
import "../index";
|
|
import {Checkbox} from "../src/Components/Forms/Checkbox";
|
|
import { Radio } from "../src/Components/Forms/Radio";
|
|
import {FloppyDisk, TrashSimple, XCircle} from "@phosphor-icons/react";
|
|
import {Card} from "../src/Components/Card";
|
|
import {PasswordInput} from "../src/Components/Forms/PasswordInput";
|
|
import {RequiredField} from "../src/Components/Forms/RequiredField";
|
|
import {Float} from "../src/Components/Floating/Float";
|
|
import {Tooltip} from "../src/Components/Floating/Tooltip";
|
|
import {DatepickerInput} from "../src/Components/Forms/DatepickerInput";
|
|
import {TimepickerInput} from "../src/Components/Forms/TimepickerInput";
|
|
import {Select} from "../src/Components/Select/Select";
|
|
import {SpinningLoader} from "../src/Components/Loaders/SpinningLoader";
|
|
import {ListLoader} from "../src/Components/Loaders/ListLoader";
|
|
import {GenericLoader} from "../src/Components/Loaders/GenericLoader";
|
|
|
|
export function DemoApp()
|
|
{
|
|
const [datetime, setDatetime] = useState(null);
|
|
|
|
const [selected, setSelected] = useState(null);
|
|
|
|
return (
|
|
<main className={"app"}>
|
|
<h1>KernelUI</h1>
|
|
|
|
<h2>TODO</h2>
|
|
|
|
<ul>
|
|
<li>Dropdown menus</li>
|
|
<li>Main menu</li>
|
|
<li>Tabs / Apps selectors</li>
|
|
<li>App steps</li>
|
|
<li>Pagination</li>
|
|
<li>Apps</li>
|
|
<li>Global states</li>
|
|
<li>Async</li>
|
|
<li>Subapps</li>
|
|
<li>Modals</li>
|
|
</ul>
|
|
|
|
<h2>Headings</h2>
|
|
|
|
<h1>Demo app</h1>
|
|
|
|
<h2>Second title</h2>
|
|
|
|
<h3>Third title</h3>
|
|
|
|
<h4>Fourth title</h4>
|
|
|
|
<h5>Fifth title</h5>
|
|
|
|
<h6>Sixth title</h6>
|
|
|
|
<h2>Buttons</h2>
|
|
|
|
<button type={"button"}>A cool button</button>
|
|
<a className={"button"} href={"#"}>A link button</a>
|
|
<button type={"button"} className={"flat"}>A flat button</button>
|
|
<button type={"button"} className={"validation"}><FloppyDisk weight={"bold"}/> A validation button</button>
|
|
<button type={"button"} className={"cancel"}><XCircle weight={"bold"}/> A cancellation button</button>
|
|
<button type={"button"} className={"delete"}><TrashSimple weight={"bold"}/> A deletion button</button>
|
|
|
|
<h2>Forms</h2>
|
|
|
|
<form>
|
|
<label>
|
|
Text label <RequiredField/>
|
|
<input type={"text"} placeholder={"Normal demo text"} required={true}/>
|
|
</label>
|
|
|
|
<label>
|
|
Textarea label <RequiredField/>
|
|
<textarea placeholder={"A normal textarea."} required={true}></textarea>
|
|
</label>
|
|
|
|
<PasswordInput>
|
|
Test password
|
|
</PasswordInput>
|
|
|
|
<DatepickerInput value={datetime} onChange={setDatetime}>
|
|
Date test
|
|
</DatepickerInput>
|
|
|
|
<TimepickerInput value={datetime} onChange={setDatetime}>
|
|
Time test
|
|
</TimepickerInput>
|
|
|
|
<p>Currently selected datetime: <strong>{datetime ? datetime.toISOString() : "none"}</strong></p>
|
|
|
|
<Checkbox>Checkbox demo</Checkbox>
|
|
<Radio name={"radio-test"}>Radio box test</Radio>
|
|
<Radio name={"radio-test"}>Radio box test</Radio>
|
|
|
|
<Select options={{
|
|
"a": "AAAAAA",
|
|
"b": "BBBBBB",
|
|
"c": "CCCCCC",
|
|
"d": "DDDDDD",
|
|
"e": "EEEEEE",
|
|
"f": "FFFFFF",
|
|
}} value={selected} onChange={setSelected} selectibleMaxCount={3} placeholder={"Simple test"}>
|
|
Simple select test
|
|
</Select>
|
|
</form>
|
|
|
|
<h2>HTML</h2>
|
|
|
|
<div>
|
|
<a href={"#"}>Link test</a>
|
|
</div>
|
|
<p>
|
|
<strong>Lorem ipsum</strong> dolor <code>sit amet</code>, <em>consectetur</em> adipiscing elit <a
|
|
href={"https://aleph.land"} target={"_blank"}>aleph</a>. Donec accumsan
|
|
pulvinar felis, vitae eleifend augue lacinia tempus. Integer nec iaculis ante. Duis a quam urna. Nullam
|
|
tincidunt rutrum felis, a efficitur enim facilisis sit amet. Quisque dictum semper sagittis. Maecenas in orci
|
|
hendrerit, tempor nunc non, tempus mi. Praesent blandit varius rutrum. Nullam quis mauris eros. Vestibulum
|
|
commodo libero sed pellentesque pharetra. Donec eget fringilla ante. Aliquam id leo massa. Duis dictum nunc ut
|
|
dolor iaculis malesuada. Nulla elementum justo a sem eleifend finibus. Phasellus bibendum elit nibh, at tempor
|
|
odio efficitur id.
|
|
</p>
|
|
|
|
<h2>Steps</h2>
|
|
|
|
<div className={"steps"}>
|
|
<h3 className={"step"}>Step one</h3>
|
|
<h3 className={"step"}>Step two</h3>
|
|
<h3 className={"step"}>Step three</h3>
|
|
</div>
|
|
|
|
<h2>Lists</h2>
|
|
|
|
<ul>
|
|
<li>One</li>
|
|
<li>Two</li>
|
|
<li>Three</li>
|
|
<li>Four</li>
|
|
</ul>
|
|
|
|
<ol>
|
|
<li>One</li>
|
|
<li>Two</li>
|
|
<li>Three</li>
|
|
<li>Four</li>
|
|
</ol>
|
|
|
|
<h2>Tables</h2>
|
|
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Column 1</th>
|
|
<th>Column 2</th>
|
|
<th colSpan={2}>Column 3</th>
|
|
</tr>
|
|
<tr>
|
|
<th>A</th>
|
|
<th>B</th>
|
|
<th>C</th>
|
|
<th>D</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr>
|
|
<td>Lorem</td>
|
|
<td>Ipsum</td>
|
|
<td>Dolor</td>
|
|
<td>Amet</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>Foo</td>
|
|
<td>Bar</td>
|
|
<td>Baz</td>
|
|
<td>John</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>Alice</td>
|
|
<td>Bob</td>
|
|
<td></td>
|
|
<td>Jack</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h2>Cards</h2>
|
|
|
|
<Card>
|
|
<h3>Card title</h3>
|
|
|
|
<p>
|
|
Donec lobortis quam sapien, et efficitur dolor laoreet ut. Ut pretium, lacus at bibendum rutrum, nibh nibh
|
|
scelerisque nisi, nec semper dolor turpis sed tortor. Nulla massa sapien, accumsan id vestibulum et, elementum
|
|
eget metus. Morbi quis bibendum purus. Nunc at fermentum tortor. Quisque viverra diam in sem auctor blandit.
|
|
Vestibulum dignissim bibendum nunc, non tristique quam sollicitudin eu. Ut feugiat lectus tellus, tempus
|
|
viverra sapien aliquet vel. Morbi ac est mauris. Praesent facilisis ut tellus at cursus. Aenean placerat nulla
|
|
non mi vulputate hendrerit. Praesent fermentum dui eu gravida pharetra. Quisque rhoncus, magna non congue
|
|
egestas, leo lorem malesuada felis, eu imperdiet orci magna ultrices est.
|
|
</p>
|
|
|
|
<button type={"button"}>Button position ?</button>
|
|
<button type={"button"}>Button position ?</button>
|
|
</Card>
|
|
|
|
<Card>
|
|
<p>Another small card</p>
|
|
</Card>
|
|
|
|
<h2>Popovers</h2>
|
|
|
|
<Float mode={"hover"} content={"Do you see me?"}>
|
|
<button type={"button"}>Hover me!</button>
|
|
</Float>
|
|
|
|
<Float mode={"focus"} content={<>I am <strong>focused</strong></>}>
|
|
<button>Focus me!</button>
|
|
</Float>
|
|
|
|
<Float mode={"click"} content={(
|
|
<div>
|
|
You can add complex (clickable) content in me.
|
|
<button type={"button"}>OK</button>
|
|
</div>
|
|
)}>
|
|
<button>Click me!</button>
|
|
</Float>
|
|
|
|
<Float mode={"always"} content={"I am always shown."} floatingOptions={{placement: "top"}}>
|
|
<button>Why always me?</button>
|
|
</Float>
|
|
|
|
<div>
|
|
<Float mode={"managed"} content={(show, hide) => (<button onClick={hide}>I can hide the popover!</button>)}>
|
|
{(show, hide) => (
|
|
<button type={"button"} onClick={show}>Customized behavior</button>
|
|
)}
|
|
</Float>
|
|
</div>
|
|
|
|
<h2>Tooltips</h2>
|
|
|
|
<Card>
|
|
This is a very simple <Tooltip content={"I am a beautiful simple tooltip."}><a>tooltip</a></Tooltip>.
|
|
</Card>
|
|
|
|
<h2>Loaders</h2>
|
|
|
|
<h3>Simple loaders</h3>
|
|
|
|
<Card>
|
|
<SpinningLoader/>
|
|
|
|
<ListLoader/>
|
|
</Card>
|
|
|
|
<h3>Generic loader</h3>
|
|
<GenericLoader>
|
|
<Card>
|
|
Sample content.
|
|
</Card>
|
|
</GenericLoader>
|
|
</main>
|
|
);
|
|
}
|