@pinnacle0/web-ui 0.3.23 → 0.3.26

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

@@ -1,204 +0,0 @@
-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

@@ -1,123 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,157 +0,0 @@
-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

@@ -1,75 +0,0 @@
-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

@@ -1,78 +0,0 @@
-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} />;