Core/demo/DemoApp.tsx

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