create-bluecopa-react-app 1.0.0 → 1.0.2

package/templates/latest/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@bluecopa/react-router-template",
+  "version": "1.0.0",
+  "description": "React template with React Router for Bluecopa applications with TanStack Query, Radix UI, and Recharts",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 100",
+    "lint:fix": "eslint src --ext ts,tsx --fix",
+    "type-check": "tsc --noEmit",
+    "clean": "rm -rf dist node_modules package-lock.json",
+    "serve:federation": "npm run build:federation && npx serve dist -l 8080 --cors",
+    "serve:standalone": "npm run build:standalone && npx serve dist-standalone -l 8080 --cors",
+    "build:federation": "vite build",
+    "build:standalone": "VITE_BUILD_TARGET=standalone vite build --outDir dist-standalone && cp dist-standalone/standalone.html dist-standalone/index.html",
+    "build:dev": "vite build --mode development",
+    "start:railway": "ls -la && echo \"BUILD_TYPE: $BUILD_TYPE\" && echo \"Serving: dist${BUILD_TYPE:+-$BUILD_TYPE}\" && npx serve -s dist${BUILD_TYPE:+-$BUILD_TYPE} -l $PORT --cors"
+  },
+  "dependencies": {
+    "@bluecopa/react": "^0.1.3",
+    "@radix-ui/react-avatar": "^1.1.0",
+    "@radix-ui/react-dropdown-menu": "^2.1.0",
+    "@radix-ui/react-select": "^2.1.0",
+    "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-tabs": "^1.1.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "lucide-react": "^0.445.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "react-router-dom": "^6.26.0",
+    "recharts": "^2.12.0",
+    "single-spa": "^6.0.3",
+    "single-spa-react": "^6.0.2",
+    "tailwind-merge": "^2.5.0",
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "devDependencies": {
+    "@originjs/vite-plugin-federation": "^1.4.1",
+    "@types/node": "^24.3.1",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@types/systemjs": "^6.15.3",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/parser": "^7.18.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "@vitejs/plugin-react-swc": "^4.0.1",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.9",
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.6.0",
+    "vite": "^5.4.20"
+  }
+}

package/templates/{basic/postcss.config.js → latest/postcss.config.cjs}

@@ -1,4 +1,4 @@
-export default {
+module.exports = {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},

package/templates/latest/public/bluecopa-logo.svg

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1820 1774.9">
+  <defs>
+    <style>
+      .cls-1, .cls-2 {
+        fill: #fff;
+      }
+
+      .cls-3 {
+        fill: #3548ff;
+      }
+
+      .cls-3, .cls-4, .cls-2 {
+        isolation: isolate;
+      }
+
+      .cls-4 {
+        fill: #8ac2ff;
+      }
+    </style>
+  </defs>
+  <g id="Layer_1-2" data-name="Layer 1">
+    <circle class="cls-1" cx="1054.53" cy="779.52" r="386.21"/>
+    <g>
+      <path class="cls-4" d="M5.91,1004.47L0,1768.96l764.5,5.91c422.08,3.27,767.15-336.52,770.42-758.58,3.26-422.06-336.51-767.14-758.59-770.41C350.68,242.59,9.18,582.4,5.91,1004.47Z"/>
+      <path class="cls-3" d="M1820,764.52V0h-764.52C633.38,0,290.95,342.44,290.95,764.52s342.43,764.52,764.52,764.52,764.52-342.44,764.52-764.52Z"/>
+      <circle class="cls-2" cx="1055.48" cy="780.55" r="382.26"/>
+    </g>
+  </g>
+</svg>

package/templates/latest/setup.sh

@@ -0,0 +1,55 @@
+#!/bin/bash
+
+# Bluecopa React Router Template Setup Script
+
+echo "🚀 Setting up Bluecopa React Router Template..."
+
+# Check if Node.js is installed
+if ! command -v node &> /dev/null; then
+    echo "❌ Node.js is not installed. Please install Node.js first."
+    exit 1
+fi
+
+# Check if pnpm is installed, prefer it over npm
+if command -v pnpm &> /dev/null; then
+    PACKAGE_MANAGER="pnpm"
+    echo "📦 Installing dependencies with pnpm..."
+    pnpm install
+elif command -v npm &> /dev/null; then
+    PACKAGE_MANAGER="npm"
+    echo "📦 Installing dependencies with npm..."
+    npm install
+else
+    echo "❌ No package manager found. Please install npm or pnpm first."
+    exit 1
+fi
+
+echo "🔧 Creating environment file..."
+if [ ! -f .env.local ]; then
+    cp .env.example .env.local 2>/dev/null || {
+        echo "# Bluecopa API Configuration" > .env.local
+        echo "VITE_BLUECOPA_API_TOKEN=your-bluecopa-api-token-here" >> .env.local
+        echo "VITE_BLUECOPA_API_URL=https://develop.bluecopa.com/api/v1" >> .env.local
+        echo "VITE_BLUECOPA_WORKSPACE_ID=your-workspace-id-here" >> .env.local
+    }
+    echo "✅ Created .env.local file"
+    echo "⚠️  Please update the following variables with your actual values:"
+    echo "    - VITE_BLUECOPA_API_TOKEN"
+    echo "    - VITE_BLUECOPA_WORKSPACE_ID"
+    echo "    - VITE_BLUECOPA_API_URL"
+else
+    echo "ℹ️  .env.local already exists"
+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
+
+echo "✅ Setup complete!"
+echo ""
+echo "🎉 You can now start the development server:"
+echo "   npm run dev"
+echo ""
+echo "📖 Open http://localhost:3000 to view your application"

package/templates/latest/src/App.tsx

@@ -0,0 +1,15 @@
+import { Routes, Route } from 'react-router-dom'
+import QueryProvider from '@/providers/query-provider'
+import Home from '@/pages/Home'
+import Dashboard from '@/pages/Dashboard'
+
+export default function App() {
+  return (
+    <QueryProvider>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/dashboard" element={<Dashboard />} />
+      </Routes>
+    </QueryProvider>
+  )
+}

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

@@ -0,0 +1,139 @@
+import { Bell, Search, User, Settings, LogOut, ChevronDown } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { Input } from '@/components/ui/input'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { useUserData } from '@/hooks/use-api'
+
+interface DashboardHeaderProps {
+  title?: string
+  subtitle?: string
+}
+
+export default function DashboardHeader({ title, subtitle }: DashboardHeaderProps) {
+  const { data: userData, isLoading } = useUserData()
+
+  // Extract user from the API response structure
+  const user = userData?.user
+  const organization = userData?.organization
+
+  // Create display values with proper fallbacks
+  const getDisplayName = () => {
+    if (!user) return 'Loading...'
+    
+    // If firstName and lastName are the same as email, just use email
+    if (user.firstName === user.email && user.lastName === user.email) {
+      return user.email
+    }
+    
+    // Try to construct name from firstName and lastName
+    const fullName = `${user.firstName || ''} ${user.lastName || ''}`.trim()
+    return fullName || user.email
+  }
+  
+  const displayName = getDisplayName()
+  const displayRole = organization?.name || 'User' // Use organization name as role
+  const displayEmail = user?.email || 'loading@example.com'
+
+  // Show loading state in user info
+  if (isLoading) {
+    return (
+      <header className="bg-white border-b border-gray-200 px-6 py-4">
+        <div className="flex items-center justify-between">
+          <div className="flex-1">
+            {title && (
+              <div>
+                <h1 className="text-2xl font-semibold text-gray-900">{title}</h1>
+                {subtitle && <p className="text-sm text-gray-500 mt-1">{subtitle}</p>}
+              </div>
+            )}
+          </div>
+          <div className="flex items-center space-x-4">
+            <div className="text-sm text-gray-500">Loading user...</div>
+          </div>
+        </div>
+      </header>
+    )
+  }
+
+  return (
+    <header className="bg-white border-b border-gray-200 px-6 py-4">
+      <div className="flex items-center justify-between">
+        <div className="flex-1">
+          {title && (
+            <div>
+              <h1 className="text-2xl font-semibold text-gray-900">{title}</h1>
+              {subtitle && <p className="text-sm text-gray-500 mt-1">{subtitle}</p>}
+            </div>
+          )}
+        </div>
+
+        <div className="flex items-center space-x-4">
+          {/* Search */}
+          <div className="relative hidden md:block">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
+            <Input
+              type="search"
+              placeholder="Search..."
+              className="w-80 pl-10 pr-4"
+            />
+          </div>
+
+          {/* Notifications */}
+          <Button variant="ghost" size="sm" className="relative">
+            <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
+            </span>
+          </Button>
+
+          {/* User Menu */}
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" className="flex items-center space-x-2 p-2">
+                <Avatar className="h-8 w-8">
+                  <AvatarImage src={undefined} alt={displayName} />
+                  <AvatarFallback>{displayName.split(' ').map((n: string) => n[0]).join('')}</AvatarFallback>
+                </Avatar>
+                <div className="hidden md:block text-left">
+                  <p className="text-sm font-medium text-gray-900">{displayName}</p>
+                  <p className="text-xs text-gray-500">{displayRole}</p>
+                </div>
+                <ChevronDown className="h-4 w-4 text-gray-400" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-56">
+              <DropdownMenuLabel>
+                <div>
+                  <p className="font-medium">{displayName}</p>
+                  <p className="text-xs text-gray-500">{displayEmail}</p>
+                </div>
+              </DropdownMenuLabel>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem>
+                <User className="mr-2 h-4 w-4" />
+                Profile
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <Settings className="mr-2 h-4 w-4" />
+                Settings
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem className="text-red-600">
+                <LogOut className="mr-2 h-4 w-4" />
+                Sign out
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+    </header>
+  )
+}

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

@@ -0,0 +1,29 @@
+import { ReactNode } from 'react'
+import Sidebar from './sidebar'
+import DashboardHeader from './dashboard-header'
+
+interface DashboardLayoutProps {
+  children: ReactNode
+  title?: string
+  subtitle?: string
+}
+
+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">
+          {children}
+        </main>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,54 @@
+import { Link, useLocation } from "react-router-dom";
+import { cn } from "@/lib/utils";
+import { Home, LayoutDashboard } from "lucide-react";
+import { BluecopaLogo } from "../ui/bluecopa-logo";
+
+const navigation = [
+  { name: "Home", href: "/", icon: Home },
+  { name: "Dashboard", href: "/dashboard", icon: LayoutDashboard },
+];
+
+export default function Sidebar() {
+  const location = useLocation();
+
+  return (
+    <div className="flex h-full w-64 flex-col bg-white border-r border-gray-200">
+      {/* Logo */}
+      <div className="flex h-16 items-center px-6 border-b border-gray-200">
+        <Link to="/" className="flex items-center space-x-2">
+          <BluecopaLogo className="h-6 w-6 text-white" />
+          <span className="text-xl font-bold text-gray-900">Bluecopa</span>
+        </Link>
+      </div>
+
+      {/* Navigation */}
+      <nav className="flex-1 space-y-1 px-3 py-4">
+        {navigation.map((item) => {
+          const isActive = location.pathname === item.href;
+          return (
+            <Link
+              key={item.name}
+              to={item.href}
+              className={cn(
+                "group flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors",
+                isActive
+                  ? "bg-blue-50 text-blue-700 border-r-2 border-blue-600"
+                  : "text-gray-700 hover:bg-gray-50 hover:text-gray-900"
+              )}
+            >
+              <item.icon
+                className={cn(
+                  "mr-3 h-5 w-5 flex-shrink-0",
+                  isActive
+                    ? "text-blue-600"
+                    : "text-gray-400 group-hover:text-gray-500"
+                )}
+              />
+              {item.name}
+            </Link>
+          );
+        })}
+      </nav>
+    </div>
+  );
+}