@seekora-ai/ui-sdk-vanilla 0.2.11 → 0.2.13

package/dist/index.js

@@ -2,6 +2,199 @@
 
 var uiSdkCore = require('@seekora-ai/ui-sdk-core');
 
+/**
+ * RatingDisplay - Vanilla JS
+ *
+ * Star rating display with review count and multiple variants
+ */
+const sizeMap = {
+    small: 14,
+    medium: 18,
+    large: 24,
+};
+const fontSizeMap = {
+    small: '0.75rem',
+    medium: '0.875rem',
+    large: '1rem',
+};
+class RatingDisplay {
+    constructor(containerOrSelector, options) {
+        this.hoverRating = null;
+        this.container = typeof containerOrSelector === 'string'
+            ? document.querySelector(containerOrSelector)
+            : containerOrSelector;
+        if (!this.container) {
+            throw new Error('RatingDisplay: Container element not found');
+        }
+        this.options = {
+            variant: 'compact',
+            size: 'medium',
+            maxRating: 5,
+            showNumeric: false,
+            showHalfStars: true,
+            interactive: false,
+            starColor: '#f59e0b',
+            emptyStarColor: '#d1d5db',
+            textColor: 'var(--seekora-text-secondary, #6b7280)',
+            showReviewCount: true,
+            onRatingChange: () => { },
+            reviewCountFormat: this.defaultReviewCountFormat,
+            className: '',
+            ...options,
+        };
+        this.render();
+    }
+    defaultReviewCountFormat(count) {
+        if (count >= 1000000)
+            return `${(count / 1000000).toFixed(1)}M`;
+        if (count >= 1000)
+            return `${(count / 1000).toFixed(1)}K`;
+        return count.toString();
+    }
+    createStarSVG(filled, half, size) {
+        const { starColor, emptyStarColor } = this.options;
+        if (half) {
+            return `
+        <svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <defs>
+            <linearGradient id="half-fill-${Math.random()}">
+              <stop offset="50%" stop-color="${starColor}" />
+              <stop offset="50%" stop-color="${emptyStarColor}" />
+            </linearGradient>
+          </defs>
+          <path
+            d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"
+            fill="url(#half-fill-${Math.random()})"
+            stroke="${starColor}"
+            stroke-width="1"
+          />
+        </svg>
+      `;
+        }
+        return `
+      <svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="${filled ? starColor : 'none'}" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"
+          stroke="${filled ? starColor : emptyStarColor}"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    `;
+    }
+    renderStars() {
+        const { rating, maxRating, showHalfStars, interactive } = this.options;
+        const displayRating = interactive && this.hoverRating !== null ? this.hoverRating : rating;
+        const starSize = sizeMap[this.options.size];
+        let starsHTML = '';
+        for (let i = 1; i <= maxRating; i++) {
+            const filled = i <= Math.floor(displayRating);
+            const half = showHalfStars &&
+                i === Math.ceil(displayRating) &&
+                displayRating % 1 >= 0.25 &&
+                displayRating % 1 < 0.75;
+            const classes = `seekora-rating-star ${filled ? 'seekora-rating-star--filled' : 'seekora-rating-star--empty'} ${interactive ? 'seekora-rating-star--interactive' : ''}`;
+            starsHTML += `
+        <span
+          class="${classes}"
+          data-rating="${i}"
+          style="display: inline-block; width: ${starSize}px; height: ${starSize}px; cursor: ${interactive ? 'pointer' : 'default'};"
+        >
+          ${this.createStarSVG(filled, half, starSize)}
+        </span>
+      `;
+        }
+        return `<div style="display: inline-flex; align-items: center; gap: 2px;">${starsHTML}</div>`;
+    }
+    render() {
+        const { variant, rating, reviewCount, showNumeric, showReviewCount, textColor, maxRating, className } = this.options;
+        const fontSize = fontSizeMap[this.options.size];
+        const clampedRating = Math.max(0, Math.min(maxRating, rating));
+        let html = '';
+        if (variant === 'stars-only') {
+            html = `
+        <div class="seekora-rating-display seekora-rating-display--stars-only ${className}"
+             style="display: inline-flex; align-items: center; gap: 2px;">
+          ${this.renderStars()}
+        </div>
+      `;
+        }
+        else if (variant === 'compact') {
+            html = `
+        <div class="seekora-rating-display seekora-rating-display--compact ${className}"
+             style="display: inline-flex; align-items: center; gap: 4px; font-size: ${fontSize};">
+          ${this.renderStars()}
+          ${showNumeric ? `<span class="seekora-rating-numeric" style="font-weight: 600; color: ${textColor};">${clampedRating.toFixed(1)}</span>` : ''}
+          ${showReviewCount && reviewCount != null && reviewCount > 0 ? `<span class="seekora-rating-review-count" style="color: ${textColor};">(${this.options.reviewCountFormat(reviewCount)})</span>` : ''}
+        </div>
+      `;
+        }
+        else if (variant === 'inline') {
+            html = `
+        <div class="seekora-rating-display seekora-rating-display--inline ${className}"
+             style="display: inline-flex; align-items: center; gap: 6px; font-size: ${fontSize};">
+          <span class="seekora-rating-numeric" style="font-weight: 600; color: var(--seekora-text-primary, #111827);">${clampedRating.toFixed(1)}</span>
+          ${this.renderStars()}
+          ${showReviewCount && reviewCount != null && reviewCount > 0 ? `<span class="seekora-rating-review-count" style="color: ${textColor};">(${this.options.reviewCountFormat(reviewCount)})</span>` : ''}
+        </div>
+      `;
+        }
+        else if (variant === 'full') {
+            html = `
+        <div class="seekora-rating-display seekora-rating-display--full ${className}"
+             style="display: flex; flex-direction: column; gap: 4px; font-size: ${fontSize};">
+          <div style="display: flex; align-items: center; gap: 6px;">
+            ${this.renderStars()}
+            <span class="seekora-rating-numeric" style="font-weight: 600; color: var(--seekora-text-primary, #111827);">${clampedRating.toFixed(1)}</span>
+            <span class="seekora-rating-max" style="color: ${textColor};">/ ${maxRating}</span>
+          </div>
+          ${showReviewCount && reviewCount != null && reviewCount > 0 ? `
+            <span class="seekora-rating-review-text" style="font-size: 0.875em; color: ${textColor};">
+              Based on ${this.options.reviewCountFormat(reviewCount)} ${reviewCount === 1 ? 'review' : 'reviews'}
+            </span>
+          ` : ''}
+        </div>
+      `;
+        }
+        this.container.innerHTML = html;
+        if (this.options.interactive) {
+            this.attachEventListeners();
+        }
+    }
+    attachEventListeners() {
+        const stars = this.container.querySelectorAll('.seekora-rating-star');
+        stars.forEach((star) => {
+            star.addEventListener('mouseenter', () => {
+                const rating = parseInt(star.dataset.rating || '0');
+                this.hoverRating = rating;
+                this.render();
+            });
+            star.addEventListener('click', () => {
+                const rating = parseInt(star.dataset.rating || '0');
+                this.hoverRating = null;
+                this.options.onRatingChange(rating);
+                this.render();
+            });
+        });
+        this.container.addEventListener('mouseleave', () => {
+            this.hoverRating = null;
+            this.render();
+        });
+    }
+    update(options) {
+        this.options = { ...this.options, ...options };
+        this.render();
+    }
+    destroy() {
+        this.container.innerHTML = '';
+    }
+}
+// Factory function for easier usage
+function createRatingDisplay(container, options) {
+    return new RatingDisplay(container, options);
+}
+
 /**
  * Default Theme
  */
@@ -4069,6 +4262,7 @@ exports.InfiniteHits = InfiniteHits;
 exports.Pagination = Pagination;
 exports.QuerySuggestions = QuerySuggestions;
 exports.RangeInput = RangeInput;
+exports.RatingDisplay = RatingDisplay;
 exports.SearchBar = SearchBar;
 exports.SearchLayout = SearchLayout;
 exports.SearchManager = SearchManager;
@@ -4076,6 +4270,7 @@ exports.SearchProvider = SearchProvider;
 exports.SearchResults = SearchResults;
 exports.SortBy = SortBy;
 exports.Stats = Stats;
+exports.createRatingDisplay = createRatingDisplay;
 exports.createTheme = createTheme;
 exports.darkTheme = darkTheme;
 exports.defaultTheme = defaultTheme;