[PLAY-372] Search Results (#4171)

**What does this PR do?** A clear and concise description with your
runway ticket url.
This PR adds the match-sorter library to filter the kits that are
displayed on the playbook-website as you type.
[Story](https://runway.powerhrg.com/backlog_items/PLAY-372)

**Screenshots:** Screenshots to visualize your addition/change
![Screenshot 2025-01-24 at 9 35
40 AM](https://github.com/user-attachments/assets/aad13562-e65f-43ab-a272-48d86fc8552d)
![Screenshot 2025-01-24 at 9 35
53 AM](https://github.com/user-attachments/assets/5c8a2a89-aeb5-4d3b-80d4-977d9306c2b7)


**How to test?** Steps to confirm the desired behavior:
1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See addition/change


#### Checklist:
- [x] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new
kit`, `deprecated`, or `breaking`. See [Changelog &
Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels)
for details.
- [x] **DEPLOY** I have added the `milano` label to show I'm ready for a
review.
- [ ] **TESTS** I have added test coverage to my code.

playbook-website/app/javascript/components/KitSearch.tsx

@@ -1,12 +1,20 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import { Typeahead } from 'playbook-ui'
+import { matchSorter } from 'match-sorter'
+
+type Kit = {
+  label: string,
+  value: string,
+}
 
 type KitSearchProps = {
   classname: String,
-  kits: [],
+  kits: Kit[],
   id: String,
 }
 const KitSearch = ({ classname, id, kits }: KitSearchProps) => {
+  const [filteredKits, setFilteredKits] = useState(kits)
+
   useEffect(() => {
     if (id === 'desktop-kit-search') {
       window.addEventListener('keydown', (e) => {
@@ -24,14 +32,24 @@ const KitSearch = ({ classname, id, kits }: KitSearchProps) => {
     }
   }
 
+  const handleFilteredKits = (query: string) => {
+    if (query) {
+      const results = matchSorter(kits, query, { keys: ['label'] })
+      setFilteredKits(results)
+    } else {
+      setFilteredKits(kits)
+    }
+  }
+
   return (
     <div>
       <Typeahead
           className={classname}
           dark={document.cookie.split('; ').includes('dark_mode=true')}
           id={id}
           onChange={handleChange}
-          options={kits}
+          onInputChange={handleFilteredKits}
+          options={filteredKits}
           placeholder="Search..."
       />
     </div>

playbook-website/package.json

@@ -14,6 +14,7 @@
     "@powerhome/power-fonts": "0.0.1-alpha.6",
     "anchor-js": "^5.0.0",
     "maplibre-gl": "^2.4.0",
+    "match-sorter": "^8.0.0",
     "playbook-ui": ">= 1"
   },
   "devDependencies": {