docs(Autocomplete): add wiring guide, prop cheat sheet, and async source story

[garrity-miepub]

Summary

The Autocomplete Storybook page previously showed only two bare stories with no guidance on how to feed it data. Consumers installing @mieweb/ui in another app had no self-serve reference for wiring up their own data source. This PR turns the docs page into a complete setup guide.

What changed

Docs-only change to src/components/Autocomplete/Autocomplete.stories.tsx (+153, no component code touched):

• Quick start — copy-paste snippet: import { Autocomplete } from '@mieweb/ui' with the minimal required props (items, getItemKey, renderItem, filter, onSelect)
• The two wiring patterns — explicit recipes with code for:
  1. Local filtering — pass all items + a filter predicate
  2. Remote / async — omit filter, fetch in onValueChange, re-pass items
• Prop cheat sheet — table grouping every prop by concern (data in, filtering, selection out, query control, create-new row, popover behavior, styling)
• Good to know — portal + fixed positioning escapes overflow: hidden, full keyboard/ARIA combobox support, minQueryLength gating, debounce-is-on-you note
• New Async Source story — live demo of the server-backed pattern (simulated 400 ms latency, loading state surfaced via emptyMessage)
• Per-story descriptions added to Basic and Creatable

Verification

• pnpm typecheck ✅
• pnpm exec eslint src/components/Autocomplete/Autocomplete.stories.tsx ✅
• pnpm exec prettier --check ✅
• pnpm vitest run src/components/Autocomplete — 7/7 ✅
• Verified live in Storybook: all doc sections render; Async Source story fetches and selects correctly ("sar" → Sarah Johnson)

[Copilot]

Pull request overview

This PR enhances the Storybook documentation for Autocomplete by turning the stories file into a full wiring guide for consumers, including quick-start usage, common data-source patterns, and a new async-backed demo story.

Changes:

• Added a component-level docs guide covering quick start, local vs remote wiring patterns, and “good to know” behavior notes.
• Added a prop “cheat sheet” table grouping props by concern.
• Added per-story docs descriptions for Basic, Creatable, and introduced a new Async Source story demonstrating server-backed usage.

Suppressed comments (1)

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

• AsyncExample.search schedules a new setTimeout on every keystroke without cancelling the previous one. Typing quickly can cause out-of-order updates (older timeouts overwriting newer results) and can also trigger state updates after unmount. Consider tracking the pending timeout (e.g., useRef) and clearing it on each new query and on unmount.

    setLoading(true);
    setTimeout(() => {
      setItems(
        employees.filter((e) => e.name.toLowerCase().includes(q.toLowerCase()))
      );

---

💡 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:	e83e136
Status:	✅  Deploy successful!
Preview URL:	https://e9635a39.ui-6d0.pages.dev
Branch Preview URL:	https://docs-autocomplete-wiring.ui-6d0.pages.dev

View logs

[Copilot]

Pull request overview

Copilot reviewed 1 out of 1 changed files in this pull request and generated 1 comment.

[Copilot]

Pull request overview

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