docs(Autocomplete): add Live Wikipedia story demonstrating a real remote API

[garrity-miepub]

Summary

Follow-up to #381. The Async Source story demonstrates the remote wiring pattern with a simulated setTimeout backend — this adds a Live Wikipedia story that hits a real third-party API, proving the pattern works cross-origin against production infrastructure and demonstrating the full production recipe.

What changed

Docs-only change to src/components/Autocomplete/Autocomplete.stories.tsx (+110):

• New Live Wikipedia story — type-ahead against Wikipedia's opensearch endpoint (CORS-enabled via origin=*):
  • 250 ms debounce before each request
  • AbortController cancels the in-flight request per keystroke, so stale responses never land
  • Loading state via emptyMessage ("Searching Wikipedia…")
  • Selected article renders as a working external link; clearOnSelect={false} keeps the query
• Wiring-patterns docs section cross-references the new story

Notes

• Story requires internet access; it is not in the curated visual-regression list (tests/visual/components.spec.ts), so no snapshot flakiness
• No component code touched

Verification

• pnpm typecheck ✅ / eslint ✅ / prettier ✅ / pnpm vitest run src/components/Autocomplete 7/7 ✅
• Verified live in Storybook: "electronic health rec" → debounced fetch → 8 real Wikipedia articles → selection renders link to https://en.wikipedia.org/wiki/Electronic_health_record

[Copilot]

Pull request overview

Adds a new Storybook documentation example for Autocomplete that demonstrates the “remote/async items” wiring pattern against a real third-party API (Wikipedia opensearch), and cross-references it from the existing wiring guide section.

Changes:

• Updates the “Remote / async source” docs section to reference the new “Live Wikipedia” story.
• Adds a new LiveWikipedia story that performs debounced fetches to Wikipedia and renders a selected result as an external link.

Suppressed comments (3)

src/components/Autocomplete/Autocomplete.stories.tsx:316

• latestQuery should be updated on every keystroke (including when clearing the input) so pending timers/fetches can reliably detect they’re stale and bail out.

  const search = (q: string) => {
    clearTimeout(debounceTimer.current);
    abortRef.current?.abort();
    if (!q) {
      setItems([]);

src/components/Autocomplete/Autocomplete.stories.tsx:336

• Even with aborting, a stale timer/fetch can still reach this point; guard before applying results so the list never updates for an older query.

        ];
        setItems(
          titles.map((title, i) => ({

src/components/Autocomplete/Autocomplete.stories.tsx:345

• On non-abort failures, the story currently keeps showing the previous query’s results while the input contains the new query. Clearing items (and optionally showing an error message) avoids misleading/stale results.

      } catch (err) {
        if ((err as Error).name !== 'AbortError') setLoading(false);
      }

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[cloudflare-workers-and-pages]

Deploying ui with    Cloudflare Pages

Latest commit:	3ede059
Status:	✅  Deploy successful!
Preview URL:	https://06104f03.ui-6d0.pages.dev
Branch Preview URL:	https://docs-autocomplete-live-wiki.ui-6d0.pages.dev

View logs

[Copilot]

Pull request overview

Copilot reviewed 1 out of 1 changed files in this pull request and generated no new comments.