{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "search", "type": "registry:block", "title": "Algolia crafted search experience", "description": "Opinionated site search experience, powered by Algolia's InstantSearch", "dependencies": [ "algoliasearch@^5", "react-instantsearch@^7.16.2", "lucide-react", "tw-animate-css" ], "devDependencies": [ "tw-animate-css" ], "registryDependencies": [ "button" ], "files": [ { "path": "src/registry/experiences/search/components/search.tsx", "content": "/** biome-ignore-all lint/a11y/useSemanticElements: hand crafted interactions */\n/** biome-ignore-all lint/a11y/useFocusableInteractive: hand crafted interactions */\n/** biome-ignore-all lint/suspicious/noExplicitAny: too ambiguous */\n/** biome-ignore-all lint/a11y/noStaticElementInteractions: hand crafted interactions */\n/** biome-ignore-all lint/a11y/useKeyWithClickEvents: hand crafted interactions */\n/* eslint-disable @typescript-eslint/no-explicit-any */\n\nimport { liteClient as algoliasearch } from \"algoliasearch/lite\";\nimport type { BaseHit, Hit } from \"instantsearch.js\";\nimport { ArrowDown, ArrowUp, CornerDownLeft, SearchIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport {\n Configure,\n Highlight,\n InstantSearch,\n useHits,\n useInstantSearch,\n useSearchBox,\n} from \"react-instantsearch\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\nimport { useKeyboardNavigation } from \"@/registry/experiences/search/hooks/use-keyboard-navigation\";\n\nexport interface SearchConfig {\n /** Algolia Application ID (required) */\n applicationId: string;\n /** Algolia API Key (required) */\n apiKey: string;\n /** Algolia Index Name (required) */\n indexName: string;\n /** Placeholder text for search input (optional, defaults to \"What are you looking for?\") */\n placeholder?: string;\n /** Number of hits per page (optional, defaults to 8) */\n hitsPerPage?: number;\n /** Custom search button text (optional) */\n buttonText?: string;\n /** Custom search button props (optional) */\n buttonProps?: React.ComponentProps;\n /** Map which hit attributes to render (supports dotted paths) */\n attributes: HitsAttributesMapping;\n /** Additional Algolia search parameters (optional) - e.g., analytics, filters, distinct, etc. */\n searchParameters?: Record;\n /** Enable Algolia Insights (optional, defaults to true) */\n insights?: boolean;\n /** Open hit URLs in a new tab (optional, defaults to true) */\n openResultsInNewTab?: boolean;\n /** Transform items before rendering (optional) - useful for proxying images or modifying hit data */\n transformItems?: (items: Hit[]) => Hit[];\n}\n\n// =========================================================================\n// Attribute Mapping\n// =========================================================================\n\ntype HitsAttributesMapping = {\n primaryText: string;\n secondaryText?: string;\n tertiaryText?: string;\n url?: string;\n image?: string;\n};\n\nfunction toAttributePath(attribute?: string): string | string[] | undefined {\n if (!attribute) return undefined;\n return attribute.includes(\".\") ? attribute.split(\".\") : attribute;\n}\n\nfunction getByPath(obj: unknown, path?: string): T | undefined {\n if (!obj || !path) return undefined;\n const parts = path.split(\".\");\n let current: unknown = obj;\n for (const part of parts) {\n if (current == null || typeof current !== \"object\") return undefined;\n current = (current as Record)[part];\n }\n return current as T | undefined;\n}\n\n// ============================================================================\n// Internal Components\n// ============================================================================\n\ninterface SearchButtonProps extends React.ComponentProps {}\n\nexport const SearchButton: React.FC = ({\n className,\n ...buttonProps\n}) => {\n const [modifierLabel, setModifierLabel] = useState(\"⌘\");\n const [isModifierPressed, setIsModifierPressed] = useState(false);\n const [isKPressed, setIsKPressed] = useState(false);\n\n useEffect(() => {\n if (typeof navigator === \"undefined\") return;\n const isMac = /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform);\n setModifierLabel(isMac ? \"⌘\" : \"Ctrl\");\n }, []);\n\n useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.metaKey || event.ctrlKey) {\n setIsModifierPressed(true);\n }\n if (event.key.toLowerCase() === \"k\") {\n setIsKPressed(true);\n }\n };\n\n const handleKeyUp = (event: KeyboardEvent) => {\n if (!event.metaKey && !event.ctrlKey) {\n setIsModifierPressed(false);\n }\n if (event.key.toLowerCase() === \"k\") {\n setIsKPressed(false);\n }\n };\n\n const resetKeys = () => {\n setIsModifierPressed(false);\n setIsKPressed(false);\n };\n\n document.addEventListener(\"keydown\", handleKeyDown);\n document.addEventListener(\"keyup\", handleKeyUp);\n window.addEventListener(\"blur\", resetKeys);\n\n return () => {\n document.removeEventListener(\"keydown\", handleKeyDown);\n document.removeEventListener(\"keyup\", handleKeyUp);\n window.removeEventListener(\"blur\", resetKeys);\n };\n }, []);\n\n const baseClassName =\n \"md:min-w-[200px] justify-between hover:shadow-md transition-transform duration-400 translate-y-0 py-3 h-auto cursor-pointer hover:bg-transparent hover:translate-y-[-2px] border shadow-none\";\n\n return (\n \n \n \n Search\n \n
\n \n {modifierLabel}\n \n \n K\n \n
\n \n );\n};\n\n// Logo Component\nconst AlgoliaLogo = ({ size = 150 }: { size?: number | string }) => (\n \n \n {/* eslint-disable-nextLine @docusaurus/no-untranslated-text */}\n \n \n \n \n \n \n \n \n \n \n \n \n);\n\n// Modal Component\ninterface ModalProps {\n isOpen: boolean;\n onClose: () => void;\n children: React.ReactNode;\n}\n\nconst Modal: React.FC = ({ isOpen, onClose, children }) => {\n useEffect(() => {\n const handleEscape = (event: KeyboardEvent) => {\n if (event.key === \"Escape\") {\n onClose();\n }\n };\n\n if (isOpen) {\n document.addEventListener(\"keydown\", handleEscape);\n document.body.style.overflow = \"hidden\";\n }\n\n return () => {\n document.removeEventListener(\"keydown\", handleEscape);\n document.body.style.overflow = \"unset\";\n };\n }, [isOpen, onClose]);\n\n if (!isOpen) return null;\n\n return createPortal(\n \n e.stopPropagation()}\n >\n {children}\n \n ,\n document.body,\n );\n};\n\n// HitsList Component\ninterface HitsListProps {\n hits: Hit[];\n query: string;\n selectedIndex: number;\n attributes: HitsAttributesMapping;\n onHoverIndex?: (index: number) => void;\n hoverEnabled?: boolean;\n sendEvent?: (\n eventType: \"click\",\n hit: Hit,\n eventName: string,\n ) => void;\n openResultsInNewTab?: boolean;\n}\n\nconst HitsList = memo(function HitsList({\n hits,\n selectedIndex,\n attributes,\n onHoverIndex,\n hoverEnabled,\n sendEvent,\n openResultsInNewTab = true,\n}: HitsListProps) {\n const [failedImages, setFailedImages] = useState>({});\n const mapping = useMemo(\n () => ({\n primaryText: attributes.primaryText,\n secondaryText: attributes.secondaryText,\n tertiaryText: attributes.tertiaryText,\n url: attributes.url,\n image: attributes.image,\n }),\n [attributes],\n );\n\n if (!attributes || !mapping.primaryText) {\n throw new Error(\"At least a primaryText is required to display results\");\n }\n\n return (\n <>\n {hits.map((hit: any, idx: number) => {\n const isSel = selectedIndex === idx;\n const imageUrl = getByPath(hit, mapping.image);\n const url = getByPath(hit, mapping.url);\n const hasImage = Boolean(imageUrl);\n const isImageFailed = failedImages[hit.objectID] || !hasImage;\n const primaryVal = getByPath(hit, mapping.primaryText);\n return (\n {\n sendEvent?.(\"click\", hit, \"Hit Clicked\");\n }}\n onMouseEnter={() => {\n if (!hoverEnabled) return;\n onHoverIndex?.(idx);\n }}\n onMouseMove={() => {\n if (!hoverEnabled) return;\n onHoverIndex?.(idx);\n }}\n >\n {hasImage ? (\n
\n {!isImageFailed ? (\n \n setFailedImages((prev) => ({\n ...prev,\n [hit.objectID]: true,\n }))\n }\n />\n ) : (\n \n \n
\n )}\n \n ) : null}\n
\n

\n \n

\n {mapping.secondaryText ? (\n

\n {getByPath(hit, mapping.secondaryText)}\n

\n ) : null}\n {mapping.tertiaryText ? (\n

\n {getByPath(hit, mapping.tertiaryText)}\n

\n ) : null}\n
\n \n );\n })}\n \n );\n});\n\n// SearchInput Component\nexport interface SearchInputProps {\n placeholder?: string;\n className?: string;\n inputRef: React.RefObject;\n onClose: () => void;\n onArrowDown?: () => void;\n onEnter?: () => void;\n onArrowUp?: () => void;\n}\n\nconst SearchInput = memo(function SearchInput(props: SearchInputProps) {\n const { status } = useInstantSearch();\n const { query, refine } = useSearchBox();\n\n const isSearchStalled = status === \"stalled\";\n\n function setQuery(newQuery: string) {\n refine(newQuery);\n }\n\n const placeholder = props.placeholder;\n\n return (\n {\n event.preventDefault();\n event.stopPropagation();\n }}\n onReset={(event) => {\n event.preventDefault();\n event.stopPropagation();\n\n setQuery(\"\");\n if (props.inputRef.current) {\n props.inputRef.current.focus();\n }\n }}\n >\n \n \n \n {\n setQuery(event.currentTarget.value);\n }}\n onKeyDown={(e) => {\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n props.onArrowDown?.();\n return;\n }\n if (e.key === \"ArrowUp\") {\n e.preventDefault();\n props.onArrowUp?.();\n return;\n }\n if (e.key === \"Enter\") {\n e.preventDefault();\n props.onEnter?.();\n }\n }}\n // biome-ignore lint/a11y/noAutofocus: expected\n autoFocus\n />\n
\n
\n \n );\n});\n\n// ============================================================================\n// Main Search Components\n// ============================================================================\n\ninterface SearchBoxProps {\n query?: string;\n className?: string;\n placeholder?: string;\n inputRef: React.RefObject;\n refine: (query: string) => void;\n onClose?: () => void;\n onArrowDown?: () => void;\n onArrowUp?: () => void;\n onEnter?: () => void;\n}\n\nconst SearchBox = memo(function SearchBox(props: SearchBoxProps) {\n return (\n {})}\n onEnter={props.onEnter}\n onArrowDown={props.onArrowDown}\n onArrowUp={props.onArrowUp}\n />\n );\n});\n\ninterface NoResultsProps {\n query: string;\n onClear: () => void;\n}\n\nconst NoResults = memo(function NoResults({ query, onClear }: NoResultsProps) {\n return (\n
\n
\n \n
\n

No results for "{query}"

\n

\n Try a different query or ask AI to help.\n

\n
\n \n
\n
\n );\n});\n\ninterface ResultsPanelProps {\n inputRef: React.RefObject;\n query: string;\n selectedIndex: number;\n refine: (query: string) => void;\n config: SearchConfig;\n onHoverIndex?: (index: number) => void;\n scrollOnSelectionChange?: boolean;\n sendEvent?: (\n eventType: \"click\",\n hit: Hit,\n eventName: string,\n ) => void;\n}\n\nconst ResultsPanel = memo(function ResultsPanel({\n query,\n selectedIndex,\n config,\n onHoverIndex,\n scrollOnSelectionChange = true,\n sendEvent,\n}: ResultsPanelProps) {\n const { items } = useHits(\n config.transformItems ? { transformItems: config.transformItems } : {},\n );\n const containerRef = useRef(null);\n const [hoverEnabled, setHoverEnabled] = useState(false);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: expected\n useEffect(() => {\n if (!scrollOnSelectionChange) return;\n const container = containerRef.current;\n if (!container) return;\n const selectedEl = container.querySelector(\n '[aria-selected=\"true\"]',\n ) as HTMLElement | null;\n if (!selectedEl) return;\n\n const padding = 8;\n const cRect = container.getBoundingClientRect();\n const iRect = selectedEl.getBoundingClientRect();\n\n if (iRect.top < cRect.top + padding) {\n container.scrollTop -= cRect.top + padding - iRect.top;\n } else if (iRect.bottom > cRect.bottom - padding) {\n container.scrollTop += iRect.bottom - (cRect.bottom - padding);\n }\n }, [selectedIndex, items.length, scrollOnSelectionChange]);\n\n // Enable hover selection only after the user moves the pointer inside the list\n useEffect(() => {\n const container = containerRef.current;\n if (!container) return;\n setHoverEnabled(false);\n const enable = () => setHoverEnabled(true);\n container.addEventListener(\"pointermove\", enable, { once: true } as any);\n return () => {\n container.removeEventListener(\"pointermove\", enable as any);\n };\n }, []);\n\n return (\n <>\n \n \n \n \n );\n});\n\ninterface SearchModalProps {\n onClose?: () => void;\n config: SearchConfig;\n}\n\nexport function SearchModal({ onClose, config }: SearchModalProps) {\n const { query, refine } = useSearchBox();\n const inputRef = useRef(null);\n\n const results = useInstantSearch();\n const { items, sendEvent } = useHits(\n config.transformItems ? { transformItems: config.transformItems } : {},\n );\n\n const noResults = results.results?.nbHits === 0;\n const {\n selectedIndex,\n moveDown,\n moveUp,\n activateSelection,\n hoverIndex,\n selectionOrigin,\n } = useKeyboardNavigation(items, query, config.openResultsInNewTab ?? true);\n\n const handleActivateSelection = useCallback((): boolean => {\n // Send click event for keyboard navigation before activating\n if (selectedIndex >= 0 && selectedIndex < items.length) {\n const hit = items[selectedIndex];\n if (hit) {\n sendEvent?.(\"click\", hit, \"Hit Clicked\");\n }\n }\n\n if (activateSelection()) {\n return true;\n }\n return false;\n }, [activateSelection, selectedIndex, items, sendEvent]);\n\n const showResultsPanel = !noResults && !!query;\n\n return (\n <>\n \n
\n \n {showResultsPanel && (\n \n )}\n {noResults && query && (\n {\n refine(\"\");\n if (inputRef.current) {\n inputRef.current.focus();\n }\n }}\n />\n )}\n
\n