feat: add search filter to Introduction page

[nastyastavitskaya]

Summary

• Add a search input to the Storybook Introduction/homepage to quickly filter components by name
• Input uses search icon prefix and aligns to 2 card columns via the same CSS grid
• Shows Aquarium Empty component when no results match

Test plan

• Open Introduction page in Storybook
• Type a component name (e.g. "radio") — verify grid filters to matching components
• Type gibberish — verify Empty state renders with proper spacing
• Clear input — verify all components reappear

🤖 Generated with Claude Code

[cursor]

PR Summary

Low Risk
Low risk: changes are isolated to Storybook docs UI and simple client-side filtering, with no backend, auth, or data persistence impact.

Overview
Adds a search box to the docs Introduction page to filter displayed components by name, including a dynamic placeholder showing the total component count.

Refactors category computation into memoized allCategories and derives a filtered categories list from the search query; shows an Empty state when no matches are found.

Updates CLAUDE.md contributor guidance to require updating relevant documentation whenever adding/promoting icons or components.

^{Reviewed by Cursor Bugbot for commit c6b903c. Bugbot is set up for automated code reviews on this repo. Configure here.}

[github-actions]

PR Preview Action v1.6.3
🚀 View preview at https://mParticle.github.io/aquarium/pr-preview/pr-787/
Built to branch gh-pages at 2026-04-20 22:11 UTC. Preview will be ready when the GitHub Pages deployment is complete.

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit c6b903c. Configure here.}

[cursor]

Search query not trimmed before filtering components

Low Severity

The empty-guard on line 214 uses searchQuery.trim() to decide whether to filter, but the actual filtering query on line 215 uses searchQuery.toLowerCase() without trimming. A search like " radio " (with accidental leading/trailing whitespace) passes the guard but fails to match any component name because the spaces are included in the .includes() check. The query variable needs to also be trimmed.

Additional Locations (1)

• docs/About/Introduction.tsx#L213-L214

 

^{Reviewed by Cursor Bugbot for commit c6b903c. Configure here.}