@moontra/moonui-pro/README.md

Premium React components for MoonUI - Advanced UI library with 50+ pro components including performance, interactive, and gesture components

# MoonUI Pro - Premium React Components

[![npm version](https://img.shields.io/npm/v/@moontra/moonui-pro.svg)](https://www.npmjs.com/package/@moontra/moonui-pro)
[![License: Commercial](https://img.shields.io/badge/License-Commercial-red.svg)](https://moonui.dev/license)
[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)

Premium React components for MoonUI. Advanced UI components with pro features for building sophisticated web applications.

## 🚀 Pro Components (Latest v2.0.0)

### Core Enterprise Components
- **📊 Advanced Data Table** - Enterprise-grade data grid with sorting, filtering, pagination, export, and virtual scrolling
- **📈 Advanced Charts** - Interactive charts with animations, real-time updates, and multiple chart types
- **📅 Calendar Pro** - Full-featured calendar with events, recurring dates, time zones, and event dialog management
- **📝 Rich Text Editor Pro** - Advanced WYSIWYG editor with slash commands, AI assistance, and collaboration features
- **📤 File Upload Pro** - Drag & drop with progress tracking, image editing, and cloud storage integration
- **🗂️ Kanban Board** - Drag & drop project management with swimlanes, custom fields, and team collaboration
- **📍 Timeline** - Interactive project timeline with milestones, dependencies, and custom content

### Performance & Data Components
- **🚀 Memory Efficient Data** - Optimized data handling for large datasets with lazy loading and pagination
- **📊 Virtual List Pro** - High-performance virtualization for millions of items with smooth scrolling
- **📋 Dashboard Components** - Pre-built dashboard widgets and layouts for analytics

### New in v2.0.0
- **Event Dialog System** - Advanced event management for Calendar Pro
- **Slash Commands** - Rich text editor with AI-powered command palette
- **Table Styling** - Enhanced table components with advanced styling options
- **Advanced Chart Types** - New chart variants including heatmaps, treemaps, and custom visualizations

## Installation

```bash
npm install @moontra/moonui-pro
```

**Note**: This package requires an active MoonUI Pro license. Visit [moonui.dev/pro](https://moonui.dev/pro) to get your license.

## Usage

### 1. Import Components

```tsx
import { 
  DataTableCore, 
  CalendarCore, 
  KanbanCore,
  RichTextEditorCore,
  AdvancedChartCore 
} from '@moontra/moonui-pro'
```

### 2. Create Wrapper Components (Recommended)

For maximum customization, we recommend creating wrapper components:

```tsx
// components/pro/data-table.tsx
import { DataTableCore } from '@moontra/moonui-pro'
import type { DataTableProps } from '@moontra/moonui-pro'

export function DataTable<TData, TValue = unknown>(
  props: DataTableProps<TData, TValue>
) {
  return (
    <DataTableCore
      {...props}
      theme={{
        headerBg: '#custom-color',
        ...props.theme
      }}
      features={{
        virtualScrolling: true,
        export: ['csv', 'excel'],
        ...props.features
      }}
    />
  )
}
```

### 3. Advanced Usage Examples

#### Calendar with Event Management
```tsx
import { CalendarCore, EventDialog } from '@moontra/moonui-pro'

function EventCalendar() {
  const [events, setEvents] = useState([])
  const [selectedEvent, setSelectedEvent] = useState(null)

  return (
    <>
      <CalendarCore
        events={events}
        onEventClick={setSelectedEvent}
        onDateSelect={(date) => {
          // Create new event
        }}
        features={{
          recurringEvents: true,
          timeZones: true,
          dragDrop: true
        }}
      />
      
      <EventDialog
        event={selectedEvent}
        open={!!selectedEvent}
        onClose={() => setSelectedEvent(null)}
        onSave={(updatedEvent) => {
          // Update event
        }}
      />
    </>
  )
}
```

#### Rich Text Editor with Slash Commands
```tsx
import { RichTextEditorCore } from '@moontra/moonui-pro'

function DocumentEditor() {
  return (
    <RichTextEditorCore
      features={{
        slashCommands: true,
        aiAssistance: true,
        collaboration: true,
        tables: true
      }}
      slashCommands={[
        { trigger: '/table', action: 'insertTable' },
        { trigger: '/ai', action: 'openAiAssistant' },
        { trigger: '/image', action: 'insertImage' }
      ]}
      onSlashCommand={(command) => {
        // Handle slash command
      }}
    />
  )
}
```

#### Virtual List for Large Datasets
```tsx
import { VirtualListCore, MemoryEfficientData } from '@moontra/moonui-pro'

function LargeDatasetView() {
  const largeDataset = Array.from({ length: 1000000 }, (_, i) => ({ 
    id: i, 
    name: `Item ${i}`,
    value: Math.random() * 100
  }))

  return (
    <MemoryEfficientData
      data={largeDataset}
      chunkSize={1000}
      renderChunk={(chunk) => (
        <VirtualListCore
          items={chunk}
          itemHeight={50}
          height={600}
          renderItem={({ item, index }) => (
            <div key={item.id} className="p-2 border-b">
              <span className="font-medium">{item.name}</span>
              <span className="ml-2 text-gray-500">{item.value.toFixed(2)}</span>
            </div>
          )}
        />
      )}
    />
  )
}
```

## Customization

All Pro components support extensive customization:

### Theme Customization
```tsx
<DataTableCore
  theme={{
    headerBg: '#f9fafb',
    borderColor: '#e5e7eb',
    rowHoverBg: '#f3f4f6',
    // ... more theme options
  }}
/>
```

### Feature Toggles
```tsx
<DataTableCore
  features={{
    sorting: true,
    filtering: true,
    columnResize: true,
    export: ['csv', 'excel', 'pdf'],
    // ... more features
  }}
/>
```

### Custom Rendering
```tsx
<DataTableCore
  customRender={{
    cell: (value, row) => <CustomCell value={value} />,
    header: (column) => <CustomHeader column={column} />,
    // ... more custom renders
  }}
/>
```

## TypeScript Support

All components are written in TypeScript with complete type definitions:

```tsx
import type { 
  DataTableProps, 
  CalendarEvent,
  KanbanCard,
  FileUploadFile
} from '@moontra/moonui-pro'
```

## License Validation

Pro components require a valid license. The package validates your license at build time:

1. **Environment Variable**: Set `MOONUI_LICENSE_KEY` in your environment
2. **Build-time Validation**: License is checked during build, not runtime
3. **No Runtime Checks**: Components work without internet after build

## Requirements

- React 18.0.0 or higher
- @moontra/moonui 1.0.0 or higher
- Valid MoonUI Pro license

## Support

- Documentation: [moonui.dev/docs/pro](https://moonui.dev/docs/pro)
- Priority Support: [support@moonui.dev](mailto:support@moonui.dev)
- Discord: Pro channel access with license

## License

Commercial License - see [moonui.dev/license](https://moonui.dev/license) for details.

© 2024 MoonUI. All rights reserved.