doc: Tutorials for new users

tutorials/Additional Tutorial Suggestions.md

@@ -0,0 +1,144 @@
+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