npm - leedstack - Versions diffs - 3.1.0 - Mend

leedstack 3.1.0

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 (136) hide show

package/tools/templates/frontend/react/frontend/Dockerfile ADDED Viewed

@@ -0,0 +1,37 @@
+# Multi-stage build for production
+# Stage 1: Build
+FROM node:20-alpine AS builder
+WORKDIR /app
+# Copy package files
+COPY package*.json ./
+# Install dependencies
+RUN npm ci --only=production=false
+# Copy source code
+COPY . .
+# Build the application
+RUN npm run build
+# Stage 2: Production
+FROM nginx:alpine
+# Copy built assets from builder stage
+COPY --from=builder /app/dist /usr/share/nginx/html
+# Copy nginx configuration
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+# Expose port 80
+EXPOSE 80
+# Health check
+HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
+  CMD wget --quiet --tries=1 --spider http://localhost/ || exit 1
+# Start nginx
+CMD ["nginx", "-g", "daemon off;"]

package/tools/templates/frontend/react/frontend/README.md ADDED Viewed

@@ -0,0 +1,54 @@
+# <%= AppName %> - Frontend
+React frontend built with Vite.
+## Quick Start
+```bash
+# Install dependencies
+npm install
+# Set up environment
+cp .env.example .env
+# Start development server
+npm run dev
+```
+Visit http://localhost:5173
+## Available Scripts
+- `npm run dev` - Start development server
+- `npm run build` - Build for production
+- `npm run preview` - Preview production build
+## Environment Variables
+See `.env.example` for required variables:
+- `VITE_API_BASE` - Backend API URL (default: http://localhost:8080)
+<% if (modules.auth) { -%>
+- `VITE_AUTH0_DOMAIN` - Auth0 domain
+- `VITE_AUTH0_CLIENT_ID` - Auth0 client ID
+- `VITE_AUTH0_AUDIENCE` - Auth0 API audience
+<% } -%>
+## API Usage
+Use the `apiFetch` helper to make API calls:
+```javascript
+import { apiFetch } from './lib/api';
+const data = await apiFetch('/api/example');
+```
+## Tech Stack
+- **React 19** - UI library
+- **Vite** - Build tool and dev server
+- **React Router** - Client-side routing
+<% if (modules.auth) { -%>
+- **Auth0 SPA JS** - Authentication
+<% } -%>

package/tools/templates/frontend/react/frontend/index.html ADDED Viewed

@@ -0,0 +1,13 @@
+<!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><%= AppName %></title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

package/tools/templates/frontend/react/frontend/nginx.conf ADDED Viewed

@@ -0,0 +1,35 @@
+server {
+    listen 80;
+    server_name localhost;
+    root /usr/share/nginx/html;
+    index index.html;
+    # Gzip compression
+    gzip on;
+    gzip_vary on;
+    gzip_min_length 1024;
+    gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml+rss application/json;
+    # Security headers
+    add_header X-Frame-Options "SAMEORIGIN" always;
+    add_header X-Content-Type-Options "nosniff" always;
+    add_header X-XSS-Protection "1; mode=block" always;
+    # Cache static assets
+    location ~* \.(?:css|js|jpg|jpeg|gif|png|ico|svg|woff|woff2|ttf|eot)$ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+    }
+    # SPA routing - send all requests to index.html
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+    # Health check endpoint
+    location /health {
+        access_log off;
+        return 200 "healthy\n";
+        add_header Content-Type text/plain;
+    }
+}

package/tools/templates/frontend/react/frontend/package.json.ejs ADDED Viewed

@@ -0,0 +1,41 @@
+{
+  "name": "<%= appSlug %>-frontend",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest --coverage",
+    "lint": "eslint . --ext .js,.jsx --report-unused-disable-directives --max-warnings 0",
+    "lint:fix": "eslint . --ext .js,.jsx --fix",
+    "format": "prettier --write \"src/**/*.{js,jsx,json,css,md}\"",
+    "format:check": "prettier --check \"src/**/*.{js,jsx,json,css,md}\""
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.1.0",
+    "@auth0/auth0-spa-js": "^2.1.3"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "vite": "^6.0.0",
+    "vitest": "^1.2.0",
+    "@vitest/ui": "^1.2.0",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/jest-dom": "^6.2.0",
+    "@testing-library/user-event": "^14.5.2",
+    "jsdom": "^23.2.0",
+    "@vitest/coverage-v8": "^1.2.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "prettier": "^3.2.4"
+  }
+}

package/tools/templates/frontend/react/frontend/public/vite.svg ADDED Viewed

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64" fill="none">
+  <rect width="64" height="64" rx="8" fill="#646CFF"/>
+  <path d="M32 12L44 52H20L32 12Z" fill="#FFFFFF"/>
+</svg>

package/tools/templates/frontend/react/frontend/src/App.css ADDED Viewed

@@ -0,0 +1,65 @@
+:root {
+  font-family: "Segoe UI", Arial, sans-serif;
+  color: #0f172a;
+  background: #f8fafc;
+}
+body {
+  margin: 0;
+  min-height: 100vh;
+}
+#root {
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 48px 24px;
+}
+.app {
+  display: grid;
+  gap: 16px;
+}
+.header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.header img {
+  width: 40px;
+  height: 40px;
+}
+.card {
+  padding: 16px;
+  border-radius: 12px;
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
+}
+.api-status {
+  margin-top: 24px;
+  padding: 16px;
+  border-radius: 12px;
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+}
+.logo {
+  height: 48px;
+  width: 48px;
+  padding: 6px;
+  border-radius: 12px;
+  background: #ffffff;
+  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
+}
+.logo.react {
+  box-shadow: 0 0 0 2px rgba(97, 218, 251, 0.25);
+}
+.read-the-docs {
+  color: #64748b;
+}

package/tools/templates/frontend/react/frontend/src/App.jsx ADDED Viewed

@@ -0,0 +1,41 @@
+import { Routes, Route, Link } from 'react-router-dom';
+import Home from './components/Home';
+<% if (modules.contact) { -%>
+import Contact from './components/Contact';
+<% } -%>
+<% if (modules.admin) { -%>
+import Dashboard from './components/Dashboard';
+<% } -%>
+function App() {
+  return (
+    <div className="app">
+      <nav>
+        <Link to="/">Home</Link>
+<% if (modules.contact) { -%>
+        <Link to="/contact">Contact</Link>
+<% } -%>
+<% if (modules.auth) { -%>
+        <Link to="/login">Login</Link>
+<% } -%>
+<% if (modules.admin) { -%>
+        <Link to="/dashboard">Dashboard</Link>
+<% } -%>
+      </nav>
+      <main>
+        <Routes>
+          <Route path="/" element={<Home />} />
+<% if (modules.contact) { -%>
+          <Route path="/contact" element={<Contact />} />
+<% } -%>
+<% if (modules.admin) { -%>
+          <Route path="/dashboard" element={<Dashboard />} />
+<% } -%>
+        </Routes>
+      </main>
+    </div>
+  );
+}
+export default App;

package/tools/templates/frontend/react/frontend/src/assets/react.svg ADDED Viewed

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64" fill="none">
+  <rect width="64" height="64" rx="8" fill="#20232A"/>
+  <circle cx="32" cy="32" r="6" fill="#61DAFB"/>
+  <ellipse cx="32" cy="32" rx="20" ry="8" stroke="#61DAFB" stroke-width="3"/>
+  <ellipse cx="32" cy="32" rx="20" ry="8" stroke="#61DAFB" stroke-width="3" transform="rotate(60 32 32)"/>
+  <ellipse cx="32" cy="32" rx="20" ry="8" stroke="#61DAFB" stroke-width="3" transform="rotate(120 32 32)"/>
+</svg>

package/tools/templates/frontend/react/frontend/src/components/ErrorBoundary.jsx ADDED Viewed

@@ -0,0 +1,62 @@
+import { Component } from 'react';
+class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null, errorInfo: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true };
+  }
+  componentDidCatch(error, errorInfo) {
+    console.error('Error caught by boundary:', error, errorInfo);
+    this.setState({
+      error,
+      errorInfo,
+    });
+    // You can also log to an error reporting service here
+    // logErrorToService(error, errorInfo);
+  }
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div style={{ padding: '2rem', textAlign: 'center' }}>
+          <h1>Something went wrong</h1>
+          <p>We're sorry for the inconvenience. Please try refreshing the page.</p>
+          {process.env.NODE_ENV === 'development' && (
+            <details style={{ marginTop: '2rem', textAlign: 'left' }}>
+              <summary>Error details (development only)</summary>
+              <pre style={{ background: '#f5f5f5', padding: '1rem', overflow: 'auto' }}>
+                {this.state.error && this.state.error.toString()}
+                {'\n'}
+                {this.state.errorInfo && this.state.errorInfo.componentStack}
+              </pre>
+            </details>
+          )}
+          <button
+            onClick={() => window.location.reload()}
+            style={{
+              marginTop: '1rem',
+              padding: '0.5rem 1rem',
+              background: '#007bff',
+              color: 'white',
+              border: 'none',
+              borderRadius: '4px',
+              cursor: 'pointer',
+            }}
+          >
+            Refresh Page
+          </button>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
+export default ErrorBoundary;

package/tools/templates/frontend/react/frontend/src/components/Home.jsx ADDED Viewed

@@ -0,0 +1,58 @@
+import { useState, useEffect } from 'react';
+import { apiFetch } from '../lib/api';
+function Home() {
+  const [apiMessage, setApiMessage] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  useEffect(() => {
+    let isMounted = true;
+    // Test API connection
+    apiFetch('/api/example')
+      .then(data => {
+        if (isMounted) {
+          setApiMessage(data.message);
+          setLoading(false);
+        }
+      })
+      .catch(err => {
+        if (isMounted) {
+          setError(err.message);
+          setLoading(false);
+        }
+      });
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+  return (
+    <div>
+      <h1>Welcome to <%= AppName %></h1>
+      <p>This is a full-stack application built with:</p>
+      <ul>
+        <li>Frontend: <%= frontend %></li>
+        <li>Backend: <%= backend %></li>
+        <li>Database: <%= db %></li>
+<% if (modules.auth) { -%>
+        <li>Auth: <%= auth %></li>
+<% } -%>
+<% if (modules.payments) { -%>
+        <li>Payments: <%= payments %></li>
+<% } -%>
+      </ul>
+      <div style={{ marginTop: '2rem', padding: '1rem', background: '#f5f5f5', borderRadius: '8px' }}>
+        <h3>API Connection Test</h3>
+        {loading && <p>Testing backend connection...</p>}
+        {error && <p style={{ color: 'red' }}>❌ Error: {error}</p>}
+        {apiMessage && <p style={{ color: 'green' }}>✅ {apiMessage}</p>}
+      </div>
+    </div>
+  );
+}
+export default Home;

package/tools/templates/frontend/react/frontend/src/components/__tests__/Home.test.jsx ADDED Viewed

@@ -0,0 +1,74 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import Home from '../Home';
+import * as api from '../../lib/api';
+// Mock the API module
+vi.mock('../../lib/api');
+describe('Home Component', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+  it('renders welcome message', () => {
+    vi.mocked(api.apiFetch).mockRejectedValue(new Error('API not available'));
+    render(<Home />);
+    expect(screen.getByText(/Welcome to/i)).toBeInTheDocument();
+  });
+  it('displays loading state initially', () => {
+    vi.mocked(api.apiFetch).mockImplementation(() => new Promise(() => {}));
+    render(<Home />);
+    expect(screen.getByText(/Testing backend connection/i)).toBeInTheDocument();
+  });
+  it('displays API message on successful connection', async () => {
+    vi.mocked(api.apiFetch).mockResolvedValue({
+      message: 'Hello from backend!',
+    });
+    render(<Home />);
+    await waitFor(() => {
+      expect(screen.getByText(/Hello from backend!/i)).toBeInTheDocument();
+    });
+  });
+  it('displays error message on failed connection', async () => {
+    vi.mocked(api.apiFetch).mockRejectedValue(new Error('Connection failed'));
+    render(<Home />);
+    await waitFor(() => {
+      expect(screen.getByText(/Error: Connection failed/i)).toBeInTheDocument();
+    });
+  });
+  it('cleans up on unmount', async () => {
+    let resolvePromise;
+    const promise = new Promise(resolve => {
+      resolvePromise = resolve;
+    });
+    vi.mocked(api.apiFetch).mockReturnValue(promise);
+    const { unmount } = render(<Home />);
+    // Unmount before promise resolves
+    unmount();
+    // Resolve promise after unmount
+    resolvePromise({ message: 'Should not update' });
+    // Wait a bit
+    await new Promise(resolve => setTimeout(resolve, 50));
+    // If cleanup works, no state update errors should occur
+    expect(true).toBe(true);
+  });
+});

package/tools/templates/frontend/react/frontend/src/index.css ADDED Viewed

@@ -0,0 +1,31 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+}
+.app {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+nav {
+  display: flex;
+  gap: 1rem;
+  padding: 1rem;
+  background: #f0f0f0;
+}
+nav a {
+  text-decoration: none;
+  color: #333;
+}
+nav a:hover {
+  text-decoration: underline;
+}
+main {
+  flex: 1;
+  padding: 2rem;
+}

package/tools/templates/frontend/react/frontend/src/lib/api.js ADDED Viewed

@@ -0,0 +1,42 @@
+// API base URL from environment
+const API_BASE = import.meta.env.VITE_API_BASE || 'http://localhost:8080';
+/**
+ * Fetch wrapper that automatically adds API base URL
+ * @param {string} endpoint - API endpoint (e.g., '/api/example')
+ * @param {RequestInit} options - Fetch options
+ */
+export async function apiFetch(endpoint, options = {}) {
+  const url = `${API_BASE}${endpoint}`;
+  const config = {
+    ...options,
+    headers: {
+      'Content-Type': 'application/json',
+      ...options.headers,
+    },
+  };
+  const response = await fetch(url, config);
+  if (!response.ok) {
+    throw new Error(`API Error: ${response.statusText}`);
+  }
+  return response.json();
+}
+/**
+ * Example usage in components:
+ *
+ * import { apiFetch } from './lib/api';
+ *
+ * // GET request
+ * const data = await apiFetch('/api/example');
+ *
+ * // POST request
+ * const result = await apiFetch('/api/contact', {
+ *   method: 'POST',
+ *   body: JSON.stringify({ name: 'John', email: 'john@example.com' })
+ * });
+ */

package/tools/templates/frontend/react/frontend/src/lib/env.js ADDED Viewed

@@ -0,0 +1,58 @@
+/**
+ * Environment variable validation
+ * Ensures required environment variables are set before app starts
+ */
+const requiredEnvVars = [
+  'VITE_API_BASE',
+];
+const optionalEnvVars = {
+  'VITE_AUTH0_DOMAIN': 'Auth0 domain (required if using auth)',
+  'VITE_AUTH0_CLIENT_ID': 'Auth0 client ID (required if using auth)',
+  'VITE_STRIPE_PUBLIC_KEY': 'Stripe public key (required if using payments)',
+};
+export function validateEnv() {
+  const missing = [];
+  const warnings = [];
+  // Check required variables
+  for (const envVar of requiredEnvVars) {
+    if (!import.meta.env[envVar]) {
+      missing.push(envVar);
+    }
+  }
+  // Check optional variables (warn if missing)
+  for (const [envVar, description] of Object.entries(optionalEnvVars)) {
+    if (!import.meta.env[envVar]) {
+      warnings.push(`${envVar}: ${description}`);
+    }
+  }
+  if (missing.length > 0) {
+    console.error('❌ Missing required environment variables:');
+    missing.forEach(v => console.error(`  - ${v}`));
+    console.error('\nCreate a .env file based on .env.example');
+    throw new Error('Missing required environment variables');
+  }
+  if (warnings.length > 0 && import.meta.env.DEV) {
+    console.warn('⚠️  Optional environment variables not set:');
+    warnings.forEach(w => console.warn(`  - ${w}`));
+  }
+  if (import.meta.env.DEV) {
+    console.log('✅ Environment variables validated');
+  }
+}
+export const env = {
+  apiBase: import.meta.env.VITE_API_BASE,
+  auth0Domain: import.meta.env.VITE_AUTH0_DOMAIN,
+  auth0ClientId: import.meta.env.VITE_AUTH0_CLIENT_ID,
+  stripePublicKey: import.meta.env.VITE_STRIPE_PUBLIC_KEY,
+  isDev: import.meta.env.DEV,
+  isProd: import.meta.env.PROD,
+};

package/tools/templates/frontend/react/frontend/src/main.jsx ADDED Viewed

@@ -0,0 +1,16 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import App from './App';
+import ErrorBoundary from './components/ErrorBoundary';
+import './index.css';
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <ErrorBoundary>
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    </ErrorBoundary>
+  </React.StrictMode>
+);

package/tools/templates/frontend/react/frontend/src/setupTests.js ADDED Viewed

@@ -0,0 +1,8 @@
+import { expect, afterEach } from 'vitest';
+import { cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+// Cleanup after each test
+afterEach(() => {
+  cleanup();
+});