@publishfx/publish-components 2.0.3

package/README.md

@@ -0,0 +1,191 @@
+# @moonton/publish-components
+
+A React UI component library for the Publish platform, built with React, TypeScript, and styled-components.
+
+## Installation
+
+```bash
+pnpm add @moonton/publish-components
+# or
+npm install @moonton/publish-components
+# or
+yarn add @moonton/publish-components
+```
+
+## Peer Dependencies
+
+This package requires the following peer dependencies:
+- `react` (>=18.3.1)
+- `react-dom` (>=18.3.1)
+
+Make sure to install them in your project:
+
+```bash
+pnpm add react react-dom
+```
+
+## Components
+
+### ActionButton
+
+A customizable button component with predefined action types and icons.
+
+```jsx
+import { ActionButton, ActionButtonType } from '@moonton/publish-components';
+
+function App() {
+  return (
+    <ActionButton 
+      action={ActionButtonType.Export}
+      onClick={() => console.log('Export clicked')}
+      monitorId="export-button"
+    >
+      Export
+    </ActionButton>
+  );
+}
+```
+
+**Props:**
+- `action`: `ActionButtonType` - The action type (export, batchupload, add, setting, upload)
+- `monitorId?`: `string` - Monitoring ID for analytics
+- All other `ButtonProps` from `@arco-design/web-react`
+
+**Available Action Types:**
+- `ActionButtonType.Export` - Export action
+- `ActionButtonType.Batchupload` - Batch upload action
+- `ActionButtonType.Add` - Add action
+- `ActionButtonType.SETTING` - Settings action
+- `ActionButtonType.Upload` - Upload action
+
+### PerformanceTable
+
+A high-performance data table component with column resizing, sorting, pagination, and advanced formatting features.
+
+```jsx
+import { PerformanceTable, PerformanceTableColumn } from '@moonton/publish-components';
+
+const columns: PerformanceTableColumn[] = [
+  {
+    title: 'Name',
+    dataIndex: 'name',
+    minWidth: 100,
+  },
+  {
+    title: 'Revenue',
+    dataIndex: 'revenue',
+    showCurrency: true,
+    showPercent: true,
+  },
+];
+
+function App() {
+  return (
+    <PerformanceTable
+      columns={columns}
+      dataSource={data}
+      showPagination
+      pagination={{
+        pageSize: 10,
+        current: 1,
+      }}
+    />
+  );
+}
+```
+
+**Key Features:**
+- Column resizing with min/max width constraints
+- Number, currency, and percentage formatting
+- Color scale visualization
+- Custom formatters
+- Sorting and pagination
+- Row selection
+- Summary rows
+- Highlight settings for weekends/special dates
+- Full-screen mode support
+
+**Props:**
+- `columns`: `PerformanceTableColumn[]` - Column configuration
+- `dataSource?`: `T[]` - Table data
+- `showPagination?`: `boolean` - Show pagination
+- `pagination?`: `TableProps['pagination'] | false` - Pagination config
+- `loading?`: `boolean` - Loading state
+- `onSort?`: `(dataIndex: string, direction: 'ascend' | 'descend' | null) => void` - Sort callback
+- `isFullScreen?`: `boolean` - Full screen mode
+- And more... See TypeScript definitions for complete API
+
+### ReactSticky
+
+Sticky positioning components for creating sticky headers, sidebars, and other elements.
+
+```jsx
+import { Sticky, StickyContainer } from '@moonton/publish-components';
+
+function App() {
+  return (
+    <StickyContainer>
+      <Sticky>
+        <div>This will stick to the top when scrolling</div>
+      </Sticky>
+      <div>Regular content</div>
+    </StickyContainer>
+  );
+}
+```
+
+**Components:**
+- `StickyContainer` - Container component that manages sticky context
+- `Sticky` - Component that sticks to a position when scrolling
+
+### Icons
+
+A collection of SVG icon components.
+
+```jsx
+import { 
+  IconExport, 
+  IconAdd, 
+  IconUpload,
+  IconSearch,
+  // ... and more
+} from '@moonton/publish-components';
+
+function App() {
+  return (
+    <div>
+      <IconExport width={24} height={24} />
+      <IconAdd width={24} height={24} />
+    </div>
+  );
+}
+```
+
+**Available Icons:**
+- Icon403, IconAdd, IconBatchupload, IconClose, IconDrag_sort
+- IconError, IconExport, IconFolder, IconOpen_down, IconOpen_right
+- IconPlus, IconSearch, IconSelected_transfer, IconSettings
+- IconUp_down, IconUpload
+- And more platform icons (Apple, Facebook, Google, Instagram, TikTok, Twitch, Twitter, Youtube)
+
+## Development
+
+### Build
+
+```bash
+pnpm build
+```
+
+### Development Mode (Watch)
+
+```bash
+pnpm dev
+```
+
+## TypeScript Support
+
+This package is written in TypeScript and includes full type definitions. All components and their props are fully typed.
+
+## License
+
+ISC

package/dist/ActionButton/index.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { ButtonProps } from "@arco-design/web-react";
+import { ActionButtonType } from "./interface";
+type ActionButtonProps = {
+    action: ActionButtonType;
+    monitorId?: string;
+    icon?: React.ReactNode;
+} & ButtonProps;
+declare const ActionButton: (props: ActionButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default ActionButton;

package/dist/ActionButton/index.js

@@ -0,0 +1,40 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { omit } from "lodash";
+import { Button } from "@arco-design/web-react";
+import IconExport from "../assets/icons/IconExport.js";
+import IconBatchupload from "../assets/icons/IconBatchupload.js";
+import IconAdd from "../assets/icons/IconAdd.js";
+import IconSettings from "../assets/icons/IconSettings.js";
+import IconUpload from "../assets/icons/IconUpload.js";
+import index_module from "./index.module.js";
+const IconComponents = {
+    export: IconExport,
+    batchupload: IconBatchupload,
+    add: IconAdd,
+    setting: IconSettings,
+    upload: IconUpload
+};
+const ActionButton = (props)=>{
+    const getIcon = (action)=>{
+        const Component = IconComponents[action];
+        return props.icon ? props.icon : Component && /*#__PURE__*/ jsx(Component, {
+            width: 16,
+            height: 16
+        });
+    };
+    return /*#__PURE__*/ jsx("div", {
+        id: props.monitorId,
+        className: index_module.actionbutton_wrapper,
+        children: /*#__PURE__*/ jsx(Button, {
+            type: "text",
+            className: `${index_module["arco-btn-text"]} ${props.disabled ? index_module.disabled : ''}`,
+            ...omit(props, [
+                "monitorId"
+            ]),
+            icon: getIcon(props.action)
+        })
+    });
+};
+const src_ActionButton = ActionButton;
+export { src_ActionButton as default };

package/dist/ActionButton/index.module.js

@@ -0,0 +1,9 @@
+import "./index_module.css";
+const index_module = {
+    actionbutton_wrapper: "actionbutton_wrapper-RqUrTb",
+    actionbuttonWrapper: "actionbutton_wrapper-RqUrTb",
+    "arco-btn-text": "arco-btn-text-ojQRJu",
+    arcoBtnText: "arco-btn-text-ojQRJu",
+    disabled: "disabled-op18gA"
+};
+export { index_module as default };

package/dist/ActionButton/index_module.css

@@ -0,0 +1,23 @@
+.actionbutton_wrapper-RqUrTb {
+  display: inline-block;
+}
+
+.actionbutton_wrapper-RqUrTb.actionbutton_wrapper-RqUrTb .arco-btn-text-ojQRJu {
+  color: var(--color-text-1);
+  padding: 0 10px;
+}
+
+.actionbutton_wrapper-RqUrTb.actionbutton_wrapper-RqUrTb .arco-btn-text-ojQRJu svg {
+  vertical-align: -3px;
+  fill: currentColor;
+  color: var(--color-text-1);
+}
+
+.actionbutton_wrapper-RqUrTb.actionbutton_wrapper-RqUrTb .arco-btn-text-ojQRJu > svg + span {
+  margin-left: 4px;
+}
+
+.actionbutton_wrapper-RqUrTb .disabled-op18gA, .actionbutton_wrapper-RqUrTb .disabled-op18gA svg {
+  color: #c9cdd4;
+}
+

package/dist/ActionButton/interface.d.ts

@@ -0,0 +1,12 @@
+import { ButtonProps } from "@arco-design/web-react";
+export declare enum ActionButtonType {
+    Export = "export",
+    Batchupload = "batchupload",
+    Add = "add",
+    SETTING = "setting",
+    Upload = "upload"
+}
+export declare type ActionButtonProps = {
+    action: ActionButtonType;
+    monitorId?: string;
+} & ButtonProps;

package/dist/ActionButton/interface.js

@@ -0,0 +1,9 @@
+var interface_ActionButtonType = /*#__PURE__*/ function(ActionButtonType) {
+    ActionButtonType["Export"] = "export";
+    ActionButtonType["Batchupload"] = "batchupload";
+    ActionButtonType["Add"] = "add";
+    ActionButtonType["SETTING"] = "setting";
+    ActionButtonType["Upload"] = "upload";
+    return ActionButtonType;
+}({});
+export { interface_ActionButtonType as ActionButtonType };

package/dist/CommonModal/config.d.ts

@@ -0,0 +1,8 @@
+export type ModalConfigType = {
+    prefixCls?: string;
+    simple?: boolean;
+    showIcon?: boolean;
+};
+export declare const setModalConfig: (config: ModalConfigType) => void;
+export declare const getModalConfig: () => ModalConfigType;
+export declare const destroyList: Array<() => void>;

package/dist/CommonModal/config.js

@@ -0,0 +1,13 @@
+let modalConfig = {
+    simple: true,
+    showIcon: false
+};
+const setModalConfig = (config)=>{
+    modalConfig = {
+        ...modalConfig,
+        ...config
+    };
+};
+const getModalConfig = ()=>modalConfig;
+const destroyList = [];
+export { destroyList, getModalConfig, setModalConfig };

package/dist/CommonModal/confirm.d.ts

@@ -0,0 +1,7 @@
+import { ConfirmProps } from './interface';
+export declare const normalizeConfig: (_config: ConfirmProps) => ConfirmProps;
+declare function confirm(config: ConfirmProps, renderFunc?: (props: ConfirmProps) => void): {
+    close: () => void;
+    update: (newConfig: ConfirmProps) => void;
+};
+export default confirm;

package/dist/CommonModal/confirm.js

@@ -0,0 +1,132 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { createRoot } from "react-dom/client";
+import { IconCheckCircleFill, IconCloseCircleFill, IconExclamationCircleFill, IconInfoCircleFill } from "@arco-design/web-react/icon";
+import IconClose from "../assets/icons/IconClose.js";
+import modal from "./modal.js";
+import { destroyList, getModalConfig } from "./config.js";
+function ConfirmModal(props) {
+    const { simple } = getModalConfig();
+    return /*#__PURE__*/ jsx(modal, {
+        simple: simple,
+        ...props,
+        children: props.content
+    });
+}
+const normalizeConfig = (_config)=>{
+    const showIcon = _config.showIcon || false;
+    if (_config.isNotice) {
+        let icon = _config.icon;
+        if (!icon && null !== icon) switch(_config.noticeType){
+            case 'info':
+                icon = /*#__PURE__*/ jsx(IconInfoCircleFill, {});
+                break;
+            case 'success':
+                icon = /*#__PURE__*/ jsx(IconCheckCircleFill, {});
+                break;
+            case 'warning':
+                icon = /*#__PURE__*/ jsx(IconExclamationCircleFill, {});
+                break;
+            case 'error':
+                icon = /*#__PURE__*/ jsx(IconCloseCircleFill, {});
+                break;
+            default:
+                break;
+        }
+        _config.title = /*#__PURE__*/ jsxs("span", {
+            children: [
+                showIcon && icon,
+                _config.title
+            ]
+        });
+        _config.hideCancel = true;
+    } else _config.title = /*#__PURE__*/ jsxs("span", {
+        children: [
+            showIcon && null !== _config.icon && (_config.icon || /*#__PURE__*/ jsx(IconExclamationCircleFill, {})),
+            _config.title
+        ]
+    });
+    return _config;
+};
+function confirm_confirm(config, renderFunc) {
+    const div = document.createElement('div');
+    document.body.appendChild(div);
+    const root = createRoot(div);
+    function render(props) {
+        root.render(/*#__PURE__*/ jsx(ConfirmModal, {
+            closeIcon: /*#__PURE__*/ jsx(IconClose, {}),
+            ...props,
+            onCancel: onCancel
+        }));
+    }
+    const renderFunction = renderFunc || render;
+    let modalConfig = {
+        ...config,
+        visible: false
+    };
+    const onOk = ()=>{
+        let ret;
+        const _onOk = config.onOk || config.onConfirm;
+        if (_onOk) ret = _onOk();
+        if (ret && ret.then) {
+            modalConfig.confirmLoading = true;
+            renderFunction(modalConfig);
+            ret.then(()=>{
+                onCancel(true);
+            }, (e)=>{
+                console.error(e);
+                modalConfig.confirmLoading = false;
+                renderFunction(modalConfig);
+            });
+        }
+        if (!ret) onCancel(true);
+    };
+    modalConfig.onOk = onOk;
+    modalConfig = normalizeConfig(modalConfig);
+    modalConfig.visible = true;
+    renderFunction(modalConfig);
+    function destroy() {
+        root.unmount();
+        if (div.parentNode) div.parentNode.removeChild(div);
+        for(let i = 0; i < destroyList.length; i++){
+            const fn = destroyList[i];
+            if (fn === close) {
+                destroyList.splice(i, 1);
+                break;
+            }
+        }
+    }
+    function onCancel(isOnOk) {
+        !isOnOk && config.onCancel && config.onCancel();
+        modalConfig.visible = false;
+        modalConfig.afterClose = ()=>{
+            config.afterClose && config.afterClose();
+            destroy();
+        };
+        renderFunction(modalConfig);
+    }
+    function update(newConfig) {
+        modalConfig = {
+            ...modalConfig,
+            title: config.title,
+            ...newConfig
+        };
+        modalConfig = normalizeConfig(modalConfig);
+        renderFunction(modalConfig);
+    }
+    function close() {
+        modalConfig.visible = false;
+        modalConfig.afterClose = ()=>{
+            config.afterClose && config.afterClose();
+            destroy();
+        };
+        renderFunction(modalConfig);
+    }
+    destroyList.push(close);
+    return {
+        close,
+        update
+    };
+}
+const CommonModal_confirm = confirm_confirm;
+export { CommonModal_confirm as default, normalizeConfig };

package/dist/CommonModal/index.d.ts

@@ -0,0 +1,2 @@
+import CommonModal from './modal';
+export default CommonModal;

package/dist/CommonModal/index.js

@@ -0,0 +1,3 @@
+import modal from "./modal.js";
+const CommonModal = modal;
+export { CommonModal as default };

package/dist/CommonModal/interface.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { ModalProps } from '@arco-design/web-react/es/Modal/interface';
+export interface CommonModalProps extends ModalProps {
+    footerLeft?: ReactNode;
+    customButtons?: ReactNode;
+    isFixHeight?: boolean;
+    isCancelShow?: boolean;
+}
+export interface ConfirmProps extends CommonModalProps {
+    content?: ReactNode;
+    showIcon?: boolean;
+    icon?: ReactNode | null;
+    isNotice?: boolean;
+    noticeType?: string;
+    isCustomNotice?: boolean;
+}
+export type { ModalReturnProps } from '@arco-design/web-react/es/Modal/interface';

package/dist/CommonModal/modal.d.ts

@@ -0,0 +1,11 @@
+import { ForwardRefExoticComponent, PropsWithChildren } from 'react';
+import { CommonModalProps, ConfirmProps, ModalReturnProps } from './interface';
+export interface ModalComponent extends ForwardRefExoticComponent<PropsWithChildren<CommonModalProps>> {
+    confirm: (props: ConfirmProps) => ModalReturnProps;
+    info: (props: ConfirmProps) => ModalReturnProps;
+    success: (props: ConfirmProps) => ModalReturnProps;
+    warning: (props: ConfirmProps) => ModalReturnProps;
+    error: (props: ConfirmProps) => ModalReturnProps;
+}
+declare const ExportedModalComponent: ModalComponent;
+export default ExportedModalComponent;

package/dist/CommonModal/modal.js

@@ -0,0 +1,161 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { Modal } from "@arco-design/web-react";
+import styled_components from "styled-components";
+import confirm_0 from "./confirm.js";
+const StyledModal = styled_components(Modal)`
+  &.arco-modal {
+    border-radius: 12px;
+
+    .arco-modal-close-icon {
+      font-size: 20px;
+      top: 32px;
+      right: 32px;
+    }
+
+    .arco-modal-header {
+      height: 79px;
+
+      .arco-modal-title {
+        text-align: left;
+        font-weight: 600;
+        font-size: 18px;
+        line-height: 26px;
+      }
+    }
+
+    .arco-modal-header,
+    .arco-modal-footer {
+      padding: 24px 32px;
+    }
+
+    .arco-modal-content {
+      padding: 16px 32px;
+      /* TODO: fix select dropdown style add max height */
+      /* 设置弹框整体最大高度为600px */
+      /* max-height: 408px;
+      overflow: auto; */
+      word-wrap: break-word;
+      word-break: break-all;
+    }
+
+    &.arco-fix-height-modal {
+      height: 600px;
+
+      .arco-modal-content {
+        height: 408px;
+      }
+    }
+  }
+
+  &.arco-modal-simple {
+    width: 500px;
+    padding: 0;
+
+    &.arco-notice-modal {
+      width: 420px;
+
+      .arco-modal-footer,
+      .arco-modal-content,
+      .arco-modal-header {
+        border: none;
+      }
+
+      .arco-modal-content {
+        padding: 0 32px;
+      }
+    }
+
+    .arco-modal-footer,
+    .arco-modal-content,
+    .arco-modal-header {
+      height: unset;
+      margin: 0;
+    }
+
+    .arco-modal-header {
+      border-bottom: 1px solid var(--color-neutral-3);
+    }
+
+    .arco-modal-footer {
+      border-top: 1px solid var(--color-neutral-3);
+    }
+
+    .arco-modal-close-icon {
+      top: 24px;
+    }
+  }
+`;
+const Footer = styled_components.div`
+  display: flex;
+  align-items: baseline;
+
+  .footer-left {
+    flex: 1;
+    text-align: left;
+  }
+
+  .button-groups > .arco-btn {
+    margin-left: 16px;
+  }
+`;
+const CommonModal = ({ footerLeft, customButtons, className, isFixHeight = false, isCancelShow = true, ...props })=>{
+    let clazzName = [];
+    if (className) clazzName = 'string' == typeof className ? [
+        className
+    ] : className;
+    if (isFixHeight) clazzName.push('arco-fix-height-modal');
+    return /*#__PURE__*/ jsx(StyledModal, {
+        autoFocus: false,
+        maskClosable: false,
+        className: clazzName,
+        footer: (cancelButtonNode, okButtonNode)=>/*#__PURE__*/ jsxs(Footer, {
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        className: "footer-left",
+                        children: footerLeft
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: "button-groups",
+                        children: customButtons ? customButtons : /*#__PURE__*/ jsxs(Fragment, {
+                            children: [
+                                isCancelShow && cancelButtonNode,
+                                okButtonNode
+                            ]
+                        })
+                    })
+                ]
+            }),
+        ...props
+    });
+};
+function wrappedConfirm({ className, noticeType, isCustomNotice = true, ...rest }) {
+    let clazzName = [];
+    if (className) clazzName = 'string' == typeof className ? [
+        className
+    ] : className;
+    if (isCustomNotice || confirmMethods.includes(noticeType)) clazzName.push('arco-notice-modal');
+    return confirm_0({
+        className: clazzName,
+        noticeType,
+        ...rest
+    });
+}
+const ExportedModalComponent = CommonModal;
+ExportedModalComponent.displayName = 'Modal';
+ExportedModalComponent.confirm = (props)=>wrappedConfirm(props);
+const confirmMethods = [
+    'info',
+    'success',
+    'warning',
+    'error'
+];
+confirmMethods.forEach((type)=>{
+    ExportedModalComponent[type] = (props)=>wrappedConfirm({
+            ...props,
+            isNotice: true,
+            noticeType: type
+        });
+});
+const modal = ExportedModalComponent;
+export { modal as default };

package/dist/CompareChange/index.d.ts

@@ -0,0 +1,20 @@
+import { FunctionComponent } from 'react';
+export declare const formatPercentage: (value?: number | string, decimalPlaces?: number) => string;
+export interface ChangeRateProps {
+    /** 数值，可以是数字或字符串 */
+    value: string | number;
+    fontSize?: number;
+    fontWeight?: number;
+}
+/**
+ * 通用涨跌幅组件
+ * @param value - 数值（可为空）
+ * @returns JSX.Element
+ *
+ * 示例：
+ * - 正值：绿色向上箭头 + 绿色数值
+ * - 负值：红色向下箭头 + 红色数值
+ * - 零值/空值：灰色无变化图标 + 灰色数值或 '-'
+ */
+declare const CompareChange: FunctionComponent<ChangeRateProps>;
+export default CompareChange;