create-bluecopa-react-app 1.0.4 → 1.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +47 -10
- package/bin/create-bluecopa-react-app.js +257 -51
- package/package.json +6 -5
- package/templates/latest/Agent.md +254 -0
- package/templates/latest/Dockerfile +22 -0
- package/templates/latest/README.md +157 -221
- package/templates/latest/app/app.css +134 -0
- package/templates/latest/app/app.tsx +46 -0
- package/templates/latest/app/components/app-sidebar.tsx +174 -0
- package/templates/latest/app/components/chart-area-interactive.tsx +290 -0
- package/templates/latest/app/components/data-table.tsx +807 -0
- package/templates/latest/app/components/nav-documents.tsx +92 -0
- package/templates/latest/app/components/nav-main.tsx +56 -0
- package/templates/latest/app/components/nav-secondary.tsx +42 -0
- package/templates/latest/app/components/nav-user.tsx +112 -0
- package/templates/latest/app/components/section-cards.tsx +102 -0
- package/templates/latest/app/components/site-header.tsx +19 -0
- package/templates/latest/app/components/ui/avatar.tsx +53 -0
- package/templates/latest/app/components/ui/badge.tsx +46 -0
- package/templates/latest/app/components/ui/breadcrumb.tsx +109 -0
- package/templates/latest/app/components/ui/button.tsx +58 -0
- package/templates/latest/app/components/ui/card.tsx +92 -0
- package/templates/latest/app/components/ui/chart.tsx +352 -0
- package/templates/latest/app/components/ui/checkbox.tsx +30 -0
- package/templates/latest/app/components/ui/drawer.tsx +139 -0
- package/templates/latest/app/components/ui/dropdown-menu.tsx +258 -0
- package/templates/latest/app/components/ui/input.tsx +21 -0
- package/templates/latest/app/components/ui/label.tsx +24 -0
- package/templates/latest/app/components/ui/select.tsx +183 -0
- package/templates/latest/app/components/ui/separator.tsx +26 -0
- package/templates/latest/app/components/ui/sheet.tsx +139 -0
- package/templates/latest/app/components/ui/sidebar.tsx +731 -0
- package/templates/latest/app/components/ui/skeleton.tsx +13 -0
- package/templates/latest/app/components/ui/sonner.tsx +23 -0
- package/templates/latest/app/components/ui/table.tsx +117 -0
- package/templates/latest/app/components/ui/tabs.tsx +66 -0
- package/templates/latest/app/components/ui/toggle-group.tsx +73 -0
- package/templates/latest/app/components/ui/toggle.tsx +47 -0
- package/templates/latest/app/components/ui/tooltip.tsx +59 -0
- package/templates/latest/app/dashboard/data.json +614 -0
- package/templates/latest/app/hooks/use-bluecopa-user.ts +37 -0
- package/templates/latest/app/hooks/use-mobile.ts +19 -0
- package/templates/latest/{src → app}/lib/utils.ts +1 -1
- package/templates/latest/app/main.tsx +12 -0
- package/templates/latest/app/routes/home.tsx +40 -0
- package/templates/latest/app/routes.tsx +15 -0
- package/templates/latest/{src → app}/single-spa.tsx +38 -28
- package/templates/latest/components.json +22 -0
- package/templates/latest/dist/assets/__federation_expose_App-DRwKKpS2.js +91 -0
- package/templates/latest/dist/assets/__federation_fn_import-CzfA7kmP.js +438 -0
- package/templates/latest/dist/assets/__federation_shared_react-Bp6HVBS4.js +16 -0
- package/templates/latest/dist/assets/__federation_shared_react-dom-BCcRGiYp.js +17 -0
- package/templates/latest/dist/assets/client-DgSav55y.js +12658 -0
- package/templates/latest/dist/assets/home-DOL6GrYV.js +54951 -0
- package/templates/latest/dist/assets/index-BzNimew1.js +69 -0
- package/templates/latest/dist/assets/index-DMFtQdNS.js +412 -0
- package/templates/latest/dist/assets/index-DdYpcDMk.js +60 -0
- package/templates/latest/dist/assets/remoteEntry.js +88 -0
- package/templates/latest/dist/assets/style-36A39bNN.css +3683 -0
- package/templates/latest/dist/avatars/shadcn.svg +6 -0
- package/templates/latest/dist/favicon.ico +0 -0
- package/templates/latest/dist/index.html +19 -0
- package/templates/latest/index.html +1 -1
- package/templates/latest/package-lock.json +1227 -3353
- package/templates/latest/package.json +47 -43
- package/templates/latest/pnpm-lock.yaml +4767 -0
- package/templates/latest/preview/index.html +32 -2
- package/templates/latest/public/avatars/shadcn.svg +6 -0
- package/templates/latest/public/favicon.ico +0 -0
- package/templates/latest/tsconfig.json +18 -11
- package/templates/latest/vite.config.ts +41 -41
- package/templates/latest/.env.example +0 -14
- package/templates/latest/.eslintrc.cjs +0 -42
- package/templates/latest/AGENT.md +0 -284
- package/templates/latest/clean.sh +0 -39
- package/templates/latest/postcss.config.cjs +0 -6
- package/templates/latest/public/bluecopa-logo.svg +0 -30
- package/templates/latest/public/favicon-32x32.png +0 -0
- package/templates/latest/public/favicon-96x96.png +0 -0
- package/templates/latest/setup.sh +0 -55
- package/templates/latest/src/App.tsx +0 -15
- package/templates/latest/src/components/layout/dashboard-header.tsx +0 -139
- package/templates/latest/src/components/layout/dashboard-layout.tsx +0 -29
- package/templates/latest/src/components/layout/sidebar.tsx +0 -54
- package/templates/latest/src/components/page/dashboard.tsx +0 -1506
- package/templates/latest/src/components/page/navbar.tsx +0 -104
- package/templates/latest/src/components/tables/data-grid.tsx +0 -439
- package/templates/latest/src/components/ui/alert.tsx +0 -59
- package/templates/latest/src/components/ui/avatar.tsx +0 -50
- package/templates/latest/src/components/ui/badge.tsx +0 -36
- package/templates/latest/src/components/ui/bluecopa-logo.tsx +0 -54
- package/templates/latest/src/components/ui/button.tsx +0 -58
- package/templates/latest/src/components/ui/card.tsx +0 -79
- package/templates/latest/src/components/ui/dropdown-menu.tsx +0 -200
- package/templates/latest/src/components/ui/input.tsx +0 -24
- package/templates/latest/src/components/ui/label.tsx +0 -23
- package/templates/latest/src/components/ui/select.tsx +0 -29
- package/templates/latest/src/hooks/use-api.ts +0 -55
- package/templates/latest/src/index.css +0 -59
- package/templates/latest/src/main.tsx +0 -13
- package/templates/latest/src/pages/Dashboard.tsx +0 -13
- package/templates/latest/src/pages/Home.tsx +0 -622
- package/templates/latest/src/providers/query-provider.tsx +0 -48
- package/templates/latest/src/types/api.ts +0 -78
- package/templates/latest/src/vite-env.d.ts +0 -11
- package/templates/latest/tailwind.config.js +0 -88
- package/templates/latest/tsconfig.app.json +0 -26
- package/templates/latest/tsconfig.node.json +0 -10
|
@@ -6,7 +6,37 @@
|
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
7
|
<title>Bluecopa Preview</title>
|
|
8
8
|
<meta name="description" content="Preview wrapper for federation module" />
|
|
9
|
-
|
|
9
|
+
<style>
|
|
10
|
+
.loading {
|
|
11
|
+
display: flex;
|
|
12
|
+
align-items: center;
|
|
13
|
+
justify-content: center;
|
|
14
|
+
height: 200px;
|
|
15
|
+
font-size: 16px;
|
|
16
|
+
color: #666;
|
|
17
|
+
}
|
|
18
|
+
.error {
|
|
19
|
+
padding: 20px;
|
|
20
|
+
background: #fee;
|
|
21
|
+
border: 1px solid #fcc;
|
|
22
|
+
border-radius: 8px;
|
|
23
|
+
margin: 20px;
|
|
24
|
+
}
|
|
25
|
+
.error h2 {
|
|
26
|
+
color: #c33;
|
|
27
|
+
margin-top: 0;
|
|
28
|
+
}
|
|
29
|
+
.error code {
|
|
30
|
+
background: #f5f5f5;
|
|
31
|
+
padding: 2px 4px;
|
|
32
|
+
border-radius: 3px;
|
|
33
|
+
font-family: monospace;
|
|
34
|
+
}
|
|
35
|
+
#bluecopa-preview {
|
|
36
|
+
width: 100%;
|
|
37
|
+
min-height: 500px;
|
|
38
|
+
}
|
|
39
|
+
</style>
|
|
10
40
|
</head>
|
|
11
41
|
<body>
|
|
12
42
|
<div id="loading-indicator" class="loading">
|
|
@@ -66,7 +96,7 @@
|
|
|
66
96
|
// Global function to load federation module
|
|
67
97
|
window.loadFederationModule = async function() {
|
|
68
98
|
// Hardcoded defaults
|
|
69
|
-
const moduleUrl = "http://localhost:
|
|
99
|
+
const moduleUrl = "http://localhost:3001/assets/remoteEntry.js";
|
|
70
100
|
const moduleName = "__copa_ext_app__react_route";
|
|
71
101
|
const exposeName = "./App";
|
|
72
102
|
const basePath = "/preview";
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<rect width="100" height="100" fill="#e5e7eb"/>
|
|
3
|
+
<circle cx="50" cy="40" r="20" fill="#9ca3af"/>
|
|
4
|
+
<path d="M20 80 Q50 60 80 80 L80 100 L20 100 Z" fill="#9ca3af"/>
|
|
5
|
+
<text x="50" y="95" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" fill="#6b7280">shadcn</text>
|
|
6
|
+
</svg>
|
|
Binary file
|
|
@@ -1,19 +1,26 @@
|
|
|
1
1
|
{
|
|
2
|
-
"
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
2
|
+
"include": [
|
|
3
|
+
"**/*",
|
|
4
|
+
"**/.server/**/*",
|
|
5
|
+
"**/.client/**/*",
|
|
6
6
|
],
|
|
7
7
|
"compilerOptions": {
|
|
8
|
+
"lib": ["DOM", "DOM.Iterable", "ES2022"],
|
|
9
|
+
"types": ["node", "vite/client"],
|
|
10
|
+
"target": "ES2022",
|
|
11
|
+
"module": "ES2022",
|
|
12
|
+
"moduleResolution": "bundler",
|
|
13
|
+
"jsx": "react-jsx",
|
|
14
|
+
"rootDirs": ["."],
|
|
8
15
|
"baseUrl": ".",
|
|
9
16
|
"paths": {
|
|
10
|
-
"
|
|
17
|
+
"~/*": ["./app/*"]
|
|
11
18
|
},
|
|
12
|
-
"
|
|
13
|
-
"
|
|
19
|
+
"esModuleInterop": true,
|
|
20
|
+
"verbatimModuleSyntax": true,
|
|
21
|
+
"noEmit": true,
|
|
22
|
+
"resolveJsonModule": true,
|
|
14
23
|
"skipLibCheck": true,
|
|
15
|
-
"
|
|
16
|
-
"noUnusedLocals": false,
|
|
17
|
-
"strictNullChecks": false
|
|
24
|
+
"strict": true
|
|
18
25
|
}
|
|
19
|
-
}
|
|
26
|
+
}
|
|
@@ -1,51 +1,51 @@
|
|
|
1
|
+
import tailwindcss from "@tailwindcss/vite";
|
|
1
2
|
import { defineConfig } from "vite";
|
|
3
|
+
import tsconfigPaths from "vite-tsconfig-paths";
|
|
4
|
+
import federation from "@originjs/vite-plugin-federation";
|
|
2
5
|
import react from "@vitejs/plugin-react-swc";
|
|
3
6
|
import path from "path";
|
|
4
|
-
import federation from "@originjs/vite-plugin-federation";
|
|
5
7
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
"Access-Control-Allow-Origin": "*",
|
|
17
|
-
"Access-Control-Allow-Methods": "GET,HEAD,PUT,PATCH,POST,DELETE",
|
|
18
|
-
"Access-Control-Allow-Headers":
|
|
19
|
-
"Origin, X-Requested-With, Content-Type, Accept, Authorization, Cache-Control",
|
|
20
|
-
},
|
|
8
|
+
export default defineConfig({
|
|
9
|
+
server: {
|
|
10
|
+
host: "::",
|
|
11
|
+
port: 8080,
|
|
12
|
+
cors: true,
|
|
13
|
+
headers: {
|
|
14
|
+
"Access-Control-Allow-Origin": "*",
|
|
15
|
+
"Access-Control-Allow-Methods": "GET,HEAD,PUT,PATCH,POST,DELETE",
|
|
16
|
+
"Access-Control-Allow-Headers":
|
|
17
|
+
"Origin, X-Requested-With, Content-Type, Accept, Authorization, Cache-Control",
|
|
21
18
|
},
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
].filter(Boolean),
|
|
33
|
-
resolve: {
|
|
34
|
-
alias: {
|
|
35
|
-
"@": path.resolve(__dirname, "./src"),
|
|
19
|
+
},
|
|
20
|
+
plugins: [
|
|
21
|
+
react(),
|
|
22
|
+
tailwindcss(),
|
|
23
|
+
tsconfigPaths(),
|
|
24
|
+
federation({
|
|
25
|
+
name: "__copa_ext_app__react_route",
|
|
26
|
+
filename: "remoteEntry.js",
|
|
27
|
+
exposes: {
|
|
28
|
+
"./App": "./app/single-spa.tsx",
|
|
36
29
|
},
|
|
30
|
+
shared: ["react", "react-dom"],
|
|
31
|
+
}),
|
|
32
|
+
],
|
|
33
|
+
resolve: {
|
|
34
|
+
alias: {
|
|
35
|
+
"@": path.resolve(__dirname, "./src"),
|
|
37
36
|
},
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
37
|
+
},
|
|
38
|
+
build: {
|
|
39
|
+
target: "esnext",
|
|
40
|
+
minify: false,
|
|
41
|
+
cssCodeSplit: false,
|
|
42
|
+
ssr: false,
|
|
43
|
+
rollupOptions: {
|
|
44
|
+
external: ["react", "react-dom"],
|
|
45
|
+
output: {
|
|
46
|
+
format: "system",
|
|
47
47
|
},
|
|
48
48
|
},
|
|
49
|
-
|
|
50
|
-
|
|
49
|
+
},
|
|
50
|
+
base: "/",
|
|
51
51
|
});
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
# Bluecopa API Configuration
|
|
2
|
-
# Copy this file to .env.local and update with your actual values
|
|
3
|
-
|
|
4
|
-
# Bluecopa API Authentication
|
|
5
|
-
# Get this from your Bluecopa dashboard -> Settings -> API Tokens
|
|
6
|
-
VITE_BLUECOPA_API_TOKEN=your-bluecopa-api-token-here
|
|
7
|
-
|
|
8
|
-
# Bluecopa API Base URL
|
|
9
|
-
# Use the develop environment for testing
|
|
10
|
-
VITE_BLUECOPA_API_URL=https://develop.bluecopa.com/api/v1
|
|
11
|
-
|
|
12
|
-
# Bluecopa Workspace ID
|
|
13
|
-
# Get this from your Bluecopa dashboard workspace settings
|
|
14
|
-
VITE_BLUECOPA_WORKSPACE_ID=your-workspace-id-here
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
module.exports = {
|
|
2
|
-
root: true,
|
|
3
|
-
env: {
|
|
4
|
-
browser: true,
|
|
5
|
-
es2020: true,
|
|
6
|
-
node: true
|
|
7
|
-
},
|
|
8
|
-
extends: [
|
|
9
|
-
'eslint:recommended',
|
|
10
|
-
],
|
|
11
|
-
ignorePatterns: ['dist', '.eslintrc.cjs'],
|
|
12
|
-
parserOptions: {
|
|
13
|
-
ecmaVersion: 'latest',
|
|
14
|
-
sourceType: 'module',
|
|
15
|
-
ecmaFeatures: {
|
|
16
|
-
jsx: true,
|
|
17
|
-
},
|
|
18
|
-
},
|
|
19
|
-
plugins: ['react-refresh'],
|
|
20
|
-
rules: {
|
|
21
|
-
'react-refresh/only-export-components': [
|
|
22
|
-
'warn',
|
|
23
|
-
{ allowConstantExport: true },
|
|
24
|
-
],
|
|
25
|
-
'no-unused-vars': 'off', // Turned off for TypeScript
|
|
26
|
-
'no-undef': 'off', // TypeScript handles this
|
|
27
|
-
},
|
|
28
|
-
overrides: [
|
|
29
|
-
{
|
|
30
|
-
files: ['*.ts', '*.tsx'],
|
|
31
|
-
parser: '@typescript-eslint/parser',
|
|
32
|
-
plugins: ['@typescript-eslint'],
|
|
33
|
-
rules: {
|
|
34
|
-
'no-unused-vars': 'off',
|
|
35
|
-
// Basic TypeScript rules without extending the recommended config
|
|
36
|
-
'@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
|
|
37
|
-
'@typescript-eslint/no-explicit-any': 'warn',
|
|
38
|
-
'@typescript-eslint/no-inferrable-types': 'warn',
|
|
39
|
-
},
|
|
40
|
-
},
|
|
41
|
-
],
|
|
42
|
-
}
|
|
@@ -1,284 +0,0 @@
|
|
|
1
|
-
# Agent Development Guide - BlueCopa React Template
|
|
2
|
-
|
|
3
|
-
This document provides guidance for AI agents working with BlueCopa React applications built from this template.
|
|
4
|
-
|
|
5
|
-
## 🤖 Agent Overview
|
|
6
|
-
|
|
7
|
-
This template is designed to work seamlessly with AI coding assistants for rapid development of BlueCopa dashboard applications. The project structure and patterns are optimized for AI-assisted development.
|
|
8
|
-
|
|
9
|
-
## 📋 Project Context
|
|
10
|
-
|
|
11
|
-
### Technology Stack
|
|
12
|
-
- **Frontend**: React 18 + TypeScript + React Router v6
|
|
13
|
-
- **Build Tool**: Vite (fast HMR and building)
|
|
14
|
-
- **Styling**: TailwindCSS with BlueCopa design system
|
|
15
|
-
- **UI Components**: Radix UI primitives (add via shadcn-ui for pre-styled components)
|
|
16
|
-
- **Data Fetching**: TanStack Query with @bluecopa/core hooks
|
|
17
|
-
- **Charts**: Recharts for data visualization
|
|
18
|
-
- **Icons**: Lucide React
|
|
19
|
-
|
|
20
|
-
### Key Directories
|
|
21
|
-
```
|
|
22
|
-
src/
|
|
23
|
-
├── components/ui/ # Reusable UI components (e.g., Button, Card via shadcn-ui; bluecopa-logo)
|
|
24
|
-
├── components/ # Business logic components (Navbar, DashboardLayout, etc.)
|
|
25
|
-
├── hooks/ # Custom React hooks (if needed; primarily use @bluecopa/core)
|
|
26
|
-
├── pages/ # Route components (Home, Dashboard)
|
|
27
|
-
├── providers/ # React context providers (e.g., QueryProvider)
|
|
28
|
-
├── lib/ # Utility functions and helpers (e.g., utils.ts with cn)
|
|
29
|
-
└── types/ # TypeScript type definitions (e.g., for API responses)
|
|
30
|
-
```
|
|
31
|
-
|
|
32
|
-
## 🔧 Development Patterns
|
|
33
|
-
|
|
34
|
-
### 1. Adding New Pages/Routes
|
|
35
|
-
|
|
36
|
-
When asked to create a new page:
|
|
37
|
-
|
|
38
|
-
1. **Create the page component** in `src/pages/NewPage.tsx`:
|
|
39
|
-
```tsx
|
|
40
|
-
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
41
|
-
import { useGetWorkflowInstanceStatusById } from '@bluecopa/core';
|
|
42
|
-
|
|
43
|
-
export default function NewPage() {
|
|
44
|
-
const { data: workflowStatus, isLoading } = useGetWorkflowInstanceStatusById('workflowId');
|
|
45
|
-
|
|
46
|
-
if (isLoading) return <div>Loading...</div>;
|
|
47
|
-
|
|
48
|
-
return (
|
|
49
|
-
<div className="container mx-auto py-6">
|
|
50
|
-
<Card>
|
|
51
|
-
<CardHeader>
|
|
52
|
-
<CardTitle>New Page</CardTitle>
|
|
53
|
-
</CardHeader>
|
|
54
|
-
<CardContent>
|
|
55
|
-
{/* Page content */}
|
|
56
|
-
<p>Workflow status: {workflowStatus?.status}</p>
|
|
57
|
-
</CardContent>
|
|
58
|
-
</Card>
|
|
59
|
-
</div>
|
|
60
|
-
);
|
|
61
|
-
}
|
|
62
|
-
```
|
|
63
|
-
|
|
64
|
-
2. **Add the route** in `src/App.tsx`:
|
|
65
|
-
```tsx
|
|
66
|
-
import NewPage from '@/pages/NewPage';
|
|
67
|
-
|
|
68
|
-
// Add to Routes
|
|
69
|
-
<Route path="/new-page" element={<NewPage />} />
|
|
70
|
-
```
|
|
71
|
-
|
|
72
|
-
3. **Update navigation** in `src/components/page/navbar.tsx` (import icon from lucide-react):
|
|
73
|
-
```tsx
|
|
74
|
-
import { Settings } from 'lucide-react';
|
|
75
|
-
|
|
76
|
-
const navigation = [
|
|
77
|
-
// ... existing routes
|
|
78
|
-
{ name: 'New Page', href: '/new-page', icon: Settings },
|
|
79
|
-
];
|
|
80
|
-
```
|
|
81
|
-
|
|
82
|
-
### 2. Using BlueCopa API Hooks
|
|
83
|
-
|
|
84
|
-
Install @bluecopa/core if not present: `npm install @bluecopa/core`
|
|
85
|
-
|
|
86
|
-
Use the pre-configured hooks from `@bluecopa/core`:
|
|
87
|
-
```tsx
|
|
88
|
-
import { useGetFileUrlByFileId, useGetTableById, useGetWorkflowInstanceStatusById } from '@bluecopa/core';
|
|
89
|
-
|
|
90
|
-
function DataComponent() {
|
|
91
|
-
const { data: fileUrlData, isLoading: fileUrlLoading } = useGetFileUrlByFileId('key', 'type', 'GET');
|
|
92
|
-
const { data: tableData } = useGetTableById('tableId');
|
|
93
|
-
const { data: workflowStatus } = useGetWorkflowInstanceStatusById('workflowId');
|
|
94
|
-
|
|
95
|
-
if (fileUrlLoading) return <div>Loading...</div>;
|
|
96
|
-
if (!fileUrlData) return <div>No data available</div>;
|
|
97
|
-
|
|
98
|
-
return <div>Data: {JSON.stringify(fileUrlData)}</div>;
|
|
99
|
-
}
|
|
100
|
-
```
|
|
101
|
-
|
|
102
|
-
For custom hooks, create in `src/hooks/` and wrap TanStack Query.
|
|
103
|
-
|
|
104
|
-
### 3. UI Component Patterns
|
|
105
|
-
|
|
106
|
-
Add shadcn-ui components if needed: `npx shadcn-ui@latest add card button tabs`
|
|
107
|
-
|
|
108
|
-
Use the existing UI components from `src/components/ui/`:
|
|
109
|
-
```tsx
|
|
110
|
-
import { Button } from '@/components/ui/button';
|
|
111
|
-
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
112
|
-
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
|
113
|
-
import { cn } from '@/lib/utils';
|
|
114
|
-
|
|
115
|
-
// Example usage
|
|
116
|
-
<Card>
|
|
117
|
-
<CardHeader>
|
|
118
|
-
<CardTitle>Dashboard</CardTitle>
|
|
119
|
-
</CardHeader>
|
|
120
|
-
<CardContent>
|
|
121
|
-
<Tabs defaultValue="overview" className={cn("w-full")}>
|
|
122
|
-
<TabsList>
|
|
123
|
-
<TabsTrigger value="overview">Overview</TabsTrigger>
|
|
124
|
-
<TabsTrigger value="analytics">Analytics</TabsTrigger>
|
|
125
|
-
</TabsList>
|
|
126
|
-
<TabsContent value="overview">
|
|
127
|
-
<Button>Action</Button>
|
|
128
|
-
</TabsContent>
|
|
129
|
-
</Tabs>
|
|
130
|
-
</CardContent>
|
|
131
|
-
</Card>
|
|
132
|
-
```
|
|
133
|
-
|
|
134
|
-
### 4. Chart Integration
|
|
135
|
-
|
|
136
|
-
Install Recharts if not present: `npm install recharts`
|
|
137
|
-
|
|
138
|
-
Use Recharts for data visualization:
|
|
139
|
-
```tsx
|
|
140
|
-
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
|
|
141
|
-
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
142
|
-
|
|
143
|
-
interface ChartData {
|
|
144
|
-
name: string;
|
|
145
|
-
value: number;
|
|
146
|
-
}
|
|
147
|
-
|
|
148
|
-
function ChartComponent({ data }: { data: ChartData[] }) {
|
|
149
|
-
return (
|
|
150
|
-
<Card>
|
|
151
|
-
<CardHeader>
|
|
152
|
-
<CardTitle>Analytics</CardTitle>
|
|
153
|
-
</CardHeader>
|
|
154
|
-
<CardContent>
|
|
155
|
-
<ResponsiveContainer width="100%" height={300}>
|
|
156
|
-
<LineChart data={data}>
|
|
157
|
-
<CartesianGrid strokeDasharray="3 3" />
|
|
158
|
-
<XAxis dataKey="name" />
|
|
159
|
-
<YAxis />
|
|
160
|
-
<Tooltip />
|
|
161
|
-
<Line type="monotone" dataKey="value" stroke="#041e42" />
|
|
162
|
-
</LineChart>
|
|
163
|
-
</ResponsiveContainer>
|
|
164
|
-
</CardContent>
|
|
165
|
-
</Card>
|
|
166
|
-
);
|
|
167
|
-
}
|
|
168
|
-
```
|
|
169
|
-
|
|
170
|
-
## 🎨 Design System Guidelines
|
|
171
|
-
|
|
172
|
-
### Colors
|
|
173
|
-
- **Primary**: Navy blue (`#041e42`) - BlueCopa brand color
|
|
174
|
-
- **Background**: Light gray (`bg-gray-50`)
|
|
175
|
-
- **Cards**: White with subtle shadow (`bg-white shadow-sm`)
|
|
176
|
-
- **Text**: Gray scale (`text-gray-900`, `text-gray-600`)
|
|
177
|
-
|
|
178
|
-
### Layout Patterns
|
|
179
|
-
- **Container**: `container mx-auto py-6` for page layouts
|
|
180
|
-
- **Grid**: `grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6` for responsive grids
|
|
181
|
-
- **Spacing**: Use Tailwind spacing scale (`p-4`, `mb-6`, etc.)
|
|
182
|
-
|
|
183
|
-
### Component Structure
|
|
184
|
-
```tsx
|
|
185
|
-
// Standard page layout
|
|
186
|
-
<div className="container mx-auto py-6">
|
|
187
|
-
<div className="mb-6">
|
|
188
|
-
<h1 className="text-2xl font-bold text-gray-900">Page Title</h1>
|
|
189
|
-
<p className="text-gray-600">Page description</p>
|
|
190
|
-
</div>
|
|
191
|
-
|
|
192
|
-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
193
|
-
{/* Cards or components */}
|
|
194
|
-
</div>
|
|
195
|
-
</div>
|
|
196
|
-
```
|
|
197
|
-
|
|
198
|
-
## 🛠️ Common Tasks for Agents
|
|
199
|
-
|
|
200
|
-
### Adding a New Dashboard Card
|
|
201
|
-
1. Create component in `src/components/` (e.g., NewCard.tsx)
|
|
202
|
-
2. Use Card component wrapper from ui/
|
|
203
|
-
3. Include loading and error states with TanStack Query
|
|
204
|
-
4. Use @bluecopa/core hooks for data (e.g., useGetTableById)
|
|
205
|
-
|
|
206
|
-
### Creating Forms
|
|
207
|
-
1. Use Radix UI form components (add via shadcn-ui: `npx shadcn-ui@latest add form`)
|
|
208
|
-
2. Add TypeScript types for form data in `src/types/`
|
|
209
|
-
3. Include validation with Zod and error handling
|
|
210
|
-
4. Follow BlueCopa styling patterns
|
|
211
|
-
|
|
212
|
-
### Adding Data Tables
|
|
213
|
-
1. For complex tables, install and use AG Grid (@bluecopa/aggrid)
|
|
214
|
-
2. For simple tables, use HTML table with Tailwind styling
|
|
215
|
-
3. Include sorting, filtering, and pagination as needed
|
|
216
|
-
4. Integrate with @bluecopa/core for data
|
|
217
|
-
|
|
218
|
-
### Implementing Search
|
|
219
|
-
1. Add search state management with React state or form libraries
|
|
220
|
-
2. Use debounced input for API calls (e.g., via useGetTableById with query params)
|
|
221
|
-
3. Show loading states during search
|
|
222
|
-
4. Handle empty states gracefully with conditional rendering
|
|
223
|
-
|
|
224
|
-
## 🚨 Important Notes for Agents
|
|
225
|
-
|
|
226
|
-
### Environment Variables
|
|
227
|
-
Always reference environment variables correctly for Vite:
|
|
228
|
-
```tsx
|
|
229
|
-
const apiToken = import.meta.env.VITE_BLUECOPA_API_TOKEN;
|
|
230
|
-
const apiUrl = import.meta.env.VITE_BLUECOPA_API_URL;
|
|
231
|
-
```
|
|
232
|
-
|
|
233
|
-
### Imports
|
|
234
|
-
Use path aliases consistently (configured in tsconfig.json):
|
|
235
|
-
```tsx
|
|
236
|
-
import { Button } from '@/components/ui/button';
|
|
237
|
-
import { useGetTableById } from '@bluecopa/core';
|
|
238
|
-
import { cn } from '@/lib/utils';
|
|
239
|
-
```
|
|
240
|
-
|
|
241
|
-
### TypeScript
|
|
242
|
-
Always include proper TypeScript types:
|
|
243
|
-
```tsx
|
|
244
|
-
import { FileUrlResponse, TableData, WorkflowStatus } from '@/types';
|
|
245
|
-
|
|
246
|
-
interface ComponentProps {
|
|
247
|
-
data: TableData[];
|
|
248
|
-
onSelect: (id: string) => void;
|
|
249
|
-
}
|
|
250
|
-
|
|
251
|
-
function Component({ data, onSelect }: ComponentProps) {
|
|
252
|
-
// Component implementation
|
|
253
|
-
}
|
|
254
|
-
```
|
|
255
|
-
|
|
256
|
-
### Error Handling
|
|
257
|
-
Include proper error boundaries and loading states:
|
|
258
|
-
```tsx
|
|
259
|
-
if (fileUrlLoading) return <div className="p-4">Loading...</div>;
|
|
260
|
-
if (error) return <div className="p-4 text-red-600">Error: {error.message}</div>;
|
|
261
|
-
if (!data) return <div className="p-4 text-gray-500">No data available</div>;
|
|
262
|
-
```
|
|
263
|
-
|
|
264
|
-
## 📚 Reference Links
|
|
265
|
-
- [React Router Documentation](https://reactrouter.com)
|
|
266
|
-
- [TailwindCSS Documentation](https://tailwindcss.com)
|
|
267
|
-
- [Radix UI Documentation](https://www.radix-ui.com)
|
|
268
|
-
- [shadcn/ui Documentation](https://ui.shadcn.com)
|
|
269
|
-
- [Recharts Documentation](https://recharts.org)
|
|
270
|
-
- [TanStack Query Documentation](https://tanstack.com/query/latest)
|
|
271
|
-
- [Lucide React Icons](https://lucide.dev)
|
|
272
|
-
- [BlueCopa Core Package](https://www.npmjs.com/package/@bluecopa/core)
|
|
273
|
-
|
|
274
|
-
## 🔄 Development Workflow
|
|
275
|
-
|
|
276
|
-
When working on this project:
|
|
277
|
-
|
|
278
|
-
1. **Start development server**: `npm run dev`
|
|
279
|
-
2. **Type checking**: `npm run type-check`
|
|
280
|
-
3. **Linting**: `npm run lint`
|
|
281
|
-
4. **Building**: `npm run build`
|
|
282
|
-
5. **Preview build**: `npm run preview`
|
|
283
|
-
|
|
284
|
-
The development server supports hot module replacement, so changes will be reflected immediately in the browser.
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
#!/bin/bash
|
|
2
|
-
|
|
3
|
-
# Development helper script for react-router template
|
|
4
|
-
|
|
5
|
-
echo "🧹 Cleaning react-router template..."
|
|
6
|
-
|
|
7
|
-
# Remove build artifacts
|
|
8
|
-
rm -rf dist/
|
|
9
|
-
echo "✅ Removed dist directory"
|
|
10
|
-
|
|
11
|
-
# Remove node_modules and lock files
|
|
12
|
-
rm -rf node_modules/
|
|
13
|
-
rm -f package-lock.json
|
|
14
|
-
rm -f yarn.lock
|
|
15
|
-
echo "✅ Removed node_modules and lock files"
|
|
16
|
-
|
|
17
|
-
# Remove environment files (keeping example)
|
|
18
|
-
rm -f .env.local
|
|
19
|
-
echo "✅ Removed .env.local"
|
|
20
|
-
|
|
21
|
-
# Optionally reinstall dependencies
|
|
22
|
-
if [ "$1" = "--install" ]; then
|
|
23
|
-
echo "📦 Reinstalling dependencies..."
|
|
24
|
-
if command -v pnpm &> /dev/null; then
|
|
25
|
-
pnpm install
|
|
26
|
-
else
|
|
27
|
-
npm install
|
|
28
|
-
fi
|
|
29
|
-
echo "✅ Dependencies reinstalled"
|
|
30
|
-
fi
|
|
31
|
-
|
|
32
|
-
echo "🎉 Cleanup complete!"
|
|
33
|
-
echo ""
|
|
34
|
-
echo "To reinstall dependencies:"
|
|
35
|
-
echo " pnpm install # recommended"
|
|
36
|
-
echo " npm install # alternative"
|
|
37
|
-
echo ""
|
|
38
|
-
echo "To set up environment:"
|
|
39
|
-
echo " ./setup.sh"
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
-
<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1820 1774.9">
|
|
3
|
-
<defs>
|
|
4
|
-
<style>
|
|
5
|
-
.cls-1, .cls-2 {
|
|
6
|
-
fill: #fff;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
.cls-3 {
|
|
10
|
-
fill: #3548ff;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
.cls-3, .cls-4, .cls-2 {
|
|
14
|
-
isolation: isolate;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
.cls-4 {
|
|
18
|
-
fill: #8ac2ff;
|
|
19
|
-
}
|
|
20
|
-
</style>
|
|
21
|
-
</defs>
|
|
22
|
-
<g id="Layer_1-2" data-name="Layer 1">
|
|
23
|
-
<circle class="cls-1" cx="1054.53" cy="779.52" r="386.21"/>
|
|
24
|
-
<g>
|
|
25
|
-
<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"/>
|
|
26
|
-
<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"/>
|
|
27
|
-
<circle class="cls-2" cx="1055.48" cy="780.55" r="382.26"/>
|
|
28
|
-
</g>
|
|
29
|
-
</g>
|
|
30
|
-
</svg>
|
|
Binary file
|
|
Binary file
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
#!/bin/bash
|
|
2
|
-
|
|
3
|
-
# Bluecopa React Router Template Setup Script
|
|
4
|
-
|
|
5
|
-
echo "🚀 Setting up Bluecopa React Router Template..."
|
|
6
|
-
|
|
7
|
-
# Check if Node.js is installed
|
|
8
|
-
if ! command -v node &> /dev/null; then
|
|
9
|
-
echo "❌ Node.js is not installed. Please install Node.js first."
|
|
10
|
-
exit 1
|
|
11
|
-
fi
|
|
12
|
-
|
|
13
|
-
# Check if pnpm is installed, prefer it over npm
|
|
14
|
-
if command -v pnpm &> /dev/null; then
|
|
15
|
-
PACKAGE_MANAGER="pnpm"
|
|
16
|
-
echo "📦 Installing dependencies with pnpm..."
|
|
17
|
-
pnpm install
|
|
18
|
-
elif command -v npm &> /dev/null; then
|
|
19
|
-
PACKAGE_MANAGER="npm"
|
|
20
|
-
echo "📦 Installing dependencies with npm..."
|
|
21
|
-
npm install
|
|
22
|
-
else
|
|
23
|
-
echo "❌ No package manager found. Please install npm or pnpm first."
|
|
24
|
-
exit 1
|
|
25
|
-
fi
|
|
26
|
-
|
|
27
|
-
echo "🔧 Creating environment file..."
|
|
28
|
-
if [ ! -f .env.local ]; then
|
|
29
|
-
cp .env.example .env.local 2>/dev/null || {
|
|
30
|
-
echo "# Bluecopa API Configuration" > .env.local
|
|
31
|
-
echo "VITE_BLUECOPA_API_TOKEN=your-bluecopa-api-token-here" >> .env.local
|
|
32
|
-
echo "VITE_BLUECOPA_API_URL=https://develop.bluecopa.com/api/v1" >> .env.local
|
|
33
|
-
echo "VITE_BLUECOPA_WORKSPACE_ID=your-workspace-id-here" >> .env.local
|
|
34
|
-
}
|
|
35
|
-
echo "✅ Created .env.local file"
|
|
36
|
-
echo "⚠️ Please update the following variables with your actual values:"
|
|
37
|
-
echo " - VITE_BLUECOPA_API_TOKEN"
|
|
38
|
-
echo " - VITE_BLUECOPA_WORKSPACE_ID"
|
|
39
|
-
echo " - VITE_BLUECOPA_API_URL"
|
|
40
|
-
else
|
|
41
|
-
echo "ℹ️ .env.local already exists"
|
|
42
|
-
fi
|
|
43
|
-
|
|
44
|
-
echo "🎨 Setting up Tailwind CSS..."
|
|
45
|
-
npx tailwindcss init -p 2>/dev/null || echo "✅ Tailwind already configured"
|
|
46
|
-
|
|
47
|
-
echo "🔍 Running type check..."
|
|
48
|
-
npm run type-check
|
|
49
|
-
|
|
50
|
-
echo "✅ Setup complete!"
|
|
51
|
-
echo ""
|
|
52
|
-
echo "🎉 You can now start the development server:"
|
|
53
|
-
echo " npm run dev"
|
|
54
|
-
echo ""
|
|
55
|
-
echo "📖 Open http://localhost:3000 to view your application"
|