create-bluecopa-react-app 1.0.4 → 1.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-bluecopa-react-app",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "CLI tool to create bluecopa React applications",
   "main": "./bin/create-bluecopa-react-app.js",
   "bin": {

package/templates/latest/AGENT.md

@@ -13,7 +13,7 @@ This template is designed to work seamlessly with AI coding assistants for rapid
 - **Build Tool**: Vite (fast HMR and building)
 - **Styling**: TailwindCSS with BlueCopa design system
 - **UI Components**: Radix UI primitives (add via shadcn-ui for pre-styled components)
-- **Data Fetching**: TanStack Query with @bluecopa/core hooks
+- **Data Fetching**: TanStack Query with @bluecopa/react hooks
 - **Charts**: Recharts for data visualization
 - **Icons**: Lucide React
 
@@ -22,11 +22,9 @@ This template is designed to work seamlessly with AI coding assistants for rapid
 src/
 ├── components/ui/       # Reusable UI components (e.g., Button, Card via shadcn-ui; bluecopa-logo)
 ├── components/         # Business logic components (Navbar, DashboardLayout, etc.)
-├── hooks/             # Custom React hooks (if needed; primarily use @bluecopa/core)
-├── pages/             # Route components (Home, Dashboard)
-├── providers/         # React context providers (e.g., QueryProvider)
-├── lib/               # Utility functions and helpers (e.g., utils.ts with cn)
-└── types/             # TypeScript type definitions (e.g., for API responses)
+├── hooks/              # Custom React hooks (if needed; primarily use @bluecopa/react)
+├── lib/                # Utility functions and helpers (e.g., utils.ts with cn)
+└── types/              # TypeScript type definitions (e.g., for API responses)
 ```
 
 ## 🔧 Development Patterns
@@ -38,7 +36,7 @@ When asked to create a new page:
 1. **Create the page component** in `src/pages/NewPage.tsx`:
 ```tsx
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { useGetWorkflowInstanceStatusById } from '@bluecopa/core';
+import { useGetWorkflowInstanceStatusById } from '@bluecopa/react';
 
 export default function NewPage() {
   const { data: workflowStatus, isLoading } = useGetWorkflowInstanceStatusById('workflowId');
@@ -54,7 +52,7 @@ export default function NewPage() {
         <CardContent>
           {/* Page content */}
           <p>Workflow status: {workflowStatus?.status}</p>
-        </CardContent>
+       CardContent>
       </Card>
     </div>
   );
@@ -69,7 +67,7 @@ import NewPage from '@/pages/NewPage';
 <Route path="/new-page" element={<NewPage />} />
 ```
 
-3. **Update navigation** in `src/components/page/navbar.tsx` (import icon from lucide-react):
+3. **Update navigation** in `src/components/layout/navbar.tsx` (import icon from lucide-react):
 ```tsx
 import { Settings } from 'lucide-react';
 
@@ -81,9 +79,9 @@ const navigation = [
 
 ### 2. Using BlueCopa API Hooks
 
-Install @bluecopa/core if not present: `npm install @bluecopa/core`
+Install @bluecopa/react if not present: `npm install @bluecopa/react`
 
-Use the pre-configured hooks from `@bluecopa/core`:
+Use the pre-configured hooks from `@bluecopa/react`:
 ```tsx
 import { useGetFileUrlByFileId, useGetTableById, useGetWorkflowInstanceStatusById } from '@bluecopa/core';
 
@@ -201,7 +199,7 @@ function ChartComponent({ data }: { data: ChartData[] }) {
 1. Create component in `src/components/` (e.g., NewCard.tsx)
 2. Use Card component wrapper from ui/
 3. Include loading and error states with TanStack Query
-4. Use @bluecopa/core hooks for data (e.g., useGetTableById)
+4. Use @bluecopa/react hooks for data (e.g., useGetTableById)
 
 ### Creating Forms
 1. Use Radix UI form components (add via shadcn-ui: `npx shadcn-ui@latest add form`)
@@ -213,7 +211,7 @@ function ChartComponent({ data }: { data: ChartData[] }) {
 1. For complex tables, install and use AG Grid (@bluecopa/aggrid)
 2. For simple tables, use HTML table with Tailwind styling
 3. Include sorting, filtering, and pagination as needed
-4. Integrate with @bluecopa/core for data
+4. Integrate with @bluecopa/react for data
 
 ### Implementing Search
 1. Add search state management with React state or form libraries
@@ -241,7 +239,7 @@ import { cn } from '@/lib/utils';
 ### TypeScript
 Always include proper TypeScript types:
 ```tsx
-import { FileUrlResponse, TableData, WorkflowStatus } from '@/types';
+import { FileUrlResponse, TableData, WorkflowStatus } from '@bluecopa/core/types';
 
 interface ComponentProps {
   data: TableData[];
@@ -269,7 +267,7 @@ if (!data) return <div className="p-4 text-gray-500">No data available</div>;
 - [Recharts Documentation](https://recharts.org)
 - [TanStack Query Documentation](https://tanstack.com/query/latest)
 - [Lucide React Icons](https://lucide.dev)
-- [BlueCopa Core Package](https://www.npmjs.com/package/@bluecopa/core)
+- [BlueCopa React Package](https://www.npmjs.com/package/@bluecopa/react)
 
 ## 🔄 Development Workflow
 

package/templates/latest/README.md

@@ -103,7 +103,7 @@ npx create-bluecopa-react-app my-dashboard
 src/
 ├── components/          # Reusable components
 │   ├── layout/         # Layout components (dashboard-header.tsx, dashboard-layout.tsx, sidebar.tsx)
-│   ├── page/           # Page-specific components (dashboard.tsx, navbar.tsx)
+│   ├── page/           # Page-specific components (dashboard.tsx)
 │   ├── tables/         # Table components (data-grid.tsx)
 │   └── ui/             # Base UI components (alert.tsx, avatar.tsx, badge.tsx, bluecopa-logo.tsx, button.tsx, card.tsx, dropdown-menu.tsx, input.tsx, label.tsx, select.tsx)
 ├── hooks/              # Custom React hooks
@@ -172,7 +172,7 @@ export default function App() {
 ```
 
 ### Adding Navigation Links
-Update the navigation in `src/components/page/navbar.tsx`:
+Update the navigation in `src/components/layout/navbar.tsx`:
 
 ```tsx
 const navigation = [

package/templates/latest/clean.sh

@@ -12,6 +12,7 @@ echo "✅ Removed dist directory"
 rm -rf node_modules/
 rm -f package-lock.json
 rm -f yarn.lock
+rm -f pnpm-lock.yaml
 echo "✅ Removed node_modules and lock files"
 
 # Remove environment files (keeping example)

package/templates/latest/setup.sh

@@ -42,10 +42,11 @@ else
 fi
 
 echo "🎨 Setting up Tailwind CSS..."
-npx tailwindcss init -p 2>/dev/null || echo "✅ Tailwind already configured"
-
-echo "🔍 Running type check..."
-npm run type-check
+if [ ! -f tailwind.config.js ] && [ ! -f tailwind.config.cjs ]; then
+  npx tailwindcss init -p
+else
+  echo "✅ Tailwind already configured"
+fi
 
 echo "✅ Setup complete!"
 echo ""

package/templates/latest/src/App.tsx

@@ -1,15 +1,19 @@
-import { Routes, Route } from 'react-router-dom'
+import { Routes, Route, Navigate } from 'react-router-dom'
+import { Suspense, lazy } from 'react'
 import QueryProvider from '@/providers/query-provider'
 import Home from '@/pages/Home'
-import Dashboard from '@/pages/Dashboard'
+const Dashboard = lazy(() => import('@/pages/Dashboard'))
 
 export default function App() {
   return (
     <QueryProvider>
-      <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path="/dashboard" element={<Dashboard />} />
-      </Routes>
+      <Suspense fallback={<div className="p-4 text-sm text-muted-foreground">Loading…</div>}>
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/dashboard" element={<Dashboard />} />
+          <Route path="*" element={<Navigate to="/" replace />} />
+        </Routes>
+      </Suspense>
     </QueryProvider>
   )
-}
+}

package/templates/latest/src/components/charts/AreaChart.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { 
+  ResponsiveContainer,
+  AreaChart as RechartsAreaChart,
+  Area,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend
+} from 'recharts';
+
+interface AreaChartProps {
+  data: any[];
+  index: string;
+  categories: string[];
+  colors?: string[];
+  className?: string;
+  valueFormatter?: (value: any) => any;
+  showLegend?: boolean;
+  showGridLines?: boolean;
+  showXAxis?: boolean;
+  showYAxis?: boolean;
+  yAxisWidth?: number;
+}
+
+export const AreaChart: React.FC<AreaChartProps> = ({ 
+  data, 
+  index, 
+  categories, 
+  colors = ['#3B82F6'], 
+  className = "h-80",
+  valueFormatter,
+  showLegend = true,
+  showGridLines = true,
+  showXAxis = true,
+  showYAxis = true,
+  yAxisWidth
+}) => {
+  const colorMap: { [key: string]: string } = {
+    blue: '#3B82F6',
+    emerald: '#10B981',
+    violet: '#8B5CF6',
+    rose: '#F43F5E',
+    amber: '#F59E0B',
+    cyan: '#06B6D4',
+    slate: '#64748B',
+    indigo: '#6366F1'
+  };
+
+  const getColor = (color: string, index: number) => {
+    return colorMap[color] || colors[index] || '#3B82F6';
+  };
+
+  return (
+    <div className={className}>
+      <ResponsiveContainer width="100%" height="100%">
+        <RechartsAreaChart data={data} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
+          {showGridLines && <CartesianGrid strokeDasharray="3 3" />}
+          {showXAxis && <XAxis dataKey={index} />}
+          {showYAxis && <YAxis width={yAxisWidth || 60} />}
+          <Tooltip 
+            formatter={(value: any) => valueFormatter ? valueFormatter(value) : value}
+          />
+          {showLegend && <Legend />}
+          {categories?.map((category: string, idx: number) => (
+            <Area
+              key={category}
+              type="monotone"
+              dataKey={category}
+              stroke={getColor(colors[idx], idx)}
+              fill={getColor(colors[idx], idx)}
+              fillOpacity={0.3}
+            />
+          ))}
+        </RechartsAreaChart>
+      </ResponsiveContainer>
+    </div>
+  );
+};

package/templates/latest/src/components/charts/DonutChart.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { 
+  ResponsiveContainer,
+  PieChart,
+  Pie,
+  Cell,
+  Tooltip,
+  Legend
+} from 'recharts';
+
+interface DonutChartProps {
+  data: any[];
+  category: string;
+  index: string;
+  colors?: string[];
+  className?: string;
+  valueFormatter?: (value: any) => any;
+  variant?: "donut" | "pie";
+}
+
+export const DonutChart: React.FC<DonutChartProps> = ({ 
+  data, 
+  category, 
+  index, 
+  colors = ['#3B82F6'], 
+  className = "h-64",
+  valueFormatter,
+  variant = "donut"
+}) => {
+  const colorMap: { [key: string]: string } = {
+    blue: '#3B82F6',
+    emerald: '#10B981',
+    violet: '#8B5CF6',
+    rose: '#F43F5E',
+    amber: '#F59E0B',
+    cyan: '#06B6D4',
+    slate: '#64748B',
+    indigo: '#6366F1'
+  };
+
+  const getColor = (color: string, index: number) => {
+    return colorMap[color] || colors[index] || '#3B82F6';
+  };
+
+  const COLORS = colors.map((color: string, idx: number) => getColor(color, idx));
+
+  return (
+    <div className={className}>
+      <ResponsiveContainer width="100%" height="100%">
+        <PieChart>
+          <Pie
+            data={data}
+            cx="50%"
+            cy="50%"
+            innerRadius={variant === "donut" ? 60 : 0}
+            outerRadius={80}
+            paddingAngle={5}
+            dataKey={category}
+            nameKey={index}
+          >
+            {data.map((_entry: any, index: number) => (
+              <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+            ))}
+          </Pie>
+          <Tooltip 
+            formatter={(value: any) => valueFormatter ? valueFormatter(value) : value}
+          />
+          <Legend />
+        </PieChart>
+      </ResponsiveContainer>
+    </div>
+  );
+};

package/templates/latest/src/components/charts/SparkAreaChart.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { 
+  ResponsiveContainer,
+  AreaChart as RechartsAreaChart,
+  Area
+} from 'recharts';
+
+interface SparkAreaChartProps {
+  data: any[];
+  categories: string[];
+  colors?: string[];
+  className?: string;
+}
+
+export const SparkAreaChart: React.FC<SparkAreaChartProps> = ({ 
+  data, 
+  categories, 
+  colors = ['#3B82F6'], 
+  className = "h-10"
+}) => {
+  const colorMap: { [key: string]: string } = {
+    blue: '#3B82F6',
+    emerald: '#10B981',
+    violet: '#8B5CF6',
+    rose: '#F43F5E',
+    amber: '#F59E0B',
+    cyan: '#06B6D4'
+  };
+
+  const getColor = (color: string, index: number) => {
+    return colorMap[color] || colors[index] || '#3B82F6';
+  };
+
+  return (
+    <div className={className}>
+      <ResponsiveContainer width="100%" height="100%">
+        <RechartsAreaChart data={data} margin={{ top: 0, right: 0, left: 0, bottom: 0 }}>
+          {categories?.map((category: string, idx: number) => (
+            <Area
+              key={category}
+              type="monotone"
+              dataKey={category}
+              stroke={getColor(colors[idx], idx)}
+              fill={getColor(colors[idx], idx)}
+              fillOpacity={0.6}
+            />
+          ))}
+        </RechartsAreaChart>
+      </ResponsiveContainer>
+    </div>
+  );
+};

package/templates/latest/src/components/layout/dashboard-header.tsx

@@ -87,7 +87,7 @@ export default function DashboardHeader({ title, subtitle }: DashboardHeaderProp
           </div>
 
           {/* Notifications */}
-          <Button variant="ghost" size="sm" className="relative">
+          <Button variant="ghost" size="sm" className="relative" aria-label="Open notifications, 3 unread">
             <Bell className="h-5 w-5" />
             <span className="absolute -top-1 -right-1 h-4 w-4 bg-red-500 text-white text-xs rounded-full flex items-center justify-center">
               3

package/templates/latest/src/components/layout/dashboard-layout.tsx

@@ -1,29 +1,37 @@
-import { ReactNode } from 'react'
-import Sidebar from './sidebar'
-import DashboardHeader from './dashboard-header'
+import { ReactNode } from "react";
+import Sidebar from "./sidebar";
+import DashboardHeader from "./dashboard-header";
 
 interface DashboardLayoutProps {
-  children: ReactNode
-  title?: string
-  subtitle?: string
+  children: ReactNode;
+  title?: string;
+  subtitle?: string;
 }
 
-export default function DashboardLayout({ children, title, subtitle }: DashboardLayoutProps) {
+export default function DashboardLayout({
+  children,
+  title,
+  subtitle,
+}: DashboardLayoutProps) {
   return (
     <div className="flex h-screen bg-gray-50">
       {/* Sidebar */}
       <Sidebar />
-      
+
       {/* Main content area */}
       <div className="flex-1 flex flex-col overflow-hidden">
         {/* Header */}
         <DashboardHeader title={title} subtitle={subtitle} />
-        
+
         {/* Main content */}
-        <main className="flex-1 overflow-y-auto p-6">
+        <main
+          id="main-content"
+          role="main"
+          className="flex-1 overflow-y-auto p-6"
+        >
           {children}
         </main>
       </div>
     </div>
-  )
+  );
 }

package/templates/latest/src/components/{page → layout}/navbar.tsx

@@ -60,6 +60,8 @@ export default function Navbar() {
               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)}
+              aria-label={mobileMenuOpen ? "Close menu" : "Open menu"}
+              aria-expanded={mobileMenuOpen}
             >
               {mobileMenuOpen ? (
                 <X className="h-6 w-6" />

package/templates/latest/src/components/layout/sidebar.tsx

@@ -22,7 +22,7 @@ export default function Sidebar() {
       </div>
 
       {/* Navigation */}
-      <nav className="flex-1 space-y-1 px-3 py-4">
+      <nav className="flex-1 space-y-1 px-3 py-4" aria-label="Main navigation">
         {navigation.map((item) => {
           const isActive = location.pathname === item.href;
           return (
@@ -35,6 +35,7 @@ export default function Sidebar() {
                   ? "bg-blue-50 text-blue-700 border-r-2 border-blue-600"
                   : "text-gray-700 hover:bg-gray-50 hover:text-gray-900"
               )}
+              aria-current={isActive ? "page" : undefined}
             >
               <item.icon
                 className={cn(

package/templates/latest/src/components/page/dashboard/DashboardMetrics.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import { Card, CardContent, CardTitle } from '@/components/ui/card';
+import { ArrowUpRight, ArrowDownRight } from 'lucide-react';
+import { SparkAreaChart } from '@/components/charts/SparkAreaChart';
+
+interface Metric {
+  title: string;
+  value: string;
+  change: string;
+  trend: 'up' | 'down';
+  icon: string;
+  color: string;
+}
+
+interface DashboardMetricsProps {
+  ecommerceMetrics: Metric[];
+  monthlyRevenueData: any[];
+}
+
+const iconMap: { [key: string]: React.ElementType } = {
+  DollarSign: ({ className }: { className?: string }) => (
+    <svg xmlns="http://www.w3.org/2000/svg" className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <line x1="12" y1="1" x2="12" y2="23"></line>
+      <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
+    </svg>
+  ),
+  ShoppingCart: ({ className }: { className?: string }) => (
+    <svg xmlns="http://www.w3.org/2000/svg" className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <circle cx="9" cy="21" r="1"></circle>
+      <circle cx="20" cy="21" r="1"></circle>
+      <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
+    </svg>
+  ),
+  TrendingUp: ({ className }: { className?: string }) => (
+    <svg xmlns="http://www.w3.org/2000/svg" className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline>
+      <polyline points="17 6 23 6 23 12"></polyline>
+    </svg>
+  ),
+  Users: ({ className }: { className?: string }) => (
+    <svg xmlns="http://www.w3.org/2000/svg" className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
+      <circle cx="9" cy="7" r="4"></circle>
+      <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
+      <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
+    </svg>
+  )
+};
+
+export const DashboardMetrics: React.FC<DashboardMetricsProps> = ({
+  ecommerceMetrics,
+  monthlyRevenueData
+}) => {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+      {ecommerceMetrics.map((metric, index) => {
+        const IconComponent = iconMap[metric.icon];
+        return (
+          <Card key={index}>
+            <CardContent className="pt-6">
+              <div className="flex items-center justify-between space-y-0 pb-2">
+                <CardTitle className="text-sm font-medium text-gray-600">
+                  {metric.title}
+                </CardTitle>
+                {IconComponent && <IconComponent className={`h-4 w-4 ${metric.color}`} />}
+              </div>
+              <div className="flex items-center space-x-2">
+                <div className="text-2xl font-bold">{metric.value}</div>
+                <div className={`flex items-center text-sm ${
+                  metric.trend === 'up' ? 'text-green-600' : 'text-red-600'
+                }`}>
+                  {metric.trend === 'up' ? (
+                    <ArrowUpRight className="h-4 w-4" />
+                  ) : (
+                    <ArrowDownRight className="h-4 w-4" />
+                  )}
+                  {metric.change}
+                </div>
+              </div>
+              {/* Mini trend chart */}
+              {monthlyRevenueData.length > 0 && (
+                <div className="mt-4">
+                  <SparkAreaChart
+                    data={monthlyRevenueData.slice(-6)} // Last 6 months
+                    categories={[index === 0 ? "revenue" : "orders"]}
+                    colors={[index === 0 ? "emerald" : index === 1 ? "blue" : index === 2 ? "violet" : "amber"]}
+                    className="h-10 w-full"
+                  />
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        );
+      })}
+    </div>
+  );
+};