ref(stories): add regions to search (#95247)

Adds regions so that we can tell where each of the stories belongs to

<img width="1002" height="1120" alt="CleanShot 2025-07-10 at 12 51
37@2x"
src="https://github.com/user-attachments/assets/94f396e3-a31a-4600-99eb-592cdddfbcbd"
/>

Author: JonasBa

static/app/stories/view/storySearch.tsx

@@ -2,7 +2,7 @@ import type {Key} from 'react';
 import {useCallback, useMemo, useRef, useState} from 'react';
 import styled from '@emotion/styled';
 import {type AriaComboBoxProps} from '@react-aria/combobox';
-import {Item} from '@react-stately/collections';
+import {Item, Section} from '@react-stately/collections';
 import {useComboBoxState} from '@react-stately/combobox';
 import type {CollectionChildren} from '@react-types/shared';
 
@@ -14,37 +14,93 @@ import {useSearchTokenCombobox} from 'sentry/components/searchQueryBuilder/token
 import {IconSearch} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import type {StoryTreeNode} from 'sentry/stories/view/storyTree';
-import {useStoryTree} from 'sentry/stories/view/storyTree';
 import {space} from 'sentry/styles/space';
 import {fzf} from 'sentry/utils/profiling/fzf/fzf';
 import {useHotkeys} from 'sentry/utils/useHotkeys';
 import {useNavigate} from 'sentry/utils/useNavigate';
 
-import {useStoryBookFiles} from './useStoriesLoader';
+import {useStoryBookFilesByCategory} from './storySidebar';
+
+interface StorySection {
+  key: string;
+  label: string;
+  options: StoryTreeNode[];
+}
+
+function isStorySection(item: StoryTreeNode | StorySection): item is StorySection {
+  return 'options' in item;
+}
 
 export function StorySearch() {
   const inputRef = useRef<HTMLInputElement | null>(null);
-  const files = useStoryBookFiles();
-  const tree = useStoryTree(files, {query: '', representation: 'category', type: 'flat'});
+  const {foundations, core, shared} = useStoryBookFilesByCategory();
+
   const storiesSearchHotkeys = useMemo(() => {
     return [{match: '/', callback: () => inputRef.current?.focus()}];
   }, []);
+
   useHotkeys(storiesSearchHotkeys);
 
+  const sectionedItems = useMemo(() => {
+    const sections: StorySection[] = [];
+
+    if (foundations.length > 0) {
+      sections.push({
+        key: 'foundations',
+        label: 'Foundations',
+        options: foundations,
+      });
+    }
+
+    if (core.length > 0) {
+      sections.push({
+        key: 'core',
+        label: 'Core',
+        options: core,
+      });
+    }
+
+    if (shared.length > 0) {
+      sections.push({
+        key: 'shared',
+        label: 'Shared',
+        options: shared,
+      });
+    }
+
+    return sections;
+  }, [foundations, core, shared]);
+
   return (
     <SearchComboBox
       label={t('Search stories')}
       menuTrigger="focus"
       inputRef={inputRef}
-      defaultItems={tree}
+      defaultItems={sectionedItems}
     >
-      {item => (
-        <Item
-          key={item.filesystemPath}
-          textValue={item.label}
-          {...({label: item.label, hideCheck: true} as any)}
-        />
-      )}
+      {item => {
+        if (isStorySection(item)) {
+          return (
+            <Section key={item.key} title={<SectionTitle>{item.label}</SectionTitle>}>
+              {item.options.map(storyItem => (
+                <Item
+                  key={storyItem.filesystemPath}
+                  textValue={storyItem.label}
+                  {...({label: storyItem.label, hideCheck: true} as any)}
+                />
+              ))}
+            </Section>
+          );
+        }
+
+        return (
+          <Item
+            key={item.filesystemPath}
+            textValue={item.label}
+            {...({label: item.label, hideCheck: true} as any)}
+          />
+        );
+      }}
     </SearchComboBox>
   );
 }
@@ -67,10 +123,12 @@ function SearchInput(
   );
 }
 
+type SearchComboBoxItem<T extends StoryTreeNode> = T | StorySection;
+
 interface SearchComboBoxProps<T extends StoryTreeNode>
-  extends Omit<AriaComboBoxProps<T>, 'children'> {
-  children: CollectionChildren<T>;
-  defaultItems: T[];
+  extends Omit<AriaComboBoxProps<SearchComboBoxItem<T>>, 'children'> {
+  children: CollectionChildren<SearchComboBoxItem<T>>;
+  defaultItems: Array<SearchComboBoxItem<T>>;
   inputRef: React.RefObject<HTMLInputElement | null>;
   description?: string | null;
   label?: string;
@@ -106,7 +164,9 @@ function SearchComboBox<T extends StoryTreeNode>(props: SearchComboBoxProps<T>)
     onSelectionChange: handleSelectionChange,
   });
 
-  const {inputProps, listBoxProps, labelProps} = useSearchTokenCombobox<T>(
+  const {inputProps, listBoxProps, labelProps} = useSearchTokenCombobox<
+    SearchComboBoxItem<T>
+  >(
     {
       ...props,
       inputRef,
@@ -160,4 +220,15 @@ const StyledOverlay = styled(Overlay)`
   width: 320px;
   max-height: calc(100dvh - 128px);
   overflow-y: auto;
+
+  /* Make section headers darker in this component */
+  p[id][aria-hidden='true'] {
+    color: ${p => p.theme.textColor};
+  }
+`;
+
+const SectionTitle = styled('span')`
+  color: ${p => p.theme.textColor};
+  font-weight: 600;
+  text-transform: uppercase;
 `;

static/app/stories/view/storySidebar.tsx

@@ -7,6 +7,29 @@ import {StoryTree, useStoryTree} from './storyTree';
 import {useStoryBookFiles} from './useStoriesLoader';
 
 export function StorySidebar() {
+  const {foundations, core, shared} = useStoryBookFilesByCategory();
+
+  return (
+    <SidebarContainer>
+      <ul>
+        <li>
+          <h3>Foundations</h3>
+          <StoryTree nodes={foundations} />
+        </li>
+        <li>
+          <h3>Components</h3>
+          <StoryTree nodes={core} />
+        </li>
+        <li>
+          <h3>Shared</h3>
+          <StoryTree nodes={shared} />
+        </li>
+      </ul>
+    </SidebarContainer>
+  );
+}
+
+export function useStoryBookFilesByCategory() {
   const files = useStoryBookFiles();
   const filesByOwner = useMemo(() => {
     const map: Record<'foundations' | 'core' | 'shared', string[]> = {
@@ -26,38 +49,25 @@ export function StorySidebar() {
     return map;
   }, [files]);
 
-  const foundationsTree = useStoryTree(filesByOwner.foundations, {
+  const foundations = useStoryTree(filesByOwner.foundations, {
     query: '',
     representation: 'category',
   });
-  const coreTree = useStoryTree(filesByOwner.core, {
+  const core = useStoryTree(filesByOwner.core, {
     query: '',
     representation: 'category',
     type: 'flat',
   });
-  const sharedTree = useStoryTree(filesByOwner.shared, {
+  const shared = useStoryTree(filesByOwner.shared, {
     query: '',
     representation: 'category',
   });
 
-  return (
-    <SidebarContainer>
-      <ul>
-        <li>
-          <h3>Foundations</h3>
-          <StoryTree nodes={foundationsTree} />
-        </li>
-        <li>
-          <h3>Components</h3>
-          <StoryTree nodes={coreTree} />
-        </li>
-        <li>
-          <h3>Shared</h3>
-          <StoryTree nodes={sharedTree} />
-        </li>
-      </ul>
-    </SidebarContainer>
-  );
+  return {
+    foundations,
+    core,
+    shared,
+  };
 }
 
 function isCoreFile(file: string) {