BricksLab Catalog

@brickslab/ui-web

Dropdown de résultats de recherche pour filtrer et naviguer les composants du catalogue. Composant personnalisé du catalogue qui affiche des résultats avec description et section.

Caractéristiques

Recherche multi-critères : Filtre par nom, section et description
Position absolute : S'affiche sous le champ de recherche parent
Résultats cliquables : Navigation directe vers la page du composant
Hover effects : Background change au survol pour meilleure UX
Max height : 500px avec overflow scroll pour longs résultats
Shadow dropdown : Box-shadow pour profondeur visuelle
Responsive : S'adapte automatiquement à la largeur du parent

Props

Prop	Type	Défaut	Requis	Description
`query`	`string`	—	✓	Terme de recherche pour filtrer les composants. Vide si aucun résultat.
`onClose`	`() => void`	—	✓	Callback appelé pour fermer le dropdown (réinitialise la recherche).

Démonstration interactive

Testez la recherche ci-dessous

Comportement

Affichage:

Masqué si query est vide ou aucun résultat
Visible quand des correspondances sont trouvées
Chaque résultat affiche: nom (bold), description et section

Interaction:

Cliquer sur un résultat navigue vers la page du composant
Appeler onClose() réinitialise la recherche et ferme le dropdown
Hover sur un résultat change le background

Utilisation

tsx

import { SearchResults } from "@brickslab/catalog";
import { useState } from "react";

export default function SearchDemo() {
  const [query, setQuery] = useState("");

  return (
    <div style={{ position: "relative" }}>
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search components..."
      />
      <SearchResults
        query={query}
        onClose={() => setQuery("")}
      />
    </div>
  );
}

Notes

⚠️ SearchResults est un composant du catalogue qui dépend de searchComponents() de components.data.ts, qui est auto-généré depuis le fichier components.csv. La recherche est instantaneous et côté client.