@moontra/moonui-pro 2.20.1 → 2.20.3

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

@@ -1,169 +0,0 @@
-"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() && 
-      column.id !== 'select' && 
-      column.id !== 'actions' &&
-      column.id !== 'expander'
-    )
-
-  // 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) => {
-    table.toggleAllColumnsVisible(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

@@ -1,156 +0,0 @@
-/**
- * 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);
-}