@moonton/publish-components

A React UI component library for the Publish platform, built with React, TypeScript, and styled-components.

Installation

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:

pnpm add react react-dom

Components

ActionButton

A customizable button component with predefined action types and icons.

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.

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.

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.

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

pnpm build

Development Mode (Watch)

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