create-bluecopa-react-app 1.0.0 → 1.0.1

package/README.md

@@ -4,13 +4,13 @@ A CLI tool to bootstrap modern React applications for BlueCopa with built-in UI
 
 ## Features
 
-- 🚀 **Modern React Stack**: React 18, TypeScript, Vite
-- 📊 **Data Visualization**: Integration ready for charts and analytics
-- 🎨 **UI Components**: shadcn/ui with Radix UI primitives  
+- 🚀 **Modern React Stack**: React 18, TypeScript, Next.js 14
+- 📊 **Data Visualization**: Recharts integration for charts and analytics
+- 🎨 **UI Components**: Radix UI primitives with custom styling
 - 📡 **BlueCopa React Components**: Pre-configured @bluecopa/react package
 - 🎯 **Type Safety**: Full TypeScript support
 - 📱 **Responsive Design**: Tailwind CSS with mobile-first approach
-- 🛠️ **Development Tools**: ESLint, TypeScript checking, and modern build tools
+- 🛠️ **Development Tools**: ESLint, TypeScript checking, and Next.js build optimization
 
 ## Quick Start
 
@@ -36,15 +36,16 @@ npm run dev
 
 ## Template Included
 
-### BlueCopa Basic Template
+### BlueCopa Next.js Template
 
 A foundational template that provides:
 
-- **Modern React Setup**: React 18 with TypeScript and Vite
+- **Modern Next.js Setup**: Next.js 14 with React 18, TypeScript and App Router
 - **BlueCopa Components**: Pre-configured @bluecopa/react component library
-- **UI Foundation**: Complete shadcn/ui component suite with Radix UI primitives
+- **UI Foundation**: Radix UI primitives with custom styling system
+- **Data Visualization**: Recharts for charts and analytics
 - **Styling System**: Tailwind CSS with BlueCopa design tokens
-- **Development Setup**: ESLint, TypeScript configuration, and build optimization
+- **Development Setup**: ESLint, TypeScript configuration, and Next.js optimization
 - **Environment Configuration**: Ready-to-use environment variable setup
 
 #### Key Dependencies Included
@@ -52,17 +53,21 @@ A foundational template that provides:
 ```typescript
 // Core BlueCopa and React ecosystem
 "@bluecopa/react": "^0.1.3"
-"react": "^18.2.0"
-"typescript": "^5.0.2"
+"react": "^18.3.0"
+"next": "^14.2.0"
+"typescript": "^5.6.0"
 
 // UI and Styling
 "@radix-ui/*": "Latest versions"
-"tailwindcss": "^3.3.0"
-"lucide-react": "^0.263.1"
+"tailwindcss": "^3.4.0"
+"lucide-react": "^0.445.0"
+
+// Data Visualization
+"recharts": "^2.12.0"
 
 // Development and Build
-"vite": "^4.4.5"
-"@vitejs/plugin-react": "^4.0.3"
+"eslint": "^8.57.0"
+"eslint-config-next": "^14.2.0"
 ```
 
 ## Project Structure
@@ -72,19 +77,26 @@ The generated project follows a clean, scalable structure:
 ```text
 my-bluecopa-app/
 ├── src/
+│   ├── app/                 # Next.js App Router pages
+│   │   ├── layout.tsx       # Root layout component
+│   │   ├── page.tsx         # Home page component
+│   │   └── globals.css      # Global styles and Tailwind imports
 │   ├── components/
-│   │   └── ui/              # shadcn/ui components
+│   │   ├── ui/              # Reusable UI components
+│   │   ├── charts/          # Chart components using Recharts
+│   │   └── layouts/         # Layout components
 │   ├── lib/                 # Utilities and helpers
-│   ├── App.tsx              # Main application component
-│   ├── main.tsx             # Application entry point
-│   ├── index.css            # Global styles and Tailwind imports
-│   └── vite-env.d.ts        # Vite type declarations
+│   │   ├── utils.ts         # Common utility functions
+│   │   └── cn.ts            # Tailwind class name utilities
+│   └── types/               # TypeScript type definitions
 ├── public/                  # Static assets
+├── .env                     # Environment variables
 ├── .env.example             # Environment variables template
 ├── package.json             # Dependencies and scripts
+├── next.config.js           # Next.js configuration
 ├── tailwind.config.js       # Tailwind CSS configuration
 ├── tsconfig.json            # TypeScript configuration
-├── vite.config.ts           # Vite build configuration
+├── postcss.config.js        # PostCSS configuration
 └── README.md                # Project documentation
 ```
 
@@ -108,7 +120,7 @@ function MyComponent() {
 
 ### Adding UI Components
 
-Use the included shadcn/ui components for consistent styling:
+Use the included Radix UI components with Tailwind styling:
 
 ```typescript
 import { Button } from '@/components/ui/button';
@@ -128,11 +140,40 @@ function Dashboard() {
 }
 ```
 
+### Adding Charts and Data Visualization
+
+Use Recharts for data visualization:
+
+```typescript
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
+
+const data = [
+  { name: 'Jan', value: 400 },
+  { name: 'Feb', value: 300 },
+  { name: 'Mar', value: 600 },
+];
+
+function ChartComponent() {
+  return (
+    <ResponsiveContainer width="100%" height={300}>
+      <LineChart data={data}>
+        <CartesianGrid strokeDasharray="3 3" />
+        <XAxis dataKey="name" />
+        <YAxis />
+        <Tooltip />
+        <Line type="monotone" dataKey="value" stroke="#8884d8" />
+      </LineChart>
+    </ResponsiveContainer>
+  );
+}
+```
+
 ### Styling and Theming
 
 - Modify `tailwind.config.js` for custom design tokens
-- Update CSS variables in `src/index.css` for theme customization
-- All shadcn/ui components support dark/light mode automatically
+- Update CSS variables in `src/app/globals.css` for theme customization
+- All components support consistent styling through Tailwind utilities
+- Use the `cn()` utility function for conditional class names
 
 ## Environment Configuration
 
@@ -144,19 +185,19 @@ cp .env.example .env
 
 ## Available Scripts
 
-- `npm run dev` - Start development server with hot reload
-- `npm run build` - Build for production (TypeScript compilation + Vite build)
-- `npm run preview` - Preview production build locally
+- `npm run dev` - Start Next.js development server with hot reload
+- `npm run build` - Build for production (Next.js optimization)
+- `npm run start` - Start production server
 - `npm run lint` - Run ESLint for code quality
 - `npm run type-check` - Run TypeScript type checking without emitting files
 
 ## Technologies Used
 
 - **React 18** - Modern React with concurrent features
+- **Next.js 14** - Full-stack React framework with App Router
 - **TypeScript** - Full type safety and developer experience
-- **Vite** - Fast build tool and development server
 - **@bluecopa/react** - BlueCopa-specific React components
-- **shadcn/ui** - High-quality, accessible component library
 - **Radix UI** - Unstyled, accessible UI primitives
+- **Recharts** - Composable charting library for React
 - **Tailwind CSS** - Utility-first CSS framework
 - **Lucide React** - Beautiful, customizable icons

package/bin/create-bluecopa-react-app.js

@@ -123,7 +123,7 @@ async function createApp(projectName, options) {
 }
 
 async function createProjectStructure(targetDir, appName, options) {
-  const templateDir = path.join(__dirname, '../templates/basic');
+  const templateDir = path.join(__dirname, '../templates/latest');
   
   // Create base directory
   await fs.ensureDir(targetDir);

package/package.json

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

package/templates/latest/.env.example

@@ -0,0 +1,14 @@
+# Bluecopa API Configuration
+# Copy this file to .env.local and update with your actual values
+
+# Bluecopa API Authentication
+# Get this from your Bluecopa dashboard -> Settings -> API Tokens
+VITE_BLUECOPA_API_TOKEN=your-bluecopa-api-token-here
+
+# Bluecopa API Base URL
+# Use the develop environment for testing
+VITE_BLUECOPA_API_URL=https://develop.bluecopa.com/api/v1
+
+# Bluecopa Workspace ID
+# Get this from your Bluecopa dashboard workspace settings
+VITE_BLUECOPA_WORKSPACE_ID=your-workspace-id-here

package/templates/latest/.eslintrc.cjs

@@ -0,0 +1,42 @@
+module.exports = {
+  root: true,
+  env: { 
+    browser: true, 
+    es2020: true,
+    node: true 
+  },
+  extends: [
+    'eslint:recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+    'no-unused-vars': 'off', // Turned off for TypeScript
+    'no-undef': 'off', // TypeScript handles this
+  },
+  overrides: [
+    {
+      files: ['*.ts', '*.tsx'],
+      parser: '@typescript-eslint/parser',
+      plugins: ['@typescript-eslint'],
+      rules: {
+        'no-unused-vars': 'off',
+        // Basic TypeScript rules without extending the recommended config
+        '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
+        '@typescript-eslint/no-explicit-any': 'warn',
+        '@typescript-eslint/no-inferrable-types': 'warn',
+      },
+    },
+  ],
+}

package/templates/latest/README.md

@@ -0,0 +1,264 @@
+# Bluecopa React Router Boilerplate 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.
+
+## 🎨 Design System
+
+This template now uses the latest Bluecopa design system with:
+- **Navy Blue Header**: Uses the official Bluecopa navy color (`#041e42`) for headers and navigation
+- **Modern Card Layout**: Clean, borderless cards with subtle shadows
+- **Consistent Spacing**: Improved spacing and layout following the latest app design
+- **User Profile Integration**: Modern user dropdown with avatar and profile information
+- **Search & Notifications**: Built-in search bar and notification system
+- **Responsive Design**: Mobile-first approach with proper responsive breakpoints
+
+## 🚀 Quick Start
+
+### Prerequisites
+- Node.js 18+ 
+- npm or pnpm
+- Access to Bluecopa workspace
+
+### Installation
+
+1. **Clone or copy the template**:
+   ```bash
+   # If using as part of the blui monorepo
+   cd packages/boilerplate/react/templates/react-router
+   
+   # Or copy the template to your project location
+   cp -r packages/boilerplate/react/templates/react-router my-bluecopa-app
+   cd my-bluecopa-app
+   ```
+
+2. **Install dependencies**:
+   ```bash
+   # Recommended: Use pnpm (consistent with monorepo)
+   pnpm install
+   
+   # Alternative: Use npm
+   npm install
+   ```
+
+3. **Set up environment variables**:
+   ```bash
+   # Automated setup (recommended)
+   ./setup.sh
+   
+   # Manual setup
+   cp .env.example .env.local
+   # Edit .env.local with your Bluecopa credentials from dashboard -> Settings -> API Tokens
+   ```
+
+4. **Start development server**:
+   ```bash
+   npm run dev
+   ```
+
+5. **Open your browser**: Navigate to [http://localhost:3000](http://localhost:3000)
+
+## ✨ Features
+
+### 🎯 Core Capabilities
+- **React 18** with TypeScript
+- **React Router v6** for client-side routing
+- **Vite** for fast development and building
+- **@bluecopa/react** - Complete hook library for Bluecopa APIs
+- **TailwindCSS** - Utility-first CSS framework
+- **Radix UI** - Accessible component primitives
+- **Lucide React** - Beautiful icon library
+- **Recharts** - Composable charting library
+
+### 🏗️ Architecture
+- **Component-based** architecture with reusable UI components
+- **Custom hooks** for API integration and data management
+- **TypeScript** for type safety and better developer experience
+- **Responsive design** that works on all devices
+- **Modern React patterns** with functional components and hooks
+
+### 📊 Bluecopa Integration
+- **Pre-configured hooks** for user data, metrics, and datasets
+- **Real-time data** fetching with TanStack Query
+- **Error handling** and loading states
+- **Authentication** integration
+- **Type-safe** API responses
+
+### 🎨 UI Components
+- **Card layouts** for dashboard sections
+- **Data tables** for displaying datasets
+- **Charts and graphs** for data visualization
+- **Form components** with validation
+- **Navigation** components with routing
+- **Responsive grid** layouts
+
+## 📁 Project Structure
+
+```
+src/
+├── components/          # Reusable UI components
+│   ├── ui/             # Base UI components (buttons, cards, etc.)
+│   └── navbar.tsx      # Navigation component
+├── hooks/              # Custom React hooks
+│   └── use-api.ts      # Bluecopa API hooks
+├── lib/                # Utility functions
+│   └── utils.ts        # Helper functions
+├── pages/              # Route components
+│   ├── Home.tsx        # Home page
+│   └── Dashboard.tsx   # Dashboard page
+├── providers/          # React context providers
+│   └── query-provider.tsx  # TanStack Query provider
+├── types/              # TypeScript type definitions
+├── App.tsx             # Main app component with routing
+├── main.tsx            # Application entry point
+└── index.css           # Global styles
+```
+
+## 🔧 Configuration
+
+### Environment Variables
+Create a `.env.local` file in the root directory:
+
+```bash
+# Bluecopa API Configuration
+VITE_BLUECOPA_API_TOKEN=your-bluecopa-api-token
+VITE_BLUECOPA_API_URL=https://develop.bluecopa.com/api/v1
+VITE_BLUECOPA_WORKSPACE_ID=your-workspace-id
+```
+
+### Getting Your Credentials
+1. Log in to your Bluecopa workspace
+2. Navigate to Settings > API Keys
+3. Generate or copy your API token
+4. Note your workspace ID from the URL or settings
+
+## 🛠️ Development
+
+### Available Scripts
+- `npm run dev` - Start development server
+- `npm run build` - Build for production
+- `npm run preview` - Preview production build
+- `npm run lint` - Run ESLint
+- `npm run type-check` - Run TypeScript compiler
+
+### Adding New Routes
+Add new routes in `src/App.tsx`:
+
+```tsx
+import { Routes, Route } from 'react-router-dom'
+import NewPage from '@/pages/NewPage'
+
+export default function App() {
+  return (
+    <QueryProvider>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/dashboard" element={<Dashboard />} />
+        <Route path="/new-page" element={<NewPage />} />
+      </Routes>
+    </QueryProvider>
+  )
+}
+```
+
+### Adding Navigation Links
+Update the navigation in `src/components/navbar.tsx`:
+
+```tsx
+const navigation = [
+  { name: 'Home', href: '/', icon: Home },
+  { name: 'Dashboard Overview', href: '/dashboard', icon: LayoutDashboard },
+  { name: 'New Page', href: '/new-page', icon: Settings },
+]
+```
+
+## 📚 API Integration
+
+This template includes pre-configured hooks for common Bluecopa API operations:
+
+```tsx
+import { useUserData, useMetricDataDemo, useDatasetDataDemo } from '@/hooks/use-api'
+
+function MyComponent() {
+  const { data: userData, isLoading, error } = useUserData()
+  const { data: metrics } = useMetricDataDemo()
+  const { data: datasets } = useDatasetDataDemo()
+  
+  if (isLoading) return <div>Loading...</div>
+  if (error) return <div>Error: {error.message}</div>
+  
+  return <div>Welcome, {userData?.user?.firstName}!</div>
+}
+```
+
+## 🎨 Styling
+
+The template uses TailwindCSS for styling with a custom design system:
+
+- **Color palette**: Bluecopa brand colors
+- **Typography**: Inter font family
+- **Spacing**: Consistent spacing scale
+- **Components**: Pre-built component styles
+
+### Customizing Colors
+Edit `tailwind.config.js` to modify the color scheme:
+
+```js
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        bluecopa: {
+          50: '#eff6ff',
+          // ... other shades
+          900: '#1e3a8a',
+        },
+      },
+    },
+  },
+}
+```
+
+## 🚀 Deployment
+
+### Build for Production
+```bash
+npm run build
+```
+
+The built files will be in the `dist/` directory.
+
+### Deploy to Vercel
+1. Push your code to GitHub
+2. Connect your repository to Vercel
+3. Set environment variables in Vercel dashboard
+4. Deploy
+
+### Deploy to Netlify
+1. Build the project locally
+2. Upload the `dist/` folder to Netlify
+3. Set environment variables in Netlify dashboard
+
+## 🔒 Environment Security
+
+- Never commit `.env.local` files
+- Use environment variables for all sensitive data
+- Rotate API tokens regularly
+- Use different tokens for development and production
+
+## 🤝 Contributing
+
+1. Fork the repository
+2. Create a feature branch
+3. Make your changes
+4. Add tests if applicable
+5. Submit a pull request
+
+## 📄 License
+
+This template is part of the Bluecopa ecosystem and follows the project's licensing terms.
+
+## 🆘 Support
+
+- Check the [Bluecopa documentation](https://docs.bluecopa.com)
+- Review the [React Router documentation](https://reactrouter.com)
+- Open issues in the project repository

package/templates/latest/clean.sh

@@ -0,0 +1,39 @@
+#!/bin/bash
+
+# Development helper script for react-router template
+
+echo "🧹 Cleaning react-router template..."
+
+# Remove build artifacts
+rm -rf dist/
+echo "✅ Removed dist directory"
+
+# Remove node_modules and lock files
+rm -rf node_modules/
+rm -f package-lock.json
+rm -f yarn.lock
+echo "✅ Removed node_modules and lock files"
+
+# Remove environment files (keeping example)
+rm -f .env.local
+echo "✅ Removed .env.local"
+
+# Optionally reinstall dependencies
+if [ "$1" = "--install" ]; then
+    echo "📦 Reinstalling dependencies..."
+    if command -v pnpm &> /dev/null; then
+        pnpm install
+    else
+        npm install
+    fi
+    echo "✅ Dependencies reinstalled"
+fi
+
+echo "🎉 Cleanup complete!"
+echo ""
+echo "To reinstall dependencies:"
+echo "  pnpm install  # recommended"
+echo "  npm install   # alternative"
+echo ""
+echo "To set up environment:"
+echo "  ./setup.sh"

package/templates/latest/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Bluecopa - AI-powered Finance Automation</title>
+    <meta name="description" content="AI-powered close automation for modern finance teams. Streamline your order-to-cash, procure-to-pay, and record-to-report processes." />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>