testdrive-jsui/tutorials/Additional Tutorial Suggestions.md

List of next-stage tutorial ideas, organized by theme and complexity, to help evolve both the teaching path and the framework.

---

🧩 A. UI and Interaction Patterns

1. Tutorial 9 — Forms and Validation

   • Build a <user-form> component with multiple fields and validation logic.
   • Introduce unit tests for validation rules and error display.
   • Show how to test async validations (e.g., simulated API check).

2. Tutorial 10 — Modal Dialogs and Overlays

   • Implement a <modal-dialog> web component using Lit and CSS transitions.
   • Demonstrate accessibility (aria-*) and keyboard interactions.
   • TDD focus: test open/close state, keyboard handling, and backdrop clicks.

3. Tutorial 11 — Keyboard Navigation and Accessibility

   • Add keyboard shortcuts and focus management to existing components.
   • Test tab order, focus restoration, and ARIA attributes using jsdom.

4. Tutorial 12 — Dynamic Lists and Reordering

   • Build a draggable <sortable-list> component.
   • Test DOM updates, drag/drop events, and final order assertions.

---

⚙️ B. State, Data, and Logic

5. Tutorial 13 — Derived and Computed State

   • Extend the store to include computed values (e.g., counts, filters).
   • Teach memoization and how to test reactive derivations.

6. Tutorial 14 — Undo/Redo and Time Travel

   • Add a store history stack and commands for undo/redo.
   • Test state rollbacks deterministically.

7. Tutorial 15 — Multi-Store Coordination

   • Split state across multiple stores (e.g., UserStore, SettingsStore).
   • Show how to compose subscriptions and test inter-store dependencies.

8. Tutorial 16 — Data Fetching and Caching

   • Use fetch() to load data asynchronously and cache it in the store.
   • Mock HTTP requests in tests.
   • Discuss retry and error handling patterns.

---

💎 C. Styling, Theming, and Branding

9. Tutorial 17 — Theming and CSS Variables

   • Implement a theme manager (light/dark/custom colors).
   • Test dynamic theme changes via store and DOM styles.

10. Tutorial 18 — Component Libraries and Design Tokens

    • Introduce reusable style tokens and component variants.
    • Build visual regression tests using Storybook snapshots.

---

🧠 D. Architecture and Automation

11. Tutorial 19 — Reactive Controllers and Composition

    • Use Lit’s ReactiveController pattern to encapsulate logic like stores or timers.
    • TDD pattern: one controller, multiple components.

12. Tutorial 20 — Custom Build and Test Pipelines

    • Show how to integrate Mocha tests into CI (GitHub Actions).
    • Include code coverage (nyc) and automatic agent test reporting.

13. Tutorial 21 — Agentic Refactoring

    • Demonstrate agents proposing architectural changes:

      • identifying code smells,
      • extracting controllers,
      • enforcing consistent store usage.

14. Tutorial 22 — Agent-Driven Story Generation

    • Agents create new Storybook stories based on test cases.
    • Bridge test specs and UX documentation automatically.

---

🔮 E. Integration and Expansion

15. Tutorial 23 — REST and GraphQL API Integration

    • Fetch and render real backend data.
    • Mock responses for offline testing.
    • Introduce contract tests for schema validation.

16. Tutorial 24 — Internationalization (i18n)

    • Add locale switching to greetings.
    • Test translation loading and pluralization behavior.

17. Tutorial 25 — Progressive Web App (PWA) Integration

    • Cache store data offline.
    • Add service worker tests for persistence.

18. Tutorial 26 — Performance and Profiling

    • Measure component render times.
    • Write regression tests for performance thresholds.

---

🚀 F. Visionary / Meta Layer

19. Tutorial 27 — Visual AI Testing

    • Integrate image snapshots from Storybook for visual regression comparison.
    • Show how agents can detect UI drift.

20. Tutorial 28 — Self-Testing Components

    • Each component ships with its own self-test harness.
    • Components can verify their own integrity in isolation.

21. Tutorial 29 — AI-Assisted UX Heuristics

    • Agents analyze user interaction logs and propose UI simplifications.
    • TDD for heuristic improvements.

22. Tutorial 30 — Meta-Framework Evolution

    • Turn TestDrive-UI into a reusable CLI (npx testdrive-ui new <component>).
    • Generate scaffolds, tests, and stories automatically.

xxx