docs: Fix sandboxes, localStorage, and search cards

[devongovett]

• Fixes ZIP/codesandbox/stackblitz for all examples
• Refactors components that use local storage to use a shared hook that uses useSyncExternalStore so that there is no flicker when navigating
• Uses ListBox instead of CardView for the search menu so that we can have virtual focus (i.e. you can press Enter to go to a page)

[snowystinger]

just in case something goes unexpectedly wrong, should we have an easy way to clear out all of our values?

do we have any ways of confirming/enforcing that we don't have conflicting keys across pages and examples?

[devongovett]

the keys are intended to be global. When you change your packageManager, the whole site remembers across all pages.

[snowystinger]

yeah, but if some combination of settings from across the site ends up accidentally conflicting in an unforseen way, it could cause a page to crash making it difficult to recover.
Or maybe someone just wants to start over with the defaults.

Some will guess or know you can go clear local storage, but I still think it could be useful to have a clear button somewhere

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the documentation
• View the S2 docs

[LFDanLu]

Still going through the changes in here, but I was testing the codesandbox creation and it looks like it is copying the "Expand code"/"Collapse code" that is present depending on the expand/collapse state the code is in when you trigger sandbox creation? Testing via https://reactspectrum.blob.core.windows.net/reactspectrum/ee77fca2f1f13b1aae3b60f36cf7fd2aa5011a69/s2-docs/react-aria/Autocomplete.html

Additionally, even after getting rid of that, the example needs a export default but then will run properly after adding that

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the documentation
• View the S2 docs

[devongovett]

@LFDanLu looks like I refactored it at the last minute and got the wrong DOM element. 🤦

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the documentation
• View the S2 docs

[reidbarber]

The search field position changed. The focus ring gets clipped and it's no longer horizontally centered.

[devongovett]

I thought it looked weird that the search field didn't line up with the tags/cards...

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the documentation
• View the S2 docs

[nwidynski]

@devongovett Unrelated to the changes here, but wanted to note that it may make sense to add a scrollPadding to the listbox and gridlist examples, since the focus ring on items is clipped when scrollIntoView does its thing.