npm package: @publishfx/publish-components
Description: A React UI component library for the Publish platform, including ActionButton component
Author: PublishFX
Latest version: 2.1.8

# @publishfx/publish-components

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

## Installation

```bash
pnpm add @publishfx/publish-components
# or
npm install @publishfx/publish-components
# or
yarn add @publishfx/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 '@publishfx/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 '@publishfx/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 '@publishfx/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 '@publishfx/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