Merge pull request #18 from author-more/feat/improve-search-wildcard

feat: add wildcard search

src/App.tsx

@@ -18,6 +18,7 @@ import LinkTag from "./LinkTag";
 import { toSortedBy } from "./sort";
 import { Bug, ChevronDown, ChevronRight, Lightbulb } from "lucide-react";
 import { sendMessage } from "./window";
+import { filterByPhrase } from "./search";
 
 function App() {
   const url = new URL(window.location.href);
@@ -103,9 +104,7 @@ function App() {
     const { library } = metadata;
 
     return Object.entries(icons)
-      .filter(([name]) => {
-        return name.toLowerCase().includes(searchPhrase.toLowerCase());
-      })
+      .filter(([name]) => filterByPhrase(searchPhrase, name))
       .map(
         ([
           name,

src/search.ts

@@ -0,0 +1,19 @@
+export function filterByPhrase(phrase: string, content: string) {
+  const phraseNormalised = phrase?.toLowerCase();
+  const contentNormalised = content?.toLowerCase();
+
+  const pattern = phraseNormalised
+    .split(" ")
+    .map(
+      (subPhrase) =>
+        `\\b(${subPhrase
+          .split("")
+          // Escape RegExp's special characters
+          .map((char) => char.replace(/[\\^$.*+?()[\]{}|]/g, "\\$&"))
+          .join("\\w*")}\\w*)\\b`,
+    )
+    .join(".*");
+  const regexp = new RegExp(pattern, "gi");
+
+  return regexp.test(contentNormalised);
+}

tests/search.spec.ts

@@ -10,7 +10,7 @@ test.describe("search", () => {
     await expect(input).toBeVisible();
   });
 
-  test("filters icons by phrase", async ({ page }) => {
+  test("filters icons by phrase - complete", async ({ page }) => {
     const iconSetToggleButton = page.getByRole("button", {
       name: /Show Lucide icon set/,
     });
@@ -28,4 +28,23 @@ test.describe("search", () => {
     expect(await iconButtons.count()).toEqual(1);
     expect(await iconButtons.textContent()).toContain("Insert icon: pickaxe");
   });
+
+  test("filters icons by phrase - wildcard", async ({ page }) => {
+    const iconSetToggleButton = page.getByRole("button", {
+      name: /Show Lucide icon set/,
+    });
+    await iconSetToggleButton.click();
+
+    const iconButtons = page.getByRole("button", { name: /(Insert icon:).*/ });
+    await iconButtons.first().waitFor({ state: "visible" });
+
+    expect(await iconButtons.count()).toBeGreaterThan(1);
+
+    const input = page.getByLabel("Search icon");
+    await input.fill("pkxe");
+
+    await iconButtons.first().waitFor({ state: "visible" });
+    expect(await iconButtons.count()).toEqual(1);
+    expect(await iconButtons.textContent()).toContain("Insert icon: pickaxe");
+  });
 });