create-bluecopa-react-app 1.0.5 → 1.0.7

package/templates/latest/src/components/tables/data-grid.tsx

@@ -1,439 +0,0 @@
-'use client'
-
-import { useState, useMemo } from 'react'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import { Button } from '@/components/ui/button'
-import { Badge } from '@/components/ui/badge'
-import { Input } from '@/components/ui/input'
-import { 
-  ArrowUpDown, 
-  ChevronLeft, 
-  ChevronRight, 
-  Search, 
-  Download,
-  Filter,
-  MoreVertical
-} from 'lucide-react'
-
-interface DataGridColumn {
-  key: string
-  title: string
-  sortable?: boolean
-  filterable?: boolean
-  formatter?: (value: any) => React.ReactNode
-  align?: 'left' | 'center' | 'right'
-}
-
-interface DataGridProps {
-  data: any[]
-  columns: DataGridColumn[]
-  pageSize?: number
-  title?: string
-  description?: string
-  searchable?: boolean
-  exportable?: boolean
-}
-
-// Sample data for demonstration
-const sampleData = [
-  {
-    id: 'TXN-001',
-    customer: 'John Doe',
-    amount: 1250.00,
-    category: 'Electronics',
-    payment_method: 'Credit Card',
-    status: 'Completed',
-    date: '2024-01-15'
-  },
-  {
-    id: 'TXN-002',
-    customer: 'Jane Smith',
-    amount: 890.50,
-    category: 'Clothing',
-    payment_method: 'PayPal',
-    status: 'Pending',
-    date: '2024-01-14'
-  },
-  {
-    id: 'TXN-003',
-    customer: 'Bob Johnson',
-    amount: 2100.75,
-    category: 'Home & Garden',
-    payment_method: 'Bank Transfer',
-    status: 'Completed',
-    date: '2024-01-13'
-  },
-  {
-    id: 'TXN-004',
-    customer: 'Alice Brown',
-    amount: 675.25,
-    category: 'Books',
-    payment_method: 'Credit Card',
-    status: 'Failed',
-    date: '2024-01-12'
-  },
-  {
-    id: 'TXN-005',
-    customer: 'Charlie Wilson',
-    amount: 1450.00,
-    category: 'Sports',
-    payment_method: 'Cash',
-    status: 'Completed',
-    date: '2024-01-11'
-  },
-  {
-    id: 'TXN-006',
-    customer: 'Diana Davis',
-    amount: 320.80,
-    category: 'Beauty',
-    payment_method: 'Credit Card',
-    status: 'Completed',
-    date: '2024-01-10'
-  },
-  {
-    id: 'TXN-007',
-    customer: 'Eve Martinez',
-    amount: 1875.90,
-    category: 'Electronics',
-    payment_method: 'PayPal',
-    status: 'Pending',
-    date: '2024-01-09'
-  },
-  {
-    id: 'TXN-008',
-    customer: 'Frank Garcia',
-    amount: 540.25,
-    category: 'Clothing',
-    payment_method: 'Bank Transfer',
-    status: 'Completed',
-    date: '2024-01-08'
-  }
-]
-
-const sampleColumns: DataGridColumn[] = [
-  {
-    key: 'id',
-    title: 'Transaction ID',
-    sortable: true,
-    filterable: true,
-    formatter: (value) => <span className="font-mono text-sm">{value}</span>
-  },
-  {
-    key: 'customer',
-    title: 'Customer',
-    sortable: true,
-    filterable: true,
-  },
-  {
-    key: 'amount',
-    title: 'Amount',
-    sortable: true,
-    align: 'right',
-    formatter: (value) => <span className="font-semibold">${value.toLocaleString()}</span>
-  },
-  {
-    key: 'category',
-    title: 'Category',
-    sortable: true,
-    filterable: true,
-    formatter: (value) => <Badge variant="outline">{value}</Badge>
-  },
-  {
-    key: 'payment_method',
-    title: 'Payment Method',
-    sortable: true,
-    filterable: true,
-  },
-  {
-    key: 'status',
-    title: 'Status',
-    sortable: true,
-    filterable: true,
-    formatter: (value) => (
-      <Badge 
-        variant={value === 'Completed' ? 'default' : value === 'Pending' ? 'secondary' : 'destructive'}
-      >
-        {value}
-      </Badge>
-    )
-  },
-  {
-    key: 'date',
-    title: 'Date',
-    sortable: true,
-    formatter: (value) => new Date(value).toLocaleDateString()
-  }
-]
-
-export function DataGrid({ 
-  data = sampleData, 
-  columns = sampleColumns, 
-  pageSize = 10,
-  title = "Data Table",
-  description = "Advanced data table with sorting, filtering, and pagination",
-  searchable = true,
-  exportable = true
-}: DataGridProps) {
-  const [currentPage, setCurrentPage] = useState(1)
-  const [sortColumn, setSortColumn] = useState<string | null>(null)
-  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc')
-  const [searchTerm, setSearchTerm] = useState('')
-  const [filters, setFilters] = useState<Record<string, string>>({})
-
-  // Filter and search data
-  const filteredData = useMemo(() => {
-    let result = data
-
-    // Apply search
-    if (searchTerm) {
-      result = result.filter(row =>
-        Object.values(row).some(value =>
-          String(value).toLowerCase().includes(searchTerm.toLowerCase())
-        )
-      )
-    }
-
-    // Apply column filters
-    Object.entries(filters).forEach(([column, filterValue]) => {
-      if (filterValue) {
-        result = result.filter(row =>
-          String(row[column]).toLowerCase().includes(filterValue.toLowerCase())
-        )
-      }
-    })
-
-    return result
-  }, [data, searchTerm, filters])
-
-  // Sort data
-  const sortedData = useMemo(() => {
-    if (!sortColumn) return filteredData
-
-    return [...filteredData].sort((a, b) => {
-      const aValue = a[sortColumn]
-      const bValue = b[sortColumn]
-
-      let comparison = 0
-      if (aValue < bValue) comparison = -1
-      if (aValue > bValue) comparison = 1
-
-      return sortDirection === 'desc' ? comparison * -1 : comparison
-    })
-  }, [filteredData, sortColumn, sortDirection])
-
-  // Paginate data
-  const paginatedData = useMemo(() => {
-    const startIndex = (currentPage - 1) * pageSize
-    return sortedData.slice(startIndex, startIndex + pageSize)
-  }, [sortedData, currentPage, pageSize])
-
-  const totalPages = Math.ceil(sortedData.length / pageSize)
-
-  const handleSort = (column: string) => {
-    if (sortColumn === column) {
-      setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc')
-    } else {
-      setSortColumn(column)
-      setSortDirection('asc')
-    }
-  }
-
-  const handleColumnFilter = (column: string, value: string) => {
-    setFilters(prev => ({ ...prev, [column]: value }))
-    setCurrentPage(1) // Reset to first page when filtering
-  }
-
-  const exportToCSV = () => {
-    const headers = columns.map(col => col.title)
-    const csvContent = [
-      headers.join(','),
-      ...sortedData.map(row => 
-        columns.map(col => row[col.key]).join(',')
-      )
-    ].join('\n')
-
-    const blob = new Blob([csvContent], { type: 'text/csv' })
-    const url = window.URL.createObjectURL(blob)
-    const a = document.createElement('a')
-    a.href = url
-    a.download = 'data-export.csv'
-    a.click()
-    window.URL.revokeObjectURL(url)
-  }
-
-  return (
-    <Card>
-      <CardHeader>
-        <div className="flex items-center justify-between">
-          <div>
-            <CardTitle>{title}</CardTitle>
-            <CardDescription>{description}</CardDescription>
-          </div>
-          <div className="flex items-center space-x-2">
-            {exportable && (
-              <Button variant="outline" size="sm" onClick={exportToCSV}>
-                <Download className="h-4 w-4 mr-2" />
-                Export
-              </Button>
-            )}
-            <Button variant="outline" size="sm">
-              <Filter className="h-4 w-4 mr-2" />
-              Filters
-            </Button>
-            <Button variant="outline" size="sm">
-              <MoreVertical className="h-4 w-4" />
-            </Button>
-          </div>
-        </div>
-        
-        {searchable && (
-          <div className="flex items-center space-x-2 mt-4">
-            <div className="relative flex-1 max-w-sm">
-              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
-              <Input
-                placeholder="Search all columns..."
-                value={searchTerm}
-                onChange={(e) => setSearchTerm(e.target.value)}
-                className="pl-10"
-              />
-            </div>
-            <div className="text-sm text-gray-500">
-              Showing {sortedData.length} of {data.length} results
-            </div>
-          </div>
-        )}
-      </CardHeader>
-      
-      <CardContent>
-        <div className="overflow-x-auto">
-          <table className="w-full border-collapse">
-            <thead>
-              <tr className="border-b">
-                {columns.map((column) => (
-                  <th
-                    key={column.key}
-                    className={`px-4 py-3 text-left font-medium text-gray-900 ${
-                      column.align === 'right' ? 'text-right' : 
-                      column.align === 'center' ? 'text-center' : 'text-left'
-                    }`}
-                  >
-                    <div className="flex items-center space-x-2">
-                      <span>{column.title}</span>
-                      {column.sortable && (
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          className="h-6 w-6 p-0"
-                          onClick={() => handleSort(column.key)}
-                        >
-                          <ArrowUpDown className="h-3 w-3" />
-                        </Button>
-                      )}
-                    </div>
-                    {column.filterable && (
-                      <Input
-                        placeholder="Filter..."
-                        size={10}
-                        className="mt-1 h-7 text-xs"
-                        onChange={(e) => handleColumnFilter(column.key, e.target.value)}
-                      />
-                    )}
-                  </th>
-                ))}
-              </tr>
-            </thead>
-            <tbody>
-              {paginatedData.map((row, index) => (
-                <tr 
-                  key={index} 
-                  className="border-b hover:bg-gray-50 transition-colors"
-                >
-                  {columns.map((column) => (
-                    <td
-                      key={column.key}
-                      className={`px-4 py-3 ${
-                        column.align === 'right' ? 'text-right' : 
-                        column.align === 'center' ? 'text-center' : 'text-left'
-                      }`}
-                    >
-                      {column.formatter ? column.formatter(row[column.key]) : row[column.key]}
-                    </td>
-                  ))}
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-
-        {/* Pagination */}
-        <div className="flex items-center justify-between mt-4">
-          <div className="text-sm text-gray-500">
-            Page {currentPage} of {totalPages} ({sortedData.length} total items)
-          </div>
-          <div className="flex items-center space-x-2">
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
-              disabled={currentPage === 1}
-            >
-              <ChevronLeft className="h-4 w-4" />
-            </Button>
-            
-            {/* Page numbers */}
-            {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
-              const pageNum = Math.max(1, currentPage - 2) + i
-              if (pageNum > totalPages) return null
-              
-              return (
-                <Button
-                  key={pageNum}
-                  variant={pageNum === currentPage ? "default" : "outline"}
-                  size="sm"
-                  onClick={() => setCurrentPage(pageNum)}
-                >
-                  {pageNum}
-                </Button>
-              )
-            })}
-            
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
-              disabled={currentPage === totalPages}
-            >
-              <ChevronRight className="h-4 w-4" />
-            </Button>
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
-
-// Example usage component
-export function TableExamples() {
-  return (
-    <div className="space-y-8">
-      <DataGrid
-        data={sampleData}
-        columns={sampleColumns}
-        title="Transaction Records"
-        description="Complete transaction history with advanced filtering and sorting"
-        pageSize={5}
-      />
-      
-      {/* Compact version */}
-      <DataGrid
-        data={sampleData.slice(0, 4)}
-        columns={sampleColumns.slice(0, 4)}
-        title="Quick Overview"
-        description="Simplified view of recent transactions"
-        pageSize={10}
-        searchable={false}
-        exportable={false}
-      />
-    </div>
-  )
-}

package/templates/latest/src/components/ui/alert.tsx

@@ -1,59 +0,0 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const alertVariants = cva(
-  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
-  {
-    variants: {
-      variant: {
-        default: "bg-background text-foreground",
-        destructive:
-          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-const Alert = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
->(({ className, variant, ...props }, ref) => (
-  <div
-    ref={ref}
-    role="alert"
-    className={cn(alertVariants({ variant }), className)}
-    {...props}
-  />
-))
-Alert.displayName = "Alert"
-
-const AlertTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
-  <h5
-    ref={ref}
-    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
-    {...props}
-  />
-))
-AlertTitle.displayName = "AlertTitle"
-
-const AlertDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("text-sm [&_p]:leading-relaxed", className)}
-    {...props}
-  />
-))
-AlertDescription.displayName = "AlertDescription"
-
-export { Alert, AlertTitle, AlertDescription }

package/templates/latest/src/components/ui/avatar.tsx

@@ -1,50 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as AvatarPrimitive from "@radix-ui/react-avatar"
-
-import { cn } from "@/lib/utils"
-
-const Avatar = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Root
-    ref={ref}
-    className={cn(
-      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
-      className
-    )}
-    {...props}
-  />
-))
-Avatar.displayName = AvatarPrimitive.Root.displayName
-
-const AvatarImage = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Image>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Image
-    ref={ref}
-    className={cn("aspect-square h-full w-full", className)}
-    {...props}
-  />
-))
-AvatarImage.displayName = AvatarPrimitive.Image.displayName
-
-const AvatarFallback = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Fallback>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Fallback
-    ref={ref}
-    className={cn(
-      "flex h-full w-full items-center justify-center rounded-full bg-muted",
-      className
-    )}
-    {...props}
-  />
-))
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
-
-export { Avatar, AvatarImage, AvatarFallback }

package/templates/latest/src/components/ui/badge.tsx

@@ -1,36 +0,0 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const badgeVariants = cva(
-  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-  {
-    variants: {
-      variant: {
-        default:
-          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
-        secondary:
-          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        destructive:
-          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-        outline: "text-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
-
-function Badge({ className, variant, ...props }: BadgeProps) {
-  return (
-    <div className={cn(badgeVariants({ variant }), className)} {...props} />
-  )
-}
-
-export { Badge, badgeVariants }

package/templates/latest/src/components/ui/bluecopa-logo.tsx

@@ -1,57 +0,0 @@
-import React from 'react'
-
-interface BluecopaLogoProps {
-  className?: string
-  width?: number
-  height?: number
-}
-
-export const BluecopaLogo: React.FC<BluecopaLogoProps> = ({ 
-  className = "", 
-  width = 24, 
-  height = 24 
-}) => {
-  return (
-    <svg 
-      id="Layer_2" 
-      data-name="Layer 2" 
-      xmlns="http://www.w3.org/2000/svg" 
-      viewBox="0 0 1820 1774.9"
-      width={width}
-      height={height}
-      className={className}
-      role="img"
-      aria-hidden="true"
-      focusable="false"
-    >
-      <defs>
-        <style>
-          {`.cls-1, .cls-2 {
-            fill: #fff;
-            }
-
-          .cls-3 {
-            fill: #3548ff;
-          }
-
-          .cls-3, .cls-4, .cls-2 {
-            isolation: isolate;
-          }
-
-          .cls-4 {
-            fill: #8ac2ff;
-          }`}
-        </style>
-      </defs>
-      <g id="Layer_1-2" data-name="Layer 1">
-        <circle className="cls-1" cx="1054.53" cy="779.52" r="386.21"/>
-        <g>
-          <path className="cls-4" d="M5.91,1004.47L0,1768.96l764.5,5.91c422.08,3.27,767.15-336.52,770.42-758.58,3.26-422.06-336.51-767.14-758.59-770.41C350.68,242.59,9.18,582.4,5.91,1004.47Z"/>
-          <path className="cls-3" d="M1820,764.52V0h-764.52C633.38,0,290.95,342.44,290.95,764.52s342.43,764.52,764.52,764.52,764.52-342.44,764.52-764.52Z"/>
-          <circle className="cls-2" cx="1055.48" cy="780.55" r="382.26"/>
-        </g>
-      </g>
-    </svg>
-  )
-}
-

package/templates/latest/src/components/ui/button.tsx

@@ -1,58 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline:
-          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-3",
-        lg: "h-11 rounded-md px-8",
-        icon: "h-10 w-10",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-Button.displayName = "Button"
-
-export { Button, buttonVariants }