feat(site): Search (#34)

Author: elementbound

addons/plenticons/plugin.cfg

@@ -3,5 +3,5 @@
 name="plenticons"
 description="A library of icons for your custom nodes!"
 author="Tamás Gálffy"
-version="1.6.0"
+version="1.7.0"
 script="plenticons.gd"

site/bun.lockb

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "minimatch": "^10.1.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0"
   },

site/package.json

@@ -3,6 +3,7 @@ import { IconCardContainer } from "./IconCardContainer"
 import { DefaultVariant, type Category } from "./plenticons"
 import { Toolbar } from "./Toolbar"
 import { IconModal } from "./IconModal"
+import { SearchBar } from "./SearchBar"
 
 function Header() {
   return (
@@ -32,12 +33,19 @@ interface ModalState {
 function App() {
   const [variant, setVariant] = useState(DefaultVariant);
   const [modal, setModal] = useState<ModalState | undefined>(undefined);
+  const [search, setSearch] = useState<string | undefined>(undefined);
 
   return (
     <>
       <Header/>
-      <Toolbar onVariant={setVariant}/>
-      <IconCardContainer variant={variant} onIcon={(category: Category, name: string) => setModal({ category, name })} />
+      <Toolbar onVariant={setVariant}>
+        <SearchBar onChange={setSearch} />
+      </Toolbar>
+      <IconCardContainer
+        variant={variant}
+        search={search}
+        onIcon={(category: Category, name: string) => setModal({ category, name })}
+      />
       { modal && <IconModal category={modal.category} name={modal.name} variant={variant} onClose={() => setModal(undefined)}/>}
     </>
   )

site/src/App.tsx

@@ -1,21 +1,38 @@
 import { IconCard } from "./IconCard";
 import { manifest, unslug, type Category, type Variant } from "./plenticons";
+import { synonyms } from "./synonyms";
 
-export function IconCardContainer(props: {variant: Variant, onIcon?: (category: Category, name: string) => void}) {
+export interface IconCardContainerProps {
+  variant: Variant,
+  search?: string,
+  onIcon?: (category: Category, name: string) => void,
+}
+
+export function IconCardContainer(props: IconCardContainerProps) {
   return (
       <div className="icon-card-container">
         {Object.entries(manifest.icons).map(([category, icons]) => (
           <div key={category}>
             <h3>{unslug(category)}</h3>
-            {icons.map(icon =>
-              <IconCard
-                key={`${category}/${icon}`}
-                category={category} name={icon} variant={props.variant}
-                onClick={ () => props.onIcon && props.onIcon(category, icon)}
-              />
-            )}
+            {icons
+              .filter(icon => !props.search || searchString(category, icon).includes(props.search))
+              .map(icon =>
+                <IconCard
+                  key={`${category}/${icon}`}
+                  category={category} name={icon} variant={props.variant}
+                  onClick={ () => props.onIcon && props.onIcon(category, icon)}
+                />
+              )}
           </div>
         )) }
       </div>
   )
 }
+
+function searchString(category: string, name: string): string {
+  return [
+    unslug(category),
+    name,
+    ...(synonyms[`${category}/${name}`] ?? [])
+  ].join(" ").toLowerCase();
+}

site/src/IconCardContainer.tsx

@@ -0,0 +1,14 @@
+export interface SearchBarProps {
+  onChange?: (value: string) => void
+}
+
+export function SearchBar(props: SearchBarProps) {
+  return <div className="searchbar">
+    <img src="./icons/objects/magnifying-glass-gray.svg" alt="search"></img>
+    <input 
+      type="text" 
+      placeholder="Search icons"
+      onChange={e => props.onChange?.call(undefined, e.target.value)}
+    />
+  </div>;
+}

site/src/SearchBar.tsx

@@ -1,9 +1,17 @@
+import type { ReactNode } from "react";
 import { icons, type Variant } from "./plenticons";
 import { VariantPicker } from "./VariantPicker";
 
-export function Toolbar(props: { onVariant: (variant: Variant) => void}) {
+export interface ToolbarProps {
+  onVariant: (variant: Variant) => void,
+  children: ReactNode[]
+}
+
+export function Toolbar(props: ToolbarProps) {
   return (
     <div className="toolbar">
+      {props.children}
+
       <VariantPicker onVariant={props.onVariant}/>
       <a href="https://discord.gg/xWGh4GskG5" target="_blank">
         <button><img src={icons.discord} />Discord</button>

site/src/Toolbar.tsx

@@ -230,3 +230,16 @@ img.icon-inline {
   text-align: right;
   position: relative;
 }
+
+.searchbar {
+  display: flex;
+  align-items: center;
+  padding: 2pt;
+  margin: 2pt;
+  width: 100%;
+  background-color: var(--godot-dark);
+}
+
+.searchbar > input {
+  flex-grow: 1;
+}

site/src/index.css

@@ -0,0 +1,95 @@
+import { Minimatch } from "minimatch";
+import { manifest, type Manifest } from "./plenticons";
+
+export type Synonyms = Record<string, string[]>;
+
+function makeSynonyms(manifest: Manifest, spec: [string | string[], string | string[]][]): Synonyms {
+  const result: Synonyms = {}
+  const iconNames = Object.entries(manifest.icons)
+    .flatMap(([category, icons]) => icons.map(icon => `${category}/${icon}`))
+
+  for (const entry of spec) {
+    const patterns = typeof entry[0] == "string" ? [entry[0]] : entry[0];
+    const synonyms = typeof entry[1] == "string" ? [entry[1]] : entry[1];
+
+    for (const pattern of patterns) {
+      // Find matching icons
+      const matcher = new Minimatch(pattern);
+      const matches = iconNames.filter(it => matcher.match(it))
+
+      // Warn if pattern doesn't match - probably spec error
+      if (matches.length == 0)
+        console.warn(`Pattern "${pattern}" didn't match any icons!`)
+
+      // Add synonyms to each icon
+      for (const icon of matches) {
+        result[icon] = [...(result[icon] ?? []), ...synonyms]
+      }
+    }
+  }
+
+  return result
+}
+
+export const synonyms = makeSynonyms(manifest, [
+  // 2D
+  ["2d/checkmark", [ "tick", "tickmark", "ok", "done", "yes" ]],
+  ["2d/circle", [ "ok", "round" ]],
+  ["2d/cross", [ "no", "deny", "ban", "cancel" ]],
+  ["2d/square", [ "cube", "box" ]],
+
+  ["2d/triangle*", ["cone"]],
+  ["*/die*", [ "dice", "random", "chance", "throwing" ]],
+  ["2d/*-chevron-*", [ "arrow", "direction" ]],
+
+  ["2d/plus", [ "add" ]],
+  ["2d/spark*", [ "star" ]],
+
+  // 3D
+  ["3d/cone", [ "triangle" ]],
+  ["3d/cube", [ "square", "box" ]],
+  ["3d/sphere", [ "circle", "round" ]],
+
+  // Creatures
+  ["creatures/bug", [ "insect", "roach", "tick" ]],
+  ["creatures/demon", [ "monster", "enemy", "foe", "evil" ]],
+  ["creatures/eye-closed", [ "invisible", "blind", "shut" ]],
+  [["creatures/eye-hollow", "creatures/eye"], [ "see", "watch", "visible", "open" ]],
+
+  ["creatures/heart*", [ "life", "lives", "health", "love" ]],
+  
+  ["creatures/person", [ "human", "man", "woman", "guy", "gal", "boy", "girl" ]],
+
+  // Objects
+  ["objects/ammo", [ "shells" ]],
+  ["objects/axe", [ "hatchet", "timber", "lumber", "wood" ]],
+  ["objects/bell", [ "notification", "alert" ]],
+  [["objects/bill", "objects/coins"], [ "money", "currency", "dollars", "euros" ]],
+  ["objects/cd", [ "dvd" ]],
+  ["objects/chain", [ "link", "anchor", "reference" ]],
+  ["objects/chest", [ "box", "treasure", "booty" ]],
+  ["objects/clock", [ "watch", "time" ]],
+  ["objects/floppy", [ "save" ]],
+  ["objects/globe", [ "planet", "earth", "global", "internet", "web", "www" ]],
+  ["objects/gun", [ "weapon", "arm" ]],
+  ["objects/hammer", [ "build" ]],
+  ["objects/hourglass", [ "time" ]],
+  ["objects/key", [ "password", "open", "access" ]],
+  ["objects/lightbulb", [ "idea", "new", "create" ]],
+  ["objects/lightning", [ "fast", "speed", "measure", "benchmark" ]],
+  ["objects/magnifying-glass", [ "search", "find" ]],
+  ["objects/pickaxe", [ "mine", "mining" ]],
+  ["objects/shield", [ "protect", "armor", "safe", "security" ]],
+  ["objects/stopwatch", [ "time", "measure", "benchmark", "speed", "fast" ]],
+  ["objects/sword*", [ "fight", "army", "war", "battle", "force" ]],
+  ["objects/trashcan", [ "delete", "clear", "remove", "erase", "recycle", "bin" ]],
+
+  [["objects/vial", "objects/*-flask"], ["vial", "flask", "bottle"]],
+  ["objects/conical-flask", ["experiment", "chemistry", "chemical"]],
+
+  // Symbols
+  ["symbols/crosshair", [ "aim" ]],
+  ["symbols/jump-to", [ "go to", "goto" ]],
+  ["symbols/refresh", [ "reload" ]],
+  ["symbols/todo", [ "list" ]]
+])