@seekora-ai/ui-sdk-react 1.0.0

package/dist/components/Facets.js

@@ -0,0 +1,195 @@
+/**
+ * Facets Component
+ *
+ * Displays facet filters for search results
+ */
+import React, { useState } from 'react';
+import { useSearchContext } from './SearchProvider';
+import { useSearchState } from '../hooks/useSearchState';
+import { log } from '@seekora-ai/ui-sdk-core';
+import { clsx } from 'clsx';
+export const Facets = ({ results: resultsProp, facets: facetsProp, onFacetChange, renderFacet, renderFacetItem, maxItems = 10, showMore = true, className, style, theme: customTheme, }) => {
+    const { theme } = useSearchContext();
+    const { results: stateResults, refinements, addRefinement, removeRefinement } = useSearchState();
+    const facetsTheme = customTheme || {};
+    const [expandedFacets, setExpandedFacets] = useState({});
+    // Use results from prop if provided, otherwise from state manager
+    const results = resultsProp || stateResults;
+    // Extract facets from results
+    const extractFacets = () => {
+        if (facetsProp)
+            return facetsProp;
+        // Try to get facets from various locations in the response
+        // Primary location: data.facets (widget_mode response structure)
+        const rawFacets = results?.data?.facets
+            || results?.facets
+            || results?.data?.data?.facets
+            || null;
+        log.verbose('Facets: Extracting facets', {
+            hasResults: !!results,
+            hasData: !!results?.data,
+            rawFacets: rawFacets ? (Array.isArray(rawFacets) ? rawFacets.length : 'not array') : null,
+            resultsKeys: results ? Object.keys(results) : [],
+            dataKeys: results?.data ? Object.keys(results.data) : [],
+            sampleFacet: rawFacets && Array.isArray(rawFacets) && rawFacets.length > 0 ? rawFacets[0] : null,
+        });
+        // Ensure rawFacets is an array before mapping
+        if (!rawFacets || !Array.isArray(rawFacets)) {
+            log.verbose('Facets: No facets found in response', {
+                rawFacetsType: rawFacets ? typeof rawFacets : 'null',
+                isArray: Array.isArray(rawFacets),
+                resultsStructure: results ? JSON.stringify(Object.keys(results)) : 'null',
+                dataStructure: results?.data ? JSON.stringify(Object.keys(results.data)) : 'null',
+            });
+            return [];
+        }
+        const extracted = rawFacets.map((facet) => {
+            const fieldName = facet.field_name || facet.field;
+            return {
+                field: fieldName,
+                label: facet.label || fieldName,
+                items: Array.isArray(facet.counts) ? facet.counts.map((count) => ({
+                    value: count.value,
+                    count: count.count,
+                    selected: refinements.some(r => r.field === fieldName && r.value === count.value),
+                })) : [],
+            };
+        });
+        log.verbose('Facets: Extracted facets', {
+            count: extracted.length,
+            facets: extracted.map(f => ({ field: f.field, itemsCount: f.items.length })),
+        });
+        return extracted;
+    };
+    const facets = extractFacets();
+    const handleFacetToggle = (field, value, selected) => {
+        const newSelected = !selected;
+        log.verbose('Facets: Facet toggled', { field, value, selected: newSelected });
+        // Update state manager (automatically triggers search)
+        if (newSelected) {
+            addRefinement(field, value);
+        }
+        else {
+            removeRefinement(field, value);
+        }
+        // Call callback for backwards compatibility
+        if (onFacetChange) {
+            try {
+                onFacetChange(field, value, newSelected);
+            }
+            catch (err) {
+                const error = err instanceof Error ? err : new Error(String(err));
+                log.error('Facets: Error in onFacetChange callback', {
+                    field,
+                    value,
+                    selected: newSelected,
+                    error: error.message,
+                });
+            }
+        }
+    };
+    const toggleFacetExpansion = (field) => {
+        setExpandedFacets((prev) => ({
+            ...prev,
+            [field]: !prev[field],
+        }));
+    };
+    const defaultRenderFacetItem = (item, facet, index) => {
+        const isExpanded = expandedFacets[facet.field] || index < maxItems;
+        if (!isExpanded && index >= maxItems) {
+            return null;
+        }
+        return (React.createElement("div", { key: `${facet.field}-${item.value}`, className: clsx(facetsTheme.facetItem, (refinements.some(r => r.field === facet.field && r.value === item.value) || item.selected) && facetsTheme.facetItemActive), onClick: () => handleFacetToggle(facet.field, item.value, item.selected || false), style: {
+                display: 'flex',
+                alignItems: 'center',
+                padding: theme.spacing.small,
+                cursor: 'pointer',
+                borderRadius: typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.medium,
+                marginBottom: theme.spacing.small,
+                backgroundColor: (refinements.some(r => r.field === facet.field && r.value === item.value) || item.selected) ? theme.colors.hover : 'transparent',
+                transition: 'background-color 0.2s ease',
+            } },
+            React.createElement("input", { type: "checkbox", checked: refinements.some(r => r.field === facet.field && r.value === item.value) || item.selected || false, onChange: () => handleFacetToggle(facet.field, item.value, item.selected || false), className: facetsTheme.checkbox, style: {
+                    marginRight: theme.spacing.small,
+                    cursor: 'pointer',
+                }, "aria-label": `Filter by ${item.value}` }),
+            React.createElement("span", { className: facetsTheme.facetItemLabel, style: {
+                    flex: 1,
+                    fontSize: theme.typography.fontSize.medium,
+                    color: theme.colors.text,
+                } }, item.value),
+            React.createElement("span", { className: facetsTheme.facetItemCount, style: {
+                    fontSize: theme.typography.fontSize.small,
+                    color: theme.colors.textSecondary || theme.colors.text,
+                    opacity: 0.7,
+                    marginLeft: theme.spacing.small,
+                } },
+                "(",
+                item.count,
+                ")")));
+    };
+    const defaultRenderFacet = (facet, index) => {
+        const isExpanded = expandedFacets[facet.field] || false;
+        const visibleItems = isExpanded ? facet.items : facet.items.slice(0, maxItems);
+        const hasMore = facet.items.length > maxItems;
+        return (React.createElement("div", { key: facet.field, className: facetsTheme.facet, style: {
+                marginBottom: theme.spacing.large,
+                padding: theme.spacing.medium,
+                backgroundColor: theme.colors.background,
+                border: `1px solid ${theme.colors.border}`,
+                borderRadius: typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.medium,
+            } },
+            React.createElement("h3", { className: facetsTheme.facetTitle, style: {
+                    fontSize: theme.typography.fontSize.large,
+                    fontWeight: 'bold',
+                    margin: 0,
+                    marginBottom: theme.spacing.medium,
+                    color: theme.colors.text,
+                } }, facet.label || facet.field),
+            React.createElement("div", { className: facetsTheme.facetList }, visibleItems.map((item, itemIndex) => {
+                const actualIndex = isExpanded ? itemIndex : itemIndex;
+                return renderFacetItem
+                    ? renderFacetItem(item, facet, actualIndex)
+                    : defaultRenderFacetItem(item, facet, actualIndex);
+            })),
+            showMore && hasMore && !isExpanded && (React.createElement("button", { type: "button", onClick: () => toggleFacetExpansion(facet.field), style: {
+                    marginTop: theme.spacing.small,
+                    padding: theme.spacing.small,
+                    border: 'none',
+                    backgroundColor: 'transparent',
+                    color: theme.colors.primary,
+                    cursor: 'pointer',
+                    fontSize: theme.typography.fontSize.small,
+                    textDecoration: 'underline',
+                } },
+                "Show more (",
+                facet.items.length - maxItems,
+                " more)")),
+            isExpanded && hasMore && (React.createElement("button", { type: "button", onClick: () => toggleFacetExpansion(facet.field), style: {
+                    marginTop: theme.spacing.small,
+                    padding: theme.spacing.small,
+                    border: 'none',
+                    backgroundColor: 'transparent',
+                    color: theme.colors.primary,
+                    cursor: 'pointer',
+                    fontSize: theme.typography.fontSize.small,
+                    textDecoration: 'underline',
+                } }, "Show less"))));
+    };
+    if (facets.length === 0) {
+        log.verbose('Facets: No facets to display', {
+            hasResults: !!results,
+            resultsType: results ? typeof results : 'null',
+        });
+        // Return a placeholder instead of null for debugging
+        if (process.env.NODE_ENV === 'development') {
+            return (React.createElement("div", { style: { padding: theme.spacing.small, color: theme.colors.textSecondary, fontSize: theme.typography.fontSize.small } }, "No facets available"));
+        }
+        return null;
+    }
+    return (React.createElement("div", { className: clsx(facetsTheme.container, className), style: style }, facets.map((facet, index) => {
+        return renderFacet
+            ? renderFacet(facet, index)
+            : defaultRenderFacet(facet, index);
+    })));
+};

package/dist/components/FederatedDropdown.d.ts

@@ -0,0 +1,92 @@
+/**
+ * FederatedDropdown Component
+ *
+ * Full-featured federated search dropdown with:
+ * - Multi-column layout (suggestions + products)
+ * - Filtered tabs with product results
+ * - Popular brands
+ * - Trending products
+ * - Category navigation
+ * - Responsive design
+ * - Rich product cards
+ */
+import React from 'react';
+import type { SuggestionItem, ProductItem, FilteredTab, PopularBrand, QuerySuggestionsClassNames, QuerySuggestionsEventHandlers } from '@seekora-ai/ui-sdk-types';
+export interface FederatedDropdownProps extends QuerySuggestionsEventHandlers {
+    /** Current query string */
+    query: string;
+    /** Whether the dropdown is visible */
+    isOpen?: boolean;
+    /** Maximum suggestions to show */
+    maxSuggestions?: number;
+    /** Maximum products to show per section */
+    maxProducts?: number;
+    /** Maximum brands to show */
+    maxBrands?: number;
+    /** Minimum query length */
+    minQueryLength?: number;
+    /** Debounce delay in ms */
+    debounceMs?: number;
+    /** Filtered tabs configuration */
+    filteredTabs?: Array<{
+        id?: string;
+        label: string;
+        filter: string;
+    }>;
+    /** Show products section */
+    showProducts?: boolean;
+    /** Show brands section */
+    showBrands?: boolean;
+    /** Show filtered tabs */
+    showFilteredTabs?: boolean;
+    /** Show recent searches */
+    showRecentSearches?: boolean;
+    /** Layout mode */
+    layout?: 'side-by-side' | 'stacked' | 'full-width';
+    /** Products column width (for side-by-side) */
+    productsColumnWidth?: string;
+    /** Suggestions column width (for side-by-side) */
+    suggestionsColumnWidth?: string;
+    /** Show product prices */
+    showPrices?: boolean;
+    /** Currency symbol */
+    currencySymbol?: string;
+    /** Custom class names */
+    classNames?: QuerySuggestionsClassNames;
+    /** Custom styles */
+    style?: React.CSSProperties;
+    /** Custom product card renderer */
+    renderProduct?: (product: ProductItem, index: number) => React.ReactNode;
+    /** Custom suggestion renderer */
+    renderSuggestion?: (suggestion: SuggestionItem, index: number, isActive: boolean) => React.ReactNode;
+    /** Custom brand renderer */
+    renderBrand?: (brand: PopularBrand, index: number) => React.ReactNode;
+    /** Custom tab renderer */
+    renderTab?: (tab: FilteredTab, isActive: boolean) => React.ReactNode;
+    /** Header content */
+    header?: React.ReactNode;
+    /** Footer content */
+    footer?: React.ReactNode;
+    /** View all products link */
+    viewAllProductsLink?: string;
+    /** Width */
+    width?: string | number;
+    /** Max height */
+    maxHeight?: string | number;
+    /** Z-index */
+    zIndex?: number;
+    /** Analytics tags */
+    analyticsTags?: string[];
+}
+export interface FederatedDropdownRef {
+    getActiveIndex: () => number;
+    setActiveIndex: (index: number) => void;
+    selectActive: () => void;
+    navigateNext: () => void;
+    navigatePrevious: () => void;
+    getActiveTab: () => string | null;
+    setActiveTab: (tabId: string) => void;
+}
+export declare const FederatedDropdown: React.ForwardRefExoticComponent<FederatedDropdownProps & React.RefAttributes<FederatedDropdownRef>>;
+export default FederatedDropdown;
+//# sourceMappingURL=FederatedDropdown.d.ts.map

package/dist/components/FederatedDropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FederatedDropdown.d.ts","sourceRoot":"","sources":["../../src/components/FederatedDropdown.tsx"],"names":[],"mappings":"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"}