555 lines
18 KiB
TypeScript
555 lines
18 KiB
TypeScript
import React, {useState} from "react";
|
|
import {Checkbox} from "../src/Components/Forms/Checkbox";
|
|
import {Radio} from "../src/Components/Forms/Radio";
|
|
import {AirTrafficControl, Basket, FloppyDisk, House, 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";
|
|
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 {useCallableCurtain, useCurtains} from "../src/Components/Curtains/Curtains";
|
|
import {Subapp, useCallableSubapp, useSubapps} from "../src/Components/Subapps/Subapps";
|
|
import {DemoSubapp} from "./DemoSubapp";
|
|
import {DemoCurtain} from "./DemoCurtain";
|
|
import {DemoModal} from "./DemoModal";
|
|
import {useCallableModal} from "../src/Components/Modals/Modals";
|
|
import {ModalType} from "../src/Components/Modals/ModalsTypes";
|
|
import {Buttons} from "../src/Components/Buttons/Buttons";
|
|
import {useNotify} from "../src/Components/Notifications/Notifications";
|
|
import {Notification, NotificationType} from "../src/Components/Notifications/Notification";
|
|
|
|
export function DemoApp()
|
|
{
|
|
const curtains = useCurtains();
|
|
const subapps = useSubapps();
|
|
|
|
// Easy curtain.
|
|
const easyCurtain = useCallableCurtain(<DemoCurtain />);
|
|
|
|
// Easy subapp.
|
|
const easySubapp = useCallableSubapp(<DemoSubapp />);
|
|
|
|
// Easy modal.
|
|
const easyModal = useCallableModal((type: ModalType = ModalType.NONE) => <DemoModal type={type} />);
|
|
|
|
const notify = useNotify();
|
|
|
|
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>
|
|
|
|
<label>
|
|
Disabled input
|
|
<input type={"text"} name={"disabled"} value={"fixed value"} disabled={true} />
|
|
</label>
|
|
|
|
<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",
|
|
"g": "GGGGGG",
|
|
"h": "HHHHHH",
|
|
"i": "IIIIII",
|
|
"j": "JJJJJJ",
|
|
"k": "KKKKKK",
|
|
"l": "LLLLLL",
|
|
"m": "MMMMMM",
|
|
"n": "NNNNNN",
|
|
}} 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>
|
|
|
|
<Buttons>
|
|
<button type={"button"}>Button position ?</button>
|
|
<button type={"button"}>Button position ?</button>
|
|
</Buttons>
|
|
</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={() => {
|
|
curtains.open(<DemoCurtain />);
|
|
}}>Open a curtain</button>
|
|
|
|
<button onClick={easyCurtain}>Easy with callable curtain</button>
|
|
</Card>
|
|
|
|
<h3>Subapps</h3>
|
|
|
|
<Card>
|
|
<button onClick={() => {
|
|
subapps.open(
|
|
<Subapp title={"Title test"}>
|
|
<p>A test content.</p>
|
|
<Buttons placement={"center"}>
|
|
<Float mode={"click"} content={"Test content."}>
|
|
<button>A button with floating content</button>
|
|
</Float>
|
|
</Buttons>
|
|
</Subapp>
|
|
)
|
|
}}>Open a subapp
|
|
</button>
|
|
|
|
<button onClick={() => { subapps.open(<DemoSubapp />) }}>
|
|
Complex subapp with component
|
|
</button>
|
|
|
|
<button onClick={easySubapp}>
|
|
Easy with callable subapp
|
|
</button>
|
|
|
|
<button onClick={() => {
|
|
subapps.open(
|
|
<Subapp title={"Very long subapp"}>
|
|
<Card><p>A test content.</p></Card>
|
|
<Card><p>A test content.</p></Card>
|
|
<Card><p>A test content.</p></Card>
|
|
<Card><p>A test content.</p></Card>
|
|
<Card><p>A test content.</p></Card>
|
|
<Card><p>A test content.</p></Card>
|
|
<Card><p>A test content.</p></Card>
|
|
<Card><p>A test content.</p></Card>
|
|
<Card><p>A test content.</p></Card>
|
|
<Card><p>A test content.</p></Card>
|
|
<Card><p>A test content.</p></Card>
|
|
<Card><p>A test content.</p></Card>
|
|
<Card><p>A test content.</p></Card>
|
|
<Card><p>A test content.</p></Card>
|
|
</Subapp>
|
|
)
|
|
}}>A long subapp
|
|
</button>
|
|
</Card>
|
|
|
|
<h3>Modals</h3>
|
|
|
|
<Card>
|
|
<button onClick={() => easyModal(ModalType.INFO)}>Open an info modal</button>
|
|
<button className={"warning"} onClick={() => easyModal(ModalType.WARNING)}>Open a warning modal</button>
|
|
<button className={"flat"} onClick={() => easyModal()}>Open a simple modal</button>
|
|
</Card>
|
|
|
|
<h2>Notifications</h2>
|
|
|
|
<Card>
|
|
<button onClick={() => { notify(<Notification type={NotificationType.INFO}>Test notification</Notification>); }}>Information notification</button>
|
|
<button className={"success"} onClick={() => { notify(<Notification type={NotificationType.SUCCESS}>Test notification</Notification>); }}>Success notification</button>
|
|
<button className={"warning"} onClick={() => { notify(<Notification type={NotificationType.WARNING}>Test notification</Notification>); }}>Warning notification</button>
|
|
<button className={"error"} onClick={() => { notify(<Notification type={NotificationType.ERROR}>Test notification</Notification>); }}>Error notification</button>
|
|
<button className={"flat"} onClick={() => { notify(<Notification>Test notification</Notification>); }}>Generic notification</button>
|
|
</Card>
|
|
|
|
</Application>
|
|
);
|
|
}
|