@pinnacle0/web-ui 0.3.22 → 0.3.23

package/test/ui-test/src/component/core/FormDemo.tsx

@@ -0,0 +1,204 @@
+import React from "react";
+import {UserOutlined} from "@ant-design/icons";
+import {Form} from "@pinnacle0/web-ui/core/Form";
+import {Input} from "@pinnacle0/web-ui/core/Input";
+import {EnumSelect} from "@pinnacle0/web-ui/core/EnumSelect";
+import {BoolSwitch} from "@pinnacle0/web-ui/core/BoolSwitch";
+import {DateRangePicker} from "@pinnacle0/web-ui/core/DateRangePicker";
+import {DateTimePicker} from "@pinnacle0/web-ui/core/DateTimePicker";
+import {NumberInput} from "@pinnacle0/web-ui/core/NumberInput";
+import {Cascader} from "@pinnacle0/web-ui/core/Cascader";
+import {AmountRangeInput} from "@pinnacle0/web-ui/core/AmountRangeInput";
+import {EnumRadio} from "@pinnacle0/web-ui/core/EnumRadio";
+import {Checkbox} from "@pinnacle0/web-ui/core/Checkbox";
+import {AmountConditionInput, Operator} from "@pinnacle0/web-ui/core/AmountConditionInput";
+import {withUncontrolledInitialValue} from "../../util/withUncontrolledInitialValue";
+import {dummyEmptyCallback} from "../../dummy/dummyCallback";
+import type {DemoHelperGroupConfig} from "../DemoHelper";
+import {DemoHelper} from "../DemoHelper";
+import {Amount} from "../../../../../src/core/Amount";
+
+const UncontrolledEnumSelect = withUncontrolledInitialValue(EnumSelect);
+const UncontrolledEnumRadio = withUncontrolledInitialValue(EnumRadio);
+const UncontrolledCheckbox = withUncontrolledInitialValue(Checkbox);
+const UncontrolledInput = withUncontrolledInitialValue(Input);
+const UncontrolledInputTextArea = withUncontrolledInitialValue(Input.TextArea);
+const UncontrolledInputPassword = withUncontrolledInitialValue(Input.Password);
+const UncontrolledAmountConditionInput = withUncontrolledInitialValue(AmountConditionInput);
+const UncontrolledCascader = withUncontrolledInitialValue(Cascader);
+const UncontrolledDateRangePicker = withUncontrolledInitialValue(DateRangePicker);
+const UncontrolledDateTimePicker = withUncontrolledInitialValue(DateTimePicker);
+const UncontrolledBoolSwitch = withUncontrolledInitialValue(BoolSwitch.YesNo);
+
+const FormItems = () => {
+    return (
+        <React.Fragment>
+            <Form.Item label="Text">Some simple string</Form.Item>
+            <Form.Item label="Digit">
+                <Amount scale={4} value={-43242} colorScheme="green-red+" />
+            </Form.Item>
+            <Form.Item label="Username" validator={() => "username incorrect"}>
+                <UncontrolledInput initialValue="username" />
+            </Form.Item>
+            <Form.Item label={<UserOutlined />} required>
+                <UncontrolledInput initialValue="" />
+            </Form.Item>
+            <Form.Item label="Fixture" required>
+                <UncontrolledInput initialValue="40" prefix=">" suffix="$" />
+            </Form.Item>
+            <Form.Item label=">Input<" widthMode="shrink">
+                <UncontrolledInput initialValue="" />
+            </Form.Item>
+            <Form.Item label="<Input>" widthMode="fill">
+                <UncontrolledInput initialValue="" />
+            </Form.Item>
+            <Form.Item label="Number 1" required>
+                <NumberInput value={20} scale={1} allowNull={false} onChange={dummyEmptyCallback} />
+            </Form.Item>
+            <Form.Item label="Number 2" required>
+                <NumberInput value={30} scale={0} allowNull={false} onChange={dummyEmptyCallback} prefix="<" suffix="$" />
+            </Form.Item>
+            <Form.Item label="Number 3">
+                <NumberInput value={24} scale={2} step={0.05} stepperMode="always" allowNull={false} onChange={dummyEmptyCallback} />
+            </Form.Item>
+            <Form.Item label=">Number<" widthMode="shrink">
+                <NumberInput value={30} scale={0} allowNull={false} onChange={dummyEmptyCallback} prefix="<" suffix="$" />
+            </Form.Item>
+            <Form.Item label="<Number>" widthMode="fill">
+                <NumberInput value={30} scale={0} allowNull={false} onChange={dummyEmptyCallback} prefix="<" suffix="$" />
+            </Form.Item>
+            <Form.Item label="Numbers">
+                <AmountRangeInput value={[2, 50]} onChange={dummyEmptyCallback} allowNull={false} />
+            </Form.Item>
+            <Form.Item label="Operator">
+                <UncontrolledAmountConditionInput initialValue={{condition: Operator.GREATER_EQUAL, amount: 20}} scale={1} />
+            </Form.Item>
+            <Form.Item label="Password">
+                <UncontrolledInputPassword initialValue="password" />
+            </Form.Item>
+            <Form.Item label="Bio" validator={() => "bio information too long"}>
+                <UncontrolledInputTextArea initialValue="Here is my bio ..." />
+            </Form.Item>
+            <Form.Item label="Empty Error message" validator={() => ""}>
+                <UncontrolledInputTextArea initialValue="Test" />
+            </Form.Item>
+            <Form.Item label="Multiple" validator={() => "test"} widthMode="shrink">
+                <Input.Group>
+                    <UncontrolledInputPassword initialValue="password" />
+                    <UncontrolledDateTimePicker initialValue={new Date()} allowNull={false} />
+                </Input.Group>
+            </Form.Item>
+            <Form.Item label="Flag">
+                <UncontrolledBoolSwitch initialValue={false} />
+            </Form.Item>
+            <Form.Item label="Checkbox">
+                <UncontrolledCheckbox initialValue={false} />
+            </Form.Item>
+            <Form.Item label="Radio">
+                <UncontrolledEnumRadio initialValue="+" list={["+", "-", "*", "/"]} />
+            </Form.Item>
+            <Form.Item label="Selector" validator={() => "selector test"}>
+                <UncontrolledEnumSelect initialValue="+" list={["+", "-", "*", "/"]} />
+            </Form.Item>
+            <Form.Item label=">Selector<" widthMode="shrink">
+                <UncontrolledEnumSelect initialValue="+" list={["+", "-", "*", "/"]} />
+            </Form.Item>
+            <Form.Item label="<Selector>" widthMode="fill">
+                <UncontrolledEnumSelect initialValue="+" list={["+", "-", "*", "/"]} />
+            </Form.Item>
+            <Form.Item label="Cascader">
+                <UncontrolledCascader
+                    initialValue="a"
+                    canSelectAnyLevel
+                    data={[
+                        {label: "A", value: "a"},
+                        {label: "B", value: "b", children: [{label: "B1", value: "b1"}]},
+                    ]}
+                />
+            </Form.Item>
+            <Form.Item label="Date">
+                <UncontrolledDateTimePicker initialValue={new Date()} allowNull={false} />
+            </Form.Item>
+            <Form.Item label=">Date<" widthMode="shrink">
+                <UncontrolledDateTimePicker initialValue={new Date()} allowNull={false} />
+            </Form.Item>
+            <Form.Item label="<Date>" widthMode="fill">
+                <UncontrolledDateTimePicker initialValue={new Date()} allowNull={false} />
+            </Form.Item>
+            <Form.Item label="Range">
+                <UncontrolledDateRangePicker initialValue={["2020-01-01", "2020-05-22"]} allowNull={false} />
+            </Form.Item>
+            <Form.Item label=">Range<" widthMode="shrink">
+                <UncontrolledDateRangePicker initialValue={["2020-01-01", "2020-05-22"]} allowNull={false} />
+            </Form.Item>
+            <Form.Item label="<Range>" widthMode="fill">
+                <UncontrolledDateRangePicker initialValue={["2020-01-01", "2020-05-22"]} allowNull={false} />
+            </Form.Item>
+        </React.Fragment>
+    );
+};
+
+const groups: DemoHelperGroupConfig[] = [
+    {
+        title: "Horizontal Layout",
+        showPropsHint: false,
+        components: [
+            <Form layout="horizontal" style={{width: 520}} onFinish={() => {}}>
+                <FormItems />
+            </Form>,
+        ],
+    },
+    {
+        title: "Vertical Layout",
+        showPropsHint: false,
+        components: [
+            <Form layout="vertical" style={{width: 900, backgroundColor: "#eee"}}>
+                <FormItems />
+            </Form>,
+        ],
+    },
+    {
+        title: "Inline Layout",
+        showPropsHint: false,
+        components: [
+            <Form layout="inline" errorDisplayMode={{type: "popover", placement: "top"}}>
+                <FormItems />
+            </Form>,
+        ],
+    },
+    {
+        title: "Inline Layout without submit button",
+        showPropsHint: false,
+        components: [
+            <Form layout="inline" errorDisplayMode={{type: "popover", placement: "top"}} buttonRenderer={null}>
+                <FormItems />
+            </Form>,
+        ],
+    },
+    {
+        title: "Inline Layout with loading submit button",
+        showPropsHint: false,
+        components: [
+            <Form layout="inline" errorDisplayMode={{type: "popover", placement: "top"}} loading>
+                <Form.Item>
+                    <UncontrolledInput initialValue="loading" />
+                </Form.Item>
+            </Form>,
+        ],
+    },
+    {
+        title: "Inline Layout with submit button disabled",
+        showPropsHint: false,
+        components: [
+            <Form layout="inline" errorDisplayMode={{type: "popover", placement: "top"}} buttonDisabled>
+                <Form.Item>
+                    <UncontrolledInput initialValue="loading" />
+                </Form.Item>
+            </Form>,
+        ],
+    },
+];
+
+export const FormDemo = () => {
+    return <DemoHelper groups={groups} />;
+};

package/test/ui-test/src/component/core/InputDemo/index.tsx

@@ -0,0 +1,123 @@
+import React from "react";
+import FileSearchOutlined from "@ant-design/icons/FileSearchOutlined";
+import {Input} from "@pinnacle0/web-ui/core/Input";
+import type {Props as NumberInputProps} from "@pinnacle0/web-ui/core/NumberInput";
+import {NumberInput} from "@pinnacle0/web-ui/core/NumberInput";
+import type {Props as NumberInputPercentageProps} from "@pinnacle0/web-ui/core/NumberInput/NumberInputPercentage";
+import {AuthenticationCodeInput} from "@pinnacle0/web-ui/core/AuthenticationCodeInput";
+import {TagInput} from "@pinnacle0/web-ui/core/TagInput";
+import {AmountConditionInput, Operator} from "@pinnacle0/web-ui/core/AmountConditionInput";
+import {AmountRangeInput} from "@pinnacle0/web-ui/core/AmountRangeInput";
+import {dummyEmptyCallback} from "../../../dummy/dummyCallback";
+import {withUncontrolledInitialValue} from "../../../util/withUncontrolledInitialValue";
+import type {DemoHelperGroupConfig} from "../../DemoHelper";
+import {DemoHelper} from "../../DemoHelper";
+
+const UncontrolledTagInput = () => {
+    const parser = (text: string) => text.split(/[\n ,;]/g).filter(Boolean);
+    const [input, setInput] = React.useState<string[]>([]);
+    return <TagInput parser={parser} value={input} onChange={setInput} disabled />;
+};
+
+const NullableNumberInput = (props: Omit<NumberInputProps<true>, "value" | "onChange" | "allowNull">) => {
+    const [value, onChange] = React.useState<number | null>(null);
+    return <NumberInput {...props} value={value} onChange={onChange} allowNull />;
+};
+
+const RequiredNumberInput = ({initialValue, ...props}: Omit<NumberInputProps<false>, "value" | "onChange" | "allowNull"> & {initialValue: number}) => {
+    const [value, onChange] = React.useState<number>(initialValue);
+    return <NumberInput {...props} value={value} onChange={onChange} allowNull={false} />;
+};
+
+const RequiredNumberInputPercentage = ({initialValue, ...props}: Omit<NumberInputPercentageProps<false>, "value" | "onChange" | "allowNull"> & {initialValue: number}) => {
+    const [value, onChange] = React.useState<number>(initialValue);
+    return <NumberInput.Percentage {...props} value={value} onChange={onChange} allowNull={false} />;
+};
+
+const UncontrolledInput = withUncontrolledInitialValue(Input);
+
+const PasswordInput = withUncontrolledInitialValue(Input.Password);
+
+const NullableInput = withUncontrolledInitialValue(Input.Nullable);
+
+const TextArea = withUncontrolledInitialValue(Input.TextArea);
+
+const NullableTextArea = withUncontrolledInitialValue(Input.NullableTextArea);
+
+const onNumberRangeChange = (_: [number, number]) => {};
+
+const onNullableNumberRangeChange = (_: [number | null, number | null]) => {};
+
+const groups: DemoHelperGroupConfig[] = [
+    {
+        title: "Basic",
+        components: [
+            <UncontrolledInput initialValue="" />,
+            <UncontrolledInput initialValue="" prefix="before" suffix="after" />,
+            <UncontrolledInput initialValue="" autoFocus />,
+            <PasswordInput initialValue="" />,
+        ],
+    },
+    {
+        title: "Nullable Input",
+        components: [<NullableInput initialValue={null} />],
+    },
+    {
+        title: "Required Number Input",
+        components: [
+            <RequiredNumberInput scale={0} editable={false} stepperMode="always" step={1} initialValue={10} />,
+            <RequiredNumberInput scale={0} stepperMode="always" step={1} initialValue={10} />,
+            <RequiredNumberInput scale={1} stepperMode="always" step={0.2} initialValue={10} />,
+            <RequiredNumberInput scale={2} min={0} max={100} stepperMode="always" step={0.05} initialValue={3.88} />,
+            "-",
+            <RequiredNumberInput scale={2} stepperMode="always" step={0.05} initialValue={4} displayRenderer={_ => "<" + _ + ">"} />,
+            <RequiredNumberInput scale={2} initialValue={4} suffix={<FileSearchOutlined />} />,
+            <RequiredNumberInput scale={2} stepperMode="always" step={0.05} initialValue={4} suffix="After" />,
+            <RequiredNumberInput scale={2} stepperMode="hover" step={0.05} initialValue={4} suffix="After" />,
+        ],
+    },
+    {
+        title: "Nullable Number Input",
+        components: [
+            <NullableNumberInput scale={0} stepperMode="always" />,
+            <NullableNumberInput scale={0} stepperMode="hover" />,
+            <NullableNumberInput scale={3} />,
+            <NullableNumberInput scale={0} disabled />,
+            <NullableNumberInput scale={0} placeholder="Here..." />,
+            "-",
+            <NullableNumberInput scale={0} inputStyle={{width: 400, border: "2px solid blue", color: "blue"}} />,
+        ],
+    },
+    {
+        title: "Percentage Number Input",
+        components: [
+            <RequiredNumberInputPercentage initialValue={0.4} percentageScale={0} stepperMode="none" />,
+            <RequiredNumberInputPercentage initialValue={0.5} percentageScale={1} stepperMode="hover" />,
+            <RequiredNumberInputPercentage initialValue={0.6} percentageScale={2} stepperMode="always" />,
+        ],
+    },
+    {
+        title: "Text Area",
+        components: [<TextArea initialValue="Text Area Content" disabled />, <NullableTextArea initialValue={null} />],
+    },
+    {
+        title: "Authentication Code Input",
+        components: [<AuthenticationCodeInput onSend={() => new Promise<boolean>(resolve => setTimeout(() => resolve(true), 500))} value="" onChange={dummyEmptyCallback} nextSendInterval={5} />],
+    },
+    {
+        title: "Tags Input",
+        components: [<UncontrolledTagInput />],
+    },
+    {
+        title: "Amount Condition Input",
+        showPropsHint: false,
+        components: [<AmountConditionInput value={{condition: Operator.GREATER_EQUAL, amount: 43}} onChange={dummyEmptyCallback} scale={2} />],
+    },
+    {
+        title: "Amount Range Input",
+        showPropsHint: false,
+        components: [<AmountRangeInput allowNull={false} value={[3, 5]} onChange={onNumberRangeChange} />, <AmountRangeInput allowNull value={[3, 5]} onChange={onNullableNumberRangeChange} />],
+    },
+];
+
+export const InputDemo = () => <DemoHelper groups={groups} />;

package/test/ui-test/src/component/core/MiscellaneousDemo/TagInputDemo.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import {TagInput} from "@pinnacle0/web-ui/core/TagInput";
+
+export const TagInputDemo = () => {
+    const initialValue = Array.from({length: 100}, () => ({value: Math.random().toString(36).substring(7)}));
+    const [tags, setTags] = React.useState(initialValue);
+    return <TagInput className={t => t.value} renderTag={t => t.value} value={tags} onChange={setTags} parser={t => [{value: t}]} />;
+};

package/test/ui-test/src/component/core/MiscellaneousDemo/index.tsx

@@ -0,0 +1,157 @@
+import React from "react";
+import {Countdown} from "@pinnacle0/web-ui/core/Countdown";
+import {Link} from "@pinnacle0/web-ui/core/Link";
+import {MessageUtil} from "@pinnacle0/web-ui/util/MessageUtil";
+import {VerticalMarquee} from "@pinnacle0/web-ui/core/VerticalMarquee";
+import {Markdown} from "@pinnacle0/web-ui/core/Markdown";
+import {PagedList} from "@pinnacle0/web-ui/core/PagedList";
+import {WithTooltipList} from "@pinnacle0/web-ui/core/WithTooltipList";
+import {Breadcrumb} from "@pinnacle0/web-ui/core/Breadcrumb";
+import {MultipleSelector} from "@pinnacle0/web-ui/core/MultipleSelector";
+import {Pagination} from "@pinnacle0/web-ui/core/Pagination";
+import {dummyTableColumns, generateDummyTableData} from "../../../dummy/dummyTableData";
+import {generateDummyStrings} from "../../../dummy/dummyList";
+import type {MockTableData} from "../../../dummy/dummyTableData";
+import {DemoHelper} from "../../DemoHelper";
+import type {DemoHelperGroupConfig} from "../../DemoHelper";
+import {TagInputDemo} from "./TagInputDemo";
+
+const DemoPagedList = () => {
+    const data = new Array(15).fill(0).map((_, index) => ({a: index}));
+    const ListItem = ({item}: {item: {a: number}; index: number}) => <div style={{textAlign: "center"}}>{item.a}</div>;
+
+    return <PagedList dataSource={data} renderItem={ListItem} itemWidth={45} pageSize={5} rowKey="index" />;
+};
+
+const DemoBreadcrumb = () => {
+    const renderItem = (item: {name: string}, index: number) => <div>{item.name}</div>;
+
+    const data = new Array(5).fill(0).map((_, index) => ({
+        name: "test0" + index,
+    }));
+
+    return <Breadcrumb data={data} onClick={(_, index) => alert(_.name)} renderItem={renderItem} itemKey="name" />;
+};
+
+const MultipleSelectorDemo = (props: {withPagination?: boolean; disabled?: "button" | "table"}) => {
+    const pageSize = 5;
+    const [data, setData] = React.useState<MockTableData[]>([]);
+    const [page, setPage] = React.useState(1); // Start from 1
+    const dataSource = React.useMemo(() => generateDummyTableData(pageSize, (page - 1) * 10 + 1), [page]);
+
+    if (props.withPagination) {
+        return (
+            <MultipleSelector
+                tableColumns={dummyTableColumns}
+                onChange={setData}
+                value={data}
+                rowKey="name"
+                dataSource={dataSource}
+                renderButtonText="Paged Selector"
+                renderTags="name"
+                renderPopover={table => (
+                    <div>
+                        {table}
+                        <Pagination onChange={setPage} totalCount={50 * pageSize} totalPage={50} pageIndex={page} />
+                    </div>
+                )}
+            />
+        );
+    } else {
+        const buttonText = props.disabled ? `Disabled (${props.disabled})` : "Simple Selector";
+        return (
+            <MultipleSelector
+                tableColumns={dummyTableColumns}
+                onChange={setData}
+                value={data}
+                rowKey="name"
+                dataSource={dataSource}
+                renderButtonText={buttonText}
+                disabled={props.disabled}
+                renderTags="name"
+                onPopoverFirstRender={() => MessageUtil.success("First opened")}
+            />
+        );
+    }
+};
+
+const groups: DemoHelperGroupConfig[] = [
+    {
+        title: "Countdown",
+        components: [
+            <Countdown timeToComplete={Date.now() + 50 * 3600 * 1000} />,
+            <Countdown timeToComplete={0} onComplete={() => alert("Should never alert")} />,
+            <Countdown timeToComplete={Date.now() - 100000} onComplete={() => MessageUtil.success("Timer complete")} />,
+            <Countdown
+                timeToComplete={Date.now() + 50 * 3600 * 1000}
+                renderer={(hours, minutes, seconds) => (
+                    <b style={{color: "#37882a"}}>
+                        Remaining: {hours} Hr {minutes} Min {seconds} Sec
+                    </b>
+                )}
+            />,
+        ],
+    },
+    {
+        title: "SiteLink",
+        components: [
+            <Link to="/core/input">/Input</Link>,
+            <Link to="/core/input" newTab>
+                /Input (New Tab)
+            </Link>,
+            <Link to="https://www.google.com">Google</Link>,
+            <Link to={() => alert("Hello")}>Alert</Link>,
+        ],
+    },
+    {
+        title: "VerticalMarquee",
+        showPropsHint: false,
+        components: [
+            <VerticalMarquee height={100}>
+                {generateDummyStrings(10).map(entry => {
+                    return <div key={entry}>{entry}</div>;
+                })}
+            </VerticalMarquee>,
+            <VerticalMarquee height={80}>
+                {generateDummyStrings(5).map(entry => {
+                    return <div key={entry}>{entry}</div>;
+                })}
+            </VerticalMarquee>,
+        ],
+    },
+    {
+        title: "Markdown",
+        components: [
+            <Markdown>
+                {"This is Markdown style syntax\nIt supports __bold__ and `highlight` text\n__Whole line in bold__\n`Whole line in highlight`\n__Bold text__ and `highlight text` mixed"}
+            </Markdown>,
+        ],
+    },
+    {
+        title: "PagedList",
+        components: [<DemoPagedList />],
+        showPropsHint: false,
+    },
+    {
+        title: "TextWithTooltipList",
+        components: [<WithTooltipList list={[{label: "Test 2", content: 1234}, "-", {label: "Test 2", content: 2234}]} />],
+        showPropsHint: false,
+    },
+    {
+        title: "TagInput",
+        components: [<TagInputDemo />],
+    },
+    {
+        title: "Breadcrumb",
+        components: [<DemoBreadcrumb />],
+        showPropsHint: false,
+    },
+
+    {
+        title: "Multiple Selector",
+        showPropsHint: false,
+        components: [<MultipleSelectorDemo />, "-", <MultipleSelectorDemo withPagination />, "-", <MultipleSelectorDemo disabled="table" />, "-", <MultipleSelectorDemo disabled="button" />],
+    },
+];
+
+export const MiscellaneousDemo = () => <DemoHelper groups={groups} />;

package/test/ui-test/src/component/core/ModalDemo/index.tsx

@@ -0,0 +1,75 @@
+import React from "react";
+import {Button} from "@pinnacle0/web-ui/core/Button";
+import {ModalUtil} from "@pinnacle0/web-ui/util/ModalUtil";
+import type {Props as ModalProps} from "@pinnacle0/web-ui/core/Modal";
+import {Modal} from "@pinnacle0/web-ui/core/Modal";
+import {PromptUtil} from "@pinnacle0/web-ui/util/PromptUtil";
+import type {DemoHelperGroupConfig} from "../../DemoHelper";
+import {DemoHelper} from "../../DemoHelper";
+
+const DeclarativeModal = ({buttonClassName, title, ...modalProps}: Omit<ModalProps, "visible" | "onCancel" | "width" | "children"> & {buttonClassName?: string}) => {
+    const [visible, setVisible] = React.useState(false);
+    return (
+        <div>
+            <Button onClick={() => setVisible(true)} className={buttonClassName}>
+                {title}
+            </Button>
+            <Modal title={`Modal: ${title}`} visible={visible} onCancel={() => setVisible(false)} width={400} {...modalProps}>
+                Test
+            </Modal>
+        </div>
+    );
+};
+
+const groups: DemoHelperGroupConfig[] = [
+    {
+        title: "Declarative Modal",
+        components: [
+            <DeclarativeModal title="Default" buttonClassName="modal-demo-declarative-modal-default" />,
+            <DeclarativeModal title="With Loading" loading />,
+            <DeclarativeModal title="Extra Title" />,
+            <DeclarativeModal title="Un-closable & No Padding" closable={false} addInnerPadding={false} />,
+        ],
+    },
+    {
+        title: "Sync Modal Utils",
+        showPropsHint: false,
+        components: [
+            <Button onClick={() => ModalUtil.createSync({body: "A simple string"})} className="modal-demo-sync-modal-default">
+                Default
+            </Button>,
+            <Button onClick={() => ModalUtil.createSync({body: "A simple string", title: "My title", subTitle: "Subtitle", okText: "OKAY"})}>Custom Text</Button>,
+            <Button onClick={() => ModalUtil.createSync({body: "A simple string", cancelText: "Cancel", onOk: () => alert("OK"), onCancel: byClose => alert(`Closed (${byClose})`)})}>
+                OK/Cancel Event
+            </Button>,
+            <Button onClick={() => ModalUtil.createSync({body: ["String 1", "String 2", <b>Bold</b>]})}>Multiline Body</Button>,
+            "-",
+            <Button onClick={() => ModalUtil.createSync({body: "A simple string", destroyTimeoutSecond: 3})}>Auto Close 3s</Button>,
+            <Button onClick={() => ModalUtil.createSync({body: "A simple string", hideButtons: true})}>No Button</Button>,
+            <Button onClick={() => ModalUtil.createSync({body: "A simple string", closable: false})}>No Close</Button>,
+            "-",
+            <Button onClick={() => ModalUtil.createAsync({body: ["A simple string", "[OK] will alert true", "[Close] will alert false"], title: "My title"}).then(alert)}>Create Async</Button>,
+            <Button onClick={() => ModalUtil.confirm("Are you sure?").then(alert)}>Confirm</Button>,
+            "-",
+            <Button onClick={() => ModalUtil.createSync({body: "body", footerExtra: "This is a footer"})}>Sync With Footer string</Button>,
+            <Button onClick={() => ModalUtil.createSync({body: "body", footerExtra: <Button>Footer Button</Button>})}>Sync With Footer component</Button>,
+        ],
+    },
+    {
+        title: "Prompt Util",
+        components: [
+            <Button
+                onClick={() =>
+                    PromptUtil.createAsync({
+                        title: "Prompt",
+                        body: "This is Markdown style syntax\nIt supports __bold__ and `highlight` text\n__Whole line in bold__\n`Whole line in highlight`\nOr __bold text__ and `highlight text` mixed",
+                    })
+                }
+            >
+                Prompt
+            </Button>,
+        ],
+    },
+];
+
+export const ModalDemo = () => <DemoHelper groups={groups} />;

package/test/ui-test/src/component/core/OverflowableTextDemo.tsx

@@ -0,0 +1,78 @@
+import React from "react";
+import {OverflowableText} from "@pinnacle0/web-ui/core/OverflowableText";
+import {Input} from "@pinnacle0/web-ui/core/Input";
+import {NumberInput} from "@pinnacle0/web-ui/core/NumberInput";
+import {Amount} from "@pinnacle0/web-ui/core/Amount";
+import {HTMLContent} from "@pinnacle0/web-ui/core/HTMLContent";
+import type {DemoHelperGroupConfig} from "../DemoHelper";
+import {DemoHelper} from "../DemoHelper";
+
+const groups: DemoHelperGroupConfig[] = [
+    {
+        title: "Overflow",
+        components: [
+            <OverflowableText maxWidth={200}>Not very long</OverflowableText>,
+            "-",
+            <OverflowableText maxWidth={200}>
+                Very Very Long, Very Very LongVery Very LongVery Very LongVery Very LongVery Very LongVery Very LongVery Very LongVery Very LongVery Very LongVery Very LongVery Very LongVery Very
+                LongVery Very LongVery Very LongVery Very LongVery Very LongVery Very LongVery Very LongVery Very LongVery Very LongVery Very LongVery Very LongVery Very LongVery Very LongVery Very
+                LongVery Very Long
+            </OverflowableText>,
+        ],
+        showPropsHint: false,
+    },
+    {
+        title: "Overflow with custom style",
+        components: [
+            <OverflowableText maxWidth={100} style={{color: "red"}}>
+                Should be red
+            </OverflowableText>,
+            "-",
+            <OverflowableText maxWidth={50} style={{color: "red"}}>
+                Should be red
+            </OverflowableText>,
+        ],
+    },
+    {
+        title: "Overflow with changeable text",
+        components: [<OverflowableTextWithChangeableText />],
+    },
+];
+
+function OverflowableTextWithChangeableText() {
+    const [text, setText] = React.useState("short text");
+    const [nodeText, setNodeText] = React.useState("short text");
+    const [amount, setAmount] = React.useState<number | null>(100);
+
+    return (
+        <div>
+            <div>
+                <h3>Pure Text</h3>
+                <OverflowableText maxWidth={100}>{text}</OverflowableText>
+                <Input onChange={setText} value={text} />
+            </div>
+            <div>
+                <h3>React Node</h3>
+                <OverflowableText maxWidth={100}>
+                    <div>{nodeText}</div>
+                </OverflowableText>
+                <Input onChange={setNodeText} value={nodeText} />
+            </div>
+            <div>
+                <h3>Amount</h3>
+                <OverflowableText maxWidth={100}>
+                    <Amount scale={0} value={amount} />
+                </OverflowableText>
+                <NumberInput max={1000000000000000000000000000} allowNull onChange={setAmount} value={amount} />
+            </div>
+            <div>
+                <h3>HTMLContent</h3>
+                <OverflowableText maxWidth={100}>
+                    <HTMLContent html="<p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p>" />
+                </OverflowableText>
+            </div>
+        </div>
+    );
+}
+
+export const OverflowableTextDemo = () => <DemoHelper groups={groups} />;