create-bluecopa-react-app 1.0.0 → 1.0.1

package/templates/latest/src/single-spa.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import { createRoot, Root } from 'react-dom/client';
+import singleSpaReact from 'single-spa-react';
+import { MemoryRouter, BrowserRouter } from 'react-router-dom';
+import App from './App';
+
+// Single-spa lifecycle props interface
+interface LifecycleProps {
+  domElement: HTMLElement;
+  basename?: string;
+  singleSpa?: {
+    name: string;
+    mountParcel: Function;
+    getProps: () => any;
+  };
+}
+
+let root: Root | null = null;
+
+// Root component wrapper that handles routing
+const PnLExplorerRoot: React.FC<{ basename?: string; isMicroFrontend?: boolean }> = ({ 
+  basename = '/', 
+  isMicroFrontend = false 
+}) => {
+  // Use MemoryRouter for micro-frontend to avoid conflicts with host routing
+  // Use BrowserRouter for standalone mode
+  const Router = isMicroFrontend ? MemoryRouter : BrowserRouter;
+  const routerProps = isMicroFrontend ? {} : { basename };
+  
+  return (
+    <Router {...routerProps}>
+      <App />
+    </Router>
+  );
+};
+
+// Single-spa React configuration
+const lifecycles = singleSpaReact({
+  React,
+  ReactDOMClient: { createRoot },
+  rootComponent: (props) => <PnLExplorerRoot isMicroFrontend={true} basename={props.basename} />,
+  errorBoundary: (err, info, props) => {
+    console.error('PnL Explorer Single-spa Error:', err, info);
+    return <div>Something went wrong loading PnL Explorer</div>;
+  },
+  renderType: 'createRoot',
+  domElementGetter: () => document.getElementById('single-spa-application:pnl-explorer') || document.body
+});
+
+// Export the single-spa lifecycle functions
+export const { mount, unmount, bootstrap } = lifecycles;
+
+// Export a manual mount function for direct usage
+export const manualMount = async (props: LifecycleProps) => {
+  if (!props.domElement) {
+    throw new Error('domElement is required for mounting PnL Explorer');
+  }
+
+  try {
+    // Clean up any existing root
+    if (root) {
+      root.unmount();
+      root = null;
+    }
+
+    // Create new root
+    root = createRoot(props.domElement);
+    
+    // Mount the application with the provided basename as micro-frontend
+    root.render(
+      <PnLExplorerRoot 
+        isMicroFrontend={true}
+        basename={props.basename || '/app/external/pnl-explorer'} 
+      />
+    );
+
+    console.log('PnL Explorer mounted successfully');
+    return Promise.resolve();
+  } catch (error) {
+    console.error('Failed to mount PnL Explorer:', error);
+    return Promise.reject(error);
+  }
+};
+
+// Export a manual unmount function
+export const manualUnmount = async () => {
+  try {
+    if (root) {
+      root.unmount();
+      root = null;
+    }
+    console.log('PnL Explorer unmounted successfully');
+    return Promise.resolve();
+  } catch (error) {
+    console.error('Failed to unmount PnL Explorer:', error);
+    return Promise.reject(error);
+  }
+};
+
+// Default export for module federation
+export default {
+  mount: manualMount,
+  unmount: manualUnmount,
+  bootstrap: () => Promise.resolve()
+};

package/templates/{basic/src/types/index.ts → latest/src/types/api.ts}

@@ -1,5 +1,18 @@
-// Transaction Data Types based on BlueCopa dataset
-export interface TransactionRecord {
+// API Types
+export interface MetricData {
+  TotalAmount: number;
+}
+
+export interface ApiMetricResponse {
+  data: MetricData[];
+}
+
+export interface DatasetSchema {
+  name: string;
+  data_type: string;
+}
+
+export interface TransactionData {
   transaction_id: string;
   transaction_day: string;
   payment_end: string;
@@ -23,22 +36,13 @@ export interface TransactionRecord {
   copa_source_name: string;
 }
 
-export interface DatasetResponse {
+export interface ApiDatasetResponse {
   data: {
-    schema: Array<{
-      name: string;
-      data_type: string;
-    }>;
-    data: TransactionRecord[];
+    schema: DatasetSchema[];
+    data: TransactionData[];
   };
 }
 
-export interface MetricResponse {
-  data: Array<{
-    TotalAmount: number;
-  }>;
-}
-
 export interface User {
   email: string;
   firstName: string;
@@ -68,27 +72,7 @@ export interface Organization {
   entityVersion: number;
 }
 
-export interface UserResponse {
+export interface ApiUserResponse {
   user: User;
   organization: Organization;
 }
-
-// Chart data types
-export interface CategorySalesData {
-  category: string;
-  totalSales: number;
-  quantity: number;
-}
-
-export interface PaymentMethodData {
-  paymentMethod: string;
-  count: number;
-  totalAmount: number;
-}
-
-export interface StateAnalytics {
-  state: string;
-  totalTransactions: number;
-  totalAmount: number;
-  averageOrderValue: number;
-}

package/templates/latest/src/vite-env.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_BLUECOPA_API_TOKEN: string
+  readonly VITE_BLUECOPA_API_URL: string
+  readonly VITE_BLUECOPA_WORKSPACE_ID: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}

package/templates/{basic → latest}/tailwind.config.js

@@ -1,11 +1,9 @@
 /** @type {import('tailwindcss').Config} */
-export default {
+module.exports = {
   darkMode: ["class"],
   content: [
-    './pages/**/*.{ts,tsx}',
-    './components/**/*.{ts,tsx}',
-    './app/**/*.{ts,tsx}',
     './src/**/*.{ts,tsx}',
+    './node_modules/@tremor/**/*.{js,ts,jsx,tsx}',
   ],
   prefix: "",
   theme: {
@@ -51,6 +49,19 @@ export default {
           DEFAULT: "hsl(var(--card))",
           foreground: "hsl(var(--card-foreground))",
         },
+        // Bluecopa brand colors
+        bluecopa: {
+          50: '#eff6ff',
+          100: '#dbeafe',
+          200: '#bfdbfe',
+          300: '#93c5fd',
+          400: '#60a5fa',
+          500: '#3b82f6',
+          600: '#2563eb',
+          700: '#1d4ed8',
+          800: '#1e40af',
+          900: '#1e3a8a',
+        },
       },
       borderRadius: {
         lg: "var(--radius)",

package/templates/{basic/tsconfig.json → latest/tsconfig.app.json}

@@ -9,23 +9,18 @@
     /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
     "isolatedModules": true,
+    "moduleDetection": "force",
     "noEmit": true,
     "jsx": "react-jsx",
 
     /* Linting */
-    "strict": false,
+    "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
-
-    /* Path mapping */
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    }
+    "noImplicitAny": false,
+    "strictNullChecks": false
   },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "include": ["src"]
 }

package/templates/latest/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "noImplicitAny": false,
+    "noUnusedParameters": false,
+    "skipLibCheck": true,
+    "allowJs": true,
+    "noUnusedLocals": false,
+    "strictNullChecks": false
+  }
+}

package/templates/latest/vite.config.ts

@@ -0,0 +1,64 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react-swc";
+import path from "path";
+import federation from "@originjs/vite-plugin-federation";
+
+// https://vitejs.dev/config/
+export default defineConfig(({ mode }) => {
+  const isStandaloneBuild = process.env.VITE_BUILD_TARGET === 'standalone';
+  
+  return {
+    server: {
+      host: "::",
+      port: 8080,
+      cors: true,
+      headers: {
+        "Access-Control-Allow-Origin": "*",
+        "Access-Control-Allow-Methods": "GET,HEAD,PUT,PATCH,POST,DELETE",
+        "Access-Control-Allow-Headers": "Origin, X-Requested-With, Content-Type, Accept, Authorization, Cache-Control"
+      }
+    },
+    plugins: [
+      react(),
+      !isStandaloneBuild && federation({
+        name: '__copa_ext_app__react_route',
+        filename: 'remoteEntry.js',
+        exposes: {
+          './App': './src/single-spa.tsx',
+        },
+        shared: {
+          react: {
+            singleton: true,
+          },
+          'react-dom': {
+            singleton: true,
+          }
+        }
+      }),
+    ].filter(Boolean),
+    resolve: {
+      alias: {
+        "@": path.resolve(__dirname, "./src"),
+      },
+    },
+    build: isStandaloneBuild ? {
+      target: 'esnext',
+      minify: false,
+      cssCodeSplit: false,
+      rollupOptions: {
+        input: path.resolve(__dirname, 'standalone.html')
+      }
+    } : {
+      target: 'esnext',
+      minify: false,
+      cssCodeSplit: false,
+      rollupOptions: {
+        external: ['react', 'react-dom'],
+        output: {
+          format: 'system'
+        }
+      }
+    },
+    base: '/'
+  };
+});

package/templates/basic/.editorconfig

@@ -1,12 +0,0 @@
-root = true
-
-[*]
-charset = utf-8
-end_of_line = lf
-indent_style = space
-indent_size = 2
-insert_final_newline = true
-trim_trailing_whitespace = true
-
-[*.md]
-trim_trailing_whitespace = false

package/templates/basic/.env.example

@@ -1,10 +0,0 @@
-# BlueCopa API Configuration
-REACT_APP_API_BASE_URL=https://api.bluecopa.com
-REACT_APP_API_KEY=your_api_key_here
-
-# Environment
-NODE_ENV=development
-
-# Optional: Analytics and Monitoring
-REACT_APP_SENTRY_DSN=your_sentry_dsn
-REACT_APP_ANALYTICS_ID=your_analytics_id

package/templates/basic/README.md

@@ -1,213 +0,0 @@
-# BlueCopa Dashboard Template
-
-A modern React dashboard template for BlueCopa applications built with TanStack Query, shadcn/ui, and Recharts.
-
-## Features
-
-- 🚀 **Modern Tech Stack**: React 18, TypeScript, Vite
-- 📊 **Data Fetching**: TanStack Query for server state management
-- 🎨 **UI Components**: shadcn/ui with Radix UI primitives
-- 📈 **Charts**: Recharts for beautiful data visualizations
-- 🎯 **Type Safety**: Full TypeScript support
-- 🔄 **Real-time Updates**: Automatic data refetching and caching
-- 📱 **Responsive Design**: Mobile-first responsive layout
-- 🌙 **Dark Mode**: Built-in dark mode support
-
-## Quick Start
-
-1. **Install dependencies**:
-   ```bash
-   npm install
-   # or
-   yarn install
-   # or
-   pnpm install
-   ```
-
-2. **Start the development server**:
-   ```bash
-   npm run dev
-   ```
-
-3. **Open your browser** and navigate to `http://localhost:5173`
-
-## Project Structure
-
-```
-src/
-├── components/          # Reusable UI components
-│   ├── ui/             # shadcn/ui components
-│   └── dashboard/      # Dashboard-specific components
-├── lib/                # Utilities and helpers
-├── pages/              # Page components
-├── services/           # API services and data fetching
-├── types/              # TypeScript type definitions
-├── App.tsx             # Main application component
-└── main.tsx            # Application entry point
-```
-
-## Components Overview
-
-### Dashboard Components
-
-- **MetricsOverview**: Key performance indicators and metrics cards
-- **TransactionCharts**: Interactive charts showing sales data, payment methods, and analytics
-- **TransactionTable**: Data table with transaction details and filters
-
-### Features Demonstrated
-
-1. **TanStack Query Integration**:
-   - Automatic caching and background updates
-   - Loading states and error handling
-   - Query invalidation and refetching
-
-2. **Data Visualization**:
-   - Bar charts for category sales and state analytics
-   - Pie charts for payment method distribution
-   - Line charts for trend analysis
-
-3. **Real Transaction Data**:
-   - Based on actual BlueCopa transaction dataset
-   - Proper data typing with TypeScript
-   - Mock API responses for development
-
-## API Integration
-
-The template includes a mock API service (`src/services/api.ts`) that demonstrates:
-
-- Dataset queries for transaction data
-- Metric queries for aggregated data
-- User authentication and organization data
-- Proper error handling and loading states
-
-### Replacing Mock Data
-
-To use real APIs, update the `BlueCOPAApi` service:
-
-```typescript
-// In src/services/api.ts
-export const BlueCOPAApi = {
-  getDataset: async (datasetId: string) => {
-    const response = await apiClient.get(`/datasets/${datasetId}`);
-    return response.data;
-  },
-  // ... other methods
-};
-```
-
-## Customization
-
-### Adding New Charts
-
-1. Create a new component in `src/components/dashboard/`
-2. Use Recharts components for visualization
-3. Add TanStack Query for data fetching
-4. Include proper TypeScript types
-
-### Extending the API
-
-1. Add new types to `src/types/index.ts`
-2. Extend the API service in `src/services/api.ts`
-3. Create corresponding UI components
-4. Add new routes if needed
-
-### Styling
-
-The template uses Tailwind CSS with shadcn/ui design system:
-
-- Modify `tailwind.config.js` for custom themes
-- Update CSS variables in `src/index.css` for color schemes
-- Use the `cn()` utility for conditional styling
-
-## Data Types
-
-The template includes comprehensive TypeScript types for BlueCopa data:
-
-```typescript
-interface TransactionRecord {
-  transaction_id: string;
-  transaction_day: string;
-  city: string;
-  category: string;
-  total_amount: number;
-  payment_method: string;
-  // ... other fields
-}
-```
-
-## Development
-
-### Available Scripts
-
-- `npm run dev` - Start development server
-- `npm run build` - Build for production
-- `npm run preview` - Preview production build
-- `npm run lint` - Run ESLint
-- `npm run type-check` - Run TypeScript compiler
-
-### Environment Variables
-
-Create a `.env` file for configuration:
-
-```
-REACT_APP_API_BASE_URL=https://api.bluecopa.com
-REACT_APP_API_KEY=your_api_key
-```
-
-## Deployment
-
-### Build for Production
-
-```bash
-npm run build
-```
-
-The built files will be in the `dist/` directory.
-
-### Deploy to Vercel
-
-```bash
-vercel --prod
-```
-
-### Deploy to Netlify
-
-```bash
-netlify deploy --prod --dir=dist
-```
-
-## Technologies Used
-
-- **React 18** - UI framework
-- **TypeScript** - Type safety
-- **Vite** - Build tool and dev server
-- **TanStack Query** - Server state management
-- **shadcn/ui** - UI component library
-- **Radix UI** - Headless UI primitives
-- **Recharts** - Chart library
-- **Tailwind CSS** - Utility-first CSS framework
-- **React Router** - Client-side routing
-- **Axios** - HTTP client
-
-## Contributing
-
-1. Fork the repository
-2. Create a feature branch
-3. Make your changes
-4. Add tests if applicable
-5. Submit a pull request
-
-## License
-
-This template is part of the BlueCopa platform and follows the project's licensing terms.
-
-## Support
-
-For questions and support:
-- Check the [BlueCopa documentation](https://docs.bluecopa.com)
-- Open an issue in the repository
-- Contact the BlueCopa team
-
----
-
-Built with ❤️ by the BlueCopa team

package/templates/basic/index.html

@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>BlueCopa Dashboard</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>

package/templates/basic/package.json

@@ -1,68 +0,0 @@
-{
-  "name": "bluecopa-dashboard",
-  "version": "1.0.0",
-  "description": "BlueCopa Dashboard Template with TanStack Query and shadcn/ui",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview",
-    "type-check": "tsc --noEmit"
-  },
-  "dependencies": {
-    "@bluecopa/react": "^0.1.3",
-    "@radix-ui/react-accordion": "^1.1.2",
-    "@radix-ui/react-alert-dialog": "^1.0.5",
-    "@radix-ui/react-aspect-ratio": "^1.0.3",
-    "@radix-ui/react-avatar": "^1.0.4",
-    "@radix-ui/react-checkbox": "^1.0.4",
-    "@radix-ui/react-collapsible": "^1.0.3",
-    "@radix-ui/react-dialog": "^1.0.5",
-    "@radix-ui/react-dropdown-menu": "^2.0.6",
-    "@radix-ui/react-hover-card": "^1.0.7",
-    "@radix-ui/react-label": "^2.0.2",
-    "@radix-ui/react-menubar": "^1.0.4",
-    "@radix-ui/react-navigation-menu": "^1.1.4",
-    "@radix-ui/react-popover": "^1.0.7",
-    "@radix-ui/react-progress": "^1.0.3",
-    "@radix-ui/react-radio-group": "^1.1.3",
-    "@radix-ui/react-scroll-area": "^1.0.5",
-    "@radix-ui/react-select": "^2.0.0",
-    "@radix-ui/react-separator": "^1.0.3",
-    "@radix-ui/react-slider": "^1.1.2",
-    "@radix-ui/react-slot": "^1.0.2",
-    "@radix-ui/react-switch": "^1.0.3",
-    "@radix-ui/react-tabs": "^1.0.4",
-    "@radix-ui/react-toast": "^1.1.5",
-    "@radix-ui/react-toggle": "^1.0.3",
-    "@radix-ui/react-toggle-group": "^1.0.4",
-    "@radix-ui/react-tooltip": "^1.0.7",
-    "axios": "^1.6.0",
-    "class-variance-authority": "^0.7.0",
-    "clsx": "^2.0.0",
-    "date-fns": "^2.30.0",
-    "lucide-react": "^0.292.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router-dom": "^6.20.0",
-    "recharts": "^2.8.0",
-    "tailwind-merge": "^2.0.0",
-    "tailwindcss-animate": "^1.0.7"
-  },
-  "devDependencies": {
-    "@types/react": "^18.2.37",
-    "@types/react-dom": "^18.2.15",
-    "@typescript-eslint/eslint-plugin": "^6.10.0",
-    "@typescript-eslint/parser": "^6.10.0",
-    "@vitejs/plugin-react": "^4.1.1",
-    "autoprefixer": "^10.4.16",
-    "eslint": "^8.53.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.4",
-    "postcss": "^8.4.31",
-    "tailwindcss": "^3.3.5",
-    "typescript": "^5.2.2",
-    "vite": "^4.5.0"
-  }
-}