notionsoft-ui 1.0.15 → 1.0.17

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

@@ -0,0 +1,425 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { buildNestedFiltersQuery, cn, useDebounce } from "../../utils/cn";
+import Input from "../input";
+import { Eraser, ListFilter, X } from "lucide-react";
+import CircleLoader from "../circle-loader";
+
+export type NastranInputSize = "sm" | "md" | "lg";
+
+export interface FilterItem {
+  key: string;
+  name: string;
+}
+interface ApiConfig {
+  url: string;
+  headers?: Record<string, string>;
+  params?: Record<string, any>;
+}
+// Generic Props
+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[];
+  onFiltersChange?: (filtersState: Record<string, boolean>) => void;
+  debounceValue?: number;
+  parentClassName?: string;
+  text?: {
+    fetch?: string;
+    notItem?: string;
+    maxRecord?: string;
+    clearFilters?: string;
+  };
+  endContent?: React.ReactNode;
+  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 }>(
+  {
+    fetch,
+    renderItem,
+    filters = [],
+    onFiltersChange,
+    debounceValue = 500,
+    parentClassName,
+    text = {
+      fetch: "Fetching...",
+      notItem: "No results found",
+      maxRecord: "Max records",
+      clearFilters: "Clear Filters",
+    },
+    endContent,
+    STORAGE_KEY = "FILTER_STORAGE_KEY",
+    apiConfig,
+    itemOnClick,
+    ...props
+  }: SearchInputProps<T>,
+  ref: React.Ref<HTMLInputElement>
+) {
+  const [inputValue, setInputValue] = useState("");
+  const [isFocused, setIsFocused] = useState(false);
+  const [showFilters, setShowFilters] = useState(false);
+  const [isFetching, setIsFetching] = useState(false);
+  const [position, setPosition] = useState({ top: 0, left: 0, width: 0 });
+  const [items, setItems] = useState<T[]>([]);
+
+  const [filtersState, setFiltersState] = useState<Record<string, boolean>>(
+    () => {
+      const saved = localStorage.getItem(STORAGE_KEY);
+      if (saved) return JSON.parse(saved);
+      return filters.reduce((acc, f) => ({ ...acc, [f.key]: false }), {});
+    }
+  );
+
+  const [maxFetch, setMaxFetch] = useState<number | "">(() => {
+    const saved = localStorage.getItem(`${STORAGE_KEY}_MAX_FETCH`);
+    return saved ? Number(saved) : "";
+  });
+
+  const inputRef = useRef<HTMLInputElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const debouncedValue = useDebounce(inputValue, debounceValue);
+
+  // Fetch items
+  useEffect(() => {
+    const get = async () => {
+      setIsFetching(true);
+      try {
+        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: any) {
+        console.error(err);
+        setItems([]);
+      } finally {
+        setIsFetching(false);
+      }
+    };
+
+    get();
+  }, [debouncedValue, fetch, apiConfig, filtersState, maxFetch]);
+
+  const updatePosition = () => {
+    const el = containerRef.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    setPosition({
+      top: rect.bottom + window.scrollY,
+      left: rect.left + window.scrollX,
+      width: rect.width,
+    });
+  };
+
+  useEffect(() => {
+    const el = inputRef.current;
+    if (!el) return;
+    const handleFocus = () => {
+      setIsFocused(true);
+      setShowFilters(false);
+      updatePosition();
+    };
+    el.addEventListener("focus", handleFocus);
+    return () => el.removeEventListener("focus", handleFocus);
+  }, []);
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (!wrapperRef.current || !dropdownRef.current) return;
+      if (
+        !wrapperRef.current.contains(e.target as Node) &&
+        !dropdownRef.current.contains(e.target as Node)
+      ) {
+        setIsFocused(false);
+        setShowFilters(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  useEffect(() => {
+    if (!isFocused && !showFilters) return;
+    updatePosition();
+    window.addEventListener("resize", updatePosition);
+    window.addEventListener("scroll", updatePosition, true);
+    return () => {
+      window.removeEventListener("resize", updatePosition);
+      window.removeEventListener("scroll", updatePosition, true);
+    };
+  }, [isFocused, showFilters]);
+
+  const clearIcon = (
+    <X
+      onClick={() => setInputValue("")}
+      className="hover:bg-tertiary/10 hover:text-tertiary size-[38px] p-3 cursor-pointer text-primary/60 rounded transition-colors"
+    />
+  );
+  const endIcon = endContent ?? clearIcon;
+
+  const handleFilterChange = (key: string, value: boolean) => {
+    setFiltersState((prev) => {
+      const next = { ...prev, [key]: value };
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(next));
+      onFiltersChange?.(next);
+      return next;
+    });
+  };
+
+  const inputOnChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      setInputValue(e.target.value);
+    },
+    []
+  );
+
+  const dropdown =
+    isFocused || showFilters
+      ? Dropdown(
+          position,
+          isFetching,
+          text,
+          filters,
+          filtersState,
+          showFilters,
+          handleFilterChange,
+          items,
+          renderItem,
+          dropdownRef,
+          maxFetch,
+          setMaxFetch,
+          STORAGE_KEY,
+          onFiltersChange
+        )
+      : null;
+
+  return (
+    <div ref={wrapperRef}>
+      <div ref={containerRef} className={cn("w-full", parentClassName)}>
+        <Input
+          ref={ref || inputRef}
+          {...props}
+          value={inputValue}
+          onChange={inputOnChange}
+          endContent={
+            <div className="flex items-center gap-1 relative ltr:-right-1 rtl:-left-1">
+              {isFocused && endIcon}
+              {filters.length != 0 && (
+                <ListFilter
+                  onClick={() => {
+                    updatePosition();
+                    setShowFilters((prev) => !prev);
+                    setIsFocused(false);
+                  }}
+                  className={cn(
+                    "text-primary/50 hover:bg-tertiary/10 hover:text-tertiary size-[38px] p-3 cursor-pointer rounded transition-colors",
+                    showFilters && "text-tertiary"
+                  )}
+                />
+              )}
+            </div>
+          }
+        />
+      </div>
+      {dropdown}
+    </div>
+  );
+}
+
+// Wrap with forwardRef and generic
+const SearchInputForward = React.forwardRef(SearchInputInner) as <
+  T = { id: string; name: string }
+>(
+  props: SearchInputProps<T> & { ref?: React.Ref<HTMLInputElement> }
+) => React.ReactElement;
+
+export default SearchInputForward;
+
+/* Dropdown */
+const Dropdown = <T,>(
+  position: { top: number; left: number; width: number },
+  isFetching: boolean,
+  text: {
+    fetch?: string;
+    notItem?: string;
+    maxRecord?: string;
+    clearFilters?: string;
+  },
+  filters: FilterItem[],
+  filtersState: Record<string, boolean>,
+  showFilters: boolean | undefined,
+  handleFilterChange: (key: string, value: boolean) => void,
+  items: T[],
+  renderItem?: (item: T) => React.ReactNode,
+  dropdownRef?: React.Ref<HTMLDivElement>,
+  maxFetch?: number | "",
+  setMaxFetch?: React.Dispatch<React.SetStateAction<number | "">>,
+  STORAGE_KEY?: string,
+  onFiltersChange?: (filtersState: Record<string, boolean>) => void,
+  itemOnClick?: (item: T) => void
+) =>
+  createPortal(
+    <div
+      ref={dropdownRef}
+      className="absolute z-9999 border border-border rounded-b bg-card shadow-lg pt-3 pb-2"
+      style={{
+        top: position.top,
+        left: position.left,
+        width: position.width,
+        position: "absolute",
+      }}
+    >
+      {showFilters && filters.length > 0 && (
+        <div className="pb-3 px-3 flex flex-col gap-2 text-sm">
+          {filters.map((f) => (
+            <label key={f.key} className={`flex items-center gap-2`}>
+              <input
+                type="checkbox"
+                checked={filtersState[f.key]}
+                onChange={(e) => handleFilterChange(f.key, e.target.checked)}
+              />
+              {f.name}
+            </label>
+          ))}
+
+          {/* Max fetch input */}
+          {setMaxFetch && (
+            <input
+              type="number"
+              min={1}
+              value={maxFetch}
+              onChange={(e) => {
+                const value = e.target.value ? Number(e.target.value) : "";
+                setMaxFetch(value);
+                if (STORAGE_KEY)
+                  localStorage.setItem(
+                    `${STORAGE_KEY}_MAX_FETCH`,
+                    JSON.stringify(value)
+                  );
+              }}
+              className={cn(
+                "selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex w-full min-w-0 rounded border bg-transparent px-1 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+                "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+                "appearance-none placeholder:text-primary/60 ltr:text-sm rtl:text-sm rtl:font-semibold focus-visible:ring-0 focus-visible:shadow-sm focus-visible:ring-offset-0 transition-[border] bg-card dark:bg-black/30",
+                "focus-visible:border-tertiary/60",
+                "[&::-webkit-outer-spin-button]:appearance-none",
+                "[&::-webkit-inner-spin-button]:appearance-none",
+                "[-moz-appearance:textfield] "
+              )}
+              placeholder={text.maxRecord}
+            />
+          )}
+
+          {/* Clear filters button */}
+          {STORAGE_KEY && setMaxFetch && (
+            <button
+              onClick={() => {
+                const cleared = filters.reduce(
+                  (acc, f) => ({ ...acc, [f.key]: false }),
+                  {}
+                );
+                handleFilterChange &&
+                  Object.keys(cleared).forEach((key) =>
+                    handleFilterChange(key, false)
+                  );
+                localStorage.setItem(STORAGE_KEY, JSON.stringify(cleared));
+                setMaxFetch("");
+                localStorage.removeItem(`${STORAGE_KEY}_MAX_FETCH`);
+                onFiltersChange?.(cleared);
+              }}
+              className="mt-2 flex items-center gap-x-1 text-sm cursor-pointer w-fit mx-auto text-red-600/90 hover:text-red-600"
+            >
+              <Eraser className="size-4" />
+              {text.clearFilters}
+            </button>
+          )}
+        </div>
+      )}
+
+      {!showFilters && isFetching && <CircleLoader label={text.fetch} />}
+
+      {!showFilters && !isFetching && (
+        <div className="max-h-60 overflow-auto">
+          {items.length > 0 ? (
+            items.map((item, index) =>
+              renderItem ? (
+                renderItem(item)
+              ) : (
+                <div
+                  onClick={() => {
+                    if (itemOnClick) itemOnClick(item);
+                  }}
+                  key={(item as any).id ?? index}
+                  className="px-3 py-1 hover:bg-gray-100 cursor-pointer"
+                >
+                  {(item as any).name ?? JSON.stringify(item)}
+                </div>
+              )
+            )
+          ) : (
+            <div className="text-center text-sm text-gray-500">
+              {text.notItem}
+            </div>
+          )}
+        </div>
+      )}
+    </div>,
+    document.body
+  );

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

@@ -0,0 +1,131 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import SearchInput from "./index";
+import { FilterItem } from "@/components/notion-ui/search-input/search-input";
+
+const meta: Meta<typeof SearchInput> = {
+  title: "Form/SearchInput",
+  component: SearchInput,
+  parameters: { layout: "centered" },
+};
+export default meta;
+type Story = StoryObj<typeof SearchInput>;
+
+// --- Shared Filters & Mock Fetch ---
+const fruitFilters: FilterItem[] = [
+  { key: "red", name: "Red Fruits" },
+  { key: "yellow", name: "Yellow Fruits" },
+  { key: "citrus", name: "Citrus Fruits" },
+];
+
+const mockFetch = async (
+  value: string,
+  filters?: Record<string, boolean>,
+  maxFetch?: number
+) => {
+  const data = [
+    { id: "1", name: "Apple" },
+    { id: "2", name: "Banana" },
+    { id: "3", name: "Orange" },
+    { id: "4", name: "Grapes" },
+    { id: "5", name: "Lemon" },
+    { id: "6", name: "Strawberry" },
+  ];
+  await new Promise((res) => setTimeout(res, 500));
+  return data.filter((item) =>
+    item.name.toLowerCase().includes(value.toLowerCase())
+  );
+};
+
+// --- Story 1: Basic Search (No filters) ---
+export const BasicTextSearch: Story = {
+  render: () => (
+    <SearchInput
+      fetch={mockFetch}
+      placeholder="Search fruits..."
+      STORAGE_KEY="basic-text-search"
+    />
+  ),
+};
+
+// --- Story 2: Search With Checkbox Filters ---
+export const SearchWithFilters: Story = {
+  render: () => (
+    <SearchInput
+      fetch={mockFetch}
+      placeholder="Search fruits..."
+      filters={[
+        { key: "Max Fetch", name: "Max Fetch" },
+        { key: "yellow", name: "Yellow Fruits" },
+        { key: "citrus", name: "Citrus Fruits" },
+      ]}
+      STORAGE_KEY="search-with-filters"
+      onFiltersChange={(state) => console.log("Filters changed:", state)}
+    />
+  ),
+};
+
+// --- Story 3: Custom Item Rendering ---
+export const SearchWithCustomItem: Story = {
+  render: () => (
+    <SearchInput
+      fetch={mockFetch}
+      placeholder="Search fruits..."
+      STORAGE_KEY="custom-item-search"
+      renderItem={(item) => (
+        <div className="flex items-center justify-between px-3 py-1 hover:bg-gray-100">
+          <span>{item.name}</span>
+          <span role="img" aria-label="fruit">
+            🍎
+          </span>
+        </div>
+      )}
+    />
+  ),
+};
+
+// --- Story 4: Debounced Search ---
+export const DebouncedSearch: Story = {
+  render: () => (
+    <SearchInput
+      fetch={mockFetch}
+      placeholder="Type slowly..."
+      debounceValue={1000}
+      STORAGE_KEY="debounced-search"
+    />
+  ),
+};
+
+// --- Story 5: Filters Only Panel ---
+export const FiltersOnly: Story = {
+  render: () => (
+    <SearchInput
+      fetch={mockFetch}
+      placeholder="Focus to see filters..."
+      filters={fruitFilters}
+      STORAGE_KEY="filters-only"
+    />
+  ),
+};
+
+// --- Story 6: Full Featured Example ---
+export const FullFeatured: Story = {
+  render: () => (
+    <SearchInput
+      fetch={mockFetch}
+      placeholder="Search fruits..."
+      filters={fruitFilters}
+      STORAGE_KEY="full-featured-search"
+      onFiltersChange={(state) => console.log("Filters:", state)}
+      debounceValue={700}
+      renderItem={(item) => (
+        <div className="flex justify-between px-3 py-1 hover:bg-gray-100">
+          <strong>{item.name}</strong>
+          <span role="img" aria-label="banana">
+            🍌
+          </span>
+        </div>
+      )}
+      text={{ fetch: "Loading fruits...", notItem: "No fruits found" }}
+    />
+  ),
+};

package/src/notion-ui/{boolean-status-button/BooleanStatusButton.stories.tsx → status-button/status-button.stories.tsx}

@@ -1,4 +1,4 @@
-import BooleanStatusButton from "./BooleanStatusButton";
+import StatusButton from "./status-button";
 import type { Meta, StoryObj } from "@storybook/react";
 
 // --------------------------------------------
@@ -33,7 +33,7 @@ interface WrapperProps {
 
 function Wrapper({ status, className }: WrapperProps) {
   return (
-    <BooleanStatusButton
+    <StatusButton
       className={className}
       getColor={() => statusOptions[status]}
     />
@@ -44,7 +44,7 @@ function Wrapper({ status, className }: WrapperProps) {
 // Storybook meta (now uses Wrapper, not the original)
 // --------------------------------------------
 const meta: Meta<typeof Wrapper> = {
-  title: "Button/BooleanStatusButton",
+  title: "Button/StatusButton",
   component: Wrapper,
   argTypes: {
     status: {

package/src/notion-ui/{boolean-status-button/BooleanStatusButton.tsx → status-button/status-button.tsx}

@@ -1,7 +1,7 @@
 import { cn } from "../../utils/cn";
 // import { cn } from "@/utils/cn";
 
-export interface BooleanStatusButtonProps {
+export interface StatusButtonProps {
   getColor: () => {
     style: string;
     value?: string;
@@ -9,7 +9,7 @@ export interface BooleanStatusButtonProps {
   className?: string;
 }
 
-export default function BooleanStatusButton(props: BooleanStatusButtonProps) {
+export default function StatusButton(props: StatusButtonProps) {
   const { getColor, className } = props;
   const data = getColor();
 

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;
+}