create-bluecopa-react-app 1.0.3 → 1.0.4
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
CHANGED
|
@@ -1,6 +1,48 @@
|
|
|
1
|
-
#
|
|
1
|
+
# create-bluecopa-react-app [](https://www.npmjs.com/package/create-bluecopa-react-app) [](LICENSE)
|
|
2
2
|
|
|
3
|
-
A CLI
|
|
3
|
+
## A CLI Tool for BlueCopa React Applications
|
|
4
|
+
|
|
5
|
+
A command-line interface for bootstrapping modern React applications with BlueCopa integration, featuring opinionated best practices and pre-configured tooling.
|
|
6
|
+
|
|
7
|
+
## Table of Contents
|
|
8
|
+
|
|
9
|
+
- [Version](#version)
|
|
10
|
+
- [Installation](#installation)
|
|
11
|
+
- [Requirements](#requirements)
|
|
12
|
+
- [Configuration](#configuration)
|
|
13
|
+
- [Features](#features)
|
|
14
|
+
- [Usage](#usage)
|
|
15
|
+
- [API Documentation](#api-documentation)
|
|
16
|
+
- [Examples](#examples)
|
|
17
|
+
- [Development](#development)
|
|
18
|
+
- [Contributing](#contributing)
|
|
19
|
+
- [License](#license)
|
|
20
|
+
|
|
21
|
+
## Version
|
|
22
|
+
|
|
23
|
+
Current version: 0.1.0
|
|
24
|
+
|
|
25
|
+
## Installation
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
npm install -g create-bluecopa-react-app
|
|
29
|
+
# or
|
|
30
|
+
pnpm add -g create-bluecopa-react-app
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## Requirements
|
|
34
|
+
|
|
35
|
+
- Node.js >= 18.0.0
|
|
36
|
+
- npm >= 9.0.0 or pnpm >= 8.0.0
|
|
37
|
+
|
|
38
|
+
## Configuration
|
|
39
|
+
|
|
40
|
+
The CLI uses environment variables for configuration:
|
|
41
|
+
|
|
42
|
+
```bash
|
|
43
|
+
# Optional configuration
|
|
44
|
+
export BLUECOPA_BOILERPLATE_REGISTRY=https://registry.npmjs.org
|
|
45
|
+
```
|
|
4
46
|
|
|
5
47
|
## Features
|
|
6
48
|
|
|
@@ -8,235 +50,65 @@ A CLI tool to bootstrap modern React applications for BlueCopa with built-in UI
|
|
|
8
50
|
- 🌐 **Microfrontend Support**: Single-spa compatible with module federation
|
|
9
51
|
- 📊 **Data Visualization**: Recharts integration for charts and analytics
|
|
10
52
|
- 🎨 **UI Components**: Radix UI primitives with custom styling
|
|
11
|
-
- 📡 **BlueCopa React Components**: Pre-configured
|
|
53
|
+
- 📡 **BlueCopa React Components**: Pre-configured [`@bluecopa/react`](packages/react:1) package with hooks (includes TanStack Query integration)
|
|
12
54
|
- 🎯 **Type Safety**: Full TypeScript support
|
|
13
55
|
- 📱 **Responsive Design**: Tailwind CSS with mobile-first approach and BlueCopa design system
|
|
14
56
|
- 🛠️ **Development Tools**: ESLint, TypeScript checking, and Vite fast build system
|
|
15
57
|
- ⚡ **Fast Development**: Hot module replacement with Vite
|
|
16
58
|
- 🔄 **Client-side Routing**: React Router v6 for SPA navigation
|
|
17
59
|
|
|
18
|
-
##
|
|
60
|
+
## Usage
|
|
19
61
|
|
|
20
|
-
|
|
21
|
-
# Install the CLI tool globally
|
|
22
|
-
npm install -g create-bluecopa-react-app
|
|
62
|
+
### Creating a New Application
|
|
23
63
|
|
|
24
|
-
|
|
64
|
+
```bash
|
|
65
|
+
# Create new app
|
|
25
66
|
create-bluecopa-react-app my-dashboard
|
|
26
67
|
|
|
27
|
-
# Or use npx
|
|
68
|
+
# Or use npx
|
|
28
69
|
npx create-bluecopa-react-app my-dashboard
|
|
29
|
-
|
|
30
|
-
# Navigate to the project
|
|
31
|
-
cd my-dashboard
|
|
32
|
-
|
|
33
|
-
# Install dependencies (if not auto-installed)
|
|
34
|
-
npm install
|
|
35
|
-
|
|
36
|
-
# Start development server
|
|
37
|
-
npm run dev
|
|
38
70
|
```
|
|
39
71
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
### BlueCopa React Router Template
|
|
43
|
-
|
|
44
|
-
A foundational template that provides:
|
|
45
|
-
|
|
46
|
-
- **Modern React Setup**: React 18 with TypeScript, React Router v6, and Vite
|
|
47
|
-
- **BlueCopa Components**: Pre-configured @bluecopa/react component library with hooks
|
|
48
|
-
- **UI Foundation**: Radix UI primitives with custom styling system
|
|
49
|
-
- **Data Visualization**: Recharts for charts and analytics
|
|
50
|
-
- **Styling System**: Tailwind CSS with BlueCopa design tokens and navy theme
|
|
51
|
-
- **Development Setup**: ESLint, TypeScript configuration, and Vite optimization
|
|
52
|
-
- **Environment Configuration**: Ready-to-use environment variable setup
|
|
53
|
-
- **Client-side Routing**: React Router v6 for smooth SPA navigation
|
|
54
|
-
|
|
55
|
-
#### Key Dependencies Included
|
|
56
|
-
|
|
57
|
-
```typescript
|
|
58
|
-
// Core BlueCopa and React ecosystem
|
|
59
|
-
"@bluecopa/react": "^0.1.3"
|
|
60
|
-
"react": "^18.3.0"
|
|
61
|
-
"react-dom": "^18.3.0"
|
|
62
|
-
"react-router-dom": "^6.26.0"
|
|
63
|
-
"typescript": "^5.6.0"
|
|
64
|
-
|
|
65
|
-
// UI and Styling
|
|
66
|
-
"@radix-ui/react-avatar": "^1.1.0"
|
|
67
|
-
"@radix-ui/react-dropdown-menu": "^2.1.0"
|
|
68
|
-
"@radix-ui/react-select": "^2.1.0"
|
|
69
|
-
"@radix-ui/react-separator": "^1.1.0"
|
|
70
|
-
"@radix-ui/react-slot": "^1.1.0"
|
|
71
|
-
"@radix-ui/react-tabs": "^1.1.0"
|
|
72
|
-
"tailwindcss": "^3.4.17"
|
|
73
|
-
"lucide-react": "^0.445.0"
|
|
74
|
-
"class-variance-authority": "^0.7.0"
|
|
75
|
-
"clsx": "^2.1.0"
|
|
76
|
-
"tailwind-merge": "^2.5.0"
|
|
77
|
-
"tailwindcss-animate": "^1.0.7"
|
|
78
|
-
|
|
79
|
-
// Data Visualization
|
|
80
|
-
"recharts": "^2.12.0"
|
|
81
|
-
|
|
82
|
-
// Microfrontend
|
|
83
|
-
"single-spa": "^6.0.3"
|
|
84
|
-
"single-spa-react": "^6.0.2"
|
|
85
|
-
|
|
86
|
-
// Development and Build
|
|
87
|
-
"vite": "^7.1.5"
|
|
88
|
-
"eslint": "^8.57.0"
|
|
89
|
-
"@vitejs/plugin-react-swc": "^4.0.1"
|
|
90
|
-
"@originjs/vite-plugin-federation": "^1.4.1"
|
|
91
|
-
```
|
|
72
|
+
### CLI Options
|
|
92
73
|
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
my-bluecopa-app/
|
|
99
|
-
├── src/
|
|
100
|
-
│ ├── components/ # Reusable UI components
|
|
101
|
-
│ │ ├── ui/ # Base UI components (buttons, cards, etc.)
|
|
102
|
-
│ │ └── navbar.tsx # Navigation component
|
|
103
|
-
│ ├── hooks/ # Custom React hooks
|
|
104
|
-
│ │ └── use-api.ts # Bluecopa API hooks
|
|
105
|
-
│ ├── lib/ # Utilities and helpers
|
|
106
|
-
│ │ └── utils.ts # Helper functions and utilities
|
|
107
|
-
│ ├── pages/ # Route components
|
|
108
|
-
│ │ ├── Home.tsx # Home page component
|
|
109
|
-
│ │ └── Dashboard.tsx # Dashboard page component
|
|
110
|
-
│ ├── providers/ # React context providers
|
|
111
|
-
│ │ └── query-provider.tsx # TanStack Query provider via @bluecopa/react
|
|
112
|
-
│ ├── types/ # TypeScript type definitions
|
|
113
|
-
│ ├── App.tsx # Main app component with routing
|
|
114
|
-
│ ├── main.tsx # Application entry point
|
|
115
|
-
│ ├── single-spa.tsx # Single-spa root component
|
|
116
|
-
│ └── index.css # Global styles and Tailwind imports
|
|
117
|
-
├── public/ # Static assets
|
|
118
|
-
├── .env.example # Environment variables template
|
|
119
|
-
├── package.json # Dependencies and scripts
|
|
120
|
-
├── vite.config.ts # Vite configuration with module federation
|
|
121
|
-
├── tailwind.config.js # Tailwind CSS configuration
|
|
122
|
-
├── tsconfig.json # TypeScript configuration
|
|
123
|
-
├── postcss.config.js # PostCSS configuration
|
|
124
|
-
└── README.md # Project documentation
|
|
125
|
-
```
|
|
74
|
+
| Option | Description |
|
|
75
|
+
|--------|-------------|
|
|
76
|
+
| `--skip-install` | Skip dependency installation |
|
|
77
|
+
| `--template` | Specify template version (default: latest) |
|
|
78
|
+
| `--help` | Show help information |
|
|
126
79
|
|
|
127
|
-
##
|
|
80
|
+
## API Documentation
|
|
128
81
|
|
|
129
|
-
###
|
|
82
|
+
### `create-bluecopa-react-app [project-name] [options]`
|
|
130
83
|
|
|
131
|
-
|
|
84
|
+
Creates a new BlueCopa React application.
|
|
132
85
|
|
|
133
|
-
|
|
134
|
-
|
|
86
|
+
**Parameters:**
|
|
87
|
+
- `project-name`: Name of the new project directory
|
|
88
|
+
- `options`: CLI options (see above)
|
|
135
89
|
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
if (isLoading) return <div>Loading...</div>;
|
|
141
|
-
if (error) return <div>Error: {error.message}</div>;
|
|
142
|
-
|
|
143
|
-
return (
|
|
144
|
-
<div>
|
|
145
|
-
<h1>Welcome, {userData?.user?.firstName}!</h1>
|
|
146
|
-
</div>
|
|
147
|
-
);
|
|
148
|
-
}
|
|
149
|
-
```
|
|
90
|
+
**Returns:**
|
|
91
|
+
- Creates project structure
|
|
92
|
+
- Installs dependencies
|
|
93
|
+
- Configures environment
|
|
150
94
|
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
Add new routes in `src/App.tsx`:
|
|
154
|
-
|
|
155
|
-
```typescript
|
|
156
|
-
import { Routes, Route } from 'react-router-dom';
|
|
157
|
-
import NewPage from '@/pages/NewPage';
|
|
158
|
-
|
|
159
|
-
export default function App() {
|
|
160
|
-
return (
|
|
161
|
-
<QueryProvider>
|
|
162
|
-
<Routes>
|
|
163
|
-
<Route path="/" element={<Home />} />
|
|
164
|
-
<Route path="/dashboard" element={<Dashboard />} />
|
|
165
|
-
<Route path="/new-page" element={<NewPage />} />
|
|
166
|
-
</Routes>
|
|
167
|
-
</QueryProvider>
|
|
168
|
-
);
|
|
169
|
-
}
|
|
170
|
-
```
|
|
95
|
+
## Examples
|
|
171
96
|
|
|
172
|
-
###
|
|
173
|
-
|
|
174
|
-
Use the included Radix UI components with Tailwind styling:
|
|
175
|
-
|
|
176
|
-
```typescript
|
|
177
|
-
import { Button } from '@/components/ui/button';
|
|
178
|
-
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
179
|
-
|
|
180
|
-
function Dashboard() {
|
|
181
|
-
return (
|
|
182
|
-
<Card>
|
|
183
|
-
<CardHeader>
|
|
184
|
-
<CardTitle>My Dashboard</CardTitle>
|
|
185
|
-
</CardHeader>
|
|
186
|
-
<CardContent>
|
|
187
|
-
<Button>Click me</Button>
|
|
188
|
-
</CardContent>
|
|
189
|
-
</Card>
|
|
190
|
-
);
|
|
191
|
-
}
|
|
192
|
-
```
|
|
97
|
+
### Basic Usage
|
|
193
98
|
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
Use Recharts for data visualization:
|
|
197
|
-
|
|
198
|
-
```typescript
|
|
199
|
-
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
|
|
200
|
-
|
|
201
|
-
const data = [
|
|
202
|
-
{ name: 'Jan', value: 400 },
|
|
203
|
-
{ name: 'Feb', value: 300 },
|
|
204
|
-
{ name: 'Mar', value: 600 },
|
|
205
|
-
];
|
|
206
|
-
|
|
207
|
-
function ChartComponent() {
|
|
208
|
-
return (
|
|
209
|
-
<ResponsiveContainer width="100%" height={300}>
|
|
210
|
-
<LineChart data={data}>
|
|
211
|
-
<CartesianGrid strokeDasharray="3 3" />
|
|
212
|
-
<XAxis dataKey="name" />
|
|
213
|
-
<YAxis />
|
|
214
|
-
<Tooltip />
|
|
215
|
-
<Line type="monotone" dataKey="value" stroke="#8884d8" />
|
|
216
|
-
</LineChart>
|
|
217
|
-
</ResponsiveContainer>
|
|
218
|
-
);
|
|
219
|
-
}
|
|
99
|
+
```bash
|
|
100
|
+
create-bluecopa-react-app my-dashboard
|
|
220
101
|
```
|
|
221
102
|
|
|
222
|
-
###
|
|
223
|
-
|
|
224
|
-
Create a `.env.local` file from the example:
|
|
103
|
+
### Skipping Dependency Installation
|
|
225
104
|
|
|
226
105
|
```bash
|
|
227
|
-
|
|
228
|
-
# Edit .env.local with your Bluecopa credentials from dashboard → Settings → API Tokens
|
|
106
|
+
create-bluecopa-react-app my-dashboard --skip-install
|
|
229
107
|
```
|
|
230
108
|
|
|
231
|
-
|
|
232
|
-
```bash
|
|
233
|
-
VITE_BLUECOPA_API_TOKEN=your-bluecopa-api-token
|
|
234
|
-
VITE_BLUECOPA_API_URL=https://develop.bluecopa.com/api/v1
|
|
235
|
-
VITE_BLUECOPA_WORKSPACE_ID=your-workspace-id
|
|
236
|
-
- **Vite Module Federation** - For microfrontend integration
|
|
237
|
-
```
|
|
109
|
+
## Development
|
|
238
110
|
|
|
239
|
-
|
|
111
|
+
### Available Scripts
|
|
240
112
|
|
|
241
113
|
- `npm run dev` - Start Vite development server with hot reload
|
|
242
114
|
- `npm run build` - Build for production (TypeScript + Vite optimization)
|
|
@@ -247,48 +119,14 @@ VITE_BLUECOPA_WORKSPACE_ID=your-workspace-id
|
|
|
247
119
|
- `npm run type-check` - Run TypeScript type checking without emitting files
|
|
248
120
|
- `npm run clean` - Clean build artifacts and dependencies
|
|
249
121
|
|
|
250
|
-
|
|
122
|
+
### Technologies Used
|
|
251
123
|
|
|
252
124
|
- **React 18** - Modern React with concurrent features
|
|
253
125
|
- **React Router v6** - Declarative routing for React SPAs
|
|
254
126
|
- **Vite** - Fast build tool and development server
|
|
255
127
|
- **TypeScript** - Full type safety and developer experience
|
|
256
|
-
-
|
|
128
|
+
- **[`@bluecopa/react`](packages/react:1)** - BlueCopa-specific React components and hooks
|
|
257
129
|
- **Radix UI** - Unstyled, accessible UI primitives
|
|
258
|
-
- **Single-spa** - Microfrontend framework support
|
|
259
130
|
- **Recharts** - Composable charting library for React
|
|
260
131
|
- **Tailwind CSS** - Utility-first CSS framework with BlueCopa design system
|
|
261
132
|
- **Lucide React** - Beautiful, customizable icons
|
|
262
|
-
|
|
263
|
-
## CLI Usage
|
|
264
|
-
|
|
265
|
-
The CLI will prompt you for project details and automatically:
|
|
266
|
-
|
|
267
|
-
- Create the project structure
|
|
268
|
-
- Copy template files
|
|
269
|
-
- Update package.json with your project name
|
|
270
|
-
- Install dependencies (unless `--skip-install` is used)
|
|
271
|
-
- Provide next steps for development
|
|
272
|
-
|
|
273
|
-
Example output:
|
|
274
|
-
|
|
275
|
-
```bash
|
|
276
|
-
✔ Creating project structure...
|
|
277
|
-
✔ Dependencies installed
|
|
278
|
-
✔ Success! Created my-dashboard at /path/to/my-dashboard
|
|
279
|
-
|
|
280
|
-
Inside that directory, you can run several commands:
|
|
281
|
-
|
|
282
|
-
npm run dev
|
|
283
|
-
Starts the development server.
|
|
284
|
-
|
|
285
|
-
npm run build
|
|
286
|
-
Bundles the app into static files for production.
|
|
287
|
-
|
|
288
|
-
We suggest that you begin by typing:
|
|
289
|
-
|
|
290
|
-
cd my-dashboard
|
|
291
|
-
npm run dev
|
|
292
|
-
|
|
293
|
-
Happy coding with Bluecopa! 🚀
|
|
294
|
-
```
|
package/package.json
CHANGED
|
@@ -13,7 +13,7 @@ This template is designed to work seamlessly with AI coding assistants for rapid
|
|
|
13
13
|
- **Build Tool**: Vite (fast HMR and building)
|
|
14
14
|
- **Styling**: TailwindCSS with BlueCopa design system
|
|
15
15
|
- **UI Components**: Radix UI primitives (add via shadcn-ui for pre-styled components)
|
|
16
|
-
- **Data Fetching**: TanStack Query with @bluecopa/
|
|
16
|
+
- **Data Fetching**: TanStack Query with @bluecopa/core hooks
|
|
17
17
|
- **Charts**: Recharts for data visualization
|
|
18
18
|
- **Icons**: Lucide React
|
|
19
19
|
|
|
@@ -22,11 +22,11 @@ This template is designed to work seamlessly with AI coding assistants for rapid
|
|
|
22
22
|
src/
|
|
23
23
|
├── components/ui/ # Reusable UI components (e.g., Button, Card via shadcn-ui; bluecopa-logo)
|
|
24
24
|
├── components/ # Business logic components (Navbar, DashboardLayout, etc.)
|
|
25
|
-
├── hooks/ # Custom React hooks (if needed; primarily use @bluecopa/
|
|
25
|
+
├── hooks/ # Custom React hooks (if needed; primarily use @bluecopa/core)
|
|
26
26
|
├── pages/ # Route components (Home, Dashboard)
|
|
27
27
|
├── providers/ # React context providers (e.g., QueryProvider)
|
|
28
28
|
├── lib/ # Utility functions and helpers (e.g., utils.ts with cn)
|
|
29
|
-
└── types/ # TypeScript type definitions (e.g.,
|
|
29
|
+
└── types/ # TypeScript type definitions (e.g., for API responses)
|
|
30
30
|
```
|
|
31
31
|
|
|
32
32
|
## 🔧 Development Patterns
|
|
@@ -38,10 +38,10 @@ When asked to create a new page:
|
|
|
38
38
|
1. **Create the page component** in `src/pages/NewPage.tsx`:
|
|
39
39
|
```tsx
|
|
40
40
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
41
|
-
import {
|
|
41
|
+
import { useGetWorkflowInstanceStatusById } from '@bluecopa/core';
|
|
42
42
|
|
|
43
43
|
export default function NewPage() {
|
|
44
|
-
const { data:
|
|
44
|
+
const { data: workflowStatus, isLoading } = useGetWorkflowInstanceStatusById('workflowId');
|
|
45
45
|
|
|
46
46
|
if (isLoading) return <div>Loading...</div>;
|
|
47
47
|
|
|
@@ -53,7 +53,7 @@ export default function NewPage() {
|
|
|
53
53
|
</CardHeader>
|
|
54
54
|
<CardContent>
|
|
55
55
|
{/* Page content */}
|
|
56
|
-
<p>
|
|
56
|
+
<p>Workflow status: {workflowStatus?.status}</p>
|
|
57
57
|
</CardContent>
|
|
58
58
|
</Card>
|
|
59
59
|
</div>
|
|
@@ -81,22 +81,21 @@ const navigation = [
|
|
|
81
81
|
|
|
82
82
|
### 2. Using BlueCopa API Hooks
|
|
83
83
|
|
|
84
|
-
Install @bluecopa/
|
|
85
|
-
|
|
86
|
-
Use the pre-configured hooks from `@bluecopa/react`:
|
|
84
|
+
Install @bluecopa/core if not present: `npm install @bluecopa/core`
|
|
87
85
|
|
|
86
|
+
Use the pre-configured hooks from `@bluecopa/core`:
|
|
88
87
|
```tsx
|
|
89
|
-
import {
|
|
88
|
+
import { useGetFileUrlByFileId, useGetTableById, useGetWorkflowInstanceStatusById } from '@bluecopa/core';
|
|
90
89
|
|
|
91
90
|
function DataComponent() {
|
|
92
|
-
const { data:
|
|
93
|
-
const { data:
|
|
94
|
-
const { data:
|
|
91
|
+
const { data: fileUrlData, isLoading: fileUrlLoading } = useGetFileUrlByFileId('key', 'type', 'GET');
|
|
92
|
+
const { data: tableData } = useGetTableById('tableId');
|
|
93
|
+
const { data: workflowStatus } = useGetWorkflowInstanceStatusById('workflowId');
|
|
95
94
|
|
|
96
|
-
if (
|
|
97
|
-
if (
|
|
95
|
+
if (fileUrlLoading) return <div>Loading...</div>;
|
|
96
|
+
if (!fileUrlData) return <div>No data available</div>;
|
|
98
97
|
|
|
99
|
-
return <div>Data: {JSON.stringify(
|
|
98
|
+
return <div>Data: {JSON.stringify(fileUrlData)}</div>;
|
|
100
99
|
}
|
|
101
100
|
```
|
|
102
101
|
|
|
@@ -107,7 +106,6 @@ For custom hooks, create in `src/hooks/` and wrap TanStack Query.
|
|
|
107
106
|
Add shadcn-ui components if needed: `npx shadcn-ui@latest add card button tabs`
|
|
108
107
|
|
|
109
108
|
Use the existing UI components from `src/components/ui/`:
|
|
110
|
-
|
|
111
109
|
```tsx
|
|
112
110
|
import { Button } from '@/components/ui/button';
|
|
113
111
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
@@ -138,7 +136,6 @@ import { cn } from '@/lib/utils';
|
|
|
138
136
|
Install Recharts if not present: `npm install recharts`
|
|
139
137
|
|
|
140
138
|
Use Recharts for data visualization:
|
|
141
|
-
|
|
142
139
|
```tsx
|
|
143
140
|
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
|
|
144
141
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
@@ -204,7 +201,7 @@ function ChartComponent({ data }: { data: ChartData[] }) {
|
|
|
204
201
|
1. Create component in `src/components/` (e.g., NewCard.tsx)
|
|
205
202
|
2. Use Card component wrapper from ui/
|
|
206
203
|
3. Include loading and error states with TanStack Query
|
|
207
|
-
4. Use @bluecopa/
|
|
204
|
+
4. Use @bluecopa/core hooks for data (e.g., useGetTableById)
|
|
208
205
|
|
|
209
206
|
### Creating Forms
|
|
210
207
|
1. Use Radix UI form components (add via shadcn-ui: `npx shadcn-ui@latest add form`)
|
|
@@ -216,11 +213,11 @@ function ChartComponent({ data }: { data: ChartData[] }) {
|
|
|
216
213
|
1. For complex tables, install and use AG Grid (@bluecopa/aggrid)
|
|
217
214
|
2. For simple tables, use HTML table with Tailwind styling
|
|
218
215
|
3. Include sorting, filtering, and pagination as needed
|
|
219
|
-
4. Integrate with @bluecopa/
|
|
216
|
+
4. Integrate with @bluecopa/core for data
|
|
220
217
|
|
|
221
218
|
### Implementing Search
|
|
222
219
|
1. Add search state management with React state or form libraries
|
|
223
|
-
2. Use debounced input for API calls (e.g., via
|
|
220
|
+
2. Use debounced input for API calls (e.g., via useGetTableById with query params)
|
|
224
221
|
3. Show loading states during search
|
|
225
222
|
4. Handle empty states gracefully with conditional rendering
|
|
226
223
|
|
|
@@ -237,17 +234,17 @@ const apiUrl = import.meta.env.VITE_BLUECOPA_API_URL;
|
|
|
237
234
|
Use path aliases consistently (configured in tsconfig.json):
|
|
238
235
|
```tsx
|
|
239
236
|
import { Button } from '@/components/ui/button';
|
|
240
|
-
import {
|
|
237
|
+
import { useGetTableById } from '@bluecopa/core';
|
|
241
238
|
import { cn } from '@/lib/utils';
|
|
242
239
|
```
|
|
243
240
|
|
|
244
241
|
### TypeScript
|
|
245
242
|
Always include proper TypeScript types:
|
|
246
243
|
```tsx
|
|
247
|
-
import {
|
|
244
|
+
import { FileUrlResponse, TableData, WorkflowStatus } from '@/types';
|
|
248
245
|
|
|
249
246
|
interface ComponentProps {
|
|
250
|
-
data:
|
|
247
|
+
data: TableData[];
|
|
251
248
|
onSelect: (id: string) => void;
|
|
252
249
|
}
|
|
253
250
|
|
|
@@ -259,13 +256,12 @@ function Component({ data, onSelect }: ComponentProps) {
|
|
|
259
256
|
### Error Handling
|
|
260
257
|
Include proper error boundaries and loading states:
|
|
261
258
|
```tsx
|
|
262
|
-
if (
|
|
259
|
+
if (fileUrlLoading) return <div className="p-4">Loading...</div>;
|
|
263
260
|
if (error) return <div className="p-4 text-red-600">Error: {error.message}</div>;
|
|
264
261
|
if (!data) return <div className="p-4 text-gray-500">No data available</div>;
|
|
265
262
|
```
|
|
266
263
|
|
|
267
264
|
## 📚 Reference Links
|
|
268
|
-
|
|
269
265
|
- [React Router Documentation](https://reactrouter.com)
|
|
270
266
|
- [TailwindCSS Documentation](https://tailwindcss.com)
|
|
271
267
|
- [Radix UI Documentation](https://www.radix-ui.com)
|
|
@@ -273,7 +269,7 @@ if (!data) return <div className="p-4 text-gray-500">No data available</div>;
|
|
|
273
269
|
- [Recharts Documentation](https://recharts.org)
|
|
274
270
|
- [TanStack Query Documentation](https://tanstack.com/query/latest)
|
|
275
271
|
- [Lucide React Icons](https://lucide.dev)
|
|
276
|
-
- [BlueCopa
|
|
272
|
+
- [BlueCopa Core Package](https://www.npmjs.com/package/@bluecopa/core)
|
|
277
273
|
|
|
278
274
|
## 🔄 Development Workflow
|
|
279
275
|
|
|
@@ -6,11 +6,11 @@ A production-ready React template with React Router for building modern BlueCopa
|
|
|
6
6
|
|
|
7
7
|
This template now uses the latest Bluecopa design system with:
|
|
8
8
|
- **Navy Blue Header**: Uses the official Bluecopa navy color (`#041e42`) for headers and navigation
|
|
9
|
-
- **Modern Card Layout**: Clean, borderless cards with subtle shadows
|
|
10
|
-
- **Consistent Spacing**: Improved spacing and layout following the latest app design
|
|
11
|
-
- **User Profile Integration**: Modern user dropdown with avatar
|
|
12
|
-
- **Search & Notifications**: Built-in search bar and notification system
|
|
13
|
-
- **Responsive Design**: Mobile-first approach with proper responsive breakpoints
|
|
9
|
+
- **Modern Card Layout**: Clean, borderless cards with subtle shadows and consistent padding
|
|
10
|
+
- **Consistent Spacing**: Improved spacing and layout following the latest app design system
|
|
11
|
+
- **User Profile Integration**: Modern user dropdown with avatar, profile information, and logout
|
|
12
|
+
- **Search & Notifications**: Built-in search bar and notification system with Radix UI
|
|
13
|
+
- **Responsive Design**: Mobile-first approach with proper responsive breakpoints and device testing
|
|
14
14
|
|
|
15
15
|
## 🚀 Quick Start
|
|
16
16
|
|
|
@@ -36,17 +36,6 @@ npx create-bluecopa-react-app my-dashboard
|
|
|
36
36
|
- npm or pnpm
|
|
37
37
|
- Access to Bluecopa workspace
|
|
38
38
|
|
|
39
|
-
### Installation
|
|
40
|
-
|
|
41
|
-
1. **Clone or copy the template**:
|
|
42
|
-
```bash
|
|
43
|
-
# If using as part of the blui monorepo
|
|
44
|
-
cd packages/boilerplate/react/templates/latest
|
|
45
|
-
|
|
46
|
-
# Or copy the template to your project location
|
|
47
|
-
cp -r packages/boilerplate/react/templates/latest my-bluecopa-app
|
|
48
|
-
cd my-bluecopa-app
|
|
49
|
-
```
|
|
50
39
|
|
|
51
40
|
2. **Install dependencies**:
|
|
52
41
|
```bash
|
|
@@ -240,14 +229,20 @@ module.exports = {
|
|
|
240
229
|
}
|
|
241
230
|
```
|
|
242
231
|
|
|
243
|
-
## 🚀 Deployment
|
|
232
|
+
## 🚀 Deployment & Production
|
|
244
233
|
|
|
245
234
|
### Build for Production
|
|
246
235
|
```bash
|
|
247
236
|
npm run build
|
|
248
237
|
```
|
|
249
238
|
|
|
250
|
-
The
|
|
239
|
+
The production-ready files will be output to the `dist/` directory with optimized bundling and minification.
|
|
240
|
+
|
|
241
|
+
### Production Best Practices
|
|
242
|
+
- Validate environment variables before building
|
|
243
|
+
- Test workflow triggers in staging environment
|
|
244
|
+
- Monitor bundle size with `npm run build --report`
|
|
245
|
+
- Use version control for deployment artifacts
|
|
251
246
|
|
|
252
247
|
### Deploy to Vercel
|
|
253
248
|
1. Push your code to GitHub
|
|
@@ -266,21 +261,3 @@ The built files will be in the `dist/` directory.
|
|
|
266
261
|
- Use environment variables for all sensitive data
|
|
267
262
|
- Rotate API tokens regularly
|
|
268
263
|
- Use different tokens for development and production
|
|
269
|
-
|
|
270
|
-
## 🤝 Contributing
|
|
271
|
-
|
|
272
|
-
1. Fork the repository
|
|
273
|
-
2. Create a feature branch
|
|
274
|
-
3. Make your changes
|
|
275
|
-
4. Add tests if applicable
|
|
276
|
-
5. Submit a pull request
|
|
277
|
-
|
|
278
|
-
## 📄 License
|
|
279
|
-
|
|
280
|
-
This template is part of the Bluecopa ecosystem and follows the project's licensing terms.
|
|
281
|
-
|
|
282
|
-
## 🆘 Support
|
|
283
|
-
|
|
284
|
-
- Check the [Bluecopa documentation](https://docs.bluecopa.com)
|
|
285
|
-
- Review the [React Router documentation](https://reactrouter.com)
|
|
286
|
-
- Open issues in the project repository
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"name": "@bluecopa/react-router-template",
|
|
9
9
|
"version": "1.0.0",
|
|
10
10
|
"dependencies": {
|
|
11
|
-
"@bluecopa/react": "^0.1.
|
|
11
|
+
"@bluecopa/react": "^0.1.4",
|
|
12
12
|
"@radix-ui/react-avatar": "^1.1.0",
|
|
13
13
|
"@radix-ui/react-dropdown-menu": "^2.1.0",
|
|
14
14
|
"@radix-ui/react-select": "^2.1.0",
|
|
@@ -371,9 +371,9 @@
|
|
|
371
371
|
}
|
|
372
372
|
},
|
|
373
373
|
"node_modules/@bluecopa/core": {
|
|
374
|
-
"version": "0.1.
|
|
375
|
-
"resolved": "https://registry.npmjs.org/@bluecopa/core/-/core-0.1.
|
|
376
|
-
"integrity": "sha512-
|
|
374
|
+
"version": "0.1.5",
|
|
375
|
+
"resolved": "https://registry.npmjs.org/@bluecopa/core/-/core-0.1.5.tgz",
|
|
376
|
+
"integrity": "sha512-oUvyRE0g2roYv+iOHCJlZ0glVtmXQJ0XU+8dsqzNCPkJfCi36Gm98T0zfWfPa6TKMjvA+23TBul2EdUQawBF+g==",
|
|
377
377
|
"license": "MIT",
|
|
378
378
|
"dependencies": {
|
|
379
379
|
"axios": "1.11.0",
|
|
@@ -384,12 +384,12 @@
|
|
|
384
384
|
}
|
|
385
385
|
},
|
|
386
386
|
"node_modules/@bluecopa/react": {
|
|
387
|
-
"version": "0.1.
|
|
388
|
-
"resolved": "https://registry.npmjs.org/@bluecopa/react/-/react-0.1.
|
|
389
|
-
"integrity": "sha512-
|
|
387
|
+
"version": "0.1.4",
|
|
388
|
+
"resolved": "https://registry.npmjs.org/@bluecopa/react/-/react-0.1.4.tgz",
|
|
389
|
+
"integrity": "sha512-FUI03xk6ZgrFL6annUA+VhIULwa5d8K/Ig/V3szhvBJnzrJUVeIKfwJR/uNabGzWI8YfGg1jl2AJ7pchvTQdZw==",
|
|
390
390
|
"license": "MIT",
|
|
391
391
|
"dependencies": {
|
|
392
|
-
"@bluecopa/core": "0.1.
|
|
392
|
+
"@bluecopa/core": "0.1.5",
|
|
393
393
|
"@tanstack/react-query": "5.59.0",
|
|
394
394
|
"@tanstack/react-query-devtools": "5.59.0"
|
|
395
395
|
},
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"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"
|
|
17
17
|
},
|
|
18
18
|
"dependencies": {
|
|
19
|
-
"@bluecopa/react": "^0.1.
|
|
19
|
+
"@bluecopa/react": "^0.1.4",
|
|
20
20
|
"@radix-ui/react-avatar": "^1.1.0",
|
|
21
21
|
"@radix-ui/react-dropdown-menu": "^2.1.0",
|
|
22
22
|
"@radix-ui/react-select": "^2.1.0",
|