MoonUI Pro - Premium React Components

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

npm install @moontra/moonui-pro

Note: This package requires an active MoonUI Pro license. Visit moonui.dev/pro to get your license.

Usage

1. Import Components

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

2. Create Wrapper Components (Recommended)

For maximum customization, we recommend creating wrapper components:

// 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

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

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

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

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

Feature Toggles

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

Custom Rendering

<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:

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:

Environment Variable: Set MOONUI_LICENSE_KEY in your environment
Build-time Validation: License is checked during build, not runtime
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
Priority Support: support@moonui.dev
Discord: Pro channel access with license

License

Commercial License - see moonui.dev/license for details.