@pinnacle0/web-ui 0.3.36 → 0.3.39

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

@@ -1,149 +0,0 @@
-import React from "react";
-import {classNames} from "@pinnacle0/web-ui/util/ClassNames";
-import {Input} from "@pinnacle0/web-ui/core/Input";
-import {VirtualFlatList} from "@pinnacle0/web-ui/core/FlatList/VirtualFlatList";
-import {FlatList} from "@pinnacle0/web-ui/core/FlatList";
-import {fetchData} from "./fetch";
-import type {VirtualFlatListItemProps} from "@pinnacle0/web-ui/core/FlatList/VirtualFlatList/type";
-import type {FlatListItemProps} from "@pinnacle0/web-ui/core/FlatList/type";
-import "./index.less";
-
-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
-                rowKey="index"
-                loading={loading}
-                data={data}
-                renderItem={NormalItem}
-                pullDownRefreshMessage="Release to refresh"
-                pullDownRefreshingMessage="Refreshing..."
-                onPullDownRefresh={refreshData}
-                onPullUpLoading={data.length < 100 ? loadMoreData : undefined}
-            />
-            {/* <VirtualFlatList
-                loading={loading}
-                data={data}
-                rowKey="index"
-                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

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

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

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

@@ -1,18 +0,0 @@
-* {
-    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

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

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

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

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

package/test/ui-test/package.json

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,44 +0,0 @@
-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>
-    );
-};