create-bluecopa-react-app 1.0.0 → 1.0.2

package/templates/latest/README.md

@@ -0,0 +1,281 @@
+# 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.
+
+## 🎨 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
+
+> **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
+- 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>