@seekora-ai/ui-sdk-vanilla 1.0.0

package/dist/components/search-results.js

@@ -0,0 +1,537 @@
+/**
+ * SearchResults Component
+ *
+ * Displays search results with customizable rendering
+ */
+import { extractField, formatPrice, log } from '@seekora-ai/ui-sdk-core';
+export class SearchResults {
+    constructor(provider, options) {
+        this.unsubscribeStateManager = null;
+        this.provider = provider;
+        const container = typeof options.container === 'string'
+            ? document.querySelector(options.container)
+            : options.container;
+        if (!container) {
+            throw new Error('SearchResults: container element not found');
+        }
+        this.container = container;
+        this.options = {
+            viewMode: options.viewMode || 'list',
+            fieldMapping: options.fieldMapping || {},
+            itemsPerPage: options.itemsPerPage || 10,
+            results: options.results,
+            loading: options.loading,
+            error: options.error,
+            onResultClick: options.onResultClick,
+            renderResult: options.renderResult,
+            renderEmpty: options.renderEmpty,
+            renderLoading: options.renderLoading,
+            renderError: options.renderError,
+        };
+        // Attach event delegation listener to the persistent container for result clicks
+        // This ensures clicks work even when results are recreated during re-renders
+        // Note: We attach the listener even if onResultClick is not provided, to support analytics
+        this.container.addEventListener('click', async (e) => {
+            const target = e.target;
+            // Find the result element (could be the target itself or a parent)
+            const resultElement = target.hasAttribute('data-result-id')
+                ? target
+                : target.closest('[data-result-id]');
+            if (resultElement) {
+                e.preventDefault();
+                e.stopPropagation();
+                const resultId = resultElement.getAttribute('data-result-id');
+                const resultIndexStr = resultElement.getAttribute('data-result-index');
+                const resultIndex = resultIndexStr ? parseInt(resultIndexStr, 10) : -1;
+                console.log('🔵 SearchResults: Result clicked via delegation', {
+                    resultId,
+                    resultIndex,
+                    target: target.tagName,
+                    resultElement
+                });
+                if (resultId && resultIndex >= 0) {
+                    // Find the result in the current results
+                    const results = this.extractResults();
+                    const result = results[resultIndex];
+                    if (result) {
+                        const extractedResult = this.extractFields(result);
+                        // Track analytics event if enabled
+                        if (this.provider.enableAnalytics) {
+                            try {
+                                const searchResponse = this.provider.stateManager.getResults();
+                                const state = this.provider.stateManager.getState();
+                                // Calculate absolute position (1-based) accounting for pagination
+                                // Position = (currentPage - 1) * itemsPerPage + resultIndex + 1
+                                const absolutePosition = (state.currentPage - 1) * state.itemsPerPage + resultIndex + 1;
+                                // Build search context from current state and response
+                                const searchContext = searchResponse?.context || (searchResponse ? {
+                                    query: state.query,
+                                    filters: state.refinements.length > 0
+                                        ? state.refinements.map(r => `${r.field}:${r.value}`).join(' && ')
+                                        : undefined,
+                                    page: state.currentPage,
+                                    sortBy: state.sortBy,
+                                } : undefined);
+                                console.log('🔵 SearchResults: Tracking analytics event', {
+                                    resultId,
+                                    resultIndex,
+                                    absolutePosition,
+                                    currentPage: state.currentPage,
+                                    itemsPerPage: state.itemsPerPage,
+                                    hasContext: !!searchContext,
+                                    searchContext
+                                });
+                                await this.provider.client.trackEvent({
+                                    event_name: 'product_click',
+                                    clicked_item_id: resultId,
+                                    metadata: {
+                                        result: extractedResult,
+                                        position: absolutePosition,
+                                    },
+                                }, searchContext);
+                                console.log('🟢 SearchResults: Analytics event tracked successfully', {
+                                    resultId,
+                                    position: absolutePosition,
+                                });
+                            }
+                            catch (err) {
+                                const error = err instanceof Error ? err : new Error(String(err));
+                                log.error('SearchResults: Error tracking analytics event', {
+                                    resultId,
+                                    error: error.message,
+                                });
+                            }
+                        }
+                        // Call user-provided callback
+                        if (this.options.onResultClick) {
+                            try {
+                                console.log('🔵 SearchResults: Calling onResultClick callback', {
+                                    resultId,
+                                    resultIndex,
+                                    extractedResult
+                                });
+                                this.options.onResultClick(extractedResult, resultIndex);
+                            }
+                            catch (err) {
+                                const error = err instanceof Error ? err : new Error(String(err));
+                                log.error('SearchResults: Error in onResultClick callback', {
+                                    resultId,
+                                    resultIndex,
+                                    error: error.message,
+                                });
+                            }
+                        }
+                    }
+                }
+            }
+        }, { passive: false });
+        console.log('🔵 SearchResults: Event delegation listener attached to container', { container: this.container });
+        // Subscribe to state manager for automatic updates
+        this.unsubscribeStateManager = this.provider.stateManager.subscribe((state) => {
+            this.options.results = state.results;
+            this.options.loading = state.loading;
+            this.options.error = state.error;
+            this.render();
+        });
+        this.render();
+    }
+    destroy() {
+        if (this.unsubscribeStateManager) {
+            this.unsubscribeStateManager();
+            this.unsubscribeStateManager = null;
+        }
+    }
+    update(options) {
+        // Update options
+        if (options.results !== undefined) {
+            this.options.results = options.results;
+        }
+        if (options.loading !== undefined) {
+            this.options.loading = options.loading;
+        }
+        if (options.error !== undefined) {
+            this.options.error = options.error;
+        }
+        // Always re-render when update is called (even if values appear the same, object references may differ)
+        const resultsCount = this.extractResults().length;
+        log.verbose('SearchResults: Updating and re-rendering', {
+            hasResults: !!this.options.results,
+            loading: this.options.loading,
+            hasError: !!this.options.error,
+            resultsCount,
+            providedResults: options.results !== undefined,
+            providedLoading: options.loading !== undefined,
+            providedError: options.error !== undefined,
+        });
+        this.render();
+    }
+    render() {
+        // Clear container first
+        this.container.innerHTML = '';
+        log.verbose('SearchResults: Rendering', {
+            hasResults: !!this.options.results,
+            loading: this.options.loading,
+            hasError: !!this.options.error,
+        });
+        if (this.options.loading) {
+            const loadingEl = this.options.renderLoading
+                ? this.options.renderLoading()
+                : this.renderDefaultLoading();
+            this.container.appendChild(loadingEl);
+            return;
+        }
+        if (this.options.error) {
+            const errorEl = this.options.renderError
+                ? this.options.renderError(this.options.error)
+                : this.renderDefaultError(this.options.error);
+            this.container.appendChild(errorEl);
+            return;
+        }
+        const displayedResults = this.extractResults();
+        if (displayedResults.length === 0) {
+            const emptyEl = this.options.renderEmpty
+                ? this.options.renderEmpty()
+                : this.renderDefaultEmpty();
+            this.container.appendChild(emptyEl);
+            return;
+        }
+        // Create a wrapper for grid/card layout
+        if (this.options.viewMode === 'card' || this.options.viewMode === 'grid') {
+            const gridWrapper = document.createElement('div');
+            gridWrapper.style.cssText = this.getGridContainerStyle();
+            displayedResults.forEach((result, index) => {
+                const resultEl = this.options.renderResult
+                    ? this.options.renderResult(this.extractFields(result), index)
+                    : this.renderDefaultResult(this.extractFields(result), index);
+                gridWrapper.appendChild(resultEl);
+            });
+            this.container.appendChild(gridWrapper);
+        }
+        else {
+            // List view - no wrapper needed
+            displayedResults.forEach((result, index) => {
+                const resultEl = this.options.renderResult
+                    ? this.options.renderResult(this.extractFields(result), index)
+                    : this.renderDefaultResult(this.extractFields(result), index);
+                this.container.appendChild(resultEl);
+            });
+        }
+    }
+    extractResults() {
+        if (!this.options.results) {
+            log.verbose('SearchResults: No results to extract');
+            return [];
+        }
+        let extracted = [];
+        if (Array.isArray(this.options.results)) {
+            extracted = this.options.results;
+        }
+        else {
+            const res = this.options.results;
+            if (res.results && Array.isArray(res.results)) {
+                extracted = res.results;
+            }
+            else if (res.data) {
+                const data = res.data;
+                if (Array.isArray(data)) {
+                    extracted = data;
+                }
+                else if (data.results && Array.isArray(data.results)) {
+                    extracted = data.results;
+                }
+            }
+        }
+        log.verbose('SearchResults: Extracted results', {
+            count: extracted.length,
+            viewMode: this.options.viewMode,
+        });
+        return extracted;
+    }
+    extractFields(item) {
+        try {
+            const mapping = this.options.fieldMapping;
+            return {
+                id: extractField(item, mapping.id) || String(item.id || ''),
+                title: extractField(item, mapping.title) || extractField(item, mapping.primaryText) || 'Untitled',
+                description: extractField(item, mapping.description) || extractField(item, mapping.secondaryText),
+                image: extractField(item, mapping.image) || extractField(item, mapping.imageUrl),
+                price: mapping.price ? formatPrice(extractField(item, mapping.price)) : undefined,
+                url: extractField(item, mapping.url),
+                metadata: item,
+            };
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error(String(err));
+            log.warn('SearchResults: Error extracting fields from result', {
+                error: error.message,
+                itemId: item?.id || 'unknown',
+            });
+            // Return fallback result
+            return {
+                id: String(item?.id || ''),
+                title: 'Error loading result',
+                metadata: item,
+            };
+        }
+    }
+    renderDefaultLoading() {
+        const div = document.createElement('div');
+        div.style.cssText = this.getLoadingStyle();
+        div.textContent = 'Loading results...';
+        return div;
+    }
+    renderDefaultError(error) {
+        const div = document.createElement('div');
+        div.style.cssText = this.getErrorStyle();
+        div.textContent = `Error: ${error.message}`;
+        return div;
+    }
+    renderDefaultEmpty() {
+        const div = document.createElement('div');
+        div.style.cssText = this.getEmptyStyle();
+        div.textContent = 'No results found';
+        return div;
+    }
+    renderDefaultResult(result, index) {
+        const div = document.createElement('div');
+        div.style.cssText = this.getResultStyle(index);
+        // Always set data attributes for event delegation (even if no onResultClick)
+        div.setAttribute('data-result-id', result.id);
+        div.setAttribute('data-result-index', String(index));
+        if (this.options.onResultClick) {
+            div.style.cursor = 'pointer';
+            div.setAttribute('role', 'button');
+            div.setAttribute('tabindex', '0');
+            console.log('SearchResults: Result element created', {
+                resultId: result.id,
+                index,
+                element: div,
+                hasOnResultClick: !!this.options.onResultClick
+            });
+            // No need to attach individual listeners - we use event delegation on the container
+            // This ensures clicks work even when results are recreated during re-renders
+            // Still handle keyboard accessibility
+            div.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    // Trigger the click event which will be handled by delegation
+                    const clickEvent = new MouseEvent('click', {
+                        bubbles: true,
+                        cancelable: true,
+                        view: window
+                    });
+                    div.dispatchEvent(clickEvent);
+                }
+            });
+        }
+        if (this.options.viewMode === 'card' || this.options.viewMode === 'grid') {
+            this.renderCardResult(div, result);
+        }
+        else {
+            this.renderListResult(div, result);
+        }
+        return div;
+    }
+    renderCardResult(container, result) {
+        if (result.image) {
+            const imgContainer = document.createElement('div');
+            imgContainer.style.cssText = this.getImageContainerStyle();
+            const img = document.createElement('img');
+            img.src = result.image;
+            img.alt = result.title;
+            img.style.cssText = this.getImageStyle();
+            imgContainer.appendChild(img);
+            container.appendChild(imgContainer);
+        }
+        const content = document.createElement('div');
+        content.style.cssText = this.getCardContentStyle();
+        if (result.title) {
+            const h3 = document.createElement('h3');
+            h3.style.cssText = this.getTitleStyle();
+            h3.textContent = result.title;
+            content.appendChild(h3);
+        }
+        if (result.description) {
+            const p = document.createElement('p');
+            p.style.cssText = this.getDescriptionStyle();
+            p.textContent = result.description;
+            content.appendChild(p);
+        }
+        if (result.price) {
+            const priceDiv = document.createElement('div');
+            priceDiv.style.cssText = this.getPriceStyle();
+            priceDiv.textContent = result.price;
+            content.appendChild(priceDiv);
+        }
+        container.appendChild(content);
+    }
+    renderListResult(container, result) {
+        if (result.image) {
+            const img = document.createElement('img');
+            img.src = result.image;
+            img.alt = result.title;
+            img.style.cssText = this.getListImageStyle();
+            container.appendChild(img);
+        }
+        const content = document.createElement('div');
+        content.style.cssText = 'flex: 1; min-width: 0;';
+        if (result.title) {
+            const h3 = document.createElement('h3');
+            h3.style.cssText = this.getTitleStyle();
+            h3.textContent = result.title;
+            content.appendChild(h3);
+        }
+        if (result.description) {
+            const p = document.createElement('p');
+            p.style.cssText = this.getDescriptionStyle();
+            p.textContent = result.description;
+            content.appendChild(p);
+        }
+        if (result.price) {
+            const priceDiv = document.createElement('div');
+            priceDiv.style.cssText = this.getPriceStyle();
+            priceDiv.textContent = result.price;
+            content.appendChild(priceDiv);
+        }
+        container.appendChild(content);
+    }
+    get theme() {
+        return this.provider.theme;
+    }
+    getLoadingStyle() {
+        return `
+      padding: ${this.theme.spacing.large};
+      text-align: center;
+      color: ${this.theme.colors.text};
+    `;
+    }
+    getErrorStyle() {
+        return `
+      padding: ${this.theme.spacing.large};
+      text-align: center;
+      color: ${this.theme.colors.error};
+    `;
+    }
+    getEmptyStyle() {
+        return `
+      padding: ${this.theme.spacing.large};
+      text-align: center;
+      color: ${this.theme.colors.textSecondary || this.theme.colors.text};
+    `;
+    }
+    getGridContainerStyle() {
+        return `
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+      gap: ${this.theme.spacing.medium};
+      width: 100%;
+    `;
+    }
+    getResultStyle(index) {
+        const borderRadius = typeof this.theme.borderRadius === 'string'
+            ? this.theme.borderRadius
+            : this.theme.borderRadius.medium;
+        const transition = this.theme.transitions?.normal || '250ms ease-in-out';
+        if (this.options.viewMode === 'list') {
+            return `
+        padding: ${this.theme.spacing.medium};
+        border-bottom: 1px solid ${this.theme.colors.border};
+        border-radius: 0;
+        margin-bottom: 0;
+        transition: ${transition};
+        background-color: ${this.theme.colors.background};
+        display: flex;
+        align-items: flex-start;
+        gap: ${this.theme.spacing.medium};
+      `;
+        }
+        else {
+            // Card/Grid view - cards should be contained within grid
+            return `
+        padding: 0;
+        border: 1px solid ${this.theme.colors.border};
+        border-radius: ${borderRadius};
+        box-shadow: ${this.theme.shadows.small};
+        transition: ${transition};
+        background-color: ${this.theme.colors.background};
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        height: 100%;
+      `;
+        }
+    }
+    getImageContainerStyle() {
+        return `
+      width: 100%;
+      aspect-ratio: ${this.options.viewMode === 'grid' ? '1/1' : '16/9'};
+      overflow: hidden;
+      background-color: ${this.theme.colors.hover};
+      flex-shrink: 0;
+    `;
+    }
+    getImageStyle() {
+        return `
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    `;
+    }
+    getCardContentStyle() {
+        return `
+      padding: ${this.theme.spacing.medium};
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      min-height: 0;
+    `;
+    }
+    getListContentStyle() {
+        return `
+      display: flex;
+      align-items: flex-start;
+      gap: ${this.theme.spacing.medium};
+      flex: 1;
+      min-width: 0;
+    `;
+    }
+    getListImageStyle() {
+        const borderRadius = typeof this.theme.borderRadius === 'string'
+            ? this.theme.borderRadius
+            : this.theme.borderRadius.medium;
+        return `
+      width: 100px;
+      height: 100px;
+      object-fit: cover;
+      border-radius: ${borderRadius};
+      flex-shrink: 0;
+    `;
+    }
+    getTitleStyle() {
+        return `
+      font-size: ${this.theme.typography.fontSize.large};
+      font-weight: bold;
+      margin: 0;
+      margin-bottom: ${this.theme.spacing.small};
+      color: ${this.theme.colors.text};
+    `;
+    }
+    getDescriptionStyle() {
+        return `
+      font-size: ${this.theme.typography.fontSize.medium};
+      color: ${this.theme.colors.text};
+      margin: 0;
+      margin-bottom: ${this.theme.spacing.small};
+      opacity: 0.8;
+    `;
+    }
+    getPriceStyle() {
+        return `
+      font-size: ${this.theme.typography.fontSize.medium};
+      font-weight: bold;
+      color: ${this.theme.colors.primary};
+      margin-top: auto;
+    `;
+    }
+}

package/dist/components/sort-by.d.ts

@@ -0,0 +1,33 @@
+/**
+ * SortBy Component
+ *
+ * Displays sort options for search results
+ */
+import { SearchProvider } from './search-provider';
+export interface SortOption {
+    value: string;
+    label: string;
+}
+export interface SortByOptions {
+    container: HTMLElement | string;
+    options: SortOption[];
+    value?: string;
+    label?: string;
+    onSortChange?: (value: string) => void;
+}
+export declare class SortBy {
+    private container;
+    private provider;
+    private options;
+    private currentValue;
+    private unsubscribeStateManager;
+    constructor(provider: SearchProvider, options: SortByOptions);
+    destroy(): void;
+    update(options: Partial<Pick<SortByOptions, 'value'>>): void;
+    private render;
+    private get theme();
+    private getContainerStyle;
+    private getLabelStyle;
+    private getSelectStyle;
+}
+//# sourceMappingURL=sort-by.d.ts.map

package/dist/components/sort-by.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sort-by.d.ts","sourceRoot":"","sources":["../../src/components/sort-by.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,aAAa;IAC5B,SAAS,EAAE,WAAW,GAAG,MAAM,CAAC;IAChC,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AAED,qBAAa,MAAM;IACjB,OAAO,CAAC,SAAS,CAAc;IAC/B,OAAO,CAAC,QAAQ,CAAiB;IACjC,OAAO,CAAC,OAAO,CAIb;IACF,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,uBAAuB,CAA6B;gBAEhD,QAAQ,EAAE,cAAc,EAAE,OAAO,EAAE,aAAa;IAgC5D,OAAO,IAAI,IAAI;IAOf,MAAM,CAAC,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC,GAAG,IAAI;IAO5D,OAAO,CAAC,MAAM;IAkDd,OAAO,KAAK,KAAK,GAEhB;IAED,OAAO,CAAC,iBAAiB;IAQzB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,cAAc;CAevB"}

package/dist/components/sort-by.js

@@ -0,0 +1,122 @@
+/**
+ * SortBy Component
+ *
+ * Displays sort options for search results
+ */
+import { log } from '@seekora-ai/ui-sdk-core';
+export class SortBy {
+    constructor(provider, options) {
+        this.unsubscribeStateManager = null;
+        this.provider = provider;
+        const container = typeof options.container === 'string'
+            ? document.querySelector(options.container)
+            : options.container;
+        if (!container) {
+            const error = new Error('SortBy: container element not found');
+            log.error('SortBy: Initialization failed', { error: error.message });
+            throw error;
+        }
+        this.container = container;
+        this.currentValue = options.value || options.options[0]?.value || '';
+        this.options = {
+            options: options.options,
+            label: options.label,
+            onSortChange: options.onSortChange,
+        };
+        // Subscribe to state manager to sync sort value
+        this.unsubscribeStateManager = this.provider.stateManager.subscribe((state) => {
+            if (state.sortBy && state.sortBy !== this.currentValue) {
+                this.currentValue = state.sortBy;
+                this.render();
+            }
+        });
+        this.render();
+    }
+    destroy() {
+        if (this.unsubscribeStateManager) {
+            this.unsubscribeStateManager();
+            this.unsubscribeStateManager = null;
+        }
+    }
+    update(options) {
+        if (options.value !== undefined) {
+            this.currentValue = options.value;
+            this.render();
+        }
+    }
+    render() {
+        this.container.innerHTML = '';
+        const wrapper = document.createElement('div');
+        wrapper.style.cssText = this.getContainerStyle();
+        if (this.options.label) {
+            const label = document.createElement('label');
+            label.textContent = this.options.label;
+            label.style.cssText = this.getLabelStyle();
+            wrapper.appendChild(label);
+        }
+        const select = document.createElement('select');
+        select.value = this.currentValue;
+        select.style.cssText = this.getSelectStyle();
+        select.setAttribute('aria-label', 'Sort results');
+        select.addEventListener('change', (e) => {
+            const target = e.target;
+            this.currentValue = target.value;
+            log.verbose('SortBy: Sort option changed', { value: target.value });
+            // Update state manager (automatically triggers search)
+            this.provider.stateManager.setSortBy(target.value);
+            // Call callback for backwards compatibility
+            if (this.options.onSortChange) {
+                try {
+                    this.options.onSortChange(target.value);
+                }
+                catch (err) {
+                    const error = err instanceof Error ? err : new Error(String(err));
+                    log.error('SortBy: Error in onSortChange callback', {
+                        value: target.value,
+                        error: error.message,
+                    });
+                }
+            }
+        });
+        this.options.options.forEach((option) => {
+            const optionEl = document.createElement('option');
+            optionEl.value = option.value;
+            optionEl.textContent = option.label;
+            select.appendChild(optionEl);
+        });
+        wrapper.appendChild(select);
+        this.container.appendChild(wrapper);
+    }
+    get theme() {
+        return this.provider.theme;
+    }
+    getContainerStyle() {
+        return `
+      display: flex;
+      align-items: center;
+      gap: ${this.theme.spacing.small};
+    `;
+    }
+    getLabelStyle() {
+        return `
+      font-size: ${this.theme.typography.fontSize.medium};
+      color: ${this.theme.colors.text};
+      font-weight: ${this.theme.typography.fontWeight?.medium || 500};
+    `;
+    }
+    getSelectStyle() {
+        const borderRadius = typeof this.theme.borderRadius === 'string'
+            ? this.theme.borderRadius
+            : this.theme.borderRadius.medium;
+        return `
+      padding: ${this.theme.spacing.small} ${this.theme.spacing.medium};
+      font-size: ${this.theme.typography.fontSize.medium};
+      border: 1px solid ${this.theme.colors.border};
+      border-radius: ${borderRadius};
+      background-color: ${this.theme.colors.background};
+      color: ${this.theme.colors.text};
+      cursor: pointer;
+      outline: none;
+    `;
+    }
+}