create-bluecopa-react-app 1.0.4 → 1.0.6

package/templates/latest/src/components/page/navbar.tsx

@@ -1,104 +0,0 @@
-import { Link, useLocation } from 'react-router-dom'
-import { cn } from '@/lib/utils'
-import { 
-  Home, 
-  LayoutDashboard, 
-  Menu,
-  X
-} from 'lucide-react'
-import { useState } from 'react'
-import { BluecopaLogo } from "@/components/ui/bluecopa-logo";
-
-const navigation = [
-  { name: 'Home', href: '/', icon: Home },
-  { name: 'Dashboard', href: '/dashboard', icon: LayoutDashboard },
-]
-
-export default function Navbar() {
-  const location = useLocation()
-  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
-
-  return (
-    <nav className="bg-[#041e42] border-b border-gray-200 sticky top-0 z-50">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="flex justify-between h-16">
-          <div className="flex">
-            {/* Logo */}
-            <div className="flex-shrink-0 flex items-center">
-              <Link to="/" className="flex items-center space-x-2">
-                <BluecopaLogo className="h-6 w-6 text-white" />
-                <span className="text-xl font-bold text-white">Bluecopa</span>
-              </Link>
-            </div>
-            
-            {/* Desktop Navigation */}
-            <div className="hidden sm:ml-6 sm:flex sm:space-x-8">
-              {navigation.map((item) => {
-                const isActive = location.pathname === item.href
-                return (
-                  <Link
-                    key={item.name}
-                    to={item.href}
-                    className={cn(
-                      'inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors',
-                      isActive
-                        ? 'border-blue-400 text-white'
-                        : 'border-transparent text-blue-200 hover:border-blue-300 hover:text-white'
-                    )}
-                  >
-                    <item.icon className="h-4 w-4 mr-2" />
-                    {item.name}
-                  </Link>
-                )
-              })}
-            </div>
-          </div>
-
-          {/* Mobile menu button */}
-          <div className="sm:hidden flex items-center">
-            <button
-              type="button"
-              className="inline-flex items-center justify-center p-2 rounded-md text-blue-200 hover:text-white hover:bg-blue-700"
-              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
-            >
-              {mobileMenuOpen ? (
-                <X className="h-6 w-6" />
-              ) : (
-                <Menu className="h-6 w-6" />
-              )}
-            </button>
-          </div>
-        </div>
-      </div>
-
-      {/* Mobile menu */}
-      {mobileMenuOpen && (
-        <div className="sm:hidden">
-          <div className="pt-2 pb-3 space-y-1 bg-[#041e42]">
-            {navigation.map((item) => {
-              const isActive = location.pathname === item.href
-              return (
-                <Link
-                  key={item.name}
-                  to={item.href}
-                  className={cn(
-                    'block pl-3 pr-4 py-2 text-base font-medium transition-colors',
-                    isActive
-                      ? 'bg-blue-700 border-r-4 border-blue-400 text-white'
-                      : 'text-blue-200 hover:text-white hover:bg-blue-700'
-                  )}
-                  onClick={() => setMobileMenuOpen(false)}
-                >
-                  <div className="flex items-center">
-                    <item.icon className="h-5 w-5 mr-3" />
-                    {item.name}
-                  </div>
-                </Link>
-              )
-            })}
-          </div>
-        </div>
-      )}
-    </nav>
-  )
-}

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 }