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 {AirTrafficControl, Basket, FloppyDisk, House, TrashSimple, X, 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";
import {MainMenu} from "../src/Components/Menus/MainMenu";
import {SubmenuFloat} from "../src/Components/Menus/SubmenuFloat";
import {Submenu} from "../src/Components/Menus/Submenu";
import {SubmenuItem, SubmenuItemSubmenu} from "../src/Components/Menus/SubmenuItem";
import {MainMenuItemSubmenu, MainMenuLink} from "../src/Components/Menus/MainMenuItem";
import {AppItem, AppLink, AppsMenu} from "../src/Components/Menus/AppsMenu";
import {Application} from "../src/Application/Application";
import {Outlet} from "react-router-dom";
import {ToggleSwitch} from "../src/Components/Forms/ToggleSwitch";
import {Step, Steps} from "../src/Components/Steps/Steps";
import {AsyncPaginate, AutoPaginate, Paginate} from "../src/Components/Pagination/Paginate";
import {useCurtains} from "../src/Components/Curtains/Curtains";
import {Subapp, useSubapps} from "../src/Components/Subapps/Subapps";
import {DemoSubapp} from "./DemoSubapp";

export function DemoApp()
{
	const curtains = useCurtains();
	const subapps = useSubapps();

	const [datetime, setDatetime] = useState(null);

	const [selected, setSelected] = useState(null);

	const [page, setPage] = useState(11);

	return (
		<Application>
			<MainMenu>
				<MainMenuLink to={"/"}><House /> Home</MainMenuLink>
				<MainMenuLink to={"/test"}><AirTrafficControl /> Test</MainMenuLink>
				<MainMenuItemSubmenu submenu={
					<Submenu>
						<SubmenuItem>Test 1</SubmenuItem>
						<SubmenuItem>Test 2</SubmenuItem>
						<SubmenuItemSubmenu submenu={
							<Submenu>
								<SubmenuItem>Test A</SubmenuItem>
								<SubmenuItem>Test B</SubmenuItem>
								<SubmenuItemSubmenu submenu={
									<Submenu>
										<SubmenuItem href={"#first-last-choice"}>First last choice</SubmenuItem>
										<SubmenuItem>Another last choice</SubmenuItem>
									</Submenu>
								}><Basket /> Submenu in submenu</SubmenuItemSubmenu>
							</Submenu>
						}><Basket /> Submenu</SubmenuItemSubmenu>
					</Submenu>
				}>
					<Basket /> Submenu
				</MainMenuItemSubmenu>
			</MainMenu>

			<h1>KernelUI</h1>

			<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 /> A validation button</button>
			<button type={"button"} className={"cancel"}><XCircle /> A cancellation button</button>
			<button type={"button"} className={"delete"}><TrashSimple /> 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>
				<ToggleSwitch>Toggle switch demo</ToggleSwitch>
				<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-counter"}>
				<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 inline={true} />

				<ListLoader/>
			</Card>

			<h3>Generic loader</h3>
			<GenericLoader>
				<Card>
					Sample content.
				</Card>
			</GenericLoader>

			<h2>Menus</h2>

			<SubmenuFloat submenu={
				<Submenu>
					<SubmenuItem>Test 1</SubmenuItem>
					<SubmenuItem>Test 2</SubmenuItem>
					<SubmenuItemSubmenu submenu={
						<Submenu>
							<SubmenuItem>Test A</SubmenuItem>
							<SubmenuItem><AirTrafficControl /> Test B</SubmenuItem>
						</Submenu>
					}>
						<Basket /> Submenu
					</SubmenuItemSubmenu>
				</Submenu>
			} floatingOptions={{placement: "right-start"}}>
				<button>Submenu on a button</button>
			</SubmenuFloat>

			<h2>App selectors</h2>

			<AppsMenu>
				<AppLink to={"/"}>
					<House />
					Home
				</AppLink>
				<AppLink to={"/test"}>
					<AirTrafficControl />
					Test link
				</AppLink>
				<AppItem>
					<Basket />
					Test 3
				</AppItem>
			</AppsMenu>

			<Outlet />

			<h2>App steps</h2>

			<h3>Basic</h3>

			<Steps>
				<Step stepKey={"abc"}>
					<Card>
						<h4>First step</h4>

						ABC STEP
					</Card>
				</Step>

				<Step stepKey={"def"} stepTitle={"Title"}>
					<Card>
						<h4>Big content</h4>

						<p>
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id dignissim ligula, ut tempus sem. Sed
							faucibus tincidunt ante vel iaculis. Duis hendrerit, orci eu gravida interdum, nulla lacus congue augue,
							nec efficitur diam dui sollicitudin eros. Donec lacus lectus, aliquam nec feugiat non, gravida ac est.
							Suspendisse feugiat justo quis dui vehicula, sed auctor est mollis. Sed hendrerit nisi non lectus lacinia,
							id posuere dolor dignissim. Quisque commodo mi sit amet quam tincidunt auctor. Ut sit amet scelerisque
							sem. Nulla rhoncus, orci vitae cursus ullamcorper, ex odio rhoncus enim, et blandit elit libero quis est.
							Suspendisse lectus nunc, gravida sit amet vulputate eget, porta ac odio.
						</p>

						<p>
							Mauris egestas bibendum facilisis. Maecenas accumsan lorem arcu, ut faucibus dui euismod et. Nulla et
							dignissim est, interdum luctus diam. Aliquam condimentum ex augue, id porttitor enim vestibulum quis.
							Vivamus sed convallis leo. Duis finibus, ipsum sed condimentum viverra, ipsum sapien congue nunc, sed
							fermentum metus ante quis ligula. Fusce eleifend ante in leo molestie, at suscipit metus cursus. Class
							aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed laoreet justo ac
							lacus porta, sed ultricies est mattis. Integer finibus purus metus, quis posuere risus suscipit suscipit.
							Nulla facilisi. Duis tincidunt vitae enim eu sagittis.
						</p>

						<p>
							Donec rutrum tellus vitae vehicula tempor. Sed porta tempus leo, vel aliquam risus scelerisque nec.
							Pellentesque diam nibh, ultrices in rhoncus ut, rhoncus et ligula. Duis pellentesque diam purus, ut
							scelerisque turpis condimentum sit amet. Sed sit amet efficitur tortor, vitae aliquet quam. Nullam
							placerat dui eu sapien condimentum, placerat convallis sapien imperdiet. Suspendisse vitae laoreet ex.
							Etiam quis rhoncus ante. Ut egestas eget ipsum ultrices tempus. Vivamus non odio non nisl aliquet rhoncus.
							Ut et nisl placerat, interdum turpis a, condimentum mauris. In laoreet lobortis justo. Maecenas vehicula
							magna non libero posuere rutrum. Praesent eget lectus feugiat dui pellentesque vehicula a sed felis.
							Curabitur nunc orci, vehicula non gravida sed, suscipit sed diam. Nam semper, dui eu volutpat vulputate,
							metus mauris congue lectus, ultrices sollicitudin eros felis ac erat.
						</p>

						<p>
							Proin et rhoncus purus. Etiam nulla libero, dictum sed quam lacinia, consequat euismod ipsum. Donec quis
							tristique metus. Cras vitae pretium massa. Etiam laoreet, eros in rhoncus ultrices, nibh nibh bibendum
							diam, nec ultricies mi ante non ex. Pellentesque eget mattis dolor, eget pulvinar lorem. Nullam ante
							dolor, ultricies et malesuada in, efficitur sit amet diam. Duis ligula augue, vestibulum sit amet ligula
							ac, vestibulum tincidunt eros. Nullam commodo euismod vulputate. Morbi varius accumsan diam eu
							pellentesque. Nunc vehicula pretium risus dapibus cursus. Mauris sit amet est at ipsum scelerisque
							lobortis. Aenean eget quam sit amet arcu mattis interdum in at neque.
						</p>

						<p>
							Mauris efficitur, enim pellentesque maximus faucibus, nibh enim gravida urna, quis dignissim turpis velit
							quis nibh. Mauris eget vestibulum tellus. Duis mollis, ante in egestas lacinia, felis massa rutrum ante,
							vel placerat lectus neque in purus. Fusce sodales nunc vel ligula mollis tincidunt. Sed ac viverra ligula.
							Vestibulum ut velit sit amet ipsum cursus posuere in nec lacus. Praesent vel odio pellentesque,
							ullamcorper metus in, accumsan dolor. Donec vel mi ultrices, interdum arcu vel, pellentesque nunc.
						</p>
					</Card>
				</Step>

				<Step stepKey={"ghi"}>
					<Card>
						<h4>Third step</h4>

						GHI STEP
					</Card>
				</Step>
			</Steps>

			<h2>Pagination</h2>

			<h3>Normal pagination</h3>

			<Paginate onChange={setPage} count={72} page={page}>
				<Card>Page {page}</Card>
			</Paginate>

			<h3>Auto pagination</h3>

			<AutoPaginate count={55}>
				{(page) => (
					<Card>Page {page}</Card>
				)}
			</AutoPaginate>

			<h3>Async pagination</h3>

			<AsyncPaginate count={async () => { return 72; }} getData={async () => (["a", Math.random(), "c"])}>
				{(data) => (
					<>
						{
							data.map((value, index) => (
								<div key={index}>{value}</div>
							))
						}
					</>
				)}
			</AsyncPaginate>

			<h2>Curtains & co</h2>

			<h3>Curtains</h3>

			<Card>
				<button onClick={() => {
					const curtainId = curtains.open(
						<button className={"close"} onClick={() => { curtains.close(curtainId); }}><X /> Close the curtain</button>
					);
				}}>Open a curtain</button>
			</Card>

			<h3>Subapps</h3>

			<Card>
				<button onClick={() => {
					subapps.open(
						<Subapp title={"Title test"}>
							<p>A test content.</p>
							<p>
								Test button :
								<Float mode={"click"} content={"Test content."}>
									<button>A button with floating content</button>
								</Float>
							</p>
						</Subapp>
					)
				}}>Open a subapp
				</button>

				<button onClick={() => { subapps.open(<DemoSubapp />) }}>
					Complex subapp with component
				</button>
			</Card>

			<h3>Modals</h3>

			<Card>
				<button>Open a modal</button>
			</Card>

		</Application>
	);
}