@moontra/moonui-pro 2.24.2 → 2.24.4

package/README.md

@@ -1,256 +1,530 @@
-# MoonUI Pro - Premium React Components
+# MoonUI Pro 🌙✨
 
-[![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
+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.
 
-## Installation
+[![npm version](https://badge.fury.io/js/%40moontra%2Fmoonui-pro.svg)](https://badge.fury.io/js/%40moontra%2Fmoonui-pro)
+[![License: Commercial](https://img.shields.io/badge/License-Commercial-red.svg)](https://moonui.dev/license)
+[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
+
+## ✨ What's Included
+
+### 📊 **Data & Analytics**
+- **Advanced DataTable** - Virtualized tables with sorting, filtering, pagination, row selection
+- **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
 
 ```bash
+# Install MoonUI Pro
 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
+# Ensure base MoonUI is installed
+npm install @moontra/moonui
+```
 
-```tsx
-import { 
-  DataTableCore, 
-  CalendarCore, 
-  KanbanCore,
-  RichTextEditorCore,
-  AdvancedChartCore 
-} from '@moontra/moonui-pro'
+### CDN Usage (Browser/Artifacts)
+
+For quick prototyping or artifact environments:
+
+```html
+<!-- 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/moonui@2.3.2/dist/index.global.js"></script>
+
+<!-- MoonUI Pro -->
+<script src="https://cdn.jsdelivr.net/npm/@moontra/moonui-pro@2.24.3/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>
 ```
 
-### 2. Create Wrapper Components (Recommended)
+### Setup
 
-For maximum customization, we recommend creating wrapper components:
+1. **Configure your license** (required for production)
 
-```tsx
-// components/pro/data-table.tsx
-import { DataTableCore } from '@moontra/moonui-pro'
-import type { DataTableProps } from '@moontra/moonui-pro'
+```bash
+# Set your license key
+export MOONUI_PRO_LICENSE="your-license-key"
 
-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
-      }}
-    />
-  )
-}
+# Or in your .env file
+MOONUI_PRO_LICENSE=your-license-key
 ```
 
-### 3. Advanced Usage Examples
+2. **Import and use components**
+
+```jsx
+import { Button, Card } from '@moontra/moonui';
+import { DataTable, Charts, RichTextEditor } from '@moontra/moonui-pro';
 
-#### Calendar with Event Management
-```tsx
-import { CalendarCore, EventDialog } from '@moontra/moonui-pro'
+function App() {
+  const data = [
+    { id: 1, name: 'John', email: 'john@example.com' },
+    { id: 2, name: 'Jane', email: 'jane@example.com' },
+  ];
 
-function EventCalendar() {
-  const [events, setEvents] = useState([])
-  const [selectedEvent, setSelectedEvent] = useState(null)
+  const columns = [
+    { accessorKey: 'name', header: 'Name' },
+    { accessorKey: 'email', header: 'Email' },
+  ];
 
   return (
-    <>
-      <CalendarCore
-        events={events}
-        onEventClick={setSelectedEvent}
-        onDateSelect={(date) => {
-          // Create new event
-        }}
+    <Card className="p-6">
+      <h1 className="text-2xl font-bold mb-4">MoonUI Pro Demo</h1>
+      
+      {/* Pro DataTable */}
+      <DataTable 
+        data={data} 
+        columns={columns}
         features={{
-          recurringEvents: true,
-          timeZones: true,
-          dragDrop: true
+          sorting: true,
+          filtering: true,
+          pagination: true
         }}
       />
       
-      <EventDialog
-        event={selectedEvent}
-        open={!!selectedEvent}
-        onClose={() => setSelectedEvent(null)}
-        onSave={(updatedEvent) => {
-          // Update event
-        }}
+      {/* Pro Rich Text Editor */}
+      <RichTextEditor
+        placeholder="Start writing..."
+        className="mt-4"
       />
-    </>
-  )
+    </Card>
+  );
 }
 ```
 
-#### Rich Text Editor with Slash Commands
-```tsx
-import { RichTextEditorCore } from '@moontra/moonui-pro'
+## 📊 Component Categories
 
-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
-      }}
-    />
-  )
-}
+### Data Tables & Grids
+```jsx
+import { DataTable, VirtualTable, TreeTable } from '@moontra/moonui-pro';
+
+// Advanced data table with all features
+<DataTable
+  data={data}
+  columns={columns}
+  features={{
+    sorting: true,
+    filtering: true,
+    pagination: true,
+    rowSelection: true,
+    columnResizing: true,
+    virtualScrolling: true
+  }}
+  onRowClick={handleRowClick}
+  onSelectionChange={handleSelection}
+/>
 ```
 
-#### Virtual List for Large Datasets
-```tsx
-import { VirtualListCore, MemoryEfficientData } from '@moontra/moonui-pro'
+### Charts & Visualizations
+```jsx
+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'
+  }}
+/>
+```
 
-function LargeDatasetView() {
-  const largeDataset = Array.from({ length: 1000000 }, (_, i) => ({ 
-    id: i, 
-    name: `Item ${i}`,
-    value: Math.random() * 100
-  }))
+### Rich Content Editors
+```jsx
+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..."
+/>
+```
 
-  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>
-          )}
-        />
-      )}
-    />
-  )
+### Form Components
+```jsx
+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
+```jsx
+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:
+
+```css
+: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;
 }
 ```
 
-## Customization
+### Custom Chart Themes
+```jsx
+import { ChartThemeProvider } from '@moontra/moonui-pro';
 
-All Pro components support extensive customization:
+const customChartTheme = {
+  colors: ['#8884d8', '#82ca9d', '#ffc658', '#ff7300'],
+  fontSize: 12,
+  fontFamily: 'Inter, sans-serif'
+};
 
-### Theme Customization
-```tsx
-<DataTableCore
-  theme={{
-    headerBg: '#f9fafb',
-    borderColor: '#e5e7eb',
-    rowHoverBg: '#f3f4f6',
-    // ... more theme options
-  }}
+<ChartThemeProvider theme={customChartTheme}>
+  <YourChartsHere />
+</ChartThemeProvider>
+```
+
+## 🔧 Performance Features
+
+### Virtualization
+```jsx
+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>
+  )}
 />
 ```
 
-### Feature Toggles
-```tsx
-<DataTableCore
-  features={{
-    sorting: true,
-    filtering: true,
-    columnResize: true,
-    export: ['csv', 'excel', 'pdf'],
-    // ... more features
-  }}
+### Lazy Loading
+```jsx
+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
+```jsx
+import { MemoryOptimizedTable } from '@moontra/moonui-pro';
+
+// Automatically manages memory for large datasets
+<MemoryOptimizedTable
+  data={massiveDataset}
+  columns={columns}
+  maxMemoryItems={1000}
+  recycleNodes={true}
 />
 ```
 
-### Custom Rendering
-```tsx
-<DataTableCore
-  customRender={{
-    cell: (value, row) => <CustomCell value={value} />,
-    header: (column) => <CustomHeader column={column} />,
-    // ... more custom renders
-  }}
+## 📱 Mobile & Touch Support
+
+### Gesture Components
+```jsx
+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
+```jsx
+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']}
 />
 ```
 
-## TypeScript Support
+## 🔐 License & Security
 
-All components are written in TypeScript with complete type definitions:
+### License Validation
+```jsx
+import { LicenseProvider } from '@moontra/moonui-pro';
 
-```tsx
-import type { 
-  DataTableProps, 
-  CalendarEvent,
-  KanbanCard,
-  FileUploadFile
-} from '@moontra/moonui-pro'
+// Wrap your app with license provider
+<LicenseProvider licenseKey={process.env.MOONUI_PRO_LICENSE}>
+  <App />
+</LicenseProvider>
 ```
 
-## License Validation
+### Security Features
+- **License verification** - Validates license keys
+- **Component obfuscation** - Protects source code
+- **Usage analytics** - Optional usage tracking
+- **Domain restrictions** - License key domain binding
 
-Pro components require a valid license. The package validates your license at build time:
+## 📦 Package Details
 
-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
+- **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
 
-## Requirements
+## 🛠️ Development
 
-- React 18.0.0 or higher
-- @moontra/moonui 1.0.0 or higher
+### Requirements
+- Node.js 18+
+- React 18+
+- TypeScript 5+
 - Valid MoonUI Pro license
 
-## Support
+### Local Development
+```bash
+git clone https://github.com/moontra/moonui-pro
+cd moonui-pro/packages/moonui-pro
+npm install
+npm run dev
+```
+
+### Building
+```bash
+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](https://moonui.dev)
+- **📖 Pro Docs**: [moonui.dev/docs/pro](https://moonui.dev/docs/pro)
+- **🎯 Examples**: [moonui.dev/examples](https://moonui.dev/examples)
+- **🔑 Licensing**: [moonui.dev/pricing](https://moonui.dev/pricing)
+
+## 🤖 AI Integration
+
+MoonUI Pro is fully integrated with our MCP Server:
+
+```bash
+# 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
+```jsx
+// 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 →](https://moonui.dev/pricing)
+
+## 🔗 Ecosystem
+
+- **[@moontra/moonui](https://npmjs.com/package/@moontra/moonui)** - Base component library
+- **[@moontra/moonui-cli](https://npmjs.com/package/@moontra/moonui-cli)** - Command line tools
+- **[@moontra/moonui-mcp-server](https://npmjs.com/package/@moontra/moonui-mcp-server)** - AI integration
+- **[moonui-themes](https://github.com/moontra/moonui-themes)** - Community themes
+
+## 📄 License
+
+Licensed under a **Commercial License**. See [LICENSE](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](https://reactjs.org/) - UI framework
+- [TanStack Table](https://tanstack.com/table) - Powerful tables
+- [Recharts](https://recharts.org/) - Chart library
+- [Framer Motion](https://framer.com/motion/) - Animations
+- [React DnD](https://react-dnd.github.io/react-dnd/) - Drag and drop
+
+## 📞 Support
+
+- **💬 Discord**: [Join our community](https://discord.gg/moonui)
+- **📧 Email**: [support@moonui.dev](mailto:support@moonui.dev)
+- **🐛 Issues**: [GitHub Issues](https://github.com/moontra/moonui-pro/issues)
+- **📖 Documentation**: [moonui.dev/docs](https://moonui.dev/docs)
+
+---
 
-- 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
+<div align="center">
 
-## License
+**[Website](https://moonui.dev) • [Pro Documentation](https://moonui.dev/docs/pro) • [Pricing](https://moonui.dev/pricing) • [Examples](https://moonui.dev/examples)**
 
-Commercial License - see [moonui.dev/license](https://moonui.dev/license) for details.
+Built with ❤️ for developers who demand excellence
 
-© 2024 MoonUI. All rights reserved.
+</div>