@moontra/moonui-pro 2.3.7 → 2.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui-pro",
-  "version": "2.3.7",
+  "version": "2.4.0",
   "description": "Premium React components for MoonUI - Advanced UI library with 50+ pro components including performance, interactive, and gesture components",
   "type": "module",
   "main": "dist/index.mjs",
@@ -32,7 +32,7 @@
     "postinstall": "node scripts/postinstall.js",
     "build": "tsup",
     "build:dts": "tsup --dts",
-    "dev": "tsup --watch",
+    "dev": "tsup --watch --sourcemap",
     "clean": "rm -rf dist",
     "lint": "eslint \"src/**/*.{ts,tsx}\"",
     "test": "jest",
@@ -75,7 +75,8 @@
     "react-dom": ">=18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@moontra/moonui-pro": "^2.3.4",
+    "@moontra/moonui": "^2.1.9",
+    "@moontra/moonui-pro": "^2.3.8",
     "@radix-ui/react-accordion": "^1.2.11",
     "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-checkbox": "^1.3.2",

package/scripts/postinstall.js

@@ -171,6 +171,32 @@ const main = async () => {
   log('🌙 MoonUI Pro Installation', colors.cyan + colors.bright);
   log('═'.repeat(50), colors.gray);
   
+  // Check for development bypass
+  if (process.env.MOONUI_DEV_MODE === 'true' || process.env.MOONUI_SKIP_AUTH === 'true') {
+    log('🔧 Development Mode Enabled', colors.yellow + colors.bright);
+    log('   Authentication bypassed for local development', colors.yellow);
+    log('   This mode should only be used during development', colors.gray);
+    log('', '');
+    log('✅ MoonUI Pro ready for development!', colors.green);
+    log('═'.repeat(50), colors.gray);
+    return;
+  }
+  
+  // Check if running on localhost (development)
+  const isLocalDev = process.env.NODE_ENV === 'development' || 
+                     process.cwd().includes('moonui') ||
+                     fs.existsSync(path.join(process.cwd(), '.moonui-dev'));
+  
+  if (isLocalDev && !process.env.MOONUI_FORCE_AUTH) {
+    log('🚀 Local Development Detected', colors.blue + colors.bright);
+    log('   Running in development mode without auth', colors.blue);
+    log('   To enable auth checks: MOONUI_FORCE_AUTH=true npm install', colors.gray);
+    log('', '');
+    log('✅ MoonUI Pro ready for development!', colors.green);
+    log('═'.repeat(50), colors.gray);
+    return;
+  }
+  
   // Check if this is a CI environment
   const isCI = process.env.CI || process.env.CONTINUOUS_INTEGRATION || process.env.GITHUB_ACTIONS;
   

package/src/components/data-table/data-table-bulk-actions.tsx

@@ -0,0 +1,204 @@
+"use client"
+
+import React from 'react'
+import { Loader2, MoreHorizontal, AlertTriangle } from 'lucide-react'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../ui/dropdown-menu'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '../ui/alert-dialog'
+import { Button } from '../ui/button'
+import { Badge } from '../ui/badge'
+import { cn } from '../../lib/utils'
+
+export interface BulkAction<T = any> {
+  label: string
+  icon?: React.ReactNode
+  action: (selectedRows: T[]) => void | Promise<void>
+  confirmMessage?: string
+  confirmTitle?: string
+  variant?: 'default' | 'destructive'
+  disabled?: boolean | ((selectedRows: T[]) => boolean)
+}
+
+interface DataTableBulkActionsProps<T = any> {
+  selectedRows: T[]
+  actions: BulkAction<T>[]
+  onClearSelection?: () => void
+  className?: string
+}
+
+export function DataTableBulkActions<T>({
+  selectedRows,
+  actions,
+  onClearSelection,
+  className
+}: DataTableBulkActionsProps<T>) {
+  const [isLoading, setIsLoading] = React.useState(false)
+  const [pendingAction, setPendingAction] = React.useState<BulkAction<T> | null>(null)
+  
+  const selectedCount = selectedRows.length
+
+  const handleAction = async (action: BulkAction<T>) => {
+    if (action.confirmMessage) {
+      setPendingAction(action)
+      return
+    }
+
+    await executeAction(action)
+  }
+
+  const executeAction = async (action: BulkAction<T>) => {
+    setIsLoading(true)
+    try {
+      await action.action(selectedRows)
+      
+      // Clear selection after successful action
+      if (onClearSelection) {
+        onClearSelection()
+      }
+    } catch (error) {
+      console.error('Bulk action failed:', error)
+      // You might want to show an error toast here
+    } finally {
+      setIsLoading(false)
+      setPendingAction(null)
+    }
+  }
+
+  const handleConfirm = async () => {
+    if (pendingAction) {
+      await executeAction(pendingAction)
+    }
+  }
+
+  if (selectedCount === 0) {
+    return null
+  }
+
+  return (
+    <>
+      <div className={cn("flex items-center gap-2", className)}>
+        {/* Selected count badge */}
+        <Badge variant="secondary" className="gap-1">
+          <span className="font-semibold">{selectedCount}</span>
+          <span>selected</span>
+        </Badge>
+
+        {/* Bulk actions dropdown */}
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="outline"
+              size="sm"
+              disabled={isLoading}
+              className="gap-2"
+            >
+              {isLoading ? (
+                <>
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                  Processing...
+                </>
+              ) : (
+                <>
+                  <MoreHorizontal className="h-4 w-4" />
+                  Bulk Actions
+                </>
+              )}
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-48">
+            {actions.map((action, index) => {
+              const isDisabled = typeof action.disabled === 'function'
+                ? action.disabled(selectedRows)
+                : action.disabled
+
+              return (
+                <DropdownMenuItem
+                  key={index}
+                  disabled={isDisabled || isLoading}
+                  onSelect={() => handleAction(action)}
+                  className={cn(
+                    "cursor-pointer",
+                    action.variant === 'destructive' && "text-destructive focus:text-destructive"
+                  )}
+                >
+                  {action.icon && (
+                    <span className="mr-2 h-4 w-4">{action.icon}</span>
+                  )}
+                  {action.label}
+                </DropdownMenuItem>
+              )
+            })}
+            
+            {onClearSelection && (
+              <>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem
+                  onSelect={onClearSelection}
+                  className="cursor-pointer text-muted-foreground"
+                >
+                  Clear selection
+                </DropdownMenuItem>
+              </>
+            )}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+
+      {/* Confirmation dialog */}
+      <AlertDialog 
+        open={!!pendingAction} 
+        onOpenChange={(open) => !open && setPendingAction(null)}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle className="flex items-center gap-2">
+              {pendingAction?.variant === 'destructive' && (
+                <AlertTriangle className="h-5 w-5 text-destructive" />
+              )}
+              {pendingAction?.confirmTitle || 'Confirm Action'}
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              {pendingAction?.confirmMessage || 
+                `This action will affect ${selectedCount} selected item${selectedCount > 1 ? 's' : ''}. This action cannot be undone.`}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={isLoading}>
+              Cancel
+            </AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleConfirm}
+              disabled={isLoading}
+              className={cn(
+                pendingAction?.variant === 'destructive' && "bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              )}
+            >
+              {isLoading ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  Processing...
+                </>
+              ) : (
+                'Confirm'
+              )}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  )
+}

package/src/components/data-table/data-table-column-toggle.tsx

@@ -0,0 +1,166 @@
+"use client"
+
+import React from 'react'
+import { Check, Columns, Search } from 'lucide-react'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../ui/dropdown-menu'
+import { Button } from '../ui/button'
+import { Input } from '../ui/input'
+import { cn } from '../../lib/utils'
+
+interface DataTableColumnToggleProps {
+  table: any // Table instance from @tanstack/react-table
+  trigger?: React.ReactNode
+}
+
+export function DataTableColumnToggle({ table, trigger }: DataTableColumnToggleProps) {
+  const [search, setSearch] = React.useState('')
+  
+  // Get all columns that can be hidden
+  const columns = table
+    .getAllColumns()
+    .filter((column: any) => column.getCanHide())
+
+  // Filter columns based on search
+  const filteredColumns = React.useMemo(() => {
+    if (!search) return columns
+    
+    return columns.filter((column: any) => {
+      const header = column.columnDef.header
+      const headerText = typeof header === 'string' 
+        ? header 
+        : column.id
+      
+      return headerText.toLowerCase().includes(search.toLowerCase())
+    })
+  }, [columns, search])
+
+  // Count visible columns
+  const visibleCount = columns.filter((col: any) => col.getIsVisible()).length
+
+  const handleToggleAll = (visible: boolean) => {
+    columns.forEach((column: any) => {
+      column.toggleVisibility(visible)
+    })
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        {trigger || (
+          <Button variant="outline" size="sm" className="gap-2">
+            <Columns className="h-4 w-4" />
+            Columns
+            {visibleCount < columns.length && (
+              <span className="ml-1 rounded-full bg-primary/10 px-1.5 py-0.5 text-xs">
+                {visibleCount}/{columns.length}
+              </span>
+            )}
+          </Button>
+        )}
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-56">
+        <DropdownMenuLabel>Toggle Columns</DropdownMenuLabel>
+        
+        {/* Search input for many columns */}
+        {columns.length > 5 && (
+          <>
+            <div className="px-2 py-1.5">
+              <div className="relative">
+                <Search className="absolute left-2 top-2.5 h-3 w-3 text-muted-foreground" />
+                <Input
+                  placeholder="Search columns..."
+                  value={search}
+                  onChange={(e) => setSearch(e.target.value)}
+                  className="h-8 pl-7 text-xs"
+                />
+              </div>
+            </div>
+            <DropdownMenuSeparator />
+          </>
+        )}
+        
+        {/* Quick actions */}
+        <div className="flex items-center justify-between px-2 py-1.5">
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-7 text-xs"
+            onClick={() => handleToggleAll(true)}
+          >
+            Show all
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-7 text-xs"
+            onClick={() => handleToggleAll(false)}
+          >
+            Hide all
+          </Button>
+        </div>
+        
+        <DropdownMenuSeparator />
+        
+        {/* Column list */}
+        <div className="max-h-64 overflow-y-auto">
+          {filteredColumns.length === 0 ? (
+            <div className="px-2 py-4 text-center text-xs text-muted-foreground">
+              No columns found
+            </div>
+          ) : (
+            filteredColumns.map((column: any) => {
+              const isVisible = column.getIsVisible()
+              const header = column.columnDef.header
+              const headerText = typeof header === 'string' 
+                ? header 
+                : column.id
+              
+              return (
+                <DropdownMenuItem
+                  key={column.id}
+                  className={cn(
+                    "cursor-pointer",
+                    !isVisible && "text-muted-foreground"
+                  )}
+                  onSelect={(e) => {
+                    e.preventDefault()
+                    column.toggleVisibility()
+                  }}
+                >
+                  <div className="flex items-center gap-2 flex-1">
+                    <div className={cn(
+                      "flex h-4 w-4 items-center justify-center rounded-sm border",
+                      isVisible 
+                        ? "border-primary bg-primary text-primary-foreground" 
+                        : "border-muted-foreground"
+                    )}>
+                      {isVisible && <Check className="h-3 w-3" />}
+                    </div>
+                    <span className="truncate">{headerText}</span>
+                  </div>
+                </DropdownMenuItem>
+              )
+            })
+          )}
+        </div>
+        
+        {/* Summary */}
+        {columns.length > 0 && (
+          <>
+            <DropdownMenuSeparator />
+            <div className="px-2 py-1.5 text-xs text-muted-foreground text-center">
+              {visibleCount} of {columns.length} columns visible
+            </div>
+          </>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

package/src/components/data-table/data-table-export.ts

@@ -0,0 +1,156 @@
+/**
+ * Export utilities for DataTable component
+ */
+
+export type ExportFormat = 'csv' | 'json' | 'xlsx';
+
+export interface ExportOptions {
+  filename?: string;
+  format: ExportFormat;
+  columns?: string[];
+  includeHeaders?: boolean;
+}
+
+/**
+ * Convert data to CSV format
+ */
+export function dataToCSV<T extends Record<string, any>>(
+  data: T[],
+  columns?: string[],
+  includeHeaders = true
+): string {
+  if (data.length === 0) return '';
+
+  // Get columns from first item if not provided
+  const cols = columns || Object.keys(data[0]);
+
+  // Build CSV content
+  const rows: string[] = [];
+
+  // Add headers
+  if (includeHeaders) {
+    const headers = cols.map(col => {
+      // Handle column names with special characters
+      const value = String(col);
+      return value.includes(',') || value.includes('"') || value.includes('\n')
+        ? `"${value.replace(/"/g, '""')}"`
+        : value;
+    });
+    rows.push(headers.join(','));
+  }
+
+  // Add data rows
+  data.forEach(item => {
+    const row = cols.map(col => {
+      const value = item[col];
+      
+      // Handle different value types
+      if (value === null || value === undefined) return '';
+      if (value instanceof Date) return value.toISOString();
+      if (typeof value === 'object') return JSON.stringify(value);
+      
+      const stringValue = String(value);
+      return stringValue.includes(',') || stringValue.includes('"') || stringValue.includes('\n')
+        ? `"${stringValue.replace(/"/g, '""')}"`
+        : stringValue;
+    });
+    rows.push(row.join(','));
+  });
+
+  return rows.join('\n');
+}
+
+/**
+ * Convert data to JSON format
+ */
+export function dataToJSON<T>(data: T[], columns?: string[]): string {
+  if (!columns || columns.length === 0) {
+    return JSON.stringify(data, null, 2);
+  }
+
+  // Filter data to include only specified columns
+  const filteredData = data.map(item => {
+    const filtered: Record<string, any> = {};
+    columns.forEach(col => {
+      if (col in (item as any)) {
+        filtered[col] = (item as any)[col];
+      }
+    });
+    return filtered;
+  });
+
+  return JSON.stringify(filteredData, null, 2);
+}
+
+/**
+ * Download data as a file
+ */
+export function downloadFile(content: string, filename: string, mimeType: string): void {
+  const blob = new Blob([content], { type: mimeType });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  
+  link.href = url;
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+  
+  // Cleanup
+  document.body.removeChild(link);
+  URL.revokeObjectURL(url);
+}
+
+/**
+ * Export data to the specified format
+ */
+export async function exportData<T extends Record<string, any>>(
+  data: T[],
+  options: ExportOptions
+): Promise<void> {
+  const { format, filename = 'data-export', columns, includeHeaders = true } = options;
+  
+  let content: string;
+  let mimeType: string;
+  let extension: string;
+
+  switch (format) {
+    case 'csv':
+      content = dataToCSV(data, columns, includeHeaders);
+      mimeType = 'text/csv;charset=utf-8;';
+      extension = 'csv';
+      break;
+      
+    case 'json':
+      content = dataToJSON(data, columns);
+      mimeType = 'application/json;charset=utf-8;';
+      extension = 'json';
+      break;
+      
+    case 'xlsx':
+      // For XLSX, we'll need to use a library like xlsx or exceljs
+      // For now, we'll throw an error indicating it's not implemented
+      throw new Error('XLSX export requires additional dependencies. Use CSV format instead.');
+      
+    default:
+      throw new Error(`Unsupported export format: ${format}`);
+  }
+
+  const finalFilename = `${filename}-${new Date().toISOString().split('T')[0]}.${extension}`;
+  downloadFile(content, finalFilename, mimeType);
+}
+
+/**
+ * Get visible columns from column definitions
+ */
+export function getVisibleColumns<T>(
+  columns: Array<{ id?: string; accessorKey?: string; header?: any }>,
+  columnVisibility: Record<string, boolean>
+): string[] {
+  return columns
+    .filter(col => {
+      const key = col.id || col.accessorKey;
+      return key && columnVisibility[key] !== false;
+    })
+    .map(col => col.id || col.accessorKey!)
+    .filter(Boolean);
+}