dedupe icons search code where possible

reidbarber · reidbarber · commit 5d111e949230 · 2025-11-04T14:25:58.000-06:00
diff --git a/packages/dev/s2-docs/pages/s2/Icons.mdx b/packages/dev/s2-docs/pages/s2/Icons.mdx
@@ -1,7 +1,7 @@
 import {Layout} from '../../src/Layout';
 import {InstallCommand} from '../../src/InstallCommand';
 import {Command} from '../../src/Command';
-import {IconCards} from '../../src/IconSearchView';
+import {IconsPageSearch} from '../../src/IconSearchView';
 import {IconColors} from '../../src/IconColors';
 import {IconSizes} from '../../src/IconSizes';
 import {InlineAlert, Heading, Content} from '@react-spectrum/s2';
@@ -24,7 +24,7 @@ import Edit from "@react-spectrum/s2/icons/Edit";
 
 ## Available icons
 
-<IconCards />
+<IconsPageSearch />
 
 ## API
 
diff --git a/packages/dev/s2-docs/scripts/generateMarkdownDocs.mjs b/packages/dev/s2-docs/scripts/generateMarkdownDocs.mjs
@@ -727,13 +727,13 @@ function remarkDocsComponentsToMarkdown() {
       }
 
       // Render an unordered list of icon names.
-      if (name === 'IconCards') {
+      if (name === 'IconsPageSearch') {
         const iconList = getIconNames();
         const listMarkdown = iconList.length 
           ? iconList.map(iconName => `- ${iconName}`).join('\n') 
           : '> Icon list could not be generated.';
-        const iconCardsNode = unified().use(remarkParse).parse(listMarkdown);
-        parent.children.splice(index, 1, ...iconCardsNode.children);
+        const iconListNode = unified().use(remarkParse).parse(listMarkdown);
+        parent.children.splice(index, 1, ...iconListNode.children);
         return index;
       }
 
diff --git a/packages/dev/s2-docs/src/IconSearchView.tsx b/packages/dev/s2-docs/src/IconSearchView.tsx
@@ -16,6 +16,85 @@ import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 
 export const iconList = Object.keys(icons).map(name => ({id: name.replace(/^S2_Icon_(.*?)(Size\d+)?_2.*/, '$1'), icon: icons[name].default}));
 
+export function useIconFilter() {
+  let {contains} = useFilter({sensitivity: 'base'});
+  return useCallback((textValue: string, inputValue: string) => {
+    // Check for alias matches
+    for (const alias of Object.keys(iconAliases)) {
+      if (contains(alias, inputValue) && iconAliases[alias].includes(textValue)) {
+        return true;
+      }
+    }
+    // Also compare for substrings in the icon's actual name
+    return textValue != null && contains(textValue, inputValue);
+  }, [contains]);
+}
+
+export function useCopyImport() {
+  let [copiedId, setCopiedId] = useState<string | null>(null);
+  let timeout = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (timeout.current) {
+        clearTimeout(timeout.current);
+      }
+    };
+  }, []);
+
+  let handleCopyImport = useCallback((id: string) => {
+    if (timeout.current) {
+      clearTimeout(timeout.current);
+    }
+    navigator.clipboard.writeText(`import ${id} from '@react-spectrum/s2/icons/${id}';`).then(() => {
+      setCopiedId(id);
+      timeout.current = setTimeout(() => setCopiedId(null), 2000);
+    }).catch(() => {
+      // noop
+    });
+  }, []);
+
+  return {copiedId, handleCopyImport};
+}
+
+function CopyInfoMessage() {
+  return (
+    <div className={style({display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4})}>
+      <InfoCircle styles={iconStyle({size: 'XS'})} />
+      <span className={style({font: 'ui'})}>Press an item to copy its import statement</span>
+    </div>
+  );
+}
+
+interface IconListBoxProps {
+  items: typeof iconList,
+  copiedId: string | null,
+  onAction: (item: string) => void,
+  listBoxClassName?: string
+}
+
+function IconListBox({items, copiedId, onAction, listBoxClassName}: IconListBoxProps) {
+  return (
+    <Virtualizer layout={GridLayout} layoutOptions={{minItemSize: new Size(64, 64), maxItemSize: new Size(64, 64), minSpace: new Size(12, 12), preserveAspectRatio: true}}>
+      <ListBox
+        onAction={(item) => onAction(item.toString())}
+        items={items}
+        layout="grid"
+        className={listBoxClassName || style({width: '100%', scrollPaddingY: 4})}
+        dependencies={[copiedId]}
+        renderEmptyState={() => (
+          <IllustratedMessage styles={style({marginX: 'auto', marginY: 32})}>
+            <NoSearchResults />
+            <Heading>No results</Heading>
+            <Content>Try a different search term.</Content>
+          </IllustratedMessage>
+        )}>
+        {item => <IconItem item={item} isCopied={copiedId === item.id} />}
+      </ListBox>
+    </Virtualizer>
+  );
+}
+
 const itemStyle = style({
   ...focusRing(),
   size: 'full',
@@ -49,52 +128,12 @@ interface IconSearchViewProps {
 }
 
 export function IconSearchView({filteredItems}: IconSearchViewProps) {
-  let [copiedId, setCopiedId] = useState<string | null>(null);
-  let timeout = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  useEffect(() => {
-    return () => {
-      if (timeout.current) {
-        clearTimeout(timeout.current);
-      }
-    };
-  }, []);
-
-  let handleCopyImport = useCallback((id: string) => {
-    if (timeout.current) {
-      clearTimeout(timeout.current);
-    }
-    navigator.clipboard.writeText(`import ${id} from '@react-spectrum/s2/icons/${id}';`).then(() => {
-      setCopiedId(id);
-      timeout.current = setTimeout(() => setCopiedId(null), 2000);
-    }).catch(() => {
-      // noop
-    });
-  }, []);
+  let {copiedId, handleCopyImport} = useCopyImport();
 
   return (
     <>
-      <div className={style({display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4})}>
-        <InfoCircle styles={iconStyle({size: 'XS'})} />
-        <span className={style({font: 'ui'})}>Press an item to copy its import statement</span>
-      </div>
-      <Virtualizer layout={GridLayout} layoutOptions={{minItemSize: new Size(64, 64), maxItemSize: new Size(64, 64), minSpace: new Size(12, 12), preserveAspectRatio: true}}>
-        <ListBox
-          onAction={(item) => handleCopyImport(item.toString())}
-          items={filteredItems}
-          layout="grid"
-          className={style({width: '100%', scrollPaddingY: 4})}
-          dependencies={[copiedId]}
-          renderEmptyState={() => (
-            <IllustratedMessage styles={style({marginX: 'auto', marginY: 32})}>
-              <NoSearchResults />
-              <Heading>No results</Heading>
-              <Content>Try a different search term.</Content>
-            </IllustratedMessage>
-          )}>
-          {item => <IconItem item={item} isCopied={copiedId === item.id} />}
-        </ListBox>
-      </Virtualizer>
+      <CopyInfoMessage />
+      <IconListBox items={filteredItems} copiedId={copiedId} onAction={handleCopyImport} />
     </>
   );
 }
@@ -187,68 +226,21 @@ export function IconSearchSkeleton() {
   );
 }
 
-export function IconCards() {
-  let {contains} = useFilter({sensitivity: 'base'});
-  let filter = useCallback((textValue, inputValue) => {
-    // check if we're typing part of a category alias
-    for (const alias of Object.keys(iconAliases)) {
-      if (contains(alias, inputValue) && iconAliases[alias].includes(textValue)) {
-        return true;
-      }
-    }
-    // also compare for substrings in the icon's actual name
-    return textValue != null && contains(textValue, inputValue);
-  }, [contains]);
-  
-  let [copiedId, setCopiedId] = useState<string | null>(null);
-  let timeout = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  useEffect(() => {
-    return () => {
-      if (timeout.current) {
-        clearTimeout(timeout.current);
-      }
-    };
-  }, []);
-
-  let handleCopyImport = useCallback((id: string) => {
-    if (timeout.current) {
-      clearTimeout(timeout.current);
-    }
-    navigator.clipboard.writeText(`import ${id} from '@react-spectrum/s2/icons/${id}';`).then(() => {
-      setCopiedId(id);
-      timeout.current = setTimeout(() => setCopiedId(null), 2000);
-    }).catch(() => {
-      // noop
-    });
-  }, []);
+export function IconsPageSearch() {
+  let filter = useIconFilter();
+  let {copiedId, handleCopyImport} = useCopyImport();
 
   return (
     <>
       <Autocomplete filter={filter}>
         <div className={style({display: 'flex', flexDirection: 'column', gap: 8})}>
           <SearchField size="L" aria-label="Search icons" placeholder="Search icons" />
-          <div className={style({display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4})}>
-            <InfoCircle styles={iconStyle({size: 'XS'})} />
-            <span className={style({font: 'ui'})}>Press an item to copy its import statement</span>
-          </div>
-          <Virtualizer layout={GridLayout} layoutOptions={{minItemSize: new Size(64, 64), maxItemSize: new Size(64, 64), minSpace: new Size(12, 12), preserveAspectRatio: true}}>
-            <ListBox
-              onAction={(item) => handleCopyImport(item.toString())}
-              items={iconList}
-              layout="grid"
-              className={style({height: 440, width: '100%', maxHeight: '100%', overflow: 'auto', scrollPaddingY: 4})}
-              dependencies={[copiedId]}
-              renderEmptyState={() => (
-                <IllustratedMessage styles={style({marginX: 'auto', marginY: 32})}>
-                  <NoSearchResults />
-                  <Heading>No results</Heading>
-                  <Content>Try a different search term.</Content>
-                </IllustratedMessage>
-              )}>
-              {item => <IconItem item={item} isCopied={copiedId === item.id} />}
-            </ListBox>
-          </Virtualizer>
+          <CopyInfoMessage />
+          <IconListBox
+            items={iconList}
+            copiedId={copiedId}
+            onAction={handleCopyImport}
+            listBoxClassName={style({height: 440, width: '100%', maxHeight: '100%', overflow: 'auto', scrollPaddingY: 4})} />
         </div>
       </Autocomplete>
     </>
diff --git a/packages/dev/s2-docs/src/SearchMenu.tsx b/packages/dev/s2-docs/src/SearchMenu.tsx
@@ -1,18 +1,17 @@
 'use client';
 
 import {ActionButton, Content, Heading, IllustratedMessage, SearchField, Tag, TagGroup} from '@react-spectrum/s2';
-import {Autocomplete, Dialog, Key, OverlayTriggerStateContext, Provider, Separator as RACSeparator, useFilter} from 'react-aria-components';
+import {Autocomplete, Dialog, Key, OverlayTriggerStateContext, Provider, Separator as RACSeparator} from 'react-aria-components';
 import Close from '@react-spectrum/s2/icons/Close';
 import {ComponentCardView} from './ComponentCardView';
 import {getLibraryFromPage, getLibraryFromUrl} from './library';
-import {iconAliases} from './iconAliases.js';
-import {iconList, IconSearchSkeleton} from './IconSearchView';
+import {iconList, IconSearchSkeleton, useIconFilter} from './IconSearchView';
 import {type Library, TAB_DEFS} from './constants';
 // eslint-disable-next-line monorepo/no-internal-import
 import NoSearchResults from '@react-spectrum/s2/illustrations/linear/NoSearchResults';
 // @ts-ignore
 import {Page} from '@parcel/rsc';
-import React, {CSSProperties, lazy, Suspense, useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import React, {CSSProperties, lazy, Suspense, useEffect, useMemo, useRef, useState} from 'react';
 import {SelectableCollectionContext} from '../../../react-aria-components/src/RSPContexts';
 import {style} from '@react-spectrum/s2/style' with { type: 'macro' };
 import {Tab, TabList, TabPanel, Tabs} from './Tabs';
@@ -141,18 +140,7 @@ export function SearchMenu(props: SearchMenuProps) {
   const [selectedSectionId, setSelectedSectionId] = useState<string>(() => currentPage.exports?.section?.toLowerCase() || 'components');
   const prevSearchWasEmptyRef = useRef<boolean>(true);
 
-  // Icon filter function
-  const {contains} = useFilter({sensitivity: 'base'});
-  const iconFilter = useCallback((textValue, inputValue) => {
-    // check if we're typing part of a category alias
-    for (const alias of Object.keys(iconAliases)) {
-      if (contains(alias, inputValue) && iconAliases[alias].includes(textValue)) {
-        return true;
-      }
-    }
-    // also compare for substrings in the icon's actual name
-    return textValue != null && contains(textValue, inputValue);
-  }, [contains]);
+  const iconFilter = useIconFilter();
 
   const filteredIcons = useMemo(() => {
     if (!searchValue.trim()) {
