bps-kit 1.0.1 → 1.0.2

package/templates/vault/loki-mode/examples/todo-app-generated/backend/src/db/db.ts

@@ -0,0 +1,35 @@
+import sqlite3 from 'sqlite3';
+import path from 'path';
+
+const dbPath = path.join(__dirname, '../../todos.db');
+
+const db = new sqlite3.Database(dbPath, (err: Error | null) => {
+  if (err) {
+    console.error('Database connection error:', err);
+  } else {
+    console.log('Connected to SQLite database');
+  }
+});
+
+// Initialize database schema
+export const initDatabase = (): Promise<void> => {
+  return new Promise((resolve, reject) => {
+    db.run(`
+      CREATE TABLE IF NOT EXISTS todos (
+        id INTEGER PRIMARY KEY AUTOINCREMENT,
+        title TEXT NOT NULL,
+        completed BOOLEAN DEFAULT 0,
+        createdAt TEXT DEFAULT CURRENT_TIMESTAMP
+      )
+    `, (err: Error | null) => {
+      if (err) {
+        reject(err);
+      } else {
+        console.log('Database schema initialized');
+        resolve();
+      }
+    });
+  });
+};
+
+export default db;

package/templates/vault/loki-mode/examples/todo-app-generated/backend/src/db/index.ts

@@ -0,0 +1,2 @@
+export { getDatabase, closeDatabase } from './database';
+export { runMigrations, initializeDatabase } from './migrations';

package/templates/vault/loki-mode/examples/todo-app-generated/backend/src/db/migrations.ts

@@ -0,0 +1,31 @@
+import { getDatabase } from './database';
+import fs from 'fs';
+import path from 'path';
+
+const schemaPath = path.join(__dirname, './schema.sql');
+
+export function runMigrations(): void {
+  try {
+    const db = getDatabase();
+    const schema = fs.readFileSync(schemaPath, 'utf-8');
+
+    // Execute the schema SQL
+    db.exec(schema);
+
+    console.log('Database migrations completed successfully');
+  } catch (error) {
+    console.error('Error running migrations:', error);
+    throw error;
+  }
+}
+
+export function initializeDatabase(): void {
+  try {
+    runMigrations();
+    console.log('Database initialized and ready for use');
+  } catch (error) {
+    console.error('Failed to initialize database:', error);
+    throw error;
+  }
+}
+

package/templates/vault/loki-mode/examples/todo-app-generated/backend/src/db/schema.sql

@@ -0,0 +1,8 @@
+CREATE TABLE IF NOT EXISTS todos (
+  id INTEGER PRIMARY KEY AUTOINCREMENT,
+  title TEXT NOT NULL,
+  description TEXT,
+  completed INTEGER DEFAULT 0,
+  createdAt TEXT,
+  updatedAt TEXT
+);

package/templates/vault/loki-mode/examples/todo-app-generated/backend/src/index.ts

@@ -0,0 +1,44 @@
+import express, { Express, Request, Response } from 'express';
+import cors from 'cors';
+import { initializeDatabase, closeDatabase } from './db';
+import todosRouter from './routes/todos';
+
+const app: Express = express();
+const PORT = process.env.PORT || 3001;
+
+// Middleware
+app.use(cors());
+app.use(express.json());
+
+// Initialize database on startup
+try {
+  initializeDatabase();
+} catch (error) {
+  console.error('Failed to initialize database:', error);
+  process.exit(1);
+}
+
+// Routes
+app.use('/api', todosRouter);
+
+// Health check endpoint
+app.get('/health', (_req: Request, res: Response) => {
+  res.json({ status: 'ok', message: 'Backend server is running' });
+});
+
+// Start server
+const server = app.listen(PORT, () => {
+  console.log(`Server is running on port ${PORT}`);
+});
+
+// Graceful shutdown
+process.on('SIGINT', () => {
+  console.log('Shutting down gracefully...');
+  closeDatabase();
+  server.close(() => {
+    console.log('Server closed');
+    process.exit(0);
+  });
+});
+
+export default app;

package/templates/vault/loki-mode/examples/todo-app-generated/backend/src/routes/todos.ts

@@ -0,0 +1,155 @@
+import { Router, Request, Response } from 'express';
+import db from '../db/db';
+import { ApiResponse, Todo } from '../types/index';
+
+const router = Router();
+
+// GET /api/todos - Retrieve all todos
+router.get('/todos', (_req: Request, res: Response): void => {
+  db.all('SELECT * FROM todos ORDER BY createdAt DESC', (err: any, rows: Todo[]) => {
+    if (err) {
+      const errorResponse: ApiResponse<null> = {
+        success: false,
+        error: 'Database error',
+      };
+      res.status(500).json(errorResponse);
+      return;
+    }
+
+    const successResponse: ApiResponse<Todo[]> = {
+      success: true,
+      data: rows || [],
+    };
+    res.json(successResponse);
+  });
+});
+
+// POST /api/todos - Create new todo
+router.post('/todos', (req: Request, res: Response): void => {
+  const { title } = req.body;
+
+  // Validation
+  if (!title || typeof title !== 'string' || title.trim() === '') {
+    res.status(400).json({ error: 'Title is required and must be a non-empty string' });
+    return;
+  }
+
+  const trimmedTitle = title.trim();
+  const now = new Date().toISOString();
+
+  db.run(
+    'INSERT INTO todos (title, completed, createdAt, updatedAt) VALUES (?, ?, ?, ?)',
+    [trimmedTitle, 0, now, now],
+    function(this: any, err: Error | null) {
+      if (err) {
+        res.status(500).json({ error: 'Database error', details: err.message });
+        return;
+      }
+
+      // Return created todo
+      db.get('SELECT * FROM todos WHERE id = ?', [this.lastID], (err: any, row: Todo) => {
+        if (err) {
+          res.status(500).json({ error: 'Database error', details: err.message });
+          return;
+        }
+
+        const successResponse: ApiResponse<Todo> = {
+          success: true,
+          data: row,
+        };
+        res.status(201).json(successResponse);
+      });
+    }
+  );
+});
+
+// PATCH /api/todos/:id - Update todo completion status
+router.patch('/todos/:id', (req: Request, res: Response): void => {
+  const { id } = req.params;
+  const { completed } = req.body;
+
+  // Validation
+  if (typeof completed !== 'boolean') {
+    res.status(400).json({ error: 'Completed must be a boolean value' });
+    return;
+  }
+
+  // Check if todo exists
+  db.get('SELECT * FROM todos WHERE id = ?', [id], (err: any, row: Todo) => {
+    if (err) {
+      res.status(500).json({ error: 'Database error', details: err.message });
+      return;
+    }
+    if (!row) {
+      res.status(404).json({ error: 'Todo not found' });
+      return;
+    }
+
+    const now = new Date().toISOString();
+
+    // Update todo
+    db.run(
+      'UPDATE todos SET completed = ?, updatedAt = ? WHERE id = ?',
+      [completed ? 1 : 0, now, id],
+      function(err: Error | null) {
+        if (err) {
+          res.status(500).json({ error: 'Database error', details: err.message });
+          return;
+        }
+
+        // Return updated todo
+        db.get('SELECT * FROM todos WHERE id = ?', [id], (err: any, updatedRow: Todo) => {
+          if (err) {
+            res.status(500).json({ error: 'Database error', details: err.message });
+            return;
+          }
+
+          const successResponse: ApiResponse<Todo> = {
+            success: true,
+            data: updatedRow,
+          };
+          res.json(successResponse);
+        });
+      }
+    );
+  });
+});
+
+// DELETE /api/todos/:id - Delete todo by id
+router.delete('/todos/:id', (req: Request, res: Response): void => {
+  const { id } = req.params;
+
+  // Validation - check if id is a valid number
+  if (!id || isNaN(Number(id))) {
+    res.status(400).json({ error: 'Invalid id parameter' });
+    return;
+  }
+
+  // Check if todo exists
+  db.get('SELECT * FROM todos WHERE id = ?', [id], (err: any, row: Todo) => {
+    if (err) {
+      res.status(500).json({ error: 'Database error', details: err.message });
+      return;
+    }
+    if (!row) {
+      res.status(404).json({ error: 'Todo not found' });
+      return;
+    }
+
+    // Delete todo
+    db.run(
+      'DELETE FROM todos WHERE id = ?',
+      [id],
+      function(err: Error | null) {
+        if (err) {
+          res.status(500).json({ error: 'Database error', details: err.message });
+          return;
+        }
+
+        res.json({ message: 'Todo deleted successfully' });
+      }
+    );
+  });
+});
+
+export default router;

package/templates/vault/loki-mode/examples/todo-app-generated/backend/src/types/index.ts

@@ -0,0 +1,35 @@
+// Todo item types
+export interface Todo {
+  id: number;
+  title: string;
+  description?: string;
+  completed: boolean;
+  createdAt: string;
+  updatedAt: string;
+}
+
+// API response types
+export interface ApiResponse<T> {
+  success: boolean;
+  data?: T;
+  error?: string;
+  message?: string;
+}
+
+// Request body types
+export interface CreateTodoRequest {
+  title: string;
+  description?: string;
+}
+
+export interface UpdateTodoRequest {
+  title?: string;
+  description?: string;
+  completed?: boolean;
+}
+
+// Database types
+export interface DatabaseConfig {
+  path: string;
+  readonly?: boolean;
+}

package/templates/vault/loki-mode/examples/todo-app-generated/frontend/src/App.css

@@ -0,0 +1,384 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
+  min-height: 100vh;
+  line-height: 1.6;
+}
+
+.app {
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.app-header {
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.app-header h1 {
+  color: #333;
+  font-size: 2.5rem;
+  font-weight: 600;
+  letter-spacing: -0.5px;
+}
+
+.app-main {
+  background: white;
+  border-radius: 12px;
+  padding: 24px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+
+/* TodoForm */
+.todo-form {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 24px;
+}
+
+.todo-input {
+  flex: 1;
+  padding: 12px 16px;
+  border: 2px solid #e0e0e0;
+  border-radius: 8px;
+  font-size: 16px;
+  transition: all 0.2s ease;
+  font-family: inherit;
+}
+
+.todo-input:focus {
+  outline: none;
+  border-color: #4CAF50;
+  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
+}
+
+.todo-input:disabled {
+  background-color: #f5f5f5;
+  color: #999;
+  cursor: not-allowed;
+}
+
+.add-button {
+  padding: 12px 24px;
+  background-color: #4CAF50;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+}
+
+.add-button:hover:not(:disabled) {
+  background-color: #45a049;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
+}
+
+.add-button:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.add-button:disabled {
+  background-color: #ccc;
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+/* TodoList */
+.todo-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+/* TodoItem */
+.todo-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px;
+  background: #f9f9f9;
+  border: 1px solid #e8e8e8;
+  border-radius: 8px;
+  transition: all 0.2s ease;
+}
+
+.todo-item:hover {
+  background: #f0f0f0;
+  border-color: #d0d0d0;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+}
+
+.todo-content {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1;
+  min-width: 0;
+}
+
+.todo-checkbox {
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  accent-color: #4CAF50;
+  flex-shrink: 0;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.todo-checkbox:hover {
+  transform: scale(1.15);
+}
+
+.todo-checkbox:focus {
+  outline: 2px solid #4CAF50;
+  outline-offset: 2px;
+}
+
+.todo-title {
+  font-size: 16px;
+  color: #333;
+  word-break: break-word;
+  transition: all 0.2s ease;
+}
+
+.todo-title.completed {
+  text-decoration: line-through;
+  color: #999;
+}
+
+.delete-button {
+  padding: 8px 16px;
+  background-color: #f44336;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+  flex-shrink: 0;
+  margin-left: 8px;
+  font-weight: 500;
+}
+
+.delete-button:hover {
+  background-color: #da190b;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(244, 67, 54, 0.3);
+}
+
+.delete-button:active {
+  transform: translateY(0);
+}
+
+.delete-button:focus {
+  outline: 2px solid #f44336;
+  outline-offset: 2px;
+}
+
+/* EmptyState */
+.empty-state {
+  text-align: center;
+  padding: 48px 24px;
+  color: #999;
+}
+
+.empty-message {
+  font-size: 20px;
+  font-weight: 500;
+  color: #666;
+  margin-bottom: 8px;
+}
+
+.empty-hint {
+  font-size: 14px;
+  color: #999;
+}
+
+/* Loading State */
+.loading {
+  text-align: center;
+  padding: 40px 20px;
+  color: #666;
+  font-size: 16px;
+}
+
+/* Error Message */
+.error-message {
+  padding: 12px 16px;
+  background-color: #ffebee;
+  color: #c62828;
+  border: 1px solid #ef5350;
+  border-radius: 8px;
+  margin-bottom: 16px;
+  font-size: 14px;
+  text-align: center;
+}
+
+/* ConfirmDialog */
+.dialog-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  animation: fadeIn 0.2s ease;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.dialog-content {
+  background: white;
+  padding: 24px;
+  border-radius: 12px;
+  max-width: 400px;
+  width: 90%;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+  animation: slideUp 0.2s ease;
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(10px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.dialog-message {
+  margin-bottom: 20px;
+  font-size: 16px;
+  color: #333;
+  line-height: 1.5;
+}
+
+.dialog-buttons {
+  display: flex;
+  gap: 12px;
+  justify-content: flex-end;
+}
+
+.cancel-button {
+  padding: 10px 20px;
+  background-color: #f0f0f0;
+  color: #333;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+}
+
+.cancel-button:hover {
+  background-color: #e0e0e0;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.cancel-button:focus {
+  outline: 2px solid #333;
+  outline-offset: 2px;
+}
+
+.confirm-button {
+  padding: 10px 20px;
+  background-color: #f44336;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+}
+
+.confirm-button:hover {
+  background-color: #da190b;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(244, 67, 54, 0.3);
+}
+
+.confirm-button:active {
+  transform: translateY(0);
+}
+
+.confirm-button:focus {
+  outline: 2px solid #f44336;
+  outline-offset: 2px;
+}
+
+/* Responsive Design */
+@media (max-width: 640px) {
+  .app {
+    padding: 12px;
+  }
+
+  .app-header h1 {
+    font-size: 2rem;
+  }
+
+  .app-main {
+    padding: 16px;
+  }
+
+  .todo-form {
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .add-button {
+    width: 100%;
+  }
+
+  .todo-item {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+  }
+
+  .todo-content {
+    width: 100%;
+  }
+
+  .delete-button {
+    width: 100%;
+    margin-left: 0;
+  }
+
+  .dialog-content {
+    width: 95%;
+  }
+}