@pinnacle0/web-ui 0.3.22 → 0.3.23

package/test/mobile-ui-test/src/component/FlatListDemo/index.tsx

@@ -0,0 +1,145 @@
+import React from "react";
+import {Input} from "@pinnacle0/web-ui/core/Input";
+import {FlatList} from "@pinnacle0/web-ui/core/FlatList";
+import {fetchData} from "./fetch";
+import type {VirtualFlatListItemProps} from "@pinnacle0/web-ui/core/FlatList/VirtualFlatList/type";
+import "./index.less";
+import type {FlatListItemProps} from "@pinnacle0/web-ui/core/FlatList/type";
+import {classNames} from "@pinnacle0/web-ui/util/ClassNames";
+
+const NormalItem: React.FC<FlatListItemProps<string>> = React.memo(props => {
+    const {data, index} = props;
+    const [expand, setExpand] = React.useState(false);
+
+    return (
+        <div className={classNames(`item ${index}`, {expand})}>
+            <h4>
+                {data}
+                <div>index: {index}</div>
+            </h4>
+            <button onClick={() => setExpand(_ => !_)}>toggle</button>
+            {expand && (
+                <div>
+                    <div>item 1</div>
+                    <div>item 1</div>
+                    <div>item 1</div>
+                    <div>item 1</div>
+                    <div>item 1</div>
+                    <div>item 1</div>
+                    <div>item 1</div>
+                    <div>item 1</div>
+                    <div>item 1</div>
+                    <div>item 1</div>
+                    <div>item 1</div>
+                    <div>item 1</div>
+                    <div>item 1</div>
+                    <div>item 1</div>
+                    <div>item 1</div>
+                    <div>item 1</div>
+                    <div>item 1</div>
+                    <div>item 1</div>
+                    <div>item 1</div>
+                    <div>item 1</div>
+                    <div>item 1</div>
+                </div>
+            )}
+        </div>
+    );
+});
+
+const Item: React.FC<VirtualFlatListItemProps<string>> = React.memo(props => {
+    const {data, index, measure} = props;
+    const [expand, setExpand] = React.useState(false);
+    const [value, setValue] = React.useState("");
+    const ref = React.useRef<HTMLDivElement>(null);
+    const measureRef = React.useRef(measure);
+    measureRef.current = measure;
+
+    React.useEffect(() => {
+        if (ref.current) {
+            measureRef.current(ref.current);
+        }
+    }, [expand]);
+
+    return (
+        <div className={classNames(`item ${index}`, {expand})}>
+            <h4>
+                {data}
+                <div>index: {index}</div>
+            </h4>
+            <Input value={value} onChange={setValue} />
+            <button onClick={() => setExpand(_ => !_)}>toggle</button>
+            {expand && (
+                <div>
+                    <div>item 1</div>
+                    <div>item 1</div>
+                    <div>item 1</div>
+                    <div>item 1</div>
+                    <div>item 1</div>
+                    <div>item 1</div>
+                    <div>item 1</div>
+                    <div>item 1</div>
+                    <div>item 1</div>
+                    <div>item 1</div>
+                    <div>item 1</div>
+                    <div>item 1</div>
+                    <div>item 1</div>
+                    <div>item 1</div>
+                    <div>item 1</div>
+                    <div>item 1</div>
+                    <div>item 1</div>
+                    <div>item 1</div>
+                    <div>item 1</div>
+                    <div>item 1</div>
+                    <div>item 1</div>
+                </div>
+            )}
+        </div>
+    );
+});
+
+export const FlatListDemo = () => {
+    const [data, setData] = React.useState<string[]>([]);
+    const [loading, setLoading] = React.useState(false);
+
+    const refreshData = async () => {
+        setLoading(true);
+        const data = await fetchData();
+        setData(data);
+        setLoading(false);
+    };
+
+    const loadMoreData = async () => {
+        setLoading(true);
+        const data = await fetchData();
+        setData(_ => [..._, ...data]);
+        setLoading(false);
+    };
+
+    React.useEffect(() => {
+        refreshData();
+    }, []);
+
+    return (
+        <div id="flat-list-demo">
+            <FlatList
+                loading={loading}
+                data={data}
+                renderItem={NormalItem}
+                pullDownRefreshMessage="Release to refresh"
+                onPullDownRefresh={refreshData}
+                onPullUpLoading={data.length < 100 ? loadMoreData : undefined}
+            />
+            {/* <VirtualFlatList
+                loading={loading}
+                data={data}
+                renderItem={Item}
+                pullDownRefreshMessage="Release to refresh"
+                onPullDownRefresh={refreshData}
+                onPullUpLoading={data.length < 100 ? loadMoreData : undefined}
+                gap={{left: 10, right: 10, bottom: 10, top: 10}}
+            /> */}
+            <button onClick={() => refreshData()}>update data</button>
+        </div>
+    );
+};

package/test/mobile-ui-test/src/component/Main.tsx

@@ -0,0 +1,6 @@
+import React from "react";
+import {FlatListDemo} from "./FlatListDemo";
+
+export const Main = () => {
+    return <FlatListDemo />;
+};

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

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Web UI - Mobile</title>
+    </head>
+    <body>
+        <div id="app-root"></div>
+    </body>
+</html>

package/test/mobile-ui-test/src/index.less

@@ -0,0 +1,18 @@
+* {
+    margin: 0;
+    box-sizing: border-box;
+}
+
+html,
+body {
+    height: 100%;
+    overscroll-behavior: none;
+}
+
+#app-root {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}

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

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

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

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

package/test/mobile-ui-test/tsconfig.json

@@ -0,0 +1,4 @@
+{
+    "extends": "../../config/tsconfig.test.json",
+    "include": ["./src"]
+}

package/test/ui-test/package.json

@@ -0,0 +1,5 @@
+{
+    "name": "@pinnacle0/web-ui-webpack-test",
+    "license": "UNLICENSED",
+    "private": true
+}

package/test/ui-test/src/component/DemoHelper/index.less

@@ -0,0 +1,33 @@
+.demo-helper-container {
+    padding: 20px;
+
+    > .group {
+        margin-bottom: 8px;
+
+        > h2 {
+            font-size: 26px;
+            margin-bottom: 5px;
+        }
+
+        > .components {
+            padding: 12px;
+            background-color: #fff;
+            border: 1px solid #ccc;
+            border-radius: 10px;
+
+            > div {
+                margin-right: 20px;
+                display: inline-block;
+
+                &.space {
+                    width: 20px;
+                }
+
+                &.line-break {
+                    display: block;
+                    height: 15px;
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,55 @@
+import React from "react";
+import {Tooltip} from "@pinnacle0/web-ui/core/Tooltip";
+import "./index.less";
+
+export interface DemoHelperGroupConfig {
+    title: string;
+    /**
+     * "-": line break
+     * " ": extra space
+     */
+    components: Array<React.ReactElement | "-" | " ">;
+    /**
+     * If true, it will use Tooltip to show the props of current component
+     * Default: true
+     */
+    showPropsHint?: boolean;
+    style?: React.CSSProperties;
+}
+
+export interface Props {
+    groups: DemoHelperGroupConfig[];
+    style?: React.CSSProperties;
+}
+
+export const DemoHelper = ({groups, style}: Props) => {
+    return (
+        <div className="demo-helper-container">
+            {groups.map(({title, components, style: groupStyle, showPropsHint}) => (
+                <div className="group" key={title}>
+                    <h2>{title}</h2>
+                    <div className="components" style={{...style, ...groupStyle}}>
+                        {components.map((component, index) =>
+                            component === "-" ? (
+                                <div key={index} className="line-break" />
+                            ) : component === " " ? (
+                                <div key={index} className="space" />
+                            ) : showPropsHint === false ? (
+                                <div key={index}>{component}</div>
+                            ) : (
+                                <Tooltip
+                                    placement="right"
+                                    key={index}
+                                    overlayStyle={{maxWidth: "unset"}}
+                                    title={<pre style={{minWidth: "max-content"}}>{JSON.stringify(component.props, null, 2)}</pre>}
+                                >
+                                    <div>{component}</div>
+                                </Tooltip>
+                            )
+                        )}
+                    </div>
+                </div>
+            ))}
+        </div>
+    );
+};

package/test/ui-test/src/component/Main.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import {LocaleProvider} from "@pinnacle0/web-ui/core/LocaleProvider";
+import {AdminApp} from "@pinnacle0/web-ui/admin/AdminApp";
+import {NavigationService} from "../util/NavigationService";
+import {WebUINavigatorSide} from "./WebUINavigatorSide";
+import {WebUILogo} from "./WebUILogo";
+import "@pinnacle0/web-ui/css/global.less";
+
+require("moment/locale/zh-cn");
+
+const navigationService = new NavigationService();
+const badges = {
+    "/core/button": 4000,
+    "/admin/table-page": 30,
+    "/admin/result-page": 9,
+};
+
+function globalErrorHandler(error: unknown) {
+    console.error(`global error handler:`, error);
+}
+
+export const Main = () => (
+    <LocaleProvider locale="auto">
+        <AdminApp
+            name="Pinnacle UI"
+            NavigatorSideComponent={WebUINavigatorSide}
+            LogoComponent={WebUILogo}
+            navigationService={navigationService}
+            badges={badges}
+            onLifecycleError={globalErrorHandler}
+        />
+    </LocaleProvider>
+);

package/test/ui-test/src/component/WebUILogo.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+import {AdminApp} from "@pinnacle0/web-ui/admin/AdminApp";
+import type {ExpandableProps} from "@pinnacle0/web-ui/admin/AdminApp/Default/SquareLogo";
+
+export const WebUILogo: React.FC<ExpandableProps> = ({expanded}) => {
+    return <AdminApp.SquareLogo src={require("../asset/logo.png")} expanded={expanded} />;
+};

package/test/ui-test/src/component/WebUINavigatorSide.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import {AdminApp} from "@pinnacle0/web-ui/admin/AdminApp";
+import {dummyEmptyCallback} from "../dummy/dummyCallback";
+import {SoundSwitch} from "@pinnacle0/web-ui/admin/AdminApp/Default/SoundSwitch";
+import {LocaleSelect} from "@pinnacle0/web-ui/core/LocaleSelect";
+import {i18n} from "@pinnacle0/web-ui/internal/i18n/admin";
+
+interface Props {}
+
+export const WebUINavigatorSide: React.FC<Props> = () => {
+    const t = i18n();
+    const drawerInfo = {
+        "Your Name": "Dion",
+        "Your Role": "Developer",
+        "Last Login": "This Morning",
+        [t.notificationSound]: <SoundSwitch />,
+        [t.language]: <LocaleSelect />,
+    };
+    return <AdminApp.NavigatorSide drawerInfo={drawerInfo} onLogout={dummyEmptyCallback} />;
+};

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

@@ -0,0 +1,39 @@
+import React from "react";
+import {AdminPage} from "@pinnacle0/web-ui/admin/AdminPage";
+import {Descriptions} from "@pinnacle0/web-ui/core/Descriptions";
+import {Input} from "@pinnacle0/web-ui/core/Input";
+import {WithExplanation} from "@pinnacle0/web-ui/core/WithExplanation";
+import {dummyEmptyCallback} from "../../dummy/dummyCallback";
+
+export const ConfigPageDemo = () => {
+    const [config, setConfig] = React.useState("");
+    return (
+        <AdminPage>
+            <Descriptions>
+                <Descriptions.Item label="Test config">
+                    <Input value={config} onChange={setConfig} />
+                </Descriptions.Item>
+            </Descriptions>
+            <Descriptions>
+                <Descriptions.Item label="Test config">
+                    <Input value={config} onChange={setConfig} />
+                </Descriptions.Item>
+                <Descriptions.Item label="Test config">
+                    <Input value={config} onChange={setConfig} />
+                </Descriptions.Item>
+            </Descriptions>
+            <Descriptions>
+                <Descriptions.Item label="Test config">
+                    <Input value={config} onChange={setConfig} />
+                </Descriptions.Item>
+                <Descriptions.Item label="Test config">
+                    <Input value={config} onChange={setConfig} />
+                </Descriptions.Item>
+                <Descriptions.Item label={<WithExplanation explanation="Explanation">Test config</WithExplanation>}>
+                    <Input value={config} onChange={setConfig} />
+                </Descriptions.Item>
+            </Descriptions>
+            <AdminPage.SaveBar onSave={dummyEmptyCallback} onReset={dummyEmptyCallback} leftNode={<b>Some Left Text For Extra Info</b>} />
+        </AdminPage>
+    );
+};

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

@@ -0,0 +1,30 @@
+import React from "react";
+import type {RouteComponentProps} from "react-router-dom";
+import {useLocation} from "react-router-dom";
+import {Link} from "@pinnacle0/web-ui/core/Link";
+import type {DemoHelperGroupConfig} from "../DemoHelper";
+import {DemoHelper} from "../DemoHelper";
+
+export const NavigationHistoryDemo = (props: RouteComponentProps<{tab?: string}>) => {
+    const tab = props.match.params.tab || "default";
+    const historyState = useLocation().state;
+
+    const groups: DemoHelperGroupConfig[] = [
+        {
+            title: `Switch Tab (Current: ${tab})`,
+            components: [<Link to="/admin/navigation-history/a">Tab A</Link>, <Link to="/admin/navigation-history/b">Tab B</Link>, <Link to="/admin/navigation-history">Default Tab</Link>],
+        },
+        {
+            title: `Update History (Current: ${historyState ? JSON.stringify(historyState) : "[NULL]"})`,
+            components: [
+                <Link to={{state: {test: 123, page: 10}}}>Some State Of Current Tab</Link>,
+                <Link to={{pathname: "/admin/navigation-history/c", state: {test: 456, page: 20}}}>Some State Of Tab C</Link>,
+            ],
+        },
+        {
+            title: `Open Detail (Separate Tab)`,
+            components: [<Link to="/admin/separate-tab-detail/88">Detail 88</Link>, <Link to="/admin/separate-tab-detail/99">Detail 99</Link>],
+        },
+    ];
+    return <DemoHelper groups={groups} />;
+};

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

@@ -0,0 +1,65 @@
+import React from "react";
+import {AdminPermissionSelector} from "@pinnacle0/web-ui/admin/AdminPermissionSelector";
+import {NavigationService, TestFeaturePermission} from "../../util/NavigationService";
+import type {TestFieldPermission} from "../../util/NavigationService";
+import {DemoHelper} from "../DemoHelper";
+
+export const PermissionSelectorDemo = () => {
+    const navigationGroups = React.useMemo(() => new NavigationService().groups(true), []);
+    const boundPermissionsCalculator = React.useCallback((permission: TestFeaturePermission) => (permission === TestFeaturePermission.TypeScript ? [TestFeaturePermission.JavaScript] : []), []);
+    const [feature, setFeature] = React.useState<TestFeaturePermission[]>([]);
+    const [field, setField] = React.useState<TestFieldPermission[]>([]);
+
+    return (
+        <DemoHelper
+            groups={[
+                {
+                    title: "Permission Selector",
+                    components: [
+                        <AdminPermissionSelector
+                            navigationGroups={navigationGroups}
+                            boundPermissionsCalculator={boundPermissionsCalculator}
+                            featureValue={feature}
+                            onFeatureChange={setFeature}
+                            fieldValue={field}
+                            onFieldChange={setField}
+                            featurePermissionTranslator={_ => _}
+                            fieldPermissionTranslator={_ => _}
+                            extraPermissions={[TestFeaturePermission.Haskell, TestFeaturePermission.Rust]}
+                            moduleNameWidth={150}
+                            editable
+                        />,
+                    ],
+                    showPropsHint: false,
+                },
+                {
+                    title: "Permission Selector(Feature only)",
+                    components: [
+                        <AdminPermissionSelector
+                            navigationGroups={navigationGroups}
+                            featureValue={feature}
+                            onFeatureChange={setFeature}
+                            featurePermissionTranslator={_ => _}
+                            moduleNameWidth={150}
+                            editable
+                        />,
+                    ],
+                },
+                {
+                    title: "Permission Selector(Feature only, always expand)",
+                    components: [
+                        <AdminPermissionSelector
+                            navigationGroups={navigationGroups}
+                            featureValue={feature}
+                            onFeatureChange={setFeature}
+                            featurePermissionTranslator={_ => _}
+                            moduleNameWidth={150}
+                            editable
+                            alwaysExpand
+                        />,
+                    ],
+                },
+            ]}
+        />
+    );
+};

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

@@ -0,0 +1,5 @@
+import React from "react";
+
+export const RenderErrorDemo = () => {
+    throw new Error("Lifecycle error test");
+};

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

@@ -0,0 +1,13 @@
+import React from "react";
+import {AdminPage} from "@pinnacle0/web-ui/admin/AdminPage";
+
+export const ResultPageDemo = () => {
+    const [state, setState] = React.useState<"success" | "error">("success");
+    const isSuccess = state === "success";
+    const switchResult = () => setState(isSuccess ? "error" : "success");
+    return (
+        <AdminPage>
+            <AdminPage.Result type={state} title={isSuccess ? "Success Page" : "Error Page"} subtitle="Subtitle" secondaryButton={{label: "Switch Result", onClick: switchResult}} />
+        </AdminPage>
+    );
+};

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

@@ -0,0 +1,20 @@
+import React from "react";
+import {RichEditor} from "@pinnacle0/web-ui/admin/RichEditor";
+import {dummyUploadCallback, dummyUploadImageFormField, dummyUploadImageUploadURL} from "../../dummy/dummyUpload";
+import {dummyEmptyCallback} from "../../dummy/dummyCallback";
+import type {TestImageUploadResponse, APIErrorResponse} from "../../type";
+
+export const RichEditorDemo = () => {
+    const initialValue = `<p>Initial Line 😂</p>`;
+    return (
+        <RichEditor<TestImageUploadResponse, APIErrorResponse>
+            value={initialValue}
+            formField={dummyUploadImageFormField}
+            imageURLParser={response => response.imageURL}
+            onChange={dummyEmptyCallback}
+            uploadURL={dummyUploadImageUploadURL}
+            onUploadSuccess={dummyUploadCallback}
+            onUploadFailure={dummyUploadCallback}
+        />
+    );
+};

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

@@ -0,0 +1,44 @@
+import React from "react";
+import type {RouteComponentProps} from "react-router-dom";
+import {AdminPage} from "@pinnacle0/web-ui/admin/AdminPage";
+import {AdminAppContext} from "@pinnacle0/web-ui/admin/AdminApp/context";
+import {Link} from "@pinnacle0/web-ui/core/Link";
+
+const linkStyle: React.CSSProperties = {marginTop: 10, textDecoration: "underline", color: "blue"};
+
+export const SeparateTabDetailDemo = (props: RouteComponentProps<{id: string}>) => {
+    const id = props.match.params.id;
+
+    const [status, setStatus] = React.useState<"loading" | "ok" | "error">("loading");
+    const {updateTitle} = React.useContext(AdminAppContext);
+    React.useEffect(() => {
+        const timer = setTimeout(() => {
+            if (id.length <= 3) {
+                updateTitle("Detail - " + id);
+                setStatus("ok");
+            } else {
+                updateTitle("Detail (Error)");
+                setStatus("error");
+            }
+        }, 2000);
+
+        return () => clearTimeout(timer);
+    }, [id, updateTitle]);
+
+    return (
+        <AdminPage>
+            {status === "loading" && <h1>Loading ....</h1>}
+            {status === "ok" && <h1>ID: {id}</h1>}
+            {status === "error" && <h1>Invalid ID</h1>}
+            <p style={linkStyle}>
+                <Link to="/admin/separate-tab-detail/100">ID: 100 (Valid)</Link>
+            </p>
+            <p style={linkStyle}>
+                <Link to="/admin/separate-tab-detail/200">ID: 200 (Valid)</Link>
+            </p>
+            <p style={linkStyle}>
+                <Link to="/admin/separate-tab-detail/1000">ID: 1000 (Invalid)</Link>
+            </p>
+        </AdminPage>
+    );
+};