@pinnacle0/web-ui 0.3.35 → 0.3.36

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

@@ -0,0 +1,232 @@
+import {Button} from "@pinnacle0/web-ui/core/Button";
+import type {VirtualTableColumn, VirtualTableRowSelection, VirtualTableRowExpand} from "@pinnacle0/web-ui/core/VirtualTable/type";
+import {VirtualTable} from "@pinnacle0/web-ui/core/VirtualTable";
+import {Modal} from "@pinnacle0/web-ui/core/Modal";
+import React from "react";
+import type {DemoHelperGroupConfig} from "../DemoHelper";
+import {DemoHelper} from "../DemoHelper";
+
+interface Profile {
+    name: string;
+    age: number;
+    address: string;
+}
+
+const data: Profile[] = Array.from({length: 10000}, () => ({
+    name: "John Brown",
+    age: 32,
+    address: "New York No. 1 Lake Park",
+}));
+
+const extraColumns = Array.from({length: 20}, (_, idx) => ({
+    title: `test col ${idx + 1}`,
+    width: 70,
+    renderData: () => idx + 1,
+}));
+
+const getColumns = (horizontalScroll: boolean = false): VirtualTableColumn<Profile>[] => {
+    return [
+        {
+            title: "Name",
+            width: 100,
+            fixed: horizontalScroll ? "left" : undefined,
+            renderData: _ => _.name,
+        },
+        {
+            title: "Address",
+            width: 120,
+            fixed: horizontalScroll ? "left" : undefined,
+            renderData: _ => _.address,
+        },
+        ...(horizontalScroll ? extraColumns : []),
+        {
+            title: "fixed 1",
+            width: 120,
+            fixed: "right",
+            renderData: () => "fixed 1",
+        },
+        {
+            title: "age",
+            width: 70,
+            fixed: horizontalScroll ? "right" : undefined,
+            renderData: _ => _.age,
+        },
+        {
+            title: "action",
+            width: 140,
+            fixed: horizontalScroll ? "right" : undefined,
+            renderData: () => <Button>Click Me</Button>,
+        },
+        {
+            title: "hidden column",
+            width: 200,
+            fixed: "right",
+            display: "hidden",
+            renderData: () => "hidden",
+        },
+    ];
+};
+
+const VirtualTableWithData = ({hasData = false}: {hasData?: boolean}) => {
+    return <VirtualTable rowKey="index" rowHeight={50} dataSource={hasData ? data : []} scrollY={400} scrollX={800} columns={getColumns()} />;
+};
+
+const LoadingVirtualTable = () => <VirtualTable rowKey="index" rowHeight={50} dataSource={data} scrollY={400} scrollX={800} columns={getColumns()} loading />;
+
+const VirtualTableWithRowSelection = () => {
+    const [selectedRowKeys, setSelectedRowKeys] = React.useState<React.Key[]>(Array.from({length: data.length}, (_, idx) => idx));
+    const rowSelection: VirtualTableRowSelection<Profile> = {
+        width: 40,
+        onChange: _ => setSelectedRowKeys(_),
+        isDisabled: (data, rowIndex) => rowIndex === 0,
+        fixed: true,
+        selectedRowKeys,
+    };
+    return <VirtualTable rowKey="index" rowHeight={50} rowSelection={rowSelection} dataSource={data} scrollY={400} scrollX={800} columns={getColumns()} />;
+};
+
+const VirtualTableWithVariousData = () => {
+    const [data, setData] = React.useState<Profile[]>([]);
+    const singleData = {
+        name: "John Brown",
+        age: 32,
+        address: "New York No. 1 Lake Park",
+    };
+
+    const addOneData = () => setData([...data, singleData]);
+    const addTenData = () => setData([...data, ...Array.from({length: 10}, () => singleData)]);
+    const deleteLastData = () => setData(data.slice(0, data.length - 1));
+    const deleteLastTenData = () => setData(data.slice(0, data.length - 10));
+
+    return (
+        <div>
+            <div style={{display: "flex", justifyContent: "space-around", width: 800}}>
+                <Button onClick={addOneData}>add 1 data</Button>
+                <Button onClick={addTenData}>add 10 data</Button>
+                <Button onClick={deleteLastData}>delete 1 data</Button>
+                <Button onClick={deleteLastTenData}>delete 10 data</Button>
+            </div>
+            <VirtualTable rowKey="index" rowHeight={50} dataSource={data} scrollY={400} scrollX={800} columns={getColumns()} />
+        </div>
+    );
+};
+
+const VirtualTableWithVariousDataAndRowSelection = () => {
+    const [data, setData] = React.useState<Profile[]>([]);
+    const singleData = {
+        name: "John Brown",
+        age: 32,
+        address: "New York No. 1 Lake Park",
+    };
+
+    const [selectedRowKeys, setSelectedRowKeys] = React.useState<React.Key[]>(Array.from({length: data.length}, (_, idx) => idx));
+    const rowSelection: VirtualTableRowSelection<Profile> = {
+        width: 40,
+        onChange: _ => setSelectedRowKeys(_),
+        isDisabled: (data, rowIndex) => rowIndex === 0,
+        fixed: true,
+        selectedRowKeys,
+    };
+
+    const addOneData = () => setData([...data, singleData]);
+    const addTenData = () => setData([...data, ...Array.from({length: 10}, () => singleData)]);
+    const deleteLastData = () => setData(data.slice(0, data.length - 1));
+    const deleteLastTenData = () => setData(data.slice(0, data.length - 10));
+
+    return (
+        <div>
+            <div style={{display: "flex", justifyContent: "space-around", width: 800}}>
+                <Button onClick={addOneData}>add 1 data</Button>
+                <Button onClick={addTenData}>add 10 data</Button>
+                <Button onClick={deleteLastData}>delete 1 data</Button>
+                <Button onClick={deleteLastTenData}>delete 10 data</Button>
+            </div>
+            <VirtualTable rowSelection={rowSelection} rowKey="index" rowHeight={50} dataSource={data} scrollY={400} scrollX={800} columns={getColumns()} />
+        </div>
+    );
+};
+
+const VirtualTableWithFixedColumns = () => {
+    return <VirtualTable rowKey="index" rowHeight={50} dataSource={data} scrollY={400} scrollX={800} columns={getColumns(true)} />;
+};
+
+const VirtualTableInModal = () => {
+    const [showModal, setShowModal] = React.useState(false);
+
+    const toggleModal = React.useCallback(() => setShowModal(!showModal), [showModal]);
+
+    return (
+        <div>
+            <Button onClick={toggleModal}>Show Modal</Button>
+            {showModal && (
+                <Modal width={1300} onCancel={toggleModal}>
+                    <VirtualTable rowKey="index" rowHeight={50} dataSource={data.slice(0, 1)} scrollY={400} columns={getColumns()} />
+                </Modal>
+            )}
+        </div>
+    );
+};
+
+const VirtualTableWithExpand = () => {
+    const ExpandButton = React.useCallback(({onClick}: {onClick: () => void}) => {
+        return <Button onClick={onClick}>Click Me</Button>;
+    }, []);
+
+    const rowExpand: VirtualTableRowExpand<Profile> = {
+        width: 140,
+        renderExpandRow: (record, rowIndex) => <div style={{padding: 30}}>Data {rowIndex + 1}</div>,
+        ExpandButton,
+        fixed: true,
+    };
+    return <VirtualTable rowKey="index" rowHeight={50} dataSource={data} scrollY={400} scrollX={800} columns={getColumns(true)} rowExpand={rowExpand} />;
+};
+
+const groups: DemoHelperGroupConfig[] = [
+    {
+        title: "VirtualTable with huge amount of data",
+        showPropsHint: false,
+        components: [<VirtualTableWithData hasData />],
+    },
+    {
+        title: "VirtualTable With Row Selection",
+        showPropsHint: false,
+        components: [<VirtualTableWithRowSelection />],
+    },
+    {
+        title: "VirtualTable With Fixed Columns",
+        showPropsHint: false,
+        components: [<VirtualTableWithFixedColumns />],
+    },
+    {
+        title: "VirtualTable with various amount of data",
+        showPropsHint: false,
+        components: [<VirtualTableWithVariousData />],
+    },
+    {
+        title: "VirtualTable with various amount of data and row selection",
+        showPropsHint: false,
+        components: [<VirtualTableWithVariousDataAndRowSelection />],
+    },
+    {
+        title: "VirtualTable inside Modal",
+        showPropsHint: false,
+        components: [<VirtualTableInModal />],
+    },
+    {
+        title: "VirtualTable with expand",
+        showPropsHint: false,
+        components: [<VirtualTableWithExpand />],
+    },
+    {
+        title: "VirtualTable without Data",
+        showPropsHint: false,
+        components: [<VirtualTableWithData />],
+    },
+    {
+        title: "Loading VirtualTable",
+        showPropsHint: false,
+        components: [<LoadingVirtualTable />],
+    },
+];
+
+export const VirtualTableDemo = () => <DemoHelper groups={groups} />;

package/test/ui-test/src/dummy/dummyCallback.ts

@@ -0,0 +1,13 @@
+export const dummyEmptyCallback = (): void => {};
+
+export const dummyNumberCallback = (): number => 1;
+
+export const dummyNumberOrNullCallback = (): number | null => null;
+
+export const dummyStringCallback = (): string => "string";
+
+export const dummyStringOrNullCallback = (): string | null => null;
+
+export const dummyBooleanCallback = (): boolean => true;
+
+export const dummyBooleanOrNullCallback = (): boolean | null => null;

package/test/ui-test/src/dummy/dummyList.ts

@@ -0,0 +1,63 @@
+export function generateDummyStrings(length: number): string[] {
+    const results = [];
+
+    for (let i = 0; i < length; i++) {
+        results.push(Math.random().toString(36).substring(2));
+    }
+
+    return results;
+}
+
+/**
+ * Long string will have length above 30 chars.
+ */
+export function generateDummyLongStrings(length: number): string[] {
+    return [
+        "Lets all be unique together until we realise we are all the same.",
+        "Nobody loves a pig wearing lipstick.",
+        "Last Friday I saw a spotted striped blue worm shake hands with a legless lizard.",
+        "Eating eggs on Thursday for choir practice was recommended.",
+        "There's a reason that roses have thorns.",
+        "He enjoys practicing his ballet in the bathroom.",
+        "Greetings from the galaxy MACS0647-JD, or what we call home.",
+        "She tilted her head back and let whip cream stream into her mouth while taking a bath.",
+        "She was the type of girl who wanted to live in a pink house.",
+        "His son quipped that power bars were nothing more than adult candy bars.",
+        "She could hear him in the shower singing with a joy she hoped he'd retain after she delivered the news.",
+        "He is no James Bond; his name is Roger Moore.",
+        "The thunderous roar of the jet overhead confirmed her worst fears.",
+        "You're unsure whether or not to trust him, but very thankful that you wore a turtle neck.",
+        "If I don’t like something, I’ll stay away from it.",
+        "The blinking lights of the antenna tower came into focus just as I heard a loud snap.",
+        "The green tea and avocado smoothie turned out exactly as would be expected.",
+        "Truth in advertising and dinosaurs with skateboards have much in common.",
+        "Sometimes I stare at a door or a wall and I wonder what is this reality, why am I alive, and what is this all about?",
+        "It was the best sandcastle he had ever seen.",
+        "He hated that he loved what she hated about hate.",
+    ].slice(0, length);
+}
+
+export function generateDummyURLs(length: number): string[] {
+    return [
+        "https://homepages.cae.wisc.edu/~ece533/images/airplane.png",
+        "https://homepages.cae.wisc.edu/~ece533/images/arctichare.png",
+        "https://homepages.cae.wisc.edu/~ece533/images/baboon.png",
+        "https://homepages.cae.wisc.edu/~ece533/images/barbara.png",
+        "https://homepages.cae.wisc.edu/~ece533/images/boat.png",
+        "https://homepages.cae.wisc.edu/~ece533/images/cat.png",
+        "https://homepages.cae.wisc.edu/~ece533/images/fruits.png",
+        "https://homepages.cae.wisc.edu/~ece533/images/frymire.png",
+        "https://homepages.cae.wisc.edu/~ece533/images/girl.png",
+        "https://homepages.cae.wisc.edu/~ece533/images/goldhill.png",
+        "https://homepages.cae.wisc.edu/~ece533/images/lena.png",
+        "https://homepages.cae.wisc.edu/~ece533/images/monarch.png",
+        "https://homepages.cae.wisc.edu/~ece533/images/mountain.png",
+        "https://homepages.cae.wisc.edu/~ece533/images/peppers.png",
+        "https://homepages.cae.wisc.edu/~ece533/images/pool.png",
+        "https://homepages.cae.wisc.edu/~ece533/images/sails.png",
+        "https://homepages.cae.wisc.edu/~ece533/images/serrano.png",
+        "https://homepages.cae.wisc.edu/~ece533/images/tulips.png",
+        "https://homepages.cae.wisc.edu/~ece533/images/watch.png",
+        "https://homepages.cae.wisc.edu/~ece533/images/zelda.png",
+    ].slice(0, length);
+}

package/test/ui-test/src/dummy/dummyTableData.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import type {TableColumns} from "../../../../src/core/Table";
+import {Button} from "@pinnacle0/web-ui/core/Button";
+
+export interface MockTableData {
+    id: number;
+    name: string;
+    time: Date;
+}
+
+export function generateDummyTableData(length: number, base: number = 1): MockTableData[] {
+    const data: MockTableData[] = [];
+    for (let i = base; i <= base + length - 1; i++) {
+        data.push({
+            id: i,
+            name: "Name - " + i,
+            time: new Date(),
+        });
+    }
+    return data;
+}
+
+export const dummyTableColumns: TableColumns<MockTableData> = [
+    {
+        title: "ID",
+        customizedKey: "id",
+        width: 99,
+        renderData: _ => _.id,
+    },
+    {
+        title: "Name",
+        renderData: _ => _.name,
+    },
+    {
+        title: "Locale Time",
+        renderData: _ => _.time.toLocaleString(),
+    },
+    {
+        title: "Actions",
+        renderData: _ => <Button onClick={() => alert("Alert !")}>Dummy Button</Button>,
+    },
+];
+
+export const dummyTableWideColumns: TableColumns<MockTableData> = [
+    {
+        title: "ID",
+        width: 99,
+        fixed: "left",
+        renderData: _ => _.id,
+    },
+    ...["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K"].map(letter => ({
+        title: `Name ${letter}`,
+        renderData: (_: MockTableData) => _.name + "/" + letter,
+    })),
+    {
+        title: "Locale Time",
+        fixed: "right",
+        renderData: _ => _.time.toLocaleString(),
+    },
+];

package/test/ui-test/src/dummy/dummyUpload.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import {ModalUtil} from "@pinnacle0/web-ui//util/ModalUtil";
+import type {UploadFailureLogEntry, UploadSuccessLogEntry} from "@pinnacle0/web-ui/util/UploadUtil/type";
+
+/**
+ * This API is mocked by webpack-dev-server, to respond a fixed image, of typing TestImageUploadResponse.
+ */
+export const dummyUploadImageUploadURL = "/ajax/upload";
+export const dummyUploadImageFormField = "image";
+
+export const dummyUploadCallback = (logEntry: UploadFailureLogEntry | UploadSuccessLogEntry) => {
+    ModalUtil.createSync({
+        title: "Upload Callback",
+        body: <pre>{JSON.stringify(logEntry, null, 2)}</pre>,
+    });
+};
+
+export const dummyImportCallback = async (file: File) => {
+    const content = await importTxt(file);
+    ModalUtil.createSync({
+        title: "Import Callback",
+        body: content === null ? "<Fail to import>" : content,
+    });
+};
+
+async function importTxt(file: File): Promise<string | null> {
+    if (file.type.match(/text.*/)) {
+        return new Promise<string | null>(resolve => {
+            const fileReader = new FileReader();
+            fileReader.onload = () => {
+                const rawContent = fileReader.result?.toString();
+                if (rawContent) {
+                    resolve(rawContent);
+                } else {
+                    resolve(null);
+                }
+            };
+            fileReader.onerror = () => resolve(null);
+            fileReader.readAsText(file);
+        });
+    }
+    return null;
+}

package/test/ui-test/src/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
+        <title>Pinnacle Web UI Demo</title>
+    </head>
+    <body>
+        <div id="app-root"></div>
+    </body>
+</html>

package/test/ui-test/src/index.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import {Main} from "./component/Main";
+
+ReactDOM.createRoot(document.querySelector("#app-root")!).render(<Main />);

package/test/ui-test/src/type.ts

@@ -0,0 +1,8 @@
+export interface TestImageUploadResponse {
+    imageURL: string;
+    imageKey: string;
+}
+
+export interface APIErrorResponse {
+    message: string;
+}

package/test/ui-test/src/util/NavigationService.tsx

@@ -0,0 +1,217 @@
+import React from "react";
+import FileSearchOutlined from "@ant-design/icons/FileSearchOutlined";
+import {AdminNavigatorBase} from "@pinnacle0/web-ui/util/AdminNavigatorBase";
+import {SelectDemo} from "../component/core/SelectDemo";
+import {SliderDemo} from "../component/core/SliderDemo";
+import {AmountDemo} from "../component/core/AmountDemo";
+import {ButtonDemo} from "../component/core/ButtonDemo";
+import {CalendarDemo} from "../component/core/CalendarDemo";
+import {CarouselDemo} from "../component/core/CarouselDemo";
+import {FoldableDemo} from "../component/core/FoldableDemo";
+import {FormDemo} from "../component/core/FormDemo";
+import {InputDemo} from "../component/core/InputDemo";
+import {MiscellaneousDemo} from "../component/core/MiscellaneousDemo";
+import {ModalDemo} from "../component/core/ModalDemo";
+import {RelativeTimeDemo} from "../component/core/RelativeTimeDemo";
+import {StepContainerDemo} from "../component/core/StepContainerDemo";
+import {OverflowableTextDemo} from "../component/core/OverflowableTextDemo";
+import {TabsDemo} from "../component/core/TabsDemo";
+import {TableDemo} from "../component/core/TableDemo";
+import {VirtualTableDemo} from "../component/core/VirtualTableDemo";
+import {CascaderDemo} from "../component/core/CascaderDemo";
+import {UploaderImporterDemo} from "../component/core/UploaderImporterDemo";
+import {RenderErrorDemo} from "../component/admin/RenderErrorDemo";
+import {ConfigPageDemo} from "../component/admin/ConfigPageDemo";
+import {PermissionSelectorDemo} from "../component/admin/PermissionSelectorDemo";
+import {ResultPageDemo} from "../component/admin/ResultPageDemo";
+import {RichEditorDemo} from "../component/admin/RichEditorDemo";
+import {TablePageDemo} from "../component/admin/TablePageDemo";
+import {NavigationHistoryDemo} from "../component/admin/NavigationHistoryDemo";
+import {SeparateTabDetailDemo} from "../component/admin/SeparateTabDetailDemo";
+import type {NavigationGroupItem} from "@pinnacle0/web-ui/util/AdminNavigatorBase";
+
+export enum TestFeaturePermission {
+    ROOT_PERMISSION = "ROOT_PERMISSION",
+    JavaScript = "JavaScript",
+    TypeScript = "TypeScript",
+    Java = "Java",
+    Rust = "Rust",
+    Haskell = "Haskell",
+    Kotlin = "Kotlin",
+}
+
+export enum TestFieldPermission {
+    ROOT_PERMISSION = "ROOT_PERMISSION",
+    Kona = "Kona",
+    BlueMountain = "BlueMountain",
+    KenyanAA = "KenyanAA",
+    Tanzanian = "Tanzanian",
+    Sulawesi = "Sulawesi",
+}
+
+export class NavigationService extends AdminNavigatorBase<TestFeaturePermission, TestFieldPermission> {
+    constructor() {
+        super(TestFeaturePermission.ROOT_PERMISSION, [TestFeaturePermission.ROOT_PERMISSION], TestFieldPermission.ROOT_PERMISSION, [TestFieldPermission.ROOT_PERMISSION]);
+    }
+
+    protected allGroups(): Array<NavigationGroupItem<TestFeaturePermission, TestFieldPermission>> {
+        return [
+            {
+                title: "Core",
+                icon: <FileSearchOutlined />,
+                modules: [
+                    {
+                        url: "/core/button",
+                        title: "Button",
+                        componentType: ButtonDemo,
+                        featurePermissions: [TestFeaturePermission.TypeScript, TestFeaturePermission.JavaScript, TestFeaturePermission.Kotlin, TestFeaturePermission.Java],
+                        fieldPermissions: [TestFieldPermission.BlueMountain, TestFieldPermission.Tanzanian],
+                    },
+                    {
+                        url: "/core/modal",
+                        title: "Modal",
+                        componentType: ModalDemo,
+                    },
+                    {
+                        url: "/core/form",
+                        title: "Form",
+                        componentType: FormDemo,
+                    },
+                    {
+                        url: "/core/amount",
+                        title: "Amount",
+                        componentType: AmountDemo,
+                    },
+                    {
+                        url: "/core/input",
+                        title: "Input",
+                        componentType: InputDemo,
+                    },
+                    {
+                        url: "/core/calendar",
+                        title: "Calendar",
+                        componentType: CalendarDemo,
+                    },
+                    {
+                        url: "/core/Select",
+                        title: "Select",
+                        componentType: SelectDemo,
+                    },
+                    {
+                        url: "/core/Cascader",
+                        title: "Cascader",
+                        componentType: CascaderDemo,
+                    },
+                    {
+                        url: "/core/carousel",
+                        title: "Carousel",
+                        componentType: CarouselDemo,
+                    },
+                    {
+                        url: "/core/step-container",
+                        title: "Step Container",
+                        componentType: StepContainerDemo,
+                    },
+                    {
+                        url: "/core/foldable",
+                        title: "Foldable",
+                        componentType: FoldableDemo,
+                    },
+                    {
+                        url: "/core/tabs",
+                        title: "Tabs",
+                        componentType: TabsDemo,
+                    },
+                    {
+                        url: "/core/table",
+                        title: "Table",
+                        componentType: TableDemo,
+                    },
+                    {
+                        url: "/core/virtual-table",
+                        title: "Virtual Table",
+                        componentType: VirtualTableDemo,
+                    },
+                    {
+                        url: "/core/relative-time",
+                        title: "Relative Time",
+                        componentType: RelativeTimeDemo,
+                    },
+                    {
+                        url: "/core/slider",
+                        title: "Slider",
+                        componentType: SliderDemo,
+                    },
+                    {
+                        url: "/core/overflowable-text",
+                        title: "Overflowable Text",
+                        componentType: OverflowableTextDemo,
+                    },
+                    {
+                        url: "/core/miscellaneous",
+                        title: "Miscellaneous",
+                        componentType: MiscellaneousDemo,
+                    },
+                    {
+                        url: "/core/uploader-importer",
+                        title: "Uploader Importer",
+                        componentType: UploaderImporterDemo,
+                    },
+                ],
+            },
+            {
+                title: "Admin",
+                icon: <FileSearchOutlined />,
+                modules: [
+                    {
+                        url: "/admin/table-page",
+                        title: "Table Page",
+                        componentType: TablePageDemo,
+                        featurePermissions: [],
+                        fieldPermissions: [TestFieldPermission.Kona, TestFieldPermission.KenyanAA, TestFieldPermission.Sulawesi],
+                    },
+                    {
+                        url: "/admin/config-page",
+                        title: "Config Page",
+                        componentType: ConfigPageDemo,
+                    },
+                    {
+                        url: "/admin/result-page",
+                        title: "Result Page",
+                        componentType: ResultPageDemo,
+                    },
+                    {
+                        url: "/admin/rich-editor",
+                        title: "Rich Editor",
+                        componentType: RichEditorDemo,
+                    },
+                    {
+                        url: "/admin/permission-selector",
+                        title: "Permission Selector",
+                        componentType: PermissionSelectorDemo,
+                        featurePermissions: [],
+                    },
+                    {
+                        url: "/admin/render-error",
+                        title: "Render Error",
+                        componentType: RenderErrorDemo,
+                    },
+                    {
+                        url: "/admin/navigation-history",
+                        title: "Navigation History",
+                        routeParam: "/:tab?",
+                        componentType: NavigationHistoryDemo,
+                    },
+                    {
+                        url: "/admin/separate-tab-detail",
+                        routeParam: "/:id",
+                        title: "Detail",
+                        componentType: SeparateTabDetailDemo,
+                        display: "hidden",
+                        separateTab: true,
+                    },
+                ],
+            },
+        ];
+    }
+}

package/test/ui-test/src/util/withUncontrolledInitialValue.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import type {ControlledFormValue} from "@pinnacle0/web-ui/internal/type";
+
+type ExtractValueType<F extends ControlledFormValue<any>> = F["value"] extends infer V ? V : never;
+
+export const withUncontrolledInitialValue = <T extends ControlledFormValue<any>>(WrappedComponent: React.ComponentType<T>) => {
+    const Injected = ({initialValue, ...rest}: Omit<T, keyof ControlledFormValue<ExtractValueType<T>>> & {initialValue: ExtractValueType<T>}) => {
+        const [value, setValue] = React.useState(initialValue);
+        return <WrappedComponent {...(rest as unknown as T)} value={value} onChange={setValue} />;
+    };
+    Injected.displayName = `withUncontrolledInitialValue(${WrappedComponent.displayName || "Component"})`;
+
+    return Injected;
+};

package/test/ui-test/static/robots.txt

@@ -0,0 +1,2 @@
+User-Agent: *
+Disallow: /