create-bluecopa-react-app 1.0.5 → 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.
Files changed (117) hide show
  1. package/README.md +47 -10
  2. package/bin/create-bluecopa-react-app.js +257 -51
  3. package/package.json +6 -5
  4. package/templates/latest/Agent.md +254 -0
  5. package/templates/latest/Dockerfile +22 -0
  6. package/templates/latest/README.md +157 -221
  7. package/templates/latest/app/app.css +134 -0
  8. package/templates/latest/app/app.tsx +46 -0
  9. package/templates/latest/app/components/app-sidebar.tsx +174 -0
  10. package/templates/latest/app/components/chart-area-interactive.tsx +290 -0
  11. package/templates/latest/app/components/data-table.tsx +807 -0
  12. package/templates/latest/app/components/nav-documents.tsx +92 -0
  13. package/templates/latest/app/components/nav-main.tsx +56 -0
  14. package/templates/latest/app/components/nav-secondary.tsx +42 -0
  15. package/templates/latest/app/components/nav-user.tsx +112 -0
  16. package/templates/latest/app/components/section-cards.tsx +102 -0
  17. package/templates/latest/app/components/site-header.tsx +19 -0
  18. package/templates/latest/app/components/ui/avatar.tsx +53 -0
  19. package/templates/latest/app/components/ui/badge.tsx +46 -0
  20. package/templates/latest/app/components/ui/breadcrumb.tsx +109 -0
  21. package/templates/latest/app/components/ui/button.tsx +58 -0
  22. package/templates/latest/app/components/ui/card.tsx +92 -0
  23. package/templates/latest/app/components/ui/chart.tsx +352 -0
  24. package/templates/latest/app/components/ui/checkbox.tsx +30 -0
  25. package/templates/latest/app/components/ui/drawer.tsx +139 -0
  26. package/templates/latest/app/components/ui/dropdown-menu.tsx +258 -0
  27. package/templates/latest/app/components/ui/input.tsx +21 -0
  28. package/templates/latest/app/components/ui/label.tsx +24 -0
  29. package/templates/latest/app/components/ui/select.tsx +183 -0
  30. package/templates/latest/app/components/ui/separator.tsx +26 -0
  31. package/templates/latest/app/components/ui/sheet.tsx +139 -0
  32. package/templates/latest/app/components/ui/sidebar.tsx +731 -0
  33. package/templates/latest/app/components/ui/skeleton.tsx +13 -0
  34. package/templates/latest/app/components/ui/sonner.tsx +23 -0
  35. package/templates/latest/app/components/ui/table.tsx +117 -0
  36. package/templates/latest/app/components/ui/tabs.tsx +66 -0
  37. package/templates/latest/app/components/ui/toggle-group.tsx +73 -0
  38. package/templates/latest/app/components/ui/toggle.tsx +47 -0
  39. package/templates/latest/app/components/ui/tooltip.tsx +59 -0
  40. package/templates/latest/app/dashboard/data.json +614 -0
  41. package/templates/latest/app/hooks/use-bluecopa-user.ts +37 -0
  42. package/templates/latest/app/hooks/use-mobile.ts +19 -0
  43. package/templates/latest/{src → app}/lib/utils.ts +1 -1
  44. package/templates/latest/app/main.tsx +12 -0
  45. package/templates/latest/app/routes/home.tsx +40 -0
  46. package/templates/latest/app/routes.tsx +15 -0
  47. package/templates/latest/{src → app}/single-spa.tsx +3 -3
  48. package/templates/latest/components.json +22 -0
  49. package/templates/latest/dist/assets/__federation_expose_App-DRwKKpS2.js +91 -0
  50. package/templates/latest/dist/assets/__federation_fn_import-CzfA7kmP.js +438 -0
  51. package/templates/latest/dist/assets/__federation_shared_react-Bp6HVBS4.js +16 -0
  52. package/templates/latest/dist/assets/__federation_shared_react-dom-BCcRGiYp.js +17 -0
  53. package/templates/latest/dist/assets/client-DgSav55y.js +12658 -0
  54. package/templates/latest/dist/assets/home-DOL6GrYV.js +54951 -0
  55. package/templates/latest/dist/assets/index-BzNimew1.js +69 -0
  56. package/templates/latest/dist/assets/index-DMFtQdNS.js +412 -0
  57. package/templates/latest/dist/assets/index-DdYpcDMk.js +60 -0
  58. package/templates/latest/dist/assets/remoteEntry.js +88 -0
  59. package/templates/latest/dist/assets/style-36A39bNN.css +3683 -0
  60. package/templates/latest/dist/avatars/shadcn.svg +6 -0
  61. package/templates/latest/dist/favicon.ico +0 -0
  62. package/templates/latest/dist/index.html +19 -0
  63. package/templates/latest/index.html +1 -1
  64. package/templates/latest/package-lock.json +1227 -3353
  65. package/templates/latest/package.json +47 -43
  66. package/templates/latest/pnpm-lock.yaml +4767 -0
  67. package/templates/latest/preview/index.html +32 -2
  68. package/templates/latest/public/avatars/shadcn.svg +6 -0
  69. package/templates/latest/public/favicon.ico +0 -0
  70. package/templates/latest/tsconfig.json +19 -12
  71. package/templates/latest/vite.config.ts +41 -41
  72. package/templates/latest/.env.example +0 -14
  73. package/templates/latest/.eslintrc.cjs +0 -42
  74. package/templates/latest/AGENT.md +0 -282
  75. package/templates/latest/clean.sh +0 -40
  76. package/templates/latest/postcss.config.cjs +0 -6
  77. package/templates/latest/public/bluecopa-logo.svg +0 -30
  78. package/templates/latest/public/favicon-32x32.png +0 -0
  79. package/templates/latest/public/favicon-96x96.png +0 -0
  80. package/templates/latest/setup.sh +0 -56
  81. package/templates/latest/src/App.tsx +0 -19
  82. package/templates/latest/src/components/charts/AreaChart.tsx +0 -80
  83. package/templates/latest/src/components/charts/DonutChart.tsx +0 -73
  84. package/templates/latest/src/components/charts/SparkAreaChart.tsx +0 -52
  85. package/templates/latest/src/components/layout/dashboard-header.tsx +0 -139
  86. package/templates/latest/src/components/layout/dashboard-layout.tsx +0 -37
  87. package/templates/latest/src/components/layout/navbar.tsx +0 -106
  88. package/templates/latest/src/components/layout/sidebar.tsx +0 -55
  89. package/templates/latest/src/components/page/dashboard/DashboardMetrics.tsx +0 -97
  90. package/templates/latest/src/components/page/dashboard/PaymentMethodsAnalysis.tsx +0 -182
  91. package/templates/latest/src/components/page/dashboard/RevenueAnalytics.tsx +0 -505
  92. package/templates/latest/src/components/page/dashboard/SalesAnalytics.tsx +0 -313
  93. package/templates/latest/src/components/page/dashboard/TransactionsTable.tsx +0 -256
  94. package/templates/latest/src/components/page/dashboard/dashboard-utils.ts +0 -147
  95. package/templates/latest/src/components/page/dashboard/dashboard.tsx +0 -185
  96. package/templates/latest/src/components/tables/data-grid.tsx +0 -439
  97. package/templates/latest/src/components/ui/alert.tsx +0 -59
  98. package/templates/latest/src/components/ui/avatar.tsx +0 -50
  99. package/templates/latest/src/components/ui/badge.tsx +0 -36
  100. package/templates/latest/src/components/ui/bluecopa-logo.tsx +0 -57
  101. package/templates/latest/src/components/ui/button.tsx +0 -58
  102. package/templates/latest/src/components/ui/card.tsx +0 -79
  103. package/templates/latest/src/components/ui/dropdown-menu.tsx +0 -200
  104. package/templates/latest/src/components/ui/input.tsx +0 -24
  105. package/templates/latest/src/components/ui/label.tsx +0 -21
  106. package/templates/latest/src/components/ui/select.tsx +0 -27
  107. package/templates/latest/src/hooks/use-api.ts +0 -55
  108. package/templates/latest/src/index.css +0 -59
  109. package/templates/latest/src/main.tsx +0 -13
  110. package/templates/latest/src/pages/Dashboard.tsx +0 -13
  111. package/templates/latest/src/pages/Home.tsx +0 -622
  112. package/templates/latest/src/providers/query-provider.tsx +0 -48
  113. package/templates/latest/src/types/api.ts +0 -78
  114. package/templates/latest/src/vite-env.d.ts +0 -11
  115. package/templates/latest/tailwind.config.js +0 -87
  116. package/templates/latest/tsconfig.app.json +0 -32
  117. package/templates/latest/tsconfig.node.json +0 -14
@@ -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:8080/assets/remoteEntry.js";
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
- "files": [],
3
- "references": [
4
- { "path": "./tsconfig.app.json" },
5
- { "path": "./tsconfig.node.json" }
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
- "@/*": ["./src/*"]
17
+ "~/*": ["./app/*"]
11
18
  },
12
- "strict": true,
13
- "noImplicitAny": true,
14
- "strictNullChecks": true,
15
- "noUnusedParameters": true,
16
- "noUnusedLocals": true,
17
- "skipLibCheck": true
19
+ "esModuleInterop": true,
20
+ "verbatimModuleSyntax": true,
21
+ "noEmit": true,
22
+ "resolveJsonModule": true,
23
+ "skipLibCheck": true,
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
- // https://vitejs.dev/config/
7
- export default defineConfig(({ mode }) => {
8
- console.log("Vite mode:", mode);
9
-
10
- return {
11
- server: {
12
- host: "::",
13
- port: 8080,
14
- cors: true,
15
- headers: {
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
- plugins: [
23
- react(),
24
- federation({
25
- name: "__copa_ext_app__react_route",
26
- filename: "remoteEntry.js",
27
- exposes: {
28
- "./App": "./src/single-spa.tsx",
29
- },
30
- shared: ["react", "react-dom"],
31
- }),
32
- ],
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
- build: {
39
- target: "esnext",
40
- minify: false,
41
- cssCodeSplit: false,
42
- rollupOptions: {
43
- external: ["react", "react-dom"],
44
- output: {
45
- format: "system",
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
- base: "/",
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,282 +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/react 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/react)
26
- ├── lib/ # Utility functions and helpers (e.g., utils.ts with cn)
27
- └── types/ # TypeScript type definitions (e.g., for API responses)
28
- ```
29
-
30
- ## 🔧 Development Patterns
31
-
32
- ### 1. Adding New Pages/Routes
33
-
34
- When asked to create a new page:
35
-
36
- 1. **Create the page component** in `src/pages/NewPage.tsx`:
37
- ```tsx
38
- import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
39
- import { useGetWorkflowInstanceStatusById } from '@bluecopa/react';
40
-
41
- export default function NewPage() {
42
- const { data: workflowStatus, isLoading } = useGetWorkflowInstanceStatusById('workflowId');
43
-
44
- if (isLoading) return <div>Loading...</div>;
45
-
46
- return (
47
- <div className="container mx-auto py-6">
48
- <Card>
49
- <CardHeader>
50
- <CardTitle>New Page</CardTitle>
51
- </CardHeader>
52
- <CardContent>
53
- {/* Page content */}
54
- <p>Workflow status: {workflowStatus?.status}</p>
55
- CardContent>
56
- </Card>
57
- </div>
58
- );
59
- }
60
- ```
61
-
62
- 2. **Add the route** in `src/App.tsx`:
63
- ```tsx
64
- import NewPage from '@/pages/NewPage';
65
-
66
- // Add to Routes
67
- <Route path="/new-page" element={<NewPage />} />
68
- ```
69
-
70
- 3. **Update navigation** in `src/components/layout/navbar.tsx` (import icon from lucide-react):
71
- ```tsx
72
- import { Settings } from 'lucide-react';
73
-
74
- const navigation = [
75
- // ... existing routes
76
- { name: 'New Page', href: '/new-page', icon: Settings },
77
- ];
78
- ```
79
-
80
- ### 2. Using BlueCopa API Hooks
81
-
82
- Install @bluecopa/react if not present: `npm install @bluecopa/react`
83
-
84
- Use the pre-configured hooks from `@bluecopa/react`:
85
- ```tsx
86
- import { useGetFileUrlByFileId, useGetTableById, useGetWorkflowInstanceStatusById } from '@bluecopa/core';
87
-
88
- function DataComponent() {
89
- const { data: fileUrlData, isLoading: fileUrlLoading } = useGetFileUrlByFileId('key', 'type', 'GET');
90
- const { data: tableData } = useGetTableById('tableId');
91
- const { data: workflowStatus } = useGetWorkflowInstanceStatusById('workflowId');
92
-
93
- if (fileUrlLoading) return <div>Loading...</div>;
94
- if (!fileUrlData) return <div>No data available</div>;
95
-
96
- return <div>Data: {JSON.stringify(fileUrlData)}</div>;
97
- }
98
- ```
99
-
100
- For custom hooks, create in `src/hooks/` and wrap TanStack Query.
101
-
102
- ### 3. UI Component Patterns
103
-
104
- Add shadcn-ui components if needed: `npx shadcn-ui@latest add card button tabs`
105
-
106
- Use the existing UI components from `src/components/ui/`:
107
- ```tsx
108
- import { Button } from '@/components/ui/button';
109
- import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
110
- import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
111
- import { cn } from '@/lib/utils';
112
-
113
- // Example usage
114
- <Card>
115
- <CardHeader>
116
- <CardTitle>Dashboard</CardTitle>
117
- </CardHeader>
118
- <CardContent>
119
- <Tabs defaultValue="overview" className={cn("w-full")}>
120
- <TabsList>
121
- <TabsTrigger value="overview">Overview</TabsTrigger>
122
- <TabsTrigger value="analytics">Analytics</TabsTrigger>
123
- </TabsList>
124
- <TabsContent value="overview">
125
- <Button>Action</Button>
126
- </TabsContent>
127
- </Tabs>
128
- </CardContent>
129
- </Card>
130
- ```
131
-
132
- ### 4. Chart Integration
133
-
134
- Install Recharts if not present: `npm install recharts`
135
-
136
- Use Recharts for data visualization:
137
- ```tsx
138
- import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
139
- import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
140
-
141
- interface ChartData {
142
- name: string;
143
- value: number;
144
- }
145
-
146
- function ChartComponent({ data }: { data: ChartData[] }) {
147
- return (
148
- <Card>
149
- <CardHeader>
150
- <CardTitle>Analytics</CardTitle>
151
- </CardHeader>
152
- <CardContent>
153
- <ResponsiveContainer width="100%" height={300}>
154
- <LineChart data={data}>
155
- <CartesianGrid strokeDasharray="3 3" />
156
- <XAxis dataKey="name" />
157
- <YAxis />
158
- <Tooltip />
159
- <Line type="monotone" dataKey="value" stroke="#041e42" />
160
- </LineChart>
161
- </ResponsiveContainer>
162
- </CardContent>
163
- </Card>
164
- );
165
- }
166
- ```
167
-
168
- ## 🎨 Design System Guidelines
169
-
170
- ### Colors
171
- - **Primary**: Navy blue (`#041e42`) - BlueCopa brand color
172
- - **Background**: Light gray (`bg-gray-50`)
173
- - **Cards**: White with subtle shadow (`bg-white shadow-sm`)
174
- - **Text**: Gray scale (`text-gray-900`, `text-gray-600`)
175
-
176
- ### Layout Patterns
177
- - **Container**: `container mx-auto py-6` for page layouts
178
- - **Grid**: `grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6` for responsive grids
179
- - **Spacing**: Use Tailwind spacing scale (`p-4`, `mb-6`, etc.)
180
-
181
- ### Component Structure
182
- ```tsx
183
- // Standard page layout
184
- <div className="container mx-auto py-6">
185
- <div className="mb-6">
186
- <h1 className="text-2xl font-bold text-gray-900">Page Title</h1>
187
- <p className="text-gray-600">Page description</p>
188
- </div>
189
-
190
- <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
191
- {/* Cards or components */}
192
- </div>
193
- </div>
194
- ```
195
-
196
- ## 🛠️ Common Tasks for Agents
197
-
198
- ### Adding a New Dashboard Card
199
- 1. Create component in `src/components/` (e.g., NewCard.tsx)
200
- 2. Use Card component wrapper from ui/
201
- 3. Include loading and error states with TanStack Query
202
- 4. Use @bluecopa/react hooks for data (e.g., useGetTableById)
203
-
204
- ### Creating Forms
205
- 1. Use Radix UI form components (add via shadcn-ui: `npx shadcn-ui@latest add form`)
206
- 2. Add TypeScript types for form data in `src/types/`
207
- 3. Include validation with Zod and error handling
208
- 4. Follow BlueCopa styling patterns
209
-
210
- ### Adding Data Tables
211
- 1. For complex tables, install and use AG Grid (@bluecopa/aggrid)
212
- 2. For simple tables, use HTML table with Tailwind styling
213
- 3. Include sorting, filtering, and pagination as needed
214
- 4. Integrate with @bluecopa/react for data
215
-
216
- ### Implementing Search
217
- 1. Add search state management with React state or form libraries
218
- 2. Use debounced input for API calls (e.g., via useGetTableById with query params)
219
- 3. Show loading states during search
220
- 4. Handle empty states gracefully with conditional rendering
221
-
222
- ## 🚨 Important Notes for Agents
223
-
224
- ### Environment Variables
225
- Always reference environment variables correctly for Vite:
226
- ```tsx
227
- const apiToken = import.meta.env.VITE_BLUECOPA_API_TOKEN;
228
- const apiUrl = import.meta.env.VITE_BLUECOPA_API_URL;
229
- ```
230
-
231
- ### Imports
232
- Use path aliases consistently (configured in tsconfig.json):
233
- ```tsx
234
- import { Button } from '@/components/ui/button';
235
- import { useGetTableById } from '@bluecopa/core';
236
- import { cn } from '@/lib/utils';
237
- ```
238
-
239
- ### TypeScript
240
- Always include proper TypeScript types:
241
- ```tsx
242
- import { FileUrlResponse, TableData, WorkflowStatus } from '@bluecopa/core/types';
243
-
244
- interface ComponentProps {
245
- data: TableData[];
246
- onSelect: (id: string) => void;
247
- }
248
-
249
- function Component({ data, onSelect }: ComponentProps) {
250
- // Component implementation
251
- }
252
- ```
253
-
254
- ### Error Handling
255
- Include proper error boundaries and loading states:
256
- ```tsx
257
- if (fileUrlLoading) return <div className="p-4">Loading...</div>;
258
- if (error) return <div className="p-4 text-red-600">Error: {error.message}</div>;
259
- if (!data) return <div className="p-4 text-gray-500">No data available</div>;
260
- ```
261
-
262
- ## 📚 Reference Links
263
- - [React Router Documentation](https://reactrouter.com)
264
- - [TailwindCSS Documentation](https://tailwindcss.com)
265
- - [Radix UI Documentation](https://www.radix-ui.com)
266
- - [shadcn/ui Documentation](https://ui.shadcn.com)
267
- - [Recharts Documentation](https://recharts.org)
268
- - [TanStack Query Documentation](https://tanstack.com/query/latest)
269
- - [Lucide React Icons](https://lucide.dev)
270
- - [BlueCopa React Package](https://www.npmjs.com/package/@bluecopa/react)
271
-
272
- ## 🔄 Development Workflow
273
-
274
- When working on this project:
275
-
276
- 1. **Start development server**: `npm run dev`
277
- 2. **Type checking**: `npm run type-check`
278
- 3. **Linting**: `npm run lint`
279
- 4. **Building**: `npm run build`
280
- 5. **Preview build**: `npm run preview`
281
-
282
- The development server supports hot module replacement, so changes will be reflected immediately in the browser.
@@ -1,40 +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
- rm -f pnpm-lock.yaml
16
- echo "✅ Removed node_modules and lock files"
17
-
18
- # Remove environment files (keeping example)
19
- rm -f .env.local
20
- echo "✅ Removed .env.local"
21
-
22
- # Optionally reinstall dependencies
23
- if [ "$1" = "--install" ]; then
24
- echo "📦 Reinstalling dependencies..."
25
- if command -v pnpm &> /dev/null; then
26
- pnpm install
27
- else
28
- npm install
29
- fi
30
- echo "✅ Dependencies reinstalled"
31
- fi
32
-
33
- echo "🎉 Cleanup complete!"
34
- echo ""
35
- echo "To reinstall dependencies:"
36
- echo " pnpm install # recommended"
37
- echo " npm install # alternative"
38
- echo ""
39
- echo "To set up environment:"
40
- echo " ./setup.sh"
@@ -1,6 +0,0 @@
1
- module.exports = {
2
- plugins: {
3
- tailwindcss: {},
4
- autoprefixer: {},
5
- },
6
- }
@@ -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>
@@ -1,56 +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
- if [ ! -f tailwind.config.js ] && [ ! -f tailwind.config.cjs ]; then
46
- npx tailwindcss init -p
47
- else
48
- echo "✅ Tailwind already configured"
49
- fi
50
-
51
- echo "✅ Setup complete!"
52
- echo ""
53
- echo "🎉 You can now start the development server:"
54
- echo " npm run dev"
55
- echo ""
56
- echo "📖 Open http://localhost:3000 to view your application"