@moontra/moonui-pro 2.20.0 → 2.20.2

package/src/components/advanced-chart/advanced-chart.test.tsx

@@ -1,281 +0,0 @@
-import { render, screen, fireEvent } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { AdvancedChart } from './index'
-
-// Mock recharts to avoid canvas issues in tests
-jest.mock('recharts', () => ({
-  ResponsiveContainer: ({ children }: any) => <div data-testid="responsive-container">{children}</div>,
-  LineChart: ({ children }: any) => <div data-testid="line-chart">{children}</div>,
-  BarChart: ({ children }: any) => <div data-testid="bar-chart">{children}</div>,
-  AreaChart: ({ children }: any) => <div data-testid="area-chart">{children}</div>,
-  PieChart: ({ children }: any) => <div data-testid="pie-chart">{children}</div>,
-  ScatterChart: ({ children }: any) => <div data-testid="scatter-chart">{children}</div>,
-  Line: () => <div data-testid="line" />,
-  Bar: () => <div data-testid="bar" />,
-  Area: () => <div data-testid="area" />,
-  Pie: () => <div data-testid="pie" />,
-  Scatter: () => <div data-testid="scatter" />,
-  Cell: () => <div data-testid="cell" />,
-  XAxis: () => <div data-testid="x-axis" />,
-  YAxis: () => <div data-testid="y-axis" />,
-  CartesianGrid: () => <div data-testid="grid" />,
-  Tooltip: () => <div data-testid="tooltip" />,
-  Legend: () => <div data-testid="legend" />,
-  ReferenceLine: () => <div data-testid="reference-line" />,
-  ReferenceArea: () => <div data-testid="reference-area" />,
-  Brush: () => <div data-testid="brush" />,
-}))
-
-// Mock data for testing
-const mockData = [
-  { name: 'Jan', value: 400, revenue: 2400 },
-  { name: 'Feb', value: 300, revenue: 1398 },
-  { name: 'Mar', value: 200, revenue: 9800 },
-  { name: 'Apr', value: 278, revenue: 3908 },
-  { name: 'May', value: 189, revenue: 4800 },
-  { name: 'Jun', value: 239, revenue: 3800 },
-]
-
-const mockSeries = [
-  {
-    dataKey: 'value',
-    name: 'Users',
-    color: '#8884d8',
-  },
-  {
-    dataKey: 'revenue',
-    name: 'Revenue',
-    color: '#82ca9d',
-  },
-]
-
-describe('AdvancedChart', () => {
-  it('renders without crashing', () => {
-    render(
-      <AdvancedChart
-        data={mockData}
-        series={mockSeries}
-        type="line"
-      />
-    )
-    
-    expect(screen.getByText('Advanced Chart')).toBeInTheDocument()
-  })
-
-  it('renders with custom title', () => {
-    render(
-      <AdvancedChart
-        data={mockData}
-        series={mockSeries}
-        type="line"
-        title="Custom Chart Title"
-      />
-    )
-    
-    expect(screen.getByText('Custom Chart Title')).toBeInTheDocument()
-  })
-
-  it('renders with subtitle', () => {
-    render(
-      <AdvancedChart
-        data={mockData}
-        series={mockSeries}
-        type="line"
-        title="Chart Title"
-        subtitle="Chart Subtitle"
-      />
-    )
-    
-    expect(screen.getByText('Chart Subtitle')).toBeInTheDocument()
-  })
-
-  it('renders line chart type', () => {
-    render(
-      <AdvancedChart
-        data={mockData}
-        series={mockSeries}
-        type="line"
-      />
-    )
-    
-    expect(screen.getByTestId('line-chart')).toBeInTheDocument()
-  })
-
-  it('renders bar chart type', () => {
-    render(
-      <AdvancedChart
-        data={mockData}
-        series={mockSeries}
-        type="bar"
-      />
-    )
-    
-    expect(screen.getByTestId('bar-chart')).toBeInTheDocument()
-  })
-
-  it('renders area chart type', () => {
-    render(
-      <AdvancedChart
-        data={mockData}
-        series={mockSeries}
-        type="area"
-      />
-    )
-    
-    expect(screen.getByTestId('area-chart')).toBeInTheDocument()
-  })
-
-  it('renders pie chart type', () => {
-    render(
-      <AdvancedChart
-        data={mockData}
-        series={mockSeries}
-        type="pie"
-      />
-    )
-    
-    expect(screen.getByTestId('pie-chart')).toBeInTheDocument()
-  })
-
-  it('renders scatter chart type', () => {
-    render(
-      <AdvancedChart
-        data={mockData}
-        series={mockSeries}
-        type="scatter"
-      />
-    )
-    
-    expect(screen.getByTestId('scatter-chart')).toBeInTheDocument()
-  })
-
-  it('shows loading state', () => {
-    render(
-      <AdvancedChart
-        data={mockData}
-        series={mockSeries}
-        type="line"
-        loading={true}
-      />
-    )
-    
-    expect(screen.getByText('Loading chart...')).toBeInTheDocument()
-  })
-
-  it('shows error state', () => {
-    render(
-      <AdvancedChart
-        data={mockData}
-        series={mockSeries}
-        type="line"
-        error="Something went wrong"
-      />
-    )
-    
-    expect(screen.getByText('Something went wrong')).toBeInTheDocument()
-    expect(screen.getByText('Retry')).toBeInTheDocument()
-  })
-
-  it('calls onRefresh when refresh button is clicked', () => {
-    const mockOnRefresh = jest.fn()
-    
-    render(
-      <AdvancedChart
-        data={mockData}
-        series={mockSeries}
-        type="line"
-        onRefresh={mockOnRefresh}
-      />
-    )
-    
-    const refreshButton = screen.getByRole('button', { name: /refresh/i })
-    fireEvent.click(refreshButton)
-    
-    expect(mockOnRefresh).toHaveBeenCalled()
-  })
-
-  it('calls onExport when export button is clicked', () => {
-    const mockOnExport = jest.fn()
-    
-    render(
-      <AdvancedChart
-        data={mockData}
-        series={mockSeries}
-        type="line"
-        onExport={mockOnExport}
-      />
-    )
-    
-    const exportButton = screen.getByRole('button', { name: /download/i })
-    fireEvent.click(exportButton)
-    
-    expect(mockOnExport).toHaveBeenCalledWith('png')
-  })
-
-  it('displays trend indicator', () => {
-    render(
-      <AdvancedChart
-        data={mockData}
-        series={mockSeries}
-        type="line"
-        title="Revenue Chart"
-      />
-    )
-    
-    // Should display trend percentage
-    expect(screen.getByText(/%/)).toBeInTheDocument()
-  })
-
-  it('renders with custom height', () => {
-    render(
-      <AdvancedChart
-        data={mockData}
-        series={mockSeries}
-        type="line"
-        height={600}
-      />
-    )
-    
-    expect(screen.getByTestId('responsive-container')).toBeInTheDocument()
-  })
-
-  it('handles responsive mode', () => {
-    render(
-      <AdvancedChart
-        data={mockData}
-        series={mockSeries}
-        type="line"
-        responsive={true}
-      />
-    )
-    
-    expect(screen.getByTestId('responsive-container')).toBeInTheDocument()
-  })
-
-  it('handles non-responsive mode', () => {
-    render(
-      <AdvancedChart
-        data={mockData}
-        series={mockSeries}
-        type="line"
-        responsive={false}
-      />
-    )
-    
-    expect(screen.queryByTestId('responsive-container')).not.toBeInTheDocument()
-  })
-
-  it('applies custom className', () => {
-    render(
-      <AdvancedChart
-        data={mockData}
-        series={mockSeries}
-        type="line"
-        className="custom-chart"
-      />
-    )
-    
-    const chartContainer = screen.getByText('Advanced Chart').closest('div')
-    expect(chartContainer).toHaveClass('custom-chart')
-  })
-})

package/src/components/data-table/data-table.test.tsx

@@ -1,187 +0,0 @@
-import { render, screen, fireEvent } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { DataTable } from './index'
-
-// Mock data for testing
-const mockData = [
-  { id: 1, name: 'John Doe', email: 'john@example.com', status: 'active' },
-  { id: 2, name: 'Jane Smith', email: 'jane@example.com', status: 'inactive' },
-  { id: 3, name: 'Bob Johnson', email: 'bob@example.com', status: 'active' }
-]
-
-const mockColumns = [
-  {
-    accessorKey: 'name',
-    header: 'Name',
-  },
-  {
-    accessorKey: 'email',
-    header: 'Email',
-  },
-  {
-    accessorKey: 'status',
-    header: 'Status',
-  }
-]
-
-describe('DataTable', () => {
-  it('renders without crashing', () => {
-    render(
-      <DataTable
-        columns={mockColumns}
-        data={mockData}
-      />
-    )
-    
-    expect(screen.getByText('Name')).toBeInTheDocument()
-    expect(screen.getByText('Email')).toBeInTheDocument()
-    expect(screen.getByText('Status')).toBeInTheDocument()
-  })
-
-  it('displays data correctly', () => {
-    render(
-      <DataTable
-        columns={mockColumns}
-        data={mockData}
-      />
-    )
-    
-    expect(screen.getByText('John Doe')).toBeInTheDocument()
-    expect(screen.getByText('jane@example.com')).toBeInTheDocument()
-    expect(screen.getByText('active')).toBeInTheDocument()
-  })
-
-  it('shows search input when searchable is true', () => {
-    render(
-      <DataTable
-        columns={mockColumns}
-        data={mockData}
-        searchable
-      />
-    )
-    
-    expect(screen.getByPlaceholderText('Search all columns...')).toBeInTheDocument()
-  })
-
-  it('shows filter button when filterable is true', () => {
-    render(
-      <DataTable
-        columns={mockColumns}
-        data={mockData}
-        filterable
-      />
-    )
-    
-    expect(screen.getByText('Filters')).toBeInTheDocument()
-  })
-
-  it('shows export button when exportable is true', () => {
-    render(
-      <DataTable
-        columns={mockColumns}
-        data={mockData}
-        exportable
-      />
-    )
-    
-    expect(screen.getByText('Export')).toBeInTheDocument()
-  })
-
-  it('handles search functionality', () => {
-    render(
-      <DataTable
-        columns={mockColumns}
-        data={mockData}
-        searchable
-      />
-    )
-    
-    const searchInput = screen.getByPlaceholderText('Search all columns...')
-    fireEvent.change(searchInput, { target: { value: 'john' } })
-    
-    expect(screen.getByText('John Doe')).toBeInTheDocument()
-    // Jane Smith should be filtered out
-    expect(screen.queryByText('Jane Smith')).not.toBeInTheDocument()
-  })
-
-  it('handles pagination', () => {
-    // Create more data for pagination testing
-    const moreData = Array.from({ length: 20 }, (_, i) => ({
-      id: i + 1,
-      name: `User ${i + 1}`,
-      email: `user${i + 1}@example.com`,
-      status: i % 2 === 0 ? 'active' : 'inactive'
-    }))
-    
-    render(
-      <DataTable
-        columns={mockColumns}
-        data={moreData}
-        pagination
-        pageSize={10}
-      />
-    )
-    
-    expect(screen.getByText('Page 1 of 2')).toBeInTheDocument()
-    expect(screen.getByText('Rows per page')).toBeInTheDocument()
-  })
-
-  it('calls onRowSelect when row is selected', () => {
-    const mockOnRowSelect = jest.fn()
-    
-    render(
-      <DataTable
-        columns={mockColumns}
-        data={mockData}
-        selectable
-        onRowSelect={mockOnRowSelect}
-      />
-    )
-    
-    // This would require implementing selection in the component
-    // For now, just verify the component renders with selection enabled
-    expect(screen.getByRole('table')).toBeInTheDocument()
-  })
-
-  it('calls onExport when export button is clicked', () => {
-    const mockOnExport = jest.fn()
-    
-    render(
-      <DataTable
-        columns={mockColumns}
-        data={mockData}
-        exportable
-        onExport={mockOnExport}
-      />
-    )
-    
-    const exportButton = screen.getByText('Export')
-    fireEvent.click(exportButton)
-    
-    expect(mockOnExport).toHaveBeenCalledWith(mockData)
-  })
-
-  it('handles empty data state', () => {
-    render(
-      <DataTable
-        columns={mockColumns}
-        data={[]}
-      />
-    )
-    
-    expect(screen.getByText('No results found.')).toBeInTheDocument()
-  })
-
-  it('applies custom className', () => {
-    render(
-      <DataTable
-        columns={mockColumns}
-        data={mockData}
-        className="custom-table"
-      />
-    )
-    
-    const tableContainer = screen.getByRole('table').closest('div')
-    expect(tableContainer).toHaveClass('custom-table')
-  })
-})

package/src/components/enhanced/badge.tsx

@@ -1,191 +0,0 @@
-import React from 'react'
-import { motion, AnimatePresence } from 'framer-motion'
-import { cva, type VariantProps } from 'class-variance-authority'
-import { cn } from '../../lib/utils'
-
-const badgeVariants = cva(
-  ["inline-flex items-center gap-1.5", 
-  "font-medium transition-all duration-200", 
-  "border focus:outline-none",
-  "focus-visible:ring-2 focus-visible:ring-offset-1"],
-  {
-    variants: {
-      variant: {
-        default: [
-          "border-transparent bg-primary text-primary-foreground",
-          "hover:bg-primary/90",
-          "focus-visible:ring-primary/30",
-        ],
-        secondary: [
-          "border-transparent bg-secondary text-secondary-foreground",
-          "hover:bg-secondary/80",
-          "focus-visible:ring-gray-400/30",
-        ],
-        destructive: [
-          "border-transparent bg-destructive text-destructive-foreground",
-          "hover:bg-destructive/90",
-          "focus-visible:ring-destructive/30",
-        ],
-        outline: [
-          "border-input bg-transparent",
-          "hover:border-input/80",
-          "focus-visible:ring-gray-400/30",
-        ],
-        success: [
-          "border-transparent bg-green-500 text-white",
-          "hover:bg-green-600",
-          "focus-visible:ring-green-500/30",
-        ],
-        warning: [
-          "border-transparent bg-yellow-500 text-white",
-          "hover:bg-yellow-600",
-          "focus-visible:ring-yellow-500/30",
-        ],
-        pro: [
-          "border-transparent bg-gradient-to-r from-purple-600 to-pink-600 text-white",
-          "hover:from-purple-700 hover:to-pink-700",
-          "focus-visible:ring-purple-400/30",
-        ],
-      },
-      size: {
-        sm: "h-5 px-2 text-xs",
-        default: "h-6 px-3 text-sm",
-        lg: "h-8 px-4 text-base",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-export interface BadgeProProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {
-  enablePulse?: boolean
-  enableGlow?: boolean
-  enableShimmer?: boolean
-  removable?: boolean
-  onRemove?: () => void
-  leftIcon?: React.ReactNode
-  rightIcon?: React.ReactNode
-}
-
-export const BadgePro = React.forwardRef<
-  HTMLDivElement,
-  BadgeProProps
->(({
-  className,
-  variant,
-  size,
-  enablePulse = false,
-  enableGlow = false,
-  enableShimmer = false,
-  removable = false,
-  onRemove,
-  leftIcon,
-  rightIcon,
-  children,
-  ...props
-}, ref) => {
-  const [isRemoving, setIsRemoving] = React.useState(false)
-
-  const handleRemove = () => {
-    setIsRemoving(true)
-    setTimeout(() => {
-      onRemove?.()
-    }, 300)
-  }
-
-  // Auto-assign icons for special variants
-  let autoLeftIcon = leftIcon
-  let autoChildren = children
-  
-  if (variant === 'pro' && !leftIcon) {
-    autoLeftIcon = (
-      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-3 h-3">
-        <path d="M12 0L13.09 8.26L22 9L13.09 9.74L12 18L10.91 9.74L2 9L10.91 8.26L12 0Z" fill="currentColor"/>
-        <path d="M19 5L19.5 7L21 7.5L19.5 8L19 10L18.5 8L17 7.5L18.5 7L19 5Z" fill="currentColor"/>
-        <path d="M19 15L19.5 17L21 17.5L19.5 18L19 20L18.5 18L17 17.5L18.5 17L19 15Z" fill="currentColor"/>
-      </svg>
-    )
-    autoChildren = children || 'Pro'
-  }
-
-  return (
-    <AnimatePresence>
-      {!isRemoving && (
-        <motion.div
-          ref={ref}
-          className={cn(
-            badgeVariants({ variant, size }),
-            enablePulse && "animate-pulse",
-            enableGlow && "shadow-lg shadow-current/50",
-            enableShimmer && "relative overflow-hidden",
-            className
-          )}
-          initial={{ opacity: 0, scale: 0.8 }}
-          animate={{ opacity: 1, scale: 1 }}
-          exit={{ opacity: 0, scale: 0.8 }}
-          transition={{ duration: 0.2 }}
-          whileHover={{ scale: 1.05 }}
-          whileTap={{ scale: 0.95 }}
-        >
-          {enableShimmer && (
-            <motion.div
-              className="absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent via-white/20 to-transparent"
-              animate={{ translateX: "200%" }}
-              transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
-            />
-          )}
-          
-          {autoLeftIcon && (
-            <motion.span 
-              className="inline-flex shrink-0"
-              animate={enablePulse ? { scale: [1, 1.2, 1] } : {}}
-              transition={{ duration: 2, repeat: Infinity }}
-            >
-              {autoLeftIcon}
-            </motion.span>
-          )}
-          
-          <span className="truncate">{autoChildren}</span>
-          
-          {rightIcon && (
-            <span className="inline-flex shrink-0">
-              {rightIcon}
-            </span>
-          )}
-          
-          {removable && onRemove && (
-            <motion.button 
-              type="button"
-              className="ml-1 -mr-1 h-3.5 w-3.5 rounded-full inline-flex items-center justify-center hover:bg-black/10 dark:hover:bg-white/10"
-              onClick={handleRemove}
-              whileHover={{ rotate: 90 }}
-              transition={{ type: "spring", stiffness: 300 }}
-              aria-label="Remove badge"
-            >
-              <svg 
-                width="8" 
-                height="8" 
-                viewBox="0 0 8 8" 
-                fill="none" 
-                xmlns="http://www.w3.org/2000/svg"
-                className="opacity-70"
-                aria-hidden="true"
-              >
-                <path d="M0.799988 7.19999L7.19999 0.799988M0.799988 0.799988L7.19999 7.19999" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-              </svg>
-            </motion.button>
-          )}
-        </motion.div>
-      )}
-    </AnimatePresence>
-  )
-})
-
-BadgePro.displayName = 'BadgePro'
-
-export { badgeVariants }