lean-spec 0.2.5-dev.20251124045153 → 0.2.5-dev.20251124054130
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/dist/{chunk-IGNO4GX2.js → chunk-6FKLWECL.js} +760 -550
- package/dist/chunk-6FKLWECL.js.map +1 -0
- package/dist/cli.js +6 -1
- package/dist/cli.js.map +1 -1
- package/dist/mcp-server.js +1 -1
- package/package.json +1 -1
- package/templates/examples/api-refactor/README.md +81 -0
- package/templates/examples/api-refactor/package.json +16 -0
- package/templates/examples/api-refactor/src/app.js +40 -0
- package/templates/examples/api-refactor/src/services/currencyService.js +43 -0
- package/templates/examples/api-refactor/src/services/timezoneService.js +41 -0
- package/templates/examples/api-refactor/src/services/weatherService.js +42 -0
- package/templates/examples/dark-theme/README.md +55 -0
- package/templates/examples/dark-theme/package.json +16 -0
- package/templates/examples/dark-theme/src/public/app.js +92 -0
- package/templates/examples/dark-theme/src/public/index.html +38 -0
- package/templates/examples/dark-theme/src/public/style.css +163 -0
- package/templates/examples/dark-theme/src/server.js +17 -0
- package/templates/examples/dashboard-widgets/README.md +70 -0
- package/templates/examples/dashboard-widgets/index.html +12 -0
- package/templates/examples/dashboard-widgets/package.json +22 -0
- package/templates/examples/dashboard-widgets/src/App.css +20 -0
- package/templates/examples/dashboard-widgets/src/App.jsx +16 -0
- package/templates/examples/dashboard-widgets/src/components/Dashboard.css +17 -0
- package/templates/examples/dashboard-widgets/src/components/Dashboard.jsx +15 -0
- package/templates/examples/dashboard-widgets/src/components/WidgetWrapper.css +23 -0
- package/templates/examples/dashboard-widgets/src/components/WidgetWrapper.jsx +16 -0
- package/templates/examples/dashboard-widgets/src/components/widgets/ChartWidget.css +33 -0
- package/templates/examples/dashboard-widgets/src/components/widgets/ChartWidget.jsx +28 -0
- package/templates/examples/dashboard-widgets/src/components/widgets/StatsWidget.css +24 -0
- package/templates/examples/dashboard-widgets/src/components/widgets/StatsWidget.jsx +22 -0
- package/templates/examples/dashboard-widgets/src/index.css +13 -0
- package/templates/examples/dashboard-widgets/src/main.jsx +10 -0
- package/templates/examples/dashboard-widgets/src/utils/mockData.js +30 -0
- package/templates/examples/dashboard-widgets/vite.config.js +6 -0
- package/dist/chunk-IGNO4GX2.js.map +0 -1
package/dist/cli.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { analyzeCommand, archiveCommand, backfillCommand, boardCommand, checkCommand, compactCommand, createCommand, depsCommand, filesCommand, ganttCommand, initCommand, linkCommand, listCommand, mcpCommand, migrateCommand, openCommand, searchCommand, splitCommand, statsCommand, templatesCommand, timelineCommand, tokensCommand, uiCommand, unlinkCommand, updateCommand, validateCommand, viewCommand } from './chunk-
|
|
1
|
+
import { analyzeCommand, archiveCommand, backfillCommand, boardCommand, checkCommand, compactCommand, createCommand, depsCommand, examplesCommand, filesCommand, ganttCommand, initCommand, linkCommand, listCommand, mcpCommand, migrateCommand, openCommand, searchCommand, splitCommand, statsCommand, templatesCommand, timelineCommand, tokensCommand, uiCommand, unlinkCommand, updateCommand, validateCommand, viewCommand } from './chunk-6FKLWECL.js';
|
|
2
2
|
import './chunk-LVD7ZAVZ.js';
|
|
3
3
|
import { Command } from 'commander';
|
|
4
4
|
import { readFileSync } from 'fs';
|
|
@@ -15,6 +15,7 @@ function registerCommands(program2) {
|
|
|
15
15
|
program2.addCommand(compactCommand());
|
|
16
16
|
program2.addCommand(createCommand());
|
|
17
17
|
program2.addCommand(depsCommand());
|
|
18
|
+
program2.addCommand(examplesCommand());
|
|
18
19
|
program2.addCommand(filesCommand());
|
|
19
20
|
program2.addCommand(ganttCommand());
|
|
20
21
|
program2.addCommand(initCommand());
|
|
@@ -51,6 +52,7 @@ Command Groups:
|
|
|
51
52
|
archive <spec> Move spec to archived/
|
|
52
53
|
backfill [specs...] Backfill timestamps from git history
|
|
53
54
|
create <name> Create new spec
|
|
55
|
+
examples List example projects for tutorials
|
|
54
56
|
init Initialize LeanSpec in current directory
|
|
55
57
|
link <spec> Add relationships between specs
|
|
56
58
|
migrate <input-path> Migrate specs from other SDD tools
|
|
@@ -91,6 +93,9 @@ Command Groups:
|
|
|
91
93
|
Examples:
|
|
92
94
|
$ lean-spec init
|
|
93
95
|
$ lean-spec init -y
|
|
96
|
+
$ lean-spec init --example dark-theme
|
|
97
|
+
$ lean-spec init --example dashboard-widgets --name my-demo
|
|
98
|
+
$ lean-spec examples
|
|
94
99
|
$ lean-spec create my-feature --priority high
|
|
95
100
|
$ lean-spec list --status in-progress
|
|
96
101
|
$ lean-spec view 042
|
package/dist/cli.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/commands/registry.ts","../src/cli.ts"],"names":["program"],"mappings":";;;;;;;;
|
|
1
|
+
{"version":3,"sources":["../src/commands/registry.ts","../src/cli.ts"],"names":["program"],"mappings":"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","file":"cli.js","sourcesContent":["import { Command } from 'commander';\nimport {\n analyzeCommand,\n archiveCommand,\n backfillCommand,\n boardCommand,\n checkCommand,\n compactCommand,\n createCommand,\n depsCommand,\n examplesCommand,\n filesCommand,\n ganttCommand,\n initCommand,\n linkCommand,\n listCommand,\n mcpCommand,\n migrateCommand,\n openCommand,\n searchCommand,\n splitCommand,\n statsCommand,\n templatesCommand,\n timelineCommand,\n tokensCommand,\n uiCommand,\n unlinkCommand,\n updateCommand,\n validateCommand,\n viewCommand,\n} from './index.js';\n\n/**\n * Register all commands in alphabetical order\n */\nexport function registerCommands(program: Command): void {\n // Alphabetically sorted command registration\n program.addCommand(analyzeCommand());\n program.addCommand(archiveCommand());\n program.addCommand(backfillCommand());\n program.addCommand(boardCommand());\n program.addCommand(checkCommand());\n program.addCommand(compactCommand());\n program.addCommand(createCommand());\n program.addCommand(depsCommand());\n program.addCommand(examplesCommand());\n program.addCommand(filesCommand());\n program.addCommand(ganttCommand());\n program.addCommand(initCommand());\n program.addCommand(linkCommand());\n program.addCommand(listCommand());\n program.addCommand(mcpCommand());\n program.addCommand(migrateCommand());\n program.addCommand(openCommand());\n program.addCommand(searchCommand());\n program.addCommand(splitCommand());\n program.addCommand(statsCommand());\n program.addCommand(templatesCommand());\n program.addCommand(timelineCommand());\n program.addCommand(tokensCommand());\n program.addCommand(uiCommand());\n program.addCommand(unlinkCommand());\n program.addCommand(updateCommand());\n program.addCommand(validateCommand());\n program.addCommand(viewCommand());\n}\n","import { Command } from 'commander';\nimport { readFileSync } from 'fs';\nimport { fileURLToPath } from 'url';\nimport { dirname, join } from 'path';\nimport { registerCommands } from './commands/registry.js';\n\n// Get version from package.json\nconst __filename = fileURLToPath(import.meta.url);\nconst __dirname = dirname(__filename);\nconst packageJson = JSON.parse(\n readFileSync(join(__dirname, '../package.json'), 'utf-8')\n);\n\nconst program = new Command();\n\nprogram\n .name('lean-spec')\n .description('Manage LeanSpec documents')\n .version(packageJson.version);\n\n// Add custom help text with grouped commands\nprogram.addHelpText('after', `\nCommand Groups:\n\n Core Workflow:\n archive <spec> Move spec to archived/\n backfill [specs...] Backfill timestamps from git history\n create <name> Create new spec\n examples List example projects for tutorials\n init Initialize LeanSpec in current directory\n link <spec> Add relationships between specs\n migrate <input-path> Migrate specs from other SDD tools\n unlink <spec> Remove relationships between specs\n update <spec> Update spec metadata\n \n Discovery & Search:\n files <spec> List files in a spec\n list List all specs\n open <spec> Open spec in editor\n search <query> Full-text search with metadata filters\n view <spec> View spec content\n \n Project Analytics:\n board Show Kanban-style board view\n deps <spec> Show dependency graph for a spec\n gantt Show timeline with dependencies\n stats Show aggregate statistics\n timeline Show creation/completion over time\n \n Quality & Optimization:\n analyze <spec> Analyze spec complexity and structure\n check Check for sequence conflicts\n tokens [spec] Count tokens for LLM context management\n validate [specs...] Validate specs for quality issues\n \n Advanced Editing:\n compact <spec> Remove specified line ranges from spec\n split <spec> Split spec into multiple files\n \n Configuration:\n templates Manage spec templates\n \n Integration:\n mcp Start MCP server for AI assistants\n ui Start local web UI for spec management\n\nExamples:\n $ lean-spec init\n $ lean-spec init -y\n $ lean-spec init --example dark-theme\n $ lean-spec init --example dashboard-widgets --name my-demo\n $ lean-spec examples\n $ lean-spec create my-feature --priority high\n $ lean-spec list --status in-progress\n $ lean-spec view 042\n $ lean-spec link 085 --depends-on 042,035\n $ lean-spec link 085 --related 082\n $ lean-spec unlink 085 --depends-on 042\n $ lean-spec deps 085\n $ lean-spec backfill --dry-run\n $ lean-spec migrate ./docs/adr\n $ lean-spec migrate ./docs/rfcs --with copilot\n $ lean-spec board --tag backend\n $ lean-spec search \"authentication\"\n $ lean-spec validate\n $ lean-spec tokens 059\n $ lean-spec analyze 045 --json\n $ lean-spec split 045 --output README.md:1-150 --output DESIGN.md:151-end\n $ lean-spec ui\n $ lean-spec ui --port 3001 --no-open\n $ lean-spec ui --specs ./docs/specs --dry-run\n`);\n\n// Register all commands (alphabetically ordered)\nregisterCommands(program);\n\n// Parse and execute\nprogram.parse();\n"]}
|
package/dist/mcp-server.js
CHANGED
package/package.json
CHANGED
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
# API Refactor Demo
|
|
2
|
+
|
|
3
|
+
> **Tutorial**: [Refactoring with Specs](https://leanspec.dev/docs/tutorials/refactoring-specs)
|
|
4
|
+
|
|
5
|
+
## Scenario
|
|
6
|
+
|
|
7
|
+
You're maintaining a Node.js application that started simple but has grown messy. The app integrates with multiple external services (weather API, currency converter, timezone lookup), but all the HTTP logic is tangled together in the main application code.
|
|
8
|
+
|
|
9
|
+
You want to extract a reusable API client module that:
|
|
10
|
+
- Centralizes HTTP request handling
|
|
11
|
+
- Provides a clean interface for service calls
|
|
12
|
+
- Handles errors consistently
|
|
13
|
+
- Makes the code easier to test and maintain
|
|
14
|
+
|
|
15
|
+
## What's Here
|
|
16
|
+
|
|
17
|
+
A monolithic Node.js app with:
|
|
18
|
+
- Weather lookup feature (calls external API)
|
|
19
|
+
- Currency conversion (calls external API)
|
|
20
|
+
- Timezone lookup (calls external API)
|
|
21
|
+
- All HTTP logic mixed into business logic (tight coupling)
|
|
22
|
+
- No error handling abstraction
|
|
23
|
+
- Hard to test individual parts
|
|
24
|
+
|
|
25
|
+
**Files:**
|
|
26
|
+
- `src/app.js` - Main application with all features
|
|
27
|
+
- `src/services/weatherService.js` - Weather API calls (tightly coupled)
|
|
28
|
+
- `src/services/currencyService.js` - Currency API calls (tightly coupled)
|
|
29
|
+
- `src/services/timezoneService.js` - Timezone API calls (tightly coupled)
|
|
30
|
+
|
|
31
|
+
## Getting Started
|
|
32
|
+
|
|
33
|
+
```bash
|
|
34
|
+
# Install dependencies
|
|
35
|
+
npm install
|
|
36
|
+
|
|
37
|
+
# Run the app
|
|
38
|
+
npm start
|
|
39
|
+
|
|
40
|
+
# Try the features:
|
|
41
|
+
# - Weather: Get weather for a city
|
|
42
|
+
# - Currency: Convert between currencies
|
|
43
|
+
# - Timezone: Look up timezone info
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
## Your Mission
|
|
47
|
+
|
|
48
|
+
Refactor the HTTP logic into a clean, reusable API client. Follow the tutorial and ask your AI assistant:
|
|
49
|
+
|
|
50
|
+
> "Help me refactor this app using LeanSpec. I want to extract a reusable API client module that centralizes all the HTTP logic."
|
|
51
|
+
|
|
52
|
+
The AI will guide you through:
|
|
53
|
+
1. Creating a refactoring spec
|
|
54
|
+
2. Designing the API client interface
|
|
55
|
+
3. Extracting the HTTP logic step by step
|
|
56
|
+
4. Updating services to use the new client
|
|
57
|
+
5. Verifying everything still works
|
|
58
|
+
|
|
59
|
+
## Current Problems
|
|
60
|
+
|
|
61
|
+
- **Duplicated code**: Each service reimplements HTTP requests
|
|
62
|
+
- **No error handling**: Errors handled inconsistently
|
|
63
|
+
- **Hard to test**: Can't mock HTTP calls easily
|
|
64
|
+
- **Tight coupling**: Business logic mixed with HTTP details
|
|
65
|
+
- **No retry logic**: Network failures aren't handled
|
|
66
|
+
|
|
67
|
+
These are perfect opportunities to practice refactoring with specs!
|
|
68
|
+
|
|
69
|
+
## Expected Result
|
|
70
|
+
|
|
71
|
+
After refactoring, you should have:
|
|
72
|
+
```
|
|
73
|
+
src/
|
|
74
|
+
app.js (unchanged interface)
|
|
75
|
+
client/
|
|
76
|
+
apiClient.js (new - centralized HTTP logic)
|
|
77
|
+
services/
|
|
78
|
+
weatherService.js (simplified - uses apiClient)
|
|
79
|
+
currencyService.js (simplified - uses apiClient)
|
|
80
|
+
timezoneService.js (simplified - uses apiClient)
|
|
81
|
+
```
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "api-refactor-demo",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "Monolithic Node.js app for LeanSpec Tutorial 3",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"start": "node src/app.js",
|
|
8
|
+
"dev": "node --watch src/app.js"
|
|
9
|
+
},
|
|
10
|
+
"keywords": ["leanspec", "tutorial", "demo"],
|
|
11
|
+
"author": "",
|
|
12
|
+
"license": "MIT",
|
|
13
|
+
"dependencies": {
|
|
14
|
+
"node-fetch": "^3.3.2"
|
|
15
|
+
}
|
|
16
|
+
}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { getWeather } from './services/weatherService.js';
|
|
2
|
+
import { convertCurrency } from './services/currencyService.js';
|
|
3
|
+
import { getTimezone } from './services/timezoneService.js';
|
|
4
|
+
|
|
5
|
+
console.log('=== Multi-Service App Demo ===\n');
|
|
6
|
+
|
|
7
|
+
// Demo 1: Weather lookup
|
|
8
|
+
console.log('1. Weather Lookup:');
|
|
9
|
+
try {
|
|
10
|
+
const weather = await getWeather('London');
|
|
11
|
+
console.log(` ${weather.city}: ${weather.temp}°C, ${weather.condition}`);
|
|
12
|
+
} catch (error) {
|
|
13
|
+
console.log(` Error: ${error.message}`);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
console.log('');
|
|
17
|
+
|
|
18
|
+
// Demo 2: Currency conversion
|
|
19
|
+
console.log('2. Currency Conversion:');
|
|
20
|
+
try {
|
|
21
|
+
const result = await convertCurrency(100, 'USD', 'EUR');
|
|
22
|
+
console.log(` ${result.amount} ${result.from} = ${result.converted} ${result.to}`);
|
|
23
|
+
} catch (error) {
|
|
24
|
+
console.log(` Error: ${error.message}`);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
console.log('');
|
|
28
|
+
|
|
29
|
+
// Demo 3: Timezone lookup
|
|
30
|
+
console.log('3. Timezone Lookup:');
|
|
31
|
+
try {
|
|
32
|
+
const timezone = await getTimezone('America/New_York');
|
|
33
|
+
console.log(` ${timezone.name}: ${timezone.offset} (${timezone.abbreviation})`);
|
|
34
|
+
} catch (error) {
|
|
35
|
+
console.log(` Error: ${error.message}`);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
console.log('');
|
|
39
|
+
console.log('Notice: All services work, but they all duplicate HTTP logic!');
|
|
40
|
+
console.log('Your task: Extract a reusable API client module.');
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import fetch from 'node-fetch';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Convert currency
|
|
5
|
+
*
|
|
6
|
+
* PROBLEM: Duplicates HTTP logic from weatherService
|
|
7
|
+
* - Same fetch boilerplate
|
|
8
|
+
* - Same error handling pattern
|
|
9
|
+
* - Same JSON parsing
|
|
10
|
+
* - Should be using a shared HTTP client!
|
|
11
|
+
*/
|
|
12
|
+
export async function convertCurrency(amount, from, to) {
|
|
13
|
+
// Mock API endpoint (replace with real API in production)
|
|
14
|
+
const url = `https://api.exchangerate.host/convert?from=${from}&to=${to}&amount=${amount}`;
|
|
15
|
+
|
|
16
|
+
try {
|
|
17
|
+
const response = await fetch(url);
|
|
18
|
+
|
|
19
|
+
if (!response.ok) {
|
|
20
|
+
throw new Error(`Currency API error: ${response.status}`);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
const data = await response.json();
|
|
24
|
+
|
|
25
|
+
// Business logic: Transform API response to our format
|
|
26
|
+
return {
|
|
27
|
+
amount,
|
|
28
|
+
from,
|
|
29
|
+
to,
|
|
30
|
+
converted: data.result || (amount * 0.85).toFixed(2),
|
|
31
|
+
rate: data.info?.rate || 0.85,
|
|
32
|
+
};
|
|
33
|
+
} catch (error) {
|
|
34
|
+
// For demo, return mock data on error
|
|
35
|
+
return {
|
|
36
|
+
amount,
|
|
37
|
+
from,
|
|
38
|
+
to,
|
|
39
|
+
converted: (amount * 0.85).toFixed(2),
|
|
40
|
+
rate: 0.85,
|
|
41
|
+
};
|
|
42
|
+
}
|
|
43
|
+
}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import fetch from 'node-fetch';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Get timezone information
|
|
5
|
+
*
|
|
6
|
+
* PROBLEM: Yet another copy of the same HTTP logic!
|
|
7
|
+
* - Third time we're writing fetch + error handling + JSON parsing
|
|
8
|
+
* - Violates DRY principle
|
|
9
|
+
* - Makes testing hard (need to mock fetch in 3 places)
|
|
10
|
+
* - Changes to HTTP logic need updates in 3 files
|
|
11
|
+
*/
|
|
12
|
+
export async function getTimezone(zone) {
|
|
13
|
+
// Mock API endpoint (replace with real API in production)
|
|
14
|
+
const url = `http://worldtimeapi.org/api/timezone/${zone}`;
|
|
15
|
+
|
|
16
|
+
try {
|
|
17
|
+
const response = await fetch(url);
|
|
18
|
+
|
|
19
|
+
if (!response.ok) {
|
|
20
|
+
throw new Error(`Timezone API error: ${response.status}`);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
const data = await response.json();
|
|
24
|
+
|
|
25
|
+
// Business logic: Transform API response to our format
|
|
26
|
+
return {
|
|
27
|
+
name: data.timezone || zone,
|
|
28
|
+
offset: data.utc_offset || '-05:00',
|
|
29
|
+
abbreviation: data.abbreviation || 'EST',
|
|
30
|
+
datetime: data.datetime || new Date().toISOString(),
|
|
31
|
+
};
|
|
32
|
+
} catch (error) {
|
|
33
|
+
// For demo, return mock data on error
|
|
34
|
+
return {
|
|
35
|
+
name: zone,
|
|
36
|
+
offset: '-05:00',
|
|
37
|
+
abbreviation: 'EST',
|
|
38
|
+
datetime: new Date().toISOString(),
|
|
39
|
+
};
|
|
40
|
+
}
|
|
41
|
+
}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import fetch from 'node-fetch';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Get weather for a city
|
|
5
|
+
*
|
|
6
|
+
* PROBLEM: This function has HTTP logic mixed with business logic
|
|
7
|
+
* - Manual fetch calls
|
|
8
|
+
* - Manual error handling
|
|
9
|
+
* - Manual JSON parsing
|
|
10
|
+
* - No retry logic
|
|
11
|
+
* - Hard to test (can't mock HTTP)
|
|
12
|
+
*/
|
|
13
|
+
export async function getWeather(city) {
|
|
14
|
+
// Mock API endpoint (replace with real API in production)
|
|
15
|
+
const url = `https://api.weatherapi.com/v1/current.json?key=mock&q=${city}`;
|
|
16
|
+
|
|
17
|
+
try {
|
|
18
|
+
const response = await fetch(url);
|
|
19
|
+
|
|
20
|
+
if (!response.ok) {
|
|
21
|
+
throw new Error(`Weather API error: ${response.status}`);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
const data = await response.json();
|
|
25
|
+
|
|
26
|
+
// Business logic: Transform API response to our format
|
|
27
|
+
return {
|
|
28
|
+
city: data.location?.name || city,
|
|
29
|
+
temp: data.current?.temp_c || Math.floor(Math.random() * 30),
|
|
30
|
+
condition: data.current?.condition?.text || 'Sunny',
|
|
31
|
+
humidity: data.current?.humidity || Math.floor(Math.random() * 100),
|
|
32
|
+
};
|
|
33
|
+
} catch (error) {
|
|
34
|
+
// For demo, return mock data on error
|
|
35
|
+
return {
|
|
36
|
+
city,
|
|
37
|
+
temp: Math.floor(Math.random() * 30),
|
|
38
|
+
condition: 'Sunny (mock data)',
|
|
39
|
+
humidity: Math.floor(Math.random() * 100),
|
|
40
|
+
};
|
|
41
|
+
}
|
|
42
|
+
}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
# Dark Theme Demo
|
|
2
|
+
|
|
3
|
+
> **Tutorial**: [Adding Dark Theme Support](https://leanspec.dev/docs/tutorials/adding-dark-theme)
|
|
4
|
+
|
|
5
|
+
## Scenario
|
|
6
|
+
|
|
7
|
+
You're building a personal task manager web app. The app works great, but users keep requesting a dark mode option for late-night productivity sessions. Currently, the app only has a bright light theme that can strain eyes in low-light environments.
|
|
8
|
+
|
|
9
|
+
## What's Here
|
|
10
|
+
|
|
11
|
+
A minimal single-page task manager with:
|
|
12
|
+
- Task creation and listing interface
|
|
13
|
+
- Simple Express.js server serving static files
|
|
14
|
+
- Clean light theme CSS
|
|
15
|
+
- No dark mode support (yet!)
|
|
16
|
+
|
|
17
|
+
**Files:**
|
|
18
|
+
- `src/server.js` - Express server for static files
|
|
19
|
+
- `src/public/index.html` - Task manager interface
|
|
20
|
+
- `src/public/style.css` - Current light theme styles
|
|
21
|
+
- `src/public/app.js` - Task management logic
|
|
22
|
+
|
|
23
|
+
## Getting Started
|
|
24
|
+
|
|
25
|
+
```bash
|
|
26
|
+
# Install dependencies
|
|
27
|
+
npm install
|
|
28
|
+
|
|
29
|
+
# Start the server
|
|
30
|
+
npm start
|
|
31
|
+
|
|
32
|
+
# Open in your browser:
|
|
33
|
+
# http://localhost:3000
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
## Your Mission
|
|
37
|
+
|
|
38
|
+
Add dark theme support with automatic switching based on system preferences. Follow the tutorial and ask your AI assistant:
|
|
39
|
+
|
|
40
|
+
> "Help me add dark theme support to this app using LeanSpec. It should automatically switch based on the user's system theme preference."
|
|
41
|
+
|
|
42
|
+
The AI will guide you through:
|
|
43
|
+
1. Creating a spec for dark theme support
|
|
44
|
+
2. Designing the CSS for dark mode
|
|
45
|
+
3. Implementing system preference detection
|
|
46
|
+
4. Testing the theme switching
|
|
47
|
+
|
|
48
|
+
## Current Limitations
|
|
49
|
+
|
|
50
|
+
- Only light theme available
|
|
51
|
+
- No manual theme toggle
|
|
52
|
+
- Colors may not be fully accessible
|
|
53
|
+
- No theme persistence
|
|
54
|
+
|
|
55
|
+
These are perfect opportunities to practice spec-driven development!
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "dark-theme-demo",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "Simple web app for LeanSpec Dark Theme Tutorial",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"start": "node src/server.js",
|
|
8
|
+
"dev": "node --watch src/server.js"
|
|
9
|
+
},
|
|
10
|
+
"keywords": ["leanspec", "tutorial", "demo"],
|
|
11
|
+
"author": "",
|
|
12
|
+
"license": "MIT",
|
|
13
|
+
"dependencies": {
|
|
14
|
+
"express": "^4.18.2"
|
|
15
|
+
}
|
|
16
|
+
}
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
// Task Manager - Simple task tracking
|
|
2
|
+
let tasks = [];
|
|
3
|
+
let taskIdCounter = 1;
|
|
4
|
+
|
|
5
|
+
const taskInput = document.getElementById('taskInput');
|
|
6
|
+
const addButton = document.getElementById('addButton');
|
|
7
|
+
const taskList = document.getElementById('taskList');
|
|
8
|
+
const taskCount = document.getElementById('taskCount');
|
|
9
|
+
|
|
10
|
+
// Add task on button click
|
|
11
|
+
addButton.addEventListener('click', addTask);
|
|
12
|
+
|
|
13
|
+
// Add task on Enter key
|
|
14
|
+
taskInput.addEventListener('keypress', (e) => {
|
|
15
|
+
if (e.key === 'Enter') {
|
|
16
|
+
addTask();
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
|
|
20
|
+
function addTask() {
|
|
21
|
+
const text = taskInput.value.trim();
|
|
22
|
+
|
|
23
|
+
if (!text) {
|
|
24
|
+
return;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
const task = {
|
|
28
|
+
id: taskIdCounter++,
|
|
29
|
+
text: text,
|
|
30
|
+
completed: false
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
tasks.push(task);
|
|
34
|
+
taskInput.value = '';
|
|
35
|
+
|
|
36
|
+
renderTasks();
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
function toggleTask(id) {
|
|
40
|
+
const task = tasks.find(t => t.id === id);
|
|
41
|
+
if (task) {
|
|
42
|
+
task.completed = !task.completed;
|
|
43
|
+
renderTasks();
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
function deleteTask(id) {
|
|
48
|
+
tasks = tasks.filter(t => t.id !== id);
|
|
49
|
+
renderTasks();
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
function renderTasks() {
|
|
53
|
+
// Clear list
|
|
54
|
+
taskList.innerHTML = '';
|
|
55
|
+
|
|
56
|
+
// Show empty state if no tasks
|
|
57
|
+
if (tasks.length === 0) {
|
|
58
|
+
taskList.innerHTML = '<div class="empty-state">No tasks yet. Add one above to get started!</div>';
|
|
59
|
+
taskCount.textContent = '0 tasks';
|
|
60
|
+
return;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
// Render each task
|
|
64
|
+
tasks.forEach(task => {
|
|
65
|
+
const li = document.createElement('li');
|
|
66
|
+
li.className = `task-item ${task.completed ? 'completed' : ''}`;
|
|
67
|
+
|
|
68
|
+
li.innerHTML = `
|
|
69
|
+
<div class="task-content">
|
|
70
|
+
<input type="checkbox" class="task-checkbox" ${task.completed ? 'checked' : ''}
|
|
71
|
+
onchange="toggleTask(${task.id})">
|
|
72
|
+
<span class="task-text">${escapeHtml(task.text)}</span>
|
|
73
|
+
</div>
|
|
74
|
+
<button class="delete-button" onclick="deleteTask(${task.id})">Delete</button>
|
|
75
|
+
`;
|
|
76
|
+
|
|
77
|
+
taskList.appendChild(li);
|
|
78
|
+
});
|
|
79
|
+
|
|
80
|
+
// Update count
|
|
81
|
+
const remaining = tasks.filter(t => !t.completed).length;
|
|
82
|
+
taskCount.textContent = `${remaining} task${remaining !== 1 ? 's' : ''} remaining`;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
function escapeHtml(text) {
|
|
86
|
+
const div = document.createElement('div');
|
|
87
|
+
div.textContent = text;
|
|
88
|
+
return div.innerHTML;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
// Initial render
|
|
92
|
+
renderTasks();
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Task Manager</title>
|
|
7
|
+
<link rel="stylesheet" href="style.css">
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<div class="container">
|
|
11
|
+
<header>
|
|
12
|
+
<h1>My Tasks</h1>
|
|
13
|
+
<p class="subtitle">Stay organized, stay productive</p>
|
|
14
|
+
</header>
|
|
15
|
+
|
|
16
|
+
<main>
|
|
17
|
+
<div class="task-input">
|
|
18
|
+
<input type="text" id="taskInput" placeholder="What needs to be done?" />
|
|
19
|
+
<button id="addButton">Add Task</button>
|
|
20
|
+
</div>
|
|
21
|
+
|
|
22
|
+
<div class="task-list">
|
|
23
|
+
<ul id="taskList"></ul>
|
|
24
|
+
</div>
|
|
25
|
+
|
|
26
|
+
<div class="stats">
|
|
27
|
+
<span id="taskCount">0 tasks</span>
|
|
28
|
+
</div>
|
|
29
|
+
</main>
|
|
30
|
+
|
|
31
|
+
<footer>
|
|
32
|
+
<p>Built with ❤️ • Try adding dark theme support!</p>
|
|
33
|
+
</footer>
|
|
34
|
+
</div>
|
|
35
|
+
|
|
36
|
+
<script src="app.js"></script>
|
|
37
|
+
</body>
|
|
38
|
+
</html>
|