@moontra/moonui-pro

v3.4.41

Published

4 months ago

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

Downloads

729

MoonUI Pro 🌙✨

Premium React components for advanced web applications. MoonUI Pro extends the base MoonUI library with sophisticated, enterprise-grade components designed for complex use cases and professional applications.

✨ What's Included

📊 Data & Analytics

Advanced DataTable - Enterprise-grade tables with quick filters, faceted filters, enum auto-detection, custom filter accessors, virtualization, sorting, pagination, row selection, and export functionality
Charts Library - Beautiful data visualizations with Recharts integration
Dashboard Widgets - KPI cards, metrics displays, and analytics components
TreeView - Hierarchical data display with drag & drop
Timeline - Event timelines with rich content support

✏️ Rich Content & Editors

RichTextEditor - WYSIWYG editor with markdown support
CodeEditor - Syntax-highlighted code input with multiple languages
FormWizard - Multi-step forms with validation and progress tracking
JSONEditor - Visual JSON editing with validation
MarkdownEditor - Live markdown editor with preview

🎮 Interactive & Gesture

DragDropList - Sortable lists with smooth animations
SwipeableCard - Touch-friendly card components
GestureDrawer - Mobile-optimized drawer with gestures
VirtualList - High-performance virtualized lists
InfiniteScroll - Lazy loading with infinite scrolling

📅 Advanced Date & Time

DateRangePicker - Powerful date range selection
TimezonePicker - Timezone selection with search
RecurrencePicker - Recurring event configuration
EventCalendar - Full-featured calendar with event management
WeekView - Week-based calendar layout

🎨 Media & Visualization

VideoPlayer - Custom video player with controls
ImageCropper - Image cropping with aspect ratio controls
ColorPalette - Advanced color selection tools
IconLibrary - Comprehensive icon browser and picker
ChartBuilder - Interactive chart creation tool

🔧 Advanced UI Patterns

CommandPalette - Keyboard-driven command interface
Spotlight - macOS-style search and command launcher
SplitPane - Resizable panel layouts
Kanban - Drag-and-drop board layouts
NotificationCenter - Advanced notification management

🚀 Quick Start

Installation

# Install MoonUI Pro
npm install @moontra/moonui-pro

# Ensure base MoonUI is installed
npm install @moontra/moonui

CDN Usage (Browser/Artifacts)

For quick prototyping or artifact environments:

<!-- Dependencies -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

<!-- Base MoonUI -->
<script src="https://cdn.jsdelivr.net/npm/@moontra/[email protected]/dist/index.global.js"></script>

<!-- MoonUI Pro -->
<script src="https://cdn.jsdelivr.net/npm/@moontra/[email protected]/dist/index.global.js"></script>

<script>
  const { Button } = window.MoonUI;
  const { DataTable, Charts } = window.MoonUIPro;
  
  function App() {
    return React.createElement('div', null,
      React.createElement(Button, null, 'Base Component'),
      React.createElement(DataTable, { 
        data: [], 
        columns: [] 
      }, 'Pro Component')
    );
  }
  
  ReactDOM.render(React.createElement(App), document.getElementById('root'));
</script>

Setup

Configure your license (required for production)

# Set your license key
export MOONUI_PRO_LICENSE="your-license-key"

# Or in your .env file
MOONUI_PRO_LICENSE=your-license-key

Import and use components

import { Button, Card } from '@moontra/moonui';
import { DataTable, Charts, RichTextEditor } from '@moontra/moonui-pro';

function App() {
  const data = [
    { id: 1, name: 'John', email: '[email protected]' },
    { id: 2, name: 'Jane', email: '[email protected]' },
  ];

  const columns = [
    { accessorKey: 'name', header: 'Name' },
    { accessorKey: 'email', header: 'Email' },
  ];

  return (
    <Card className="p-6">
      <h1 className="text-2xl font-bold mb-4">MoonUI Pro Demo</h1>
      
      {/* Pro DataTable */}
      <DataTable 
        data={data} 
        columns={columns}
        features={{
          sorting: true,
          filtering: true,
          pagination: true
        }}
      />
      
      {/* Pro Rich Text Editor */}
      <RichTextEditor
        placeholder="Start writing..."
        className="mt-4"
      />
    </Card>
  );
}

📊 Component Categories

Data Tables & Grids

import { DataTable, VirtualTable, TreeTable } from '@moontra/moonui-pro';

// Advanced data table with all features
<DataTable
  data={data}
  columns={[
    {
      accessorKey: 'status',
      header: 'Status',
      cell: ({ row }) => <Badge>{row.getValue('status')}</Badge>,
      meta: {
        filterType: 'select',
        filterOptions: ['Active', 'Pending', 'Completed'],
        filterValueAccessor: (row) => row.status // Access raw data, not rendered Badge
      }
    },
    {
      accessorKey: 'name',
      header: 'Name'
    }
  ]}
  quickFilters={[
    {
      column: 'status',
      label: 'Status',
      options: 'auto', // Auto-detect from data
      showCounts: true // Show count for each option
    },
    {
      column: 'department',
      label: 'Department',
      multi: true // Multi-select
    }
  ]}
  facetedFilters={['category', 'tags']} // Checkbox filters with counts
  features={{
    sorting: true,
    filtering: true,
    pagination: true,
    rowSelection: true,
    columnResizing: true,
    virtualScrolling: true,
    export: ['csv', 'excel', 'json']
  }}
  onRowClick={handleRowClick}
  onSelectionChange={handleSelection}
/>

New Filter Features (v2.25.8+)

Quick Filters - Dropdown filters for common filter scenarios:

// Quick filter with auto-detection
<DataTable
  quickFilters={[
    {
      column: 'status',
      options: 'auto', // Automatically detects unique values from data
      showCounts: true  // Shows count next to each option
    }
  ]}
/>

Faceted Filters - Advanced checkbox filters with search:

// Faceted filters for categories
<DataTable
  facetedFilters={['category', 'brand', 'tags']}
  columns={[
    {
      accessorKey: 'category',
      meta: {
        filterType: 'select',
        filterOptions: ['Electronics', 'Clothing', 'Books'] // Predefined options
      }
    }
  ]}
/>

Filter Value Accessor - Handle custom rendered cells:

// Filter by raw data instead of rendered content
columns={[
  {
    accessorKey: 'status',
    cell: ({ row }) => (
      <Badge variant={getVariant(row.original.status)}>
        {formatStatus(row.original.status)}
      </Badge>
    ),
    meta: {
      filterValueAccessor: (row) => row.status // Access raw status value
    }
  }
]}

Charts & Visualizations

import { LineChart, BarChart, PieChart, ScatterChart } from '@moontra/moonui-pro';

// Beautiful charts with animations
<LineChart
  data={chartData}
  xAxis={{ dataKey: 'month' }}
  yAxis={{ domain: [0, 100] }}
  animations={{
    duration: 800,
    easing: 'easeInOut'
  }}
/>

Rich Content Editors

import { RichTextEditor, CodeEditor, MarkdownEditor } from '@moontra/moonui-pro';

// WYSIWYG editor with toolbar
<RichTextEditor
  value={content}
  onChange={setContent}
  toolbar={{
    bold: true,
    italic: true,
    link: true,
    image: true,
    codeBlock: true
  }}
  placeholder="Start writing..."
/>

Form Components

import { FormWizard, DateRangePicker, ColorPalette } from '@moontra/moonui-pro';

// Multi-step form wizard
<FormWizard
  steps={[
    { title: 'Personal Info', component: PersonalInfoStep },
    { title: 'Preferences', component: PreferencesStep },
    { title: 'Review', component: ReviewStep }
  ]}
  onComplete={handleFormComplete}
  validation={formValidation}
/>

Interactive Components

import { DragDropList, SwipeableCard, VirtualList } from '@moontra/moonui-pro';

// Sortable list with drag & drop
<DragDropList
  items={listItems}
  onReorder={handleReorder}
  renderItem={({ item, dragHandleProps }) => (
    <div {...dragHandleProps}>
      {item.name}
    </div>
  )}
/>

🎨 Advanced Theming

MoonUI Pro extends the base theming system:

:root {
  /* Pro-specific color variables */
  --chart-primary: 217 91% 60%;
  --chart-secondary: 174 100% 29%;
  --editor-background: 0 0% 98%;
  --data-grid-header: 210 20% 98%;
  
  /* Animation variables */
  --animation-duration-fast: 150ms;
  --animation-duration-normal: 300ms;
  --animation-duration-slow: 500ms;
}

Custom Chart Themes

import { ChartThemeProvider } from '@moontra/moonui-pro';

const customChartTheme = {
  colors: ['#8884d8', '#82ca9d', '#ffc658', '#ff7300'],
  fontSize: 12,
  fontFamily: 'Inter, sans-serif'
};

<ChartThemeProvider theme={customChartTheme}>
  <YourChartsHere />
</ChartThemeProvider>

🔧 Performance Features

Virtualization

import { VirtualList, VirtualTable } from '@moontra/moonui-pro';

// Handle thousands of items efficiently
<VirtualList
  items={thousandsOfItems}
  itemHeight={50}
  overscan={5}
  renderItem={({ item, index }) => (
    <div key={item.id}>Row {index}: {item.name}</div>
  )}
/>

Lazy Loading

import { InfiniteScroll } from '@moontra/moonui-pro';

// Infinite scrolling with lazy loading
<InfiniteScroll
  loadMore={loadMoreData}
  hasMore={hasMoreData}
  threshold={100}
  loader={<div>Loading...</div>}
>
  {items.map(item => <ItemComponent key={item.id} item={item} />)}
</InfiniteScroll>

Memory Optimization

import { MemoryOptimizedTable } from '@moontra/moonui-pro';

// Automatically manages memory for large datasets
<MemoryOptimizedTable
  data={massiveDataset}
  columns={columns}
  maxMemoryItems={1000}
  recycleNodes={true}
/>

📱 Mobile & Touch Support

Gesture Components

import { SwipeableCard, GestureDrawer, TouchableArea } from '@moontra/moonui-pro';

// Swipeable cards with gesture support
<SwipeableCard
  onSwipeLeft={handleSwipeLeft}
  onSwipeRight={handleSwipeRight}
  threshold={50}
  velocityThreshold={0.3}
>
  <CardContent />
</SwipeableCard>

Responsive Data Tables

import { ResponsiveDataTable } from '@moontra/moonui-pro';

// Automatically adapts to mobile
<ResponsiveDataTable
  data={data}
  columns={columns}
  mobileBreakpoint={768}
  mobileLayout="cards" // or "stack"
  hideColumnsOnMobile={['id', 'created_at']}
/>

📦 Version History

v2.25.8 (Latest)

✨ New: Quick Filters - Dropdown filters with auto-detection and counts
✨ New: Faceted Filters - Advanced checkbox filters with search
✨ New: Filter Value Accessor - Custom accessors for filtered data
✨ New: Enum/Select filter support in filter drawer
🐛 Fixed: Filter drawer z-index and stacking issues
🐛 Fixed: Sorting behavior (single-column, three-state)

v2.25.0

🚀 DataTable performance improvements
✨ Export functionality (CSV, Excel, JSON)
✨ Bulk actions support
🎨 Improved dark mode styling

🔐 License & Security

License Validation

import { LicenseProvider } from '@moontra/moonui-pro';

// Wrap your app with license provider
<LicenseProvider licenseKey={process.env.MOONUI_PRO_LICENSE}>
  <App />
</LicenseProvider>

Security Features

License verification - Validates license keys
Component obfuscation - Protects source code
Usage analytics - Optional usage tracking
Domain restrictions - License key domain binding

📦 Package Details

Bundle Size: ~2.86MB (IIFE), ~2.96MB (ESM)
CDN Bundle: Available on JSDelivr and unpkg
Dependencies: React 18+, Framer Motion, TanStack Table
TypeScript: Full type definitions included
Tree Shaking: Import individual components

🛠️ Development

Requirements

Node.js 18+
React 18+
TypeScript 5+
Valid MoonUI Pro license

Local Development

git clone https://github.com/moontra/moonui-pro
cd moonui-pro/packages/moonui-pro
npm install
npm run dev

Building

npm run build      # Build for production
npm run build:dts  # Generate type definitions
npm run test       # Run tests
npm run lint       # Lint code

🎯 Use Cases

Dashboard Applications

Analytics dashboards with interactive charts
Admin panels with data tables and forms
KPI monitoring with real-time updates
Report builders with drag-and-drop interfaces

Content Management

Blog editors with rich text formatting
Documentation sites with markdown support
Media libraries with advanced file management
Publishing platforms with workflow management

E-commerce & Business

Product catalogs with advanced filtering
Order management with status tracking
Customer portals with account management
Inventory systems with bulk operations

Developer Tools

Code editors with syntax highlighting
API explorers with interactive testing
Configuration UIs with form wizards
Monitoring dashboards with real-time metrics

📚 Documentation

🌐 Website: moonui.dev
📖 Pro Docs: moonui.dev/docs/pro
🎯 Examples: moonui.dev/examples
🔑 Licensing: moonui.dev/pricing

🤖 AI Integration

MoonUI Pro is fully integrated with our MCP Server:

# The MCP Server automatically detects Pro components
npm install -g @moontra/moonui-mcp-server

# AI assistants can help with:
# - Pro component recommendations
# - Advanced usage patterns
# - Performance optimization
# - Complex integrations

🚀 Migration from v1.x

Breaking Changes in v2.24.x

DataTable: New API with TanStack Table v8
Charts: Updated to Recharts v2.12
Forms: Enhanced validation with better TypeScript support
Theming: New CSS variable system

Migration Guide

// v1.x (old)
<DataTable 
  data={data}
  sorting={true}
  filtering={true}
/>

// v2.x (new)
<DataTable
  data={data}
  columns={columns}
  features={{
    sorting: true,
    filtering: true
  }}
/>

💳 Pricing & Licensing

| Plan | Price | Features | |------|--------|----------| | Pro Monthly | $19/month | All Pro components, Updates, Support | | Pro Annual | $190/year | Save $38, All Pro features | | Pro Lifetime | $599 | One-time payment, Lifetime updates | | Enterprise | Custom | Custom components, Priority support |

View all pricing options →

🔗 Ecosystem

@moontra/moonui - Base component library
@moontra/moonui-cli - Command line tools
@moontra/moonui-mcp-server - AI integration
moonui-themes - Community themes

📄 License

Licensed under a Commercial License. See LICENSE for details.

License Requirements

Valid license key required for production use
Development usage allowed without license
License includes updates and support
Single license per domain/application

🙏 Acknowledgments

Built with:

React - UI framework
TanStack Table - Powerful tables
Recharts - Chart library
Framer Motion - Animations
React DnD - Drag and drop

📞 Support

💬 Discord: Join our community
📧 Email: [email protected]
🐛 Issues: GitHub Issues
📖 Documentation: moonui.dev/docs

Website • Pro Documentation • Pricing • Examples

Built with ❤️ for developers who demand excellence