kempo-ui 0.4.8 → 0.4.10

package/tasks/released/0001-identify-timestamp-formats.md

@@ -0,0 +1,114 @@
+# 0001 - Identify and Document Timestamp Component Date Formats
+
+## Status: Released
+
+## Dependency
+None
+
+## References
+- Timestamp component: [`src/components/timestamp.ts`](../../src/components/timestamp.ts)
+- Format utility: [`src/utils/formatTimestamp.js`](../../src/utils/formatTimestamp.js)
+- Component documentation source: [`docs-src/components/timestamp.page.html`](../../docs-src/components/timestamp.page.html)
+
+## Current State
+The Timestamp component was recently updated to accept ISO 8601 time formats in addition to EPOCH timestamps. The component uses the `formatTimestamp.js` utility (in `src/utils/formatTimestamp.js`) which uses `new Date(val)` to parse input values, meaning it likely supports many additional JavaScript date formats. However, the documentation was not updated to reflect these new capabilities.
+
+## Acceptance Criteria
+- Identify all date/time formats supported by JavaScript's `new Date()` constructor that work with the Timestamp component
+- Document each supported format with a clear example
+- Update the component documentation (in `docs-src/components/timestamp.page.html`) with the new format information
+- Verify all examples in the documentation work correctly when the page is rendered locally
+
+### In-Scope
+- [`src/utils/formatTimestamp.js`](../../src/utils/formatTimestamp.js) (review to understand implementation)
+- [`docs-src/components/timestamp.page.html`](../../docs-src/components/timestamp.page.html) (update with new format documentation)
+- [`llms.txt`](../../llms.txt) (update if supported formats affect component description)
+
+### Out-of-Scope
+- Changes to the `formatTimestamp.js` implementation itself (this is documentation-only)
+- Changes to other components or utilities
+
+## Task Details
+
+1. **Review the implementation**: Check [`src/utils/formatTimestamp.js`](../../src/utils/formatTimestamp.js) to understand exactly how the utility parses dates via `new Date(val)`
+
+2. **Research supported formats**: Test the Timestamp component with various date/time formats to identify which ones work:
+   - EPOCH milliseconds (current)
+   - ISO 8601 (e.g., `2024-05-01T14:30:00Z`)
+   - Various date string formats
+   - Other JavaScript `new Date()` compatible formats
+
+3. **Update documentation**: Add a "Supported Formats" section to the Timestamp component documentation with:
+   - A table or list of supported formats
+   - Clear examples for each format
+   - Any notes about format requirements or edge cases
+
+4. **Test and verify**: Ensure all examples in the updated documentation render correctly and produce the expected output
+
+## Testing / Validation Plan
+
+1. **Code review**: Examine [`src/utils/formatTimestamp.js`](../../src/utils/formatTimestamp.js) to understand the date parsing logic
+2. **Component testing**: Test the Timestamp component locally at [http://localhost:8083/components/timestamp.html](http://localhost:8083/components/timestamp.html) with each identified format
+3. **Verification checks**:
+   - All date formats render without console errors
+   - Each documented format produces correct timestamp output
+   - Examples display correctly in the browser
+   - Documentation is clear and consistent with other component docs
+4. **Final review**: Verify that acceptance criteria are fully met
+
+### Testing / Validation Results
+
+#### LLM Validation Results
+
+**Acceptance Criterion 1: Identify all date/time formats supported by JavaScript's `new Date()` constructor**
+- ✅ PASS: Identified 10 supported input formats through systematic testing
+- Formats confirmed: EPOCH milliseconds, ISO 8601 (full, date-only, with timezone, without timezone), RFC 2822, JavaScript date string, US date format, named month format, ISO string, and JavaScript constructor
+
+**Acceptance Criterion 2: Document each supported format with a clear example**
+- ✅ PASS: Added comprehensive "Supported Input Formats" table in documentation with 10 format types
+- Each format includes: format name, example input, description, and use case
+- Table is properly formatted and easy to scan
+
+![Supported Formats Section](0001-identify-timestamp-formats/supported-formats-section.png)
+
+**Acceptance Criterion 3: Update the component documentation with the new format information**
+- ✅ PASS: Updated [`docs-src/components/timestamp.page.html`](../../docs-src/components/timestamp.page.html)
+- Added "Supported Input Formats" section with table and examples
+- Added "Important Notes" section covering browser compatibility and timezone handling
+- Updated [`llms.txt`](../../llms.txt) component reference with full format information
+
+![Documentation Page](0001-identify-timestamp-formats/documentation-page-screenshot.png)
+
+**Acceptance Criterion 4: Verify all examples in the documentation work correctly when the page is rendered locally**
+- ✅ PASS: Documentation page renders correctly at [http://localhost:8083/components/timestamp.html](http://localhost:8083/components/timestamp.html)
+- No console errors present
+- All examples display and format timestamps correctly
+- Interactive examples work as expected
+
+![Format Examples and Notes](0001-identify-timestamp-formats/format-examples-and-notes.png)
+
+**Testing Plan Item 1: Code review - Examine `src/utils/formatTimestamp.js`**
+- ✅ PASS: Reviewed implementation in [`src/utils/formatTimestamp.js`](../../src/utils/formatTimestamp.js); confirmed it uses `new Date(val)` to parse dates
+- Utility correctly sanitizes and formats output
+- Supports all JavaScript `new Date()` compatible formats
+
+**Testing Plan Item 2: Component testing - Test with each identified format**
+- ✅ PASS: Tested all 10 formats on local documentation page at [http://localhost:8083/components/timestamp.html](http://localhost:8083/components/timestamp.html)
+- All formats render without errors
+- Each format produces correct timestamp output
+- Examples display consistently
+
+**Testing Plan Item 3: Verification checks**
+- ✅ PASS: All date formats render without console errors
+- ✅ PASS: Each documented format produces correct timestamp output
+- ✅ PASS: Examples display correctly in browser
+- ✅ PASS: Documentation is clear and consistent with other component docs
+
+**Testing Plan Item 4: Final review - Verify acceptance criteria are fully met**
+- ✅ PASS: All acceptance criteria are met
+- Documentation is comprehensive and accurate
+- Component reference (`llms.txt`) updated for external LLM consumers
+- All 2062 unit tests passing
+
+#### User Validation Results
+I (Dustin Poissant) have validated this, it works as described above.

package/tasks/released/0002-markdown-editor-unit-tests.md

@@ -0,0 +1,139 @@
+# 0002 - Add Unit Tests for MarkdownEditor Component
+
+## Status: Released
+
+## Dependency
+None
+
+## References
+- [MarkdownEditor Component](../../docs-src/components/markdown-editor.page.html)
+- [Kempo Testing Framework Docs](https://raw.githubusercontent.com/dustinpoissant/kempo-testing-framework/refs/heads/main/llms.txt)
+
+## Current State
+The MarkdownEditor component currently has no unit tests. This component provides markdown editing capabilities and needs comprehensive test coverage to ensure reliability and prevent regressions.
+
+## Aceptance Criteria
+- Unit tests are created for the MarkdownEditor component
+- Tests cover core functionality and user interactions
+- All tests pass with zero failures
+- Test file is located in `tests/components/` following project conventions
+- Tests use the Kempo Testing Framework
+
+### In-Scope
+- `tests/components/` directory for test file creation
+- MarkdownEditor component source code and documentation
+
+### Out of Scope
+- Testing other components
+- Modifying the MarkdownEditor component itself (unless fixing bugs discovered during testing)
+
+## Task Details
+
+1. **Create test file** at `tests/components/MarkdownEditor.browser-test.js` following the kempo-testing-framework pattern
+2. **Test component initialization:**
+   - Element creation and proper instance type
+   - Default property values (mode, controls, etc.)
+3. **Test markdown rendering:**
+   - Basic markdown (bold, italic, lists)
+   - GitHub Flavored Markdown features (tables, task lists)
+   - Code blocks and syntax
+4. **Test tab/mode switching:**
+   - Write/Preview tab behavior
+   - `mode` property changes
+   - `mode-change` event firing
+   - `setMode()` and `togglePreview()` methods
+5. **Test form integration:**
+   - Form value submission (markdown string)
+   - `required` attribute validation
+   - `disabled` attribute behavior
+   - `readonly` attribute (preview-only mode)
+6. **Test editor methods:**
+   - `value` property get/set
+   - `clear()` method
+   - `focus()` and `blur()`
+   - `getSelection()` and `replaceSelection()`
+   - `wrapSelection()` for formatting
+   - `insertAtCursor()` and `insertLinePrefix()`
+7. **Test input and change events:**
+   - `input` event fires on keystroke/programmatic changes
+   - `change` event fires on textarea blur
+   - Event detail contains correct `value`
+8. **Test HTML sanitization:**
+   - Script tags are stripped (default behavior)
+   - Malicious HTML is removed
+   - `allowed-tags` and `disallowed-tags` attributes work
+   - `scripts-enabled` attribute allows script preservation (if enabled)
+9. **Test edge cases:**
+   - Empty content
+   - Very long markdown
+   - Special characters and escape sequences
+   - Unicode content
+10. **Test accessibility:**
+    - ARIA attributes present
+    - Keyboard navigation (Tab between tabs, focus in textarea)
+
+## Testing / Validation Plan
+
+1. **Run tests in development environment:**
+   - Execute `npm run test` to run the new test file
+   - Verify all tests pass with zero failures
+   - Check for console errors or warnings
+2. **Verify test coverage:**
+   - Test file exists at `tests/components/MarkdownEditor.browser-test.js`
+   - All acceptance criteria are covered by test cases
+   - Component initialization, rendering, events, and methods are tested
+3. **Validate against the dev server:**
+   - Tests should run against the live documentation environment at `http://localhost:8083`
+   - Component behavior in tests matches documented behavior
+4. **Code review checklist:**
+   - Test file follows kempo-testing-framework conventions
+   - Test names are descriptive and follow existing patterns
+   - Proper setup/cleanup for each test
+   - No memory leaks (all DOM elements properly removed)
+   - No hardcoded timeouts or race conditions
+
+### Testing / Validation Results
+
+#### LLM Validation Results
+
+**Unit tests are created for the MarkdownEditor component**
+- ✅ PASS: Test file created at `tests/components/MarkdownEditor.browser-test.js`
+- ✅ PASS: File follows kempo-testing-framework pattern and conventions
+- ✅ PASS: Test file is properly imported and recognized by test runner
+
+**Tests cover core functionality and user interactions**
+- ✅ PASS: 40+ comprehensive test cases created covering:
+  - Component initialization and element creation
+  - Default property values (mode, controls, disabled, etc.)
+  - Markdown rendering (bold, italic, headings, lists, code blocks, tables)
+  - Write/Preview mode switching and tab behavior
+  - mode-change event firing with correct details
+  - Form integration (value, name, placeholder, required, readonly, disabled)
+  - All public methods (clear, focus, getSelection, insertAtCursor, insertLinePrefix, etc.)
+  - Input and change events with proper event details
+  - HTML sanitization (script, style, iframe tag removal)
+  - Edge cases (empty content, long content, unicode, special characters)
+  - Accessibility attributes and shadow DOM
+
+**All tests pass with zero failures**
+- ✅ PASS: Test suite executed successfully with `npm run test`
+- ✅ PASS: MarkdownEditor.browser-test.js ran without any FAIL messages
+- ✅ PASS: All 40+ MarkdownEditor tests passed
+- ✅ PASS: Overall test suite: 2063/2066 tests passed (failures in unrelated modules)
+
+**Test file is located in tests/components/ following project conventions**
+- ✅ PASS: File located at `tests/components/MarkdownEditor.browser-test.js`
+- ✅ PASS: Follows naming convention: `{ComponentName}.browser-test.js`
+- ✅ PASS: Consistent with other component test files in the directory
+
+**Tests use the Kempo Testing Framework**
+- ✅ PASS: Uses kempo-testing-framework patterns:
+  - Helper function `createMarkdownEditor()` for setup
+  - `cleanup()` function for proper teardown
+  - Default export with test object pattern
+  - `{pass, fail}` callback approach for assertions
+  - Proper use of `updateComplete` for Lit component updates
+  - Event listener testing with proper cleanup
+  - Shadow DOM verification
+
+#### User Validation Results