notionsoft-ui 1.0.16 → 1.0.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "notionsoft-ui",
-  "version": "1.0.16",
+  "version": "1.0.17",
   "description": "A React UI component installer (shadcn-style). Installs components directly into your project.",
   "bin": {
     "notionsoft-ui": "./cli/index.cjs"

package/src/notion-ui/multi-select-input/multi-select-input.stories.tsx

@@ -57,7 +57,6 @@ const fetchUsers = async (
 ) => {
   let result = mockUsers;
 
-  // Apply filters
   if (filters) {
     result = result.filter((user) =>
       Object.entries(filters).every(([key, value]) =>
@@ -66,7 +65,6 @@ const fetchUsers = async (
     );
   }
 
-  // Apply search
   if (query) {
     const q = query.toLowerCase();
     result = result.filter(
@@ -75,10 +73,8 @@ const fetchUsers = async (
     );
   }
 
-  // Apply maxFetch
   if (maxFetch) result = result.slice(0, maxFetch);
 
-  // Simulate network delay
   await new Promise((r) => setTimeout(r, 300));
 
   return result;
@@ -146,3 +142,25 @@ SingleSelection.args = {
     clearFilters: "Clear Filters",
   },
 };
+
+// ------------------ API Config story ------------------
+export const APIConfigExample = Template.bind({});
+APIConfigExample.args = {
+  apiConfig: {
+    url: "https://jsonplaceholder.typicode.com/users",
+    headers: { "Content-Type": "application/json" },
+  },
+  selectionMode: "multiple",
+  searchBy: ["name", "email"],
+  filters: [
+    { key: "active", name: "Active" },
+    { key: "admin", name: "Admin" },
+  ],
+  itemKey: "id", // JSONPlaceholder uses `id` as key
+  text: {
+    fetch: "Fetching users from API...",
+    notItem: "No users found",
+    maxRecord: "Max results",
+    clearFilters: "Clear Filters",
+  },
+};

package/src/notion-ui/multi-select-input/multi-select-input.tsx

@@ -6,23 +6,33 @@ import React, {
   useState,
 } from "react";
 import { createPortal } from "react-dom";
-import { cn } from "../../utils/cn";
+import { buildNestedFiltersQuery, cn, useDebounce } from "../../utils/cn";
 import Input from "../input";
-import { Check, CheckCheck, Eraser, ListFilter, X } from "lucide-react";
+import { Check, Eraser, ListFilter, X } from "lucide-react";
 import CircleLoader from "../circle-loader";
 
 export interface FilterItem {
   key: string;
   name: string;
 }
+interface FetchConfig {
+  url: string;
+  headers?: Record<string, string>;
+  params?: string;
+}
 
-export interface MultiSelectInputProps<T = any>
-  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onSelect"> {
-  fetch: (
+export type MultiSelectInputProps<T = any> = Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  "onSelect"
+> & {
+  // Either `fetch` function OR `apiConfig` must be provided
+  fetch?: (
     value: string,
     filters?: Record<string, boolean>,
     maxFetch?: number
   ) => Promise<T[]>;
+  apiConfig?: FetchConfig;
+
   renderItem?: (item: T, selected?: boolean) => React.ReactNode;
   filters?: FilterItem[];
   onFiltersChange?: (filtersState: Record<string, boolean>) => void;
@@ -41,7 +51,17 @@ export interface MultiSelectInputProps<T = any>
   searchBy?: keyof T | (keyof T)[];
   itemKey?: keyof T;
   STORAGE_KEY?: string;
-}
+} & (
+    | {
+        fetch: (
+          value: string,
+          filters?: Record<string, boolean>,
+          maxFetch?: number
+        ) => Promise<T[]>;
+        apiConfig?: any;
+      }
+    | { apiConfig: FetchConfig; fetch?: any }
+  );
 
 function MultiSelectInputInner<T = any>(
   {
@@ -64,6 +84,7 @@ function MultiSelectInputInner<T = any>(
     onItemsSelect,
     searchBy,
     itemKey,
+    apiConfig,
     ...props
   }: MultiSelectInputProps<T>,
   ref: React.Ref<HTMLInputElement>
@@ -107,25 +128,55 @@ function MultiSelectInputInner<T = any>(
 
   const debouncedValue = useDebounce(inputValue, debounceValue);
 
-  // Fetch items
   useEffect(() => {
     const get = async () => {
       setIsFetching(true);
       try {
-        const data = await fetch(
-          debouncedValue,
-          filtersState,
-          maxFetch && !isNaN(Number(maxFetch)) ? Number(maxFetch) : undefined
-        );
+        let data: T[] = [];
+
+        if (fetch) {
+          // User-provided fetch function
+          data = await fetch(
+            debouncedValue,
+            filtersState,
+            maxFetch && !isNaN(Number(maxFetch)) ? Number(maxFetch) : undefined
+          );
+        } else if (apiConfig) {
+          // Only include active filters
+          const activeFilters = Object.fromEntries(
+            Object.entries(filtersState).filter(([_, v]) => v)
+          );
+
+          // Build nested filters query
+          const filtersQuery = buildNestedFiltersQuery(activeFilters);
+
+          const combinedParams = new URLSearchParams({
+            q: debouncedValue,
+            maxFetch: maxFetch?.toString() ?? "",
+            ...apiConfig.params,
+          }).toString();
+
+          const url = `${apiConfig.url}?${combinedParams}${
+            filtersQuery ? "&" + filtersQuery : ""
+          }`;
+
+          const res = await window.fetch(url, {
+            headers: apiConfig.headers,
+          });
+          data = await res.json();
+        }
+
         setItems(data);
-      } catch {
+      } catch (err: any) {
+        console.error(err);
         setItems([]);
       } finally {
         setIsFetching(false);
       }
     };
+
     get();
-  }, [debouncedValue, fetch, filtersState, maxFetch]);
+  }, [debouncedValue, fetch, apiConfig, filtersState, maxFetch]);
 
   // Update dropdown position
   const updatePosition = () => {
@@ -301,16 +352,6 @@ const MultiSelectInputForward = React.forwardRef(MultiSelectInputInner) as <
 
 export default MultiSelectInputForward;
 
-// ---------------- Debounce Hook ----------------
-export function useDebounce<T>(value: T, delay?: number): T {
-  const [debouncedValue, setDebouncedValue] = useState<T>(value);
-  useEffect(() => {
-    const timer = setTimeout(() => setDebouncedValue(value), delay || 500);
-    return () => clearTimeout(timer);
-  }, [value, delay]);
-  return debouncedValue;
-}
-
 // ---------------- Dropdown ----------------
 const Dropdown = <T,>(
   position: { top: number; left: number; width: number },

package/src/notion-ui/search-input/search-input.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
-import { cn } from "../../utils/cn";
+import { buildNestedFiltersQuery, cn, useDebounce } from "../../utils/cn";
 import Input from "../input";
 import { Eraser, ListFilter, X } from "lucide-react";
 import CircleLoader from "../circle-loader";
@@ -11,15 +11,14 @@ export interface FilterItem {
   key: string;
   name: string;
 }
-
+interface ApiConfig {
+  url: string;
+  headers?: Record<string, string>;
+  params?: Record<string, any>;
+}
 // Generic Props
-export interface SearchInputProps<T = { id: string; name: string }>
-  extends React.InputHTMLAttributes<HTMLInputElement> {
-  fetch: (
-    value: string,
-    filters?: Record<string, boolean>,
-    maxFetch?: number
-  ) => Promise<T[]>;
+export interface BaseSearchInputProps<T = { id: string; name: string }>
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onSelect"> {
   renderItem?: (item: T) => React.ReactNode;
   itemOnClick?: (item: T) => void;
   filters?: FilterItem[];
@@ -36,6 +35,27 @@ export interface SearchInputProps<T = { id: string; name: string }>
   STORAGE_KEY?: string;
 }
 
+// Either user provides `fetch` function...
+export interface FetchProps<T> extends BaseSearchInputProps<T> {
+  fetch: (
+    value: string,
+    filters?: Record<string, boolean>,
+    maxFetch?: number
+  ) => Promise<T[]>;
+  apiConfig?: never;
+}
+
+// ...or `apiConfig` object
+export interface ApiConfigProps<T> extends BaseSearchInputProps<T> {
+  fetch?: never;
+  apiConfig: ApiConfig;
+}
+
+// The final props type
+export type SearchInputProps<T = { id: string; name: string }> =
+  | FetchProps<T>
+  | ApiConfigProps<T>;
+
 // ✅ Generic forwardRef wrapper
 function SearchInputInner<T = { id: string; name: string }>(
   {
@@ -53,6 +73,7 @@ function SearchInputInner<T = { id: string; name: string }>(
     },
     endContent,
     STORAGE_KEY = "FILTER_STORAGE_KEY",
+    apiConfig,
     itemOnClick,
     ...props
   }: SearchInputProps<T>,
@@ -90,26 +111,51 @@ function SearchInputInner<T = { id: string; name: string }>(
     const get = async () => {
       setIsFetching(true);
       try {
-        const data = await fetch(
-          debouncedValue,
-          filtersState,
-          maxFetch && !isNaN(Number(maxFetch)) ? Number(maxFetch) : undefined
-        );
+        let data: T[] = [];
+
+        if (fetch) {
+          // User-provided fetch function
+          data = await fetch(
+            debouncedValue,
+            filtersState,
+            maxFetch && !isNaN(Number(maxFetch)) ? Number(maxFetch) : undefined
+          );
+        } else if (apiConfig) {
+          // Only include active filters
+          const activeFilters = Object.fromEntries(
+            Object.entries(filtersState).filter(([_, v]) => v)
+          );
+
+          // Build nested filters query
+          const filtersQuery = buildNestedFiltersQuery(activeFilters);
+
+          const combinedParams = new URLSearchParams({
+            q: debouncedValue,
+            maxFetch: maxFetch?.toString() ?? "",
+            ...apiConfig.params,
+          }).toString();
+
+          const url = `${apiConfig.url}?${combinedParams}${
+            filtersQuery ? "&" + filtersQuery : ""
+          }`;
+
+          const res = await window.fetch(url, {
+            headers: apiConfig.headers,
+          });
+          data = await res.json();
+        }
+
         setItems(data);
-      } catch (err) {
-        setItems([]);
+      } catch (err: any) {
         console.error(err);
+        setItems([]);
       } finally {
         setIsFetching(false);
       }
     };
-    if (
-      debouncedValue ||
-      debouncedValue === "" ||
-      Object.values(filtersState).some((v) => v)
-    )
-      get();
-  }, [debouncedValue, fetch, filtersState, maxFetch]);
+
+    get();
+  }, [debouncedValue, fetch, apiConfig, filtersState, maxFetch]);
 
   const updatePosition = () => {
     const el = containerRef.current;
@@ -246,16 +292,6 @@ const SearchInputForward = React.forwardRef(SearchInputInner) as <
 
 export default SearchInputForward;
 
-/* Debounce Hook */
-export function useDebounce<T>(value: T, delay?: number): T {
-  const [debouncedValue, setDebouncedValue] = useState<T>(value);
-  useEffect(() => {
-    const timer = setTimeout(() => setDebouncedValue(value), delay || 500);
-    return () => clearTimeout(timer);
-  }, [value, delay]);
-  return debouncedValue;
-}
-
 /* Dropdown */
 const Dropdown = <T,>(
   position: { top: number; left: number; width: number },

package/src/utils/cn.ts

@@ -1,4 +1,5 @@
 import { clsx } from "clsx";
+import { useEffect, useState } from "react";
 import { twMerge } from "tailwind-merge";
 
 /**
@@ -7,3 +8,28 @@ import { twMerge } from "tailwind-merge";
 export function cn(...inputs: Parameters<typeof clsx>) {
   return twMerge(clsx(...inputs));
 }
+export function buildNestedFiltersQuery(filters: Record<string, any>): string {
+  const params = new URLSearchParams();
+
+  function recurse(obj: Record<string, any>, prefix: string) {
+    Object.entries(obj).forEach(([key, value]) => {
+      const newKey = `${prefix}[${key}]`;
+      if (value && typeof value === "object") {
+        recurse(value, newKey);
+      } else if (value !== undefined && value !== null) {
+        params.append(newKey, value.toString());
+      }
+    });
+  }
+
+  recurse(filters, "filters");
+  return params.toString();
+}
+export function useDebounce<T>(value: T, delay?: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), delay || 500);
+    return () => clearTimeout(timer);
+  }, [value, delay]);
+  return debouncedValue;
+}