@pinnacle0/web-ui 0.3.22 → 0.3.23

package/config/jest.config.ts

@@ -0,0 +1,57 @@
+import type {Config} from "@jest/types";
+
+const config: Config.InitialOptionsWithRootDir = {
+    // An array of file extensions your modules use
+    moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json"],
+
+    // The regexp pattern or array of patterns that Jest uses to detect test files
+    testRegex: [String.raw`.*/.+\.test\.(ts|tsx)$`],
+
+    // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
+    testPathIgnorePatterns: ["/node_modules/", "<rootDir>/build/"],
+
+    // A preset that is used as a base for Jest's configuration
+    preset: "ts-jest",
+
+    // A set of global variables that need to be available in all test environments
+    globals: {
+        "ts-jest": {
+            tsconfig: "<rootDir>/config/tsconfig.test.json",
+        },
+    },
+
+    // A map from regular expressions to paths to transformers
+    transform: {
+        [String.raw`^.+\.[jt]sx?$`]: "ts-jest",
+    },
+
+    // The root directory that Jest should scan for tests and modules within
+    rootDir: "..",
+
+    // A list of paths to directories that Jest should use to search for files in
+    roots: ["<rootDir>/src", "<rootDir>/test"],
+
+    // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
+    // Note: pathsToModuleNameMapper does NOT automatically pick up folder mapping from baseUrl, add "@pinnacle0/web-ui-test/*" to tsconfig.json
+    moduleNameMapper: {
+        [String.raw`^@pinnacle0/web-ui/(.*)$`]: "<rootDir>/src/$1",
+        [String.raw`\.(css|less)$`]: "<rootDir>/config/jest-stubs/style-stub.js",
+    },
+
+    // The test environment that will be used for testing
+    testEnvironment: "jsdom",
+
+    // A list of paths to modules that run some code to configure or set up the testing framework before each test
+    setupFilesAfterEnv: ["@testing-library/jest-dom/extend-expect"],
+
+    // All imported modules in your tests should be mocked automatically
+    automock: false,
+
+    // Automatically clear mock calls and instances between every test
+    clearMocks: true,
+
+    // An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode
+    watchPathIgnorePatterns: ["<rootDir>/build/"],
+};
+
+export default config;

package/config/tsconfig.script.json

@@ -0,0 +1,13 @@
+{
+    "extends": "../../../tsconfig.base.json",
+    "compilerOptions": {
+        "lib": ["ES2020"],
+        "module": "CommonJS",
+        "target": "ES2015",
+        "noEmit": true,
+        "rootDir": "../script/",
+
+        "jsx": "react"
+    },
+    "include": ["../script/"]
+}

package/config/tsconfig.src.json

@@ -0,0 +1,15 @@
+{
+    "extends": "../../../tsconfig.base.json",
+    "compilerOptions": {
+        "lib": ["DOM", "ESNext"],
+        "module": "ESNext",
+        "target": "ES5",
+        "rootDir": "../src/",
+        "outDir": "../build/",
+        "exactOptionalPropertyTypes": false,
+        "isolatedModules": true,
+        "jsx": "react",
+        "suppressImplicitAnyIndexErrors": true
+    },
+    "include": ["../src/"]
+}

package/config/tsconfig.test.json

@@ -0,0 +1,20 @@
+{
+    "extends": "../../../tsconfig.base.json",
+    "compilerOptions": {
+        "lib": ["DOM", "ESNext"],
+        "module": "ESNext",
+        "target": "ES5",
+        "importsNotUsedAsValues": "preserve",
+        "inlineSources": true,
+        "isolatedModules": true,
+        "jsx": "react",
+        "sourceMap": true,
+        "suppressImplicitAnyIndexErrors": true,
+        "exactOptionalPropertyTypes": false,
+        "baseUrl": "../test",
+        "paths": {
+            "@pinnacle0/web-ui/*": ["../src/*"]
+        }
+    },
+    "include": ["../test"]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pinnacle0/web-ui",
-    "version": "0.3.22",
+    "version": "0.3.23",
     "author": "Pinnacle",
     "license": "MIT",
     "sideEffects": [

package/script/build.ts

@@ -0,0 +1,103 @@
+import {PrettierUtil, TaskRunner, Utility} from "@pinnacle0/devtool-util";
+import fs from "fs";
+import {copySync as fsExtraCopySync} from "fs-extra";
+import path from "path";
+
+const FilePath = {
+    project: path.join(__dirname, ".."),
+    config: path.join(__dirname, "../config"),
+    build: path.join(__dirname, "../build"),
+    script: path.join(__dirname, "../script"),
+    src: path.join(__dirname, "../src"),
+    test: path.join(__dirname, "../test"),
+
+    jestConfig: path.join(__dirname, "../config/jest.config.ts"),
+    tsConfigForSrc: path.join(__dirname, "../config/tsconfig.src.json"),
+    projectPackageJSON: path.join(__dirname, "../package.json"),
+    projectReadMe: path.join(__dirname, "../README.md"),
+    projectLicense: path.join(__dirname, "../LICENSE.md"),
+    buildPackageJSON: path.join(__dirname, "../build/package.json"),
+    buildReadMe: path.join(__dirname, "../build/README.md"),
+    buildLicense: path.join(__dirname, "../build/LICENSE.md"),
+};
+
+new TaskRunner("build").execute([
+    {
+        name: "prettier",
+        skipInFastMode: true,
+        execute: () => {
+            PrettierUtil.check(FilePath.config);
+            PrettierUtil.check(FilePath.script);
+            PrettierUtil.check(FilePath.src);
+            PrettierUtil.check(FilePath.test);
+        },
+    },
+    {
+        name: "eslint",
+        skipInFastMode: true,
+        execute: () => {
+            Utility.runCommand("eslint", ["--ext=.js,.jsx,.ts,.tsx", FilePath.src]);
+            Utility.runCommand("eslint", ["--ext=.js,.jsx,.ts,.tsx", FilePath.test]);
+        },
+    },
+    {
+        name: "stylelint",
+        skipInFastMode: true,
+        execute: () => {
+            Utility.runCommand("stylelint", [path.join(FilePath.src, "**/*.{css,less}")]);
+            Utility.runCommand("stylelint", [path.join(FilePath.test, "**/*.{css,less}")]);
+        },
+    },
+    {
+        name: "unit test",
+        skipInFastMode: true,
+        execute: () => {
+            Utility.runCommand("jest", ["--config", FilePath.jestConfig, "--bail"]);
+        },
+    },
+    {
+        name: "prepare build directory",
+        execute: () => {
+            Utility.prepareEmptyDirectory(FilePath.build);
+        },
+    },
+    {
+        name: "compile with tsc",
+        execute: () => {
+            Utility.runCommand("tsc", ["--project", FilePath.tsConfigForSrc]);
+        },
+    },
+    {
+        name: "copy assets to build directory",
+        execute: () => {
+            const print = Utility.createConsoleLogger("build");
+            const supportedExtensions = [".less", ".css", ".json", ".jpg", ".png", ".gif", ".mp3", ".mp4", ".wmv"];
+            fsExtraCopySync(FilePath.src, FilePath.build, {
+                filter: source => {
+                    const extension = path.extname(source);
+                    // source may be a directory or a file under the directory.
+                    if (fs.statSync(source).isDirectory()) {
+                        return true;
+                    } else if (supportedExtensions.includes(extension)) {
+                        print.info(`Asset (${extension}) copied from "${path.relative(FilePath.src, source)}"`);
+                        return true;
+                    } else {
+                        if (extension !== ".tsx" && extension !== ".ts") {
+                            print.error(`Asset (${extension}) is unsupported, skipped "${path.relative(FilePath.src, source)}"`);
+                        }
+                        return false;
+                    }
+                },
+                dereference: true,
+            });
+        },
+    },
+    {
+        name: "copy package.json, markdown files",
+        execute: () => {
+            fs.copyFileSync(FilePath.projectPackageJSON, FilePath.buildPackageJSON);
+            fs.copyFileSync(FilePath.projectReadMe, FilePath.buildReadMe);
+            fs.copyFileSync(FilePath.projectLicense, FilePath.buildLicense);
+        },
+    },
+]);

package/script/format.ts

@@ -0,0 +1,7 @@
+import {PrettierUtil} from "@pinnacle0/devtool-util";
+import path from "path";
+
+PrettierUtil.format(path.join(__dirname, "../config"));
+PrettierUtil.format(path.join(__dirname, "../script"));
+PrettierUtil.format(path.join(__dirname, "../src"));
+PrettierUtil.format(path.join(__dirname, "../test"));

package/script/start-mobile.ts

@@ -0,0 +1,13 @@
+import path from "path";
+import {WebpackUtil} from "@pinnacle0/webpack-util/src";
+
+new WebpackUtil.ServerStarter({
+    projectDirectory: path.resolve(__dirname, "../test/mobile-ui-test"),
+    port: 4456,
+    dynamicPathResolvers: [
+        {
+            prefix: "@pinnacle0/web-ui",
+            resolver: path.join(__dirname, "../src"),
+        },
+    ],
+}).run();

package/script/start.ts

@@ -0,0 +1,31 @@
+import path from "path";
+import {WebpackUtil} from "@pinnacle0/webpack-util/src";
+// @ts-ignore
+import type {TestImageUploadResponse, APIErrorResponse} from "../test/ui-test/src/type";
+
+new WebpackUtil.ServerStarter({
+    projectDirectory: path.join(__dirname, "../test/ui-test"),
+    port: 4455,
+    dynamicPathResolvers: [
+        {
+            prefix: "@pinnacle0/web-ui",
+            resolver: path.join(__dirname, "../src"),
+        },
+    ],
+    interceptExpressApp: app =>
+        app.post("/ajax/upload", (request, response) => {
+            if (Math.random() > 0.5) {
+                const uploadResponse: TestImageUploadResponse = {
+                    imageURL: "https://upload.wikimedia.org/wikipedia/commons/1/11/Test-Logo.svg",
+                    imageKey: "test",
+                };
+                response.json(uploadResponse);
+            } else {
+                const errorCode = Math.random() > 0.5 ? 500 : 400;
+                const uploadResponse: APIErrorResponse = {
+                    message: "Server Error, Please Retry",
+                };
+                response.status(errorCode).json(uploadResponse);
+            }
+        }),
+}).run();

package/src/admin/AdminApp/Default/NavigatorSide/index.less

@@ -0,0 +1,57 @@
+#admin-app-default-navigator-side-button {
+    width: 32px;
+    min-width: 32px;
+    height: 32px;
+    line-height: 36px;
+    border-radius: 99px;
+
+    .anticon-user {
+        font-size: 22px;
+    }
+}
+
+#admin-app-default-drawer {
+    > .avatar {
+        @avatar-size: 140px;
+
+        display: block;
+        margin: 0 auto 20px;
+        font-size: 86px;
+        border-radius: @avatar-size / 2;
+        color: #1890ff;
+        border: 1px solid #1890ff;
+        text-align: center;
+        line-height: @avatar-size + 4;
+        width: @avatar-size;
+        height: @avatar-size;
+    }
+
+    > .grid {
+        > .row {
+            @row-height: 40px;
+
+            position: relative;
+            font-size: 15px;
+            margin-bottom: 5px;
+            height: @row-height;
+            line-height: @row-height;
+            background: #f6f6f6;
+            padding-left: 130px;
+
+            > b.label {
+                position: absolute;
+                left: 0;
+                top: 0;
+                width: 116px;
+                line-height: @row-height;
+                background: #e8e8e9;
+                padding-left: 10px;
+            }
+        }
+    }
+
+    > .bottom {
+        margin: 40px 0 10px;
+        text-align: center;
+    }
+}

package/src/admin/AdminApp/Default/NavigatorSide/index.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import UserOutlined from "@ant-design/icons/UserOutlined";
+import {Button} from "../../../../core/Button";
+import {Drawer} from "../../../../core/Drawer";
+import {i18n} from "../../../../internal/i18n/admin";
+import "./index.less";
+
+type DrawerUserInfo = {[title: string]: React.ReactElement | string | null};
+
+interface Props {
+    onLogout: () => void;
+    drawerInfo: DrawerUserInfo;
+}
+
+interface State {
+    showDrawer: boolean;
+}
+
+export class NavigatorSide extends React.PureComponent<Props, State> {
+    static displayName = "NavigatorSide";
+
+    constructor(props: Props) {
+        super(props);
+        this.state = {
+            showDrawer: false,
+        };
+    }
+
+    showDrawer = () => this.setState({showDrawer: true});
+
+    closeDrawer = () => this.setState({showDrawer: false});
+
+    render() {
+        const t = i18n();
+        const {onLogout, drawerInfo} = this.props;
+        const {showDrawer} = this.state;
+
+        return (
+            <React.Fragment>
+                <Button id="admin-app-default-navigator-side-button" size="small" onClick={this.showDrawer}>
+                    <UserOutlined />
+                </Button>
+                <Drawer width={350} visible={showDrawer} closable={false} onClose={this.closeDrawer}>
+                    <div id="admin-app-default-drawer">
+                        <UserOutlined className="avatar" />
+                        <div className="grid">
+                            {Object.entries(drawerInfo).map(([title, node], index) => {
+                                if (node) {
+                                    return (
+                                        <div className="row" key={index}>
+                                            <b className="label">{title}</b>
+                                            {node}
+                                        </div>
+                                    );
+                                }
+                            })}
+                        </div>
+                        <div className="bottom">
+                            <Button size="large" onClick={onLogout}>
+                                {t.logout}
+                            </Button>
+                        </div>
+                    </div>
+                </Drawer>
+            </React.Fragment>
+        );
+    }
+}

package/src/admin/AdminApp/Default/SoundSwitch.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import {LocalStorageUtil} from "../../../util/LocalStorageUtil";
+import {BoolSwitch} from "../../../core/BoolSwitch";
+
+interface Props {}
+
+interface State {
+    soundEnabled: boolean;
+}
+
+export class SoundSwitch extends React.PureComponent<Props, State> {
+    static displayName = "SoundSwitch";
+
+    private readonly soundEnabledKey = "admin-sound-enabled";
+
+    constructor(props: Props) {
+        super(props);
+        this.state = {
+            soundEnabled: LocalStorageUtil.getBool(this.soundEnabledKey, true),
+        };
+    }
+
+    toggleSoundSwitch = () => {
+        const newValue = !this.state.soundEnabled;
+        this.setState({soundEnabled: newValue});
+        LocalStorageUtil.setBool(this.soundEnabledKey, newValue);
+    };
+
+    render() {
+        return <BoolSwitch.OnOff value={this.state.soundEnabled} onChange={this.toggleSoundSwitch} />;
+    }
+}

package/src/admin/AdminApp/Default/SquareLogo/index.less

@@ -0,0 +1,30 @@
+#admin-app-default-logo {
+    display: flex;
+    align-items: center;
+    height: 70px;
+    padding-left: 24px;
+    transition: all 0.2s;
+
+    > img {
+        width: 50px;
+        height: 50px;
+    }
+
+    > h1 {
+        margin-left: 8px;
+        font-weight: bold;
+        font-size: 18px;
+        color: #fff;
+        overflow: hidden;
+        width: 200px;
+        white-space: nowrap;
+    }
+
+    &.collapsed {
+        padding-left: 13px;
+
+        > h1 {
+            width: 0;
+        }
+    }
+}

package/src/admin/AdminApp/Default/SquareLogo/index.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import {classNames} from "../../../../util/ClassNames";
+import {AdminAppContext} from "../../context";
+import {Link} from "../../../../core/Link";
+import "./index.less";
+
+export interface ExpandableProps {
+    expanded: boolean;
+}
+
+export interface Props extends ExpandableProps {
+    src: string;
+}
+
+export class SquareLogo extends React.PureComponent<Props> {
+    static displayName = "SquareLogo";
+    static contextType = AdminAppContext;
+    declare context: React.ContextType<typeof AdminAppContext>;
+
+    render() {
+        const {expanded, src} = this.props;
+        const {name} = this.context;
+        return (
+            <Link to="/">
+                <div id="admin-app-default-logo" className={classNames({collapsed: !expanded})}>
+                    <img src={src} />
+                    <h1>{name}</h1>
+                </div>
+            </Link>
+        );
+    }
+}

package/src/admin/AdminApp/Menu.tsx

@@ -0,0 +1,150 @@
+import React from "react";
+import {withRouter} from "react-router-dom";
+import AntMenu from "antd/lib/menu";
+import type {AdminNavigatorBase, NavigationGroupItem} from "../../util/AdminNavigatorBase";
+import type {RouteComponentProps} from "react-router-dom";
+import {LocalStorageUtil} from "../../util/LocalStorageUtil";
+import {MediaUtil} from "../../util/MediaUtil";
+import {Badge} from "../../core/Badge";
+import {AdminAppContext} from "./context";
+import "antd/lib/menu/style";
+
+interface Props extends RouteComponentProps {
+    siteName: string;
+    navigationService: AdminNavigatorBase<any, any>;
+    menuExpanded: boolean;
+    badges?: {[key: string]: number};
+}
+
+interface State {
+    currentOpenedMenuKey: string | null;
+    currentSelectedMenuKey: string | null;
+}
+
+class RouterAwareMenu extends React.PureComponent<Props, State> {
+    static displayName = "Menu";
+    static contextType = AdminAppContext;
+    declare context: React.ContextType<typeof AdminAppContext>;
+
+    private readonly soundEnabledKey = "admin-sound-enabled";
+
+    constructor(props: Props) {
+        super(props);
+        this.state = this.calculateMenuKeyByURL();
+    }
+
+    componentDidUpdate(prevProps: Props) {
+        const {location, menuExpanded, badges} = this.props;
+        if (prevProps.location.pathname !== location.pathname || prevProps.menuExpanded !== menuExpanded || prevProps.badges !== badges) {
+            this.setState(this.calculateMenuKeyByURL(prevProps.badges));
+        }
+    }
+
+    /**
+     * Return true if any field of currentBadges > prevBadges.
+     */
+    shouldAlertNewBadge = (prevBadges: {[key: string]: number}, currentBadges: {[key: string]: number}): boolean => {
+        for (const [key, badge] of Object.entries(currentBadges)) {
+            if (prevBadges[key] === undefined || badge > prevBadges[key]) {
+                return true;
+            }
+        }
+        return false;
+    };
+
+    calculateTotalBadge = (badges: {[key: string]: number}): number => {
+        let totalCount = 0;
+        this.props.navigationService.groups(false).forEach(({modules}) => {
+            modules.forEach(_ => (totalCount += badges[_.url] || 0));
+        });
+        return totalCount;
+    };
+
+    calculateMenuKeyByURL = (prevBadges?: {[key: string]: number}): State => {
+        const {location, menuExpanded, siteName, badges, navigationService} = this.props;
+        const allNavigationGroups = navigationService.groups(true);
+        let currentOpenedMenuKey: string | null = allNavigationGroups?.[0]?.title || null; // Fallback opened key
+        let currentSelectedMenuKey = null;
+        const currentModule = navigationService.moduleByURL(location.pathname);
+        const totalBadgeCount = badges ? this.calculateTotalBadge(badges) : 0;
+        const titlePrefix = (totalBadgeCount > 0 ? `(${totalBadgeCount}) ` : "") + siteName;
+        const soundEnabled = LocalStorageUtil.getBool(this.soundEnabledKey, true);
+
+        if (soundEnabled && prevBadges && badges && this.shouldAlertNewBadge(prevBadges, badges)) {
+            MediaUtil.playAudio(require("./asset/alert.mp3"));
+        }
+
+        if (currentModule) {
+            const matchedGroup = allNavigationGroups.find(_ => _.modules.includes(currentModule));
+            if (matchedGroup) {
+                currentOpenedMenuKey = matchedGroup.title;
+                currentSelectedMenuKey = currentModule.url;
+            }
+            document.title = titlePrefix + " - " + currentModule.title;
+        } else {
+            document.title = titlePrefix;
+        }
+
+        if (!menuExpanded) {
+            currentOpenedMenuKey = null; // Otherwise, AntD will pop this menu
+        }
+
+        return {currentOpenedMenuKey, currentSelectedMenuKey};
+    };
+
+    onMenuOpenChange = (openKeys: string[]) => {
+        const length = openKeys.length;
+        if (length === 0) {
+            this.setState({currentOpenedMenuKey: null});
+        } else if (length === 1) {
+            this.setState({currentOpenedMenuKey: openKeys[0]});
+        } else {
+            const index = openKeys.indexOf(this.state.currentOpenedMenuKey!); // By logic, index should be 0/1 (length should be 2)
+            if (index >= 0) {
+                this.setState({currentOpenedMenuKey: openKeys[length - 1 - index]});
+            }
+        }
+    };
+
+    renderMenuGroup = (groupItem: NavigationGroupItem<any, any>) => {
+        const {history, badges, menuExpanded} = this.props;
+        let totalCount = 0;
+        const children = groupItem.modules.map(({title, url}) => {
+            const count = badges?.[url] || 0;
+            totalCount += count;
+            return (
+                <AntMenu.Item key={url} onClick={() => history.push(url)}>
+                    <Badge count={count}>{title}</Badge>
+                </AntMenu.Item>
+            );
+        });
+        const title = (
+            <Badge count={totalCount}>
+                {groupItem.icon} {menuExpanded ? groupItem.title : ""}
+            </Badge>
+        );
+        return (
+            <AntMenu.SubMenu title={title} key={groupItem.title}>
+                {children}
+            </AntMenu.SubMenu>
+        );
+    };
+
+    render() {
+        const {navigationService} = this.props;
+        const {currentOpenedMenuKey, currentSelectedMenuKey} = this.state;
+        return (
+            <AntMenu
+                theme="dark"
+                mode="inline"
+                openKeys={currentOpenedMenuKey ? [currentOpenedMenuKey] : []}
+                selectedKeys={currentSelectedMenuKey ? [currentSelectedMenuKey] : []}
+                onOpenChange={this.onMenuOpenChange as any}
+            >
+                {navigationService.groups(false).map(this.renderMenuGroup)}
+            </AntMenu>
+        );
+    }
+}
+
+export const Menu = withRouter(RouterAwareMenu);