create-bluecopa-react-app 1.0.4 → 1.0.6

package/templates/latest/README.md

@@ -1,263 +1,199 @@
-# BlueCopa React App Template
+# BlueCopa React App with shadcn/ui
 
-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 modern, production-ready template for building full-stack React applications using React Router v7 and shadcn/ui components.
 
-## 🎨 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 and consistent padding
-- **Consistent Spacing**: Improved spacing and layout following the latest app design system
-- **User Profile Integration**: Modern user dropdown with avatar, profile information, and logout
-- **Search & Notifications**: Built-in search bar and notification system with Radix UI
-- **Responsive Design**: Mobile-first approach with proper responsive breakpoints and device testing
+## Features
 
-## 🚀 Quick Start
+- 🚀 **React Router v7** - Latest React Router with server-side rendering
+- ⚡️ **Hot Module Replacement (HMR)** - Lightning-fast development experience
+- 📦 **Asset bundling and optimization** - Vite-powered build system
+- 🔄 **Data loading and mutations** - Built-in data fetching patterns
+- 🔒 **TypeScript by default** - Full type safety and developer experience
+- 🎨 **shadcn/ui Components** - Beautiful, accessible UI components built on Radix UI
+- 🎉 **TailwindCSS v4** - Latest Tailwind with CSS variables and modern features
+- 📊 **Data Visualization** - Recharts integration for charts and analytics
+- 🗂️ **Data Tables** - TanStack Table with sorting, filtering, and pagination
+- 🎯 **Drag & Drop** - DND Kit integration for interactive interfaces
+- 📱 **Responsive Design** - Mobile-first approach with sidebar navigation
+- 🌙 **Dark Mode** - Built-in theme switching with next-themes
+- 🔗 **BlueCopa API integration** - Pre-configured with `@bluecopa/react` hooks
+- 📖 [React Router docs](https://reactrouter.com/)
+- 🎨 [shadcn/ui docs](https://ui.shadcn.com/)
 
-> **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.
+## Getting Started
 
-### Using the CLI Tool (Recommended)
+### Installation
+
+Install the dependencies:
 
 ```bash
-# Install globally
-npm install -g create-bluecopa-react-app
+npm install
+# or
+pnpm install
+```
 
-# Create new app
-create-bluecopa-react-app my-dashboard
+**Note:** The application includes TanStack Query integration through the `@bluecopa/react` package for data fetching and caching, along with shadcn/ui components for a modern UI experience.
 
-# Or use npx
-npx create-bluecopa-react-app my-dashboard
-```
+## Quick Start
 
-### Manual Setup
-
-### Prerequisites
-- Node.js 18+ 
-- npm or pnpm
-- Access to Bluecopa workspace
-
-
-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
+This template is designed to work both as a standalone application and as a microfrontend within the BlueCopa ecosystem. It includes:
 
-### 🏗️ 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
+- **Single-spa integration** for microfrontend architecture
+- **Module federation** support for dynamic imports
+- **BlueCopa API integration** with pre-configured hooks
+- **Production-ready** Docker configuration
 
+### Development
+
+Start the development server with HMR:
+
+```bash
+npm run dev
 ```
-src/
-├── 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
-│   └── 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
-│   └── api.ts          # API type definitions
-├── App.tsx             # Main app component with routing
-├── index.css           # Global styles
-├── main.tsx            # Application entry point
-├── single-spa.tsx      # Single-spa configuration
-└── vite-env.d.ts       # Vite environment types
-```
 
-## 🔧 Configuration
+Your application will be available at `http://localhost:8080`.
+
+## UI Components
+
+This template includes a comprehensive set of shadcn/ui components:
+
+### Layout Components
+- **Sidebar** - Collapsible navigation sidebar with mobile support
+- **Sheet** - Slide-out panels for mobile navigation
+- **Drawer** - Bottom drawer for mobile interactions
+
+### Form Components
+- **Button** - Multiple variants and sizes
+- **Input** - Text input with validation states
+- **Select** - Dropdown selection with search
+- **Checkbox** - Checkbox with indeterminate state
+- **Label** - Accessible form labels
+
+### Data Display
+- **Table** - Sortable, filterable data tables with TanStack Table
+- **Card** - Content containers with header, content, and footer
+- **Badge** - Status indicators and labels
+- **Avatar** - User profile images with fallbacks
+- **Skeleton** - Loading placeholders
+
+### Navigation
+- **Tabs** - Tabbed content organization
+- **Breadcrumb** - Navigation breadcrumbs
+- **Dropdown Menu** - Context menus and actions
+- **Tooltip** - Hover information
+
+### Feedback
+- **Sonner** - Toast notifications
+- **Separator** - Visual content dividers
+
+### Charts
+- **Interactive Charts** - Recharts integration with hover states
+- **Area Charts** - Time series data visualization
+
+### Bluecopa API Configuration
+
+This application integrates with the Bluecopa API using the `@bluecopa/react` package. To use the `useUser` hook for displaying logged-in user information, set up the following environment variables:
 
-### Environment Variables
-Create a `.env.local` file in the root directory:
+Create a `.env` 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
+VITE_BLUECOPA_API_URL=https://develop.bluecopa.com
+VITE_BLUECOPA_WORKSPACE_ID=your_workspace_id_here
+VITE_BLUECOPA_API_TOKEN=your_base64_encoded_token_here
 ```
 
-### 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>
-  )
-}
+**Note:** `VITE_BLUECOPA_API_TOKEN` should be a base64-encoded JSON string containing an `accessToken` field, for example:
+```json
+{"accessToken": "your_access_token_here"}
 ```
+encoded as base64.
 
-### Adding Navigation Links
-Update the navigation in `src/components/page/navbar.tsx`:
+If the API errors out or is not configured, the application will show "Set Environment" as the user name with email "setenv@email.com" as a fallback.
 
-```tsx
-const navigation = [
-  { name: 'Home', href: '/', icon: Home },
-  { name: 'Dashboard Overview', href: '/dashboard', icon: LayoutDashboard },
-  { name: 'New Page', href: '/new-page', icon: Settings },
-]
+## Building for Production
+
+Create a production build:
+
+```bash
+npm run build
 ```
 
-## 📚 API Integration
+## Deployment
 
-This template includes pre-configured hooks for common Bluecopa API operations:
+### Docker Deployment
 
-```tsx
-import { useUserData, useMetricDataDemo, useDatasetDataDemo } from '@/hooks/use-api'
+To build and run using Docker:
 
-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>
-}
+```bash
+docker build -t my-app .
+
+# Run the container
+docker run -p 3000:3000 my-app
 ```
 
-## 🎨 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',
-        },
-      },
-    },
-  },
-}
+The containerized application can be deployed to any platform that supports Docker, including:
+
+- AWS ECS
+- Google Cloud Run
+- Azure Container Apps
+- Digital Ocean App Platform
+- Fly.io
+- Railway
+
+### DIY Deployment
+
+If you're familiar with deploying Node applications, the built-in app server is production-ready.
+
+Make sure to deploy the output of `npm run build`
+
+```
+├── package.json
+├── package-lock.json (or pnpm-lock.yaml, or bun.lockb)
+├── build/
+│   ├── client/    # Static assets
+│   └── server/    # Server-side code
 ```
 
-## 🚀 Deployment & Production
+## Adding More Components
+
+This template uses shadcn/ui CLI for adding new components. To add additional components:
 
-### Build for Production
 ```bash
-npm run build
+# Install shadcn/ui CLI globally
+npm install -g shadcn-ui@latest
+
+# Add components
+npx shadcn-ui@latest add [component-name]
+
+# Examples
+npx shadcn-ui@latest add dialog
+npx shadcn-ui@latest add alert
+npx shadcn-ui@latest add toast
 ```
 
-The production-ready files will be output to the `dist/` directory with optimized bundling and minification.
+## Styling
 
-### Production Best Practices
-- Validate environment variables before building
-- Test workflow triggers in staging environment
-- Monitor bundle size with `npm run build --report`
-- Use version control for deployment artifacts
+This template comes with [Tailwind CSS v4](https://tailwindcss.com/) configured with:
+- CSS variables for theming
+- Dark mode support with next-themes
+- shadcn/ui design system
+- Custom BlueCopa color palette
+- Responsive design utilities
 
-### Deploy to Vercel
-1. Push your code to GitHub
-2. Connect your repository to Vercel
-3. Set environment variables in Vercel dashboard
-4. Deploy
+## Key Technologies
 
-### Deploy to Netlify
-1. Build the project locally
-2. Upload the `dist/` folder to Netlify
-3. Set environment variables in Netlify dashboard
+- **React 18** - Latest React with concurrent features
+- **React Router v7** - Modern routing with SSR support
+- **shadcn/ui** - Accessible component library built on Radix UI
+- **Tailwind CSS v4** - Utility-first CSS framework
+- **TanStack Table** - Headless table library for React
+- **Recharts** - Composable charting library
+- **DND Kit** - Drag and drop toolkit
+- **Lucide React** - Beautiful icon library
+- **TypeScript** - Type safety and developer experience
 
-## 🔒 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
+Built with ❤️ using React Router v7 and shadcn/ui.

package/templates/latest/app/app.css

@@ -0,0 +1,134 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme {
+  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
+html,
+body {
+  @apply bg-white dark:bg-gray-950;
+
+  @media (prefers-color-scheme: dark) {
+    color-scheme: dark;
+  }
+}
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+  --radius: 0.65rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.623 0.214 259.815);
+  --primary-foreground: oklch(0.97 0.014 254.604);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.623 0.214 259.815);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.623 0.214 259.815);
+  --sidebar-primary-foreground: oklch(0.97 0.014 254.604);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.623 0.214 259.815);
+}
+
+.dark {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.546 0.245 262.881);
+  --primary-foreground: oklch(0.379 0.146 265.522);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.488 0.243 264.376);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.546 0.245 262.881);
+  --sidebar-primary-foreground: oklch(0.379 0.146 265.522);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.488 0.243 264.376);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/templates/latest/app/app.tsx

@@ -0,0 +1,46 @@
+import { Suspense, useEffect, useState } from 'react'
+import { reactQuery, ReactQueryDevtools, copaSetConfig } from "@bluecopa/react";
+import RouteConfig from './routes';
+
+import './app.css'
+
+const { QueryClient, QueryClientProvider } = reactQuery;
+
+export default function App() {
+  const [queryClient] = useState(() => new QueryClient({
+    defaultOptions: {
+      queries: {
+        staleTime: 60 * 1000, // 1 minute
+        refetchOnWindowFocus: false,
+      },
+    },
+  }));
+
+  useEffect(() => {
+    // Configure Bluecopa API
+    let copaUser = {} as any;
+    try {
+      const copaToken = import.meta.env.VITE_BLUECOPA_API_TOKEN
+        ? atob(import.meta.env.VITE_BLUECOPA_API_TOKEN)
+        : '{}';
+      copaUser = JSON.parse(copaToken);
+    } catch (error) {
+      console.warn('Failed to parse VITE_BLUECOPA_API_TOKEN:', error);
+    }
+
+    copaSetConfig({
+      apiBaseUrl: import.meta.env.VITE_BLUECOPA_API_URL || 'https://develop.bluecopa.com',
+      workspaceId: import.meta.env.VITE_BLUECOPA_WORKSPACE_ID || '',
+      accessToken: copaUser?.accessToken || '',
+    });
+  }, []);
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Suspense fallback={<div className="p-4 text-sm text-muted-foreground">Loading…</div>}>
+        <RouteConfig />
+        <ReactQueryDevtools initialIsOpen={false} />
+      </Suspense>
+    </QueryClientProvider>
+  )
+}