DEVREL-2698: Searching for Components (#25)

Author: tim-webflow

src/components/PermissionsMap.tsx

@@ -53,6 +53,7 @@ export const permissionsMap: PermissionsMap = {
     getAllComponents: { permissions: ['canAccessCanvas'] },
     getComponentByName: { permissions: ['canAccessCanvas'] },
     getComponentByNameAndGroup: { permissions: ['canAccessCanvas'] },
+    searchComponents: { permissions: ['canAccessCanvas'] },
     getInstanceCount: { permissions: ['canAccessCanvas'] },
     getVariants: { permissions: ['canAccessCanvas'] },
     getSelectedVariant: { permissions: ['canAccessCanvas'] },

src/designer-extension-typings/api.d.ts

@@ -185,6 +185,16 @@ interface WebflowApi {
    * ```
    */
   getComponentByName(a: string, b?: string): Promise<Component>;
+  /**
+   * Searches for Components by name
+   * @returns A Promise that resolves to an array or objects with information about matching Components, not the `Component` objects themselves.
+   * @example
+   * ```ts
+   * const heroes = await webflow.searchComponents({ q: 'Hero' });
+   * console.log(heroes);
+   * ```
+  */
+  searchComponents(options: SearchComponentsOptions?): Promise<Array<ComponentSearchResult>>
   /**
    * Gets the number of instances of a component.
    * @returns A Promise that resolves to the number of instances of the component across the entire site.

src/designer-extension-typings/components.d.ts

@@ -80,3 +80,21 @@ interface Variant {
   name: string;
   isSelected: boolean;
 }
+
+interface SearchComponentsOptions {
+  /** Fuzzy search query matching Component panel search behavior */
+  q?: string;
+}
+interface ComponentLibrary {
+  name: string;
+  id: string;
+}
+interface ComponentSearchResult {
+  id: string;
+  name: string;
+  group: string;
+  description: string;
+  instances: number;
+  canEdit: boolean;
+  library: ComponentLibrary | null;
+}

src/examples/components.ts

@@ -64,6 +64,11 @@ export const Components = {
     console.log(marketingHero.id);
   },
 
+  searchComponents: async () => {
+    const heroes = await webflow.searchComponents({ q: 'Hero' });
+    console.log(heroes);
+  },
+
   getInstanceCount: async () => {
     // Audit component usage across the site
     const components = await webflow.getAllComponents();