@pinnacle0/web-ui 0.3.22 → 0.3.23

package/test/ui-test/src/component/admin/TablePageDemo.tsx

@@ -0,0 +1,85 @@
+import React from "react";
+import {AdminPage} from "@pinnacle0/web-ui/admin/AdminPage";
+import {Form} from "@pinnacle0/web-ui/core/Form";
+import {Input} from "@pinnacle0/web-ui/core/Input";
+import {Amount} from "@pinnacle0/web-ui/core/Amount";
+import {Table} from "@pinnacle0/web-ui/core/Table";
+import {Button} from "@pinnacle0/web-ui/core/Button";
+import {Pagination} from "@pinnacle0/web-ui/core/Pagination";
+import {EnumSelect} from "@pinnacle0/web-ui/core/EnumSelect";
+import {EnumRadio} from "@pinnacle0/web-ui/core/EnumRadio";
+import {Cascader} from "@pinnacle0/web-ui/core/Cascader";
+import {Tooltip} from "@pinnacle0/web-ui/core/Tooltip";
+import {DateTimeRangePicker} from "@pinnacle0/web-ui/core/DateTimeRangePicker";
+import {AmountRangeInput} from "@pinnacle0/web-ui/core/AmountRangeInput";
+import {generateDummyTableData, dummyTableColumns} from "../../dummy/dummyTableData";
+import {dummyEmptyCallback} from "../../dummy/dummyCallback";
+
+const tableData = generateDummyTableData(12);
+
+const FilterExpansion = () => {
+    return (
+        <React.Fragment>
+            <Form.Item label="Input">
+                <Input value="Some name" onChange={dummyEmptyCallback} />
+            </Form.Item>
+            <Form.Item label="Select" required>
+                <EnumSelect list={["A", "B"]} value="A" onChange={dummyEmptyCallback} />
+            </Form.Item>
+            <Form.Item label="Cascader">
+                <Cascader data={[]} value="A" onChange={dummyEmptyCallback} />
+            </Form.Item>
+            <Form.Item label="Radio">
+                <EnumRadio list={["A", "B"]} value="A" onChange={dummyEmptyCallback} />
+            </Form.Item>
+        </React.Fragment>
+    );
+};
+
+export const TablePageDemo = () => {
+    const [loading, setLoading] = React.useState(false);
+    const changeLoading = () => {
+        setLoading(true);
+        setTimeout(() => setLoading(false), 1000);
+    };
+    return (
+        <AdminPage>
+            <AdminPage.Filter
+                loading={loading}
+                expandedArea={<FilterExpansion />}
+                reminder="Some Reminder Text"
+                extraElements={[
+                    <Button color="red" disabled key="1">
+                        Disabled
+                    </Button>,
+                    <Tooltip title="Tooltip content ..." key="2">
+                        <Button color="green">Green Tooltip</Button>
+                    </Tooltip>,
+                ]}
+                onFinish={changeLoading}
+                onReset={changeLoading}
+            >
+                <Form.Item label="Input">
+                    <Input value="Some name" onChange={dummyEmptyCallback} />
+                </Form.Item>
+                <Form.Item label="Level" required>
+                    <EnumSelect.Nullable value={1} list={[1, 2, 3]} onChange={dummyEmptyCallback} />
+                </Form.Item>
+                <Form.Item label="Long Content" required>
+                    <EnumSelect.Nullable value={1} list={[1, 2, 3, "Test long long long long long long long long long etc"]} onChange={dummyEmptyCallback} />
+                </Form.Item>
+                <Form.Item label="Date Range" required>
+                    <DateTimeRangePicker allowNull={false} value={[new Date(), new Date()]} onChange={dummyEmptyCallback} />
+                </Form.Item>
+                <Form.Item label="Amount Range">
+                    <AmountRangeInput allowNull={false} value={[2, 5]} onChange={dummyEmptyCallback} />
+                </Form.Item>
+            </AdminPage.Filter>
+            <AdminPage.Summary>
+                Total amount: <Amount scale={2} value={98432} />
+            </AdminPage.Summary>
+            <Table columns={dummyTableColumns} dataSource={tableData} rowKey="index" loading={loading} />
+            <Pagination totalCount={300} totalPage={20} onChange={dummyEmptyCallback} onShowSizeChange={dummyEmptyCallback} pageIndex={1} />
+        </AdminPage>
+    );
+};

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

@@ -0,0 +1,117 @@
+import React from "react";
+import {Amount} from "@pinnacle0/web-ui/core/Amount";
+import type {DemoHelperGroupConfig} from "../DemoHelper";
+import {DemoHelper} from "../DemoHelper";
+
+const groups: DemoHelperGroupConfig[] = [
+    {
+        title: "Basic",
+        components: [
+            <Amount value={null} scale={2} />,
+            <Amount value={0} scale={2} />,
+            <Amount value={10} scale={2} />,
+            <Amount value={9999} scale={2} />,
+            <Amount value={999999999} scale={2} />,
+            <Amount value={999999999} scale={10} />,
+        ],
+    },
+    {
+        title: "Flooring",
+        components: [
+            <Amount value={999999999.678} scale={0} />,
+            <Amount value={999999999.678} scale={0} rounding="floor" />,
+            <Amount value={999999999.678} scale={0} rounding="ceil" />,
+            "-",
+            <Amount value={999999999.678} scale={1} />,
+            <Amount value={999999999.678} scale={1} rounding="floor" />,
+            <Amount value={999999999.678} scale={1} rounding="ceil" />,
+            "-",
+            <Amount value={999999999.678} scale={2} />,
+            <Amount value={999999999.678} scale={2} rounding="floor" />,
+            <Amount value={999999999.678} scale={2} rounding="ceil" />,
+            "-",
+            <Amount value={999999999.678} scale={3} />,
+            <Amount value={999999999.678} scale={3} rounding="floor" />,
+            <Amount value={999999999.678} scale={3} rounding="ceil" />,
+            "-",
+            <Amount value={999999999.678} scale={4} />,
+            <Amount value={999999999.678} scale={4} rounding="floor" />,
+            <Amount value={999999999.678} scale={4} rounding="ceil" />,
+        ],
+    },
+    {
+        title: "Coloring",
+        components: [
+            <Amount value={9999} scale={1} colorScheme="green+red-" />,
+            <Amount value={0} scale={1} colorScheme="green+red-" />,
+            <Amount value={-9999} scale={1} colorScheme="green+red-" />,
+            "-",
+            <Amount value={9999} scale={1} colorScheme="green-red+" />,
+            <Amount value={0} scale={1} colorScheme="green-red+" />,
+            <Amount value={-9999} scale={1} colorScheme="green-red+" />,
+            "-",
+            <Amount value={9999} scale={3} colorScheme="highlight" />,
+            <Amount value={-9999} scale={3} colorScheme="highlight" />,
+        ],
+    },
+    {
+        title: "Decoration",
+        components: [
+            <Amount value={6789.23} scale={3} del />,
+            <Amount value={6789.23} scale={3} underline />,
+            <Amount value={6789.23} scale={3} bold />,
+            <Amount value={6789.23} scale={3} plusSignForPositive />,
+            <Amount value={6789.23} scale={3} thousandSplitter={false} />,
+        ],
+    },
+    {
+        title: "Postfix/Prefix",
+        components: [
+            <Amount value={6789.23} scale={3} prefix=">>" postfix="<<" />,
+            <Amount value={6789.23} scale={3} prefix=">>" postfix="<<" colorScheme="highlight" />,
+            <Amount value={6789.23} scale={3} prefix=">>" />,
+            <Amount value={6789.23} scale={3} del underline bold postfix="<<" />,
+        ],
+    },
+    {
+        title: "Percentage",
+        components: [
+            <Amount.Percentage value={0.5} percentageScale={2} />,
+            <Amount.Percentage value={0.6} percentageScale={0} />,
+            <Amount.Percentage value={0} percentageScale={3} />,
+            <Amount.Percentage value={-1.2} percentageScale={1} colorScheme="green+red-" />,
+        ],
+    },
+    {
+        title: "With Surrounding Text",
+        components: [
+            <div>
+                test
+                <Amount value={6789.23} scale={3} del underline bold prefix=">>" postfix="<<" />
+                test
+            </div>,
+            <span>
+                test
+                <Amount value={6789.23} scale={3} del underline bold prefix=">>" postfix="<<" />
+                test
+            </span>,
+            <div>
+                <span>test </span>
+                <Amount value={6789.23} scale={3} del underline bold prefix=">>" postfix="<<" />
+                test
+            </div>,
+            <p>
+                test
+                <Amount value={6789.23} scale={3} del underline bold prefix=">>" postfix="<<" />
+                test
+            </p>,
+            <div>
+                <span style={{fontSize: 30}}>test</span>
+                <Amount value={6789.23} scale={3} del underline bold prefix=">>" postfix="<<" />
+                <span style={{fontSize: 10}}>test</span>
+            </div>,
+        ],
+    },
+];
+
+export const AmountDemo = () => <DemoHelper groups={groups} />;

package/test/ui-test/src/component/core/ButtonDemo/__tests__/__snapshots__/dom-snapshot.test.tsx.snap

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Button (dom snapshot test) render with children: "button children text" 1`] = `
+<div>
+  <button
+    class="g-button primary medium "
+    type="button"
+  >
+    button children text
+  </button>
+</div>
+`;

package/test/ui-test/src/component/core/ButtonDemo/__tests__/dom-snapshot.test.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import {Button} from "@pinnacle0/web-ui/core/Button";
+import {render} from "@testing-library/react";
+
+describe("Button (dom snapshot test)", () => {
+    test('render with children: "button children text"', () => {
+        const {container} = render(<Button>button children text</Button>);
+        expect(container).toMatchSnapshot();
+    });
+});

package/test/ui-test/src/component/core/ButtonDemo/__tests__/smoke.test.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+import type {ButtonColor, ButtonSize, Props} from "@pinnacle0/web-ui/core/Button";
+import {Button} from "@pinnacle0/web-ui/core/Button";
+import {render, screen} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+describe("Button (smoke test)", () => {
+    test("renders children on screen", () => {
+        render(<Button>button children text</Button>);
+        expect(screen.queryAllByText(/button children text/i)).toHaveLength(1);
+    });
+
+    test("onClick fires", async () => {
+        const user = userEvent.setup();
+        const onClick = jest.fn();
+        render(<Button onClick={onClick}>button text</Button>);
+
+        const button = screen.getByText(/button text/i);
+
+        await user.click(button);
+        expect(onClick).toHaveBeenCalledTimes(1);
+
+        await userEvent.click(button);
+        expect(onClick).toHaveBeenCalledTimes(2);
+    });
+});
+
+describe("Custom Button (smoke test)", () => {
+    test("extend Color ", () => {
+        type CustomColor = ButtonColor | "new-color";
+        const CustomButton = (props: Props<CustomColor>) => <Button {...props} />;
+
+        render(<CustomButton color="new-color" />);
+        expect(screen.getByRole("button")?.classList).toContain("new-color");
+    });
+
+    test("extend Size ", () => {
+        type CustomSize = ButtonSize | "jumbo";
+        const CustomButton = (props: Props<ButtonColor, CustomSize>) => <Button {...props} />;
+
+        render(<CustomButton size="jumbo" />);
+        expect(screen.getByRole("button")?.classList).toContain("jumbo");
+    });
+});
+
+describe("Button (type test)", () => {
+    // type CustomColor = ButtonColor | "new-color";
+    // type CustomSize = ButtonSize | "jumbo";
+
+    test.skip("button", () => {
+        const Wrapper = () => {
+            return (
+                <React.Fragment>
+                    <Button color="primary" />
+                    <Button color="green" />
+                    <Button color="wire-frame" />;
+                    <Button size="small" />
+                    <Button size="medium" />
+                </React.Fragment>
+            );
+
+            // // @ts-expect-error
+            // return <Button color="bad" />;
+
+            // // @ts-expect-error
+            // return <Button size="bad" />;
+        };
+    });
+
+    // test.todo("Custom  Button");
+});

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

@@ -0,0 +1,39 @@
+import React from "react";
+import type {ButtonColor, ButtonSize} from "@pinnacle0/web-ui/core/Button";
+import {Button} from "@pinnacle0/web-ui/core/Button";
+import type {DemoHelperGroupConfig} from "../../DemoHelper";
+import {DemoHelper} from "../../DemoHelper";
+
+const colors: ButtonColor[] = ["primary", "wire-frame", "green", "red"];
+
+const coloredButtons = (size: ButtonSize): React.ReactElement[] => {
+    const buttons = colors.map(color => (
+        <Button size={size} color={color}>
+            {color}
+        </Button>
+    ));
+    buttons.push(
+        <Button size={size} disabled>
+            disabled
+        </Button>
+    );
+    return buttons;
+};
+
+const groups: DemoHelperGroupConfig[] = [
+    {
+        title: "Button",
+        components: [
+            // prettier-reserve
+            ...coloredButtons("small"),
+            "-",
+            ...coloredButtons("medium"),
+            "-",
+            ...coloredButtons("large"),
+            "-",
+            ...coloredButtons("x-large"),
+        ],
+    },
+];
+
+export const ButtonDemo = () => <DemoHelper groups={groups} />;

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

@@ -0,0 +1,98 @@
+import React from "react";
+import type {Props as DatePickerProps} from "@pinnacle0/web-ui/core/DatePicker";
+import {DatePicker} from "@pinnacle0/web-ui/core/DatePicker";
+import type {Props as DateRangePickerProps} from "@pinnacle0/web-ui/core/DateRangePicker";
+import {DateRangePicker} from "@pinnacle0/web-ui/core/DateRangePicker";
+import type {Props as TimeRangePickerProps} from "@pinnacle0/web-ui/core/TimeRangePicker";
+import {TimeRangePicker} from "@pinnacle0/web-ui/core/TimeRangePicker";
+import type {Props as TimePickerProps} from "@pinnacle0/web-ui/core/TimePicker";
+import {TimePicker} from "@pinnacle0/web-ui/core/TimePicker";
+import type {Props as DateTimeRangePickerProps} from "@pinnacle0/web-ui/core/DateTimeRangePicker";
+import {DateTimeRangePicker} from "@pinnacle0/web-ui/core/DateTimeRangePicker";
+import type {Props as DateTimePickerProps} from "@pinnacle0/web-ui/core/DateTimePicker";
+import {DateTimePicker} from "@pinnacle0/web-ui/core/DateTimePicker";
+import {DateCalendar} from "@pinnacle0/web-ui/core/DateCalendar";
+import {YearMonthSelector} from "@pinnacle0/web-ui/core/YearMonthSelector";
+import {withUncontrolledInitialValue} from "../../util/withUncontrolledInitialValue";
+import type {DemoHelperGroupConfig} from "../DemoHelper";
+import {DemoHelper} from "../DemoHelper";
+
+const UncontrolledDatePicker = (props: Omit<DatePickerProps<any>, "value" | "onChange">) => {
+    const [value, onChange] = React.useState<any>(null);
+    return <DatePicker {...props} value={value} onChange={onChange} />;
+};
+
+const UncontrolledDateRangePicker = (props: Omit<DateRangePickerProps<any>, "value" | "onChange">) => {
+    const [value, onChange] = React.useState<any>([null, null]);
+    return <DateRangePicker {...props} value={value} onChange={onChange} />;
+};
+
+const UncontrolledTimePicker = (props: Omit<TimePickerProps<any>, "value" | "onChange">) => {
+    const [value, onChange] = React.useState<any>(null);
+    return <TimePicker {...props} value={value} onChange={onChange} placeholder="Select Time" />;
+};
+
+const UncontrolledTimeRangePicker = (props: Omit<TimeRangePickerProps<any>, "value" | "onChange">) => {
+    const [value, onChange] = React.useState<any>([null, null]);
+    return <TimeRangePicker {...props} value={value} onChange={onChange} />;
+};
+
+const UncontrolledDateTimePicker = (props: Omit<DateTimePickerProps<any>, "value" | "onChange">) => {
+    const [value, onChange] = React.useState<any>(null);
+    return <DateTimePicker {...props} value={value} onChange={onChange} />;
+};
+
+const UncontrolledDateTimeRangePicker = (props: Omit<DateTimeRangePickerProps<any>, "value" | "onChange">) => {
+    const [value, onChange] = React.useState<any>([null, null]);
+    return <DateTimeRangePicker disabledRange={_ => _ > 1 && _ < 4} {...props} value={value} onChange={onChange} />;
+};
+
+const UncontrolledYearMonthPicker = withUncontrolledInitialValue(YearMonthSelector);
+
+const groups: DemoHelperGroupConfig[] = [
+    {
+        title: "Date Picker",
+        components: [<UncontrolledDatePicker allowNull={false} />, <UncontrolledDatePicker allowNull />],
+    },
+    {
+        title: "Date Range Picker",
+        components: [<UncontrolledDateRangePicker allowNull={false} />, <UncontrolledDateRangePicker allowNull />],
+    },
+    {
+        title: "Time Picker",
+        components: [<UncontrolledTimePicker allowNull={false} />, <UncontrolledTimePicker allowNull />],
+    },
+    {
+        title: "Time Range Picker",
+        components: [<UncontrolledTimeRangePicker allowNull={false} />, <UncontrolledTimeRangePicker allowNull />],
+    },
+    {
+        title: "Date Time Picker",
+        components: [<UncontrolledDateTimePicker allowNull={false} />, <UncontrolledDateTimePicker allowNull />],
+    },
+    {
+        title: "Date Time Range Picker",
+        components: [<UncontrolledDateTimeRangePicker allowNull={false} />, <UncontrolledDateTimeRangePicker allowNull />],
+    },
+    {
+        title: "Date Calendar",
+        components: [<DateCalendarDemo />],
+        showPropsHint: false,
+    },
+    {
+        title: "Year Month Picker (Disable Future Months & 1 Year Ago)",
+        components: [<UncontrolledYearMonthPicker allowNull initialValue={null} disabledRange={diff => diff < -12 || diff > 0} />],
+    },
+];
+
+function DateCalendarDemo() {
+    const [date, setDate] = React.useState(new Date().toISOString());
+
+    return (
+        <div style={{width: 400}}>
+            <DateCalendar value={date} onChange={setDate} />
+        </div>
+    );
+}
+
+export const CalendarDemo = () => <DemoHelper groups={groups.map(_ => ({..._, showPropsHint: false}))} />;

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

@@ -0,0 +1,51 @@
+import React from "react";
+import {Carousel3D} from "@pinnacle0/web-ui/core/Carousel3D";
+import {Carousel} from "@pinnacle0/web-ui/core/Carousel";
+import {generateDummyURLs} from "../../../dummy/dummyList";
+import type {DemoHelperGroupConfig} from "../../DemoHelper";
+import {DemoHelper} from "../../DemoHelper";
+
+const groups: DemoHelperGroupConfig[] = [
+    {
+        title: "Carousel3D",
+        showPropsHint: false,
+        components: [
+            <div style={{width: 600, overflow: "hidden"}}>
+                <Carousel3D>
+                    {generateDummyURLs(1).map(img => {
+                        return <img key={img} src={img} />;
+                    })}
+                </Carousel3D>
+            </div>,
+            <div style={{width: 600, overflow: "hidden"}}>
+                <Carousel3D>
+                    {generateDummyURLs(2).map(img => {
+                        return <img key={img} src={img} />;
+                    })}
+                </Carousel3D>
+            </div>,
+            <div style={{width: 600, overflow: "hidden"}}>
+                <Carousel3D>
+                    {generateDummyURLs(3).map(img => {
+                        return <img key={img} src={img} />;
+                    })}
+                </Carousel3D>
+            </div>,
+        ],
+    },
+    {
+        title: "Carousel",
+        showPropsHint: false,
+        components: [
+            <div style={{width: 600, overflow: "hidden"}}>
+                <Carousel>
+                    {generateDummyURLs(3).map(img => {
+                        return <img key={img} src={img} />;
+                    })}
+                </Carousel>
+            </div>,
+        ],
+    },
+];
+
+export const CarouselDemo = () => <DemoHelper groups={groups} />;

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

@@ -0,0 +1,120 @@
+import React, {Children} from "react";
+import type {CascaderDataNode as MultipleCascaderDataNode} from "@pinnacle0/web-ui/core/MultipleCascader";
+import type {CascaderDataNode} from "@pinnacle0/web-ui/core/Cascader";
+import {Cascader} from "@pinnacle0/web-ui/core/Cascader";
+import {MultipleCascader} from "@pinnacle0/web-ui/core/MultipleCascader";
+import {DemoHelper} from "../../DemoHelper";
+import type {DemoHelperGroupConfig} from "../../DemoHelper";
+import {withUncontrolledInitialValue} from "../../../util/withUncontrolledInitialValue";
+
+const NullableCascader = withUncontrolledInitialValue(Cascader.Nullable);
+const InitialNullableCascader = withUncontrolledInitialValue(Cascader.InitialNullable);
+const UncontrolledMultipleCascader = withUncontrolledInitialValue(MultipleCascader);
+
+enum TestEnum {
+    ONE = "ONE",
+    TWO = "TWO",
+    THREE = "THREE",
+    ONE_A = "ONE_A",
+    ONE_B = "ONE_B",
+    ONE_C = "ONE_C",
+    TWO_A = "TWO_A",
+    TWO_B = "TWO_B",
+    TWO_C = "TWO_C",
+    THREE_A = "THREE_A",
+    THREE_B = "THREE_B",
+    THREE_C = "THREE_C",
+}
+
+const cascaderData: Array<CascaderDataNode<TestEnum>> = [
+    {
+        label: TestEnum.ONE,
+        value: TestEnum.ONE,
+        children: [
+            {
+                label: TestEnum.ONE_A,
+                value: TestEnum.ONE_A,
+                children: [
+                    {label: TestEnum.THREE_A, value: TestEnum.THREE_A},
+                    {label: TestEnum.THREE_B, value: TestEnum.THREE_B},
+                    {label: TestEnum.THREE_C, value: TestEnum.THREE_C},
+                ],
+            },
+            {label: TestEnum.ONE_B, value: TestEnum.ONE_B},
+            {label: TestEnum.ONE_C, value: TestEnum.ONE_C},
+        ],
+    },
+    {
+        label: TestEnum.TWO,
+        value: TestEnum.TWO,
+        children: [
+            {label: TestEnum.TWO_A, value: TestEnum.TWO_A},
+            {label: TestEnum.TWO_B, value: TestEnum.TWO_B},
+            {label: TestEnum.TWO_C, value: TestEnum.TWO_C},
+        ],
+    },
+    {
+        label: TestEnum.THREE,
+        value: TestEnum.THREE,
+    },
+];
+
+const multipleCascaderData: Array<MultipleCascaderDataNode<TestEnum>> = [
+    {
+        label: TestEnum.ONE,
+        value: [
+            {
+                label: TestEnum.ONE_A,
+                value: [
+                    {label: TestEnum.THREE_A, value: TestEnum.THREE_A},
+                    {label: TestEnum.THREE_B, value: TestEnum.THREE_B},
+                    {label: TestEnum.THREE_C, value: TestEnum.THREE_C},
+                ],
+            },
+            {label: TestEnum.ONE_B, value: TestEnum.ONE_B},
+            {label: TestEnum.ONE_C, value: TestEnum.ONE_C},
+        ],
+    },
+    {
+        label: TestEnum.TWO,
+        value: [
+            {label: TestEnum.TWO_A, value: TestEnum.TWO_A},
+            {label: TestEnum.TWO_B, value: TestEnum.TWO_B},
+            {label: TestEnum.TWO_C, value: TestEnum.TWO_C},
+        ],
+    },
+    {
+        label: TestEnum.THREE,
+        value: TestEnum.THREE,
+    },
+];
+
+function SimpleCascader() {
+    const [value, setValue] = React.useState(TestEnum.TWO);
+    return <Cascader data={cascaderData} value={value} onChange={setValue} style={{width: 500}} />;
+}
+
+const groups: DemoHelperGroupConfig[] = [
+    {
+        title: "Cascader",
+        showPropsHint: false,
+        components: [<SimpleCascader />],
+    },
+    {
+        title: "Nullable Cascader",
+        showPropsHint: false,
+        components: [<NullableCascader data={cascaderData} initialValue={null} />],
+    },
+    {
+        title: "InitialNullable Cascader",
+        showPropsHint: false,
+        components: [<InitialNullableCascader data={cascaderData} initialValue={null} placeholder="Placeholder here" />],
+    },
+    {
+        title: "Multiple Cascader",
+        showPropsHint: false,
+        components: [<UncontrolledMultipleCascader data={multipleCascaderData} initialValue={[]} placeholder="Placeholder here" />],
+    },
+];
+
+export const CascaderDemo = () => <DemoHelper groups={groups} />;

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

@@ -0,0 +1,31 @@
+import React from "react";
+import {Foldable} from "@pinnacle0/web-ui/core/Foldable";
+import type {Props as FoldableProps} from "@pinnacle0/web-ui/core/Foldable";
+import type {DemoHelperGroupConfig} from "../DemoHelper";
+import {DemoHelper} from "../DemoHelper";
+
+const ControlledFoldable = (props: Omit<FoldableProps, "expanded" | "onExpansionChange">) => {
+    const [expanded, onExpansionChange] = React.useState<boolean>(false);
+    return <Foldable {...props} expanded={expanded} onExpansionChange={onExpansionChange} />;
+};
+
+const groups: DemoHelperGroupConfig[] = [
+    {
+        title: "Foldable",
+        components: [
+            <ControlledFoldable title="Title1" style={{width: 400}}>
+                <div style={{backgroundColor: "red", height: 150, width: "100%"}} />
+            </ControlledFoldable>,
+            "-",
+            <ControlledFoldable title="Title2" titleRight="TitleRight2" style={{width: 400}}>
+                <div style={{backgroundColor: "green", color: "#eee", width: "100%", padding: 10}}>Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
+            </ControlledFoldable>,
+            "-",
+            <ControlledFoldable title="Title3" titleRight="TitleRight3" style={{width: 400}}>
+                <div style={{backgroundColor: "blue", height: 150, width: "100%"}} />
+            </ControlledFoldable>,
+        ],
+    },
+];
+
+export const FoldableDemo = () => <DemoHelper groups={groups} />;