@pinnacle0/web-ui 0.3.23 → 0.3.26

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

@@ -1,35 +0,0 @@
-import React, {useEffect} from "react";
-import moment from "moment";
-import type {Props as RelativeTimeProps} from "@pinnacle0/web-ui/core/RelativeTime";
-import {RelativeTime} from "@pinnacle0/web-ui/core/RelativeTime";
-import type {DemoHelperGroupConfig} from "../DemoHelper";
-import {DemoHelper} from "../DemoHelper";
-
-const RelativeTimeDisplay = (props: RelativeTimeProps) => {
-    const [initialRepaintTimeout, setInitialRepaintTimeout] = React.useState("-");
-    const ref = React.useRef<RelativeTime>(null);
-    useEffect(() => {
-        const timeout = setTimeout(() => setInitialRepaintTimeout(`${ref.current!["timeoutDuration"] / 1000}`), 10);
-        return () => clearTimeout(timeout);
-    }, []);
-    return (
-        <div>
-            <div>{moment(props.date).format()}</div>
-            <div>Update in {initialRepaintTimeout} seconds</div>
-            <RelativeTime {...props} ref={ref} />
-        </div>
-    );
-};
-
-const groups: DemoHelperGroupConfig[] = [
-    {
-        title: "RelativeTime",
-        components: [
-            <RelativeTimeDisplay date={new Date()} />,
-            <RelativeTimeDisplay date={new Date("2020-08-13T14:00:00+08:00")} />,
-            //
-        ],
-    },
-];
-
-export const RelativeTimeDemo = () => <DemoHelper groups={groups} />;

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

@@ -1,141 +0,0 @@
-import React from "react";
-import {EnumRadio} from "@pinnacle0/web-ui/core/EnumRadio";
-import {EnumSelect} from "@pinnacle0/web-ui/core/EnumSelect";
-import {MultipleEnumSelect} from "@pinnacle0/web-ui/core/MultipleEnumSelect";
-import {BoolRadio} from "@pinnacle0/web-ui/core/BoolRadio";
-import {Select} from "@pinnacle0/web-ui/core/Select";
-import {withUncontrolledInitialValue} from "../../../util/withUncontrolledInitialValue";
-import {DemoHelper} from "../../DemoHelper";
-import type {DemoHelperGroupConfig} from "../../DemoHelper";
-
-const UncontrolledEnumRadio = withUncontrolledInitialValue(EnumRadio);
-const UncontrolledBoolRadio = withUncontrolledInitialValue(BoolRadio);
-const UncontrolledEnumRadioNullable = withUncontrolledInitialValue(EnumRadio.Nullable);
-const UncontrolledEnumRadioInitialNullable = withUncontrolledInitialValue(EnumRadio.InitialNullable);
-const UncontrolledMultipleSelect = withUncontrolledInitialValue(MultipleEnumSelect);
-const UncontrolledEnumSelect = withUncontrolledInitialValue(EnumSelect);
-const UncontrolledEnumSelectNullable = withUncontrolledInitialValue(EnumSelect.Nullable);
-const UncontrolledEnumSelectInitialNullable = withUncontrolledInitialValue(EnumSelect.InitialNullable);
-
-enum TestEnum {
-    ONE,
-    TWO,
-    THREE,
-}
-
-const groups: DemoHelperGroupConfig[] = [
-    {
-        title: "Enum Radio Demo",
-        components: [<UncontrolledEnumRadio list={[1, 2, 3]} translator={_ => _ + ""} initialValue={1} />],
-    },
-    {
-        title: "Nullable Enum Radio Demo",
-        components: [<UncontrolledEnumRadioNullable list={[1, 2, 3]} translator={_ => _ + ""} initialValue={1} />],
-    },
-    {
-        title: "Initial Nullable Enum Radio Demo",
-        components: [<UncontrolledEnumRadioInitialNullable list={[1, 2, 3]} translator={_ => _ + ""} initialValue={null} />],
-    },
-    {
-        title: "Enum Radio Button Demo",
-        components: [
-            <UncontrolledEnumRadio list={[1, 2, 3]} translator={_ => _ + ""} initialValue={1} useButtonMode />,
-            <UncontrolledEnumRadio
-                list={[TestEnum.ONE, TestEnum.TWO, TestEnum.THREE]}
-                translator={_ => (_ === TestEnum.ONE ? "One" : _ === TestEnum.TWO ? "Two" : "Three")}
-                initialValue={TestEnum.ONE}
-                useButtonMode
-            />,
-        ],
-    },
-    {
-        title: "Boolean Radio Nullable",
-        components: [<UncontrolledBoolRadio allowNull initialValue={null} />],
-    },
-    {
-        title: "Boolean Radio Initial Nullable",
-        components: [<UncontrolledBoolRadio initialValue />],
-    },
-    {
-        title: "Select",
-        components: [
-            <Select
-                options={[
-                    {
-                        label: "Apple",
-                        value: "Apple",
-                    },
-                    {
-                        label: "Disabled",
-                        value: "Disabled",
-                        disabled: true,
-                    },
-                ]}
-                style={{width: 200}}
-            />,
-        ],
-    },
-    {
-        title: "MultipleEnumSelect",
-        components: [<UncontrolledMultipleSelect list={["apple", "boy", "c++"]} translator={_ => _.toString()} initialValue={["apple"]} style={{width: 200}} />],
-    },
-    {
-        title: "Enum Dropdown Demo",
-        components: [
-            <UncontrolledEnumSelect
-                list={["apple🍏", "banana🍌", "canadian🍁", "donki🐧"]}
-                initialValue="apple"
-                translator={_ => String(_).toUpperCase()}
-                style={{
-                    width: 200,
-                }}
-            />,
-            <UncontrolledEnumSelect
-                list={["apple🍏", "banana🍌", "canadian🍁", "donki🐧"]}
-                initialValue="banana"
-                translator={_ => String(_).toUpperCase()}
-                style={{
-                    width: 200,
-                }}
-            />,
-        ],
-    },
-    {
-        title: "Nullable Enum Dropdown Demo",
-        components: [
-            <UncontrolledEnumSelectNullable
-                list={["apple🍏", "banana🍌", "canadian🍁", "donki🐧"]}
-                initialValue={null}
-                translator={_ => String(_).toUpperCase()}
-                nullText="Pick your food"
-                style={{
-                    width: 200,
-                }}
-            />,
-            <UncontrolledEnumSelectNullable
-                list={["apple🍏", "banana🍌", "canadian🍁", "donki🐧"]}
-                initialValue="apple"
-                translator={_ => String(_).toUpperCase()}
-                style={{
-                    width: 200,
-                }}
-            />,
-        ],
-    },
-    {
-        title: "Initial Nullable Enum Dropdown Demo",
-        components: [
-            <UncontrolledEnumSelectInitialNullable
-                list={["apple🍏", "banana🍌", "canadian🍁", "donki🐧"]}
-                initialValue={null}
-                placeholder="Please select ..."
-                translator={_ => String(_).toUpperCase()}
-                style={{
-                    width: 200,
-                }}
-            />,
-        ],
-    },
-];
-
-export const SelectDemo = () => <DemoHelper groups={groups} />;

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

@@ -1,44 +0,0 @@
-import React from "react";
-import {Slider} from "@pinnacle0/web-ui/core/Slider";
-import type {SafeReactChildren} from "@pinnacle0/web-ui/internal/type";
-import {withUncontrolledInitialValue} from "../../util/withUncontrolledInitialValue";
-import type {DemoHelperGroupConfig} from "../DemoHelper";
-import {DemoHelper} from "../DemoHelper";
-
-const UncontrolledSlider = withUncontrolledInitialValue(Slider);
-
-const UncontrolledRangeSlider = withUncontrolledInitialValue(Slider.Range);
-
-// <Slider> will fill parent's width if unspecified
-const HasWidth = ({children, width = 200}: {children: SafeReactChildren; width?: number}) => <div style={{width}}>{children}</div>;
-
-const groups: DemoHelperGroupConfig[] = [
-    {
-        title: "Slider Demo",
-        showPropsHint: true,
-        components: [
-            <HasWidth>
-                <UncontrolledSlider initialValue={0} />
-            </HasWidth>,
-            <UncontrolledSlider initialValue={3} min={2} max={9} style={{width: 300}} />,
-            <UncontrolledSlider initialValue={3} min={-5} max={9} style={{width: 300}} />,
-            "-",
-            <UncontrolledSlider initialValue={3} min={-5} max={9} style={{width: 300}} marks={{3: "Initial", [-5]: "min", 9: "max"}} />,
-            "-",
-            <UncontrolledSlider initialValue={3} min={-5} max={9} style={{width: 300}} marks={{3: "Initial", [-5]: "min(-5)", 9: "max(9)"}} showButton />,
-            "-",
-            <UncontrolledSlider initialValue={3} min={-5} max={9} style={{width: 500}} showButton />,
-        ],
-    },
-    {
-        title: "Slider.Range Demo",
-        showPropsHint: false,
-        components: [
-            <HasWidth>
-                <UncontrolledRangeSlider initialValue={[5, 50]} />
-            </HasWidth>,
-        ],
-    },
-];
-
-export const SliderDemo = () => <DemoHelper groups={groups} />;

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

@@ -1,53 +0,0 @@
-import React from "react";
-import type {StepItem} from "@pinnacle0/web-ui/core/StepFormContainer";
-import {StepFormContainer} from "@pinnacle0/web-ui/core/StepFormContainer";
-import {Form} from "@pinnacle0/web-ui/core/Form";
-import {Input} from "@pinnacle0/web-ui/core/Input";
-import type {DemoHelperGroupConfig} from "../DemoHelper";
-import {DemoHelper} from "../DemoHelper";
-
-const FormItem = () => {
-    const [value, setValue] = React.useState("");
-    const validator = () => (value.length >= 2 ? new Promise<null>(resolve => setTimeout(() => resolve(null), 300)) : "Length at least 2");
-    return (
-        <Form.Item label="Name" extra="Length at least 2" validator={validator}>
-            <Input value={value} onChange={setValue} />
-        </Form.Item>
-    );
-};
-
-const steps: StepItem[] = [
-    {title: "one", content: <FormItem />},
-    {title: "too", content: <FormItem />},
-    {title: "free", content: <FormItem />},
-];
-
-const containerStyle: React.CSSProperties = {width: 800};
-
-export const StepContainerDemo = () => {
-    const [currentStep, setCurrentStep] = React.useState(1);
-
-    const group: DemoHelperGroupConfig[] = [
-        {
-            title: "Step Container",
-            showPropsHint: false,
-            components: [<StepFormContainer currentStep={currentStep} steps={steps} onStepChange={setCurrentStep} onFinish={() => alert("Done")} style={containerStyle} />],
-        },
-        {
-            title: "Step Container (Vertical Label)",
-            showPropsHint: false,
-            components: [
-                <StepFormContainer
-                    stepLabelPlacement="vertical"
-                    currentStep={currentStep}
-                    steps={steps}
-                    onStepChange={setCurrentStep}
-                    onFinish={() => alert("All steps finished")}
-                    style={containerStyle}
-                />,
-            ],
-        },
-    ];
-
-    return <DemoHelper groups={group} />;
-};

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

@@ -1,81 +0,0 @@
-import {Button} from "@pinnacle0/web-ui/core/Button";
-import type {TableColumns} from "@pinnacle0/web-ui/core/Table";
-import {Table} from "@pinnacle0/web-ui/core/Table";
-import React from "react";
-import type {DemoHelperGroupConfig} from "../DemoHelper";
-import {DemoHelper} from "../DemoHelper";
-
-interface Profile {
-    key: React.Key;
-    name: string;
-    age: number;
-    address: string;
-}
-
-const data: Profile[] = [
-    {
-        key: "1",
-        name: "John Brown",
-        age: 32,
-        address: "New York No. 1 Lake Park",
-    },
-    {
-        key: "2",
-        name: "Jim Green",
-        age: 42,
-        address: "London No. 1 Lake Park",
-    },
-    {
-        key: "3",
-        name: "Joe Black",
-        age: 32,
-        address: "Sidney No. 1 Lake Park",
-    },
-    {
-        key: "4",
-        name: "Disabled User",
-        age: 99,
-        address: "Sidney No. 1 Lake Park",
-    },
-];
-
-const TableWithActionButton = ({hasData = false}: {hasData?: boolean}) => {
-    const columns: TableColumns<Profile> = [
-        {
-            title: "Name",
-            renderData: _ => _.name,
-            onCell: _ => ({
-                colSpan: _.key === "4" ? 2 : 1,
-            }),
-        },
-        {
-            title: "Address",
-            renderData: _ => _.address,
-        },
-        {
-            title: "age",
-            renderData: _ => _.age,
-        },
-        {
-            title: "action",
-            renderData: () => <Button>Click Me</Button>,
-        },
-    ];
-
-    return <Table rowKey="index" dataSource={hasData ? data : []} columns={columns} />;
-};
-
-const groups: DemoHelperGroupConfig[] = [
-    {
-        title: "Table with Action button",
-        showPropsHint: false,
-        components: [<TableWithActionButton hasData />],
-    },
-    {
-        title: "Table without Data",
-        showPropsHint: false,
-        components: [<TableWithActionButton />],
-    },
-];
-
-export const TableDemo = () => <DemoHelper groups={groups} />;

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

@@ -1,136 +0,0 @@
-import React from "react";
-import type {TypedTabMap, TypedTabList} from "@pinnacle0/web-ui/core/TypedTabs";
-import {TypedTabs} from "@pinnacle0/web-ui/core/TypedTabs";
-import type {DemoHelperGroupConfig} from "../DemoHelper";
-import {DemoHelper} from "../DemoHelper";
-
-type TabKey = "FB" | "AMZN" | "AAPL" | "NFLX" | "GOOGL" | "MSFT";
-
-const maxVisibleTabCount = 3.5;
-
-const demoTabPaneStyle: React.CSSProperties = {
-    textAlign: "center",
-    height: "100%",
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    color: "yellow",
-    fontWeight: "bold",
-    fontSize: 30,
-    background: "orange",
-};
-
-const tabs: TypedTabMap<TabKey> = {
-    FB: {
-        title: "FB",
-        content: <div style={demoTabPaneStyle}>Facebook, Inc.</div>,
-    },
-    AMZN: {
-        title: "AMZN",
-        content: <div style={demoTabPaneStyle}>Amazon, Inc.</div>,
-    },
-    AAPL: {
-        title: "AAPL",
-        content: <div style={demoTabPaneStyle}>Apple, Inc.</div>,
-    },
-    NFLX: {
-        title: "NFLX",
-        content: <div style={demoTabPaneStyle}>Netflix, Inc.</div>,
-    },
-    GOOGL: {
-        title: "GOOGL",
-        content: <div style={demoTabPaneStyle}>Alphabet Inc.</div>,
-    },
-    MSFT: {
-        title: "MSFT",
-        content: <div style={demoTabPaneStyle}>Microsoft Corporation</div>,
-    },
-};
-
-const Card = () => {
-    const [activeKey, setCurrentKey] = React.useState<TabKey>("FB");
-    return <TypedTabs activeKey={activeKey} onChange={setCurrentKey} tabs={tabs} />;
-};
-
-const Line = () => {
-    const [activeKey, setCurrentKey] = React.useState<TabKey>("FB");
-    return <TypedTabs type="line" activeKey={activeKey} onChange={setCurrentKey} tabs={tabs} />;
-};
-
-const LineWithMaxVisible = () => {
-    const [activeKey, setCurrentKey] = React.useState<TabKey>("FB");
-    return (
-        <div style={{width: 550, height: 300, backgroundColor: "#cc6", padding: 12}}>
-            <TypedTabs
-                style={{backgroundColor: "#ffffff"}}
-                tabBarStyle={{backgroundColor: "#efefe2"}}
-                initialMaxVisibleTabCount={maxVisibleTabCount}
-                type="line"
-                activeKey={activeKey}
-                onChange={setCurrentKey}
-                tabs={tabs}
-            />
-        </div>
-    );
-};
-
-const CardWithMaxVisible = () => {
-    const [activeKey, setCurrentKey] = React.useState<TabKey>("FB");
-
-    return (
-        <div style={{width: 380}}>
-            <TypedTabs initialMaxVisibleTabCount={maxVisibleTabCount} type="card" activeKey={activeKey} onChange={setCurrentKey} tabs={tabs} />
-        </div>
-    );
-};
-
-const WithExtra = () => {
-    const [activeKey, setCurrentKey] = React.useState<TabKey>("FB");
-    return (
-        <TypedTabs
-            type="line"
-            activeKey={activeKey}
-            onChange={setCurrentKey}
-            tabs={tabs}
-            tabBarPrefix={<div style={{width: 40, height: 40, background: "blue"}}>Left</div>}
-            tabBarSuffix={<div style={{width: 40, height: 40, background: "red"}}>Right</div>}
-        />
-    );
-};
-
-const ArrayMode = () => {
-    const [activeKey, setCurrentKey] = React.useState<TabKey>("FB");
-    const tabsInArray: TypedTabList<TabKey> = [
-        {
-            key: "FB",
-            title: "FB",
-            content: <div>FB content 1</div>,
-        },
-        {
-            key: "AMZN",
-            title: "AMZN",
-            content: <div>AMZN content 2</div>,
-        },
-    ];
-    return <TypedTabs activeKey={activeKey} onChange={setCurrentKey} tabs={tabsInArray} />;
-};
-
-const groups: DemoHelperGroupConfig[] = [
-    {
-        title: "Simple Tabs",
-        showPropsHint: false,
-        components: [<Card />, "-", <Line />, "-", <ArrayMode />],
-    },
-    {
-        title: "With Extra",
-        showPropsHint: false,
-        components: [<WithExtra />],
-    },
-    {
-        title: `With Max Visible (${maxVisibleTabCount})`,
-        showPropsHint: false,
-        components: [<LineWithMaxVisible />, "-", <CardWithMaxVisible />],
-    },
-];
-
-export const TabsDemo = () => <DemoHelper groups={groups} />;

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

@@ -1,52 +0,0 @@
-import React from "react";
-import {ImageUploader} from "@pinnacle0/web-ui/core/ImageUploader";
-import {LocalImporter} from "@pinnacle0/web-ui/core/LocalImporter";
-import {dummyUploadImageUploadURL, dummyUploadImageFormField, dummyUploadCallback, dummyImportCallback} from "../../dummy/dummyUpload";
-import type {TestImageUploadResponse, APIErrorResponse} from "../../type";
-import type {DemoHelperGroupConfig} from "../DemoHelper";
-import {DemoHelper} from "../DemoHelper";
-
-const ImageUploaderDemo = ({removable, width, height}: {removable: boolean; width: number; height: number}) => {
-    const [value, setValue] = React.useState<string | null>(null);
-    return (
-        <div>
-            <ImageUploader<TestImageUploadResponse, APIErrorResponse>
-                width={width}
-                height={height}
-                formField={dummyUploadImageFormField}
-                imageURL={value}
-                onChange={response => setValue(response.imageURL)}
-                onRemove={removable ? () => setValue(null) : undefined}
-                uploadURL={dummyUploadImageUploadURL}
-                onUploadFailure={dummyUploadCallback}
-                onUploadSuccess={dummyUploadCallback}
-            />
-            <br />
-            <p>
-                Size: {width} x {height}
-            </p>
-        </div>
-    );
-};
-
-const LocalImporterDemo = () => <LocalImporter type="txt" style={{width: 500, height: 120}} onImport={dummyImportCallback} />;
-
-const groups: DemoHelperGroupConfig[] = [
-    {
-        title: "Removable Image Uploader",
-        showPropsHint: false,
-        components: [<ImageUploaderDemo removable width={500} height={300} />],
-    },
-    {
-        title: "Un-removable Image Uploader",
-        showPropsHint: false,
-        components: [<ImageUploaderDemo removable={false} width={150} height={100} />],
-    },
-    {
-        title: "Importer (no AJAX call)",
-        showPropsHint: false,
-        components: [<LocalImporterDemo />],
-    },
-];
-
-export const UploaderImporterDemo = () => <DemoHelper groups={groups} />;