@turtleclub/core 0.1.0-beta.100

package/src/selectors/ProductSelector.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { useMemo } from "react";
+import { Combobox } from "@turtleclub/ui";
+import { useProducts } from "@turtleclub/hooks";
+
+interface ProductSelectorProps {
+  /** Selected product ID */
+  value: string;
+  /** Callback when selection changes */
+  onValueChange: (value: string) => void;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Whether the selector is disabled */
+  disabled?: boolean;
+  /** Custom className */
+  className?: string;
+  /** Whether to close on select */
+  closeOnSelect?: boolean;
+  /** Whether to show search */
+  searchable?: boolean;
+}
+
+export function ProductSelector({
+  value,
+  onValueChange,
+  placeholder = "Select product",
+  disabled = false,
+  className,
+  closeOnSelect = true,
+  searchable = true,
+}: ProductSelectorProps) {
+  const { data: productsData, isLoading } = useProducts({});
+
+  const products = useMemo(() => productsData?.products ?? [], [productsData?.products]);
+
+  const productOptions = useMemo(() => {
+    if (!products || products.length === 0) return [];
+
+    return products.map((product) => ({
+      label: product.name,
+      value: product.id,
+      icon: product.logoUrl
+        ? () => (
+            <img
+              src={product.logoUrl}
+              alt={product.name}
+              width={16}
+              height={16}
+              className="size-4 rounded-full"
+            />
+          )
+        : undefined,
+    }));
+  }, [products]);
+
+  return (
+    <Combobox
+      searchable={searchable}
+      options={productOptions}
+      value={value}
+      onValueChange={onValueChange}
+      disabled={disabled || isLoading}
+      placeholder={isLoading ? "Loading products..." : placeholder}
+      closeOnSelect={closeOnSelect}
+      className={className}
+    />
+  );
+}

package/src/selectors/ProductsSelector.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { useMemo } from "react";
+import { MultiSelect } from "@turtleclub/ui";
+import { useProducts } from "@turtleclub/hooks";
+
+interface ProductSelectorProps {
+  /** Selected product IDs */
+  value: string[];
+  /** Callback when selection changes */
+  onValueChange: (values: string[]) => void;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Whether the selector is disabled */
+  disabled?: boolean;
+  /** Custom className */
+  className?: string;
+  /** Maximum count to show in trigger */
+  maxCount?: number;
+  /** Whether to close on select */
+  closeOnSelect?: boolean;
+  /** Whether to show search */
+  searchable?: boolean;
+}
+
+export function ProductsSelector({
+  value,
+  onValueChange,
+  placeholder = "Select products",
+  disabled = false,
+  className,
+  maxCount = 1,
+  closeOnSelect = true,
+  searchable = true,
+}: ProductSelectorProps) {
+  const { data: productsData, isLoading } = useProducts({});
+
+  const products = useMemo(() => productsData?.products ?? [], [productsData?.products]);
+
+  const productOptions = useMemo(() => {
+    if (!products || products.length === 0) return [];
+
+    return products.map((product) => ({
+      label: product.name,
+      value: product.id,
+      icon: product.logoUrl
+        ? () => (
+            <img
+              src={product.logoUrl}
+              alt={product.name}
+              width={16}
+              height={16}
+              className="size-4 rounded-full"
+            />
+          )
+        : undefined,
+    }));
+  }, [products]);
+
+  return (
+    <MultiSelect
+      searchable={searchable}
+      options={productOptions}
+      value={value}
+      onValueChange={onValueChange}
+      disabled={disabled || isLoading}
+      placeholder={isLoading ? "Loading products..." : placeholder}
+      closeOnSelect={closeOnSelect}
+      maxCount={maxCount}
+      className={className}
+    />
+  );
+}

package/src/selectors/TokenSelector.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import { useEffect, useMemo } from "react";
+import { Combobox } from "@turtleclub/ui";
+import { useSupportedTokens } from "@turtleclub/hooks";
+
+interface TokenSelectorProps {
+  /** Selected token ID */
+  value: string;
+  /** Callback when selection changes */
+  onValueChange: (value: string) => void;
+  /** Selected chain ID to filter tokens */
+  chainId?: string;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Whether the selector is disabled */
+  disabled?: boolean;
+  /** Custom className */
+  className?: string;
+  /** Whether to close on select */
+  closeOnSelect?: boolean;
+  /** Whether to show search */
+  searchable?: boolean;
+}
+
+export function TokenSelector({
+  value,
+  onValueChange,
+  chainId,
+  placeholder = "Select token",
+  disabled = false,
+  className,
+  closeOnSelect = true,
+  searchable = true,
+}: TokenSelectorProps) {
+  const isChainSelected = !!chainId && chainId.trim() !== "";
+
+  const { tokens, isLoading } = useSupportedTokens({
+    chainId: isChainSelected ? chainId : "",
+    limit: 9000,
+    enabled: isChainSelected,
+  });
+
+  const tokenOptions = useMemo(() => {
+    if (!tokens) return [];
+
+    return tokens.map((token) => ({
+      label: `${token.symbol} - ${token.name}`,
+      value: token?.id || "",
+      icon: token.logoUrl
+        ? () => (
+            <img
+              src={token.logoUrl}
+              alt={token.name}
+              width={16}
+              height={16}
+              className="size-4 rounded-full"
+            />
+          )
+        : undefined,
+    }));
+  }, [tokens]);
+
+  // Clear selection when chain changes
+  useEffect(() => {
+    if (!isChainSelected && value) {
+      onValueChange("");
+    }
+  }, [isChainSelected, value, onValueChange]);
+
+  return (
+    <Combobox
+      searchable={searchable}
+      options={tokenOptions}
+      value={value}
+      onValueChange={onValueChange}
+      disabled={disabled || isLoading || !isChainSelected}
+      placeholder={
+        !isChainSelected ? "Select a chain first" : isLoading ? "Loading tokens..." : placeholder
+      }
+      closeOnSelect={closeOnSelect}
+      className={className}
+    />
+  );
+}

package/src/selectors/TokensSelector.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { useEffect, useMemo } from "react";
+import { MultiSelect } from "@turtleclub/ui";
+import { useSupportedTokens } from "@turtleclub/hooks";
+
+interface TokenSelectorProps {
+  /** Selected token IDs */
+  value: string[];
+  /** Callback when selection changes */
+  onValueChange: (values: string[]) => void;
+  /** Selected chain ID to filter tokens */
+  chainId?: string;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Whether the selector is disabled */
+  disabled?: boolean;
+  /** Custom className */
+  className?: string;
+  /** Maximum count to show in trigger */
+  maxCount?: number;
+  /** Whether to close on select */
+  closeOnSelect?: boolean;
+  /** Whether to show search */
+  searchable?: boolean;
+}
+
+export function TokensSelector({
+  value,
+  onValueChange,
+  chainId,
+  placeholder = "Select tokens",
+  disabled = false,
+  className,
+  maxCount = 1,
+  closeOnSelect = true,
+  searchable = true,
+}: TokenSelectorProps) {
+  const isChainSelected = !!chainId && chainId.trim() !== "";
+
+  const { tokens, isLoading } = useSupportedTokens({
+    chainId: isChainSelected ? chainId : "",
+    limit: 9000,
+    enabled: isChainSelected,
+  });
+
+  const tokenOptions = useMemo(() => {
+    if (!tokens) return [];
+
+    return tokens.map((token) => ({
+      label: `${token.symbol} - ${token.name}`,
+      value: token?.id || "",
+      icon: token.logoUrl
+        ? () => (
+            <img
+              src={token.logoUrl}
+              alt={token.name}
+              width={16}
+              height={16}
+              className="size-4 rounded-full"
+            />
+          )
+        : undefined,
+    }));
+  }, [tokens]);
+
+  // Clear selection when chain changes
+  useEffect(() => {
+    if (!isChainSelected && value.length > 0) {
+      onValueChange([]);
+    }
+  }, [isChainSelected, value, onValueChange]);
+
+  return (
+    <MultiSelect
+      searchable={searchable}
+      options={tokenOptions}
+      value={value}
+      onValueChange={onValueChange}
+      disabled={disabled || isLoading || !isChainSelected}
+      placeholder={
+        !isChainSelected ? "Select a chain first" : isLoading ? "Loading tokens..." : placeholder
+      }
+      closeOnSelect={closeOnSelect}
+      maxCount={maxCount}
+      className={className}
+    />
+  );
+}

package/src/selectors/index.ts

@@ -0,0 +1,11 @@
+// Plural selectors (MultiSelect)
+export { ChainsSelector } from "./ChainsSelector";
+export { TokensSelector } from "./TokensSelector";
+export { ProductsSelector } from "./ProductsSelector";
+export { OpportunitiesSelector } from "./OpportunitiesSelector";
+
+// Singular selectors (Combobox)
+export { ChainSelector } from "./ChainSelector";
+export { TokenSelector } from "./TokenSelector";
+export { ProductSelector } from "./ProductSelector";
+export { OpportunitySelector } from "./OpportunitySelector";

package/src/wrappers/ActiveFilterBadges.tsx

@@ -0,0 +1,139 @@
+"use client";
+
+import React, { useMemo } from "react";
+import { Badge, Button, cn } from "@turtleclub/ui";
+import { X } from "lucide-react";
+
+export interface ActiveFilterConfig {
+  /** Unique key for the filter */
+  key: string;
+  /** Display label for the filter */
+  label: string;
+  /** Current filter value to display */
+  value: string;
+  /** Query parameter key(s) this filter uses */
+  queryKeys: string | string[];
+  /** Whether this filter is currently active */
+  isActive: boolean;
+}
+
+export interface ActiveFilterBadgesProps {
+  /** Array of filter configurations */
+  filters: ActiveFilterConfig[];
+  /** Custom className for the container */
+  className?: string;
+  /** Label for clear all button (default: "Clear All") */
+  clearAllLabel?: string;
+  /** Whether to show clear all button (default: true) */
+  showClearAll?: boolean;
+  /** Custom render function for individual badges */
+  renderBadge?: (filter: ActiveFilterConfig, clearFilter: () => void) => React.ReactNode;
+  /** Callback function to clear individual filter */
+  onClearFilter: (queryKeys: string | string[]) => void;
+  /** Callback function to clear all filters */
+  onClearAll: (allQueryKeys: (string | string[])[]) => void;
+}
+
+/**
+ * Component that displays active filter badges with individual clear buttons
+ * and an optional "clear all" button.
+ *
+ * @example
+ * ```tsx
+ * const activeFilters = [
+ *   {
+ *     key: 'chain',
+ *     label: 'Chain',
+ *     value: 'Ethereum',
+ *     queryKeys: 'chainId',
+ *     isActive: true,
+ *   },
+ *   {
+ *     key: 'sorting',
+ *     label: 'Sort',
+ *     value: 'Name (A-Z)',
+ *     queryKeys: ['sortBy', 'sortOrder'],
+ *     isActive: true,
+ *   },
+ * ];
+ *
+ * <ActiveFilterBadges filters={activeFilters} />
+ * ```
+ */
+export function ActiveFilterBadges({
+  filters,
+  className,
+  clearAllLabel = "Clear All",
+  showClearAll = true,
+  renderBadge,
+  onClearFilter,
+  onClearAll,
+}: ActiveFilterBadgesProps) {
+  // Get only active filters
+  const activeFilters = useMemo(() => {
+    return filters.filter((filter) => filter.isActive && filter.value);
+  }, [filters]);
+
+  // Clear all function
+  const clearAll = () => {
+    const allQueryKeys = activeFilters.map((filter) => filter.queryKeys);
+    onClearAll(allQueryKeys);
+  };
+
+  // Don't render if no active filters
+  if (activeFilters.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className={cn("flex flex-wrap items-center gap-2", className)}>
+      {activeFilters.map((filter) => {
+        return (
+          <FilterBadge
+            key={filter.key}
+            filter={filter}
+            renderBadge={renderBadge}
+            onClearFilter={onClearFilter}
+          />
+        );
+      })}
+
+      {showClearAll && activeFilters.length > 1 && (
+        <Button variant="ghost" size="sm" onClick={clearAll} className="h-7 px-2 text-xs">
+          {clearAllLabel}
+        </Button>
+      )}
+    </div>
+  );
+}
+
+interface FilterBadgeProps {
+  filter: ActiveFilterConfig;
+  renderBadge?: (filter: ActiveFilterConfig, clearFilter: () => void) => React.ReactNode;
+  onClearFilter: (queryKeys: string | string[]) => void;
+}
+
+function FilterBadge({ filter, renderBadge, onClearFilter }: FilterBadgeProps) {
+  const clearFilter = () => {
+    onClearFilter(filter.queryKeys);
+  };
+
+  if (renderBadge) {
+    return <>{renderBadge(filter, clearFilter)}</>;
+  }
+
+  return (
+    <Badge className="flex items-center gap-1 pr-1 border-border border">
+      <span className="text-xs">
+        {filter.label}: {filter.value}
+      </span>
+      <button
+        onClick={clearFilter}
+        className="ml-1 rounded-full p-0.5 hover:bg-black/10 focus:bg-black/10 focus:outline-none"
+        aria-label={`Clear ${filter.label} filter`}
+      >
+        <X className="h-3 w-3" />
+      </button>
+    </Badge>
+  );
+}

package/src/wrappers/FiltersGrid.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import React from "react";
+import { cn, Label } from "@turtleclub/ui";
+
+export interface FilterConfig {
+  key: string;
+  label: string;
+  component: React.ReactNode;
+  enabled: boolean;
+  section?: string;
+}
+
+export interface FiltersGridProps {
+  filters: FilterConfig[];
+  columns?: number;
+  className?: string;
+  sectionClassName?: string;
+}
+
+export function FiltersGrid({
+  filters,
+  columns = 3,
+  className,
+  sectionClassName,
+}: FiltersGridProps) {
+  const enabledFilters = filters.filter((filter) => filter.enabled);
+
+  if (enabledFilters.length === 0) {
+    return null;
+  }
+
+  // Group filters by section
+  const sections = enabledFilters.reduce(
+    (acc, filter) => {
+      const sectionName = filter.section || "default";
+      if (!acc[sectionName]) {
+        acc[sectionName] = [];
+      }
+      acc[sectionName].push(filter);
+      return acc;
+    },
+    {} as Record<string, typeof enabledFilters>
+  );
+
+  const sectionNames = Object.keys(sections);
+
+  return (
+    <div className={cn("space-y-4", className)}>
+      {sectionNames.map((sectionName, sectionIndex) => (
+        <div key={sectionName}>
+          {sectionIndex > 0 && <div className="border-t border-border mb-4" />}
+          <div
+            className={cn("grid gap-2", sectionClassName)}
+            style={{
+              gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+            }}
+          >
+            {sections[sectionName].map((filter) => (
+              <div key={filter.key} className="flex flex-col gap-2">
+                {filter.component}
+              </div>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/wrappers/FiltersPopover.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import React from "react";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  buttonVariants,
+  cn,
+  Label,
+  Badge,
+} from "@turtleclub/ui";
+import { SlidersHorizontal } from "lucide-react";
+import { FilterConfig } from "./FiltersGrid";
+
+export interface FiltersPopoverProps {
+  filters: FilterConfig[];
+  triggerLabel?: React.ReactNode;
+  columns?: number;
+  className?: string;
+  popoverClassName?: string;
+  sectionClassName?: string;
+  align?: "start" | "center" | "end";
+  /** Callback function to clear all filters */
+  onClearAll?: () => void;
+}
+
+export function FiltersPopover({
+  filters,
+  triggerLabel = "Filters",
+  columns = 2,
+  className,
+  popoverClassName,
+  sectionClassName,
+  align = "start",
+  onClearAll,
+}: FiltersPopoverProps) {
+  const enabledFilters = filters.filter((filter) => filter.enabled);
+
+  if (enabledFilters.length === 0) {
+    return null;
+  }
+
+  // Group filters by section
+  const sections = enabledFilters.reduce(
+    (acc, filter) => {
+      const sectionName = filter.section || "default";
+      if (!acc[sectionName]) {
+        acc[sectionName] = [];
+      }
+      acc[sectionName].push(filter);
+      return acc;
+    },
+    {} as Record<string, typeof enabledFilters>
+  );
+
+  const sectionNames = Object.keys(sections);
+
+  return (
+    <Popover>
+      <PopoverTrigger
+        className={cn(
+          buttonVariants({
+            variant: "default",
+            size: "default",
+            border: "bordered",
+          }),
+          "!bg-neutral-alpha-2",
+          className
+        )}
+      >
+        {triggerLabel}
+      </PopoverTrigger>
+      <PopoverContent
+        className={cn("w-auto min-w-[400px] max-w-[600px]", popoverClassName)}
+        align={align}
+      >
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <h4 className="font-medium text-sm">Filters</h4>
+            {onClearAll && (
+              <button
+                onClick={onClearAll}
+                className="text-xs text-muted-foreground hover:text-foreground transition-colors"
+              >
+                Reset all
+              </button>
+            )}
+          </div>
+          <div className="space-y-4">
+            {sectionNames.map((sectionName, sectionIndex) => (
+              <div key={sectionName}>
+                {sectionIndex > 0 && <div className="border-t border-border mb-4" />}
+                <div
+                  className={cn("grid gap-2", sectionClassName)}
+                  style={{
+                    gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+                  }}
+                >
+                  {sections[sectionName].map((filter) => (
+                    <div key={filter.key} className="flex flex-col gap-2">
+                      {filter.component}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}