Merge pull request #2 from Studio384/1-search

Studio384 · web-flow · commit 3d587776c4fd · 2026-03-14T23:56:23.000+01:00
Search
diff --git a/docs/src/app/Docs/pages/Changelog.tsx b/docs/src/app/Docs/pages/Changelog.tsx
@@ -23,6 +23,7 @@ export default function Changelog() {
         docs={[
           'The documentation has been rebuilt with Tailwind and Base UI.',
           'The category filter now keeps showing empty categories for easier navigation.',
+          'The search function can now properly look for tags.',
           'Various categories have been updated and categories have been regrouped to make more sense.',
           'Major improvements to our documentation, including simpeler changelog markup.',
           'Fixes the bounce documentation not showing up in the documentation.'
diff --git a/docs/src/app/Docs/playground/Playground.tsx b/docs/src/app/Docs/playground/Playground.tsx
@@ -33,8 +33,6 @@ interface IPlaygroundProps {
 export default function Playground({ config }: IPlaygroundProps) {
   const [playgroundIcon, setPlaygroundIcon] = useState<string[]>([config.icons[0].name]);
 
-  console.log(config.icons, config.icons[0].name);
-
   // Get the icon name
   function getIconName(icon: string): string {
     return `ai${icon
diff --git a/docs/src/app/Icons.tsx b/docs/src/app/Icons.tsx
@@ -1,5 +1,4 @@
-import { useCallback, useMemo } from 'react';
-import { useSearchParams } from 'react-router';
+import { useMemo } from 'react';
 
 import categories from '@/data/categories';
 import icons from '@/data/icons';
@@ -8,82 +7,25 @@ import { IconCard } from '@/design/components/IconCard';
 import { Pagination } from '@/design/components/Pagination';
 import { Search } from '@/design/components/Search';
 import Header from '@/design/layout/LayoutElements/Header';
+import { useFilters } from '@/hooks/useFilters';
 import useSearch from '@/hooks/useSearch';
 import { ILibraryIcon } from '@/types';
 
 import Amicon, { aiFilterXmark, aiXmark } from '@studio384/amicons';
 import clsx from 'clsx';
 
 export default function Icons() {
-  const [searchParams, setSearchParams] = useSearchParams();
-
-  const [searchCategories, searchQuery, searchPage]: [string[], string, number] = useMemo(() => {
-    const categories = searchParams.get('category');
-    const query = searchParams.get('search');
-    const page = Number(searchParams.get('page') ?? 1);
-
-    return [categories?.split(',').filter((item) => item !== '') ?? [], query ?? '', page ?? 1];
-  }, [searchParams]);
+  const filters = useFilters();
 
   const searchableList = useMemo(() => {
-    if (searchCategories.length >= 1) {
-      return icons.filter((icon) => searchCategories.every((_searchCategory) => icon.categories.includes(_searchCategory as never)));
+    if (filters.query.categories.length >= 1) {
+      return icons.filter((icon) => filters.query.categories.every((_searchCategory) => icon.categories.includes(_searchCategory as never)));
     }
 
     return icons;
-  }, [searchCategories]);
-
-  const { result } = useSearch(searchableList, ['slug', 'tags'], searchQuery);
-
-  // c: categories
-  // q: query
-  // p: page
-  const setSearchQuery = useCallback(
-    (type: 'q' | 'c' | 'p', value: string | number) => {
-      let search = searchParams.get('search');
-      let page = Number(searchParams.get('page'));
-      let category =
-        searchParams
-          .get('category')
-          ?.split(',')
-          .filter((item) => item !== '') ?? [];
-
-      switch (type) {
-        case 'c': {
-          if (typeof value === 'number') return;
+  }, [filters.query.categories]);
 
-          if (category.includes(value)) {
-            category = category.filter((item) => item !== value);
-          } else {
-            category.push(value);
-          }
-
-          page = 1; // Always reset page
-          break;
-        }
-        case 'q': {
-          if (typeof value === 'number') return;
-
-          search = value;
-          page = 1; // Always reset page
-          break;
-        }
-        case 'p': {
-          if (typeof value === 'string') return;
-
-          page = value;
-          break;
-        }
-      }
-
-      setSearchParams({
-        page: (page || 1).toString(),
-        search: search ?? '',
-        category: category.join(',') ?? ''
-      });
-    },
-    [searchParams, setSearchParams]
-  );
+  const { result } = useSearch(searchableList, filters.query.search);
 
   return (
     <>
@@ -100,13 +42,13 @@ export default function Icons() {
                 return (
                   <button
                     key={_category.slug}
-                    onClick={() => setSearchQuery('c', _category.slug)}
-                    data-selected={searchCategories.includes(_category.slug) || undefined}
+                    onClick={() => filters.toggleCategory(_category.slug)}
+                    data-selected={filters.query.categories.includes(_category.slug) || undefined}
                     data-noicons={categoryIcons.length === 0 ? true : undefined}
                     className={clsx(
                       'group grid h-8 grid-cols-[min-content_auto_min-content] items-center gap-2 rounded-sm px-2.5 text-start text-sm hover:cursor-pointer hover:bg-violet-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-violet-500 data-selected:focus-visible:outline-violet-700',
                       {
-                        'bg-violet-500 text-white hover:bg-violet-600': searchCategories.includes(_category.slug)
+                        'bg-violet-500 text-white hover:bg-violet-600': filters.query.categories.includes(_category.slug)
                       }
                     )}
                   >
@@ -123,46 +65,41 @@ export default function Icons() {
               <div className="flex items-baseline gap-2">
                 <h2 className="font-display text-3xl font-medium">{result.length} icons</h2>
                 <span className="text-zinc-600">
-                  Page {searchPage} of {Math.ceil(result.length / 96)}
+                  Page {filters.query.page} of {Math.ceil(result.length / 96)}
                 </span>
               </div>
 
               <div className="flex gap-1">
-                <Search placeholder="Search" value={searchQuery} onValueChange={(value) => setSearchQuery('q', value)} />
+                <Search placeholder="Search" value={filters.searchValue} onValueChange={(value) => filters.setSearch(value)} />
                 <Button
                   icon
                   variant="secondary"
-                  disabled={searchQuery === '' && searchCategories.length === 0}
-                  onClick={() => {
-                    setSearchParams({
-                      search: '',
-                      category: ''
-                    });
-                  }}
+                  disabled={filters.searchValue === '' && filters.query.categories.length === 0}
+                  onClick={() => filters.resetQuery()}
                 >
                   <Amicon icon={aiFilterXmark} />
                 </Button>
               </div>
             </div>
-            {(searchQuery || searchCategories.length >= 1) && (
+            {(filters.query.search || filters.query.categories.length >= 1) && (
               <div className="flex gap-1">
-                {searchQuery && (
+                {filters.query.search && (
                   <div className="font-display flex items-center gap-1 rounded-full bg-zinc-100 py-1 ps-2.5 pe-1 text-sm">
-                    "{searchQuery}"
+                    "{filters.query.search}"
                     <button
                       className="text-md flex size-6 cursor-pointer items-center justify-center rounded-full bg-transparent hover:bg-zinc-300"
-                      onClick={() => setSearchQuery('q', '')}
+                      onClick={() => filters.setSearch('')}
                     >
                       <Amicon icon={aiXmark} /> <span className="sr-only">Delete category</span>
                     </button>
                   </div>
                 )}
-                {searchCategories.map((category) => (
+                {filters.query.categories.map((category) => (
                   <div key={category} className="font-display flex items-center gap-1 rounded-full bg-zinc-100 py-1 ps-2.5 pe-1 text-sm">
                     {category}
                     <button
                       className="text-md flex size-6 cursor-pointer items-center justify-center rounded-full bg-transparent hover:bg-zinc-300"
-                      onClick={() => setSearchQuery('c', category)}
+                      onClick={() => filters.toggleCategory(category)}
                     >
                       <Amicon icon={aiXmark} /> <span className="sr-only">Delete category</span>
                     </button>
@@ -171,12 +108,12 @@ export default function Icons() {
               </div>
             )}
             <div className="grid grid-cols-[repeat(auto-fill,minmax(min(9rem,100%),1fr))] gap-2">
-              {result.slice((searchPage - 1) * 96, searchPage * 96).map((icon: ILibraryIcon) => (
+              {result.slice((filters.query.page - 1) * 96, filters.query.page * 96).map((icon: ILibraryIcon) => (
                 <IconCard key={icon.slug} icon={icon} />
               ))}
             </div>
 
-            {result.length > 0 && <Pagination count={Math.ceil(result.length / 96)} page={searchPage} onChange={(_, page) => setSearchQuery('p', page)} />}
+            {result.length > 0 && <Pagination count={Math.ceil(result.length / 96)} page={filters.query.page} onChange={(_, page) => filters.setPage(page)} />}
           </div>
         </div>
       </div>
diff --git a/docs/src/hooks/useFilters.ts b/docs/src/hooks/useFilters.ts
@@ -0,0 +1,95 @@
+import { useCallback, useMemo, useState } from 'react';
+import { useSearchParams } from 'react-router';
+
+import { useDebouncedCallback } from '@tanstack/react-pacer';
+
+export function useFilters() {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const initial = {
+    page: 1,
+    search: '',
+    categories: [] as string[]
+  };
+
+  const [searchValue, setSearchValue] = useState('');
+
+  const query = useMemo(() => {
+    const page = Number(searchParams.get('page') ?? initial.page);
+    const search = searchParams.get('search') ?? initial.search;
+    const categories = searchParams.getAll('categories');
+
+    return { page, search, categories };
+  }, [searchParams]);
+
+  const debouncedUpdate = useDebouncedCallback(
+    (updater: (params: URLSearchParams) => void) => {
+      setSearchParams((prev) => {
+        const next = new URLSearchParams(prev);
+        updater(next);
+        return next;
+      });
+    },
+    { wait: 300 }
+  );
+
+  const setPage = useCallback(
+    (page: number) => {
+      debouncedUpdate((params) => params.set('page', String(page)));
+    },
+    [debouncedUpdate]
+  );
+
+  const setSearch = useCallback(
+    (value: string) => {
+      setSearchValue(value);
+      debouncedUpdate((params) => {
+        params.set('page', '1');
+        if (value) {
+          params.set('search', value);
+        } else {
+          params.delete('search');
+        }
+      });
+    },
+    [debouncedUpdate]
+  );
+
+  const toggleCategory = useCallback(
+    (category: string) => {
+      debouncedUpdate((params) => {
+        params.set('page', '1');
+
+        const current = params.getAll('categories');
+        const exists = current.includes(category);
+
+        params.delete('categories');
+
+        const nextValue = exists ? current.filter((_category) => _category !== category) : [...current, category];
+
+        nextValue.forEach((_category) => params.append('categories', _category));
+      });
+    },
+    [debouncedUpdate]
+  );
+
+  const resetQuery = useCallback(() => {
+    debouncedUpdate((params) => {
+      params.set('page', String(initial.page));
+
+      params.delete('search');
+      params.delete('page');
+      params.delete('categories');
+      setSearchValue('');
+    });
+  }, [debouncedUpdate]);
+
+  return {
+    query,
+    searchValue,
+    setPage,
+    setSearch,
+    toggleCategory,
+    resetQuery
+  };
+}
diff --git a/docs/src/hooks/useSearch.ts b/docs/src/hooks/useSearch.ts
@@ -1,29 +1,30 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import { useCallback, useMemo } from 'react';
 
+import { IAmicon } from '@studio384/amicons';
+
 interface ISeachResults {
-  [key: string]: any;
+  categories: string[];
+  component: string;
+  icon: IAmicon;
+  slug: string;
+  tags: string[];
   _score: number;
 }
 
-export default function useSearch(haystack: any[] | undefined, keys: string[], needle: string) {
-  const flattenObject = useCallback((item: { [key: string]: any }, prefix?: string) => {
-    const flattened: { [key: string]: any } = {};
-    prefix = prefix ? prefix + '.' : '';
-
-    for (const key in item) {
-      if (typeof item[key] === 'object' && item[key] !== null) {
-        Object.assign(flattened, flattenObject(item[key], prefix + key));
-      } else {
-        flattened[prefix + key] = item[key];
-      }
-    }
-
-    return flattened;
-  }, []);
-
-  const scoreHaystackItem = useCallback((item: string, query: string) => {
-    const searchable = item.toString().toLowerCase().trim();
+export default function useSearch(
+  iconLibrary:
+    | {
+        categories: string[];
+        component: string;
+        icon: IAmicon;
+        slug: string;
+        tags: string[];
+      }[]
+    | undefined,
+  needle: string
+) {
+  const scoreIcon = useCallback((value: string, query: string) => {
+    const searchable = value.toString().toLowerCase().trim();
 
     // Check if the string is an exact match to this partial search query
     if (searchable === query) {
@@ -45,32 +46,34 @@ export default function useSearch(haystack: any[] | undefined, keys: string[], n
 
   const result = useMemo(() => {
     if (needle === '') {
-      return haystack || [];
+      return iconLibrary || [];
     }
 
     const results: ISeachResults[] = [];
     const cleanNeedle = needle.trim().toLowerCase();
 
     // Loop through the haystack
-    (haystack || []).map((item) => {
-      const flatItem: { [key: string]: any } = flattenObject(item);
+    (iconLibrary || []).map((icon) => {
       let matchScore = 0;
 
-      keys.forEach((key) => {
-        if (flatItem[key]) {
-          // Do a 1:1 comparison between all searchable items
-          matchScore += scoreHaystackItem(flatItem[key], cleanNeedle);
-        }
+      if (icon.slug) {
+        // Do a 1:1 comparison between all searchable items
+        matchScore += scoreIcon(icon.slug, cleanNeedle);
+        matchScore += scoreIcon(icon.slug.replaceAll('-', ' '), cleanNeedle);
+      }
+
+      icon.tags.map((tag) => {
+        matchScore += scoreIcon(tag, cleanNeedle);
       });
 
       // If we have a score, set it
       if (matchScore) {
-        results.push({ ...item, _score: matchScore });
+        results.push({ ...icon, _score: matchScore });
       }
     });
 
     return results.sort((a, b) => (a._score < b._score ? -1 : 1));
-  }, [flattenObject, haystack, keys, needle, scoreHaystackItem]);
+  }, [iconLibrary, needle, scoreIcon]);
 
   return { result, needle };
 }
