lean-spec 0.2.5-dev.20251124045153 → 0.2.5-dev.20251124054130

package/templates/examples/dark-theme/src/public/style.css

@@ -0,0 +1,163 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  background-color: #f5f5f5;
+  color: #333;
+  line-height: 1.6;
+  padding: 20px;
+}
+
+.container {
+  max-width: 600px;
+  margin: 0 auto;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  padding: 30px;
+}
+
+header {
+  text-align: center;
+  margin-bottom: 30px;
+  padding-bottom: 20px;
+  border-bottom: 2px solid #e0e0e0;
+}
+
+h1 {
+  font-size: 2em;
+  color: #2c3e50;
+  margin-bottom: 8px;
+}
+
+.subtitle {
+  color: #7f8c8d;
+  font-size: 0.95em;
+}
+
+.task-input {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 25px;
+}
+
+#taskInput {
+  flex: 1;
+  padding: 12px 16px;
+  border: 2px solid #e0e0e0;
+  border-radius: 8px;
+  font-size: 1em;
+  transition: border-color 0.2s;
+}
+
+#taskInput:focus {
+  outline: none;
+  border-color: #3498db;
+}
+
+#addButton {
+  padding: 12px 24px;
+  background: #3498db;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-size: 1em;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+#addButton:hover {
+  background: #2980b9;
+}
+
+.task-list {
+  min-height: 200px;
+}
+
+#taskList {
+  list-style: none;
+}
+
+.task-item {
+  padding: 15px;
+  margin-bottom: 10px;
+  background: #f8f9fa;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  transition: background 0.2s;
+}
+
+.task-item:hover {
+  background: #e9ecef;
+}
+
+.task-item.completed {
+  opacity: 0.6;
+}
+
+.task-item.completed .task-text {
+  text-decoration: line-through;
+}
+
+.task-content {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1;
+}
+
+.task-checkbox {
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+}
+
+.task-text {
+  font-size: 1em;
+  color: #2c3e50;
+}
+
+.delete-button {
+  padding: 6px 12px;
+  background: #e74c3c;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-size: 0.85em;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.delete-button:hover {
+  background: #c0392b;
+}
+
+.stats {
+  margin-top: 20px;
+  padding-top: 20px;
+  border-top: 2px solid #e0e0e0;
+  text-align: center;
+  color: #7f8c8d;
+  font-size: 0.9em;
+}
+
+footer {
+  margin-top: 30px;
+  padding-top: 20px;
+  border-top: 2px solid #e0e0e0;
+  text-align: center;
+  color: #95a5a6;
+  font-size: 0.85em;
+}
+
+.empty-state {
+  text-align: center;
+  padding: 40px 20px;
+  color: #95a5a6;
+}

package/templates/examples/dark-theme/src/server.js

@@ -0,0 +1,17 @@
+import express from 'express';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const app = express();
+const PORT = 3000;
+
+// Serve static files from public directory
+app.use(express.static(path.join(__dirname, 'public')));
+
+app.listen(PORT, () => {
+  console.log(`✓ Task Manager running at http://localhost:${PORT}`);
+  console.log(`✓ Open your browser and try adding some tasks!`);
+});

package/templates/examples/dashboard-widgets/README.md

@@ -0,0 +1,70 @@
+# Dashboard Widgets Demo
+
+> **Tutorial**: [Managing Multiple Features](https://leanspec.dev/docs/tutorials/multiple-features)
+
+## Scenario
+
+You're building an analytics dashboard for a SaaS product. The dashboard has some basic widgets (stats cards and a simple chart), but the product team wants to add three new widgets:
+- **Recent Activity Feed** - Show latest user actions
+- **Performance Metrics** - Display system health indicators  
+- **Quick Actions Panel** - Common shortcuts for users
+
+Each widget needs to be designed, implemented, and integrated into the dashboard grid.
+
+## What's Here
+
+A minimal React + Vite dashboard with:
+- Grid layout for widgets
+- Two existing widgets (Stats, Chart)
+- Reusable widget wrapper component
+- Mock data utilities
+
+**Files:**
+- `src/App.jsx` - Main dashboard component
+- `src/components/Dashboard.jsx` - Dashboard grid layout
+- `src/components/widgets/` - Existing widgets
+- `src/utils/mockData.js` - Sample data generator
+- `index.html` - Entry point
+
+## Getting Started
+
+```bash
+# Install dependencies
+npm install
+
+# Start dev server
+npm run dev
+
+# Open http://localhost:5173 in your browser
+```
+
+## Your Mission
+
+Add three new widgets to the dashboard. Follow the tutorial and ask your AI assistant:
+
+> "Help me add three new widgets to this dashboard using LeanSpec: Recent Activity Feed, Performance Metrics, and Quick Actions Panel."
+
+The AI will guide you through:
+1. Creating specs for each widget (or one unified spec)
+2. Designing the widget interfaces
+3. Implementing components
+4. Managing dependencies between widgets
+5. Testing the integrated dashboard
+
+## Current Structure
+
+```
+Dashboard
+├── StatsWidget (implemented)
+├── ChartWidget (implemented)
+├── ActivityWidget (TODO)
+├── MetricsWidget (TODO)
+└── ActionsWidget (TODO)
+```
+
+## Tips
+
+- Each widget is self-contained with its own component
+- Widgets use the `WidgetWrapper` component for consistent styling
+- Mock data is in `utils/mockData.js` - add new generators as needed
+- Consider which widgets share dependencies (e.g., both might need user data)

package/templates/examples/dashboard-widgets/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Dashboard Widgets Demo</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

package/templates/examples/dashboard-widgets/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "dashboard-widgets-demo",
+  "version": "1.0.0",
+  "description": "React Dashboard for LeanSpec Tutorial 2",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "keywords": ["leanspec", "tutorial", "demo"],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.2.1",
+    "vite": "^5.0.0"
+  }
+}

package/templates/examples/dashboard-widgets/src/App.css

@@ -0,0 +1,20 @@
+.app {
+  padding: 20px;
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+header {
+  margin-bottom: 30px;
+}
+
+header h1 {
+  margin: 0 0 5px 0;
+  color: #333;
+}
+
+header p {
+  margin: 0;
+  color: #666;
+  font-size: 14px;
+}

package/templates/examples/dashboard-widgets/src/App.jsx

@@ -0,0 +1,16 @@
+import Dashboard from './components/Dashboard';
+import './App.css';
+
+function App() {
+  return (
+    <div className="app">
+      <header>
+        <h1>Analytics Dashboard</h1>
+        <p>Demo for LeanSpec Tutorial 2</p>
+      </header>
+      <Dashboard />
+    </div>
+  );
+}
+
+export default App;

package/templates/examples/dashboard-widgets/src/components/Dashboard.css

@@ -0,0 +1,17 @@
+.dashboard-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 20px;
+}
+
+@media (min-width: 768px) {
+  .dashboard-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (min-width: 1200px) {
+  .dashboard-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}

package/templates/examples/dashboard-widgets/src/components/Dashboard.jsx

@@ -0,0 +1,15 @@
+import StatsWidget from './widgets/StatsWidget';
+import ChartWidget from './widgets/ChartWidget';
+import './Dashboard.css';
+
+function Dashboard() {
+  return (
+    <div className="dashboard-grid">
+      <StatsWidget />
+      <ChartWidget />
+      {/* TODO: Add new widgets here */}
+    </div>
+  );
+}
+
+export default Dashboard;

package/templates/examples/dashboard-widgets/src/components/WidgetWrapper.css

@@ -0,0 +1,23 @@
+.widget {
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+  overflow: hidden;
+}
+
+.widget-header {
+  padding: 15px 20px;
+  border-bottom: 1px solid #eee;
+  background: #fafafa;
+}
+
+.widget-header h3 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+}
+
+.widget-body {
+  padding: 20px;
+}

package/templates/examples/dashboard-widgets/src/components/WidgetWrapper.jsx

@@ -0,0 +1,16 @@
+import './WidgetWrapper.css';
+
+function WidgetWrapper({ title, children }) {
+  return (
+    <div className="widget">
+      <div className="widget-header">
+        <h3>{title}</h3>
+      </div>
+      <div className="widget-body">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export default WidgetWrapper;

package/templates/examples/dashboard-widgets/src/components/widgets/ChartWidget.css

@@ -0,0 +1,33 @@
+.chart {
+  height: 200px;
+}
+
+.chart-bars {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-around;
+  height: 100%;
+  gap: 8px;
+}
+
+.chart-bar-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+}
+
+.chart-bar {
+  width: 100%;
+  background: linear-gradient(to top, #2563eb, #60a5fa);
+  border-radius: 4px 4px 0 0;
+  transition: height 0.3s ease;
+  min-height: 4px;
+}
+
+.chart-label {
+  margin-top: 8px;
+  font-size: 11px;
+  color: #666;
+}

package/templates/examples/dashboard-widgets/src/components/widgets/ChartWidget.jsx

@@ -0,0 +1,28 @@
+import WidgetWrapper from '../WidgetWrapper';
+import { getChartData } from '../../utils/mockData';
+import './ChartWidget.css';
+
+function ChartWidget() {
+  const data = getChartData();
+  const maxValue = Math.max(...data.map(d => d.value));
+  
+  return (
+    <WidgetWrapper title="Activity Trend">
+      <div className="chart">
+        <div className="chart-bars">
+          {data.map((item, index) => (
+            <div key={index} className="chart-bar-container">
+              <div 
+                className="chart-bar"
+                style={{ height: `${(item.value / maxValue) * 100}%` }}
+              />
+              <div className="chart-label">{item.label}</div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </WidgetWrapper>
+  );
+}
+
+export default ChartWidget;

package/templates/examples/dashboard-widgets/src/components/widgets/StatsWidget.css

@@ -0,0 +1,24 @@
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 15px;
+}
+
+.stat-item {
+  text-align: center;
+  padding: 10px;
+}
+
+.stat-value {
+  font-size: 28px;
+  font-weight: bold;
+  color: #2563eb;
+  margin-bottom: 5px;
+}
+
+.stat-label {
+  font-size: 12px;
+  color: #666;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}

package/templates/examples/dashboard-widgets/src/components/widgets/StatsWidget.jsx

@@ -0,0 +1,22 @@
+import WidgetWrapper from '../WidgetWrapper';
+import { getStats } from '../../utils/mockData';
+import './StatsWidget.css';
+
+function StatsWidget() {
+  const stats = getStats();
+  
+  return (
+    <WidgetWrapper title="Quick Stats">
+      <div className="stats-grid">
+        {stats.map((stat, index) => (
+          <div key={index} className="stat-item">
+            <div className="stat-value">{stat.value}</div>
+            <div className="stat-label">{stat.label}</div>
+          </div>
+        ))}
+      </div>
+    </WidgetWrapper>
+  );
+}
+
+export default StatsWidget;

package/templates/examples/dashboard-widgets/src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background: #f5f5f5;
+}
+
+* {
+  box-sizing: border-box;
+}

package/templates/examples/dashboard-widgets/src/main.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

package/templates/examples/dashboard-widgets/src/utils/mockData.js

@@ -0,0 +1,30 @@
+/**
+ * Mock data generators for dashboard widgets
+ */
+
+export function getStats() {
+  return [
+    { label: 'Users', value: '2,453' },
+    { label: 'Revenue', value: '$12.5K' },
+    { label: 'Orders', value: '186' },
+    { label: 'Growth', value: '+23%' },
+  ];
+}
+
+export function getChartData() {
+  return [
+    { label: 'Mon', value: 45 },
+    { label: 'Tue', value: 62 },
+    { label: 'Wed', value: 38 },
+    { label: 'Thu', value: 71 },
+    { label: 'Fri', value: 55 },
+    { label: 'Sat', value: 28 },
+    { label: 'Sun', value: 34 },
+  ];
+}
+
+// TODO: Add more mock data generators for new widgets
+// Example:
+// export function getActivityFeed() { ... }
+// export function getPerformanceMetrics() { ... }
+// export function getQuickActions() { ... }

package/templates/examples/dashboard-widgets/vite.config.js

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+});