diff --git a/package-lock.json b/package-lock.json index c2d6f82..5b9eb5e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@anikitenko/fdo-sdk", - "version": "1.0.16", + "version": "1.0.17", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@anikitenko/fdo-sdk", - "version": "1.0.16", + "version": "1.0.17", "license": "ISC", "dependencies": { "@expo/sudo-prompt": "github:expo/sudo-prompt", diff --git a/package.json b/package.json index 962e957..dda1cef 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "type": "git", "url": "https://github.com/anikitenko/fdo-sdk.git" }, - "version": "1.0.16", + "version": "1.0.17", "description": "SDK for FlexDevOPs (FDO) application modules", "keywords": [ "fdo", @@ -26,7 +26,7 @@ "files": [ "dist" ], - "scripts": { + "scripts": { "build": "webpack --config webpack.config.cjs", "build:types": "tsc --emitDeclarationOnly", "test": "jest", diff --git a/specs/002-plugin-example-implementations/clarify.md b/specs/002-plugin-example-implementations/clarify.md new file mode 100644 index 0000000..42de751 --- /dev/null +++ b/specs/002-plugin-example-implementations/clarify.md @@ -0,0 +1,207 @@ +# Clarification Questions: Add Plugin Example Implementations + +**Feature**: Add Plugin Example Implementations +**Branch**: `002-plugin-example-implementations` +**Date**: 2025-10-27 +**Status**: Clarification Phase + +## Purpose + +This document identifies underspecified areas in the feature specification that need clarification before proceeding to implementation planning. Each question is categorized by priority and impact on implementation. + +--- + +## Critical Clarifications (Must Resolve Before Planning) + +### C1: Example File Naming and Organization + +**Question**: How should the example files be named and organized within the examples/ directory? + +**Current State**: The specification mentions "at least 4 complete, working plugin examples" but doesn't specify naming conventions or directory structure. + +**Options**: +1. Flat structure with descriptive names (e.g., `basic-plugin.ts`, `interactive-plugin.ts`, `persistence-plugin.ts`, `advanced-plugin.ts`) +2. Numbered structure matching priority (e.g., `01-basic-plugin.ts`, `02-interactive-plugin.ts`, etc.) +3. Categorized subdirectories (e.g., `examples/basic/`, `examples/intermediate/`, `examples/advanced/`) +4. Use case-based names (e.g., `todo-list-plugin.ts`, `note-taking-plugin.ts`, `settings-panel-plugin.ts`) + +**Recommendation**: Use numbered structure with descriptive names (Option 2) for clear progression, combined with use case-based naming (Option 4) for relatability. Example: `01-basic-hello-world.ts`, `02-interactive-todo-list.ts`, `03-persistent-notes.ts`, `04-advanced-settings-panel.ts` + +**Impact**: High - affects file structure and documentation references + +--- + +### C2: Example Plugin Realistic Use Cases + +**Question**: What specific realistic use cases should each example demonstrate? + +**Current State**: FR-014 mentions "realistic use cases that developers can relate to (e.g., todo list, note-taking, settings panel)" but doesn't assign specific use cases to each example. + +**Proposed Mapping**: +- **Basic Example (P1)**: "Hello World" plugin - displays a simple greeting with plugin metadata +- **Interactive Example (P2)**: Todo List plugin - demonstrates buttons, inputs, and state management +- **Persistence Example (P3)**: Note-Taking plugin - demonstrates saving and loading notes across sessions +- **Advanced Example (P4)**: Settings Panel plugin - demonstrates quick actions, side panel, and complex UI + +**Rationale**: These use cases are universally understood, progressively complex, and demonstrate real-world plugin patterns. + +**Impact**: High - defines the scope and complexity of each example + +--- + +### C3: Documentation Location and Format + +**Question**: Where should example documentation be placed, and in what format? + +**Current State**: FR-005 mentions "README or header comment" but doesn't specify which approach to use or if both should be used. + +**Options**: +1. Header comments only (inline documentation) +2. Separate README.md in examples/ directory +3. Both header comments and README.md +4. Individual README.md for each example in subdirectories + +**Recommendation**: Use both (Option 3): +- Comprehensive header comments in each example file (for developers reading the code) +- Single `examples/README.md` that provides overview, lists all examples, and explains progression +- Update main SDK README.md to reference the examples + +**Impact**: Medium - affects documentation structure and developer experience + +--- + +## Important Clarifications (Should Resolve Before Implementation) + +### C4: Example Code Style and Patterns + +**Question**: Should examples follow a specific code style or pattern that differs from production code for educational purposes? + +**Current State**: FR-006 states examples must follow "same code quality standards as the SDK itself" but doesn't clarify if examples should be more verbose/explicit for educational purposes. + +**Considerations**: +- Should examples use more explicit typing even when inference would work? +- Should examples include more error handling than strictly necessary to demonstrate best practices? +- Should examples use longer, more descriptive variable names for clarity? +- Should examples avoid advanced TypeScript features to remain accessible? + +**Recommendation**: Examples should be slightly more verbose and explicit than production code: +- Use explicit type annotations even when inference works +- Include comprehensive error handling with explanatory log messages +- Use descriptive variable names (e.g., `todoItemText` instead of `text`) +- Add comments explaining "why" not just "what" +- Avoid advanced TypeScript features unless demonstrating them is the example's purpose + +**Impact**: Medium - affects code readability and educational value + +--- + +### C5: Testing Strategy for Examples + +**Question**: How should examples be tested to ensure they remain functional as the SDK evolves? + +**Current State**: SC-002 states "Each example runs successfully in the FDO application without errors" but doesn't specify how this will be verified. + +**Options**: +1. Manual testing only (run each example and verify behavior) +2. Automated unit tests for example plugins +3. Integration tests that load examples in a test FDO environment +4. CI/CD pipeline that builds and validates examples +5. Combination of manual and automated testing + +**Recommendation**: Use combination approach (Option 5): +- Add automated build validation in CI/CD to ensure examples compile without errors +- Include examples in the existing test suite to verify they can be instantiated +- Document manual testing steps in examples/README.md +- Consider adding integration tests in future if FDO test environment becomes available + +**Impact**: Medium - affects long-term maintainability and quality assurance + +--- + +### C6: Example Plugin Metadata Standards + +**Question**: What metadata standards should examples follow to avoid conflicts and confusion? + +**Current State**: FR-012 requires "unique, descriptive metadata" but doesn't specify conventions. + +**Considerations**: +- Should all examples use a common author (e.g., "FDO SDK Team")? +- Should example names include "Example" suffix (e.g., "Todo List Example Plugin")? +- Should versions all start at 1.0.0 or follow SDK version? +- Should descriptions follow a template format? + +**Recommendation**: +- Author: "FDO SDK Team" (consistent across all examples) +- Name: Include "Example" suffix (e.g., "Todo List Example") +- Version: Start at 1.0.0 (independent of SDK version) +- Description: Follow template: "Example plugin demonstrating [features]. Shows how to [key learning points]." +- Icon: Use consistent placeholder icons or simple emoji-based icons + +**Impact**: Low - affects metadata consistency but not functionality + +--- + +## Nice-to-Have Clarifications (Can Resolve During Implementation) + +### C7: Example Complexity and Length + +**Question**: What is the target length/complexity for each example to balance completeness with readability? + +**Current State**: No specific guidance on example size. + +**Recommendation**: +- Basic example: 50-100 lines of code (excluding comments) +- Interactive example: 100-200 lines of code +- Persistence example: 150-250 lines of code +- Advanced example: 200-300 lines of code +- Aim for 30-40% comment-to-code ratio (per SC-004) + +**Impact**: Low - provides guidance but can be adjusted during implementation + +--- + +### C8: Example Styling and Visual Design + +**Question**: Should examples include styled UI or use minimal/default styling? + +**Current State**: FR-015 requires "proper CSS-in-JS usage" but doesn't specify styling expectations. + +**Options**: +1. Minimal styling (focus on functionality) +2. Basic styling (clean but simple) +3. Polished styling (production-ready appearance) + +**Recommendation**: Use basic styling (Option 2): +- Examples should look clean and professional but not overly designed +- Focus on demonstrating CSS-in-JS patterns rather than visual design +- Use simple color schemes and layouts +- Include comments explaining styling choices + +**Impact**: Low - affects visual appearance but not core functionality + +--- + +## Decisions Made + +Based on the clarifications above, the following decisions are recommended for the planning phase: + +1. **File Structure**: Use numbered, use-case-based naming in flat examples/ directory +2. **Use Cases**: Hello World (basic), Todo List (interactive), Note-Taking (persistence), Settings Panel (advanced) +3. **Documentation**: Both inline comments and examples/README.md, plus main README update +4. **Code Style**: Slightly more verbose and explicit than production code for educational purposes +5. **Testing**: Automated build validation + manual testing documentation +6. **Metadata**: Consistent standards with "FDO SDK Team" author and "Example" suffix in names +7. **Complexity**: Target 50-300 lines per example with 30-40% comment ratio +8. **Styling**: Basic, clean styling that demonstrates CSS-in-JS without over-designing + +--- + +## Open Questions for User/Stakeholder + +None at this time. All critical and important clarifications have been addressed with recommendations. If any decisions need to be changed, they can be adjusted during the planning phase. + +--- + +## Next Steps + +With these clarifications in place, we can proceed to the **speckit.plan** phase to create a detailed technical implementation plan. diff --git a/specs/002-plugin-example-implementations/plan.md b/specs/002-plugin-example-implementations/plan.md new file mode 100644 index 0000000..b803cd2 --- /dev/null +++ b/specs/002-plugin-example-implementations/plan.md @@ -0,0 +1,587 @@ +# Implementation Plan: Add Plugin Example Implementations + +**Branch**: `002-plugin-example-implementations` | **Date**: 2025-10-27 | **Spec**: [spec.md](./spec.md) +**Input**: Feature specification from `/specs/002-plugin-example-implementations/spec.md` + +## Summary + +This feature adds comprehensive, production-quality plugin examples to the FDO SDK to reduce the learning curve for plugin developers. The implementation will create four progressively complex example plugins (Hello World, Todo List, Note-Taking, Settings Panel) that demonstrate all core SDK features including FDO_SDK base class, DOM generation, IPC communication, data persistence, and UI extensions. Each example will include extensive inline documentation and follow the same quality standards as the SDK core. + +## Technical Context + +**Language/Version**: TypeScript 5.7.3 (matching SDK) +**Primary Dependencies**: +- `@anikitenko/fdo-sdk` (local) - Core SDK functionality +- `electron` ^35.0.0 - Desktop application framework +- `goober` ^2.1.16 - CSS-in-JS for styling +- `winston` ^3.17.0 - Logging + +**Storage**: +- In-memory storage (StoreDefault) for basic examples +- JSON file-based storage (StoreJson) for persistence examples + +**Testing**: +- Jest ^29.7.0 for unit tests +- TypeScript compiler for type checking +- Manual testing in FDO application environment + +**Target Platform**: Electron desktop application (cross-platform: Windows, macOS, Linux) + +**Project Type**: Single project (SDK library with examples) + +**Performance Goals**: +- Examples must load and initialize in <100ms +- Render operations must complete in <50ms +- Storage operations must complete in <200ms + +**Constraints**: +- Examples must compile without TypeScript errors +- Examples must pass same linting standards as SDK core +- Examples must be self-contained (no external dependencies beyond SDK) +- Examples must work in Electron worker thread environment +- Comment-to-code ratio must be at least 30% + +**Scale/Scope**: +- 4 example plugins +- 50-300 lines of code per example +- Comprehensive inline documentation +- Single README.md for examples directory +- Updates to main SDK README.md + +## Constitution Check + +*GATE: Must pass before Phase 0 research. Re-check after Phase 1 design.* + +Based on the project's constitution (`.specify/memory/constitution.md`), the following principles apply: + +1. **Code Quality**: Examples must follow the same TypeScript, linting, and testing standards as the SDK core +2. **Documentation**: Examples must be well-documented with clear explanations of SDK features +3. **User Experience**: Examples must provide a clear learning path from basic to advanced +4. **Maintainability**: Examples must be maintainable and updated alongside SDK changes + +**Constitution Compliance**: ✅ All requirements align with project principles + +## Project Structure + +### Documentation (this feature) + +```text +specs/002-plugin-example-implementations/ +├── spec.md # Feature specification (completed) +├── clarify.md # Clarification questions (completed) +├── plan.md # This file (implementation plan) +├── research.md # Phase 0: Research existing patterns +├── data-model.md # Phase 1: Example plugin data structures +├── quickstart.md # Phase 1: Quick start guide for examples +├── contracts/ # Phase 1: API contracts for examples +└── tasks.md # Phase 2: Implementation tasks (created by /speckit.tasks) +``` + +### Source Code (repository root) + +```text +examples/ +├── README.md # Overview and learning path +├── 01-basic-hello-world.ts # P1: Basic plugin example +├── 02-interactive-todo-list.ts # P2: Interactive UI example +├── 03-persistent-notes.ts # P3: Data persistence example +└── 04-advanced-settings-panel.ts # P4: Advanced features example + +src/ +├── index.ts # SDK exports (existing) +├── PluginRegistry.ts # Plugin management (existing) +├── Communicator.ts # IPC communication (existing) +├── DOM*.ts # DOM generation classes (existing) +└── types.ts # Type definitions (existing) + +tests/ +├── examples/ # New: Example validation tests +│ ├── basic-hello-world.test.ts +│ ├── interactive-todo-list.test.ts +│ ├── persistent-notes.test.ts +│ └── advanced-settings-panel.test.ts +└── [existing test files] + +README.md # Updated: Add examples section +package.json # Updated: Add example validation script +``` + +**Structure Decision**: Using flat structure in `examples/` directory with numbered, descriptive filenames. This provides clear progression while keeping examples easily discoverable. Tests for examples are placed in `tests/examples/` to maintain separation from SDK core tests. + +## Complexity Tracking + +> **Fill ONLY if Constitution Check has violations that must be justified** + +No constitution violations. All implementation decisions align with project principles. + +--- + +## Phase 0: Research + +### Research Goals + +1. **Analyze Existing Example**: Review `examples/example_plugin.ts` to understand current example structure and identify gaps +2. **Survey SDK Features**: Catalog all SDK features that should be demonstrated in examples +3. **Review DOM Classes**: Document all available DOM generation classes and their usage patterns +4. **Study Storage System**: Understand StoreDefault and StoreJson implementation details +5. **Examine Mixins**: Review QuickActionMixin and SidePanelMixin usage patterns +6. **Analyze IPC Patterns**: Document message handler registration and communication patterns + +### Research Deliverables + +Document findings in `research.md` covering: +- Current example analysis (strengths, weaknesses, gaps) +- Complete SDK feature inventory +- DOM class usage patterns and best practices +- Storage system implementation details +- Mixin usage patterns +- IPC communication patterns +- Recommendations for example structure and content + +--- + +## Phase 1: Design + +### Design Goals + +1. **Define Example Data Models**: Specify data structures for each example (Todo items, Notes, Settings) +2. **Design Example APIs**: Define the public interface for each example plugin +3. **Create Example Contracts**: Specify expected inputs, outputs, and behaviors +4. **Design UI Layouts**: Plan the UI structure for each example using DOM classes +5. **Define Message Handlers**: Specify custom message handlers for interactive examples +6. **Plan Storage Schema**: Define storage keys and data formats for persistence examples + +### Design Deliverables + +1. **data-model.md**: Complete data structure definitions for all examples +2. **contracts/**: API contracts for each example plugin + - `01-basic-hello-world-contract.md` + - `02-interactive-todo-list-contract.md` + - `03-persistent-notes-contract.md` + - `04-advanced-settings-panel-contract.md` +3. **quickstart.md**: Quick start guide for using the examples + +--- + +## Phase 2: Implementation Planning + +### Implementation Approach + +**Incremental Development**: Implement examples in priority order (P1 → P4) to ensure each example builds on previous concepts. + +**Quality Gates**: Each example must pass: +1. TypeScript compilation without errors +2. Linting checks (matching SDK standards) +3. Unit tests (instantiation, basic functionality) +4. Manual testing in FDO application +5. Documentation review (30%+ comment ratio) + +### Example 1: Basic Hello World (P1) + +**Purpose**: Demonstrate minimal viable plugin with core SDK features + +**Features Demonstrated**: +- Extending FDO_SDK base class +- Implementing FDOInterface +- Defining plugin metadata +- Implementing init() method +- Implementing render() method +- Using Logger for logging +- Basic DOM generation with DOMText + +**Implementation Steps**: +1. Create plugin class structure +2. Define metadata (name, version, author, description, icon) +3. Implement init() with logging +4. Implement render() with simple HTML output +5. Add comprehensive inline comments +6. Create unit test +7. Test in FDO application + +**Success Criteria**: +- Plugin loads and initializes without errors +- Displays greeting message with plugin metadata +- Logs initialization message +- Code has 30%+ comment ratio +- Passes all quality gates + +--- + +### Example 2: Interactive Todo List (P2) + +**Purpose**: Demonstrate interactive UI with DOM classes and message handlers + +**Features Demonstrated**: +- Using DOMNested for container elements +- Using DOMInput for text input +- Using DOMButton for interactive buttons +- Using DOMText for displaying content +- Registering custom message handlers +- Handling user interactions via IPC +- Managing component state +- CSS-in-JS styling with goober + +**Implementation Steps**: +1. Create plugin class structure +2. Define metadata +3. Implement init() with handler registration +4. Create message handlers for add/remove/toggle todo +5. Implement render() with form and todo list UI +6. Add CSS styling for clean appearance +7. Add comprehensive inline comments +8. Create unit tests +9. Test interactions in FDO application + +**Success Criteria**: +- Users can add, remove, and toggle todos +- UI updates correctly on interactions +- Handlers process messages correctly +- Styling is clean and functional +- Code has 30%+ comment ratio +- Passes all quality gates + +--- + +### Example 3: Persistent Notes (P3) + +**Purpose**: Demonstrate data persistence with storage system + +**Features Demonstrated**: +- Using PluginRegistry.useStore() +- Working with StoreDefault (in-memory) +- Registering and using StoreJson (file-based) +- Saving data on user actions +- Loading data on initialization +- Handling storage errors gracefully +- Using DOMTextarea for multi-line input +- Combining persistence with interactive UI + +**Implementation Steps**: +1. Create plugin class structure +2. Define metadata +3. Register StoreJson in init() +4. Implement data loading from storage +5. Implement message handlers for save/load/delete +6. Implement render() with note editor UI +7. Add error handling for storage operations +8. Add comprehensive inline comments +9. Create unit tests including storage mocks +10. Test persistence across application restarts + +**Success Criteria**: +- Notes persist across application restarts +- Storage operations complete successfully +- Errors are handled gracefully with user feedback +- UI shows loading states appropriately +- Code has 30%+ comment ratio +- Passes all quality gates + +--- + +### Example 4: Advanced Settings Panel (P4) + +**Purpose**: Demonstrate advanced features including mixins and complex UI + +**Features Demonstrated**: +- Using QuickActionMixin +- Using SidePanelMixin +- Defining quick actions +- Defining side panel configuration +- Complex UI with multiple sections +- Combining all previous concepts +- Advanced CSS styling +- Form validation + +**Implementation Steps**: +1. Create plugin class with mixins +2. Define metadata +3. Implement defineQuickActions() +4. Implement defineSidePanel() +5. Implement init() with all handlers +6. Create message handlers for settings operations +7. Implement render() with tabbed settings UI +8. Add form validation logic +9. Add advanced CSS styling +10. Add comprehensive inline comments +11. Create unit tests +12. Test quick actions and side panel in FDO application + +**Success Criteria**: +- Quick actions appear in FDO application +- Side panel is properly configured +- Settings UI is functional and well-styled +- All SDK features are demonstrated +- Code has 30%+ comment ratio +- Passes all quality gates + +--- + +## Phase 3: Documentation + +### Documentation Components + +1. **examples/README.md**: + - Overview of all examples + - Learning path (which order to study) + - How to run examples + - What each example demonstrates + - Links to relevant SDK documentation + +2. **Inline Comments** (in each example): + - File header with purpose and features + - Section comments explaining major blocks + - Line comments for complex operations + - "Why" explanations, not just "what" + - References to SDK documentation + +3. **Main README.md Update**: + - Add "Examples" section + - Link to examples/README.md + - Brief description of available examples + - Encourage developers to start with examples + +4. **API Documentation Updates** (if applicable): + - Ensure all demonstrated features are documented + - Add example code snippets to API docs + - Cross-reference examples from feature docs + +### Documentation Quality Gates + +- All examples have header comments explaining purpose +- Inline comments achieve 30%+ ratio +- examples/README.md provides clear learning path +- Main README.md references examples +- No broken links in documentation +- Documentation is technically accurate + +--- + +## Phase 4: Testing & Validation + +### Testing Strategy + +**Unit Tests** (`tests/examples/`): +- Test plugin instantiation +- Test metadata correctness +- Test init() execution +- Test render() output structure +- Test message handler registration +- Mock storage operations for persistence tests + +**Integration Tests**: +- Validate examples compile without errors +- Validate examples pass linting +- Validate comment-to-code ratio +- Validate no external dependencies + +**Manual Testing**: +- Load each example in FDO application +- Test all interactive features +- Verify persistence across restarts +- Verify quick actions and side panel +- Check visual appearance and styling +- Verify error handling + +### Validation Checklist + +For each example: +- [ ] Compiles without TypeScript errors +- [ ] Passes linting checks +- [ ] Unit tests pass +- [ ] Loads in FDO application +- [ ] All features work as expected +- [ ] Comments achieve 30%+ ratio +- [ ] Documentation is complete +- [ ] Follows SDK code standards +- [ ] No external dependencies +- [ ] Error handling is robust + +--- + +## Phase 5: Integration & Deployment + +### Integration Steps + +1. **Update Build Configuration**: + - Ensure examples are included in build process + - Add example validation to CI/CD pipeline + - Update package.json scripts if needed + +2. **Update Documentation**: + - Merge all documentation updates + - Ensure cross-references are correct + - Update CHANGELOG.md + +3. **Code Review**: + - Review all example code + - Review all documentation + - Verify quality gates passed + - Check for consistency across examples + +4. **Final Testing**: + - Run full test suite + - Manual test all examples + - Verify examples work with latest SDK build + - Test on multiple platforms if possible + +### Deployment Checklist + +- [ ] All examples implemented and tested +- [ ] All documentation complete +- [ ] Unit tests pass +- [ ] Integration tests pass +- [ ] Manual testing complete +- [ ] Code review approved +- [ ] CI/CD pipeline passes +- [ ] CHANGELOG.md updated +- [ ] README.md updated +- [ ] examples/README.md complete +- [ ] No breaking changes to SDK +- [ ] Version bump if needed + +--- + +## Risk Assessment + +### Technical Risks + +| Risk | Impact | Mitigation | +|------|--------|------------| +| Examples become outdated as SDK evolves | High | Include examples in CI/CD pipeline; add automated validation | +| Examples don't work in actual FDO application | High | Manual testing in FDO environment; integration tests if possible | +| Examples are too complex for beginners | Medium | Start with very simple P1 example; progressive complexity | +| Examples don't demonstrate all SDK features | Medium | Create comprehensive feature inventory; review against spec | +| Storage examples fail due to file system permissions | Medium | Add error handling; document requirements; test on multiple platforms | + +### Process Risks + +| Risk | Impact | Mitigation | +|------|--------|------------| +| Scope creep (too many examples) | Low | Stick to 4 examples as specified; resist adding more | +| Insufficient documentation | Medium | Enforce 30% comment ratio; review documentation thoroughly | +| Examples don't follow SDK standards | Medium | Use same linting/testing as SDK; code review | +| Manual testing is incomplete | Medium | Create detailed testing checklist; test all scenarios | + +--- + +## Success Metrics + +### Quantitative Metrics + +- **SC-001**: Time-to-first-plugin < 15 minutes (measured by user testing) +- **SC-002**: 100% of examples run without errors +- **SC-003**: 100% of core SDK features demonstrated +- **SC-004**: Comment-to-code ratio ≥ 30% for all examples +- **SC-007**: 100% of examples pass linting and type checking + +### Qualitative Metrics + +- **SC-005**: Clear progression from basic to advanced (validated by code review) +- **SC-006**: Reduced support questions (measured post-release) + +### Validation Methods + +- Automated: CI/CD pipeline validates compilation, linting, tests +- Manual: Code review validates documentation quality and progression +- User testing: New developers attempt to create plugins using examples +- Post-release: Monitor support channels for example-related questions + +--- + +## Timeline Estimate + +**Phase 0 (Research)**: 2-4 hours +- Review existing code and documentation +- Catalog SDK features +- Document patterns + +**Phase 1 (Design)**: 4-6 hours +- Define data models +- Create contracts +- Design UI layouts +- Write quickstart guide + +**Phase 2 (Implementation)**: 12-16 hours +- Example 1 (Basic): 2-3 hours +- Example 2 (Interactive): 3-4 hours +- Example 3 (Persistence): 3-4 hours +- Example 4 (Advanced): 4-5 hours + +**Phase 3 (Documentation)**: 3-4 hours +- examples/README.md +- Inline comments review +- Main README.md update + +**Phase 4 (Testing)**: 4-6 hours +- Unit tests +- Integration tests +- Manual testing +- Bug fixes + +**Phase 5 (Integration)**: 2-3 hours +- Final review +- CI/CD updates +- Documentation finalization + +**Total Estimated Time**: 27-39 hours + +--- + +## Dependencies + +### Internal Dependencies + +- FDO SDK core functionality (existing) +- DOM generation classes (existing) +- Storage system (existing) +- Plugin registry (existing) +- IPC communication system (existing) + +### External Dependencies + +- FDO desktop application (for manual testing) +- TypeScript compiler +- Jest testing framework +- Linting tools + +### Blocking Issues + +None identified. All required SDK features are already implemented. + +--- + +## Next Steps + +1. **Complete Phase 0 Research**: Create `research.md` with detailed analysis +2. **Complete Phase 1 Design**: Create data models, contracts, and quickstart guide +3. **Generate Tasks**: Run `/speckit.tasks` to create actionable task list +4. **Begin Implementation**: Start with Example 1 (Basic Hello World) + +--- + +## Appendix + +### Reference Documents + +- Feature Specification: `specs/002-plugin-example-implementations/spec.md` +- Clarification Document: `specs/002-plugin-example-implementations/clarify.md` +- SDK Source Code: `src/` +- Existing Example: `examples/example_plugin.ts` +- SDK Documentation: `README.md` + +### Key Decisions + +1. **File Naming**: Numbered with descriptive names (e.g., `01-basic-hello-world.ts`) +2. **Use Cases**: Hello World, Todo List, Note-Taking, Settings Panel +3. **Documentation**: Both inline comments and README files +4. **Code Style**: Slightly more verbose than production for educational purposes +5. **Testing**: Automated build validation + manual testing +6. **Metadata**: Consistent standards with "FDO SDK Team" author + +### Assumptions + +- FDO desktop application is available for manual testing +- SDK features are stable and documented +- Examples will be maintained alongside SDK updates +- Developers have basic TypeScript knowledge +- Examples will be used primarily for learning, not production diff --git a/specs/002-plugin-example-implementations/spec.md b/specs/002-plugin-example-implementations/spec.md new file mode 100644 index 0000000..92ee95a --- /dev/null +++ b/specs/002-plugin-example-implementations/spec.md @@ -0,0 +1,132 @@ +# Feature Specification: Add Plugin Example Implementations + +**Feature Branch**: `002-plugin-example-implementations` +**Created**: 2025-10-27 +**Status**: Draft +**Input**: User description: "Add plugin example implementations" + +## User Scenarios & Testing *(mandatory)* + + + +### User Story 1 - Basic Plugin Template Example (Priority: P1) + +As a plugin developer new to the FDO SDK, I want to see a complete, working example of a basic plugin that demonstrates the core SDK features (init, render, logging) so that I can quickly understand how to create my first plugin. + +**Why this priority**: This is the foundation for all plugin development. Without a clear basic example, developers cannot get started with the SDK. This provides immediate value by reducing the learning curve and time-to-first-plugin. + +**Independent Test**: Can be fully tested by creating a new plugin based on the example, running it in the FDO application, and verifying that it initializes and renders correctly. Delivers immediate value by enabling developers to create their first working plugin. + +**Acceptance Scenarios**: + +1. **Given** a developer has installed the FDO SDK, **When** they examine the basic plugin example, **Then** they can see clear implementation of FDO_SDK extension, metadata definition, init() method, and render() method +2. **Given** a developer copies the basic plugin example, **When** they load it in the FDO application, **Then** the plugin initializes successfully and displays rendered content +3. **Given** a developer is reading the basic example, **When** they look at the code comments, **Then** they understand what each section does and why it's necessary + +--- + +### User Story 2 - Interactive Plugin with UI Components (Priority: P2) + +As a plugin developer building interactive features, I want to see an example plugin that uses DOM generation classes (DOMButton, DOMInput, DOMText, etc.) and handles user interactions through message handlers so that I can build rich user interfaces in my plugins. + +**Why this priority**: After understanding the basics, developers need to build interactive plugins. This example demonstrates the SDK's UI capabilities and IPC communication patterns, which are essential for most real-world plugins. + +**Independent Test**: Can be tested by running the example plugin, interacting with its UI elements (clicking buttons, entering text), and verifying that the plugin responds correctly to user actions. Delivers value by enabling developers to create interactive plugins. + +**Acceptance Scenarios**: + +1. **Given** a developer examines the interactive plugin example, **When** they review the code, **Then** they see how to use DOMButton, DOMInput, DOMText, and DOMNested classes to create UI elements +2. **Given** a developer runs the interactive plugin, **When** they click a button or interact with an input field, **Then** the plugin handles the interaction through registered message handlers +3. **Given** a developer wants to add custom interactions, **When** they follow the example pattern, **Then** they can register their own handlers using PluginRegistry.registerHandler() + +--- + +### User Story 3 - Data Persistence Plugin Example (Priority: P3) + +As a plugin developer building stateful applications, I want to see an example plugin that demonstrates data persistence using the storage system (StoreDefault, StoreJson) so that I can save and retrieve plugin data across sessions. + +**Why this priority**: Many plugins need to persist data, but this is not critical for initial plugin development. Developers can build functional plugins without persistence, making this a lower priority than basic and interactive examples. + +**Independent Test**: Can be tested by running the example plugin, saving data, restarting the FDO application, and verifying that the data persists. Delivers value by enabling developers to build stateful plugins. + +**Acceptance Scenarios**: + +1. **Given** a developer examines the persistence plugin example, **When** they review the storage code, **Then** they see how to use PluginRegistry.useStore() to access storage backends +2. **Given** a developer runs the persistence plugin, **When** they save data and restart the application, **Then** the data is successfully retrieved from storage +3. **Given** a developer wants to use JSON file storage, **When** they follow the example, **Then** they can register and use StoreJson for persistent storage + +--- + +### User Story 4 - Advanced Plugin with Quick Actions and Side Panel (Priority: P4) + +As a plugin developer building comprehensive integrations, I want to see an example plugin that demonstrates advanced features like QuickActions and SidePanel configurations so that I can extend the FDO application's UI with custom shortcuts and panels. + +**Why this priority**: These are advanced features that enhance plugin integration but are not essential for basic plugin functionality. Developers should master the fundamentals before implementing these features. + +**Independent Test**: Can be tested by loading the example plugin and verifying that quick actions appear in the FDO application's quick action menu and that the side panel is properly configured. Delivers value by enabling developers to create deeply integrated plugins. + +**Acceptance Scenarios**: + +1. **Given** a developer examines the advanced plugin example, **When** they review the mixin usage, **Then** they see how to use QuickActionMixin and SidePanelMixin +2. **Given** a developer runs the advanced plugin, **When** they access the FDO application's quick actions, **Then** they see the plugin's custom quick actions +3. **Given** a developer wants to add a side panel, **When** they follow the example pattern, **Then** they can define a side panel configuration with custom menu items + +--- + +### Edge Cases + +- What happens when a plugin example is copied but the developer forgets to change the plugin name/metadata? (Should have clear comments warning about this) +- How does the system handle when a developer tries to use a storage backend that hasn't been registered? +- What happens when a plugin example uses DOM classes but doesn't properly handle CSS generation? +- How should examples handle errors gracefully to demonstrate best practices? +- What happens when a developer tries to register duplicate message handlers? + +## Requirements *(mandatory)* + +### Functional Requirements + +- **FR-001**: SDK MUST provide at least 4 complete, working plugin examples in the examples/ directory +- **FR-002**: Each example MUST be a standalone, runnable plugin that can be loaded in the FDO application +- **FR-003**: Examples MUST include comprehensive inline comments explaining each section of code +- **FR-004**: Examples MUST demonstrate progressively complex features (basic → interactive → persistence → advanced) +- **FR-005**: Each example MUST include a README or header comment explaining what it demonstrates and when to use it +- **FR-006**: Examples MUST follow the same code quality standards as the SDK itself (TypeScript, proper typing, error handling) +- **FR-007**: Examples MUST demonstrate proper use of the FDO_SDK base class and FDOInterface +- **FR-008**: Interactive examples MUST demonstrate proper message handler registration and IPC communication +- **FR-009**: Persistence examples MUST demonstrate both in-memory (StoreDefault) and file-based (StoreJson) storage +- **FR-010**: Advanced examples MUST demonstrate QuickActionMixin and SidePanelMixin usage +- **FR-011**: Examples MUST include proper error handling and logging to demonstrate best practices +- **FR-012**: Each example MUST have unique, descriptive metadata (name, version, author, description) +- **FR-013**: Examples MUST be referenced in the main SDK documentation/README +- **FR-014**: Examples MUST use realistic use cases that developers can relate to (e.g., todo list, note-taking, settings panel) +- **FR-015**: Examples MUST demonstrate proper CSS-in-JS usage with the DOM generation classes + +### Key Entities *(include if feature involves data)* + +- **Plugin Example**: A complete, standalone TypeScript file that extends FDO_SDK and demonstrates specific SDK features +- **Example Category**: Grouping of examples by complexity level (basic, intermediate, advanced) +- **Example Documentation**: Inline comments and README content explaining what each example demonstrates +- **Example Metadata**: Plugin metadata (name, version, author, description) that identifies each example + +## Success Criteria *(mandatory)* + +### Measurable Outcomes + +- **SC-001**: Developers can create their first working plugin within 15 minutes by following the basic example +- **SC-002**: Each example runs successfully in the FDO application without errors +- **SC-003**: Examples cover 100% of the core SDK features (FDO_SDK, DOM classes, storage, mixins, IPC) +- **SC-004**: Example code has at least 30% comment-to-code ratio to ensure adequate explanation +- **SC-005**: Developers can understand the progression from basic to advanced features by reading examples in order +- **SC-006**: Examples reduce "how do I..." questions in SDK support channels by 50% +- **SC-007**: All examples pass the same linting and type-checking standards as the SDK core