feat: add searchable prop to Select component

[Vitor Leal (vitorleal)]

Summary

• Add searchable and searchPlaceholder props to SelectContent for filtering options
• Search is case-insensitive, strips accents/diacritics (e.g. "sao" matches "São Paulo"), and removes special characters
• Sticky search input at top with purple SearchIcon, does not scroll with options
• Search state resets when dropdown closes
• Added Storybook Searchable story with 10 Brazilian cities
• Added 9 new tests covering: rendering, placeholder, case-insensitive filtering, accent normalization, clearing, icon, substring match, no-results, and selection after filtering

Test plan

• All 28 tests passing
• Biome lint clean
• Visual verification in Storybook (Searchable story)

Summary by CodeRabbit

• New Features

  • Added searchable functionality to Select component with flexible text matching (case-insensitive, accent-insensitive, substring matching)
  • Includes customizable search placeholder text

• Tests

  • Added comprehensive test coverage for searchable behavior, filtering, placeholder customization, and edge cases

• Documentation

  • Added Storybook example demonstrating searchable select with sample data

[coderabbitai]

Walkthrough

Listen up, fool! These changes add a searchable feature to the Select component, I pity the fool who doesn't read this. The implementation includes a search input with flexible text matching, new tests covering filter behavior, and a Storybook story showcasing the functionality. Sucka!

Changes

Cohort / File(s)	Summary
Core Searchable Feature src/components/ui/Select/Select.tsx	Added searchable and searchPlaceholder props to SelectContent. Implemented search state management, text normalization for flexible matching (lowercase, diacritics removed), and SelectSearchContext for passing search queries to SelectItem. Items render conditionally based on normalized text matching. I pity the fool who doesn't understand this logic, sucka!
Search Test Coverage src/components/ui/Select/Select.test.tsx	Comprehensive test suite covering search input visibility, custom placeholder propagation, case-insensitive matching, accent-insensitive matching, substring matching, search clearing, empty results, and item selection. A foolish developer ignores these tests, jibber jabber!
Storybook Documentation src/components/ui/Select/Select.stories.tsx	New Searchable story demonstrating the Select component with Brazilian cities as options and search functionality enabled. This fool's guide helps developers see the feature in action!

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🔍 A searchable Select, I tell you fool,
With text normalization, that's the rule!
Fools who match substrings with ease,
Diacritics stripped like a gentle breeze—
I pity the fool who skips this flow! 🕺

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	Title clearly and concisely summarizes the main change: adding searchable functionality to the Select component.
Description check	✅ Passed	The pull request description covers the key changes, includes a test plan with passing tests, and mentions Storybook updates, addressing all major template sections.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/select-searchable

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}