@squeletteapp/widget 1.1.0 → 3.0.0

package/dist/changelog-entry.js

@@ -0,0 +1,224 @@
+import { createWidget } from '@squeletteapp/widget-builder';
+// ============================================================================
+// Constants
+// ============================================================================
+const CACHE_DURATION_MS = 5 * 60 * 1000; // 5 minutes
+const STORAGE_KEY = 'squelette_banner_last_ticket';
+const DEFAULT_BASE = 'https://www.squelette.app';
+// ============================================================================
+// Cache Utilities
+// ============================================================================
+function getEnableCache(debug) {
+    // Only disable cache when debug is explicitly true
+    if (debug === true)
+        return false;
+    try {
+        const userPreference = localStorage.getItem('squelette-enable-cache');
+        if (userPreference === 'false')
+            return false;
+        return true;
+    }
+    catch {
+        return true;
+    }
+}
+async function fetchLastChangelogTicket(base, slug, debug) {
+    try {
+        const enableCache = getEnableCache(debug);
+        // Check cache first if enabled
+        if (enableCache) {
+            const cacheKey = `squelette_banner_cache_${slug}`;
+            const cached = localStorage.getItem(cacheKey);
+            if (cached) {
+                const { ticket, timestamp } = JSON.parse(cached);
+                const isExpired = Date.now() - timestamp > CACHE_DURATION_MS;
+                if (!isExpired) {
+                    return ticket;
+                }
+            }
+        }
+        // Fetch from API
+        const url = `${base}/api/public/w/${slug}/changelog/last`;
+        const response = await fetch(url);
+        const json = (await response.json());
+        const ticket = json?.ticket ?? null;
+        // Store in cache if enabled
+        if (enableCache && ticket) {
+            const cacheKey = `squelette_banner_cache_${slug}`;
+            const cachedData = {
+                ticket,
+                timestamp: Date.now(),
+            };
+            localStorage.setItem(cacheKey, JSON.stringify(cachedData));
+        }
+        return ticket;
+    }
+    catch (e) {
+        console.error('[SqueletteBanner] Error fetching changelog ticket:', e);
+        return null;
+    }
+}
+function shouldShowBanner(ticket, debug) {
+    const lastSeenCreatedAt = localStorage.getItem(STORAGE_KEY);
+    // Show if cache is disabled, never seen before, or newer ticket
+    return (!getEnableCache(debug) ||
+        !lastSeenCreatedAt ||
+        new Date(ticket.created_at) > new Date(lastSeenCreatedAt));
+}
+function markTicketAsSeen(ticket) {
+    localStorage.setItem(STORAGE_KEY, ticket.created_at);
+}
+/**
+ * Wrap a Widget with setTheme functionality
+ * Sends a THEME_UPDATE message to the iframe instead of reloading
+ */
+function withTheme(widget) {
+    return {
+        ...widget,
+        setTheme(theme) {
+            const message = {
+                type: 'THEME_UPDATE',
+                payload: { theme },
+            };
+            widget.sendMessage(message);
+        },
+    };
+}
+// ============================================================================
+// Widget Store
+// ============================================================================
+export function createChangelogStore() {
+    const widgets = {};
+    return {
+        getState: () => widgets,
+        mount: async (source, widget) => {
+            widgets[source] = widget;
+            widget.preload();
+        },
+        open: async (source) => {
+            const widget = widgets[source];
+            if (widget) {
+                widget.open();
+            }
+        },
+        unmount: (source) => {
+            const widget = widgets[source];
+            if (widget) {
+                widget.destroy();
+                delete widgets[source];
+            }
+        },
+        setTheme: (theme) => {
+            for (const widget of Object.values(widgets)) {
+                widget.setTheme(theme);
+            }
+        },
+    };
+}
+// ============================================================================
+// Widget Creators
+// ============================================================================
+export function createChangelogEntryWidget(ticketId, options = {}) {
+    const { base = DEFAULT_BASE, contentTheme = 'light', slug = 'squelette' } = options;
+    const widget = createWidget({
+        elementName: 'sq-changelog-entry-widget',
+        source: `${base}/widget/${contentTheme}/${slug}/changelog/${ticketId}`,
+        position: 'center',
+        overlay: true,
+    });
+    return withTheme(widget);
+}
+/**
+ * Creates and initializes a changelog banner widget.
+ * - Fetches the latest changelog ticket
+ * - Checks if it should be shown (not already seen)
+ * - Preloads the iframe, which will send OPEN_WIDGET when ready
+ * - Returns null if nothing to show
+ */
+export async function createChangelogBannerWidget(store, options) {
+    const { base = DEFAULT_BASE, contentTheme = 'light', slug, debug = false } = options;
+    // Fetch the latest ticket
+    const ticket = await fetchLastChangelogTicket(base, slug, debug);
+    if (!ticket) {
+        return null;
+    }
+    const shouldRender = shouldShowBanner(ticket, debug);
+    // Check if we should show the banner
+    if (!shouldRender) {
+        return null;
+    }
+    const ticketId = String(ticket.id);
+    // Preload the entry widget for when user clicks the banner
+    store.mount(ticketId, createChangelogEntryWidget(ticketId, { base, contentTheme, slug }));
+    const widget = createWidget({
+        elementName: 'sq-changelog-banner-widget',
+        source: `${base}/widget/${contentTheme}/${slug}/changelog/${ticketId}/banner`,
+        position: 's',
+        overlay: false,
+        fitToContent: true,
+        style: {
+            borderRadius: 32,
+            height: 32,
+        },
+        onMessage: (type, message, actions) => {
+            // Iframe signals it's ready to be shown
+            if (type === 'OPEN_WIDGET') {
+                widget.open();
+            }
+            // User clicked on the banner content
+            if (type === 'OPEN_CHANGELOG_ENTRY') {
+                const id = message.payload.ticketId;
+                actions.close();
+                store.open(id);
+            }
+        },
+    });
+    // Register callback to mark ticket as seen when banner closes
+    widget.onOpenChange((isOpen) => {
+        if (!isOpen) {
+            markTicketAsSeen(ticket);
+        }
+    });
+    // Preload the iframe - it will send OPEN_WIDGET when content is ready
+    widget.preload();
+    return withTheme(widget);
+}
+export function createChangelogEntriesListDropdownWidget(anchor, store, options = {}) {
+    const { base = DEFAULT_BASE, contentTheme = 'light', slug = 'squelette', position = 'nw' } = options;
+    const widget = createWidget({
+        elementName: 'sq-changelog-entries-list-dropdown-widget',
+        source: `${base}/widget/${contentTheme}/${slug}/changelog/list`,
+        position,
+        anchor,
+        fitToContent: true,
+        onMessage: (type, message, actions) => {
+            if (type === 'PRELOAD_CHANGELOG_ENTRIES') {
+                const ids = message.payload.ids;
+                for (const id of ids) {
+                    store.mount(id, createChangelogEntryWidget(id, { base, contentTheme, slug }));
+                }
+            }
+            if (type === 'OPEN_CHANGELOG_ENTRY') {
+                const ticketId = message.payload.ticketId;
+                actions.close();
+                store.open(ticketId);
+            }
+        },
+    });
+    return withTheme(widget);
+}
+// ============================================================================
+// Utility
+// ============================================================================
+/**
+ * Clear the cache for a specific workspace
+ */
+export function clearBannerCache(slug) {
+    try {
+        localStorage.removeItem(`squelette_banner_cache_${slug}`);
+        localStorage.removeItem(STORAGE_KEY);
+    }
+    catch {
+        // Ignore localStorage errors
+    }
+}