Code Search

Search hits grouped by file, with the match marked inside its line. Ranges are clamped on render, because a wrong highlight is worse than none — it looks right.

src/components/ui/code-search.tsx

About

From the component's own source, where it was written.

Search hits grouped by file, with the match marked in its own line.

Matches carry a column range rather than pre-split strings, so the same result can be rendered here, counted, and jumped to in an editor without the caller keeping three shapes of the same data in sync.

Ranges are clamped on render. An off-by-one from a backend that counts columns from one would otherwise slice the line silently and show the wrong text — a wrong highlight is worse than no highlight, because it looks right.

Install

npx astralyx-ui add code-search

Usage

import { CodeSearch } from '@/components/ui/code-search'

<CodeSearch files={files} query="controlSize" onOpen={openInEditor} />

Composer

Change the props and the source below follows.

4 results in 2 files

68export const controlSize = {

238export const fieldSize = {

59 xs: `${controlSize.xs} ${buttonText.xs}`,

61 default: `${controlSize.md} ${buttonText.md}`,

Props

defaultCollapsed

tsx

<CodeSearch
  files={files}
  query="controlSize"
  defaultCollapsed={false}
/>

Examples

Results

tsx

<CodeSearch files={files} query="controlSize" />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`CodeSearch`

Extends Omit<ComponentProps<'div'>, 'onSelect'>.

Prop	Type	Default	Description
files	CodeSearchFile[]	required	`{ path, language?, matches }` where a match is `{ line, text, range? }`.
query	string	—	Fallback locator when a match carries no range.
defaultCollapsed	boolean	false	—
onOpen	(path: string, line: number) => void	—	Makes each hit a button — jump to the file in an editor.
empty	ReactNode	—	—

Types

`CodeMatch`

Search hits grouped by file, with the match marked in its own line.

Field	Type	Description
line	number	—
text	string	—
range?	[number, number]	0-based, end-exclusive, within the match text. Clamped on render so an off-by-one from a 1-based backend cannot silently mark the wrong span.

`CodeSearchFile`

Field	Type	Description
path	string	—
matches	CodeMatch[]	—
language?	string	—