create-bluecopa-react-app 1.0.1 → 1.0.3

package/templates/latest/README.md

@@ -1,6 +1,6 @@
-# Bluecopa React Router Boilerplate Template
+# BlueCopa React App Template
 
-A production-ready React template with React Router for building modern Bluecopa dashboard applications with integrated React hooks, beautiful UI components, and comprehensive data visualization capabilities.
+A production-ready React template with React Router for building modern BlueCopa dashboard applications with integrated React hooks, beautiful UI components, and comprehensive data visualization capabilities.
 
 ## 🎨 Design System
 
@@ -14,6 +14,23 @@ This template now uses the latest Bluecopa design system with:
 
 ## 🚀 Quick Start
 
+> **Note**: This template is typically generated using the `create-bluecopa-react-app` CLI tool. If you're using this template directly, follow the manual setup instructions below.
+
+### Using the CLI Tool (Recommended)
+
+```bash
+# Install globally
+npm install -g create-bluecopa-react-app
+
+# Create new app
+create-bluecopa-react-app my-dashboard
+
+# Or use npx
+npx create-bluecopa-react-app my-dashboard
+```
+
+### Manual Setup
+
 ### Prerequisites
 - Node.js 18+ 
 - npm or pnpm
@@ -24,10 +41,10 @@ This template now uses the latest Bluecopa design system with:
 1. **Clone or copy the template**:
    ```bash
    # If using as part of the blui monorepo
-   cd packages/boilerplate/react/templates/react-router
+   cd packages/boilerplate/react/templates/latest
    
    # Or copy the template to your project location
-   cp -r packages/boilerplate/react/templates/react-router my-bluecopa-app
+   cp -r packages/boilerplate/react/templates/latest my-bluecopa-app
    cd my-bluecopa-app
    ```
 
@@ -95,9 +112,11 @@ This template now uses the latest Bluecopa design system with:
 
 ```
 src/
-├── components/          # Reusable UI components
-│   ├── ui/             # Base UI components (buttons, cards, etc.)
-│   └── navbar.tsx      # Navigation component
+├── components/          # Reusable components
+│   ├── layout/         # Layout components (dashboard-header.tsx, dashboard-layout.tsx, sidebar.tsx)
+│   ├── page/           # Page-specific components (dashboard.tsx, navbar.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
 │   └── use-api.ts      # Bluecopa API hooks
 ├── lib/                # Utility functions
@@ -108,9 +127,12 @@ src/
 ├── providers/          # React context providers
 │   └── query-provider.tsx  # TanStack Query provider
 ├── types/              # TypeScript type definitions
+│   └── api.ts          # API type definitions
 ├── App.tsx             # Main app component with routing
+├── index.css           # Global styles
 ├── main.tsx            # Application entry point
-└── index.css           # Global styles
+├── single-spa.tsx      # Single-spa configuration
+└── vite-env.d.ts       # Vite environment types
 ```
 
 ## 🔧 Configuration
@@ -161,7 +183,7 @@ export default function App() {
 ```
 
 ### Adding Navigation Links
-Update the navigation in `src/components/navbar.tsx`:
+Update the navigation in `src/components/page/navbar.tsx`:
 
 ```tsx
 const navigation = [